From 5fcd3d794de929f5b4eb32169fff512a41e6ce95 Mon Sep 17 00:00:00 2001
From: "Darryl L. Pierce" <mcpierce@gmail.com>
Date: Wed, 6 Oct 2021 11:17:43 -0400
Subject: [PATCH] Added a columnar display for pages in a comic [#958]

 * Renamed submodule comic-book => comic-books.
---
 comixed-webui/src/app/app.component.spec.ts   |   4 +-
 comixed-webui/src/app/app.component.ts        |   4 +-
 comixed-webui/src/app/app.module.ts           |   2 +-
 .../collection-detail.component.spec.ts       |   4 +-
 .../collection-detail.component.ts            |   4 +-
 .../collection-list.component.spec.ts         |   8 +-
 .../collection-list.component.ts              |   2 +-
 .../comic-page/comic-page.component.html      |  22 ---
 .../comic-book-page.component.html            | 187 ------------------
 .../comic-book-page.component.scss            |   4 -
 .../actions/comic-list.actions.ts             |   2 +-
 .../actions/comic.actions.ts                  |   2 +-
 .../actions/imprint-list.actions.ts           |   2 +-
 .../actions/mark-comics-deleted.actions.ts    |   2 +-
 .../actions/scraping.actions.ts               |   2 +-
 .../comic-book.constants.ts                   |   0
 .../comic-book.fixtures.ts                    |  16 +-
 .../comic-book.module.ts                      |  34 ++--
 .../comic-book.routing.ts                     |   2 +-
 .../comic-detail-card.component.html          |   2 +-
 .../comic-detail-card.component.scss          |   5 -
 .../comic-detail-card.component.spec.ts       |   2 +-
 .../comic-detail-card.component.ts            |   8 +-
 .../comic-edit/comic-edit.component.html      |   0
 .../comic-edit/comic-edit.component.scss      |   0
 .../comic-edit/comic-edit.component.spec.ts   |   6 +-
 .../comic-edit/comic-edit.component.ts        |  12 +-
 .../comic-overview.component.html             |   0
 .../comic-overview.component.scss             |   0
 .../comic-overview.component.spec.ts          |   8 +-
 .../comic-overview.component.ts               |   4 +-
 .../comic-page/comic-page.component.html      |  24 +++
 .../comic-page/comic-page.component.scss      |   0
 .../comic-page/comic-page.component.spec.ts   |  79 +-------
 .../comic-page/comic-page.component.ts        |  37 +---
 .../comic-pages/comic-pages.component.html    |  23 ++-
 .../comic-pages/comic-pages.component.scss    |   0
 .../comic-pages/comic-pages.component.spec.ts |   6 +-
 .../comic-pages/comic-pages.component.ts      |   4 +-
 .../comic-scraping.component.html             |   0
 .../comic-scraping.component.scss             |   0
 .../comic-scraping.component.spec.ts          |  10 +-
 .../comic-scraping.component.ts               |  10 +-
 .../comic-story/comic-story.component.html    |  10 +-
 .../comic-story/comic-story.component.scss    |   0
 .../comic-story/comic-story.component.spec.ts |   4 +-
 .../comic-story/comic-story.component.ts      |   2 +-
 .../scraping-issue-detail.component.html      |   7 +-
 .../scraping-issue-detail.component.scss      |   0
 .../scraping-issue-detail.component.spec.ts   |   6 +-
 .../scraping-issue-detail.component.ts        |   3 +-
 .../effects/comic-list.effects.spec.ts        |  14 +-
 .../effects/comic-list.effects.ts             |   8 +-
 .../effects/comic.effects.spec.ts             |   6 +-
 .../effects/comic.effects.ts                  |   6 +-
 .../effects/imprint-list.effects.spec.ts      |   6 +-
 .../effects/imprint-list.effects.ts           |   4 +-
 .../mark-comics-deleted.effects.spec.ts       |  12 +-
 .../effects/mark-comics-deleted.effects.ts    |   2 +-
 .../effects/scraping.effects.spec.ts          |   8 +-
 .../effects/scraping.effects.ts               |  12 +-
 .../app/{comic-book => comic-books}/index.ts  |   0
 .../models/archive-type.enum.ts               |   0
 .../models/comic-book-state.ts                |   0
 .../models/comic-credit.ts                    |   0
 .../models/comic-file-entry.ts                |   0
 .../models/comic.ts                           |  12 +-
 .../models/event/comic-select-event.ts        |   2 +-
 .../models/event/page-context-menu-event.ts   |   2 +-
 .../models/event/update-comic-info-event.ts   |   2 +-
 .../models/file-details.ts                    |   0
 .../models/imprint.ts                         |   0
 .../models/net/load-comics-request.ts         |   0
 .../models/net/load-comics-response.ts        |   2 +-
 .../models/net/load-scraping-issue-request.ts |   0
 .../net/load-scraping-volumes-request.ts      |   0
 .../models/net/mark-comics-deleted-request.ts |   0
 .../net/mark-comics-undeleted-request.ts      |   0
 .../models/net/scrape-comic-request.ts        |   0
 .../models/page.ts                            |   2 +-
 .../models/scraping-issue.ts                  |   0
 .../models/scraping-volume.ts                 |   0
 .../models/ui/comic-context-menu-event.ts     |   2 +-
 .../models/ui/scrape-event.ts                 |   0
 .../comic-book-page.component.html            | 187 ++++++++++++++++++
 .../comic-book-page.component.scss            |   0
 .../comic-book-page.component.spec.ts         |  41 ++--
 .../comic-book-page.component.ts              |  18 +-
 .../pipes/comic-cover-url.pipe.spec.ts        |   2 +-
 .../pipes/comic-cover-url.pipe.ts             |   2 +-
 .../pipes/comic-page-url.pipe.spec.ts         |   0
 .../pipes/comic-page-url.pipe.ts              |   2 +-
 .../pipes/comic-title.pipe.spec.ts            |   2 +-
 .../pipes/comic-title.pipe.ts                 |   2 +-
 .../pipes/comicvine-issue-link.pipe.spec.ts   |   4 +-
 .../pipes/comicvine-issue-link.pipe.ts        |   4 +-
 .../pipes/page-hash-url.pipe.spec.ts          |   2 +-
 .../pipes/page-hash-url.pipe.ts               |   2 +-
 .../pipes/scraping-issue-title.pipe.spec.ts   |   0
 .../pipes/scraping-issue-title.pipe.ts        |   2 +-
 .../reducers/comic-list.reducer.spec.ts       |   4 +-
 .../reducers/comic-list.reducer.ts            |   2 +-
 .../reducers/comic.reducer.spec.ts            |   4 +-
 .../reducers/comic.reducer.ts                 |   2 +-
 .../reducers/imprint-list.reducer.spec.ts     |   4 +-
 .../reducers/imprint-list.reducer.ts          |   2 +-
 .../mark-comics-deleted.reducer.spec.ts       |   4 +-
 .../reducers/mark-comics-deleted.reducer.ts   |   0
 .../reducers/scraping.reducer.spec.ts         |   4 +-
 .../reducers/scraping.reducer.ts              |   6 +-
 .../selectors/comic-list.selectors.spec.ts    |   6 +-
 .../selectors/comic-list.selectors.ts         |   2 +-
 .../selectors/comic.selectors.spec.ts         |   2 +-
 .../selectors/comic.selectors.ts              |   0
 .../selectors/imprint-list.selectors.spec.ts  |   2 +-
 .../selectors/imprint-list.selectors.ts       |   0
 .../mark-comics-deleted.selectors.spec.ts     |   2 +-
 .../mark-comics-deleted.selectors.ts          |   0
 .../selectors/scraping.selectors.spec.ts      |   2 +-
 .../selectors/scraping.selectors.ts           |   0
 .../services/comic-list.service.spec.ts       |   4 +-
 .../services/comic-list.service.ts            |   4 +-
 .../services/comic.service.spec.ts            |  12 +-
 .../services/comic.service.ts                 |   8 +-
 .../services/imprint.service.spec.ts          |   4 +-
 .../services/imprint.service.ts               |   2 +-
 .../services/page.service.spec.ts             |   0
 .../services/page.service.ts                  |   0
 .../services/scraping.service.spec.ts         |   6 +-
 .../services/scraping.service.ts              |   8 +-
 .../src/app/comic-file/comic-file.module.ts   |   2 +-
 .../comic-file-details.component.spec.ts      |   2 +-
 .../import-comics-page.component.spec.ts      |   2 +-
 .../comic-pages/actions/block-page.actions.ts |   2 +-
 .../app/comic-pages/comic-pages.fixtures.ts   |   2 +-
 .../footer/footer.component.spec.ts           |   2 +-
 .../app/components/footer/footer.component.ts |   2 +-
 .../actions/update-read-status.actions.ts     |   2 +-
 .../update-read-status.effects.spec.ts        |   2 +-
 .../src/app/last-read/last-read.fixtures.ts   |   2 +-
 .../update-read-status.reducer.spec.ts        |   2 +-
 .../services/last-read.service.spec.ts        |   2 +-
 .../last-read/services/last-read.service.ts   |   2 +-
 .../library/actions/convert-comics.actions.ts |   4 +-
 .../app/library/actions/library.actions.ts    |   2 +-
 .../library/actions/rescan-comics.actions.ts  |   2 +-
 .../actions/update-metadata.actions.ts        |   2 +-
 .../comic-covers/comic-covers.component.html  |   9 +-
 .../comic-covers.component.spec.ts            |   8 +-
 .../comic-covers/comic-covers.component.ts    |   8 +-
 .../comic-details-dialog.component.spec.ts    |   6 +-
 .../comic-details-dialog.component.ts         |   2 +-
 .../comic-list-view.component.spec.ts         |   8 +-
 .../comic-list-view.component.ts              |   2 +-
 ...mics-with-duplicate-page.component.spec.ts |  12 +-
 .../library-toolbar.component.spec.ts         |   8 +-
 .../library-toolbar.component.ts              |   4 +-
 .../selected-comics.component.spec.ts         |   2 +-
 .../selected-comics.component.ts              |   2 +-
 .../consolidate-library.effects.spec.ts       |   6 +-
 .../effects/convert-comics.effects.spec.ts    |   8 +-
 .../library/effects/library.effects.spec.ts   |   2 +-
 .../effects/rescan-comics.effects.spec.ts     |   6 +-
 .../effects/update-metadata.effects.spec.ts   |   6 +-
 .../effects/update-metadata.effects.ts        |   2 +-
 .../src/app/library/library.fixtures.ts       |   2 +-
 .../src/app/library/library.module.ts         |   2 +-
 .../src/app/library/models/duplicate-page.ts  |   2 +-
 .../models/net/convert-comics-request.ts      |   2 +-
 ...plicate-page-detail-page.component.spec.ts |   4 +-
 .../duplicate-page-detail-page.component.ts   |   2 +-
 ...duplicate-page-list-page.component.spec.ts |   2 +-
 .../library-page.component.spec.ts            |   6 +-
 .../library-page/library-page.component.ts    |   6 +-
 .../scraping-page.component.spec.ts           |   8 +-
 .../scraping-page/scraping-page.component.ts  |  10 +-
 .../library/pipes/archive-type.pipe.spec.ts   |   8 +-
 .../app/library/pipes/archive-type.pipe.ts    |   4 +-
 .../library/pipes/deleted-comics.pipe.spec.ts |   4 +-
 .../app/library/pipes/deleted-comics.pipe.ts  |   2 +-
 .../library/pipes/unread-comics.pipe.spec.ts  |   6 +-
 .../app/library/pipes/unread-comics.pipe.ts   |   2 +-
 .../reducers/convert-comics.reducer.spec.ts   |   8 +-
 .../library/reducers/library.reducer.spec.ts  |   8 +-
 .../app/library/reducers/library.reducer.ts   |   2 +-
 .../reducers/rescan-comics.reducer.spec.ts    |   6 +-
 .../reducers/update-metadata.reducer.spec.ts  |   6 +-
 .../selectors/library.selectors.spec.ts       |   6 +-
 .../library/services/library.service.spec.ts  |   4 +-
 .../app/library/services/library.service.ts   |   4 +-
 .../actions/reading-list-entries.actions.ts   |   2 +-
 .../reading-list-entries.effects.spec.ts      |   2 +-
 .../src/app/lists/models/reading-list.ts      |   2 +-
 .../src/app/lists/models/story-entry.ts       |   2 +-
 .../reading-list-page.component.spec.ts       |   6 +-
 .../reading-list-page.component.ts            |   2 +-
 .../reading-list-entries.reducer.spec.ts      |   2 +-
 .../services/reading-list.service.spec.ts     |   2 +-
 .../lists/services/reading-list.service.ts    |   2 +-
 comixed-webui/src/styles.scss                 |  11 +-
 200 files changed, 661 insertions(+), 668 deletions(-)
 delete mode 100644 comixed-webui/src/app/comic-book/components/comic-page/comic-page.component.html
 delete mode 100644 comixed-webui/src/app/comic-book/pages/comic-book-page/comic-book-page.component.html
 delete mode 100644 comixed-webui/src/app/comic-book/pages/comic-book-page/comic-book-page.component.scss
 rename comixed-webui/src/app/{comic-book => comic-books}/actions/comic-list.actions.ts (96%)
 rename comixed-webui/src/app/{comic-book => comic-books}/actions/comic.actions.ts (96%)
 rename comixed-webui/src/app/{comic-book => comic-books}/actions/imprint-list.actions.ts (95%)
 rename comixed-webui/src/app/{comic-book => comic-books}/actions/mark-comics-deleted.actions.ts (95%)
 rename comixed-webui/src/app/{comic-book => comic-books}/actions/scraping.actions.ts (97%)
 rename comixed-webui/src/app/{comic-book => comic-books}/comic-book.constants.ts (100%)
 rename comixed-webui/src/app/{comic-book => comic-books}/comic-book.fixtures.ts (92%)
 rename comixed-webui/src/app/{comic-book => comic-books}/comic-book.module.ts (81%)
 rename comixed-webui/src/app/{comic-book => comic-books}/comic-book.routing.ts (91%)
 rename comixed-webui/src/app/{comic-book => comic-books}/components/comic-detail-card/comic-detail-card.component.html (96%)
 rename comixed-webui/src/app/{comic-book => comic-books}/components/comic-detail-card/comic-detail-card.component.scss (89%)
 rename comixed-webui/src/app/{comic-book => comic-books}/components/comic-detail-card/comic-detail-card.component.spec.ts (98%)
 rename comixed-webui/src/app/{comic-book => comic-books}/components/comic-detail-card/comic-detail-card.component.ts (88%)
 rename comixed-webui/src/app/{comic-book => comic-books}/components/comic-edit/comic-edit.component.html (100%)
 rename comixed-webui/src/app/{comic-book => comic-books}/components/comic-edit/comic-edit.component.scss (100%)
 rename comixed-webui/src/app/{comic-book => comic-books}/components/comic-edit/comic-edit.component.spec.ts (97%)
 rename comixed-webui/src/app/{comic-book => comic-books}/components/comic-edit/comic-edit.component.ts (95%)
 rename comixed-webui/src/app/{comic-book => comic-books}/components/comic-overview/comic-overview.component.html (100%)
 rename comixed-webui/src/app/{comic-book => comic-books}/components/comic-overview/comic-overview.component.scss (100%)
 rename comixed-webui/src/app/{comic-book => comic-books}/components/comic-overview/comic-overview.component.spec.ts (90%)
 rename comixed-webui/src/app/{comic-book => comic-books}/components/comic-overview/comic-overview.component.ts (92%)
 create mode 100644 comixed-webui/src/app/comic-books/components/comic-page/comic-page.component.html
 rename comixed-webui/src/app/{comic-book => comic-books}/components/comic-page/comic-page.component.scss (100%)
 rename comixed-webui/src/app/{comic-book => comic-books}/components/comic-page/comic-page.component.spec.ts (51%)
 rename comixed-webui/src/app/{comic-book => comic-books}/components/comic-page/comic-page.component.ts (63%)
 rename comixed-webui/src/app/{comic-book => comic-books}/components/comic-pages/comic-pages.component.html (67%)
 rename comixed-webui/src/app/{comic-book => comic-books}/components/comic-pages/comic-pages.component.scss (100%)
 rename comixed-webui/src/app/{comic-book => comic-books}/components/comic-pages/comic-pages.component.spec.ts (93%)
 rename comixed-webui/src/app/{comic-book => comic-books}/components/comic-pages/comic-pages.component.ts (94%)
 rename comixed-webui/src/app/{comic-book => comic-books}/components/comic-scraping/comic-scraping.component.html (100%)
 rename comixed-webui/src/app/{comic-book => comic-books}/components/comic-scraping/comic-scraping.component.scss (100%)
 rename comixed-webui/src/app/{comic-book => comic-books}/components/comic-scraping/comic-scraping.component.spec.ts (96%)
 rename comixed-webui/src/app/{comic-book => comic-books}/components/comic-scraping/comic-scraping.component.ts (95%)
 rename comixed-webui/src/app/{comic-book => comic-books}/components/comic-story/comic-story.component.html (89%)
 rename comixed-webui/src/app/{comic-book => comic-books}/components/comic-story/comic-story.component.scss (100%)
 rename comixed-webui/src/app/{comic-book => comic-books}/components/comic-story/comic-story.component.spec.ts (92%)
 rename comixed-webui/src/app/{comic-book => comic-books}/components/comic-story/comic-story.component.ts (95%)
 rename comixed-webui/src/app/{comic-book => comic-books}/components/scraping-issue-detail/scraping-issue-detail.component.html (90%)
 rename comixed-webui/src/app/{comic-book => comic-books}/components/scraping-issue-detail/scraping-issue-detail.component.scss (100%)
 rename comixed-webui/src/app/{comic-book => comic-books}/components/scraping-issue-detail/scraping-issue-detail.component.spec.ts (91%)
 rename comixed-webui/src/app/{comic-book => comic-books}/components/scraping-issue-detail/scraping-issue-detail.component.ts (93%)
 rename comixed-webui/src/app/{comic-book => comic-books}/effects/comic-list.effects.spec.ts (90%)
 rename comixed-webui/src/app/{comic-book => comic-books}/effects/comic-list.effects.ts (88%)
 rename comixed-webui/src/app/{comic-book => comic-books}/effects/comic.effects.spec.ts (96%)
 rename comixed-webui/src/app/{comic-book => comic-books}/effects/comic.effects.ts (95%)
 rename comixed-webui/src/app/{comic-book => comic-books}/effects/imprint-list.effects.spec.ts (95%)
 rename comixed-webui/src/app/{comic-book => comic-books}/effects/imprint-list.effects.ts (94%)
 rename comixed-webui/src/app/{comic-book => comic-books}/effects/mark-comics-deleted.effects.spec.ts (92%)
 rename comixed-webui/src/app/{comic-book => comic-books}/effects/mark-comics-deleted.effects.ts (97%)
 rename comixed-webui/src/app/{comic-book => comic-books}/effects/scraping.effects.spec.ts (97%)
 rename comixed-webui/src/app/{comic-book => comic-books}/effects/scraping.effects.ts (93%)
 rename comixed-webui/src/app/{comic-book => comic-books}/index.ts (100%)
 rename comixed-webui/src/app/{comic-book => comic-books}/models/archive-type.enum.ts (100%)
 rename comixed-webui/src/app/{comic-book => comic-books}/models/comic-book-state.ts (100%)
 rename comixed-webui/src/app/{comic-book => comic-books}/models/comic-credit.ts (100%)
 rename comixed-webui/src/app/{comic-book => comic-books}/models/comic-file-entry.ts (100%)
 rename comixed-webui/src/app/{comic-book => comic-books}/models/comic.ts (79%)
 rename comixed-webui/src/app/{comic-book => comic-books}/models/event/comic-select-event.ts (94%)
 rename comixed-webui/src/app/{comic-book => comic-books}/models/event/page-context-menu-event.ts (94%)
 rename comixed-webui/src/app/{comic-book => comic-books}/models/event/update-comic-info-event.ts (93%)
 rename comixed-webui/src/app/{comic-book => comic-books}/models/file-details.ts (100%)
 rename comixed-webui/src/app/{comic-book => comic-books}/models/imprint.ts (100%)
 rename comixed-webui/src/app/{comic-book => comic-books}/models/net/load-comics-request.ts (100%)
 rename comixed-webui/src/app/{comic-book => comic-books}/models/net/load-comics-response.ts (94%)
 rename comixed-webui/src/app/{comic-book => comic-books}/models/net/load-scraping-issue-request.ts (100%)
 rename comixed-webui/src/app/{comic-book => comic-books}/models/net/load-scraping-volumes-request.ts (100%)
 rename comixed-webui/src/app/{comic-book => comic-books}/models/net/mark-comics-deleted-request.ts (100%)
 rename comixed-webui/src/app/{comic-book => comic-books}/models/net/mark-comics-undeleted-request.ts (100%)
 rename comixed-webui/src/app/{comic-book => comic-books}/models/net/scrape-comic-request.ts (100%)
 rename comixed-webui/src/app/{comic-book => comic-books}/models/page.ts (94%)
 rename comixed-webui/src/app/{comic-book => comic-books}/models/scraping-issue.ts (100%)
 rename comixed-webui/src/app/{comic-book => comic-books}/models/scraping-volume.ts (100%)
 rename comixed-webui/src/app/{comic-book => comic-books}/models/ui/comic-context-menu-event.ts (93%)
 rename comixed-webui/src/app/{comic-book => comic-books}/models/ui/scrape-event.ts (100%)
 create mode 100644 comixed-webui/src/app/comic-books/pages/comic-book-page/comic-book-page.component.html
 create mode 100644 comixed-webui/src/app/comic-books/pages/comic-book-page/comic-book-page.component.scss
 rename comixed-webui/src/app/{comic-book => comic-books}/pages/comic-book-page/comic-book-page.component.spec.ts (87%)
 rename comixed-webui/src/app/{comic-book => comic-books}/pages/comic-book-page/comic-book-page.component.ts (94%)
 rename comixed-webui/src/app/{comic-book => comic-books}/pipes/comic-cover-url.pipe.spec.ts (94%)
 rename comixed-webui/src/app/{comic-book => comic-books}/pipes/comic-cover-url.pipe.ts (95%)
 rename comixed-webui/src/app/{comic-book => comic-books}/pipes/comic-page-url.pipe.spec.ts (100%)
 rename comixed-webui/src/app/{comic-book => comic-books}/pipes/comic-page-url.pipe.ts (95%)
 rename comixed-webui/src/app/{comic-book => comic-books}/pipes/comic-title.pipe.spec.ts (96%)
 rename comixed-webui/src/app/{comic-book => comic-books}/pipes/comic-title.pipe.ts (95%)
 rename comixed-webui/src/app/{comic-book => comic-books}/pipes/comicvine-issue-link.pipe.spec.ts (90%)
 rename comixed-webui/src/app/{comic-book => comic-books}/pipes/comicvine-issue-link.pipe.ts (88%)
 rename comixed-webui/src/app/{comic-book => comic-books}/pipes/page-hash-url.pipe.spec.ts (94%)
 rename comixed-webui/src/app/{comic-book => comic-books}/pipes/page-hash-url.pipe.ts (93%)
 rename comixed-webui/src/app/{comic-book => comic-books}/pipes/scraping-issue-title.pipe.spec.ts (100%)
 rename comixed-webui/src/app/{comic-book => comic-books}/pipes/scraping-issue-title.pipe.ts (93%)
 rename comixed-webui/src/app/{comic-book => comic-books}/reducers/comic-list.reducer.spec.ts (98%)
 rename comixed-webui/src/app/{comic-book => comic-books}/reducers/comic-list.reducer.ts (97%)
 rename comixed-webui/src/app/{comic-book => comic-books}/reducers/comic.reducer.spec.ts (97%)
 rename comixed-webui/src/app/{comic-book => comic-books}/reducers/comic.reducer.ts (97%)
 rename comixed-webui/src/app/{comic-book => comic-books}/reducers/imprint-list.reducer.spec.ts (95%)
 rename comixed-webui/src/app/{comic-book => comic-books}/reducers/imprint-list.reducer.ts (96%)
 rename comixed-webui/src/app/{comic-book => comic-books}/reducers/mark-comics-deleted.reducer.spec.ts (94%)
 rename comixed-webui/src/app/{comic-book => comic-books}/reducers/mark-comics-deleted.reducer.ts (100%)
 rename comixed-webui/src/app/{comic-book => comic-books}/reducers/scraping.reducer.spec.ts (98%)
 rename comixed-webui/src/app/{comic-book => comic-books}/reducers/scraping.reducer.ts (91%)
 rename comixed-webui/src/app/{comic-book => comic-books}/selectors/comic-list.selectors.spec.ts (97%)
 rename comixed-webui/src/app/{comic-book => comic-books}/selectors/comic-list.selectors.ts (98%)
 rename comixed-webui/src/app/{comic-book => comic-books}/selectors/comic.selectors.spec.ts (96%)
 rename comixed-webui/src/app/{comic-book => comic-books}/selectors/comic.selectors.ts (100%)
 rename comixed-webui/src/app/{comic-book => comic-books}/selectors/imprint-list.selectors.spec.ts (96%)
 rename comixed-webui/src/app/{comic-book => comic-books}/selectors/imprint-list.selectors.ts (100%)
 rename comixed-webui/src/app/{comic-book => comic-books}/selectors/mark-comics-deleted.selectors.spec.ts (95%)
 rename comixed-webui/src/app/{comic-book => comic-books}/selectors/mark-comics-deleted.selectors.ts (100%)
 rename comixed-webui/src/app/{comic-book => comic-books}/selectors/scraping.selectors.spec.ts (97%)
 rename comixed-webui/src/app/{comic-book => comic-books}/selectors/scraping.selectors.ts (100%)
 rename comixed-webui/src/app/{comic-book => comic-books}/services/comic-list.service.spec.ts (96%)
 rename comixed-webui/src/app/{comic-book => comic-books}/services/comic-list.service.ts (93%)
 rename comixed-webui/src/app/{comic-book => comic-books}/services/comic.service.spec.ts (89%)
 rename comixed-webui/src/app/{comic-book => comic-books}/services/comic.service.ts (91%)
 rename comixed-webui/src/app/{comic-book => comic-books}/services/imprint.service.spec.ts (93%)
 rename comixed-webui/src/app/{comic-book => comic-books}/services/imprint.service.ts (94%)
 rename comixed-webui/src/app/{comic-book => comic-books}/services/page.service.spec.ts (100%)
 rename comixed-webui/src/app/{comic-book => comic-books}/services/page.service.ts (100%)
 rename comixed-webui/src/app/{comic-book => comic-books}/services/scraping.service.spec.ts (94%)
 rename comixed-webui/src/app/{comic-book => comic-books}/services/scraping.service.ts (90%)

diff --git a/comixed-webui/src/app/app.component.spec.ts b/comixed-webui/src/app/app.component.spec.ts
index 8dbe8c9d58..4d094e372e 100644
--- a/comixed-webui/src/app/app.component.spec.ts
+++ b/comixed-webui/src/app/app.component.spec.ts
@@ -53,8 +53,8 @@ import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import {
   COMIC_LIST_FEATURE_KEY,
   initialState as initialComicListState
-} from '@app/comic-book/reducers/comic-list.reducer';
-import { loadComics } from '@app/comic-book/actions/comic-list.actions';
+} from '@app/comic-books/reducers/comic-list.reducer';
+import { loadComics } from '@app/comic-books/actions/comic-list.actions';
 import { MatSidenavModule } from '@angular/material/sidenav';
 import { SideNavigationComponent } from '@app/components/side-navigation/side-navigation.component';
 import { FooterComponent } from '@app/components/footer/footer.component';
diff --git a/comixed-webui/src/app/app.component.ts b/comixed-webui/src/app/app.component.ts
index 3c0a1249e8..a3752f18f9 100644
--- a/comixed-webui/src/app/app.component.ts
+++ b/comixed-webui/src/app/app.component.ts
@@ -45,11 +45,11 @@ import {
 } from '@app/messaging/actions/messaging.actions';
 import { selectImportCount } from '@app/selectors/import-count.selectors';
 import { Subscription } from 'rxjs';
-import { selectComicListState } from '@app/comic-book/selectors/comic-list.selectors';
+import { selectComicListState } from '@app/comic-books/selectors/comic-list.selectors';
 import {
   loadComics,
   resetComicList
-} from '@app/comic-book/actions/comic-list.actions';
+} from '@app/comic-books/actions/comic-list.actions';
 import { User } from '@app/user/models/user';
 import { loadReadingLists } from '@app/lists/actions/reading-lists.actions';
 
diff --git a/comixed-webui/src/app/app.module.ts b/comixed-webui/src/app/app.module.ts
index 3e33591ed5..e5b3c34604 100644
--- a/comixed-webui/src/app/app.module.ts
+++ b/comixed-webui/src/app/app.module.ts
@@ -67,7 +67,7 @@ import { ComicPagesModule } from '@app/comic-pages/comic-pages.module';
 import { CollectionsModule } from '@app/collections/collections.module';
 import { LastReadModule } from '@app/last-read/last-read.module';
 import { ComicFileModule } from '@app/comic-file/comic-file.module';
-import { ComicBookModule } from '@app/comic-book/comic-book.module';
+import { ComicBookModule } from '@app/comic-books/comic-book.module';
 import { GravatarModule } from 'ngx-gravatar';
 import { ListsModule } from '@app/lists/lists.module';
 import { MatBadgeModule } from '@angular/material/badge';
diff --git a/comixed-webui/src/app/collections/pages/collection-detail/collection-detail.component.spec.ts b/comixed-webui/src/app/collections/pages/collection-detail/collection-detail.component.spec.ts
index 130333fd5c..4c336d1040 100644
--- a/comixed-webui/src/app/collections/pages/collection-detail/collection-detail.component.spec.ts
+++ b/comixed-webui/src/app/collections/pages/collection-detail/collection-detail.component.spec.ts
@@ -46,14 +46,14 @@ import { CollectionType } from '@app/collections/models/comic-collection.enum';
 import {
   COMIC_LIST_FEATURE_KEY,
   initialState as initialComicListState
-} from '@app/comic-book/reducers/comic-list.reducer';
+} from '@app/comic-books/reducers/comic-list.reducer';
 import {
   COMIC_1,
   COMIC_2,
   COMIC_3,
   COMIC_4,
   COMIC_5
-} from '@app/comic-book/comic-book.fixtures';
+} from '@app/comic-books/comic-book.fixtures';
 import { MatSelectModule } from '@angular/material/select';
 import { MatOptionModule } from '@angular/material/core';
 import {
diff --git a/comixed-webui/src/app/collections/pages/collection-detail/collection-detail.component.ts b/comixed-webui/src/app/collections/pages/collection-detail/collection-detail.component.ts
index 2dba321ad0..608e82a2a2 100644
--- a/comixed-webui/src/app/collections/pages/collection-detail/collection-detail.component.ts
+++ b/comixed-webui/src/app/collections/pages/collection-detail/collection-detail.component.ts
@@ -25,8 +25,8 @@ import {
   CollectionType,
   collectionTypeFromString
 } from '@app/collections/models/comic-collection.enum';
-import { selectComicList } from '@app/comic-book/selectors/comic-list.selectors';
-import { Comic } from '@app/comic-book/models/comic';
+import { selectComicList } from '@app/comic-books/selectors/comic-list.selectors';
+import { Comic } from '@app/comic-books/models/comic';
 import { selectSelectedComics } from '@app/library/selectors/library.selectors';
 import { ReadingList } from '@app/lists/models/reading-list';
 import { selectUserReadingLists } from '@app/lists/selectors/reading-lists.selectors';
diff --git a/comixed-webui/src/app/collections/pages/collection-list/collection-list.component.spec.ts b/comixed-webui/src/app/collections/pages/collection-list/collection-list.component.spec.ts
index d64c603d0d..eaee4faf9e 100644
--- a/comixed-webui/src/app/collections/pages/collection-list/collection-list.component.spec.ts
+++ b/comixed-webui/src/app/collections/pages/collection-list/collection-list.component.spec.ts
@@ -27,8 +27,12 @@ import { CollectionType } from '@app/collections/models/comic-collection.enum';
 import {
   COMIC_LIST_FEATURE_KEY,
   initialState as initialComicListState
-} from '@app/comic-book/reducers/comic-list.reducer';
-import { COMIC_1, COMIC_3, COMIC_5 } from '@app/comic-book/comic-book.fixtures';
+} from '@app/comic-books/reducers/comic-list.reducer';
+import {
+  COMIC_1,
+  COMIC_3,
+  COMIC_5
+} from '@app/comic-books/comic-book.fixtures';
 import { CollectionListEntry } from '@app/collections/models/collection-list-entry';
 import { MatTableModule } from '@angular/material/table';
 import { TranslateModule } from '@ngx-translate/core';
diff --git a/comixed-webui/src/app/collections/pages/collection-list/collection-list.component.ts b/comixed-webui/src/app/collections/pages/collection-list/collection-list.component.ts
index 3f520cfccb..54802ba703 100644
--- a/comixed-webui/src/app/collections/pages/collection-list/collection-list.component.ts
+++ b/comixed-webui/src/app/collections/pages/collection-list/collection-list.component.ts
@@ -31,7 +31,7 @@ import {
   CollectionType,
   collectionTypeFromString
 } from '@app/collections/models/comic-collection.enum';
-import { selectComicListCollection } from '@app/comic-book/selectors/comic-list.selectors';
+import { selectComicListCollection } from '@app/comic-books/selectors/comic-list.selectors';
 import { MatTableDataSource } from '@angular/material/table';
 import { CollectionListEntry } from '@app/collections/models/collection-list-entry';
 import { MatSort } from '@angular/material/sort';
diff --git a/comixed-webui/src/app/comic-book/components/comic-page/comic-page.component.html b/comixed-webui/src/app/comic-book/components/comic-page/comic-page.component.html
deleted file mode 100644
index b778bdf1b5..0000000000
--- a/comixed-webui/src/app/comic-book/components/comic-page/comic-page.component.html
+++ /dev/null
@@ -1,22 +0,0 @@
-<mat-card>
-  <mat-card-title>{{ page?.filename }}</mat-card-title>
-  <mat-card-content>
-    <img
-      [src]="imageUrl"
-      [alt]="imageUrl"
-      [style.height]="imageHeight"
-      [style.width]="imageWidth"
-      [class.blocked-hash]="page?.blocked"
-      [class.deleted-page]="page?.deleted"
-      (contextmenu)="onContextMenu($event)"
-    />
-  </mat-card-content>
-  <mat-card-footer *ngIf="page?.blocked">
-    <mat-icon
-      *ngIf="page?.blocked"
-      [matTooltip]="'comic-book.tooltip.blocked-hash' | translate"
-    >
-      block
-    </mat-icon>
-  </mat-card-footer>
-</mat-card>
diff --git a/comixed-webui/src/app/comic-book/pages/comic-book-page/comic-book-page.component.html b/comixed-webui/src/app/comic-book/pages/comic-book-page/comic-book-page.component.html
deleted file mode 100644
index 2136bb252d..0000000000
--- a/comixed-webui/src/app/comic-book/pages/comic-book-page/comic-book-page.component.html
+++ /dev/null
@@ -1,187 +0,0 @@
-<mat-toolbar *ngIf="!!comic" class="cx-primary-light-background">
-  <button
-    id="previous-comic-button"
-    class="cx-toolbar-button"
-    mat-icon-button
-    color="primary"
-    [matTooltip]="'comic-book.tooltip.go-to-previous-comic' | translate"
-    [disabled]="!comic.previousIssueId"
-    [routerLink]="['/comics', comic.previousIssueId]"
-  >
-    <mat-icon>arrow_back</mat-icon>
-  </button>
-  <button
-    id="next-comic-button"
-    class="cx-toolbar-button"
-    mat-icon-button
-    [disabled]="!comic.nextIssueId"
-    color="primary"
-    [matTooltip]="'comic-book.tooltip.go-to-next-comic' | translate"
-    [routerLink]="['/comics', comic.nextIssueId]"
-  >
-    <mat-icon>arrow_forward</mat-icon>
-  </button>
-  <div class="cx-spacer"></div>
-  <button
-    id="update-comic-info-button"
-    class="cx-toolbar-button"
-    mat-icon-button
-    color="warn"
-    [matTooltip]="'comic-book.tooltip.update-comic-info' | translate"
-    [disabled]="!isAdmin"
-    (click)="onUpdateMetadata()"
-  >
-    <mat-icon>sync</mat-icon>
-  </button>
-  <button
-    id="download-comic-button"
-    class="cx-toolbar-button"
-    mat-icon-button
-    color="primary"
-    [matTooltip]="'comic-book.tooltip.download-comic' | translate"
-  >
-    <mat-icon>arrow_downward</mat-icon>
-  </button>
-  <mat-divider class="cx-height-100" vertical="true"></mat-divider>
-  <button
-    *ngIf="!isRead"
-    id="mark-as-read-button"
-    class="cx-toolbar-button"
-    mat-icon-button
-    color="primary"
-    [matTooltip]="'comic-book.tooltip.mark-read' | translate"
-    (click)="setReadState(true)"
-  >
-    <mat-icon>turned_in_not</mat-icon>
-  </button>
-  <button
-    *ngIf="isRead"
-    id="mark-as-unread-button"
-    class="cx-toolbar-button"
-    mat-icon-button
-    color="primary"
-    [matTooltip]="'comic-book.tooltip.mark-unread' | translate"
-    (click)="setReadState(false)"
-  >
-    <mat-icon>turned_in</mat-icon>
-  </button>
-  <button
-    *ngIf="isAdmin && !comic.deletedDate"
-    id="delete-button"
-    class="cx-toolbar-button"
-    mat-icon-button
-    color="warn"
-    [matTooltip]="'comic-book.tooltip.delete-comic' | translate"
-    (click)="onSetComicDeletedState(true)"
-  >
-    <mat-icon>delete</mat-icon>
-  </button>
-  <button
-    *ngIf="isAdmin && !!comic.deletedDate"
-    id="undelete-button"
-    class="cx-toolbar-button"
-    mat-icon-button
-    color="warn"
-    [matTooltip]="'comic-book.tooltip.undelete-comic' | translate"
-    (click)="onSetComicDeletedState(false)"
-  >
-    <mat-icon>restore_from_trash</mat-icon>
-  </button>
-</mat-toolbar>
-<mat-card *ngIf="!!comic">
-  <mat-card-title>{{ comic | comicTitle }}</mat-card-title>
-  <mat-card-content>
-    <div class="cx-width-100 comic-details-container">
-      <div class="cx-padding-left-5">
-        <cx-comic-page
-          [imageUrl]="comic.pages[pageIndex] | comicPageUrl"
-          [pageSize]="pageSize"
-        ></cx-comic-page>
-        <div class="cx-width-100 cx-align-content-center">
-          <button
-            mat-icon-button
-            color="primary"
-            (click)="pageIndex = pageIndex - 1"
-            [disabled]="pageIndex === 0"
-            [matTooltip]="
-              'comic-book.tooltip.show-previous-comic-page' | translate
-            "
-          >
-            <mat-icon>navigate_before</mat-icon>
-          </button>
-          {{
-            "comic-book.label.page-title"
-              | translate: { which: pageIndex + 1, count: comic.pages.length }
-          }}
-          <button
-            mat-icon-button
-            color="primary"
-            (click)="pageIndex = pageIndex + 1"
-            [disabled]="pageIndex === comic.pages.length - 1"
-            [matTooltip]="'comic-book.tooltip.show-next-comic-page' | translate"
-          >
-            <mat-icon>navigate_next</mat-icon>
-          </button>
-        </div>
-      </div>
-      <div class="cx-padding-left-5 cx-width-100">
-        <mat-tab-group
-          [selectedIndex]="currentTab"
-          (selectedTabChange)="onTabChange($event.index)"
-        >
-          <mat-tab [label]="'comic-book.label.comic-overview' | translate">
-            <cx-comic-overview
-              [comic]="comic"
-              [lastRead]="lastRead"
-              [isAdmin]="isAdmin"
-            ></cx-comic-overview>
-          </mat-tab>
-          <mat-tab [label]="'comic-book.label.comic-story' | translate">
-            <cx-comic-story [comic]="comic"></cx-comic-story>
-          </mat-tab>
-          <mat-tab [label]="'comic-book.label.comic-pages' | translate">
-            <cx-comic-pages
-              *ngIf="showPages"
-              [comic]="comic"
-              [pageSize]="pageSize"
-            ></cx-comic-pages>
-          </mat-tab>
-          <mat-tab
-            *ngIf="isAdmin"
-            [label]="'comic-book.label.comic-edit' | translate"
-          >
-            <cx-comic-edit
-              *ngIf="!!comic && volumes.length === 0"
-              [comic]="comic"
-              [apiKey]="apiKey"
-              [skipCache]="skipCache"
-              [maximumRecords]="maximumRecords"
-              (scrape)="
-                onLoadScrapingVolumes(
-                  $event.apiKey,
-                  $event.series,
-                  $event.volume,
-                  $event.issueNumber,
-                  $event.maximumRecords,
-                  $event.skipCache
-                )
-              "
-            ></cx-comic-edit>
-            <cx-comic-scraping
-              *ngIf="volumes.length > 0"
-              [comic]="comic"
-              [comicSeriesName]="scrapingSeriesName"
-              [comicVolume]="scrapingVolume"
-              [comicIssueNumber]="scrapingIssueNumber"
-              [apiKey]="apiKey"
-              [skipCache]="skipCache"
-              [pageSize]="pageSize"
-              [volumes]="volumes"
-            ></cx-comic-scraping>
-          </mat-tab>
-        </mat-tab-group>
-      </div>
-    </div>
-  </mat-card-content>
-  <mat-card-actions></mat-card-actions>
-</mat-card>
diff --git a/comixed-webui/src/app/comic-book/pages/comic-book-page/comic-book-page.component.scss b/comixed-webui/src/app/comic-book/pages/comic-book-page/comic-book-page.component.scss
deleted file mode 100644
index a55235820b..0000000000
--- a/comixed-webui/src/app/comic-book/pages/comic-book-page/comic-book-page.component.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-.comic-details-container {
-  display: flex;
-  align-items: stretch;
-}
diff --git a/comixed-webui/src/app/comic-book/actions/comic-list.actions.ts b/comixed-webui/src/app/comic-books/actions/comic-list.actions.ts
similarity index 96%
rename from comixed-webui/src/app/comic-book/actions/comic-list.actions.ts
rename to comixed-webui/src/app/comic-books/actions/comic-list.actions.ts
index 35e1f05e58..f4b6cf455b 100644
--- a/comixed-webui/src/app/comic-book/actions/comic-list.actions.ts
+++ b/comixed-webui/src/app/comic-books/actions/comic-list.actions.ts
@@ -17,7 +17,7 @@
  */
 
 import { createAction, props } from '@ngrx/store';
-import { Comic } from '@app/comic-book/models/comic';
+import { Comic } from '@app/comic-books/models/comic';
 
 export const resetComicList = createAction(
   '[Comic List] Indicates the loading process is started'
diff --git a/comixed-webui/src/app/comic-book/actions/comic.actions.ts b/comixed-webui/src/app/comic-books/actions/comic.actions.ts
similarity index 96%
rename from comixed-webui/src/app/comic-book/actions/comic.actions.ts
rename to comixed-webui/src/app/comic-books/actions/comic.actions.ts
index 7038ccb3bc..7a3d4810e0 100644
--- a/comixed-webui/src/app/comic-book/actions/comic.actions.ts
+++ b/comixed-webui/src/app/comic-books/actions/comic.actions.ts
@@ -17,7 +17,7 @@
  */
 
 import { createAction, props } from '@ngrx/store';
-import { Comic } from '@app/comic-book/models/comic';
+import { Comic } from '@app/comic-books/models/comic';
 
 export const loadComic = createAction(
   '[Comic] Loads a single comic',
diff --git a/comixed-webui/src/app/comic-book/actions/imprint-list.actions.ts b/comixed-webui/src/app/comic-books/actions/imprint-list.actions.ts
similarity index 95%
rename from comixed-webui/src/app/comic-book/actions/imprint-list.actions.ts
rename to comixed-webui/src/app/comic-books/actions/imprint-list.actions.ts
index cc8c8c163f..1ac0fa5092 100644
--- a/comixed-webui/src/app/comic-book/actions/imprint-list.actions.ts
+++ b/comixed-webui/src/app/comic-books/actions/imprint-list.actions.ts
@@ -17,7 +17,7 @@
  */
 
 import { createAction, props } from '@ngrx/store';
-import { Imprint } from '@app/comic-book/models/imprint';
+import { Imprint } from '@app/comic-books/models/imprint';
 
 export const loadImprints = createAction(
   '[Imprint List] Load the list of imprints'
diff --git a/comixed-webui/src/app/comic-book/actions/mark-comics-deleted.actions.ts b/comixed-webui/src/app/comic-books/actions/mark-comics-deleted.actions.ts
similarity index 95%
rename from comixed-webui/src/app/comic-book/actions/mark-comics-deleted.actions.ts
rename to comixed-webui/src/app/comic-books/actions/mark-comics-deleted.actions.ts
index 320962bf36..650a16d79f 100644
--- a/comixed-webui/src/app/comic-book/actions/mark-comics-deleted.actions.ts
+++ b/comixed-webui/src/app/comic-books/actions/mark-comics-deleted.actions.ts
@@ -17,7 +17,7 @@
  */
 
 import { createAction, props } from '@ngrx/store';
-import { Comic } from '@app/comic-book/models/comic';
+import { Comic } from '@app/comic-books/models/comic';
 
 export const markComicsDeleted = createAction(
   '[Mark Comics Deleted] Set the deleted state for comics',
diff --git a/comixed-webui/src/app/comic-book/actions/scraping.actions.ts b/comixed-webui/src/app/comic-books/actions/scraping.actions.ts
similarity index 97%
rename from comixed-webui/src/app/comic-book/actions/scraping.actions.ts
rename to comixed-webui/src/app/comic-books/actions/scraping.actions.ts
index 81b0128f44..57af1693c8 100644
--- a/comixed-webui/src/app/comic-book/actions/scraping.actions.ts
+++ b/comixed-webui/src/app/comic-books/actions/scraping.actions.ts
@@ -19,7 +19,7 @@
 import { createAction, props } from '@ngrx/store';
 import { ScrapingVolume } from '../models/scraping-volume';
 import { ScrapingIssue } from '../models/scraping-issue';
-import { Comic } from '@app/comic-book/models/comic';
+import { Comic } from '@app/comic-books/models/comic';
 
 export const resetScraping = createAction(
   '[Scraping] Resets the scraping state'
diff --git a/comixed-webui/src/app/comic-book/comic-book.constants.ts b/comixed-webui/src/app/comic-books/comic-book.constants.ts
similarity index 100%
rename from comixed-webui/src/app/comic-book/comic-book.constants.ts
rename to comixed-webui/src/app/comic-books/comic-book.constants.ts
diff --git a/comixed-webui/src/app/comic-book/comic-book.fixtures.ts b/comixed-webui/src/app/comic-books/comic-book.fixtures.ts
similarity index 92%
rename from comixed-webui/src/app/comic-book/comic-book.fixtures.ts
rename to comixed-webui/src/app/comic-books/comic-book.fixtures.ts
index e386e1b8e0..8b1ba7ca17 100644
--- a/comixed-webui/src/app/comic-book/comic-book.fixtures.ts
+++ b/comixed-webui/src/app/comic-books/comic-book.fixtures.ts
@@ -16,20 +16,20 @@
  * along with this program. If not, see <http://www.gnu.org/licenses>
  */
 
-import { FileDetails } from '@app/comic-book/models/file-details';
-import { ComicCredit } from '@app/comic-book/models/comic-credit';
-import { Comic } from '@app/comic-book/models/comic';
-import { ScrapingVolume } from '@app/comic-book/models/scraping-volume';
-import { ScrapingIssue } from '@app/comic-book/models/scraping-issue';
-import { ComicBookState } from '@app/comic-book/models/comic-book-state';
-import { ArchiveType } from '@app/comic-book/models/archive-type.enum';
+import { FileDetails } from '@app/comic-books/models/file-details';
+import { ComicCredit } from '@app/comic-books/models/comic-credit';
+import { Comic } from '@app/comic-books/models/comic';
+import { ScrapingVolume } from '@app/comic-books/models/scraping-volume';
+import { ScrapingIssue } from '@app/comic-books/models/scraping-issue';
+import { ComicBookState } from '@app/comic-books/models/comic-book-state';
+import { ArchiveType } from '@app/comic-books/models/archive-type.enum';
 import {
   PAGE_1,
   PAGE_2,
   PAGE_3,
   PAGE_4
 } from '@app/comic-pages/comic-pages.fixtures';
-import { Imprint } from '@app/comic-book/models/imprint';
+import { Imprint } from '@app/comic-books/models/imprint';
 
 export const FILE_DETAILS_1: FileDetails = {
   id: 1,
diff --git a/comixed-webui/src/app/comic-book/comic-book.module.ts b/comixed-webui/src/app/comic-books/comic-book.module.ts
similarity index 81%
rename from comixed-webui/src/app/comic-book/comic-book.module.ts
rename to comixed-webui/src/app/comic-books/comic-book.module.ts
index 204c21b52a..4f03d10c3c 100644
--- a/comixed-webui/src/app/comic-book/comic-book.module.ts
+++ b/comixed-webui/src/app/comic-books/comic-book.module.ts
@@ -38,30 +38,30 @@ import { MatSelectModule } from '@angular/material/select';
 import { ReactiveFormsModule } from '@angular/forms';
 import { MatInputModule } from '@angular/material/input';
 import { MatExpansionModule } from '@angular/material/expansion';
-import { ComicDetailCardComponent } from '@app/comic-book/components/comic-detail-card/comic-detail-card.component';
+import { ComicDetailCardComponent } from '@app/comic-books/components/comic-detail-card/comic-detail-card.component';
 import { MatPaginatorModule } from '@angular/material/paginator';
 import { MatTableModule } from '@angular/material/table';
 import { MatToolbarModule } from '@angular/material/toolbar';
 import { MatMenuModule } from '@angular/material/menu';
-import { ComicCoverUrlPipe } from '@app/comic-book/pipes/comic-cover-url.pipe';
-import { ComicPageUrlPipe } from '@app/comic-book/pipes/comic-page-url.pipe';
-import { ComicTitlePipe } from '@app/comic-book/pipes/comic-title.pipe';
-import { ScrapingIssueTitlePipe } from '@app/comic-book/pipes/scraping-issue-title.pipe';
+import { ComicCoverUrlPipe } from '@app/comic-books/pipes/comic-cover-url.pipe';
+import { ComicPageUrlPipe } from '@app/comic-books/pipes/comic-page-url.pipe';
+import { ComicTitlePipe } from '@app/comic-books/pipes/comic-title.pipe';
+import { ScrapingIssueTitlePipe } from '@app/comic-books/pipes/scraping-issue-title.pipe';
 import {
   reducer as scrapingReducer,
   SCRAPING_FEATURE_KEY
-} from '@app/comic-book/reducers/scraping.reducer';
+} from '@app/comic-books/reducers/scraping.reducer';
 import {
   COMIC_LIST_FEATURE_KEY,
   reducer as comicListReducer
-} from '@app/comic-book/reducers/comic-list.reducer';
+} from '@app/comic-books/reducers/comic-list.reducer';
 import {
   COMIC_FEATURE_KEY,
   reducer as comicReducer
-} from '@app/comic-book/reducers/comic.reducer';
-import { ScrapingEffects } from '@app/comic-book/effects/scraping.effects';
-import { ComicListEffects } from '@app/comic-book/effects/comic-list.effects';
-import { ComicEffects } from '@app/comic-book/effects/comic.effects';
+} from '@app/comic-books/reducers/comic.reducer';
+import { ScrapingEffects } from '@app/comic-books/effects/scraping.effects';
+import { ComicListEffects } from '@app/comic-books/effects/comic-list.effects';
+import { ComicEffects } from '@app/comic-books/effects/comic.effects';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { TranslateModule } from '@ngx-translate/core';
 import { MatTabsModule } from '@angular/material/tabs';
@@ -71,17 +71,18 @@ import { CoreModule } from '@app/core/core.module';
 import { MatGridListModule } from '@angular/material/grid-list';
 import { ComicvineIssueLinkPipe } from './pipes/comicvine-issue-link.pipe';
 import { PageHashUrlPipe } from './pipes/page-hash-url.pipe';
-import { MarkComicsDeletedEffects } from '@app/comic-book/effects/mark-comics-deleted.effects';
+import { MarkComicsDeletedEffects } from '@app/comic-books/effects/mark-comics-deleted.effects';
 import {
   MARK_COMICS_DELETED_FEATURE_KEY,
   reducer as markComicsDeletedReducer
-} from '@app/comic-book/reducers/mark-comics-deleted.reducer';
+} from '@app/comic-books/reducers/mark-comics-deleted.reducer';
 import { MatDividerModule } from '@angular/material/divider';
 import {
   IMPRINT_LIST_FEATURE_KEY,
   reducer as imprintListReducer
-} from '@app/comic-book/reducers/imprint-list.reducer';
-import { ImprintListEffects } from '@app/comic-book/effects/imprint-list.effects';
+} from '@app/comic-books/reducers/imprint-list.reducer';
+import { ImprintListEffects } from '@app/comic-books/effects/imprint-list.effects';
+import { FlexModule } from '@angular/flex-layout';
 
 @NgModule({
   declarations: [
@@ -139,7 +140,8 @@ import { ImprintListEffects } from '@app/comic-book/effects/imprint-list.effects
     MatSortModule,
     CoreModule,
     MatGridListModule,
-    MatDividerModule
+    MatDividerModule,
+    FlexModule
   ],
   exports: [
     CommonModule,
diff --git a/comixed-webui/src/app/comic-book/comic-book.routing.ts b/comixed-webui/src/app/comic-books/comic-book.routing.ts
similarity index 91%
rename from comixed-webui/src/app/comic-book/comic-book.routing.ts
rename to comixed-webui/src/app/comic-books/comic-book.routing.ts
index 03784bb081..755124a81f 100644
--- a/comixed-webui/src/app/comic-book/comic-book.routing.ts
+++ b/comixed-webui/src/app/comic-books/comic-book.routing.ts
@@ -18,7 +18,7 @@
 
 import { RouterModule, Routes } from '@angular/router';
 import { NgModule } from '@angular/core';
-import { ComicBookPageComponent } from '@app/comic-book/pages/comic-book-page/comic-book-page.component';
+import { ComicBookPageComponent } from '@app/comic-books/pages/comic-book-page/comic-book-page.component';
 import { ReaderGuard } from '@app/user';
 
 const routes: Routes = [
diff --git a/comixed-webui/src/app/comic-book/components/comic-detail-card/comic-detail-card.component.html b/comixed-webui/src/app/comic-books/components/comic-detail-card/comic-detail-card.component.html
similarity index 96%
rename from comixed-webui/src/app/comic-book/components/comic-detail-card/comic-detail-card.component.html
rename to comixed-webui/src/app/comic-books/components/comic-detail-card/comic-detail-card.component.html
index b346a011e0..2ea3f3c081 100644
--- a/comixed-webui/src/app/comic-book/components/comic-detail-card/comic-detail-card.component.html
+++ b/comixed-webui/src/app/comic-books/components/comic-detail-card/comic-detail-card.component.html
@@ -4,7 +4,7 @@
   </mat-card-title>
   <mat-card-content>
     <div
-      class="comic-detail-card cx-padding-2 cx-margin-2"
+      class="cx-detail-card cx-padding-2 cx-margin-2"
       [class.comic-detail-card-selected]="selected"
     >
       <img
diff --git a/comixed-webui/src/app/comic-book/components/comic-detail-card/comic-detail-card.component.scss b/comixed-webui/src/app/comic-books/components/comic-detail-card/comic-detail-card.component.scss
similarity index 89%
rename from comixed-webui/src/app/comic-book/components/comic-detail-card/comic-detail-card.component.scss
rename to comixed-webui/src/app/comic-books/components/comic-detail-card/comic-detail-card.component.scss
index 70a93e7fc4..128124926a 100644
--- a/comixed-webui/src/app/comic-book/components/comic-detail-card/comic-detail-card.component.scss
+++ b/comixed-webui/src/app/comic-books/components/comic-detail-card/comic-detail-card.component.scss
@@ -1,10 +1,5 @@
 @import 'src/styles';
 
-.comic-detail-card {
-  position: relative;
-  display: inline-block;
-}
-
 .mat-card-title {
   width: 100%;
   overflow: hidden;
diff --git a/comixed-webui/src/app/comic-book/components/comic-detail-card/comic-detail-card.component.spec.ts b/comixed-webui/src/app/comic-books/components/comic-detail-card/comic-detail-card.component.spec.ts
similarity index 98%
rename from comixed-webui/src/app/comic-book/components/comic-detail-card/comic-detail-card.component.spec.ts
rename to comixed-webui/src/app/comic-books/components/comic-detail-card/comic-detail-card.component.spec.ts
index f890c4d9f7..78be4af002 100644
--- a/comixed-webui/src/app/comic-book/components/comic-detail-card/comic-detail-card.component.spec.ts
+++ b/comixed-webui/src/app/comic-books/components/comic-detail-card/comic-detail-card.component.spec.ts
@@ -21,7 +21,7 @@ import { ComicDetailCardComponent } from './comic-detail-card.component';
 import { MatCardModule } from '@angular/material/card';
 import { LoggerModule } from '@angular-ru/logger';
 import { MockStore, provideMockStore } from '@ngrx/store/testing';
-import { COMIC_3 } from '@app/comic-book/comic-book.fixtures';
+import { COMIC_3 } from '@app/comic-books/comic-book.fixtures';
 import { TranslateModule } from '@ngx-translate/core';
 import { MatGridListModule } from '@angular/material/grid-list';
 import { MatChipsModule } from '@angular/material/chips';
diff --git a/comixed-webui/src/app/comic-book/components/comic-detail-card/comic-detail-card.component.ts b/comixed-webui/src/app/comic-books/components/comic-detail-card/comic-detail-card.component.ts
similarity index 88%
rename from comixed-webui/src/app/comic-book/components/comic-detail-card/comic-detail-card.component.ts
rename to comixed-webui/src/app/comic-books/components/comic-detail-card/comic-detail-card.component.ts
index cfc2087e76..6ecd85507f 100644
--- a/comixed-webui/src/app/comic-book/components/comic-detail-card/comic-detail-card.component.ts
+++ b/comixed-webui/src/app/comic-books/components/comic-detail-card/comic-detail-card.component.ts
@@ -25,10 +25,10 @@ import {
   Output
 } from '@angular/core';
 import { LoggerService } from '@angular-ru/logger';
-import { Comic } from '@app/comic-book/models/comic';
-import { ComicContextMenuEvent } from '@app/comic-book/models/ui/comic-context-menu-event';
-import { ComicSelectEvent } from '@app/comic-book/models/event/comic-select-event';
-import { UpdateComicInfoEvent } from '@app/comic-book/models/event/update-comic-info-event';
+import { Comic } from '@app/comic-books/models/comic';
+import { ComicContextMenuEvent } from '@app/comic-books/models/ui/comic-context-menu-event';
+import { ComicSelectEvent } from '@app/comic-books/models/event/comic-select-event';
+import { UpdateComicInfoEvent } from '@app/comic-books/models/event/update-comic-info-event';
 
 @Component({
   selector: 'cx-comic-detail-card',
diff --git a/comixed-webui/src/app/comic-book/components/comic-edit/comic-edit.component.html b/comixed-webui/src/app/comic-books/components/comic-edit/comic-edit.component.html
similarity index 100%
rename from comixed-webui/src/app/comic-book/components/comic-edit/comic-edit.component.html
rename to comixed-webui/src/app/comic-books/components/comic-edit/comic-edit.component.html
diff --git a/comixed-webui/src/app/comic-book/components/comic-edit/comic-edit.component.scss b/comixed-webui/src/app/comic-books/components/comic-edit/comic-edit.component.scss
similarity index 100%
rename from comixed-webui/src/app/comic-book/components/comic-edit/comic-edit.component.scss
rename to comixed-webui/src/app/comic-books/components/comic-edit/comic-edit.component.scss
diff --git a/comixed-webui/src/app/comic-book/components/comic-edit/comic-edit.component.spec.ts b/comixed-webui/src/app/comic-books/components/comic-edit/comic-edit.component.spec.ts
similarity index 97%
rename from comixed-webui/src/app/comic-book/components/comic-edit/comic-edit.component.spec.ts
rename to comixed-webui/src/app/comic-books/components/comic-edit/comic-edit.component.spec.ts
index 1b957b6137..6d2d59d2be 100644
--- a/comixed-webui/src/app/comic-book/components/comic-edit/comic-edit.component.spec.ts
+++ b/comixed-webui/src/app/comic-books/components/comic-edit/comic-edit.component.spec.ts
@@ -26,7 +26,7 @@ import {
   IMPRINT_1,
   IMPRINT_2,
   IMPRINT_3
-} from '@app/comic-book/comic-book.fixtures';
+} from '@app/comic-books/comic-book.fixtures';
 import { MockStore, provideMockStore } from '@ngrx/store/testing';
 import { MatDialogModule } from '@angular/material/dialog';
 import { ConfirmationService } from '@app/core/services/confirmation.service';
@@ -43,11 +43,11 @@ import {
   API_KEY_PREFERENCE,
   MAXIMUM_RECORDS_PREFERENCE
 } from '@app/library/library.constants';
-import { updateComic } from '@app/comic-book/actions/comic.actions';
+import { updateComic } from '@app/comic-books/actions/comic.actions';
 import {
   IMPRINT_LIST_FEATURE_KEY,
   initialState as initialImprintState
-} from '@app/comic-book/reducers/imprint-list.reducer';
+} from '@app/comic-books/reducers/imprint-list.reducer';
 
 describe('ComicEditComponent', () => {
   const ENTRIES = [IMPRINT_1, IMPRINT_2, IMPRINT_3];
diff --git a/comixed-webui/src/app/comic-book/components/comic-edit/comic-edit.component.ts b/comixed-webui/src/app/comic-books/components/comic-edit/comic-edit.component.ts
similarity index 95%
rename from comixed-webui/src/app/comic-book/components/comic-edit/comic-edit.component.ts
rename to comixed-webui/src/app/comic-books/components/comic-edit/comic-edit.component.ts
index 4865484719..771548c812 100644
--- a/comixed-webui/src/app/comic-book/components/comic-edit/comic-edit.component.ts
+++ b/comixed-webui/src/app/comic-books/components/comic-edit/comic-edit.component.ts
@@ -24,25 +24,25 @@ import {
   OnInit,
   Output
 } from '@angular/core';
-import { Comic } from '@app/comic-book/models/comic';
+import { Comic } from '@app/comic-books/models/comic';
 import { Store } from '@ngrx/store';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { LoggerService } from '@angular-ru/logger';
 import { ConfirmationService } from '@app/core/services/confirmation.service';
 import { TranslateService } from '@ngx-translate/core';
-import { ScrapeEvent } from '@app/comic-book/models/ui/scrape-event';
+import { ScrapeEvent } from '@app/comic-books/models/ui/scrape-event';
 import { saveUserPreference } from '@app/user/actions/user.actions';
 import {
   API_KEY_PREFERENCE,
   MAXIMUM_RECORDS_PREFERENCE,
   SKIP_CACHE_PREFERENCE
 } from '@app/library/library.constants';
-import { updateComic } from '@app/comic-book/actions/comic.actions';
+import { updateComic } from '@app/comic-books/actions/comic.actions';
 import { Subscription } from 'rxjs';
-import { selectImprints } from '@app/comic-book/selectors/imprint-list.selectors';
+import { selectImprints } from '@app/comic-books/selectors/imprint-list.selectors';
 import { SelectionOption } from '@app/core/models/ui/selection-option';
-import { loadImprints } from '@app/comic-book/actions/imprint-list.actions';
-import { Imprint } from '@app/comic-book/models/imprint';
+import { loadImprints } from '@app/comic-books/actions/imprint-list.actions';
+import { Imprint } from '@app/comic-books/models/imprint';
 
 @Component({
   selector: 'cx-comic-edit',
diff --git a/comixed-webui/src/app/comic-book/components/comic-overview/comic-overview.component.html b/comixed-webui/src/app/comic-books/components/comic-overview/comic-overview.component.html
similarity index 100%
rename from comixed-webui/src/app/comic-book/components/comic-overview/comic-overview.component.html
rename to comixed-webui/src/app/comic-books/components/comic-overview/comic-overview.component.html
diff --git a/comixed-webui/src/app/comic-book/components/comic-overview/comic-overview.component.scss b/comixed-webui/src/app/comic-books/components/comic-overview/comic-overview.component.scss
similarity index 100%
rename from comixed-webui/src/app/comic-book/components/comic-overview/comic-overview.component.scss
rename to comixed-webui/src/app/comic-books/components/comic-overview/comic-overview.component.scss
diff --git a/comixed-webui/src/app/comic-book/components/comic-overview/comic-overview.component.spec.ts b/comixed-webui/src/app/comic-books/components/comic-overview/comic-overview.component.spec.ts
similarity index 90%
rename from comixed-webui/src/app/comic-book/components/comic-overview/comic-overview.component.spec.ts
rename to comixed-webui/src/app/comic-books/components/comic-overview/comic-overview.component.spec.ts
index 86a502c9e1..a1a02c1acb 100644
--- a/comixed-webui/src/app/comic-book/components/comic-overview/comic-overview.component.spec.ts
+++ b/comixed-webui/src/app/comic-books/components/comic-overview/comic-overview.component.spec.ts
@@ -19,13 +19,13 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { ComicOverviewComponent } from './comic-overview.component';
 import { LoggerModule } from '@angular-ru/logger';
-import { ComicCoverUrlPipe } from '@app/comic-book/pipes/comic-cover-url.pipe';
+import { ComicCoverUrlPipe } from '@app/comic-books/pipes/comic-cover-url.pipe';
 import { TranslateModule } from '@ngx-translate/core';
-import { COMIC_1 } from '@app/comic-book/comic-book.fixtures';
+import { COMIC_1 } from '@app/comic-books/comic-book.fixtures';
 import { RouterTestingModule } from '@angular/router/testing';
-import { ComicBookState } from '@app/comic-book/models/comic-book-state';
+import { ComicBookState } from '@app/comic-books/models/comic-book-state';
 import { MatGridListModule } from '@angular/material/grid-list';
-import { ComicvineIssueLinkPipe } from '@app/comic-book/pipes/comicvine-issue-link.pipe';
+import { ComicvineIssueLinkPipe } from '@app/comic-books/pipes/comicvine-issue-link.pipe';
 
 describe('ComicOverviewComponent', () => {
   const COMIC = COMIC_1;
diff --git a/comixed-webui/src/app/comic-book/components/comic-overview/comic-overview.component.ts b/comixed-webui/src/app/comic-books/components/comic-overview/comic-overview.component.ts
similarity index 92%
rename from comixed-webui/src/app/comic-book/components/comic-overview/comic-overview.component.ts
rename to comixed-webui/src/app/comic-books/components/comic-overview/comic-overview.component.ts
index 98f7cc538b..c840b1df08 100644
--- a/comixed-webui/src/app/comic-book/components/comic-overview/comic-overview.component.ts
+++ b/comixed-webui/src/app/comic-books/components/comic-overview/comic-overview.component.ts
@@ -18,9 +18,9 @@
 
 import { Component, Input, OnInit } from '@angular/core';
 import { LoggerService } from '@angular-ru/logger';
-import { Comic } from '@app/comic-book/models/comic';
+import { Comic } from '@app/comic-books/models/comic';
 import { LastRead } from '@app/last-read/models/last-read';
-import { ComicBookState } from '@app/comic-book/models/comic-book-state';
+import { ComicBookState } from '@app/comic-books/models/comic-book-state';
 
 @Component({
   selector: 'cx-comic-overview',
diff --git a/comixed-webui/src/app/comic-books/components/comic-page/comic-page.component.html b/comixed-webui/src/app/comic-books/components/comic-page/comic-page.component.html
new file mode 100644
index 0000000000..f1347f83db
--- /dev/null
+++ b/comixed-webui/src/app/comic-books/components/comic-page/comic-page.component.html
@@ -0,0 +1,24 @@
+<mat-card>
+  <mat-card-title>{{ page?.filename }}</mat-card-title>
+  <mat-card-content>
+    <div class="cx-detail-card cx-padding-2 cx-margin-2">
+      <img
+        [src]="imageUrl"
+        [alt]="imageUrl"
+        [style.width]="'100%'"
+        [style.height]="'auto'"
+        [class.blocked-hash]="page?.blocked"
+        [class.deleted-page]="page?.deleted"
+        (contextmenu)="onContextMenu($event)"
+      />
+    </div>
+  </mat-card-content>
+  <mat-card-footer *ngIf="page?.blocked">
+    <mat-icon
+      *ngIf="page?.blocked"
+      [matTooltip]="'comic-book.tooltip.blocked-hash' | translate"
+    >
+      block
+    </mat-icon>
+  </mat-card-footer>
+</mat-card>
diff --git a/comixed-webui/src/app/comic-book/components/comic-page/comic-page.component.scss b/comixed-webui/src/app/comic-books/components/comic-page/comic-page.component.scss
similarity index 100%
rename from comixed-webui/src/app/comic-book/components/comic-page/comic-page.component.scss
rename to comixed-webui/src/app/comic-books/components/comic-page/comic-page.component.scss
diff --git a/comixed-webui/src/app/comic-book/components/comic-page/comic-page.component.spec.ts b/comixed-webui/src/app/comic-books/components/comic-page/comic-page.component.spec.ts
similarity index 51%
rename from comixed-webui/src/app/comic-book/components/comic-page/comic-page.component.spec.ts
rename to comixed-webui/src/app/comic-books/components/comic-page/comic-page.component.spec.ts
index 18d741ce99..2692e7bf26 100644
--- a/comixed-webui/src/app/comic-book/components/comic-page/comic-page.component.spec.ts
+++ b/comixed-webui/src/app/comic-books/components/comic-page/comic-page.component.spec.ts
@@ -20,22 +20,11 @@ import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { ComicPageComponent } from './comic-page.component';
 import { LoggerModule } from '@angular-ru/logger';
 import { MatCardModule } from '@angular/material/card';
-import { provideMockStore } from '@ngrx/store/testing';
-import {
-  initialState as initialUserState,
-  USER_FEATURE_KEY
-} from '@app/user/reducers/user.reducer';
-import { USER_ADMIN } from '@app/user/user.fixtures';
 import { PAGE_2 } from '@app/comic-pages/comic-pages.fixtures';
 
 describe('ComicPageComponent', () => {
-  const SOURCE = {} as any;
-  const PAGE_SIZE = 400;
-  const USER = USER_ADMIN;
   const PAGE = PAGE_2;
-  const initialState = {
-    [USER_FEATURE_KEY]: { ...initialUserState, user: USER }
-  };
+  const SOURCE = {} as any;
 
   let component: ComicPageComponent;
   let fixture: ComponentFixture<ComicPageComponent>;
@@ -43,8 +32,7 @@ describe('ComicPageComponent', () => {
   beforeEach(async(() => {
     TestBed.configureTestingModule({
       declarations: [ComicPageComponent],
-      imports: [LoggerModule.forRoot(), MatCardModule],
-      providers: [provideMockStore({ initialState })]
+      imports: [LoggerModule.forRoot(), MatCardModule]
     }).compileComponents();
 
     fixture = TestBed.createComponent(ComicPageComponent);
@@ -56,69 +44,6 @@ describe('ComicPageComponent', () => {
     expect(component).toBeTruthy();
   });
 
-  describe('image width', () => {
-    const WIDTH = Math.ceil(Math.abs(Math.random() * 1024));
-
-    describe('when set', () => {
-      beforeEach(() => {
-        component.pageSize = -1;
-        component.imageWidth = `${WIDTH}`;
-      });
-
-      it('sets the width', () => {
-        expect(component.imageWidth).toEqual(`${WIDTH}`);
-      });
-    });
-
-    describe('when not set', () => {
-      beforeEach(() => {
-        component.imageWidth = null;
-      });
-
-      describe('if page size is set', () => {
-        beforeEach(() => {
-          component.pageSize = PAGE_SIZE;
-        });
-
-        it('returns the page size', () => {
-          expect(component.imageWidth).toEqual(`${PAGE_SIZE}px`);
-        });
-      });
-
-      describe('if page size is not set', () => {
-        beforeEach(() => {
-          component.pageSize = -1;
-        });
-
-        it('returns a default page size', () => {
-          expect(component.imageWidth).toEqual('auto');
-        });
-      });
-    });
-  });
-
-  describe('getting the image width', () => {
-    describe('when not defined', () => {
-      beforeEach(() => {
-        component.pageSize = -1;
-      });
-
-      it('tells the browser to determine the width', () => {
-        expect(component.imageWidth).toEqual('auto');
-      });
-    });
-
-    describe('when defined', () => {
-      beforeEach(() => {
-        component.pageSize = PAGE_SIZE;
-      });
-
-      it('returns a definite size', () => {
-        expect(component.imageWidth).toEqual(`${PAGE_SIZE}px`);
-      });
-    });
-  });
-
   describe('showing the context menu', () => {
     const XPOS = 1;
     const YPOS = 29;
diff --git a/comixed-webui/src/app/comic-book/components/comic-page/comic-page.component.ts b/comixed-webui/src/app/comic-books/components/comic-page/comic-page.component.ts
similarity index 63%
rename from comixed-webui/src/app/comic-book/components/comic-page/comic-page.component.ts
rename to comixed-webui/src/app/comic-books/components/comic-page/comic-page.component.ts
index e101a4b00d..92c51640c6 100644
--- a/comixed-webui/src/app/comic-book/components/comic-page/comic-page.component.ts
+++ b/comixed-webui/src/app/comic-books/components/comic-page/comic-page.component.ts
@@ -24,13 +24,9 @@ import {
   Output
 } from '@angular/core';
 import { LoggerService } from '@angular-ru/logger';
-import { selectUser } from '@app/user/selectors/user.selectors';
-import { Store } from '@ngrx/store';
 import { Subscription } from 'rxjs';
-import { getUserPreference } from '@app/user';
-import { PAGE_SIZE_PREFERENCE } from '@app/library/library.constants';
-import { Page } from '@app/comic-book/models/page';
-import { PageContextMenuEvent } from '@app/comic-book/models/event/page-context-menu-event';
+import { Page } from '@app/comic-books/models/page';
+import { PageContextMenuEvent } from '@app/comic-books/models/event/page-context-menu-event';
 
 /** Displays a page from a comic. Provides events for when the page is clicked. */
 @Component({
@@ -43,39 +39,12 @@ export class ComicPageComponent implements OnDestroy {
   @Input() imageUrl: string;
   @Input() selected: boolean;
   @Input() title: string;
-  @Input() pageSize = -1;
-  @Input() imageHeight = 'auto';
 
   @Output() showContextMenu = new EventEmitter<PageContextMenuEvent>();
 
   userSubscription: Subscription;
 
-  constructor(private logger: LoggerService, private store: Store<any>) {
-    this.userSubscription = this.store.select(selectUser).subscribe(user => {
-      this.pageSize = parseInt(
-        getUserPreference(
-          user.preferences,
-          PAGE_SIZE_PREFERENCE,
-          PAGE_SIZE_PREFERENCE
-        ),
-        10
-      );
-    });
-  }
-
-  private _imageWidth = null;
-
-  get imageWidth(): string {
-    return this.pageSize === -1
-      ? !!this._imageWidth
-        ? this._imageWidth
-        : 'auto'
-      : `${this.pageSize}px`;
-  }
-
-  @Input() set imageWidth(width) {
-    this._imageWidth = width;
-  }
+  constructor(private logger: LoggerService) {}
 
   ngOnDestroy(): void {
     this.userSubscription.unsubscribe();
diff --git a/comixed-webui/src/app/comic-book/components/comic-pages/comic-pages.component.html b/comixed-webui/src/app/comic-books/components/comic-pages/comic-pages.component.html
similarity index 67%
rename from comixed-webui/src/app/comic-book/components/comic-pages/comic-pages.component.html
rename to comixed-webui/src/app/comic-books/components/comic-pages/comic-pages.component.html
index 31a69af616..5ab7b1322b 100644
--- a/comixed-webui/src/app/comic-book/components/comic-pages/comic-pages.component.html
+++ b/comixed-webui/src/app/comic-books/components/comic-pages/comic-pages.component.html
@@ -1,12 +1,19 @@
-<div id="comic-pages" class="cx-comic-detail-card-container cx-width-100">
-  <cx-comic-page
+<div id="cx-all-pages" class="cx-detail-card-container">
+  <div
     *ngFor="let page of comic.pages; let i = index"
-    [page]="page"
-    [imageUrl]="page | comicPageUrl"
-    [title]="page.filename"
-    [pageSize]="pageSize"
-    (showContextMenu)="onShowContextMenu($event.page, $event.x, $event.y)"
-  ></cx-comic-page>
+    fxFlex.gt-md="25%"
+    fxFlex.md="50%"
+    fxFlex.sm="100%"
+    fxFlex.xs="100%"
+  >
+    <cx-comic-page
+      class="mat-elevation-z4"
+      [page]="page"
+      [imageUrl]="page | comicPageUrl"
+      [title]="page.filename"
+      (showContextMenu)="onShowContextMenu($event.page, $event.x, $event.y)"
+    ></cx-comic-page>
+  </div>
 </div>
 
 <div
diff --git a/comixed-webui/src/app/comic-book/components/comic-pages/comic-pages.component.scss b/comixed-webui/src/app/comic-books/components/comic-pages/comic-pages.component.scss
similarity index 100%
rename from comixed-webui/src/app/comic-book/components/comic-pages/comic-pages.component.scss
rename to comixed-webui/src/app/comic-books/components/comic-pages/comic-pages.component.scss
diff --git a/comixed-webui/src/app/comic-book/components/comic-pages/comic-pages.component.spec.ts b/comixed-webui/src/app/comic-books/components/comic-pages/comic-pages.component.spec.ts
similarity index 93%
rename from comixed-webui/src/app/comic-book/components/comic-pages/comic-pages.component.spec.ts
rename to comixed-webui/src/app/comic-books/components/comic-pages/comic-pages.component.spec.ts
index 02bb594b36..842879e1c9 100644
--- a/comixed-webui/src/app/comic-book/components/comic-pages/comic-pages.component.spec.ts
+++ b/comixed-webui/src/app/comic-books/components/comic-pages/comic-pages.component.spec.ts
@@ -18,9 +18,9 @@
 
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { ComicPagesComponent } from './comic-pages.component';
-import { COMIC_2 } from '@app/comic-book/comic-book.fixtures';
-import { ComicPageUrlPipe } from '@app/comic-book/pipes/comic-page-url.pipe';
-import { ComicPageComponent } from '@app/comic-book/components/comic-page/comic-page.component';
+import { COMIC_2 } from '@app/comic-books/comic-book.fixtures';
+import { ComicPageUrlPipe } from '@app/comic-books/pipes/comic-page-url.pipe';
+import { ComicPageComponent } from '@app/comic-books/components/comic-page/comic-page.component';
 import { LoggerModule } from '@angular-ru/logger';
 import { MatCardModule } from '@angular/material/card';
 import { MockStore, provideMockStore } from '@ngrx/store/testing';
diff --git a/comixed-webui/src/app/comic-book/components/comic-pages/comic-pages.component.ts b/comixed-webui/src/app/comic-books/components/comic-pages/comic-pages.component.ts
similarity index 94%
rename from comixed-webui/src/app/comic-book/components/comic-pages/comic-pages.component.ts
rename to comixed-webui/src/app/comic-books/components/comic-pages/comic-pages.component.ts
index f54ead6dd0..ba7c715cee 100644
--- a/comixed-webui/src/app/comic-book/components/comic-pages/comic-pages.component.ts
+++ b/comixed-webui/src/app/comic-books/components/comic-pages/comic-pages.component.ts
@@ -21,8 +21,8 @@ import { LoggerService } from '@angular-ru/logger';
 import { Store } from '@ngrx/store';
 import { MatMenuTrigger } from '@angular/material/menu';
 import { setBlockedState } from '@app/comic-pages/actions/block-page.actions';
-import { Page } from '@app/comic-book/models/page';
-import { Comic } from '@app/comic-book/models/comic';
+import { Page } from '@app/comic-books/models/page';
+import { Comic } from '@app/comic-books/models/comic';
 
 @Component({
   selector: 'cx-comic-pages',
diff --git a/comixed-webui/src/app/comic-book/components/comic-scraping/comic-scraping.component.html b/comixed-webui/src/app/comic-books/components/comic-scraping/comic-scraping.component.html
similarity index 100%
rename from comixed-webui/src/app/comic-book/components/comic-scraping/comic-scraping.component.html
rename to comixed-webui/src/app/comic-books/components/comic-scraping/comic-scraping.component.html
diff --git a/comixed-webui/src/app/comic-book/components/comic-scraping/comic-scraping.component.scss b/comixed-webui/src/app/comic-books/components/comic-scraping/comic-scraping.component.scss
similarity index 100%
rename from comixed-webui/src/app/comic-book/components/comic-scraping/comic-scraping.component.scss
rename to comixed-webui/src/app/comic-books/components/comic-scraping/comic-scraping.component.scss
diff --git a/comixed-webui/src/app/comic-book/components/comic-scraping/comic-scraping.component.spec.ts b/comixed-webui/src/app/comic-books/components/comic-scraping/comic-scraping.component.spec.ts
similarity index 96%
rename from comixed-webui/src/app/comic-book/components/comic-scraping/comic-scraping.component.spec.ts
rename to comixed-webui/src/app/comic-books/components/comic-scraping/comic-scraping.component.spec.ts
index 0510290237..6dc116711f 100644
--- a/comixed-webui/src/app/comic-book/components/comic-scraping/comic-scraping.component.spec.ts
+++ b/comixed-webui/src/app/comic-books/components/comic-scraping/comic-scraping.component.spec.ts
@@ -31,11 +31,11 @@ import {
   COMIC_4,
   SCRAPING_ISSUE_1,
   SCRAPING_VOLUME_3
-} from '@app/comic-book/comic-book.fixtures';
+} from '@app/comic-books/comic-book.fixtures';
 import {
   initialState as initialScrapingState,
   SCRAPING_FEATURE_KEY
-} from '@app/comic-book/reducers/scraping.reducer';
+} from '@app/comic-books/reducers/scraping.reducer';
 import { MatDialogModule } from '@angular/material/dialog';
 import { MatTableModule } from '@angular/material/table';
 import { MatToolbarModule } from '@angular/material/toolbar';
@@ -44,18 +44,18 @@ import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatPaginatorModule } from '@angular/material/paginator';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { MatSortModule } from '@angular/material/sort';
-import { ScrapingVolume } from '@app/comic-book/models/scraping-volume';
+import { ScrapingVolume } from '@app/comic-books/models/scraping-volume';
 import {
   loadScrapingIssue,
   resetScraping,
   scrapeComic
-} from '@app/comic-book/actions/scraping.actions';
+} from '@app/comic-books/actions/scraping.actions';
 import { Confirmation } from '@app/core/models/confirmation';
 import { deselectComics } from '@app/library/actions/library.actions';
 import { ConfirmationService } from '@app/core/services/confirmation.service';
 import { SortableListItem } from '@app/core/models/ui/sortable-list-item';
 import { MatTooltipModule } from '@angular/material/tooltip';
-import { ScrapingIssueDetailComponent } from '@app/comic-book/components/scraping-issue-detail/scraping-issue-detail.component';
+import { ScrapingIssueDetailComponent } from '@app/comic-books/components/scraping-issue-detail/scraping-issue-detail.component';
 
 describe('ComicScrapingComponent', () => {
   const SCRAPING_ISSUE = SCRAPING_ISSUE_1;
diff --git a/comixed-webui/src/app/comic-book/components/comic-scraping/comic-scraping.component.ts b/comixed-webui/src/app/comic-books/components/comic-scraping/comic-scraping.component.ts
similarity index 95%
rename from comixed-webui/src/app/comic-book/components/comic-scraping/comic-scraping.component.ts
rename to comixed-webui/src/app/comic-books/components/comic-scraping/comic-scraping.component.ts
index 9bac5684bd..3e36cf8bad 100644
--- a/comixed-webui/src/app/comic-book/components/comic-scraping/comic-scraping.component.ts
+++ b/comixed-webui/src/app/comic-books/components/comic-scraping/comic-scraping.component.ts
@@ -26,24 +26,24 @@ import {
   Output,
   ViewChild
 } from '@angular/core';
-import { ScrapingVolume } from '@app/comic-book/models/scraping-volume';
-import { Comic } from '@app/comic-book/models/comic';
+import { ScrapingVolume } from '@app/comic-books/models/scraping-volume';
+import { Comic } from '@app/comic-books/models/comic';
 import { MatTableDataSource } from '@angular/material/table';
 import { LoggerService } from '@angular-ru/logger';
 import { MatPaginator } from '@angular/material/paginator';
 import { MatSort } from '@angular/material/sort';
-import { ScrapingIssue } from '@app/comic-book/models/scraping-issue';
+import { ScrapingIssue } from '@app/comic-books/models/scraping-issue';
 import { Store } from '@ngrx/store';
 import {
   loadScrapingIssue,
   resetScraping,
   scrapeComic
-} from '@app/comic-book/actions/scraping.actions';
+} from '@app/comic-books/actions/scraping.actions';
 import { Subscription } from 'rxjs';
 import {
   selectScrapingIssue,
   selectScrapingState
-} from '@app/comic-book/selectors/scraping.selectors';
+} from '@app/comic-books/selectors/scraping.selectors';
 import { TranslateService } from '@ngx-translate/core';
 import { deselectComics } from '@app/library/actions/library.actions';
 import { SortableListItem } from '@app/core/models/ui/sortable-list-item';
diff --git a/comixed-webui/src/app/comic-book/components/comic-story/comic-story.component.html b/comixed-webui/src/app/comic-books/components/comic-story/comic-story.component.html
similarity index 89%
rename from comixed-webui/src/app/comic-book/components/comic-story/comic-story.component.html
rename to comixed-webui/src/app/comic-books/components/comic-story/comic-story.component.html
index 42e37802f6..5dc58ee248 100644
--- a/comixed-webui/src/app/comic-book/components/comic-story/comic-story.component.html
+++ b/comixed-webui/src/app/comic-books/components/comic-story/comic-story.component.html
@@ -18,7 +18,7 @@
         }}
       </mat-panel-title>
     </mat-expansion-panel-header>
-    <div class="cx-comic-detail-card-container cx-width-100">
+    <div class="cx-detail-card-container cx-width-100">
       <cx-comic-detail-card
         *ngFor="let credit of comic.credits"
         [title]="credit.name"
@@ -35,7 +35,7 @@
         }}
       </mat-panel-title>
     </mat-expansion-panel-header>
-    <div class="cx-comic-detail-card-container cx-width-100">
+    <div class="cx-detail-card-container cx-width-100">
       <cx-comic-detail-card
         *ngFor="let character of comic.characters"
         [title]="character"
@@ -50,7 +50,7 @@
         }}
       </mat-panel-title>
     </mat-expansion-panel-header>
-    <div class="cx-comic-detail-card-container cx-width-100">
+    <div class="cx-detail-card-container cx-width-100">
       <cx-comic-detail-card
         *ngFor="let team of comic.teams"
         [title]="team"
@@ -66,7 +66,7 @@
         }}
       </mat-panel-title>
     </mat-expansion-panel-header>
-    <div class="cx-comic-detail-card-container cx-width-100">
+    <div class="cx-detail-card-container cx-width-100">
       <cx-comic-detail-card
         *ngFor="let location of comic.locations"
         [title]="location"
@@ -82,7 +82,7 @@
         }}
       </mat-panel-title>
     </mat-expansion-panel-header>
-    <div class="cx-comic-detail-card-container cx-width-100">
+    <div class="cx-detail-card-container cx-width-100">
       <cx-comic-detail-card
         *ngFor="let story of comic.stories"
         [title]="story"
diff --git a/comixed-webui/src/app/comic-book/components/comic-story/comic-story.component.scss b/comixed-webui/src/app/comic-books/components/comic-story/comic-story.component.scss
similarity index 100%
rename from comixed-webui/src/app/comic-book/components/comic-story/comic-story.component.scss
rename to comixed-webui/src/app/comic-books/components/comic-story/comic-story.component.scss
diff --git a/comixed-webui/src/app/comic-book/components/comic-story/comic-story.component.spec.ts b/comixed-webui/src/app/comic-books/components/comic-story/comic-story.component.spec.ts
similarity index 92%
rename from comixed-webui/src/app/comic-book/components/comic-story/comic-story.component.spec.ts
rename to comixed-webui/src/app/comic-books/components/comic-story/comic-story.component.spec.ts
index 44754f51eb..f5a21c16b7 100644
--- a/comixed-webui/src/app/comic-book/components/comic-story/comic-story.component.spec.ts
+++ b/comixed-webui/src/app/comic-books/components/comic-story/comic-story.component.spec.ts
@@ -20,10 +20,10 @@ import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { ComicStoryComponent } from './comic-story.component';
 import { LoggerModule } from '@angular-ru/logger';
 import { TranslateModule } from '@ngx-translate/core';
-import { COMIC_2 } from '@app/comic-book/comic-book.fixtures';
+import { COMIC_2 } from '@app/comic-books/comic-book.fixtures';
 import { MatExpansionModule } from '@angular/material/expansion';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
-import { ComicDetailCardComponent } from '@app/comic-book/components/comic-detail-card/comic-detail-card.component';
+import { ComicDetailCardComponent } from '@app/comic-books/components/comic-detail-card/comic-detail-card.component';
 import { provideMockStore } from '@ngrx/store/testing';
 import { MatCardModule } from '@angular/material/card';
 import { MatChipsModule } from '@angular/material/chips';
diff --git a/comixed-webui/src/app/comic-book/components/comic-story/comic-story.component.ts b/comixed-webui/src/app/comic-books/components/comic-story/comic-story.component.ts
similarity index 95%
rename from comixed-webui/src/app/comic-book/components/comic-story/comic-story.component.ts
rename to comixed-webui/src/app/comic-books/components/comic-story/comic-story.component.ts
index 24cff69976..38dc520c7a 100644
--- a/comixed-webui/src/app/comic-book/components/comic-story/comic-story.component.ts
+++ b/comixed-webui/src/app/comic-books/components/comic-story/comic-story.component.ts
@@ -17,7 +17,7 @@
  */
 
 import { Component, Input, OnInit, ViewChild } from '@angular/core';
-import { Comic } from '@app/comic-book/models/comic';
+import { Comic } from '@app/comic-books/models/comic';
 import { MatAccordion } from '@angular/material/expansion';
 
 @Component({
diff --git a/comixed-webui/src/app/comic-book/components/scraping-issue-detail/scraping-issue-detail.component.html b/comixed-webui/src/app/comic-books/components/scraping-issue-detail/scraping-issue-detail.component.html
similarity index 90%
rename from comixed-webui/src/app/comic-book/components/scraping-issue-detail/scraping-issue-detail.component.html
rename to comixed-webui/src/app/comic-books/components/scraping-issue-detail/scraping-issue-detail.component.html
index cae568b423..c4245db660 100644
--- a/comixed-webui/src/app/comic-book/components/scraping-issue-detail/scraping-issue-detail.component.html
+++ b/comixed-webui/src/app/comic-books/components/scraping-issue-detail/scraping-issue-detail.component.html
@@ -7,10 +7,9 @@
     }}
   </mat-card-subtitle>
   <mat-card-content>
-    <cx-comic-page
-      [pageSize]="pageSize"
-      [imageUrl]="issue.coverUrl"
-    ></cx-comic-page>
+    <div class="cx-width-100">
+      <cx-comic-page [imageUrl]="issue.coverUrl"></cx-comic-page>
+    </div>
   </mat-card-content>
   <mat-card-actions>
     <div class="cx-width-100 cx-align-content-center">
diff --git a/comixed-webui/src/app/comic-book/components/scraping-issue-detail/scraping-issue-detail.component.scss b/comixed-webui/src/app/comic-books/components/scraping-issue-detail/scraping-issue-detail.component.scss
similarity index 100%
rename from comixed-webui/src/app/comic-book/components/scraping-issue-detail/scraping-issue-detail.component.scss
rename to comixed-webui/src/app/comic-books/components/scraping-issue-detail/scraping-issue-detail.component.scss
diff --git a/comixed-webui/src/app/comic-book/components/scraping-issue-detail/scraping-issue-detail.component.spec.ts b/comixed-webui/src/app/comic-books/components/scraping-issue-detail/scraping-issue-detail.component.spec.ts
similarity index 91%
rename from comixed-webui/src/app/comic-book/components/scraping-issue-detail/scraping-issue-detail.component.spec.ts
rename to comixed-webui/src/app/comic-books/components/scraping-issue-detail/scraping-issue-detail.component.spec.ts
index d33f0bff16..cf2a9b0728 100644
--- a/comixed-webui/src/app/comic-book/components/scraping-issue-detail/scraping-issue-detail.component.spec.ts
+++ b/comixed-webui/src/app/comic-books/components/scraping-issue-detail/scraping-issue-detail.component.spec.ts
@@ -19,12 +19,12 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { ScrapingIssueDetailComponent } from './scraping-issue-detail.component';
 import { LoggerModule } from '@angular-ru/logger';
-import { ScrapingIssueTitlePipe } from '@app/comic-book/pipes/scraping-issue-title.pipe';
+import { ScrapingIssueTitlePipe } from '@app/comic-books/pipes/scraping-issue-title.pipe';
 import { TranslateModule } from '@ngx-translate/core';
-import { SCRAPING_ISSUE_1 } from '@app/comic-book/comic-book.fixtures';
+import { SCRAPING_ISSUE_1 } from '@app/comic-books/comic-book.fixtures';
 import { MatCardModule } from '@angular/material/card';
 import { MatFormFieldModule } from '@angular/material/form-field';
-import { ComicPageComponent } from '@app/comic-book/components/comic-page/comic-page.component';
+import { ComicPageComponent } from '@app/comic-books/components/comic-page/comic-page.component';
 import { MatIconModule } from '@angular/material/icon';
 import { provideMockStore } from '@ngrx/store/testing';
 import {
diff --git a/comixed-webui/src/app/comic-book/components/scraping-issue-detail/scraping-issue-detail.component.ts b/comixed-webui/src/app/comic-books/components/scraping-issue-detail/scraping-issue-detail.component.ts
similarity index 93%
rename from comixed-webui/src/app/comic-book/components/scraping-issue-detail/scraping-issue-detail.component.ts
rename to comixed-webui/src/app/comic-books/components/scraping-issue-detail/scraping-issue-detail.component.ts
index 6b838529fe..7996c5fa55 100644
--- a/comixed-webui/src/app/comic-book/components/scraping-issue-detail/scraping-issue-detail.component.ts
+++ b/comixed-webui/src/app/comic-books/components/scraping-issue-detail/scraping-issue-detail.component.ts
@@ -17,7 +17,7 @@
  */
 
 import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
-import { ScrapingIssue } from '@app/comic-book/models/scraping-issue';
+import { ScrapingIssue } from '@app/comic-books/models/scraping-issue';
 import { LoggerService } from '@angular-ru/logger';
 
 @Component({
@@ -26,7 +26,6 @@ import { LoggerService } from '@angular-ru/logger';
   styleUrls: ['./scraping-issue-detail.component.scss']
 })
 export class ScrapingIssueDetailComponent implements OnInit {
-  @Input() pageSize: number;
   @Input() issue: ScrapingIssue;
 
   @Output() decision = new EventEmitter<boolean>();
diff --git a/comixed-webui/src/app/comic-book/effects/comic-list.effects.spec.ts b/comixed-webui/src/app/comic-books/effects/comic-list.effects.spec.ts
similarity index 90%
rename from comixed-webui/src/app/comic-book/effects/comic-list.effects.spec.ts
rename to comixed-webui/src/app/comic-books/effects/comic-list.effects.spec.ts
index a3c2651474..f101cb3ae9 100644
--- a/comixed-webui/src/app/comic-book/effects/comic-list.effects.spec.ts
+++ b/comixed-webui/src/app/comic-books/effects/comic-list.effects.spec.ts
@@ -20,18 +20,22 @@ import { TestBed } from '@angular/core/testing';
 import { provideMockActions } from '@ngrx/effects/testing';
 import { Observable, of, throwError } from 'rxjs';
 import { ComicListEffects } from './comic-list.effects';
-import { ComicListService } from '@app/comic-book/services/comic-list.service';
+import { ComicListService } from '@app/comic-books/services/comic-list.service';
 import { LoggerModule } from '@angular-ru/logger';
-import { COMIC_1, COMIC_3, COMIC_5 } from '@app/comic-book/comic-book.fixtures';
+import {
+  COMIC_1,
+  COMIC_3,
+  COMIC_5
+} from '@app/comic-books/comic-book.fixtures';
 import {
   comicsReceived,
   loadComics,
   loadComicsFailed
-} from '@app/comic-book/actions/comic-list.actions';
+} from '@app/comic-books/actions/comic-list.actions';
 import { hot } from 'jasmine-marbles';
-import { ComicService } from '@app/comic-book/services/comic.service';
+import { ComicService } from '@app/comic-books/services/comic.service';
 import { HttpErrorResponse } from '@angular/common/http';
-import { LoadComicsResponse } from '@app/comic-book/models/net/load-comics-response';
+import { LoadComicsResponse } from '@app/comic-books/models/net/load-comics-response';
 
 describe('ComicListEffects', () => {
   const COMICS = [COMIC_1, COMIC_3, COMIC_5];
diff --git a/comixed-webui/src/app/comic-book/effects/comic-list.effects.ts b/comixed-webui/src/app/comic-books/effects/comic-list.effects.ts
similarity index 88%
rename from comixed-webui/src/app/comic-book/effects/comic-list.effects.ts
rename to comixed-webui/src/app/comic-books/effects/comic-list.effects.ts
index 59b1277612..6551c7b06b 100644
--- a/comixed-webui/src/app/comic-book/effects/comic-list.effects.ts
+++ b/comixed-webui/src/app/comic-books/effects/comic-list.effects.ts
@@ -19,16 +19,16 @@
 import { Injectable } from '@angular/core';
 import { Actions, createEffect, ofType } from '@ngrx/effects';
 import { LoggerService } from '@angular-ru/logger';
-import { ComicService } from '@app/comic-book/services/comic.service';
+import { ComicService } from '@app/comic-books/services/comic.service';
 import {
   comicsReceived,
   loadComics,
   loadComicsFailed
-} from '@app/comic-book/actions/comic-list.actions';
+} from '@app/comic-books/actions/comic-list.actions';
 import { catchError, map, switchMap, tap } from 'rxjs/operators';
-import { LoadComicsResponse } from '@app/comic-book/models/net/load-comics-response';
+import { LoadComicsResponse } from '@app/comic-books/models/net/load-comics-response';
 import { of } from 'rxjs';
-import { ComicListService } from '@app/comic-book/services/comic-list.service';
+import { ComicListService } from '@app/comic-books/services/comic-list.service';
 
 @Injectable()
 export class ComicListEffects {
diff --git a/comixed-webui/src/app/comic-book/effects/comic.effects.spec.ts b/comixed-webui/src/app/comic-books/effects/comic.effects.spec.ts
similarity index 96%
rename from comixed-webui/src/app/comic-book/effects/comic.effects.spec.ts
rename to comixed-webui/src/app/comic-books/effects/comic.effects.spec.ts
index 47f559f142..85af543e5a 100644
--- a/comixed-webui/src/app/comic-book/effects/comic.effects.spec.ts
+++ b/comixed-webui/src/app/comic-books/effects/comic.effects.spec.ts
@@ -20,9 +20,9 @@ import { TestBed } from '@angular/core/testing';
 import { provideMockActions } from '@ngrx/effects/testing';
 import { Observable, of, throwError } from 'rxjs';
 import { ComicEffects } from './comic.effects';
-import { ComicService } from '@app/comic-book/services/comic.service';
+import { ComicService } from '@app/comic-books/services/comic.service';
 import { AlertService } from '@app/core/services/alert.service';
-import { COMIC_2 } from '@app/comic-book/comic-book.fixtures';
+import { COMIC_2 } from '@app/comic-books/comic-book.fixtures';
 import {
   comicLoaded,
   comicUpdated,
@@ -30,7 +30,7 @@ import {
   loadComicFailed,
   updateComic,
   updateComicFailed
-} from '@app/comic-book/actions/comic.actions';
+} from '@app/comic-books/actions/comic.actions';
 import { hot } from 'jasmine-marbles';
 import { HttpErrorResponse } from '@angular/common/http';
 import { LoggerModule } from '@angular-ru/logger';
diff --git a/comixed-webui/src/app/comic-book/effects/comic.effects.ts b/comixed-webui/src/app/comic-books/effects/comic.effects.ts
similarity index 95%
rename from comixed-webui/src/app/comic-book/effects/comic.effects.ts
rename to comixed-webui/src/app/comic-books/effects/comic.effects.ts
index 5cc1267ca3..8180b1aac8 100644
--- a/comixed-webui/src/app/comic-book/effects/comic.effects.ts
+++ b/comixed-webui/src/app/comic-books/effects/comic.effects.ts
@@ -21,7 +21,7 @@ import { Actions, createEffect, ofType } from '@ngrx/effects';
 import { LoggerService } from '@angular-ru/logger';
 import { TranslateService } from '@ngx-translate/core';
 import { AlertService } from '@app/core/services/alert.service';
-import { ComicService } from '@app/comic-book/services/comic.service';
+import { ComicService } from '@app/comic-books/services/comic.service';
 import {
   comicLoaded,
   comicUpdated,
@@ -29,9 +29,9 @@ import {
   loadComicFailed,
   updateComic,
   updateComicFailed
-} from '@app/comic-book/actions/comic.actions';
+} from '@app/comic-books/actions/comic.actions';
 import { catchError, map, switchMap, tap } from 'rxjs/operators';
-import { Comic } from '@app/comic-book/models/comic';
+import { Comic } from '@app/comic-books/models/comic';
 import { of } from 'rxjs';
 
 @Injectable()
diff --git a/comixed-webui/src/app/comic-book/effects/imprint-list.effects.spec.ts b/comixed-webui/src/app/comic-books/effects/imprint-list.effects.spec.ts
similarity index 95%
rename from comixed-webui/src/app/comic-book/effects/imprint-list.effects.spec.ts
rename to comixed-webui/src/app/comic-books/effects/imprint-list.effects.spec.ts
index 0f4be7735a..8616d9b155 100644
--- a/comixed-webui/src/app/comic-book/effects/imprint-list.effects.spec.ts
+++ b/comixed-webui/src/app/comic-books/effects/imprint-list.effects.spec.ts
@@ -20,7 +20,7 @@ import { TestBed } from '@angular/core/testing';
 import { provideMockActions } from '@ngrx/effects/testing';
 import { Observable, of, throwError } from 'rxjs';
 import { ImprintListEffects } from './imprint-list.effects';
-import { ImprintService } from '@app/comic-book/services/imprint.service';
+import { ImprintService } from '@app/comic-books/services/imprint.service';
 import { AlertService } from '@app/core/services/alert.service';
 import { LoggerModule } from '@angular-ru/logger';
 import { TranslateModule } from '@ngx-translate/core';
@@ -29,12 +29,12 @@ import {
   IMPRINT_1,
   IMPRINT_2,
   IMPRINT_3
-} from '@app/comic-book/comic-book.fixtures';
+} from '@app/comic-books/comic-book.fixtures';
 import {
   imprintsLoaded,
   loadImprints,
   loadImprintsFailed
-} from '@app/comic-book/actions/imprint-list.actions';
+} from '@app/comic-books/actions/imprint-list.actions';
 import { hot } from 'jasmine-marbles';
 import { HttpErrorResponse } from '@angular/common/http';
 
diff --git a/comixed-webui/src/app/comic-book/effects/imprint-list.effects.ts b/comixed-webui/src/app/comic-books/effects/imprint-list.effects.ts
similarity index 94%
rename from comixed-webui/src/app/comic-book/effects/imprint-list.effects.ts
rename to comixed-webui/src/app/comic-books/effects/imprint-list.effects.ts
index 2b7ce1b461..d521bc4ecc 100644
--- a/comixed-webui/src/app/comic-book/effects/imprint-list.effects.ts
+++ b/comixed-webui/src/app/comic-books/effects/imprint-list.effects.ts
@@ -24,11 +24,11 @@ import {
   loadImprintsFailed
 } from '../actions/imprint-list.actions';
 import { LoggerService } from '@angular-ru/logger';
-import { ImprintService } from '@app/comic-book/services/imprint.service';
+import { ImprintService } from '@app/comic-books/services/imprint.service';
 import { AlertService } from '@app/core/services/alert.service';
 import { TranslateService } from '@ngx-translate/core';
 import { catchError, map, switchMap, tap } from 'rxjs/operators';
-import { Imprint } from '@app/comic-book/models/imprint';
+import { Imprint } from '@app/comic-books/models/imprint';
 import { of } from 'rxjs';
 
 @Injectable()
diff --git a/comixed-webui/src/app/comic-book/effects/mark-comics-deleted.effects.spec.ts b/comixed-webui/src/app/comic-books/effects/mark-comics-deleted.effects.spec.ts
similarity index 92%
rename from comixed-webui/src/app/comic-book/effects/mark-comics-deleted.effects.spec.ts
rename to comixed-webui/src/app/comic-books/effects/mark-comics-deleted.effects.spec.ts
index d5a604ab45..fece2cccbb 100644
--- a/comixed-webui/src/app/comic-book/effects/mark-comics-deleted.effects.spec.ts
+++ b/comixed-webui/src/app/comic-books/effects/mark-comics-deleted.effects.spec.ts
@@ -19,20 +19,24 @@
 import { TestBed } from '@angular/core/testing';
 import { provideMockActions } from '@ngrx/effects/testing';
 import { Observable, of, throwError } from 'rxjs';
-import { ComicService } from '@app/comic-book/services/comic.service';
+import { ComicService } from '@app/comic-books/services/comic.service';
 import { AlertService } from '@app/core/services/alert.service';
 import { LoggerModule } from '@angular-ru/logger';
 import { TranslateModule } from '@ngx-translate/core';
 import { MatSnackBarModule } from '@angular/material/snack-bar';
-import { COMIC_1, COMIC_3, COMIC_5 } from '@app/comic-book/comic-book.fixtures';
+import {
+  COMIC_1,
+  COMIC_3,
+  COMIC_5
+} from '@app/comic-books/comic-book.fixtures';
 import { HttpErrorResponse, HttpResponse } from '@angular/common/http';
 import {
   comicsMarkedDeleted,
   markComicsDeleted,
   markComicsDeletedFailed
-} from '@app/comic-book/actions/mark-comics-deleted.actions';
+} from '@app/comic-books/actions/mark-comics-deleted.actions';
 import { hot } from 'jasmine-marbles';
-import { MarkComicsDeletedEffects } from '@app/comic-book/effects/mark-comics-deleted.effects';
+import { MarkComicsDeletedEffects } from '@app/comic-books/effects/mark-comics-deleted.effects';
 
 describe('MarkComicsDeletedEffects', () => {
   const COMICS = [COMIC_1, COMIC_3, COMIC_5];
diff --git a/comixed-webui/src/app/comic-book/effects/mark-comics-deleted.effects.ts b/comixed-webui/src/app/comic-books/effects/mark-comics-deleted.effects.ts
similarity index 97%
rename from comixed-webui/src/app/comic-book/effects/mark-comics-deleted.effects.ts
rename to comixed-webui/src/app/comic-books/effects/mark-comics-deleted.effects.ts
index 5dd786a310..c4c821fb84 100644
--- a/comixed-webui/src/app/comic-book/effects/mark-comics-deleted.effects.ts
+++ b/comixed-webui/src/app/comic-books/effects/mark-comics-deleted.effects.ts
@@ -24,7 +24,7 @@ import {
   markComicsDeletedFailed
 } from '../actions/mark-comics-deleted.actions';
 import { LoggerService } from '@angular-ru/logger';
-import { ComicService } from '@app/comic-book/services/comic.service';
+import { ComicService } from '@app/comic-books/services/comic.service';
 import { AlertService } from '@app/core/services/alert.service';
 import { TranslateService } from '@ngx-translate/core';
 import { catchError, map, switchMap, tap } from 'rxjs/operators';
diff --git a/comixed-webui/src/app/comic-book/effects/scraping.effects.spec.ts b/comixed-webui/src/app/comic-books/effects/scraping.effects.spec.ts
similarity index 97%
rename from comixed-webui/src/app/comic-book/effects/scraping.effects.spec.ts
rename to comixed-webui/src/app/comic-books/effects/scraping.effects.spec.ts
index aca9ee6e64..ed02b56c0b 100644
--- a/comixed-webui/src/app/comic-book/effects/scraping.effects.spec.ts
+++ b/comixed-webui/src/app/comic-books/effects/scraping.effects.spec.ts
@@ -20,14 +20,14 @@ import { TestBed } from '@angular/core/testing';
 import { provideMockActions } from '@ngrx/effects/testing';
 import { Observable, of, throwError } from 'rxjs';
 import { ScrapingEffects } from './scraping.effects';
-import { ScrapingService } from '@app/comic-book/services/scraping.service';
+import { ScrapingService } from '@app/comic-books/services/scraping.service';
 import {
   COMIC_4,
   SCRAPING_ISSUE_1,
   SCRAPING_VOLUME_1,
   SCRAPING_VOLUME_2,
   SCRAPING_VOLUME_3
-} from '@app/comic-book/comic-book.fixtures';
+} from '@app/comic-books/comic-book.fixtures';
 import {
   comicScraped,
   loadScrapingIssue,
@@ -38,14 +38,14 @@ import {
   scrapeComicFailed,
   scrapingIssueLoaded,
   scrapingVolumesLoaded
-} from '@app/comic-book/actions/scraping.actions';
+} from '@app/comic-books/actions/scraping.actions';
 import { hot } from 'jasmine-marbles';
 import { AlertService } from '@app/core/services/alert.service';
 import { LoggerModule } from '@angular-ru/logger';
 import { TranslateModule } from '@ngx-translate/core';
 import { HttpErrorResponse } from '@angular/common/http';
 import { MatSnackBarModule } from '@angular/material/snack-bar';
-import { comicLoaded } from '@app/comic-book/actions/comic.actions';
+import { comicLoaded } from '@app/comic-books/actions/comic.actions';
 
 describe('ScrapingEffects', () => {
   const API_KEY = '1234567890ABCDEF';
diff --git a/comixed-webui/src/app/comic-book/effects/scraping.effects.ts b/comixed-webui/src/app/comic-books/effects/scraping.effects.ts
similarity index 93%
rename from comixed-webui/src/app/comic-book/effects/scraping.effects.ts
rename to comixed-webui/src/app/comic-books/effects/scraping.effects.ts
index ab27e954a9..d41cb46b27 100644
--- a/comixed-webui/src/app/comic-book/effects/scraping.effects.ts
+++ b/comixed-webui/src/app/comic-books/effects/scraping.effects.ts
@@ -28,17 +28,17 @@ import {
   scrapeComicFailed,
   scrapingIssueLoaded,
   scrapingVolumesLoaded
-} from '@app/comic-book/actions/scraping.actions';
+} from '@app/comic-books/actions/scraping.actions';
 import { catchError, map, mergeMap, switchMap, tap } from 'rxjs/operators';
 import { LoggerService } from '@angular-ru/logger';
-import { ScrapingService } from '@app/comic-book/services/scraping.service';
-import { ScrapingVolume } from '@app/comic-book/models/scraping-volume';
+import { ScrapingService } from '@app/comic-books/services/scraping.service';
+import { ScrapingVolume } from '@app/comic-books/models/scraping-volume';
 import { TranslateService } from '@ngx-translate/core';
 import { AlertService } from '@app/core/services/alert.service';
 import { of } from 'rxjs';
-import { ScrapingIssue } from '@app/comic-book/models/scraping-issue';
-import { Comic } from '@app/comic-book/models/comic';
-import { comicLoaded } from '@app/comic-book/actions/comic.actions';
+import { ScrapingIssue } from '@app/comic-books/models/scraping-issue';
+import { Comic } from '@app/comic-books/models/comic';
+import { comicLoaded } from '@app/comic-books/actions/comic.actions';
 
 @Injectable()
 export class ScrapingEffects {
diff --git a/comixed-webui/src/app/comic-book/index.ts b/comixed-webui/src/app/comic-books/index.ts
similarity index 100%
rename from comixed-webui/src/app/comic-book/index.ts
rename to comixed-webui/src/app/comic-books/index.ts
diff --git a/comixed-webui/src/app/comic-book/models/archive-type.enum.ts b/comixed-webui/src/app/comic-books/models/archive-type.enum.ts
similarity index 100%
rename from comixed-webui/src/app/comic-book/models/archive-type.enum.ts
rename to comixed-webui/src/app/comic-books/models/archive-type.enum.ts
diff --git a/comixed-webui/src/app/comic-book/models/comic-book-state.ts b/comixed-webui/src/app/comic-books/models/comic-book-state.ts
similarity index 100%
rename from comixed-webui/src/app/comic-book/models/comic-book-state.ts
rename to comixed-webui/src/app/comic-books/models/comic-book-state.ts
diff --git a/comixed-webui/src/app/comic-book/models/comic-credit.ts b/comixed-webui/src/app/comic-books/models/comic-credit.ts
similarity index 100%
rename from comixed-webui/src/app/comic-book/models/comic-credit.ts
rename to comixed-webui/src/app/comic-books/models/comic-credit.ts
diff --git a/comixed-webui/src/app/comic-book/models/comic-file-entry.ts b/comixed-webui/src/app/comic-books/models/comic-file-entry.ts
similarity index 100%
rename from comixed-webui/src/app/comic-book/models/comic-file-entry.ts
rename to comixed-webui/src/app/comic-books/models/comic-file-entry.ts
diff --git a/comixed-webui/src/app/comic-book/models/comic.ts b/comixed-webui/src/app/comic-books/models/comic.ts
similarity index 79%
rename from comixed-webui/src/app/comic-book/models/comic.ts
rename to comixed-webui/src/app/comic-books/models/comic.ts
index 1eb3af9869..2c91c16fc4 100644
--- a/comixed-webui/src/app/comic-book/models/comic.ts
+++ b/comixed-webui/src/app/comic-books/models/comic.ts
@@ -16,12 +16,12 @@
  * along with this program. If not, see <http://www.gnu.org/licenses>
  */
 
-import { FileDetails } from '@app/comic-book/models/file-details';
-import { ComicFileEntry } from '@app/comic-book/models/comic-file-entry';
-import { ComicCredit } from '@app/comic-book/models/comic-credit';
-import { Page } from '@app/comic-book/models/page';
-import { ComicBookState } from '@app/comic-book/models/comic-book-state';
-import { ArchiveType } from '@app/comic-book/models/archive-type.enum';
+import { FileDetails } from '@app/comic-books/models/file-details';
+import { ComicFileEntry } from '@app/comic-books/models/comic-file-entry';
+import { ComicCredit } from '@app/comic-books/models/comic-credit';
+import { Page } from '@app/comic-books/models/page';
+import { ComicBookState } from '@app/comic-books/models/comic-book-state';
+import { ArchiveType } from '@app/comic-books/models/archive-type.enum';
 
 export interface Comic {
   id: number;
diff --git a/comixed-webui/src/app/comic-book/models/event/comic-select-event.ts b/comixed-webui/src/app/comic-books/models/event/comic-select-event.ts
similarity index 94%
rename from comixed-webui/src/app/comic-book/models/event/comic-select-event.ts
rename to comixed-webui/src/app/comic-books/models/event/comic-select-event.ts
index dd3815dd4b..75bace98f0 100644
--- a/comixed-webui/src/app/comic-book/models/event/comic-select-event.ts
+++ b/comixed-webui/src/app/comic-books/models/event/comic-select-event.ts
@@ -16,7 +16,7 @@
  * along with this program. If not, see <http://www.gnu.org/licenses>
  */
 
-import { Comic } from '@app/comic-book/models/comic';
+import { Comic } from '@app/comic-books/models/comic';
 
 /**
  * Fired when a comic selection event occurs.
diff --git a/comixed-webui/src/app/comic-book/models/event/page-context-menu-event.ts b/comixed-webui/src/app/comic-books/models/event/page-context-menu-event.ts
similarity index 94%
rename from comixed-webui/src/app/comic-book/models/event/page-context-menu-event.ts
rename to comixed-webui/src/app/comic-books/models/event/page-context-menu-event.ts
index 571bee23e7..4e48b3fff7 100644
--- a/comixed-webui/src/app/comic-book/models/event/page-context-menu-event.ts
+++ b/comixed-webui/src/app/comic-books/models/event/page-context-menu-event.ts
@@ -16,7 +16,7 @@
  * along with this program. If not, see <http://www.gnu.org/licenses>
  */
 
-import { Page } from '@app/comic-book/models/page';
+import { Page } from '@app/comic-books/models/page';
 
 export interface PageContextMenuEvent {
   page: Page;
diff --git a/comixed-webui/src/app/comic-book/models/event/update-comic-info-event.ts b/comixed-webui/src/app/comic-books/models/event/update-comic-info-event.ts
similarity index 93%
rename from comixed-webui/src/app/comic-book/models/event/update-comic-info-event.ts
rename to comixed-webui/src/app/comic-books/models/event/update-comic-info-event.ts
index 2ede5cc19e..2d8cee9833 100644
--- a/comixed-webui/src/app/comic-book/models/event/update-comic-info-event.ts
+++ b/comixed-webui/src/app/comic-books/models/event/update-comic-info-event.ts
@@ -16,7 +16,7 @@
  * along with this program. If not, see <http://www.gnu.org/licenses>
  */
 
-import { Comic } from '@app/comic-book/models/comic';
+import { Comic } from '@app/comic-books/models/comic';
 
 export interface UpdateComicInfoEvent {
   comic: Comic;
diff --git a/comixed-webui/src/app/comic-book/models/file-details.ts b/comixed-webui/src/app/comic-books/models/file-details.ts
similarity index 100%
rename from comixed-webui/src/app/comic-book/models/file-details.ts
rename to comixed-webui/src/app/comic-books/models/file-details.ts
diff --git a/comixed-webui/src/app/comic-book/models/imprint.ts b/comixed-webui/src/app/comic-books/models/imprint.ts
similarity index 100%
rename from comixed-webui/src/app/comic-book/models/imprint.ts
rename to comixed-webui/src/app/comic-books/models/imprint.ts
diff --git a/comixed-webui/src/app/comic-book/models/net/load-comics-request.ts b/comixed-webui/src/app/comic-books/models/net/load-comics-request.ts
similarity index 100%
rename from comixed-webui/src/app/comic-book/models/net/load-comics-request.ts
rename to comixed-webui/src/app/comic-books/models/net/load-comics-request.ts
diff --git a/comixed-webui/src/app/comic-book/models/net/load-comics-response.ts b/comixed-webui/src/app/comic-books/models/net/load-comics-response.ts
similarity index 94%
rename from comixed-webui/src/app/comic-book/models/net/load-comics-response.ts
rename to comixed-webui/src/app/comic-books/models/net/load-comics-response.ts
index 6c4eb794ca..ab14aff6d8 100644
--- a/comixed-webui/src/app/comic-book/models/net/load-comics-response.ts
+++ b/comixed-webui/src/app/comic-books/models/net/load-comics-response.ts
@@ -16,7 +16,7 @@
  * along with this program. If not, see <http://www.gnu.org/licenses>
  */
 
-import { Comic } from '@app/comic-book/models/comic';
+import { Comic } from '@app/comic-books/models/comic';
 
 export interface LoadComicsResponse {
   comics: Comic[];
diff --git a/comixed-webui/src/app/comic-book/models/net/load-scraping-issue-request.ts b/comixed-webui/src/app/comic-books/models/net/load-scraping-issue-request.ts
similarity index 100%
rename from comixed-webui/src/app/comic-book/models/net/load-scraping-issue-request.ts
rename to comixed-webui/src/app/comic-books/models/net/load-scraping-issue-request.ts
diff --git a/comixed-webui/src/app/comic-book/models/net/load-scraping-volumes-request.ts b/comixed-webui/src/app/comic-books/models/net/load-scraping-volumes-request.ts
similarity index 100%
rename from comixed-webui/src/app/comic-book/models/net/load-scraping-volumes-request.ts
rename to comixed-webui/src/app/comic-books/models/net/load-scraping-volumes-request.ts
diff --git a/comixed-webui/src/app/comic-book/models/net/mark-comics-deleted-request.ts b/comixed-webui/src/app/comic-books/models/net/mark-comics-deleted-request.ts
similarity index 100%
rename from comixed-webui/src/app/comic-book/models/net/mark-comics-deleted-request.ts
rename to comixed-webui/src/app/comic-books/models/net/mark-comics-deleted-request.ts
diff --git a/comixed-webui/src/app/comic-book/models/net/mark-comics-undeleted-request.ts b/comixed-webui/src/app/comic-books/models/net/mark-comics-undeleted-request.ts
similarity index 100%
rename from comixed-webui/src/app/comic-book/models/net/mark-comics-undeleted-request.ts
rename to comixed-webui/src/app/comic-books/models/net/mark-comics-undeleted-request.ts
diff --git a/comixed-webui/src/app/comic-book/models/net/scrape-comic-request.ts b/comixed-webui/src/app/comic-books/models/net/scrape-comic-request.ts
similarity index 100%
rename from comixed-webui/src/app/comic-book/models/net/scrape-comic-request.ts
rename to comixed-webui/src/app/comic-books/models/net/scrape-comic-request.ts
diff --git a/comixed-webui/src/app/comic-book/models/page.ts b/comixed-webui/src/app/comic-books/models/page.ts
similarity index 94%
rename from comixed-webui/src/app/comic-book/models/page.ts
rename to comixed-webui/src/app/comic-books/models/page.ts
index 54ecd39c32..f485858d8c 100644
--- a/comixed-webui/src/app/comic-book/models/page.ts
+++ b/comixed-webui/src/app/comic-books/models/page.ts
@@ -16,7 +16,7 @@
  * along with this program. If not, see <http://www.gnu.org/licenses>
  */
 
-import { Comic } from '@app/comic-book/models/comic';
+import { Comic } from '@app/comic-books/models/comic';
 
 export interface Page {
   id: number;
diff --git a/comixed-webui/src/app/comic-book/models/scraping-issue.ts b/comixed-webui/src/app/comic-books/models/scraping-issue.ts
similarity index 100%
rename from comixed-webui/src/app/comic-book/models/scraping-issue.ts
rename to comixed-webui/src/app/comic-books/models/scraping-issue.ts
diff --git a/comixed-webui/src/app/comic-book/models/scraping-volume.ts b/comixed-webui/src/app/comic-books/models/scraping-volume.ts
similarity index 100%
rename from comixed-webui/src/app/comic-book/models/scraping-volume.ts
rename to comixed-webui/src/app/comic-books/models/scraping-volume.ts
diff --git a/comixed-webui/src/app/comic-book/models/ui/comic-context-menu-event.ts b/comixed-webui/src/app/comic-books/models/ui/comic-context-menu-event.ts
similarity index 93%
rename from comixed-webui/src/app/comic-book/models/ui/comic-context-menu-event.ts
rename to comixed-webui/src/app/comic-books/models/ui/comic-context-menu-event.ts
index c8fd742737..422ec342a4 100644
--- a/comixed-webui/src/app/comic-book/models/ui/comic-context-menu-event.ts
+++ b/comixed-webui/src/app/comic-books/models/ui/comic-context-menu-event.ts
@@ -16,7 +16,7 @@
  * along with this program. If not, see <http://www.gnu.org/licenses>
  */
 
-import { Comic } from '@app/comic-book/models/comic';
+import { Comic } from '@app/comic-books/models/comic';
 
 export interface ComicContextMenuEvent {
   comic: Comic;
diff --git a/comixed-webui/src/app/comic-book/models/ui/scrape-event.ts b/comixed-webui/src/app/comic-books/models/ui/scrape-event.ts
similarity index 100%
rename from comixed-webui/src/app/comic-book/models/ui/scrape-event.ts
rename to comixed-webui/src/app/comic-books/models/ui/scrape-event.ts
diff --git a/comixed-webui/src/app/comic-books/pages/comic-book-page/comic-book-page.component.html b/comixed-webui/src/app/comic-books/pages/comic-book-page/comic-book-page.component.html
new file mode 100644
index 0000000000..d46ca90086
--- /dev/null
+++ b/comixed-webui/src/app/comic-books/pages/comic-book-page/comic-book-page.component.html
@@ -0,0 +1,187 @@
+<mat-toolbar *ngIf="!!comic" class="cx-primary-light-background">
+  <button
+    id="previous-comic-button"
+    class="cx-toolbar-button"
+    mat-icon-button
+    color="primary"
+    [matTooltip]="'comic-book.tooltip.go-to-previous-comic' | translate"
+    [disabled]="!comic.previousIssueId"
+    [routerLink]="['/comics', comic.previousIssueId]"
+  >
+    <mat-icon>arrow_back</mat-icon>
+  </button>
+  <button
+    id="next-comic-button"
+    class="cx-toolbar-button"
+    mat-icon-button
+    [disabled]="!comic.nextIssueId"
+    color="primary"
+    [matTooltip]="'comic-book.tooltip.go-to-next-comic' | translate"
+    [routerLink]="['/comics', comic.nextIssueId]"
+  >
+    <mat-icon>arrow_forward</mat-icon>
+  </button>
+  <div class="cx-spacer"></div>
+  <button
+    id="update-comic-info-button"
+    class="cx-toolbar-button"
+    mat-icon-button
+    color="warn"
+    [matTooltip]="'comic-book.tooltip.update-comic-info' | translate"
+    [disabled]="!isAdmin"
+    (click)="onUpdateMetadata()"
+  >
+    <mat-icon>sync</mat-icon>
+  </button>
+  <button
+    id="download-comic-button"
+    class="cx-toolbar-button"
+    mat-icon-button
+    color="primary"
+    [matTooltip]="'comic-book.tooltip.download-comic' | translate"
+  >
+    <mat-icon>arrow_downward</mat-icon>
+  </button>
+  <mat-divider class="cx-height-100" vertical="true"></mat-divider>
+  <button
+    *ngIf="!isRead"
+    id="mark-as-read-button"
+    class="cx-toolbar-button"
+    mat-icon-button
+    color="primary"
+    [matTooltip]="'comic-book.tooltip.mark-read' | translate"
+    (click)="setReadState(true)"
+  >
+    <mat-icon>turned_in_not</mat-icon>
+  </button>
+  <button
+    *ngIf="isRead"
+    id="mark-as-unread-button"
+    class="cx-toolbar-button"
+    mat-icon-button
+    color="primary"
+    [matTooltip]="'comic-book.tooltip.mark-unread' | translate"
+    (click)="setReadState(false)"
+  >
+    <mat-icon>turned_in</mat-icon>
+  </button>
+  <button
+    *ngIf="isAdmin && !comic.deletedDate"
+    id="delete-button"
+    class="cx-toolbar-button"
+    mat-icon-button
+    color="warn"
+    [matTooltip]="'comic-book.tooltip.delete-comic' | translate"
+    (click)="onSetComicDeletedState(true)"
+  >
+    <mat-icon>delete</mat-icon>
+  </button>
+  <button
+    *ngIf="isAdmin && !!comic.deletedDate"
+    id="undelete-button"
+    class="cx-toolbar-button"
+    mat-icon-button
+    color="warn"
+    [matTooltip]="'comic-book.tooltip.undelete-comic' | translate"
+    (click)="onSetComicDeletedState(false)"
+  >
+    <mat-icon>restore_from_trash</mat-icon>
+  </button>
+</mat-toolbar>
+
+<h2 *ngIf="!!comic">{{ comic | comicTitle }}</h2>
+
+<div *ngIf="!!comic" class="cx-detail-card-container">
+  <div
+    id="comic-cover-container"
+    class="cx-padding-left-5"
+    fxFlex.gt-sm="20%"
+    fxFlex.sm="0%"
+  >
+    <div class="cx-width-100 cx-align-content-center">
+      <button
+        mat-icon-button
+        color="primary"
+        (click)="pageIndex = pageIndex - 1"
+        [disabled]="pageIndex === 0"
+        [matTooltip]="'comic-book.tooltip.show-previous-comic-page' | translate"
+      >
+        <mat-icon>navigate_before</mat-icon>
+      </button>
+      {{
+        "comic-book.label.page-title"
+          | translate: { which: pageIndex + 1, count: comic.pages.length }
+      }}
+      <button
+        mat-icon-button
+        color="primary"
+        (click)="pageIndex = pageIndex + 1"
+        [disabled]="pageIndex === comic.pages.length - 1"
+        [matTooltip]="'comic-book.tooltip.show-next-comic-page' | translate"
+      >
+        <mat-icon>navigate_next</mat-icon>
+      </button>
+    </div>
+    <cx-comic-page
+      [imageUrl]="comic.pages[pageIndex] | comicPageUrl"
+    ></cx-comic-page>
+  </div>
+  <div class="cx-padding-left-5" fxFlex.gt-sm="80%" fxFlex.sm="100%">
+    <mat-tab-group
+      [selectedIndex]="currentTab"
+      (selectedTabChange)="onTabChange($event.index)"
+    >
+      <mat-tab [label]="'comic-book.label.comic-overview' | translate">
+        <cx-comic-overview
+          [comic]="comic"
+          [lastRead]="lastRead"
+          [isAdmin]="isAdmin"
+        ></cx-comic-overview>
+      </mat-tab>
+      <mat-tab [label]="'comic-book.label.comic-story' | translate">
+        <cx-comic-story [comic]="comic"></cx-comic-story>
+      </mat-tab>
+      <mat-tab [label]="'comic-book.label.comic-pages' | translate">
+        <cx-comic-pages
+          class="cx-width-100"
+          *ngIf="showPages"
+          [comic]="comic"
+          [pageSize]="pageSize"
+        ></cx-comic-pages>
+      </mat-tab>
+      <mat-tab
+        *ngIf="isAdmin"
+        [label]="'comic-book.label.comic-edit' | translate"
+      >
+        <cx-comic-edit
+          *ngIf="!!comic && volumes.length === 0"
+          [comic]="comic"
+          [apiKey]="apiKey"
+          [skipCache]="skipCache"
+          [maximumRecords]="maximumRecords"
+          (scrape)="
+            onLoadScrapingVolumes(
+              $event.apiKey,
+              $event.series,
+              $event.volume,
+              $event.issueNumber,
+              $event.maximumRecords,
+              $event.skipCache
+            )
+          "
+        ></cx-comic-edit>
+        <cx-comic-scraping
+          *ngIf="volumes.length > 0"
+          [comic]="comic"
+          [comicSeriesName]="scrapingSeriesName"
+          [comicVolume]="scrapingVolume"
+          [comicIssueNumber]="scrapingIssueNumber"
+          [apiKey]="apiKey"
+          [skipCache]="skipCache"
+          [pageSize]="pageSize"
+          [volumes]="volumes"
+        ></cx-comic-scraping>
+      </mat-tab>
+    </mat-tab-group>
+  </div>
+</div>
diff --git a/comixed-webui/src/app/comic-books/pages/comic-book-page/comic-book-page.component.scss b/comixed-webui/src/app/comic-books/pages/comic-book-page/comic-book-page.component.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/comixed-webui/src/app/comic-book/pages/comic-book-page/comic-book-page.component.spec.ts b/comixed-webui/src/app/comic-books/pages/comic-book-page/comic-book-page.component.spec.ts
similarity index 87%
rename from comixed-webui/src/app/comic-book/pages/comic-book-page/comic-book-page.component.spec.ts
rename to comixed-webui/src/app/comic-books/pages/comic-book-page/comic-book-page.component.spec.ts
index 3b04501c08..ba6d2d7d0d 100644
--- a/comixed-webui/src/app/comic-book/pages/comic-book-page/comic-book-page.component.spec.ts
+++ b/comixed-webui/src/app/comic-books/pages/comic-book-page/comic-book-page.component.spec.ts
@@ -35,11 +35,11 @@ import {
   ActivatedRouteSnapshot,
   Router
 } from '@angular/router';
-import { COMIC_1, COMIC_2 } from '@app/comic-book/comic-book.fixtures';
-import { ComicOverviewComponent } from '@app/comic-book/components/comic-overview/comic-overview.component';
-import { ComicStoryComponent } from '@app/comic-book/components/comic-story/comic-story.component';
-import { ComicPagesComponent } from '@app/comic-book/components/comic-pages/comic-pages.component';
-import { ComicEditComponent } from '@app/comic-book/components/comic-edit/comic-edit.component';
+import { COMIC_1, COMIC_2 } from '@app/comic-books/comic-book.fixtures';
+import { ComicOverviewComponent } from '@app/comic-books/components/comic-overview/comic-overview.component';
+import { ComicStoryComponent } from '@app/comic-books/components/comic-story/comic-story.component';
+import { ComicPagesComponent } from '@app/comic-books/components/comic-pages/comic-pages.component';
+import { ComicEditComponent } from '@app/comic-books/components/comic-edit/comic-edit.component';
 import { BehaviorSubject } from 'rxjs';
 import { QUERY_PARAM_TAB } from '@app/library/library.constants';
 import { MatCardModule } from '@angular/material/card';
@@ -52,14 +52,14 @@ import { MatDialogModule, MatDialogRef } from '@angular/material/dialog';
 import {
   initialState as initialScrapingState,
   SCRAPING_FEATURE_KEY
-} from '@app/comic-book/reducers/scraping.reducer';
+} from '@app/comic-books/reducers/scraping.reducer';
 import { USER_READER } from '@app/user/user.fixtures';
-import { loadScrapingVolumes } from '@app/comic-book/actions/scraping.actions';
-import { ComicTitlePipe } from '@app/comic-book/pipes/comic-title.pipe';
+import { loadScrapingVolumes } from '@app/comic-books/actions/scraping.actions';
+import { ComicTitlePipe } from '@app/comic-books/pipes/comic-title.pipe';
 import {
   COMIC_FEATURE_KEY,
   initialState as initialComicState
-} from '@app/comic-book/reducers/comic.reducer';
+} from '@app/comic-books/reducers/comic.reducer';
 import {
   initialState as initialLastReadState,
   LAST_READ_LIST_FEATURE_KEY
@@ -70,16 +70,22 @@ import { updateComicReadStatus } from '@app/last-read/actions/update-read-status
 import { Confirmation } from '@app/core/models/confirmation';
 import { updateMetadata } from '@app/library/actions/update-metadata.actions.ts';
 import { LAST_READ_1 } from '@app/last-read/last-read.fixtures';
-import { markComicsDeleted } from '@app/comic-book/actions/mark-comics-deleted.actions';
+import { markComicsDeleted } from '@app/comic-books/actions/mark-comics-deleted.actions';
 import {
   initialState as initialMessagingState,
   MESSAGING_FEATURE_KEY
 } from '@app/messaging/reducers/messaging.reducer';
 import { WebSocketService } from '@app/messaging';
 import { Subscription } from 'webstomp-client';
-import { COMIC_BOOK_UPDATE_TOPIC } from '@app/comic-book/comic-book.constants';
+import { COMIC_BOOK_UPDATE_TOPIC } from '@app/comic-books/comic-book.constants';
 import { interpolate } from '@app/core';
-import { comicLoaded } from '@app/comic-book/actions/comic.actions';
+import { comicLoaded } from '@app/comic-books/actions/comic.actions';
+import { ComicPageUrlPipe } from '@app/comic-books/pipes/comic-page-url.pipe';
+import { MatIconModule } from '@angular/material/icon';
+import { MatExpansionModule } from '@angular/material/expansion';
+import { MatGridListModule } from '@angular/material/grid-list';
+import { MatTabsModule } from '@angular/material/tabs';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 
 describe('ComicBookPageComponent', () => {
   const COMIC = COMIC_1;
@@ -119,15 +125,22 @@ describe('ComicBookPageComponent', () => {
         ComicOverviewComponent,
         ComicStoryComponent,
         ComicPagesComponent,
-        ComicEditComponent
+        ComicEditComponent,
+        ComicTitlePipe,
+        ComicPageUrlPipe
       ],
       imports: [
+        NoopAnimationsModule,
         LoggerModule.forRoot(),
         TranslateModule.forRoot(),
         RouterTestingModule,
         MatCardModule,
         MatToolbarModule,
-        MatDialogModule
+        MatDialogModule,
+        MatIconModule,
+        MatExpansionModule,
+        MatGridListModule,
+        MatTabsModule
       ],
       providers: [
         provideMockStore({ initialState }),
diff --git a/comixed-webui/src/app/comic-book/pages/comic-book-page/comic-book-page.component.ts b/comixed-webui/src/app/comic-books/pages/comic-book-page/comic-book-page.component.ts
similarity index 94%
rename from comixed-webui/src/app/comic-book/pages/comic-book-page/comic-book-page.component.ts
rename to comixed-webui/src/app/comic-books/pages/comic-book-page/comic-book-page.component.ts
index 9c986e8a38..4291c6e804 100644
--- a/comixed-webui/src/app/comic-book/pages/comic-book-page/comic-book-page.component.ts
+++ b/comixed-webui/src/app/comic-books/pages/comic-book-page/comic-book-page.component.ts
@@ -18,7 +18,7 @@
 
 import { AfterViewInit, Component, OnDestroy, OnInit } from '@angular/core';
 import { Subscription } from 'rxjs';
-import { Comic } from '@app/comic-book/models/comic';
+import { Comic } from '@app/comic-books/models/comic';
 import { LoggerService } from '@angular-ru/logger';
 import { Store } from '@ngrx/store';
 import { ActivatedRoute, Router } from '@angular/router';
@@ -37,28 +37,28 @@ import { selectDisplayState } from '@app/library/selectors/display.selectors';
 import {
   loadScrapingVolumes,
   resetScraping
-} from '@app/comic-book/actions/scraping.actions';
+} from '@app/comic-books/actions/scraping.actions';
 import {
   selectScrapingState,
   selectScrapingVolumes
-} from '@app/comic-book/selectors/scraping.selectors';
-import { ScrapingVolume } from '@app/comic-book/models/scraping-volume';
+} from '@app/comic-books/selectors/scraping.selectors';
+import { ScrapingVolume } from '@app/comic-books/models/scraping-volume';
 import { TranslateService } from '@ngx-translate/core';
-import { ComicTitlePipe } from '@app/comic-book/pipes/comic-title.pipe';
-import { comicLoaded, loadComic } from '@app/comic-book/actions/comic.actions';
+import { ComicTitlePipe } from '@app/comic-books/pipes/comic-title.pipe';
+import { comicLoaded, loadComic } from '@app/comic-books/actions/comic.actions';
 import {
   selectComic,
   selectComicBusy
-} from '@app/comic-book/selectors/comic.selectors';
+} from '@app/comic-books/selectors/comic.selectors';
 import { selectLastReadEntries } from '@app/last-read/selectors/last-read-list.selectors';
 import { updateComicReadStatus } from '@app/last-read/actions/update-read-status.actions';
 import { LastRead } from '@app/last-read/models/last-read';
 import { TitleService } from '@app/core/services/title.service';
 import { ConfirmationService } from '@app/core/services/confirmation.service';
 import { updateMetadata } from '@app/library/actions/update-metadata.actions.ts';
-import { markComicsDeleted } from '@app/comic-book/actions/mark-comics-deleted.actions';
+import { markComicsDeleted } from '@app/comic-books/actions/mark-comics-deleted.actions';
 import { MessagingSubscription, WebSocketService } from '@app/messaging';
-import { COMIC_BOOK_UPDATE_TOPIC } from '@app/comic-book/comic-book.constants';
+import { COMIC_BOOK_UPDATE_TOPIC } from '@app/comic-books/comic-book.constants';
 import { selectMessagingState } from '@app/messaging/selectors/messaging.selectors';
 
 @Component({
diff --git a/comixed-webui/src/app/comic-book/pipes/comic-cover-url.pipe.spec.ts b/comixed-webui/src/app/comic-books/pipes/comic-cover-url.pipe.spec.ts
similarity index 94%
rename from comixed-webui/src/app/comic-book/pipes/comic-cover-url.pipe.spec.ts
rename to comixed-webui/src/app/comic-books/pipes/comic-cover-url.pipe.spec.ts
index 49bcbd92dc..3a7b6c8683 100644
--- a/comixed-webui/src/app/comic-book/pipes/comic-cover-url.pipe.spec.ts
+++ b/comixed-webui/src/app/comic-books/pipes/comic-cover-url.pipe.spec.ts
@@ -18,7 +18,7 @@
 
 import { ComicCoverUrlPipe } from './comic-cover-url.pipe';
 import { API_ROOT_URL } from '@app/core';
-import { COMIC_1, COMIC_4 } from '@app/comic-book/comic-book.fixtures';
+import { COMIC_1, COMIC_4 } from '@app/comic-books/comic-book.fixtures';
 import { MISSING_COMIC_IMAGE_URL } from '@app/library/library.constants';
 
 describe('ComicCoverUrlPipe', () => {
diff --git a/comixed-webui/src/app/comic-book/pipes/comic-cover-url.pipe.ts b/comixed-webui/src/app/comic-books/pipes/comic-cover-url.pipe.ts
similarity index 95%
rename from comixed-webui/src/app/comic-book/pipes/comic-cover-url.pipe.ts
rename to comixed-webui/src/app/comic-books/pipes/comic-cover-url.pipe.ts
index 7cc7e7b3a5..edc51bb655 100644
--- a/comixed-webui/src/app/comic-book/pipes/comic-cover-url.pipe.ts
+++ b/comixed-webui/src/app/comic-books/pipes/comic-cover-url.pipe.ts
@@ -22,7 +22,7 @@ import {
   MISSING_COMIC_IMAGE_URL
 } from '@app/library/library.constants';
 import { interpolate } from '@app/core';
-import { Comic } from '@app/comic-book/models/comic';
+import { Comic } from '@app/comic-books/models/comic';
 
 @Pipe({
   name: 'comicCoverUrl'
diff --git a/comixed-webui/src/app/comic-book/pipes/comic-page-url.pipe.spec.ts b/comixed-webui/src/app/comic-books/pipes/comic-page-url.pipe.spec.ts
similarity index 100%
rename from comixed-webui/src/app/comic-book/pipes/comic-page-url.pipe.spec.ts
rename to comixed-webui/src/app/comic-books/pipes/comic-page-url.pipe.spec.ts
diff --git a/comixed-webui/src/app/comic-book/pipes/comic-page-url.pipe.ts b/comixed-webui/src/app/comic-books/pipes/comic-page-url.pipe.ts
similarity index 95%
rename from comixed-webui/src/app/comic-book/pipes/comic-page-url.pipe.ts
rename to comixed-webui/src/app/comic-books/pipes/comic-page-url.pipe.ts
index 07aa83cddb..bde74702dc 100644
--- a/comixed-webui/src/app/comic-book/pipes/comic-page-url.pipe.ts
+++ b/comixed-webui/src/app/comic-books/pipes/comic-page-url.pipe.ts
@@ -19,7 +19,7 @@
 import { Pipe, PipeTransform } from '@angular/core';
 import { interpolate } from '@app/core';
 import { GET_PAGE_CONTENT_URL } from '@app/library/library.constants';
-import { Page } from '@app/comic-book/models/page';
+import { Page } from '@app/comic-books/models/page';
 
 @Pipe({
   name: 'comicPageUrl'
diff --git a/comixed-webui/src/app/comic-book/pipes/comic-title.pipe.spec.ts b/comixed-webui/src/app/comic-books/pipes/comic-title.pipe.spec.ts
similarity index 96%
rename from comixed-webui/src/app/comic-book/pipes/comic-title.pipe.spec.ts
rename to comixed-webui/src/app/comic-books/pipes/comic-title.pipe.spec.ts
index 1e30758c99..6bfb851c29 100644
--- a/comixed-webui/src/app/comic-book/pipes/comic-title.pipe.spec.ts
+++ b/comixed-webui/src/app/comic-books/pipes/comic-title.pipe.spec.ts
@@ -17,7 +17,7 @@
  */
 
 import { ComicTitlePipe } from './comic-title.pipe';
-import { COMIC_3 } from '@app/comic-book/comic-book.fixtures';
+import { COMIC_3 } from '@app/comic-books/comic-book.fixtures';
 import { UNKNOWN_VALUE_PLACEHOLDER } from '@app/library/library.constants';
 
 describe('ComicTitlePipe', () => {
diff --git a/comixed-webui/src/app/comic-book/pipes/comic-title.pipe.ts b/comixed-webui/src/app/comic-books/pipes/comic-title.pipe.ts
similarity index 95%
rename from comixed-webui/src/app/comic-book/pipes/comic-title.pipe.ts
rename to comixed-webui/src/app/comic-books/pipes/comic-title.pipe.ts
index 284e822b75..1354758fb0 100644
--- a/comixed-webui/src/app/comic-book/pipes/comic-title.pipe.ts
+++ b/comixed-webui/src/app/comic-books/pipes/comic-title.pipe.ts
@@ -17,7 +17,7 @@
  */
 
 import { Pipe, PipeTransform } from '@angular/core';
-import { Comic } from '@app/comic-book/models/comic';
+import { Comic } from '@app/comic-books/models/comic';
 import { UNKNOWN_VALUE_PLACEHOLDER } from '@app/library/library.constants';
 
 @Pipe({
diff --git a/comixed-webui/src/app/comic-book/pipes/comicvine-issue-link.pipe.spec.ts b/comixed-webui/src/app/comic-books/pipes/comicvine-issue-link.pipe.spec.ts
similarity index 90%
rename from comixed-webui/src/app/comic-book/pipes/comicvine-issue-link.pipe.spec.ts
rename to comixed-webui/src/app/comic-books/pipes/comicvine-issue-link.pipe.spec.ts
index 5ce1af3966..17bf61b8da 100644
--- a/comixed-webui/src/app/comic-book/pipes/comicvine-issue-link.pipe.spec.ts
+++ b/comixed-webui/src/app/comic-books/pipes/comicvine-issue-link.pipe.spec.ts
@@ -17,8 +17,8 @@
  */
 
 import { ComicvineIssueLinkPipe } from './comicvine-issue-link.pipe';
-import { COMICVINE_ISSUE_LINK } from '@app/comic-book/comic-book.constants';
-import { COMIC_5 } from '@app/comic-book/comic-book.fixtures';
+import { COMICVINE_ISSUE_LINK } from '@app/comic-books/comic-book.constants';
+import { COMIC_5 } from '@app/comic-books/comic-book.fixtures';
 import { interpolate } from '@app/core';
 
 describe('ComicvineIssueLinkPipe', () => {
diff --git a/comixed-webui/src/app/comic-book/pipes/comicvine-issue-link.pipe.ts b/comixed-webui/src/app/comic-books/pipes/comicvine-issue-link.pipe.ts
similarity index 88%
rename from comixed-webui/src/app/comic-book/pipes/comicvine-issue-link.pipe.ts
rename to comixed-webui/src/app/comic-books/pipes/comicvine-issue-link.pipe.ts
index a7015a40c0..b87c7a64f6 100644
--- a/comixed-webui/src/app/comic-book/pipes/comicvine-issue-link.pipe.ts
+++ b/comixed-webui/src/app/comic-books/pipes/comicvine-issue-link.pipe.ts
@@ -17,9 +17,9 @@
  */
 
 import { Pipe, PipeTransform } from '@angular/core';
-import { Comic } from '@app/comic-book/models/comic';
+import { Comic } from '@app/comic-books/models/comic';
 import { interpolate } from '@app/core';
-import { COMICVINE_ISSUE_LINK } from '@app/comic-book/comic-book.constants';
+import { COMICVINE_ISSUE_LINK } from '@app/comic-books/comic-book.constants';
 
 @Pipe({
   name: 'comicvineIssueLink'
diff --git a/comixed-webui/src/app/comic-book/pipes/page-hash-url.pipe.spec.ts b/comixed-webui/src/app/comic-books/pipes/page-hash-url.pipe.spec.ts
similarity index 94%
rename from comixed-webui/src/app/comic-book/pipes/page-hash-url.pipe.spec.ts
rename to comixed-webui/src/app/comic-books/pipes/page-hash-url.pipe.spec.ts
index 5f9e390962..a991bd02a7 100644
--- a/comixed-webui/src/app/comic-book/pipes/page-hash-url.pipe.spec.ts
+++ b/comixed-webui/src/app/comic-books/pipes/page-hash-url.pipe.spec.ts
@@ -17,7 +17,7 @@
  */
 
 import { PageHashUrlPipe } from './page-hash-url.pipe';
-import { PAGE_URL_FROM_HASH } from '@app/comic-book/comic-book.constants';
+import { PAGE_URL_FROM_HASH } from '@app/comic-books/comic-book.constants';
 import { interpolate } from '@app/core';
 import { PAGE_2 } from '@app/comic-pages/comic-pages.fixtures';
 
diff --git a/comixed-webui/src/app/comic-book/pipes/page-hash-url.pipe.ts b/comixed-webui/src/app/comic-books/pipes/page-hash-url.pipe.ts
similarity index 93%
rename from comixed-webui/src/app/comic-book/pipes/page-hash-url.pipe.ts
rename to comixed-webui/src/app/comic-books/pipes/page-hash-url.pipe.ts
index f6fec4f89b..e2696b02f7 100644
--- a/comixed-webui/src/app/comic-book/pipes/page-hash-url.pipe.ts
+++ b/comixed-webui/src/app/comic-books/pipes/page-hash-url.pipe.ts
@@ -18,7 +18,7 @@
 
 import { Pipe, PipeTransform } from '@angular/core';
 import { interpolate } from '@app/core';
-import { PAGE_URL_FROM_HASH } from '@app/comic-book/comic-book.constants';
+import { PAGE_URL_FROM_HASH } from '@app/comic-books/comic-book.constants';
 
 @Pipe({
   name: 'pageHashUrl'
diff --git a/comixed-webui/src/app/comic-book/pipes/scraping-issue-title.pipe.spec.ts b/comixed-webui/src/app/comic-books/pipes/scraping-issue-title.pipe.spec.ts
similarity index 100%
rename from comixed-webui/src/app/comic-book/pipes/scraping-issue-title.pipe.spec.ts
rename to comixed-webui/src/app/comic-books/pipes/scraping-issue-title.pipe.spec.ts
diff --git a/comixed-webui/src/app/comic-book/pipes/scraping-issue-title.pipe.ts b/comixed-webui/src/app/comic-books/pipes/scraping-issue-title.pipe.ts
similarity index 93%
rename from comixed-webui/src/app/comic-book/pipes/scraping-issue-title.pipe.ts
rename to comixed-webui/src/app/comic-books/pipes/scraping-issue-title.pipe.ts
index 231a515047..ef28d0fce2 100644
--- a/comixed-webui/src/app/comic-book/pipes/scraping-issue-title.pipe.ts
+++ b/comixed-webui/src/app/comic-books/pipes/scraping-issue-title.pipe.ts
@@ -17,7 +17,7 @@
  */
 
 import { Pipe, PipeTransform } from '@angular/core';
-import { ScrapingIssue } from '@app/comic-book/models/scraping-issue';
+import { ScrapingIssue } from '@app/comic-books/models/scraping-issue';
 
 @Pipe({
   name: 'scrapingIssueTitle'
diff --git a/comixed-webui/src/app/comic-book/reducers/comic-list.reducer.spec.ts b/comixed-webui/src/app/comic-books/reducers/comic-list.reducer.spec.ts
similarity index 98%
rename from comixed-webui/src/app/comic-book/reducers/comic-list.reducer.spec.ts
rename to comixed-webui/src/app/comic-books/reducers/comic-list.reducer.spec.ts
index 695428a159..1bfb83f8e3 100644
--- a/comixed-webui/src/app/comic-book/reducers/comic-list.reducer.spec.ts
+++ b/comixed-webui/src/app/comic-books/reducers/comic-list.reducer.spec.ts
@@ -23,14 +23,14 @@ import {
   loadComics,
   loadComicsFailed,
   resetComicList
-} from '@app/comic-book/actions/comic-list.actions';
+} from '@app/comic-books/actions/comic-list.actions';
 import {
   COMIC_1,
   COMIC_2,
   COMIC_3,
   COMIC_4,
   COMIC_5
-} from '@app/comic-book/comic-book.fixtures';
+} from '@app/comic-books/comic-book.fixtures';
 
 describe('Comic List Reducer', () => {
   const LAST_ID = Math.floor(Math.abs(Math.random() * 1000));
diff --git a/comixed-webui/src/app/comic-book/reducers/comic-list.reducer.ts b/comixed-webui/src/app/comic-books/reducers/comic-list.reducer.ts
similarity index 97%
rename from comixed-webui/src/app/comic-book/reducers/comic-list.reducer.ts
rename to comixed-webui/src/app/comic-books/reducers/comic-list.reducer.ts
index ea58e71485..b2297114c9 100644
--- a/comixed-webui/src/app/comic-book/reducers/comic-list.reducer.ts
+++ b/comixed-webui/src/app/comic-books/reducers/comic-list.reducer.ts
@@ -24,7 +24,7 @@ import {
   loadComicsFailed,
   resetComicList
 } from '../actions/comic-list.actions';
-import { Comic } from '@app/comic-book/models/comic';
+import { Comic } from '@app/comic-books/models/comic';
 
 export const COMIC_LIST_FEATURE_KEY = 'comic_list_state';
 
diff --git a/comixed-webui/src/app/comic-book/reducers/comic.reducer.spec.ts b/comixed-webui/src/app/comic-books/reducers/comic.reducer.spec.ts
similarity index 97%
rename from comixed-webui/src/app/comic-book/reducers/comic.reducer.spec.ts
rename to comixed-webui/src/app/comic-books/reducers/comic.reducer.spec.ts
index 55c7ca6483..74b864e2c0 100644
--- a/comixed-webui/src/app/comic-book/reducers/comic.reducer.spec.ts
+++ b/comixed-webui/src/app/comic-books/reducers/comic.reducer.spec.ts
@@ -17,7 +17,7 @@
  */
 
 import { ComicState, initialState, reducer } from './comic.reducer';
-import { COMIC_2, COMIC_4 } from '@app/comic-book/comic-book.fixtures';
+import { COMIC_2, COMIC_4 } from '@app/comic-books/comic-book.fixtures';
 import {
   comicLoaded,
   comicUpdated,
@@ -25,7 +25,7 @@ import {
   loadComicFailed,
   updateComic,
   updateComicFailed
-} from '@app/comic-book/actions/comic.actions';
+} from '@app/comic-books/actions/comic.actions';
 
 describe('Comic Reducer', () => {
   const COMIC = COMIC_2;
diff --git a/comixed-webui/src/app/comic-book/reducers/comic.reducer.ts b/comixed-webui/src/app/comic-books/reducers/comic.reducer.ts
similarity index 97%
rename from comixed-webui/src/app/comic-book/reducers/comic.reducer.ts
rename to comixed-webui/src/app/comic-books/reducers/comic.reducer.ts
index 140c0c5be5..355815a2b8 100644
--- a/comixed-webui/src/app/comic-book/reducers/comic.reducer.ts
+++ b/comixed-webui/src/app/comic-books/reducers/comic.reducer.ts
@@ -25,7 +25,7 @@ import {
   updateComic,
   updateComicFailed
 } from '../actions/comic.actions';
-import { Comic } from '@app/comic-book/models/comic';
+import { Comic } from '@app/comic-books/models/comic';
 
 export const COMIC_FEATURE_KEY = 'comic_state';
 
diff --git a/comixed-webui/src/app/comic-book/reducers/imprint-list.reducer.spec.ts b/comixed-webui/src/app/comic-books/reducers/imprint-list.reducer.spec.ts
similarity index 95%
rename from comixed-webui/src/app/comic-book/reducers/imprint-list.reducer.spec.ts
rename to comixed-webui/src/app/comic-books/reducers/imprint-list.reducer.spec.ts
index e9bd469889..0da46a9dfa 100644
--- a/comixed-webui/src/app/comic-book/reducers/imprint-list.reducer.spec.ts
+++ b/comixed-webui/src/app/comic-books/reducers/imprint-list.reducer.spec.ts
@@ -25,12 +25,12 @@ import {
   IMPRINT_1,
   IMPRINT_2,
   IMPRINT_3
-} from '@app/comic-book/comic-book.fixtures';
+} from '@app/comic-books/comic-book.fixtures';
 import {
   imprintsLoaded,
   loadImprints,
   loadImprintsFailed
-} from '@app/comic-book/actions/imprint-list.actions';
+} from '@app/comic-books/actions/imprint-list.actions';
 
 describe('ImprintList Reducer', () => {
   const ENTRIES = [IMPRINT_1, IMPRINT_2, IMPRINT_3];
diff --git a/comixed-webui/src/app/comic-book/reducers/imprint-list.reducer.ts b/comixed-webui/src/app/comic-books/reducers/imprint-list.reducer.ts
similarity index 96%
rename from comixed-webui/src/app/comic-book/reducers/imprint-list.reducer.ts
rename to comixed-webui/src/app/comic-books/reducers/imprint-list.reducer.ts
index 8278cb3210..65c4e6320f 100644
--- a/comixed-webui/src/app/comic-book/reducers/imprint-list.reducer.ts
+++ b/comixed-webui/src/app/comic-books/reducers/imprint-list.reducer.ts
@@ -22,7 +22,7 @@ import {
   loadImprints,
   loadImprintsFailed
 } from '../actions/imprint-list.actions';
-import { Imprint } from '@app/comic-book/models/imprint';
+import { Imprint } from '@app/comic-books/models/imprint';
 
 export const IMPRINT_LIST_FEATURE_KEY = 'imprint_list_state';
 
diff --git a/comixed-webui/src/app/comic-book/reducers/mark-comics-deleted.reducer.spec.ts b/comixed-webui/src/app/comic-books/reducers/mark-comics-deleted.reducer.spec.ts
similarity index 94%
rename from comixed-webui/src/app/comic-book/reducers/mark-comics-deleted.reducer.spec.ts
rename to comixed-webui/src/app/comic-books/reducers/mark-comics-deleted.reducer.spec.ts
index d18e792aa2..bfe3606b8f 100644
--- a/comixed-webui/src/app/comic-book/reducers/mark-comics-deleted.reducer.spec.ts
+++ b/comixed-webui/src/app/comic-books/reducers/mark-comics-deleted.reducer.spec.ts
@@ -25,8 +25,8 @@ import {
   comicsMarkedDeleted,
   markComicsDeleted,
   markComicsDeletedFailed
-} from '@app/comic-book/actions/mark-comics-deleted.actions';
-import { COMIC_1 } from '@app/comic-book/comic-book.fixtures';
+} from '@app/comic-books/actions/mark-comics-deleted.actions';
+import { COMIC_1 } from '@app/comic-books/comic-book.fixtures';
 
 describe('MarkComicsDeleted Reducer', () => {
   const COMIC = COMIC_1;
diff --git a/comixed-webui/src/app/comic-book/reducers/mark-comics-deleted.reducer.ts b/comixed-webui/src/app/comic-books/reducers/mark-comics-deleted.reducer.ts
similarity index 100%
rename from comixed-webui/src/app/comic-book/reducers/mark-comics-deleted.reducer.ts
rename to comixed-webui/src/app/comic-books/reducers/mark-comics-deleted.reducer.ts
diff --git a/comixed-webui/src/app/comic-book/reducers/scraping.reducer.spec.ts b/comixed-webui/src/app/comic-books/reducers/scraping.reducer.spec.ts
similarity index 98%
rename from comixed-webui/src/app/comic-book/reducers/scraping.reducer.spec.ts
rename to comixed-webui/src/app/comic-books/reducers/scraping.reducer.spec.ts
index b9c455a229..7b1a1be4a3 100644
--- a/comixed-webui/src/app/comic-book/reducers/scraping.reducer.spec.ts
+++ b/comixed-webui/src/app/comic-books/reducers/scraping.reducer.spec.ts
@@ -28,14 +28,14 @@ import {
   scrapeComicFailed,
   scrapingIssueLoaded,
   scrapingVolumesLoaded
-} from '@app/comic-book/actions/scraping.actions';
+} from '@app/comic-books/actions/scraping.actions';
 import {
   COMIC_4,
   SCRAPING_ISSUE_1,
   SCRAPING_VOLUME_1,
   SCRAPING_VOLUME_2,
   SCRAPING_VOLUME_3
-} from '@app/comic-book/comic-book.fixtures';
+} from '@app/comic-books/comic-book.fixtures';
 
 describe('Scraping Reducer', () => {
   const API_KEY = '1234567890ABCDEF';
diff --git a/comixed-webui/src/app/comic-book/reducers/scraping.reducer.ts b/comixed-webui/src/app/comic-books/reducers/scraping.reducer.ts
similarity index 91%
rename from comixed-webui/src/app/comic-book/reducers/scraping.reducer.ts
rename to comixed-webui/src/app/comic-books/reducers/scraping.reducer.ts
index 743422a643..313a0cea0e 100644
--- a/comixed-webui/src/app/comic-book/reducers/scraping.reducer.ts
+++ b/comixed-webui/src/app/comic-books/reducers/scraping.reducer.ts
@@ -28,9 +28,9 @@ import {
   scrapeComicFailed,
   scrapingIssueLoaded,
   scrapingVolumesLoaded
-} from '@app/comic-book/actions/scraping.actions';
-import { ScrapingVolume } from '@app/comic-book/models/scraping-volume';
-import { ScrapingIssue } from '@app/comic-book/models/scraping-issue';
+} from '@app/comic-books/actions/scraping.actions';
+import { ScrapingVolume } from '@app/comic-books/models/scraping-volume';
+import { ScrapingIssue } from '@app/comic-books/models/scraping-issue';
 
 export const SCRAPING_FEATURE_KEY = 'scraping_state';
 
diff --git a/comixed-webui/src/app/comic-book/selectors/comic-list.selectors.spec.ts b/comixed-webui/src/app/comic-books/selectors/comic-list.selectors.spec.ts
similarity index 97%
rename from comixed-webui/src/app/comic-book/selectors/comic-list.selectors.spec.ts
rename to comixed-webui/src/app/comic-books/selectors/comic-list.selectors.spec.ts
index 0c081396f6..1dde98ae06 100644
--- a/comixed-webui/src/app/comic-book/selectors/comic-list.selectors.spec.ts
+++ b/comixed-webui/src/app/comic-books/selectors/comic-list.selectors.spec.ts
@@ -28,7 +28,11 @@ import {
   selectComicListReadCount,
   selectComicListState
 } from './comic-list.selectors';
-import { COMIC_1, COMIC_3, COMIC_5 } from '@app/comic-book/comic-book.fixtures';
+import {
+  COMIC_1,
+  COMIC_3,
+  COMIC_5
+} from '@app/comic-books/comic-book.fixtures';
 import { CollectionType } from '@app/collections/models/comic-collection.enum';
 
 describe('Comic List Selectors', () => {
diff --git a/comixed-webui/src/app/comic-book/selectors/comic-list.selectors.ts b/comixed-webui/src/app/comic-books/selectors/comic-list.selectors.ts
similarity index 98%
rename from comixed-webui/src/app/comic-book/selectors/comic-list.selectors.ts
rename to comixed-webui/src/app/comic-books/selectors/comic-list.selectors.ts
index e60685723c..f8539a54a9 100644
--- a/comixed-webui/src/app/comic-book/selectors/comic-list.selectors.ts
+++ b/comixed-webui/src/app/comic-books/selectors/comic-list.selectors.ts
@@ -22,7 +22,7 @@ import {
   ComicListState
 } from '../reducers/comic-list.reducer';
 import { CollectionType } from '@app/collections/models/comic-collection.enum';
-import { Comic } from '@app/comic-book/models/comic';
+import { Comic } from '@app/comic-books/models/comic';
 import { CollectionListProperties } from '@app/collections/models/collection-list-properties';
 import { CollectionListEntry } from '@app/collections/models/collection-list-entry';
 
diff --git a/comixed-webui/src/app/comic-book/selectors/comic.selectors.spec.ts b/comixed-webui/src/app/comic-books/selectors/comic.selectors.spec.ts
similarity index 96%
rename from comixed-webui/src/app/comic-book/selectors/comic.selectors.spec.ts
rename to comixed-webui/src/app/comic-books/selectors/comic.selectors.spec.ts
index 4e4b1acfda..68e3f75f53 100644
--- a/comixed-webui/src/app/comic-book/selectors/comic.selectors.spec.ts
+++ b/comixed-webui/src/app/comic-books/selectors/comic.selectors.spec.ts
@@ -22,7 +22,7 @@ import {
   selectComicBusy,
   selectComicState
 } from './comic.selectors';
-import { COMIC_3 } from '@app/comic-book/comic-book.fixtures';
+import { COMIC_3 } from '@app/comic-books/comic-book.fixtures';
 
 describe('Comic Selectors', () => {
   let state: ComicState;
diff --git a/comixed-webui/src/app/comic-book/selectors/comic.selectors.ts b/comixed-webui/src/app/comic-books/selectors/comic.selectors.ts
similarity index 100%
rename from comixed-webui/src/app/comic-book/selectors/comic.selectors.ts
rename to comixed-webui/src/app/comic-books/selectors/comic.selectors.ts
diff --git a/comixed-webui/src/app/comic-book/selectors/imprint-list.selectors.spec.ts b/comixed-webui/src/app/comic-books/selectors/imprint-list.selectors.spec.ts
similarity index 96%
rename from comixed-webui/src/app/comic-book/selectors/imprint-list.selectors.spec.ts
rename to comixed-webui/src/app/comic-books/selectors/imprint-list.selectors.spec.ts
index 36f2cd997d..38adf56581 100644
--- a/comixed-webui/src/app/comic-book/selectors/imprint-list.selectors.spec.ts
+++ b/comixed-webui/src/app/comic-books/selectors/imprint-list.selectors.spec.ts
@@ -25,7 +25,7 @@ import {
   IMPRINT_1,
   IMPRINT_2,
   IMPRINT_3
-} from '@app/comic-book/comic-book.fixtures';
+} from '@app/comic-books/comic-book.fixtures';
 
 describe('ImprintList Selectors', () => {
   const ENTRIES = [IMPRINT_1, IMPRINT_2, IMPRINT_3];
diff --git a/comixed-webui/src/app/comic-book/selectors/imprint-list.selectors.ts b/comixed-webui/src/app/comic-books/selectors/imprint-list.selectors.ts
similarity index 100%
rename from comixed-webui/src/app/comic-book/selectors/imprint-list.selectors.ts
rename to comixed-webui/src/app/comic-books/selectors/imprint-list.selectors.ts
diff --git a/comixed-webui/src/app/comic-book/selectors/mark-comics-deleted.selectors.spec.ts b/comixed-webui/src/app/comic-books/selectors/mark-comics-deleted.selectors.spec.ts
similarity index 95%
rename from comixed-webui/src/app/comic-book/selectors/mark-comics-deleted.selectors.spec.ts
rename to comixed-webui/src/app/comic-books/selectors/mark-comics-deleted.selectors.spec.ts
index 4de5aca89d..71f2074bcf 100644
--- a/comixed-webui/src/app/comic-book/selectors/mark-comics-deleted.selectors.spec.ts
+++ b/comixed-webui/src/app/comic-books/selectors/mark-comics-deleted.selectors.spec.ts
@@ -20,7 +20,7 @@ import { selectMarkComicsDeletedState } from './mark-comics-deleted.selectors';
 import {
   MARK_COMICS_DELETED_FEATURE_KEY,
   MarkComicsDeletedState
-} from '@app/comic-book/reducers/mark-comics-deleted.reducer';
+} from '@app/comic-books/reducers/mark-comics-deleted.reducer';
 
 describe('MarkComicsDeleted Selectors', () => {
   let state: MarkComicsDeletedState;
diff --git a/comixed-webui/src/app/comic-book/selectors/mark-comics-deleted.selectors.ts b/comixed-webui/src/app/comic-books/selectors/mark-comics-deleted.selectors.ts
similarity index 100%
rename from comixed-webui/src/app/comic-book/selectors/mark-comics-deleted.selectors.ts
rename to comixed-webui/src/app/comic-books/selectors/mark-comics-deleted.selectors.ts
diff --git a/comixed-webui/src/app/comic-book/selectors/scraping.selectors.spec.ts b/comixed-webui/src/app/comic-books/selectors/scraping.selectors.spec.ts
similarity index 97%
rename from comixed-webui/src/app/comic-book/selectors/scraping.selectors.spec.ts
rename to comixed-webui/src/app/comic-books/selectors/scraping.selectors.spec.ts
index 8427c365d4..99de979bed 100644
--- a/comixed-webui/src/app/comic-book/selectors/scraping.selectors.spec.ts
+++ b/comixed-webui/src/app/comic-books/selectors/scraping.selectors.spec.ts
@@ -30,7 +30,7 @@ import {
   SCRAPING_VOLUME_1,
   SCRAPING_VOLUME_2,
   SCRAPING_VOLUME_3
-} from '@app/comic-book/comic-book.fixtures';
+} from '@app/comic-books/comic-book.fixtures';
 
 describe('Scraping Selectors', () => {
   const VOLUMES = [SCRAPING_VOLUME_1, SCRAPING_VOLUME_2, SCRAPING_VOLUME_3];
diff --git a/comixed-webui/src/app/comic-book/selectors/scraping.selectors.ts b/comixed-webui/src/app/comic-books/selectors/scraping.selectors.ts
similarity index 100%
rename from comixed-webui/src/app/comic-book/selectors/scraping.selectors.ts
rename to comixed-webui/src/app/comic-books/selectors/scraping.selectors.ts
diff --git a/comixed-webui/src/app/comic-book/services/comic-list.service.spec.ts b/comixed-webui/src/app/comic-books/services/comic-list.service.spec.ts
similarity index 96%
rename from comixed-webui/src/app/comic-book/services/comic-list.service.spec.ts
rename to comixed-webui/src/app/comic-books/services/comic-list.service.spec.ts
index d3498af38b..96da4ac9ae 100644
--- a/comixed-webui/src/app/comic-book/services/comic-list.service.spec.ts
+++ b/comixed-webui/src/app/comic-books/services/comic-list.service.spec.ts
@@ -19,7 +19,7 @@
 import { TestBed } from '@angular/core/testing';
 
 import { ComicListService } from './comic-list.service';
-import { COMIC_1, COMIC_2 } from '@app/comic-book/comic-book.fixtures';
+import { COMIC_1, COMIC_2 } from '@app/comic-books/comic-book.fixtures';
 import {
   initialState as initialMessagingState,
   MESSAGING_FEATURE_KEY
@@ -32,7 +32,7 @@ import { COMIC_LIST_UPDATE_TOPIC } from '@app/library/library.constants';
 import {
   comicListUpdateReceived,
   resetComicList
-} from '@app/comic-book/actions/comic-list.actions';
+} from '@app/comic-books/actions/comic-list.actions';
 
 describe('ComicListService', () => {
   const initialState = {
diff --git a/comixed-webui/src/app/comic-book/services/comic-list.service.ts b/comixed-webui/src/app/comic-books/services/comic-list.service.ts
similarity index 93%
rename from comixed-webui/src/app/comic-book/services/comic-list.service.ts
rename to comixed-webui/src/app/comic-books/services/comic-list.service.ts
index 68dfe5326e..5a2cb989fa 100644
--- a/comixed-webui/src/app/comic-book/services/comic-list.service.ts
+++ b/comixed-webui/src/app/comic-books/services/comic-list.service.ts
@@ -23,8 +23,8 @@ import { WebSocketService } from '@app/messaging';
 import { LoggerService } from '@angular-ru/logger';
 import { selectMessagingState } from '@app/messaging/selectors/messaging.selectors';
 import { COMIC_LIST_UPDATE_TOPIC } from '@app/library/library.constants';
-import { Comic } from '@app/comic-book/models/comic';
-import { comicListUpdateReceived } from '@app/comic-book/actions/comic-list.actions';
+import { Comic } from '@app/comic-books/models/comic';
+import { comicListUpdateReceived } from '@app/comic-books/actions/comic-list.actions';
 
 @Injectable({
   providedIn: 'root'
diff --git a/comixed-webui/src/app/comic-book/services/comic.service.spec.ts b/comixed-webui/src/app/comic-books/services/comic.service.spec.ts
similarity index 89%
rename from comixed-webui/src/app/comic-book/services/comic.service.spec.ts
rename to comixed-webui/src/app/comic-books/services/comic.service.spec.ts
index 4fd2474427..5948db0bd3 100644
--- a/comixed-webui/src/app/comic-book/services/comic.service.spec.ts
+++ b/comixed-webui/src/app/comic-books/services/comic.service.spec.ts
@@ -28,7 +28,7 @@ import {
   COMIC_2,
   COMIC_3,
   COMIC_5
-} from '@app/comic-book/comic-book.fixtures';
+} from '@app/comic-books/comic-book.fixtures';
 import {
   LOAD_COMIC_URL,
   LOAD_COMICS_URL,
@@ -36,16 +36,16 @@ import {
 } from '@app/library/library.constants';
 import { interpolate } from '@app/core';
 import { LoggerModule } from '@angular-ru/logger';
-import { LoadComicsResponse } from '@app/comic-book/models/net/load-comics-response';
-import { LoadComicsRequest } from '@app/comic-book/models/net/load-comics-request';
+import { LoadComicsResponse } from '@app/comic-books/models/net/load-comics-response';
+import { LoadComicsRequest } from '@app/comic-books/models/net/load-comics-request';
 import {
   MARK_COMICS_DELETED_URL,
   MARK_COMICS_UNDELETED_URL,
   UPDATE_COMIC_INFO_URL
-} from '@app/comic-book/comic-book.constants';
-import { MarkComicsDeletedRequest } from '@app/comic-book/models/net/mark-comics-deleted-request';
+} from '@app/comic-books/comic-book.constants';
+import { MarkComicsDeletedRequest } from '@app/comic-books/models/net/mark-comics-deleted-request';
 import { HttpResponse } from '@angular/common/http';
-import { MarkComicsUndeletedRequest } from '@app/comic-book/models/net/mark-comics-undeleted-request';
+import { MarkComicsUndeletedRequest } from '@app/comic-books/models/net/mark-comics-undeleted-request';
 
 describe('ComicService', () => {
   const COMIC = COMIC_2;
diff --git a/comixed-webui/src/app/comic-book/services/comic.service.ts b/comixed-webui/src/app/comic-books/services/comic.service.ts
similarity index 91%
rename from comixed-webui/src/app/comic-book/services/comic.service.ts
rename to comixed-webui/src/app/comic-books/services/comic.service.ts
index 0d1144de0b..6643a742ae 100644
--- a/comixed-webui/src/app/comic-book/services/comic.service.ts
+++ b/comixed-webui/src/app/comic-books/services/comic.service.ts
@@ -18,7 +18,7 @@
 
 import { Injectable } from '@angular/core';
 import { Observable } from 'rxjs';
-import { Comic } from '@app/comic-book/models/comic';
+import { Comic } from '@app/comic-books/models/comic';
 import { LoggerService } from '@angular-ru/logger';
 import { HttpClient } from '@angular/common/http';
 import {
@@ -27,13 +27,13 @@ import {
   UPDATE_COMIC_URL
 } from '@app/library/library.constants';
 import { interpolate } from '@app/core';
-import { LoadComicsRequest } from '@app/comic-book/models/net/load-comics-request';
+import { LoadComicsRequest } from '@app/comic-books/models/net/load-comics-request';
 import {
   MARK_COMICS_DELETED_URL,
   MARK_COMICS_UNDELETED_URL,
   UPDATE_COMIC_INFO_URL
-} from '@app/comic-book/comic-book.constants';
-import { MarkComicsDeletedRequest } from '@app/comic-book/models/net/mark-comics-deleted-request';
+} from '@app/comic-books/comic-book.constants';
+import { MarkComicsDeletedRequest } from '@app/comic-books/models/net/mark-comics-deleted-request';
 
 @Injectable({
   providedIn: 'root'
diff --git a/comixed-webui/src/app/comic-book/services/imprint.service.spec.ts b/comixed-webui/src/app/comic-books/services/imprint.service.spec.ts
similarity index 93%
rename from comixed-webui/src/app/comic-book/services/imprint.service.spec.ts
rename to comixed-webui/src/app/comic-books/services/imprint.service.spec.ts
index a0fe736254..61ec4a76b6 100644
--- a/comixed-webui/src/app/comic-book/services/imprint.service.spec.ts
+++ b/comixed-webui/src/app/comic-books/services/imprint.service.spec.ts
@@ -23,14 +23,14 @@ import {
   IMPRINT_1,
   IMPRINT_2,
   IMPRINT_3
-} from '@app/comic-book/comic-book.fixtures';
+} from '@app/comic-books/comic-book.fixtures';
 import {
   HttpClientTestingModule,
   HttpTestingController
 } from '@angular/common/http/testing';
 import { LoggerModule } from '@angular-ru/logger';
 import { interpolate } from '@app/core';
-import { GET_IMPRINTS_URL } from '@app/comic-book/comic-book.constants';
+import { GET_IMPRINTS_URL } from '@app/comic-books/comic-book.constants';
 
 describe('ImprintService', () => {
   const ENTRIES = [IMPRINT_1, IMPRINT_2, IMPRINT_3];
diff --git a/comixed-webui/src/app/comic-book/services/imprint.service.ts b/comixed-webui/src/app/comic-books/services/imprint.service.ts
similarity index 94%
rename from comixed-webui/src/app/comic-book/services/imprint.service.ts
rename to comixed-webui/src/app/comic-books/services/imprint.service.ts
index a049417ce7..06bc312806 100644
--- a/comixed-webui/src/app/comic-book/services/imprint.service.ts
+++ b/comixed-webui/src/app/comic-books/services/imprint.service.ts
@@ -20,7 +20,7 @@ import { Injectable } from '@angular/core';
 import { LoggerService } from '@angular-ru/logger';
 import { HttpClient } from '@angular/common/http';
 import { Observable } from 'rxjs';
-import { GET_IMPRINTS_URL } from '@app/comic-book/comic-book.constants';
+import { GET_IMPRINTS_URL } from '@app/comic-books/comic-book.constants';
 import { interpolate } from '@app/core';
 
 @Injectable({
diff --git a/comixed-webui/src/app/comic-book/services/page.service.spec.ts b/comixed-webui/src/app/comic-books/services/page.service.spec.ts
similarity index 100%
rename from comixed-webui/src/app/comic-book/services/page.service.spec.ts
rename to comixed-webui/src/app/comic-books/services/page.service.spec.ts
diff --git a/comixed-webui/src/app/comic-book/services/page.service.ts b/comixed-webui/src/app/comic-books/services/page.service.ts
similarity index 100%
rename from comixed-webui/src/app/comic-book/services/page.service.ts
rename to comixed-webui/src/app/comic-books/services/page.service.ts
diff --git a/comixed-webui/src/app/comic-book/services/scraping.service.spec.ts b/comixed-webui/src/app/comic-books/services/scraping.service.spec.ts
similarity index 94%
rename from comixed-webui/src/app/comic-book/services/scraping.service.spec.ts
rename to comixed-webui/src/app/comic-books/services/scraping.service.spec.ts
index 18f5c15b79..c7c7bfdcfc 100644
--- a/comixed-webui/src/app/comic-book/services/scraping.service.spec.ts
+++ b/comixed-webui/src/app/comic-books/services/scraping.service.spec.ts
@@ -24,7 +24,7 @@ import {
   SCRAPING_VOLUME_1,
   SCRAPING_VOLUME_2,
   SCRAPING_VOLUME_3
-} from '@app/comic-book/comic-book.fixtures';
+} from '@app/comic-books/comic-book.fixtures';
 import {
   HttpClientTestingModule,
   HttpTestingController
@@ -36,8 +36,8 @@ import {
   LOAD_SCRAPING_VOLUMES_URL,
   SCRAPE_COMIC_URL
 } from '@app/library/library.constants';
-import { LoadScrapingIssueRequest } from '@app/comic-book/models/net/load-scraping-issue-request';
-import { ScrapeComicRequest } from '@app/comic-book/models/net/scrape-comic-request';
+import { LoadScrapingIssueRequest } from '@app/comic-books/models/net/load-scraping-issue-request';
+import { ScrapeComicRequest } from '@app/comic-books/models/net/scrape-comic-request';
 
 describe('ScrapingService', () => {
   const API_KEY = '1234567890ABCDEF';
diff --git a/comixed-webui/src/app/comic-book/services/scraping.service.ts b/comixed-webui/src/app/comic-books/services/scraping.service.ts
similarity index 90%
rename from comixed-webui/src/app/comic-book/services/scraping.service.ts
rename to comixed-webui/src/app/comic-books/services/scraping.service.ts
index cf31b3dc09..39082fbdd4 100644
--- a/comixed-webui/src/app/comic-book/services/scraping.service.ts
+++ b/comixed-webui/src/app/comic-books/services/scraping.service.ts
@@ -26,10 +26,10 @@ import {
   LOAD_SCRAPING_VOLUMES_URL,
   SCRAPE_COMIC_URL
 } from '@app/library/library.constants';
-import { LoadScrapingVolumesRequest } from '@app/comic-book/models/net/load-scraping-volumes-request';
-import { LoadScrapingIssueRequest } from '@app/comic-book/models/net/load-scraping-issue-request';
-import { Comic } from '@app/comic-book/models/comic';
-import { ScrapeComicRequest } from '@app/comic-book/models/net/scrape-comic-request';
+import { LoadScrapingVolumesRequest } from '@app/comic-books/models/net/load-scraping-volumes-request';
+import { LoadScrapingIssueRequest } from '@app/comic-books/models/net/load-scraping-issue-request';
+import { Comic } from '@app/comic-books/models/comic';
+import { ScrapeComicRequest } from '@app/comic-books/models/net/scrape-comic-request';
 
 /**
  * Interacts with the REST APIs during scraping.
diff --git a/comixed-webui/src/app/comic-file/comic-file.module.ts b/comixed-webui/src/app/comic-file/comic-file.module.ts
index d6be45fdf6..099dffe7ca 100644
--- a/comixed-webui/src/app/comic-file/comic-file.module.ts
+++ b/comixed-webui/src/app/comic-file/comic-file.module.ts
@@ -56,7 +56,7 @@ import { MatSortModule } from '@angular/material/sort';
 import { MatCardModule } from '@angular/material/card';
 import { LibraryModule } from '@app/library/library.module';
 import { MatProgressBarModule } from '@angular/material/progress-bar';
-import { ComicBookModule } from '@app/comic-book/comic-book.module';
+import { ComicBookModule } from '@app/comic-books/comic-book.module';
 
 @NgModule({
   declarations: [
diff --git a/comixed-webui/src/app/comic-file/components/comic-file-details/comic-file-details.component.spec.ts b/comixed-webui/src/app/comic-file/components/comic-file-details/comic-file-details.component.spec.ts
index e973f5a910..cbeaa45ebd 100644
--- a/comixed-webui/src/app/comic-file/components/comic-file-details/comic-file-details.component.spec.ts
+++ b/comixed-webui/src/app/comic-file/components/comic-file-details/comic-file-details.component.spec.ts
@@ -34,7 +34,7 @@ import {
   COMIC_FILE_LIST_FEATURE_KEY,
   initialState as initialComicFileListState
 } from '@app/comic-file/reducers/comic-file-list.reducer';
-import { ComicPageComponent } from '@app/comic-book/components/comic-page/comic-page.component';
+import { ComicPageComponent } from '@app/comic-books/components/comic-page/comic-page.component';
 
 describe('ComicFileDetailsComponent', () => {
   const FILE = COMIC_FILE_2;
diff --git a/comixed-webui/src/app/comic-file/pages/import-comics-page/import-comics-page.component.spec.ts b/comixed-webui/src/app/comic-file/pages/import-comics-page/import-comics-page.component.spec.ts
index 82b479ab83..07318ef7a6 100644
--- a/comixed-webui/src/app/comic-file/pages/import-comics-page/import-comics-page.component.spec.ts
+++ b/comixed-webui/src/app/comic-file/pages/import-comics-page/import-comics-page.component.spec.ts
@@ -53,7 +53,7 @@ import { MatSelectModule } from '@angular/material/select';
 import { MatTableModule } from '@angular/material/table';
 import { ComicFileCoverUrlPipe } from '@app/comic-file/pipes/comic-file-cover-url.pipe';
 import { MatCardModule } from '@angular/material/card';
-import { ComicPageComponent } from '@app/comic-book/components/comic-page/comic-page.component';
+import { ComicPageComponent } from '@app/comic-books/components/comic-page/comic-page.component';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { PAGE_SIZE_PREFERENCE } from '@app/library/library.constants';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
diff --git a/comixed-webui/src/app/comic-pages/actions/block-page.actions.ts b/comixed-webui/src/app/comic-pages/actions/block-page.actions.ts
index 8cde9b17c8..c53b3e0214 100644
--- a/comixed-webui/src/app/comic-pages/actions/block-page.actions.ts
+++ b/comixed-webui/src/app/comic-pages/actions/block-page.actions.ts
@@ -17,7 +17,7 @@
  */
 
 import { createAction, props } from '@ngrx/store';
-import { Page } from '@app/comic-book/models/page';
+import { Page } from '@app/comic-books/models/page';
 
 export const setBlockedState = createAction(
   '[Block Page] Sets the blocked state',
diff --git a/comixed-webui/src/app/comic-pages/comic-pages.fixtures.ts b/comixed-webui/src/app/comic-pages/comic-pages.fixtures.ts
index e459551384..9cd8534941 100644
--- a/comixed-webui/src/app/comic-pages/comic-pages.fixtures.ts
+++ b/comixed-webui/src/app/comic-pages/comic-pages.fixtures.ts
@@ -18,7 +18,7 @@
 
 import { BlockedHash } from './models/blocked-hash';
 import { DownloadDocument } from '@app/core/models/download-document';
-import { Page } from '@app/comic-book/models/page';
+import { Page } from '@app/comic-books/models/page';
 
 export const BLOCKED_HASH_1: BlockedHash = {
   id: 1,
diff --git a/comixed-webui/src/app/components/footer/footer.component.spec.ts b/comixed-webui/src/app/components/footer/footer.component.spec.ts
index affd4cd4eb..9131a53168 100644
--- a/comixed-webui/src/app/components/footer/footer.component.spec.ts
+++ b/comixed-webui/src/app/components/footer/footer.component.spec.ts
@@ -27,7 +27,7 @@ import { LoggerModule } from '@angular-ru/logger';
 import {
   COMIC_LIST_FEATURE_KEY,
   initialState as initialComicListState
-} from '@app/comic-book/reducers/comic-list.reducer';
+} from '@app/comic-books/reducers/comic-list.reducer';
 
 describe('FooterComponent', () => {
   const initialState = {
diff --git a/comixed-webui/src/app/components/footer/footer.component.ts b/comixed-webui/src/app/components/footer/footer.component.ts
index 9764840ac6..925407b5d6 100644
--- a/comixed-webui/src/app/components/footer/footer.component.ts
+++ b/comixed-webui/src/app/components/footer/footer.component.ts
@@ -25,7 +25,7 @@ import {
   selectComicListCount,
   selectComicListDeletedCount,
   selectComicListReadCount
-} from '@app/comic-book/selectors/comic-list.selectors';
+} from '@app/comic-books/selectors/comic-list.selectors';
 
 @Component({
   selector: 'cx-footer',
diff --git a/comixed-webui/src/app/last-read/actions/update-read-status.actions.ts b/comixed-webui/src/app/last-read/actions/update-read-status.actions.ts
index 96aa9b0147..0721d5d959 100644
--- a/comixed-webui/src/app/last-read/actions/update-read-status.actions.ts
+++ b/comixed-webui/src/app/last-read/actions/update-read-status.actions.ts
@@ -17,7 +17,7 @@
  */
 
 import { createAction, props } from '@ngrx/store';
-import { Comic } from '@app/comic-book/models/comic';
+import { Comic } from '@app/comic-books/models/comic';
 
 export const updateComicReadStatus = createAction(
   '[Update Read Status] Update the comic read state',
diff --git a/comixed-webui/src/app/last-read/effects/update-read-status.effects.spec.ts b/comixed-webui/src/app/last-read/effects/update-read-status.effects.spec.ts
index 89d2a12f7c..450b4c28d7 100644
--- a/comixed-webui/src/app/last-read/effects/update-read-status.effects.spec.ts
+++ b/comixed-webui/src/app/last-read/effects/update-read-status.effects.spec.ts
@@ -23,7 +23,7 @@ import { Observable, of, throwError } from 'rxjs';
 import { UpdateReadStatusEffects } from './update-read-status.effects';
 import { LastReadService } from '@app/last-read/services/last-read.service';
 import { AlertService } from '@app/core/services/alert.service';
-import { COMIC_4 } from '@app/comic-book/comic-book.fixtures';
+import { COMIC_4 } from '@app/comic-books/comic-book.fixtures';
 import { LoggerModule } from '@angular-ru/logger';
 import { TranslateModule } from '@ngx-translate/core';
 import { MatSnackBarModule } from '@angular/material/snack-bar';
diff --git a/comixed-webui/src/app/last-read/last-read.fixtures.ts b/comixed-webui/src/app/last-read/last-read.fixtures.ts
index e732506040..903bce8e76 100644
--- a/comixed-webui/src/app/last-read/last-read.fixtures.ts
+++ b/comixed-webui/src/app/last-read/last-read.fixtures.ts
@@ -23,7 +23,7 @@ import {
   COMIC_3,
   COMIC_4,
   COMIC_5
-} from '../comic-book/comic-book.fixtures';
+} from '../comic-books/comic-book.fixtures';
 
 export const LAST_READ_1: LastRead = {
   id: 1,
diff --git a/comixed-webui/src/app/last-read/reducers/update-read-status.reducer.spec.ts b/comixed-webui/src/app/last-read/reducers/update-read-status.reducer.spec.ts
index 5d62f39090..4d0d875cfb 100644
--- a/comixed-webui/src/app/last-read/reducers/update-read-status.reducer.spec.ts
+++ b/comixed-webui/src/app/last-read/reducers/update-read-status.reducer.spec.ts
@@ -21,7 +21,7 @@ import {
   reducer,
   UpdateReadStatusState
 } from './update-read-status.reducer';
-import { COMIC_4 } from '@app/comic-book/comic-book.fixtures';
+import { COMIC_4 } from '@app/comic-books/comic-book.fixtures';
 import {
   comicReadStatusUpdated,
   updateComicReadStatus,
diff --git a/comixed-webui/src/app/last-read/services/last-read.service.spec.ts b/comixed-webui/src/app/last-read/services/last-read.service.spec.ts
index d4ddb54746..992e67a2c0 100644
--- a/comixed-webui/src/app/last-read/services/last-read.service.spec.ts
+++ b/comixed-webui/src/app/last-read/services/last-read.service.spec.ts
@@ -40,7 +40,7 @@ import {
   SET_COMIC_READ_STATUS_URL
 } from '@app/last-read/last-read.constants';
 import { LoggerModule } from '@angular-ru/logger';
-import { COMIC_4 } from '@app/comic-book/comic-book.fixtures';
+import { COMIC_4 } from '@app/comic-books/comic-book.fixtures';
 import { MockStore, provideMockStore } from '@ngrx/store/testing';
 import { WebSocketService } from '@app/messaging';
 import {
diff --git a/comixed-webui/src/app/last-read/services/last-read.service.ts b/comixed-webui/src/app/last-read/services/last-read.service.ts
index 09b12bfd3c..dac522d413 100644
--- a/comixed-webui/src/app/last-read/services/last-read.service.ts
+++ b/comixed-webui/src/app/last-read/services/last-read.service.ts
@@ -29,7 +29,7 @@ import {
   SET_COMIC_READ_STATUS_URL
 } from '@app/last-read/last-read.constants';
 import { LoadLastReadEntriesRequest } from '@app/last-read/models/net/load-last-read-entries-request';
-import { Comic } from '@app/comic-book/models/comic';
+import { Comic } from '@app/comic-books/models/comic';
 import { Store } from '@ngrx/store';
 import { Subscription } from 'webstomp-client';
 import { selectMessagingState } from '@app/messaging/selectors/messaging.selectors';
diff --git a/comixed-webui/src/app/library/actions/convert-comics.actions.ts b/comixed-webui/src/app/library/actions/convert-comics.actions.ts
index fc3e99d242..ba62a0847b 100644
--- a/comixed-webui/src/app/library/actions/convert-comics.actions.ts
+++ b/comixed-webui/src/app/library/actions/convert-comics.actions.ts
@@ -17,8 +17,8 @@
  */
 
 import { createAction, props } from '@ngrx/store';
-import { Comic } from '@app/comic-book/models/comic';
-import { ArchiveType } from '@app/comic-book/models/archive-type.enum';
+import { Comic } from '@app/comic-books/models/comic';
+import { ArchiveType } from '@app/comic-books/models/archive-type.enum';
 
 export const convertComics = createAction(
   '[Convert Comics] Convert comics',
diff --git a/comixed-webui/src/app/library/actions/library.actions.ts b/comixed-webui/src/app/library/actions/library.actions.ts
index 67183abadf..40a05e8aa4 100644
--- a/comixed-webui/src/app/library/actions/library.actions.ts
+++ b/comixed-webui/src/app/library/actions/library.actions.ts
@@ -17,7 +17,7 @@
  */
 
 import { createAction, props } from '@ngrx/store';
-import { Comic } from '@app/comic-book/models/comic';
+import { Comic } from '@app/comic-books/models/comic';
 
 export const updateComics = createAction(
   '[Library] Library updates received',
diff --git a/comixed-webui/src/app/library/actions/rescan-comics.actions.ts b/comixed-webui/src/app/library/actions/rescan-comics.actions.ts
index f540effe2f..02f901af64 100644
--- a/comixed-webui/src/app/library/actions/rescan-comics.actions.ts
+++ b/comixed-webui/src/app/library/actions/rescan-comics.actions.ts
@@ -17,7 +17,7 @@
  */
 
 import { createAction, props } from '@ngrx/store';
-import { Comic } from '@app/comic-book/models/comic';
+import { Comic } from '@app/comic-books/models/comic';
 
 export const rescanComics = createAction(
   '[Rescan Comics] Rescan selected comics',
diff --git a/comixed-webui/src/app/library/actions/update-metadata.actions.ts b/comixed-webui/src/app/library/actions/update-metadata.actions.ts
index e11bb1d8d3..746fe8fb4d 100644
--- a/comixed-webui/src/app/library/actions/update-metadata.actions.ts
+++ b/comixed-webui/src/app/library/actions/update-metadata.actions.ts
@@ -17,7 +17,7 @@
  */
 
 import { createAction, props } from '@ngrx/store';
-import { Comic } from '../../comic-book/models/comic';
+import { Comic } from '../../comic-books/models/comic';
 
 export const updateMetadata = createAction(
   '[Update Metadata] Start updating metadata in comics',
diff --git a/comixed-webui/src/app/library/components/comic-covers/comic-covers.component.html b/comixed-webui/src/app/library/components/comic-covers/comic-covers.component.html
index c22ade3418..406e706f96 100644
--- a/comixed-webui/src/app/library/components/comic-covers/comic-covers.component.html
+++ b/comixed-webui/src/app/library/components/comic-covers/comic-covers.component.html
@@ -9,12 +9,13 @@
     [archiveType]="archiveType"
     (archiveTypeChanged)="onArchiveTypeChanged($event)"
   ></cx-library-toolbar>
-  <div id="cx-all-comics" class="cx-comic-detail-card-container">
+  <div id="cx-all-comics" class="cx-detail-card-container">
     <div
       *ngFor="let comic of comics"
-      fxFlex="20%"
-      fxFlex.xs="100%"
-      fxFlex.sm="25%"
+      fxFlex.gt-lg="10%"
+      fxFlex.lg="20%"
+      fxFlex.md="50%"
+      fxFlex.lt-md="100%"
     >
       <cx-comic-detail-card
         class="mat-elevation-z4"
diff --git a/comixed-webui/src/app/library/components/comic-covers/comic-covers.component.spec.ts b/comixed-webui/src/app/library/components/comic-covers/comic-covers.component.spec.ts
index 4d9a84df5a..341df8c8b3 100644
--- a/comixed-webui/src/app/library/components/comic-covers/comic-covers.component.spec.ts
+++ b/comixed-webui/src/app/library/components/comic-covers/comic-covers.component.spec.ts
@@ -42,7 +42,7 @@ import {
   COMIC_2,
   COMIC_3,
   COMIC_4
-} from '@app/comic-book/comic-book.fixtures';
+} from '@app/comic-books/comic-book.fixtures';
 import {
   deselectComics,
   selectComics,
@@ -54,7 +54,7 @@ import { MatDialog, MatDialogModule } from '@angular/material/dialog';
 import { MatMenuModule } from '@angular/material/menu';
 import { ComicDetailsDialogComponent } from '@app/library/components/comic-details-dialog/comic-details-dialog.component';
 import { LibraryToolbarComponent } from '@app/library/components/library-toolbar/library-toolbar.component';
-import { ComicBookState } from '@app/comic-book/models/comic-book-state';
+import { ComicBookState } from '@app/comic-books/models/comic-book-state';
 import { ConfirmationService } from '@app/core/services/confirmation.service';
 import { updateMetadata } from '@app/library/actions/update-metadata.actions.ts';
 import { Confirmation } from '@app/core/models/confirmation';
@@ -63,8 +63,8 @@ import { MatSelectModule } from '@angular/material/select';
 import {
   ArchiveType,
   archiveTypeFromString
-} from '@app/comic-book/models/archive-type.enum';
-import { markComicsDeleted } from '@app/comic-book/actions/mark-comics-deleted.actions';
+} from '@app/comic-books/models/archive-type.enum';
+import { markComicsDeleted } from '@app/comic-books/actions/mark-comics-deleted.actions';
 import { MatDividerModule } from '@angular/material/divider';
 import { addComicsToReadingList } from '@app/lists/actions/reading-list-entries.actions';
 import { READING_LIST_1 } from '@app/lists/lists.fixtures';
diff --git a/comixed-webui/src/app/library/components/comic-covers/comic-covers.component.ts b/comixed-webui/src/app/library/components/comic-covers/comic-covers.component.ts
index a26a27a937..06c8a94788 100644
--- a/comixed-webui/src/app/library/components/comic-covers/comic-covers.component.ts
+++ b/comixed-webui/src/app/library/components/comic-covers/comic-covers.component.ts
@@ -26,7 +26,7 @@ import {
   Output,
   ViewChild
 } from '@angular/core';
-import { Comic } from '@app/comic-book/models/comic';
+import { Comic } from '@app/comic-books/models/comic';
 import { MatTableDataSource } from '@angular/material/table';
 import { BehaviorSubject, Subscription } from 'rxjs';
 import { LoggerService } from '@angular-ru/logger';
@@ -42,7 +42,7 @@ import { MatDialog } from '@angular/material/dialog';
 import { ComicDetailsDialogComponent } from '@app/library/components/comic-details-dialog/comic-details-dialog.component';
 import { PAGINATION_DEFAULT } from '@app/library/library.constants';
 import { LibraryToolbarComponent } from '@app/library/components/library-toolbar/library-toolbar.component';
-import { ComicBookState } from '@app/comic-book/models/comic-book-state';
+import { ComicBookState } from '@app/comic-books/models/comic-book-state';
 import { ConfirmationService } from '@app/core/services/confirmation.service';
 import { TranslateService } from '@ngx-translate/core';
 import { updateMetadata } from '@app/library/actions/update-metadata.actions.ts';
@@ -50,8 +50,8 @@ import { selectDisplayState } from '@app/library/selectors/display.selectors';
 import {
   ArchiveType,
   archiveTypeFromString
-} from '@app/comic-book/models/archive-type.enum';
-import { markComicsDeleted } from '@app/comic-book/actions/mark-comics-deleted.actions';
+} from '@app/comic-books/models/archive-type.enum';
+import { markComicsDeleted } from '@app/comic-books/actions/mark-comics-deleted.actions';
 import { ReadingList } from '@app/lists/models/reading-list';
 import { addComicsToReadingList } from '@app/lists/actions/reading-list-entries.actions';
 import { convertComics } from '@app/library/actions/convert-comics.actions';
diff --git a/comixed-webui/src/app/library/components/comic-details-dialog/comic-details-dialog.component.spec.ts b/comixed-webui/src/app/library/components/comic-details-dialog/comic-details-dialog.component.spec.ts
index fb971e4dee..e0606b20cc 100644
--- a/comixed-webui/src/app/library/components/comic-details-dialog/comic-details-dialog.component.spec.ts
+++ b/comixed-webui/src/app/library/components/comic-details-dialog/comic-details-dialog.component.spec.ts
@@ -19,9 +19,9 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { ComicDetailsDialogComponent } from './comic-details-dialog.component';
 import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
-import { ComicTitlePipe } from '@app/comic-book/pipes/comic-title.pipe';
-import { ComicCoverUrlPipe } from '@app/comic-book/pipes/comic-cover-url.pipe';
-import { ComicPageComponent } from '@app/comic-book/components/comic-page/comic-page.component';
+import { ComicTitlePipe } from '@app/comic-books/pipes/comic-title.pipe';
+import { ComicCoverUrlPipe } from '@app/comic-books/pipes/comic-cover-url.pipe';
+import { ComicPageComponent } from '@app/comic-books/components/comic-page/comic-page.component';
 import { LoggerModule } from '@angular-ru/logger';
 import { provideMockStore } from '@ngrx/store/testing';
 import {
diff --git a/comixed-webui/src/app/library/components/comic-details-dialog/comic-details-dialog.component.ts b/comixed-webui/src/app/library/components/comic-details-dialog/comic-details-dialog.component.ts
index 8816c10791..eaf644fe6c 100644
--- a/comixed-webui/src/app/library/components/comic-details-dialog/comic-details-dialog.component.ts
+++ b/comixed-webui/src/app/library/components/comic-details-dialog/comic-details-dialog.component.ts
@@ -18,7 +18,7 @@
 
 import { Component, Inject, OnInit } from '@angular/core';
 import { MAT_DIALOG_DATA } from '@angular/material/dialog';
-import { Comic } from '@app/comic-book/models/comic';
+import { Comic } from '@app/comic-books/models/comic';
 
 @Component({
   selector: 'cx-comic-details-dialog',
diff --git a/comixed-webui/src/app/library/components/comic-list-view/comic-list-view.component.spec.ts b/comixed-webui/src/app/library/components/comic-list-view/comic-list-view.component.spec.ts
index 8214f29c03..7b12efe0da 100644
--- a/comixed-webui/src/app/library/components/comic-list-view/comic-list-view.component.spec.ts
+++ b/comixed-webui/src/app/library/components/comic-list-view/comic-list-view.component.spec.ts
@@ -25,11 +25,15 @@ import {
 import { provideMockStore } from '@ngrx/store/testing';
 import { LoggerModule } from '@angular-ru/logger';
 import { TranslateModule } from '@ngx-translate/core';
-import { COMIC_1, COMIC_3, COMIC_5 } from '@app/comic-book/comic-book.fixtures';
+import {
+  COMIC_1,
+  COMIC_3,
+  COMIC_5
+} from '@app/comic-books/comic-book.fixtures';
 import { MatTableModule } from '@angular/material/table';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import { SelectableListItem } from '@app/core/models/ui/selectable-list-item';
-import { Comic } from '@app/comic-book/models/comic';
+import { Comic } from '@app/comic-books/models/comic';
 
 describe('ComicListViewComponent', () => {
   const COMICS = [COMIC_1, COMIC_3, COMIC_5];
diff --git a/comixed-webui/src/app/library/components/comic-list-view/comic-list-view.component.ts b/comixed-webui/src/app/library/components/comic-list-view/comic-list-view.component.ts
index 2c54a171e2..7de9a3a7f1 100644
--- a/comixed-webui/src/app/library/components/comic-list-view/comic-list-view.component.ts
+++ b/comixed-webui/src/app/library/components/comic-list-view/comic-list-view.component.ts
@@ -25,7 +25,7 @@ import {
   Output,
   ViewChild
 } from '@angular/core';
-import { Comic } from '@app/comic-book/models/comic';
+import { Comic } from '@app/comic-books/models/comic';
 import { MatTableDataSource } from '@angular/material/table';
 import { LoggerService } from '@angular-ru/logger';
 import { MatSort } from '@angular/material/sort';
diff --git a/comixed-webui/src/app/library/components/comics-with-duplicate-page/comics-with-duplicate-page.component.spec.ts b/comixed-webui/src/app/library/components/comics-with-duplicate-page/comics-with-duplicate-page.component.spec.ts
index eb92631ed1..097172d0af 100644
--- a/comixed-webui/src/app/library/components/comics-with-duplicate-page/comics-with-duplicate-page.component.spec.ts
+++ b/comixed-webui/src/app/library/components/comics-with-duplicate-page/comics-with-duplicate-page.component.spec.ts
@@ -42,10 +42,14 @@ import {
   initialState as initialDisplayState
 } from '@app/library/reducers/display.reducer';
 import { DuplicatePage } from '@app/library/models/duplicate-page';
-import { COMIC_1, COMIC_3, COMIC_5 } from '@app/comic-book/comic-book.fixtures';
-import { ComicDetailCardComponent } from '@app/comic-book/components/comic-detail-card/comic-detail-card.component';
-import { ComicTitlePipe } from '@app/comic-book/pipes/comic-title.pipe';
-import { ComicCoverUrlPipe } from '@app/comic-book/pipes/comic-cover-url.pipe';
+import {
+  COMIC_1,
+  COMIC_3,
+  COMIC_5
+} from '@app/comic-books/comic-book.fixtures';
+import { ComicDetailCardComponent } from '@app/comic-books/components/comic-detail-card/comic-detail-card.component';
+import { ComicTitlePipe } from '@app/comic-books/pipes/comic-title.pipe';
+import { ComicCoverUrlPipe } from '@app/comic-books/pipes/comic-cover-url.pipe';
 import { MatCardModule } from '@angular/material/card';
 import { MatExpansionModule } from '@angular/material/expansion';
 import { MatGridListModule } from '@angular/material/grid-list';
diff --git a/comixed-webui/src/app/library/components/library-toolbar/library-toolbar.component.spec.ts b/comixed-webui/src/app/library/components/library-toolbar/library-toolbar.component.spec.ts
index 56c325d06a..3577d8494e 100644
--- a/comixed-webui/src/app/library/components/library-toolbar/library-toolbar.component.spec.ts
+++ b/comixed-webui/src/app/library/components/library-toolbar/library-toolbar.component.spec.ts
@@ -20,7 +20,11 @@ import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { LibraryToolbarComponent } from './library-toolbar.component';
 import { LoggerModule } from '@angular-ru/logger';
 import { MockStore, provideMockStore } from '@ngrx/store/testing';
-import { COMIC_1, COMIC_2, COMIC_3 } from '@app/comic-book/comic-book.fixtures';
+import {
+  COMIC_1,
+  COMIC_2,
+  COMIC_3
+} from '@app/comic-books/comic-book.fixtures';
 import {
   deselectComics,
   selectComics
@@ -45,7 +49,7 @@ import { PAGINATION_PREFERENCE } from '@app/library/library.constants';
 import { ConfirmationService } from '@app/core/services/confirmation.service';
 import { MatSelectModule } from '@angular/material/select';
 import { MatOptionModule } from '@angular/material/core';
-import { ArchiveType } from '@app/comic-book/models/archive-type.enum';
+import { ArchiveType } from '@app/comic-books/models/archive-type.enum';
 import { startLibraryConsolidation } from '@app/library/actions/consolidate-library.actions';
 import { MatDividerModule } from '@angular/material/divider';
 import { rescanComics } from '@app/library/actions/rescan-comics.actions';
diff --git a/comixed-webui/src/app/library/components/library-toolbar/library-toolbar.component.ts b/comixed-webui/src/app/library/components/library-toolbar/library-toolbar.component.ts
index 14d943de82..b635f34655 100644
--- a/comixed-webui/src/app/library/components/library-toolbar/library-toolbar.component.ts
+++ b/comixed-webui/src/app/library/components/library-toolbar/library-toolbar.component.ts
@@ -26,7 +26,7 @@ import {
   Output,
   ViewChild
 } from '@angular/core';
-import { Comic } from '@app/comic-book/models/comic';
+import { Comic } from '@app/comic-books/models/comic';
 import { LoggerService } from '@angular-ru/logger';
 import { Store } from '@ngrx/store';
 import {
@@ -44,7 +44,7 @@ import { Subscription } from 'rxjs';
 import { MatPaginator } from '@angular/material/paginator';
 import { selectDisplayState } from '@app/library/selectors/display.selectors';
 import { saveUserPreference } from '@app/user/actions/user.actions';
-import { ArchiveType } from '@app/comic-book/models/archive-type.enum';
+import { ArchiveType } from '@app/comic-books/models/archive-type.enum';
 import { SelectionOption } from '@app/core/models/ui/selection-option';
 import { startLibraryConsolidation } from '@app/library/actions/consolidate-library.actions';
 import { rescanComics } from '@app/library/actions/rescan-comics.actions';
diff --git a/comixed-webui/src/app/library/components/selected-comics/selected-comics.component.spec.ts b/comixed-webui/src/app/library/components/selected-comics/selected-comics.component.spec.ts
index 3118e7c4aa..a448caa815 100644
--- a/comixed-webui/src/app/library/components/selected-comics/selected-comics.component.spec.ts
+++ b/comixed-webui/src/app/library/components/selected-comics/selected-comics.component.spec.ts
@@ -25,7 +25,7 @@ import {
   COMIC_2,
   COMIC_3,
   COMIC_4
-} from '@app/comic-book/comic-book.fixtures';
+} from '@app/comic-books/comic-book.fixtures';
 import { ComicDetailsDialogComponent } from '@app/library/components/comic-details-dialog/comic-details-dialog.component';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 
diff --git a/comixed-webui/src/app/library/components/selected-comics/selected-comics.component.ts b/comixed-webui/src/app/library/components/selected-comics/selected-comics.component.ts
index dc5a65fad4..3909292900 100644
--- a/comixed-webui/src/app/library/components/selected-comics/selected-comics.component.ts
+++ b/comixed-webui/src/app/library/components/selected-comics/selected-comics.component.ts
@@ -17,7 +17,7 @@
  */
 
 import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
-import { Comic } from '@app/comic-book/models/comic';
+import { Comic } from '@app/comic-books/models/comic';
 import { LoggerService } from '@angular-ru/logger';
 import { MatDialog } from '@angular/material/dialog';
 import { ComicDetailsDialogComponent } from '@app/library/components/comic-details-dialog/comic-details-dialog.component';
diff --git a/comixed-webui/src/app/library/effects/consolidate-library.effects.spec.ts b/comixed-webui/src/app/library/effects/consolidate-library.effects.spec.ts
index 9130368682..c876584b2d 100644
--- a/comixed-webui/src/app/library/effects/consolidate-library.effects.spec.ts
+++ b/comixed-webui/src/app/library/effects/consolidate-library.effects.spec.ts
@@ -25,7 +25,11 @@ import { AlertService } from '@app/core/services/alert.service';
 import { TranslateModule } from '@ngx-translate/core';
 import { MatSnackBarModule } from '@angular/material/snack-bar';
 import { LoggerModule } from '@angular-ru/logger';
-import { COMIC_1, COMIC_3, COMIC_5 } from '@app/comic-book/comic-book.fixtures';
+import {
+  COMIC_1,
+  COMIC_3,
+  COMIC_5
+} from '@app/comic-books/comic-book.fixtures';
 import {
   libraryConsolidationStarted,
   startLibraryConsolidation,
diff --git a/comixed-webui/src/app/library/effects/convert-comics.effects.spec.ts b/comixed-webui/src/app/library/effects/convert-comics.effects.spec.ts
index fd8703d149..a76ac4abf5 100644
--- a/comixed-webui/src/app/library/effects/convert-comics.effects.spec.ts
+++ b/comixed-webui/src/app/library/effects/convert-comics.effects.spec.ts
@@ -25,8 +25,12 @@ import { AlertService } from '@app/core/services/alert.service';
 import { LoggerModule } from '@angular-ru/logger';
 import { TranslateModule } from '@ngx-translate/core';
 import { MatSnackBarModule } from '@angular/material/snack-bar';
-import { COMIC_1, COMIC_3, COMIC_5 } from '@app/comic-book/comic-book.fixtures';
-import { ArchiveType } from '@app/comic-book/models/archive-type.enum';
+import {
+  COMIC_1,
+  COMIC_3,
+  COMIC_5
+} from '@app/comic-books/comic-book.fixtures';
+import { ArchiveType } from '@app/comic-books/models/archive-type.enum';
 import { HttpErrorResponse, HttpResponse } from '@angular/common/http';
 import {
   comicsConverting,
diff --git a/comixed-webui/src/app/library/effects/library.effects.spec.ts b/comixed-webui/src/app/library/effects/library.effects.spec.ts
index 91d5b671c5..54f0c9fd33 100644
--- a/comixed-webui/src/app/library/effects/library.effects.spec.ts
+++ b/comixed-webui/src/app/library/effects/library.effects.spec.ts
@@ -25,7 +25,7 @@ import {
   COMIC_2,
   COMIC_3,
   COMIC_4
-} from '@app/comic-book/comic-book.fixtures';
+} from '@app/comic-books/comic-book.fixtures';
 import { LibraryService } from '@app/library/services/library.service';
 import { AlertService } from '@app/core/services/alert.service';
 import { LoggerModule } from '@angular-ru/logger';
diff --git a/comixed-webui/src/app/library/effects/rescan-comics.effects.spec.ts b/comixed-webui/src/app/library/effects/rescan-comics.effects.spec.ts
index aad7acbed3..36ded8a00e 100644
--- a/comixed-webui/src/app/library/effects/rescan-comics.effects.spec.ts
+++ b/comixed-webui/src/app/library/effects/rescan-comics.effects.spec.ts
@@ -25,7 +25,11 @@ import { LoggerModule } from '@angular-ru/logger';
 import { TranslateModule } from '@ngx-translate/core';
 import { MatSnackBarModule } from '@angular/material/snack-bar';
 import { AlertService } from '@app/core/services/alert.service';
-import { COMIC_1, COMIC_3, COMIC_5 } from '@app/comic-book/comic-book.fixtures';
+import {
+  COMIC_1,
+  COMIC_3,
+  COMIC_5
+} from '@app/comic-books/comic-book.fixtures';
 import {
   comicsRescanning,
   rescanComics,
diff --git a/comixed-webui/src/app/library/effects/update-metadata.effects.spec.ts b/comixed-webui/src/app/library/effects/update-metadata.effects.spec.ts
index 4feaf8e902..3ccb8e1fe6 100644
--- a/comixed-webui/src/app/library/effects/update-metadata.effects.spec.ts
+++ b/comixed-webui/src/app/library/effects/update-metadata.effects.spec.ts
@@ -25,7 +25,11 @@ import { AlertService } from '@app/core/services/alert.service';
 import { LoggerModule } from '@angular-ru/logger';
 import { TranslateModule } from '@ngx-translate/core';
 import { MatSnackBarModule } from '@angular/material/snack-bar';
-import { COMIC_1, COMIC_3, COMIC_5 } from '@app/comic-book/comic-book.fixtures';
+import {
+  COMIC_1,
+  COMIC_3,
+  COMIC_5
+} from '@app/comic-books/comic-book.fixtures';
 import {
   metadataUpdating,
   updateMetadata,
diff --git a/comixed-webui/src/app/library/effects/update-metadata.effects.ts b/comixed-webui/src/app/library/effects/update-metadata.effects.ts
index cdf127c67a..ac9b68b391 100644
--- a/comixed-webui/src/app/library/effects/update-metadata.effects.ts
+++ b/comixed-webui/src/app/library/effects/update-metadata.effects.ts
@@ -27,7 +27,7 @@ import {
   updateMetadataFailed
 } from '@app/library/actions/update-metadata.actions.ts';
 import { catchError, map, switchMap, tap } from 'rxjs/operators';
-import { Comic } from '@app/comic-book/models/comic';
+import { Comic } from '@app/comic-books/models/comic';
 import { of } from 'rxjs';
 import { LibraryService } from '@app/library/services/library.service';
 
diff --git a/comixed-webui/src/app/library/library.fixtures.ts b/comixed-webui/src/app/library/library.fixtures.ts
index 7a219f47dc..485c964287 100644
--- a/comixed-webui/src/app/library/library.fixtures.ts
+++ b/comixed-webui/src/app/library/library.fixtures.ts
@@ -17,7 +17,7 @@
  */
 
 import { DuplicatePage } from './models/duplicate-page';
-import { COMIC_1, COMIC_2, COMIC_3 } from '../comic-book/comic-book.fixtures';
+import { COMIC_1, COMIC_2, COMIC_3 } from '../comic-books/comic-book.fixtures';
 import { PAGE_1, PAGE_2, PAGE_3 } from '@app/comic-pages/comic-pages.fixtures';
 
 export const DUPLICATE_PAGE_1: DuplicatePage = {
diff --git a/comixed-webui/src/app/library/library.module.ts b/comixed-webui/src/app/library/library.module.ts
index 89400e7a34..1dbee48f8d 100644
--- a/comixed-webui/src/app/library/library.module.ts
+++ b/comixed-webui/src/app/library/library.module.ts
@@ -63,7 +63,7 @@ import { MatMenuModule } from '@angular/material/menu';
 import { DeletedComicsPipe } from './pipes/deleted-comics.pipe';
 import { MatProgressBarModule } from '@angular/material/progress-bar';
 import { ScrapingPageComponent } from '@app/library/pages/scraping-page/scraping-page.component';
-import { ComicBookModule } from '@app/comic-book/comic-book.module';
+import { ComicBookModule } from '@app/comic-books/comic-book.module';
 import { ArchiveTypePipe } from './pipes/archive-type.pipe';
 import { UnreadComicsPipe } from './pipes/unread-comics.pipe';
 import {
diff --git a/comixed-webui/src/app/library/models/duplicate-page.ts b/comixed-webui/src/app/library/models/duplicate-page.ts
index 84dba4a1ca..a4d9bced71 100644
--- a/comixed-webui/src/app/library/models/duplicate-page.ts
+++ b/comixed-webui/src/app/library/models/duplicate-page.ts
@@ -16,7 +16,7 @@
  * along with this program. If not, see <http://www.gnu.org/licenses>
  */
 
-import { Comic } from '../../comic-book/models/comic';
+import { Comic } from '../../comic-books/models/comic';
 
 export interface DuplicatePage {
   hash: string;
diff --git a/comixed-webui/src/app/library/models/net/convert-comics-request.ts b/comixed-webui/src/app/library/models/net/convert-comics-request.ts
index 5f8df1cd34..e652680fa8 100644
--- a/comixed-webui/src/app/library/models/net/convert-comics-request.ts
+++ b/comixed-webui/src/app/library/models/net/convert-comics-request.ts
@@ -16,7 +16,7 @@
  * along with this program. If not, see <http://www.gnu.org/licenses>
  */
 
-import { ArchiveType } from '../../../comic-book/models/archive-type.enum';
+import { ArchiveType } from '../../../comic-books/models/archive-type.enum';
 
 export interface ConvertComicsRequest {
   ids: number[];
diff --git a/comixed-webui/src/app/library/pages/duplicate-page-detail-page/duplicate-page-detail-page.component.spec.ts b/comixed-webui/src/app/library/pages/duplicate-page-detail-page/duplicate-page-detail-page.component.spec.ts
index d563f54c67..25e76f1acd 100644
--- a/comixed-webui/src/app/library/pages/duplicate-page-detail-page/duplicate-page-detail-page.component.spec.ts
+++ b/comixed-webui/src/app/library/pages/duplicate-page-detail-page/duplicate-page-detail-page.component.spec.ts
@@ -32,8 +32,8 @@ import { TranslateModule, TranslateService } from '@ngx-translate/core';
 import { TitleService } from '@app/core/services/title.service';
 import { MatToolbarModule } from '@angular/material/toolbar';
 import { MatIconModule } from '@angular/material/icon';
-import { ComicPageComponent } from '@app/comic-book/components/comic-page/comic-page.component';
-import { PageHashUrlPipe } from '@app/comic-book/pipes/page-hash-url.pipe';
+import { ComicPageComponent } from '@app/comic-books/components/comic-page/comic-page.component';
+import { PageHashUrlPipe } from '@app/comic-books/pipes/page-hash-url.pipe';
 import { MatTableModule } from '@angular/material/table';
 import { MatCardModule } from '@angular/material/card';
 import {
diff --git a/comixed-webui/src/app/library/pages/duplicate-page-detail-page/duplicate-page-detail-page.component.ts b/comixed-webui/src/app/library/pages/duplicate-page-detail-page/duplicate-page-detail-page.component.ts
index a4ef9fc587..1bb24587ff 100644
--- a/comixed-webui/src/app/library/pages/duplicate-page-detail-page/duplicate-page-detail-page.component.ts
+++ b/comixed-webui/src/app/library/pages/duplicate-page-detail-page/duplicate-page-detail-page.component.ts
@@ -30,7 +30,7 @@ import {
 } from '@app/library/selectors/duplicate-page-detail.selectors';
 import { setBusyState } from '@app/core/actions/busy.actions';
 import { MatTableDataSource } from '@angular/material/table';
-import { Comic } from '@app/comic-book/models/comic';
+import { Comic } from '@app/comic-books/models/comic';
 import { DuplicatePage } from '@app/library/models/duplicate-page';
 import { filter } from 'rxjs/operators';
 import { ConfirmationService } from '@app/core/services/confirmation.service';
diff --git a/comixed-webui/src/app/library/pages/duplicate-page-list-page/duplicate-page-list-page.component.spec.ts b/comixed-webui/src/app/library/pages/duplicate-page-list-page/duplicate-page-list-page.component.spec.ts
index 0ec00af60c..af990c038b 100644
--- a/comixed-webui/src/app/library/pages/duplicate-page-list-page/duplicate-page-list-page.component.spec.ts
+++ b/comixed-webui/src/app/library/pages/duplicate-page-list-page/duplicate-page-list-page.component.spec.ts
@@ -57,7 +57,7 @@ import { MatToolbarModule } from '@angular/material/toolbar';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { MatTableModule } from '@angular/material/table';
 import { MatCheckboxModule } from '@angular/material/checkbox';
-import { PageHashUrlPipe } from '@app/comic-book/pipes/page-hash-url.pipe';
+import { PageHashUrlPipe } from '@app/comic-books/pipes/page-hash-url.pipe';
 import { YesNoPipe } from '@app/core/pipes/yes-no.pipe';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 
diff --git a/comixed-webui/src/app/library/pages/library-page/library-page.component.spec.ts b/comixed-webui/src/app/library/pages/library-page/library-page.component.spec.ts
index 9f3022a5e5..4b195f5c8b 100644
--- a/comixed-webui/src/app/library/pages/library-page/library-page.component.spec.ts
+++ b/comixed-webui/src/app/library/pages/library-page/library-page.component.spec.ts
@@ -58,13 +58,13 @@ import { DeletedComicsPipe } from '@app/library/pipes/deleted-comics.pipe';
 import {
   COMIC_LIST_FEATURE_KEY,
   initialState as initialComicListState
-} from '@app/comic-book/reducers/comic-list.reducer';
-import { COMIC_1, COMIC_3 } from '@app/comic-book/comic-book.fixtures';
+} from '@app/comic-books/reducers/comic-list.reducer';
+import { COMIC_1, COMIC_3 } from '@app/comic-books/comic-book.fixtures';
 import { ArchiveTypePipe } from '@app/library/pipes/archive-type.pipe';
 import { MatSelectModule } from '@angular/material/select';
 import { MatOptionModule } from '@angular/material/core';
 import { QUERY_PARAM_ARCHIVE_TYPE } from '@app/library/library.constants';
-import { ArchiveType } from '@app/comic-book/models/archive-type.enum';
+import { ArchiveType } from '@app/comic-books/models/archive-type.enum';
 import { UnreadComicsPipe } from '@app/library/pipes/unread-comics.pipe';
 import {
   initialState as initialLastReadListState,
diff --git a/comixed-webui/src/app/library/pages/library-page/library-page.component.ts b/comixed-webui/src/app/library/pages/library-page/library-page.component.ts
index f289cf9534..eca51ed39f 100644
--- a/comixed-webui/src/app/library/pages/library-page/library-page.component.ts
+++ b/comixed-webui/src/app/library/pages/library-page/library-page.component.ts
@@ -17,7 +17,7 @@
  */
 
 import { Component, OnDestroy, OnInit } from '@angular/core';
-import { Comic } from '@app/comic-book/models/comic';
+import { Comic } from '@app/comic-books/models/comic';
 import { Subscription } from 'rxjs';
 import { LoggerService } from '@angular-ru/logger';
 import { Store } from '@ngrx/store';
@@ -31,8 +31,8 @@ import { setBusyState } from '@app/core/actions/busy.actions';
 import { selectUser } from '@app/user/selectors/user.selectors';
 import { isAdmin } from '@app/user/user.functions';
 import { ActivatedRoute, Router } from '@angular/router';
-import { selectComicList } from '@app/comic-book/selectors/comic-list.selectors';
-import { ArchiveType } from '@app/comic-book/models/archive-type.enum';
+import { selectComicList } from '@app/comic-books/selectors/comic-list.selectors';
+import { ArchiveType } from '@app/comic-books/models/archive-type.enum';
 import { QUERY_PARAM_ARCHIVE_TYPE } from '@app/library/library.constants';
 import { updateQueryParam } from '@app/core';
 import { LastRead } from '@app/last-read/models/last-read';
diff --git a/comixed-webui/src/app/library/pages/scraping-page/scraping-page.component.spec.ts b/comixed-webui/src/app/library/pages/scraping-page/scraping-page.component.spec.ts
index dfb6994a33..df73205148 100644
--- a/comixed-webui/src/app/library/pages/scraping-page/scraping-page.component.spec.ts
+++ b/comixed-webui/src/app/library/pages/scraping-page/scraping-page.component.spec.ts
@@ -22,7 +22,7 @@ import { LoggerModule } from '@angular-ru/logger';
 import { MockStore, provideMockStore } from '@ngrx/store/testing';
 import { TranslateModule, TranslateService } from '@ngx-translate/core';
 import { SelectedComicsComponent } from '@app/library/components/selected-comics/selected-comics.component';
-import { ComicEditComponent } from '@app/comic-book/components/comic-edit/comic-edit.component';
+import { ComicEditComponent } from '@app/comic-books/components/comic-edit/comic-edit.component';
 import {
   initialState as initialUserState,
   USER_FEATURE_KEY
@@ -33,7 +33,7 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import {
   initialState as initialScrapingState,
   SCRAPING_FEATURE_KEY
-} from '@app/comic-book/reducers/scraping.reducer';
+} from '@app/comic-books/reducers/scraping.reducer';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import {
   LIBRARY_FEATURE_KEY,
@@ -42,8 +42,8 @@ import {
 import { MatToolbarModule } from '@angular/material/toolbar';
 import { MatIconModule } from '@angular/material/icon';
 import { MatSelectModule } from '@angular/material/select';
-import { COMIC_2 } from '@app/comic-book/comic-book.fixtures';
-import { loadScrapingVolumes } from '@app/comic-book/actions/scraping.actions';
+import { COMIC_2 } from '@app/comic-books/comic-book.fixtures';
+import { loadScrapingVolumes } from '@app/comic-books/actions/scraping.actions';
 import { TitleService } from '@app/core/services/title.service';
 
 describe('ScrapingPageComponent', () => {
diff --git a/comixed-webui/src/app/library/pages/scraping-page/scraping-page.component.ts b/comixed-webui/src/app/library/pages/scraping-page/scraping-page.component.ts
index eb5ade4b82..2a6eee88a6 100644
--- a/comixed-webui/src/app/library/pages/scraping-page/scraping-page.component.ts
+++ b/comixed-webui/src/app/library/pages/scraping-page/scraping-page.component.ts
@@ -19,7 +19,7 @@
 import { Component, OnDestroy, OnInit } from '@angular/core';
 import { LoggerService } from '@angular-ru/logger';
 import { Subscription } from 'rxjs';
-import { Comic } from '@app/comic-book/models/comic';
+import { Comic } from '@app/comic-books/models/comic';
 import { Store } from '@ngrx/store';
 import { selectSelectedComics } from '@app/library/selectors/library.selectors';
 import { TranslateService } from '@ngx-translate/core';
@@ -32,13 +32,13 @@ import {
 } from '@app/library/library.constants';
 import { selectUser } from '@app/user/selectors/user.selectors';
 import { getUserPreference } from '@app/user';
-import { ScrapeEvent } from '@app/comic-book/models/ui/scrape-event';
-import { loadScrapingVolumes } from '@app/comic-book/actions/scraping.actions';
-import { ScrapingVolume } from '@app/comic-book/models/scraping-volume';
+import { ScrapeEvent } from '@app/comic-books/models/ui/scrape-event';
+import { loadScrapingVolumes } from '@app/comic-books/actions/scraping.actions';
+import { ScrapingVolume } from '@app/comic-books/models/scraping-volume';
 import {
   selectScrapingState,
   selectScrapingVolumes
-} from '@app/comic-book/selectors/scraping.selectors';
+} from '@app/comic-books/selectors/scraping.selectors';
 import { setBusyState } from '@app/core/actions/busy.actions';
 import { TitleService } from '@app/core/services/title.service';
 
diff --git a/comixed-webui/src/app/library/pipes/archive-type.pipe.spec.ts b/comixed-webui/src/app/library/pipes/archive-type.pipe.spec.ts
index 360ba1f106..cee8410ca6 100644
--- a/comixed-webui/src/app/library/pipes/archive-type.pipe.spec.ts
+++ b/comixed-webui/src/app/library/pipes/archive-type.pipe.spec.ts
@@ -17,8 +17,12 @@
  */
 
 import { ArchiveTypePipe } from './archive-type.pipe';
-import { COMIC_1, COMIC_2, COMIC_3 } from '@app/comic-book/comic-book.fixtures';
-import { ArchiveType } from '@app/comic-book/models/archive-type.enum';
+import {
+  COMIC_1,
+  COMIC_2,
+  COMIC_3
+} from '@app/comic-books/comic-book.fixtures';
+import { ArchiveType } from '@app/comic-books/models/archive-type.enum';
 
 describe('ArchiveTypePipe', () => {
   const CBZ1 = { ...COMIC_1, archiveType: ArchiveType.CBZ };
diff --git a/comixed-webui/src/app/library/pipes/archive-type.pipe.ts b/comixed-webui/src/app/library/pipes/archive-type.pipe.ts
index b2ed04671a..3ea413cdb8 100644
--- a/comixed-webui/src/app/library/pipes/archive-type.pipe.ts
+++ b/comixed-webui/src/app/library/pipes/archive-type.pipe.ts
@@ -17,8 +17,8 @@
  */
 
 import { Pipe, PipeTransform } from '@angular/core';
-import { Comic } from '@app/comic-book/models/comic';
-import { ArchiveType } from '@app/comic-book/models/archive-type.enum';
+import { Comic } from '@app/comic-books/models/comic';
+import { ArchiveType } from '@app/comic-books/models/archive-type.enum';
 
 @Pipe({
   name: 'archiveType'
diff --git a/comixed-webui/src/app/library/pipes/deleted-comics.pipe.spec.ts b/comixed-webui/src/app/library/pipes/deleted-comics.pipe.spec.ts
index f6870ff4f3..efeda0d834 100644
--- a/comixed-webui/src/app/library/pipes/deleted-comics.pipe.spec.ts
+++ b/comixed-webui/src/app/library/pipes/deleted-comics.pipe.spec.ts
@@ -22,8 +22,8 @@ import {
   COMIC_2,
   COMIC_3,
   COMIC_4
-} from '@app/comic-book/comic-book.fixtures';
-import { Comic } from '@app/comic-book/models/comic';
+} from '@app/comic-books/comic-book.fixtures';
+import { Comic } from '@app/comic-books/models/comic';
 
 describe('DeletedComicsPipe', () => {
   const DELETED_COMIC: Comic = {
diff --git a/comixed-webui/src/app/library/pipes/deleted-comics.pipe.ts b/comixed-webui/src/app/library/pipes/deleted-comics.pipe.ts
index 6033be825d..f3c97d39c3 100644
--- a/comixed-webui/src/app/library/pipes/deleted-comics.pipe.ts
+++ b/comixed-webui/src/app/library/pipes/deleted-comics.pipe.ts
@@ -17,7 +17,7 @@
  */
 
 import { Pipe, PipeTransform } from '@angular/core';
-import { Comic } from '@app/comic-book/models/comic';
+import { Comic } from '@app/comic-books/models/comic';
 
 @Pipe({
   name: 'deletedComics'
diff --git a/comixed-webui/src/app/library/pipes/unread-comics.pipe.spec.ts b/comixed-webui/src/app/library/pipes/unread-comics.pipe.spec.ts
index 6395c95c20..68b85b83bf 100644
--- a/comixed-webui/src/app/library/pipes/unread-comics.pipe.spec.ts
+++ b/comixed-webui/src/app/library/pipes/unread-comics.pipe.spec.ts
@@ -17,7 +17,11 @@
  */
 
 import { UnreadComicsPipe } from './unread-comics.pipe';
-import { COMIC_1, COMIC_2, COMIC_3 } from '@app/comic-book/comic-book.fixtures';
+import {
+  COMIC_1,
+  COMIC_2,
+  COMIC_3
+} from '@app/comic-books/comic-book.fixtures';
 import { LastRead } from '@app/last-read/models/last-read';
 
 describe('UnreadComicsPipe', () => {
diff --git a/comixed-webui/src/app/library/pipes/unread-comics.pipe.ts b/comixed-webui/src/app/library/pipes/unread-comics.pipe.ts
index 6bf71321f9..a56c3ec3d4 100644
--- a/comixed-webui/src/app/library/pipes/unread-comics.pipe.ts
+++ b/comixed-webui/src/app/library/pipes/unread-comics.pipe.ts
@@ -17,7 +17,7 @@
  */
 
 import { Pipe, PipeTransform } from '@angular/core';
-import { Comic } from '@app/comic-book/models/comic';
+import { Comic } from '@app/comic-books/models/comic';
 import { LastRead } from '@app/last-read/models/last-read';
 
 @Pipe({
diff --git a/comixed-webui/src/app/library/reducers/convert-comics.reducer.spec.ts b/comixed-webui/src/app/library/reducers/convert-comics.reducer.spec.ts
index 7f44ad00bf..359c6f910b 100644
--- a/comixed-webui/src/app/library/reducers/convert-comics.reducer.spec.ts
+++ b/comixed-webui/src/app/library/reducers/convert-comics.reducer.spec.ts
@@ -21,8 +21,12 @@ import {
   initialState,
   reducer
 } from './convert-comics.reducer';
-import { COMIC_1, COMIC_3, COMIC_5 } from '@app/comic-book/comic-book.fixtures';
-import { ArchiveType } from '@app/comic-book/models/archive-type.enum';
+import {
+  COMIC_1,
+  COMIC_3,
+  COMIC_5
+} from '@app/comic-books/comic-book.fixtures';
+import { ArchiveType } from '@app/comic-books/models/archive-type.enum';
 import {
   comicsConverting,
   convertComics,
diff --git a/comixed-webui/src/app/library/reducers/library.reducer.spec.ts b/comixed-webui/src/app/library/reducers/library.reducer.spec.ts
index f84f87e8a2..bdd9ae757a 100644
--- a/comixed-webui/src/app/library/reducers/library.reducer.spec.ts
+++ b/comixed-webui/src/app/library/reducers/library.reducer.spec.ts
@@ -17,7 +17,11 @@
  */
 
 import { initialState, LibraryState, reducer } from './library.reducer';
-import { COMIC_1, COMIC_2, COMIC_3 } from '@app/comic-book/comic-book.fixtures';
+import {
+  COMIC_1,
+  COMIC_2,
+  COMIC_3
+} from '@app/comic-books/comic-book.fixtures';
 import {
   deselectComics,
   readStateSet,
@@ -26,7 +30,7 @@ import {
   setReadStateFailed,
   updateComics
 } from '@app/library/actions/library.actions';
-import { Comic } from '@app/comic-book/models/comic';
+import { Comic } from '@app/comic-books/models/comic';
 
 describe('Library Reducer', () => {
   const COMIC = COMIC_1;
diff --git a/comixed-webui/src/app/library/reducers/library.reducer.ts b/comixed-webui/src/app/library/reducers/library.reducer.ts
index 82986804b4..30ae4f078d 100644
--- a/comixed-webui/src/app/library/reducers/library.reducer.ts
+++ b/comixed-webui/src/app/library/reducers/library.reducer.ts
@@ -25,7 +25,7 @@ import {
   setReadStateFailed,
   updateComics
 } from '../actions/library.actions';
-import { Comic } from '@app/comic-book/models/comic';
+import { Comic } from '@app/comic-books/models/comic';
 
 export const LIBRARY_FEATURE_KEY = 'library_state';
 
diff --git a/comixed-webui/src/app/library/reducers/rescan-comics.reducer.spec.ts b/comixed-webui/src/app/library/reducers/rescan-comics.reducer.spec.ts
index 7e4f3b9e42..6fcc1a330d 100644
--- a/comixed-webui/src/app/library/reducers/rescan-comics.reducer.spec.ts
+++ b/comixed-webui/src/app/library/reducers/rescan-comics.reducer.spec.ts
@@ -26,7 +26,11 @@ import {
   rescanComics,
   rescanComicsFailed
 } from '@app/library/actions/rescan-comics.actions';
-import { COMIC_1, COMIC_3, COMIC_5 } from '@app/comic-book/comic-book.fixtures';
+import {
+  COMIC_1,
+  COMIC_3,
+  COMIC_5
+} from '@app/comic-books/comic-book.fixtures';
 
 describe('RescanComics Reducer', () => {
   const COMICS = [COMIC_1, COMIC_3, COMIC_5];
diff --git a/comixed-webui/src/app/library/reducers/update-metadata.reducer.spec.ts b/comixed-webui/src/app/library/reducers/update-metadata.reducer.spec.ts
index 723e4d26c1..393ef2e744 100644
--- a/comixed-webui/src/app/library/reducers/update-metadata.reducer.spec.ts
+++ b/comixed-webui/src/app/library/reducers/update-metadata.reducer.spec.ts
@@ -21,7 +21,11 @@ import {
   reducer,
   UpdateMetadataState
 } from './update-metadata.reducer';
-import { COMIC_1, COMIC_3, COMIC_5 } from '@app/comic-book/comic-book.fixtures';
+import {
+  COMIC_1,
+  COMIC_3,
+  COMIC_5
+} from '@app/comic-books/comic-book.fixtures';
 import {
   metadataUpdating,
   updateMetadata,
diff --git a/comixed-webui/src/app/library/selectors/library.selectors.spec.ts b/comixed-webui/src/app/library/selectors/library.selectors.spec.ts
index a22bfaeee5..110da71eab 100644
--- a/comixed-webui/src/app/library/selectors/library.selectors.spec.ts
+++ b/comixed-webui/src/app/library/selectors/library.selectors.spec.ts
@@ -29,7 +29,11 @@ import {
   selectStories,
   selectTeams
 } from './library.selectors';
-import { COMIC_1, COMIC_2, COMIC_3 } from '@app/comic-book/comic-book.fixtures';
+import {
+  COMIC_1,
+  COMIC_2,
+  COMIC_3
+} from '@app/comic-books/comic-book.fixtures';
 
 describe('Library Selectors', () => {
   const COMIC = COMIC_1;
diff --git a/comixed-webui/src/app/library/services/library.service.spec.ts b/comixed-webui/src/app/library/services/library.service.spec.ts
index e3f06e0ce7..6862ad9628 100644
--- a/comixed-webui/src/app/library/services/library.service.spec.ts
+++ b/comixed-webui/src/app/library/services/library.service.spec.ts
@@ -23,7 +23,7 @@ import {
   COMIC_2,
   COMIC_3,
   COMIC_4
-} from '@app/comic-book/comic-book.fixtures';
+} from '@app/comic-books/comic-book.fixtures';
 import {
   HttpClientTestingModule,
   HttpTestingController
@@ -43,7 +43,7 @@ import { SetComicReadRequest } from '@app/library/models/net/set-comic-read-requ
 import { ConsolidateLibraryRequest } from '@app/library/models/net/consolidate-library-request';
 import { RescanComicsRequest } from '@app/library/models/net/rescan-comics-request';
 import { UpdateMetadataRequest } from '@app/library/models/net/update-metadata-request';
-import { ArchiveType } from '@app/comic-book/models/archive-type.enum';
+import { ArchiveType } from '@app/comic-books/models/archive-type.enum';
 import { ConvertComicsRequest } from '@app/library/models/net/convert-comics-request';
 
 describe('LibraryService', () => {
diff --git a/comixed-webui/src/app/library/services/library.service.ts b/comixed-webui/src/app/library/services/library.service.ts
index 86abf79147..32ba6672df 100644
--- a/comixed-webui/src/app/library/services/library.service.ts
+++ b/comixed-webui/src/app/library/services/library.service.ts
@@ -29,12 +29,12 @@ import {
   START_LIBRARY_CONSOLIDATION_URL,
   UPDATE_METADATA_URL
 } from '@app/library/library.constants';
-import { Comic } from '@app/comic-book/models/comic';
+import { Comic } from '@app/comic-books/models/comic';
 import { SetComicReadRequest } from '@app/library/models/net/set-comic-read-request';
 import { ConsolidateLibraryRequest } from '@app/library/models/net/consolidate-library-request';
 import { RescanComicsRequest } from '@app/library/models/net/rescan-comics-request';
 import { UpdateMetadataRequest } from '@app/library/models/net/update-metadata-request';
-import { ArchiveType } from '@app/comic-book/models/archive-type.enum';
+import { ArchiveType } from '@app/comic-books/models/archive-type.enum';
 import { ConvertComicsRequest } from '@app/library/models/net/convert-comics-request';
 
 @Injectable({
diff --git a/comixed-webui/src/app/lists/actions/reading-list-entries.actions.ts b/comixed-webui/src/app/lists/actions/reading-list-entries.actions.ts
index 8cd7a99c74..d57bd48e37 100644
--- a/comixed-webui/src/app/lists/actions/reading-list-entries.actions.ts
+++ b/comixed-webui/src/app/lists/actions/reading-list-entries.actions.ts
@@ -17,7 +17,7 @@
  */
 
 import { createAction, props } from '@ngrx/store';
-import { Comic } from '@app/comic-book/models/comic';
+import { Comic } from '@app/comic-books/models/comic';
 import { ReadingList } from '@app/lists/models/reading-list';
 
 export const addComicsToReadingList = createAction(
diff --git a/comixed-webui/src/app/lists/effects/reading-list-entries.effects.spec.ts b/comixed-webui/src/app/lists/effects/reading-list-entries.effects.spec.ts
index bbdbc20edd..8ac2fd1534 100644
--- a/comixed-webui/src/app/lists/effects/reading-list-entries.effects.spec.ts
+++ b/comixed-webui/src/app/lists/effects/reading-list-entries.effects.spec.ts
@@ -22,7 +22,7 @@ import { Observable, of, throwError } from 'rxjs';
 
 import { ReadingListEntriesEffects } from './reading-list-entries.effects';
 import { READING_LIST_3 } from '@app/lists/lists.fixtures';
-import { COMIC_1 } from '@app/comic-book/comic-book.fixtures';
+import { COMIC_1 } from '@app/comic-books/comic-book.fixtures';
 import { ReadingListService } from '@app/lists/services/reading-list.service';
 import { LoggerModule } from '@angular-ru/logger';
 import { TranslateModule } from '@ngx-translate/core';
diff --git a/comixed-webui/src/app/lists/models/reading-list.ts b/comixed-webui/src/app/lists/models/reading-list.ts
index 73d133ba2a..e764bb7e21 100644
--- a/comixed-webui/src/app/lists/models/reading-list.ts
+++ b/comixed-webui/src/app/lists/models/reading-list.ts
@@ -17,7 +17,7 @@
  */
 
 import { User } from '../../user/models/user';
-import { Comic } from '../../comic-book/models/comic';
+import { Comic } from '../../comic-books/models/comic';
 
 export interface ReadingList {
   id: number;
diff --git a/comixed-webui/src/app/lists/models/story-entry.ts b/comixed-webui/src/app/lists/models/story-entry.ts
index 09454d344d..5c773bf000 100644
--- a/comixed-webui/src/app/lists/models/story-entry.ts
+++ b/comixed-webui/src/app/lists/models/story-entry.ts
@@ -16,7 +16,7 @@
  * along with this program. If not, see <http://www.gnu.org/licenses>
  */
 
-import { Comic } from '@app/comic-book/models/comic';
+import { Comic } from '@app/comic-books/models/comic';
 
 export interface StoryEntry {
   id: number;
diff --git a/comixed-webui/src/app/lists/pages/reading-list-page/reading-list-page.component.spec.ts b/comixed-webui/src/app/lists/pages/reading-list-page/reading-list-page.component.spec.ts
index ea59824483..6e9a03a40d 100644
--- a/comixed-webui/src/app/lists/pages/reading-list-page/reading-list-page.component.spec.ts
+++ b/comixed-webui/src/app/lists/pages/reading-list-page/reading-list-page.component.spec.ts
@@ -43,7 +43,11 @@ import { READING_LIST_3 } from '@app/lists/lists.fixtures';
 import { ConfirmationService } from '@app/core/services/confirmation.service';
 import { Confirmation } from '@app/core/models/confirmation';
 import { ComicListViewComponent } from '@app/library/components/comic-list-view/comic-list-view.component';
-import { COMIC_1, COMIC_3, COMIC_5 } from '@app/comic-book/comic-book.fixtures';
+import {
+  COMIC_1,
+  COMIC_3,
+  COMIC_5
+} from '@app/comic-books/comic-book.fixtures';
 import { removeComicsFromReadingList } from '@app/lists/actions/reading-list-entries.actions';
 import {
   initialState as initialMessagingState,
diff --git a/comixed-webui/src/app/lists/pages/reading-list-page/reading-list-page.component.ts b/comixed-webui/src/app/lists/pages/reading-list-page/reading-list-page.component.ts
index c07401b8f0..1aed7eb72c 100644
--- a/comixed-webui/src/app/lists/pages/reading-list-page/reading-list-page.component.ts
+++ b/comixed-webui/src/app/lists/pages/reading-list-page/reading-list-page.component.ts
@@ -38,7 +38,7 @@ import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { filter } from 'rxjs/operators';
 import { TranslateService } from '@ngx-translate/core';
 import { ConfirmationService } from '@app/core/services/confirmation.service';
-import { Comic } from '@app/comic-book/models/comic';
+import { Comic } from '@app/comic-books/models/comic';
 import { removeComicsFromReadingList } from '@app/lists/actions/reading-list-entries.actions';
 import { selectMessagingState } from '@app/messaging/selectors/messaging.selectors';
 import {
diff --git a/comixed-webui/src/app/lists/reducers/reading-list-entries.reducer.spec.ts b/comixed-webui/src/app/lists/reducers/reading-list-entries.reducer.spec.ts
index 8bfe9f9451..03b6a1ac60 100644
--- a/comixed-webui/src/app/lists/reducers/reading-list-entries.reducer.spec.ts
+++ b/comixed-webui/src/app/lists/reducers/reading-list-entries.reducer.spec.ts
@@ -22,7 +22,7 @@ import {
   reducer
 } from './reading-list-entries.reducer';
 import { READING_LIST_3 } from '@app/lists/lists.fixtures';
-import { COMIC_1 } from '@app/comic-book/comic-book.fixtures';
+import { COMIC_1 } from '@app/comic-books/comic-book.fixtures';
 import {
   addComicsToReadingList,
   addComicsToReadingListFailed,
diff --git a/comixed-webui/src/app/lists/services/reading-list.service.spec.ts b/comixed-webui/src/app/lists/services/reading-list.service.spec.ts
index cc7a5fe920..5e08a8f63f 100644
--- a/comixed-webui/src/app/lists/services/reading-list.service.spec.ts
+++ b/comixed-webui/src/app/lists/services/reading-list.service.spec.ts
@@ -42,7 +42,7 @@ import {
   UPLOAD_READING_LIST_URL
 } from '@app/lists/lists.constants';
 import { LoggerModule } from '@angular-ru/logger';
-import { COMIC_1 } from '@app/comic-book/comic-book.fixtures';
+import { COMIC_1 } from '@app/comic-books/comic-book.fixtures';
 import { AddComicsToReadingListRequest } from '@app/lists/models/net/add-comics-to-reading-list-request';
 import { RemoveComicsFromReadingListRequest } from '@app/lists/models/net/remove-comics-from-reading-list-request';
 import { DownloadDocument } from '@app/core/models/download-document';
diff --git a/comixed-webui/src/app/lists/services/reading-list.service.ts b/comixed-webui/src/app/lists/services/reading-list.service.ts
index f59cadab1c..f51ba97df4 100644
--- a/comixed-webui/src/app/lists/services/reading-list.service.ts
+++ b/comixed-webui/src/app/lists/services/reading-list.service.ts
@@ -35,7 +35,7 @@ import {
   UPLOAD_READING_LIST_URL
 } from '@app/lists/lists.constants';
 import { ReadingList } from '@app/lists/models/reading-list';
-import { Comic } from '@app/comic-book/models/comic';
+import { Comic } from '@app/comic-books/models/comic';
 import { AddComicsToReadingListRequest } from '@app/lists/models/net/add-comics-to-reading-list-request';
 import { RemoveComicsFromReadingListRequest } from '@app/lists/models/net/remove-comics-from-reading-list-request';
 import { DeleteReadingListsRequest } from '@app/lists/models/net/delete-reading-lists-request';
diff --git a/comixed-webui/src/styles.scss b/comixed-webui/src/styles.scss
index 470629e4e7..8f55bddf4c 100644
--- a/comixed-webui/src/styles.scss
+++ b/comixed-webui/src/styles.scss
@@ -58,6 +58,10 @@ $cx-selected-comic-color: #ffffff;
   width: 80% !important;
 }
 
+.cx-width-80 {
+  width: 80% !important;
+}
+
 .cx-width-100 {
   width: 100% !important;
 }
@@ -247,12 +251,17 @@ th {
   text-align: right !important;
 }
 
-.cx-comic-detail-card-container {
+.cx-detail-card-container {
   display: flex;
   flex-wrap: wrap;
   flex-direction: row;
 }
 
+.cx-detail-card {
+  position: relative;
+  display: inline-block;
+}
+
 .cx-vertical-scrolling {
   overflow-y: scroll;
 }