diff --git a/comixed-webui/src/app/comic-books/comic-books.module.ts b/comixed-webui/src/app/comic-books/comic-books.module.ts
index 7cd13288c..1f5a613a4 100644
--- a/comixed-webui/src/app/comic-books/comic-books.module.ts
+++ b/comixed-webui/src/app/comic-books/comic-books.module.ts
@@ -26,9 +26,9 @@ import { ComicEditComponent } from './components/comic-edit/comic-edit.component
 import { ComicOverviewComponent } from './components/comic-overview/comic-overview.component';
 import { ComicPagesComponent } from './components/comic-pages/comic-pages.component';
 import { ComicPageComponent } from './components/comic-page/comic-page.component';
-import { ComicScrapingComponent } from './components/comic-scraping/comic-scraping.component';
+import { ComicMetadataComponent } from './components/comic-metadata/comic-metadata.component';
 import { ComicStoryComponent } from './components/comic-story/comic-story.component';
-import { ScrapingIssueDetailComponent } from './components/scraping-issue-detail/scraping-issue-detail.component';
+import { IssueMetadataDetailComponent } from './components/issue-metadata-detail/issue-metadata-detail.component';
 import { MatCardModule } from '@angular/material/card';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { MatIconModule } from '@angular/material/icon';
@@ -93,9 +93,9 @@ import { DragDropModule } from '@angular/cdk/drag-drop';
     ComicOverviewComponent,
     ComicPagesComponent,
     ComicPageComponent,
-    ComicScrapingComponent,
+    ComicMetadataComponent,
     ComicStoryComponent,
-    ScrapingIssueDetailComponent,
+    IssueMetadataDetailComponent,
     ComicDetailCardComponent,
     ComicCoverUrlPipe,
     ComicPageUrlPipe,
@@ -151,7 +151,7 @@ import { DragDropModule } from '@angular/cdk/drag-drop';
     CommonModule,
     ComicPageComponent,
     ComicEditComponent,
-    ComicScrapingComponent,
+    ComicMetadataComponent,
     ComicDetailCardComponent,
     ComicTitlePipe,
     ComicCoverUrlPipe,
diff --git a/comixed-webui/src/app/comic-books/components/comic-edit/comic-edit.component.html b/comixed-webui/src/app/comic-books/components/comic-edit/comic-edit.component.html
index 5975c4cb8..16792e168 100644
--- a/comixed-webui/src/app/comic-books/components/comic-edit/comic-edit.component.html
+++ b/comixed-webui/src/app/comic-books/components/comic-edit/comic-edit.component.html
@@ -1,4 +1,4 @@
-<mat-toolbar class="cx-primary-light-background">
+<mat-toolbar class="cx-accent-light-background">
   <button
     id="scrape-filename"
     class="cx-toolbar-button cx-margin-left-5"
diff --git a/comixed-webui/src/app/comic-books/components/comic-scraping/comic-scraping.component.html b/comixed-webui/src/app/comic-books/components/comic-metadata/comic-metadata.component.html
similarity index 79%
rename from comixed-webui/src/app/comic-books/components/comic-scraping/comic-scraping.component.html
rename to comixed-webui/src/app/comic-books/components/comic-metadata/comic-metadata.component.html
index 205961253..a21c59f05 100644
--- a/comixed-webui/src/app/comic-books/components/comic-scraping/comic-scraping.component.html
+++ b/comixed-webui/src/app/comic-books/components/comic-metadata/comic-metadata.component.html
@@ -1,12 +1,12 @@
-<mat-toolbar class="cx-primary-light-background">
+<mat-toolbar class="cx-accent-light-background">
   <mat-paginator
-    class="cx-primary-light-background cx-height-100"
+    class="cx-accent-light-background cx-height-100"
     *ngIf="!!comic"
-    [pageSizeOptions]="[5, 10, 20]"
+    [pageSizeOptions]="pageSizeOptions"
     showFirstLastButtons
   ></mat-paginator>
   <div class="cx-spacer"></div>
-  <mat-form-field appearance="fill" class="cx-width-100">
+  <mat-form-field appearance="standard" class="cx-width-50">
     <input
       #filterInput
       id="filter-input"
@@ -32,13 +32,14 @@
   <div fxFlex.gt-sm="75%" fxFlex.sm="100%">
     <mat-table
       aria-label="Comic files available for import"
+      class="cx-width-100"
       [dataSource]="dataSource"
       matSort
       matSortActive="sortOrder"
       matSortDirection="desc"
       matSortDisableClear="false"
     >
-      <ng-container matColumnDef="sortOrder">
+      <ng-container matColumnDef="matchability">
         <mat-header-cell *matHeaderCellDef mat-sort-header>
           {{ "scraping.label.matchability" | translate }}
         </mat-header-cell>
@@ -60,7 +61,9 @@
           {{ "scraping.label.publisher" | translate }}
         </mat-header-cell>
         <mat-cell *matCellDef="let element">
-          {{ element.item.publisher }}
+          <div class="cx-width-100 cx-text-nowrap">
+            {{ element.item.publisher }}
+          </div>
         </mat-cell>
       </ng-container>
 
@@ -69,25 +72,29 @@
           {{ "scraping.label.series-name" | translate }}
         </mat-header-cell>
         <mat-cell *matCellDef="let element">
-          {{ element.item.name }}
+          <div class="cx-width-100 cx-text-nowrap">{{ element.item.name }}</div>
         </mat-cell>
       </ng-container>
 
-      <ng-container matColumnDef="startYear">
+      <ng-container matColumnDef="start-year">
         <mat-header-cell *matHeaderCellDef mat-sort-header>
           {{ "scraping.label.start-year" | translate }}
         </mat-header-cell>
         <mat-cell *matCellDef="let element">
-          {{ element.item.startYear }}
+          <div class="cx-width-100 cx-text-nowrap">
+            {{ element.item.startYear }}
+          </div>
         </mat-cell>
       </ng-container>
 
-      <ng-container matColumnDef="issueCount">
+      <ng-container matColumnDef="issue-count">
         <mat-header-cell *matHeaderCellDef mat-sort-header>
           {{ "scraping.label.issue-count" | translate }}
         </mat-header-cell>
         <mat-cell *matCellDef="let element">
-          {{ element.item.issueCount }}
+          <div class="cx-width-100 cx-text-nowrap">
+            {{ element.item.issueCount }}
+          </div>
         </mat-cell>
       </ng-container>
 
@@ -120,8 +127,8 @@
     </mat-table>
   </div>
   <div fxFlex.gt-xs="25%" fxFlex.sm="100%">
-    <div *ngIf="!!issue" id="cx-scraping-issue-detail-content">
-      <cx-scraping-issue-detail [issue]="issue"></cx-scraping-issue-detail>
+    <div *ngIf="!!issue" id="cx-issue-metadata-detail-content">
+      <cx-issue-metadata-detail [issue]="issue"></cx-issue-metadata-detail>
     </div>
   </div>
 </div>
diff --git a/comixed-webui/src/app/comic-books/components/comic-scraping/comic-scraping.component.scss b/comixed-webui/src/app/comic-books/components/comic-metadata/comic-metadata.component.scss
similarity index 61%
rename from comixed-webui/src/app/comic-books/components/comic-scraping/comic-scraping.component.scss
rename to comixed-webui/src/app/comic-books/components/comic-metadata/comic-metadata.component.scss
index afaec7c09..dd02c215b 100644
--- a/comixed-webui/src/app/comic-books/components/comic-scraping/comic-scraping.component.scss
+++ b/comixed-webui/src/app/comic-books/components/comic-metadata/comic-metadata.component.scss
@@ -1,11 +1,11 @@
 @import 'styles';
 
-#cx-scraping-issue-detail-content {
+#cx-issue-metadata-detail-content {
 }
 
 .mat-column-matchability {
-  width: $cx-column-medium;
-  max-width: $cx-column-medium;
+  width: $cx-column-small;
+  max-width: $cx-column-small;
   resize: none;
 }
 
@@ -13,13 +13,27 @@
   width: $cx-column-large;
   max-width: $cx-column-large;
   resize: none;
-  overflow: hidden;
-  text-overflow: ellipsis;
 }
 
 .mat-column-name {
-  overflow: hidden;
-  text-overflow: ellipsis;
+}
+
+.mat-column-start-year {
+  width: $cx-column-medium;
+  max-width: $cx-column-medium;
+  resize: none;
+}
+
+.mat-column-issue-count {
+  width: $cx-column-medium;
+  max-width: $cx-column-medium;
+  resize: none;
+}
+
+.mat-column-issue-action {
+  width: $cx-column-small;
+  max-width: $cx-column-small;
+  resize: none;
 }
 
 .mat-column-startYear {
diff --git a/comixed-webui/src/app/comic-books/components/comic-scraping/comic-scraping.component.spec.ts b/comixed-webui/src/app/comic-books/components/comic-metadata/comic-metadata.component.spec.ts
similarity index 95%
rename from comixed-webui/src/app/comic-books/components/comic-scraping/comic-scraping.component.spec.ts
rename to comixed-webui/src/app/comic-books/components/comic-metadata/comic-metadata.component.spec.ts
index 55c2ac6c3..29840f8d1 100644
--- a/comixed-webui/src/app/comic-books/components/comic-scraping/comic-scraping.component.spec.ts
+++ b/comixed-webui/src/app/comic-books/components/comic-metadata/comic-metadata.component.spec.ts
@@ -18,12 +18,12 @@
 
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import {
-  ComicScrapingComponent,
+  ComicMetadataComponent,
   EXACT_MATCH,
   MATCHABILITY,
   NEAR_MATCH,
   NO_MATCH
-} from './comic-scraping.component';
+} from './comic-metadata.component';
 import { LoggerModule } from '@angular-ru/cdk/logger';
 import { TranslateModule } from '@ngx-translate/core';
 import { MockStore, provideMockStore } from '@ngrx/store/testing';
@@ -49,7 +49,7 @@ import {
 import { deselectComics } from '@app/library/actions/library.actions';
 import { SortableListItem } from '@app/core/models/ui/sortable-list-item';
 import { MatTooltipModule } from '@angular/material/tooltip';
-import { ScrapingIssueDetailComponent } from '@app/comic-books/components/scraping-issue-detail/scraping-issue-detail.component';
+import { IssueMetadataDetailComponent } from '@app/comic-books/components/issue-metadata-detail/issue-metadata-detail.component';
 import { MatInputModule } from '@angular/material/input';
 import {
   Confirmation,
@@ -75,15 +75,15 @@ describe('ComicScrapingComponent', () => {
   const METADATA_SOURCE = METADATA_SOURCE_1;
   const initialState = { [METADATA_FEATURE_KEY]: { ...initialScrapingState } };
 
-  let component: ComicScrapingComponent;
-  let fixture: ComponentFixture<ComicScrapingComponent>;
+  let component: ComicMetadataComponent;
+  let fixture: ComponentFixture<ComicMetadataComponent>;
   let store: MockStore<any>;
   let confirmationService: ConfirmationService;
 
   beforeEach(
     waitForAsync(() => {
       TestBed.configureTestingModule({
-        declarations: [ComicScrapingComponent, ScrapingIssueDetailComponent],
+        declarations: [ComicMetadataComponent, IssueMetadataDetailComponent],
         imports: [
           NoopAnimationsModule,
           LoggerModule.forRoot(),
@@ -101,7 +101,7 @@ describe('ComicScrapingComponent', () => {
         providers: [provideMockStore({ initialState }), ConfirmationService]
       }).compileComponents();
 
-      fixture = TestBed.createComponent(ComicScrapingComponent);
+      fixture = TestBed.createComponent(ComicMetadataComponent);
       component = fixture.componentInstance;
       component.comicSeriesName = SCRAPING_VOLUME.name;
       component.comicVolume = SCRAPING_VOLUME.startYear;
@@ -226,13 +226,13 @@ describe('ComicScrapingComponent', () => {
 
     it('uses the start year', () => {
       expect(
-        component.dataSource.sortingDataAccessor(ELEMENT, 'startYear')
+        component.dataSource.sortingDataAccessor(ELEMENT, 'start-year')
       ).toEqual(SCRAPING_VOLUME.startYear);
     });
 
     it('uses the issue count', () => {
       expect(
-        component.dataSource.sortingDataAccessor(ELEMENT, 'issueCount')
+        component.dataSource.sortingDataAccessor(ELEMENT, 'issue-count')
       ).toEqual(SCRAPING_VOLUME.issueCount);
     });
   });
diff --git a/comixed-webui/src/app/comic-books/components/comic-scraping/comic-scraping.component.ts b/comixed-webui/src/app/comic-books/components/comic-metadata/comic-metadata.component.ts
similarity index 92%
rename from comixed-webui/src/app/comic-books/components/comic-scraping/comic-scraping.component.ts
rename to comixed-webui/src/app/comic-books/components/comic-metadata/comic-metadata.component.ts
index c442752b1..8d67c6536 100644
--- a/comixed-webui/src/app/comic-books/components/comic-scraping/comic-scraping.component.ts
+++ b/comixed-webui/src/app/comic-books/components/comic-metadata/comic-metadata.component.ts
@@ -49,8 +49,9 @@ import { SortableListItem } from '@app/core/models/ui/sortable-list-item';
 import { setBusyState } from '@app/core/actions/busy.actions';
 import { ConfirmationService } from '@tragically-slick/confirmation';
 import { MetadataSource } from '@app/comic-metadata/models/metadata-source';
+import { PAGE_SIZE_OPTIONS } from '@app/library/library.constants';
 
-export const MATCHABILITY = 'sortOrder';
+export const MATCHABILITY = 'matchability';
 export const EXACT_MATCH = 2;
 export const EXACT_MATCH_TEXT = 'scraping.text.exact-match';
 export const NEAR_MATCH = 1;
@@ -59,14 +60,16 @@ export const NO_MATCH = 0;
 export const NO_MATCH_TEXT = 'scraping.text.no-match';
 
 @Component({
-  selector: 'cx-comic-scraping',
-  templateUrl: './comic-scraping.component.html',
-  styleUrls: ['./comic-scraping.component.scss']
+  selector: 'cx-comic-metadata',
+  templateUrl: './comic-metadata.component.html',
+  styleUrls: ['./comic-metadata.component.scss']
 })
-export class ComicScrapingComponent implements OnDestroy, AfterViewInit {
+export class ComicMetadataComponent implements OnDestroy, AfterViewInit {
   @ViewChild(MatPaginator) paginator: MatPaginator;
   @ViewChild(MatSort) sort: MatSort;
 
+  readonly pageSizeOptions = PAGE_SIZE_OPTIONS;
+
   @Input() comic: Comic;
   @Input() metadataSource: MetadataSource;
   @Input() comicSeriesName: string;
@@ -88,8 +91,8 @@ export class ComicScrapingComponent implements OnDestroy, AfterViewInit {
     MATCHABILITY,
     'publisher',
     'name',
-    'startYear',
-    'issueCount',
+    'start-year',
+    'issue-count',
     'action'
   ];
 
@@ -148,6 +151,10 @@ export class ComicScrapingComponent implements OnDestroy, AfterViewInit {
       switch (property) {
         case MATCHABILITY:
           return element.sortOrder;
+        case 'start-year':
+          return element.item.startYear;
+        case 'issue-count':
+          return element.item.issueCount;
         default:
           return element.item[property];
       }
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
index 68c28d1ee..da1de1b27 100644
--- 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
@@ -1,5 +1,5 @@
 <mat-card class="cx-width-100">
-  <mat-card-title>{{ page?.filename }}</mat-card-title>
+  <mat-card-title *ngIf="!!page">{{ page?.filename }}</mat-card-title>
   <mat-card-content>
     <div class="cx-detail-card cx-padding-2 cx-margin-2">
       <img
diff --git a/comixed-webui/src/app/comic-books/components/issue-metadata-detail/issue-metadata-detail.component.html b/comixed-webui/src/app/comic-books/components/issue-metadata-detail/issue-metadata-detail.component.html
new file mode 100644
index 000000000..5c820ff89
--- /dev/null
+++ b/comixed-webui/src/app/comic-books/components/issue-metadata-detail/issue-metadata-detail.component.html
@@ -0,0 +1,20 @@
+<mat-card>
+  <mat-card-title [matTooltip]="issue | issueMetadataTitle">
+    <div class="cx-text-nowrap">
+      {{ issue | issueMetadataTitle }}
+    </div>
+  </mat-card-title>
+  <mat-card-subtitle>
+    <div class="cx-text-nowrap cx-width-100">
+      {{ issue.coverDate | date: "MMMM y" }}
+    </div>
+  </mat-card-subtitle>
+  <mat-card-content class="cx-padding-none cx-margin-none">
+    <img
+      [src]="issue.coverUrl"
+      [alt]="issue.coverUrl"
+      [style.width]="'100%'"
+      [style.height]="'auto'"
+    />
+  </mat-card-content>
+</mat-card>
diff --git a/comixed-webui/src/app/comic-books/components/scraping-issue-detail/scraping-issue-detail.component.scss b/comixed-webui/src/app/comic-books/components/issue-metadata-detail/issue-metadata-detail.component.scss
similarity index 100%
rename from comixed-webui/src/app/comic-books/components/scraping-issue-detail/scraping-issue-detail.component.scss
rename to comixed-webui/src/app/comic-books/components/issue-metadata-detail/issue-metadata-detail.component.scss
diff --git a/comixed-webui/src/app/comic-books/components/scraping-issue-detail/scraping-issue-detail.component.spec.ts b/comixed-webui/src/app/comic-books/components/issue-metadata-detail/issue-metadata-detail.component.spec.ts
similarity index 88%
rename from comixed-webui/src/app/comic-books/components/scraping-issue-detail/scraping-issue-detail.component.spec.ts
rename to comixed-webui/src/app/comic-books/components/issue-metadata-detail/issue-metadata-detail.component.spec.ts
index e003435c8..f7119dbb3 100644
--- a/comixed-webui/src/app/comic-books/components/scraping-issue-detail/scraping-issue-detail.component.spec.ts
+++ b/comixed-webui/src/app/comic-books/components/issue-metadata-detail/issue-metadata-detail.component.spec.ts
@@ -17,7 +17,7 @@
  */
 
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
-import { ScrapingIssueDetailComponent } from './scraping-issue-detail.component';
+import { IssueMetadataDetailComponent } from './issue-metadata-detail.component';
 import { LoggerModule } from '@angular-ru/cdk/logger';
 import { IssueMetadataTitlePipe } from '@app/comic-metadata/pipes/issue-metadata-title.pipe';
 import { TranslateModule } from '@ngx-translate/core';
@@ -34,21 +34,21 @@ import { USER_READER } from '@app/user/user.fixtures';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { SCRAPING_ISSUE_1 } from '@app/comic-metadata/comic-metadata.fixtures';
 
-describe('ScrapingIssueDetailComponent', () => {
+describe('IssueMetadataDetailComponent', () => {
   const SCRAPING_ISSUE = SCRAPING_ISSUE_1;
   const USER = USER_READER;
   const initialState = {
     [USER_FEATURE_KEY]: { ...initialUserState, user: USER }
   };
 
-  let component: ScrapingIssueDetailComponent;
-  let fixture: ComponentFixture<ScrapingIssueDetailComponent>;
+  let component: IssueMetadataDetailComponent;
+  let fixture: ComponentFixture<IssueMetadataDetailComponent>;
 
   beforeEach(
     waitForAsync(() => {
       TestBed.configureTestingModule({
         declarations: [
-          ScrapingIssueDetailComponent,
+          IssueMetadataDetailComponent,
           ComicPageComponent,
           IssueMetadataTitlePipe
         ],
@@ -63,7 +63,7 @@ describe('ScrapingIssueDetailComponent', () => {
         providers: [provideMockStore({ initialState })]
       }).compileComponents();
 
-      fixture = TestBed.createComponent(ScrapingIssueDetailComponent);
+      fixture = TestBed.createComponent(IssueMetadataDetailComponent);
       component = fixture.componentInstance;
       component.issue = SCRAPING_ISSUE;
       fixture.detectChanges();
diff --git a/comixed-webui/src/app/comic-books/components/scraping-issue-detail/scraping-issue-detail.component.ts b/comixed-webui/src/app/comic-books/components/issue-metadata-detail/issue-metadata-detail.component.ts
similarity index 77%
rename from comixed-webui/src/app/comic-books/components/scraping-issue-detail/scraping-issue-detail.component.ts
rename to comixed-webui/src/app/comic-books/components/issue-metadata-detail/issue-metadata-detail.component.ts
index 923a884a5..8e7c88625 100644
--- a/comixed-webui/src/app/comic-books/components/scraping-issue-detail/scraping-issue-detail.component.ts
+++ b/comixed-webui/src/app/comic-books/components/issue-metadata-detail/issue-metadata-detail.component.ts
@@ -18,12 +18,13 @@
 
 import { Component, Input } from '@angular/core';
 import { IssueMetadata } from '@app/comic-metadata/models/issue-metadata';
+import { PAGE_SIZE_OPTIONS } from '@app/library/library.constants';
 
 @Component({
-  selector: 'cx-scraping-issue-detail',
-  templateUrl: './scraping-issue-detail.component.html',
-  styleUrls: ['./scraping-issue-detail.component.scss']
+  selector: 'cx-issue-metadata-detail',
+  templateUrl: './issue-metadata-detail.component.html',
+  styleUrls: ['./issue-metadata-detail.component.scss']
 })
-export class ScrapingIssueDetailComponent {
+export class IssueMetadataDetailComponent {
   @Input() issue: IssueMetadata;
 }
diff --git a/comixed-webui/src/app/comic-books/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
deleted file mode 100644
index 3ae22fe4b..000000000
--- a/comixed-webui/src/app/comic-books/components/scraping-issue-detail/scraping-issue-detail.component.html
+++ /dev/null
@@ -1,12 +0,0 @@
-<mat-card class="cx-primary-light-background">
-  <mat-card-title>{{ issue | issueMetadataTitle }}</mat-card-title>
-  <mat-card-subtitle>
-    {{
-      "scraping.scraping-issue-detail-subtitle"
-        | translate: { date: issue.coverDate | date: "MMMM y" }
-    }}
-  </mat-card-subtitle>
-  <mat-card-content>
-    <cx-comic-page [imageUrl]="issue.coverUrl"></cx-comic-page>
-  </mat-card-content>
-</mat-card>
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
index aabf37807..0d0bc7b66 100644
--- 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
@@ -117,7 +117,14 @@
   </button>
 </mat-toolbar>
 
-<h2 *ngIf="!!comic">{{ comic | comicTitle }}</h2>
+<div
+  *ngIf="!!comic"
+  class="cx-width-100 cx-padding-5 cx-accent-dark-background"
+>
+  <h1>
+    {{ comic | comicTitle }}
+  </h1>
+</div>
 
 <div *ngIf="!!comic" class="cx-detail-card-container">
   <div
@@ -200,7 +207,7 @@ <h2 *ngIf="!!comic">{{ comic | comicTitle }}</h2>
             )
           "
         ></cx-comic-edit>
-        <cx-comic-scraping
+        <cx-comic-metadata
           *ngIf="volumes.length > 0"
           [comic]="comic"
           [metadataSource]="metadataSource"
@@ -210,7 +217,7 @@ <h2 *ngIf="!!comic">{{ comic | comicTitle }}</h2>
           [skipCache]="skipCache"
           [pageSize]="pageSize"
           [volumes]="volumes"
-        ></cx-comic-scraping>
+        ></cx-comic-metadata>
       </mat-tab>
     </mat-tab-group>
   </div>
diff --git a/comixed-webui/src/app/library/pages/scraping-page/scraping-page.component.html b/comixed-webui/src/app/library/pages/scraping-page/scraping-page.component.html
index 9d10d565b..29b7cd7f8 100644
--- a/comixed-webui/src/app/library/pages/scraping-page/scraping-page.component.html
+++ b/comixed-webui/src/app/library/pages/scraping-page/scraping-page.component.html
@@ -31,7 +31,7 @@ <h3 class="cx-text-nowrap">
       [multimode]="true"
       (scrape)="onScrape($event)"
     ></cx-comic-edit>
-    <cx-comic-scraping
+    <cx-comic-metadata
       *ngIf="scrapingVolumes.length > 0"
       [comic]="currentComic"
       [metadataSource]="selectedMetadataSource"
@@ -42,6 +42,6 @@ <h3 class="cx-text-nowrap">
       [pageSize]="pageSize"
       [multimode]="true"
       [volumes]="scrapingVolumes"
-    ></cx-comic-scraping>
+    ></cx-comic-metadata>
   </div>
 </div>
diff --git a/comixed-webui/src/assets/i18n/de/comic-metadata.json b/comixed-webui/src/assets/i18n/de/comic-metadata.json
index 3dfcff2cc..65f88b7d9 100644
--- a/comixed-webui/src/assets/i18n/de/comic-metadata.json
+++ b/comixed-webui/src/assets/i18n/de/comic-metadata.json
@@ -87,7 +87,6 @@
     },
     "scrape-comic-confirmation-title": "Replace Comic Data",
     "scrape-comic-confirmation-message": "Are you sure you want to replace the details for this comic?",
-    "scraping-issue-detail-subtitle": "Cover Date: {date}",
     "start-scraping": {
       "confirmation-title": "Scrape Comics",
       "confirmation-message": "Are you sure you want to replace the details for the {count, plural, =1{comic} other{# comics}} selected comics?"
diff --git a/comixed-webui/src/assets/i18n/en/comic-metadata.json b/comixed-webui/src/assets/i18n/en/comic-metadata.json
index 3dfcff2cc..65f88b7d9 100644
--- a/comixed-webui/src/assets/i18n/en/comic-metadata.json
+++ b/comixed-webui/src/assets/i18n/en/comic-metadata.json
@@ -87,7 +87,6 @@
     },
     "scrape-comic-confirmation-title": "Replace Comic Data",
     "scrape-comic-confirmation-message": "Are you sure you want to replace the details for this comic?",
-    "scraping-issue-detail-subtitle": "Cover Date: {date}",
     "start-scraping": {
       "confirmation-title": "Scrape Comics",
       "confirmation-message": "Are you sure you want to replace the details for the {count, plural, =1{comic} other{# comics}} selected comics?"
diff --git a/comixed-webui/src/assets/i18n/es/comic-metadata.json b/comixed-webui/src/assets/i18n/es/comic-metadata.json
index ff0d5afe4..6affefc31 100644
--- a/comixed-webui/src/assets/i18n/es/comic-metadata.json
+++ b/comixed-webui/src/assets/i18n/es/comic-metadata.json
@@ -87,7 +87,6 @@
     },
     "scrape-comic-confirmation-title": "Replace Comic Data",
     "scrape-comic-confirmation-message": "Are you sure you want to replace the details for this comic?",
-    "scraping-issue-detail-subtitle": "Cover Date: {date}",
     "start-scraping": {
       "confirmation-title": "Scrape Comics",
       "confirmation-message": "Are you sure you want to replace the details for the {count, plural, =1{comic} other{# comics}} selected comics?"
diff --git a/comixed-webui/src/assets/i18n/fr/comic-metadata.json b/comixed-webui/src/assets/i18n/fr/comic-metadata.json
index e695ae275..4b5b54e63 100644
--- a/comixed-webui/src/assets/i18n/fr/comic-metadata.json
+++ b/comixed-webui/src/assets/i18n/fr/comic-metadata.json
@@ -87,7 +87,6 @@
     },
     "scrape-comic-confirmation-title": "Replace Comic Data",
     "scrape-comic-confirmation-message": "Are you sure you want to replace the details for this comic?",
-    "scraping-issue-detail-subtitle": "Cover Date: {date}",
     "start-scraping": {
       "confirmation-title": "Scrape Comics",
       "confirmation-message": "Are you sure you want to replace the details for the {count, plural, =1{comic} other{# comics}} selected comics?"
diff --git a/comixed-webui/src/assets/i18n/pt/comic-metadata.json b/comixed-webui/src/assets/i18n/pt/comic-metadata.json
index 3dfcff2cc..65f88b7d9 100644
--- a/comixed-webui/src/assets/i18n/pt/comic-metadata.json
+++ b/comixed-webui/src/assets/i18n/pt/comic-metadata.json
@@ -87,7 +87,6 @@
     },
     "scrape-comic-confirmation-title": "Replace Comic Data",
     "scrape-comic-confirmation-message": "Are you sure you want to replace the details for this comic?",
-    "scraping-issue-detail-subtitle": "Cover Date: {date}",
     "start-scraping": {
       "confirmation-title": "Scrape Comics",
       "confirmation-message": "Are you sure you want to replace the details for the {count, plural, =1{comic} other{# comics}} selected comics?"
diff --git a/comixed-webui/src/styles.scss b/comixed-webui/src/styles.scss
index 284752cd8..8eaf9bd89 100644
--- a/comixed-webui/src/styles.scss
+++ b/comixed-webui/src/styles.scss
@@ -15,6 +15,7 @@ h3,
 h4 {
   text-transform: uppercase;
   font-weight: bold !important;
+  text-align: center;
 }
 
 // colors
@@ -145,6 +146,10 @@ $cx-selected-comic-color: #ffffff;
   padding-bottom: 25px !important;
 }
 
+.cx-padding-none {
+  padding: 0px !important;
+}
+
 .cx-padding-2 {
   padding: 2px !important;
 }
@@ -181,6 +186,10 @@ $cx-selected-comic-color: #ffffff;
   margin-bottom: 75px !important;
 }
 
+.cx-margin-none {
+  margin: 0px !important;
+}
+
 .cx-margin-2 {
   margin: 2px;
 }
@@ -341,7 +350,9 @@ th {
 }
 
 @keyframes cx-button-spinner {
-  to {transform: rotate(360deg);}
+  to {
+    transform: rotate(360deg);
+  }
 }
 
 .cx-spinner:before {
@@ -357,7 +368,7 @@ th {
   border-radius: 50%;
   border: 2px solid #ffffff;
   border-top-color: #000000;
-  animation: cx-button-spinner .8s linear infinite;
+  animation: cx-button-spinner 0.8s linear infinite;
 }
 
 // alerts
@@ -404,6 +415,11 @@ th {
   color: var(--text-accent-darker-color);
 }
 
+.cx-warn-dark-background {
+  background-color: var(--warn-darker-color);
+  color: var(--text-warn-darker-color);
+}
+
 // workarounds
 
 mat-toolbar.mat-toolbar mat-form-field.mat-form-field {