diff --git a/UI/Web/src/app/carousel/carousel-reel/carousel-reel.component.ts b/UI/Web/src/app/carousel/carousel-reel/carousel-reel.component.ts
index a2b786665..0a6580058 100644
--- a/UI/Web/src/app/carousel/carousel-reel/carousel-reel.component.ts
+++ b/UI/Web/src/app/carousel/carousel-reel/carousel-reel.component.ts
@@ -1,10 +1,11 @@
-import { Component, ContentChild, EventEmitter, Input, Output, TemplateRef } from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ContentChild, EventEmitter, Input, Output, TemplateRef } from '@angular/core';
 import { Swiper, SwiperEvents } from 'swiper/types';
 
 @Component({
   selector: 'app-carousel-reel',
   templateUrl: './carousel-reel.component.html',
-  styleUrls: ['./carousel-reel.component.scss']
+  styleUrls: ['./carousel-reel.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class CarouselReelComponent {
 
@@ -18,7 +19,7 @@ export class CarouselReelComponent {
 
   trackByIdentity: (index: number, item: any) => string;
 
-  constructor() { 
+  constructor(private readonly cdRef: ChangeDetectorRef) { 
     this.trackByIdentity = (index: number, item: any) => `${this.title}_${item.id}_${item?.name}_${item?.pagesRead}_${index}`;
   }
 
@@ -26,6 +27,7 @@ export class CarouselReelComponent {
     if (this.swiper) {
       if (this.swiper.isEnd) return;
       this.swiper.setProgress(this.swiper.progress + 0.25, 600);
+      this.cdRef.markForCheck();
     }
   }
 
@@ -33,6 +35,7 @@ export class CarouselReelComponent {
     if (this.swiper) {
       if (this.swiper.isBeginning) return;
       this.swiper.setProgress(this.swiper.progress - 0.25, 600);
+      this.cdRef.markForCheck();
     }
   }
 
@@ -42,5 +45,6 @@ export class CarouselReelComponent {
 
   onSwiper(eventParams: Parameters<SwiperEvents['init']>) {
     [this.swiper] = eventParams;
+    this.cdRef.detectChanges();
   }
 }
diff --git a/UI/Web/src/app/series-detail/series-detail.component.html b/UI/Web/src/app/series-detail/series-detail.component.html
index 4cca035e6..fd3fe1248 100644
--- a/UI/Web/src/app/series-detail/series-detail.component.html
+++ b/UI/Web/src/app/series-detail/series-detail.component.html
@@ -52,7 +52,7 @@
 </app-side-nav-companion-bar>
 
 
-<div (scroll)="onScroll()" class="main-container container-fluid pt-2" *ngIf="series !== undefined" #scrollingBlock>
+<div (scroll)="onScroll()" [ngStyle]="{'height': ScrollingBlockHeight}" class="main-container container-fluid pt-2" *ngIf="series !== undefined" #scrollingBlock>
     <div class="row mb-3 info-container">
         <div class="col-md-2 col-xs-4 col-sm-6 d-none d-sm-block">
             <app-image maxWidth="300px" [imageUrl]="seriesImage"></app-image>
diff --git a/UI/Web/src/app/series-detail/series-detail.component.scss b/UI/Web/src/app/series-detail/series-detail.component.scss
index ec835f582..f2777c510 100644
--- a/UI/Web/src/app/series-detail/series-detail.component.scss
+++ b/UI/Web/src/app/series-detail/series-detail.component.scss
@@ -23,7 +23,7 @@
 
 // This is responsible for ensuring we scroll down and only tabs and companion bar is visible
 .main-container {
-  height: calc(var(--vh)*100 - 117px);
+  // Height set dynamically by series-detail.component.ts getHeight();
   overflow-y: auto;
 }
 
diff --git a/UI/Web/src/app/series-detail/series-detail.component.ts b/UI/Web/src/app/series-detail/series-detail.component.ts
index 56b07654d..fd3f7b78a 100644
--- a/UI/Web/src/app/series-detail/series-detail.component.ts
+++ b/UI/Web/src/app/series-detail/series-detail.component.ts
@@ -1,4 +1,4 @@
-import { Component, HostListener, OnDestroy, OnInit, ViewChild } from '@angular/core';
+import { Component, ElementRef, HostListener, OnDestroy, OnInit, ViewChild } from '@angular/core';
 import { Title } from '@angular/platform-browser';
 import { ActivatedRoute, Router } from '@angular/router';
 import { NgbModal, NgbNavChangeEvent, NgbOffcanvas } from '@ng-bootstrap/ng-bootstrap';
@@ -65,7 +65,7 @@ interface StoryLineItem {
 })
 export class SeriesDetailComponent implements OnInit, OnDestroy {
 
-  @ViewChild(VirtualScrollerComponent) private virtualScroller!: VirtualScrollerComponent;
+	@ViewChild('scrollingBlock') scrollingBlock: ElementRef<HTMLDivElement> | undefined;
 
   /**
    * Series Id. Set at load before UI renders
@@ -261,6 +261,14 @@ export class SeriesDetailComponent implements OnInit, OnDestroy {
 		}
 	}
 
+
+
+	get ScrollingBlockHeight() {
+		if (this.scrollingBlock === undefined) return 'calc(var(--vh)*100)';
+		const mainOffset = this.scrollingBlock.nativeElement.offsetTop;
+		return 'calc(var(--vh)*100 - ' + mainOffset + 'px)';
+	}
+
   ngOnInit(): void {
     const routeId = this.route.snapshot.paramMap.get('seriesId');
     const libraryId = this.route.snapshot.paramMap.get('libraryId');