diff --git a/UI/Web/src/app/cards/card-detail-layout/card-detail-layout.component.html b/UI/Web/src/app/cards/card-detail-layout/card-detail-layout.component.html
index 3f7184b59..6db732f26 100644
--- a/UI/Web/src/app/cards/card-detail-layout/card-detail-layout.component.html
+++ b/UI/Web/src/app/cards/card-detail-layout/card-detail-layout.component.html
@@ -24,7 +24,7 @@
   }
 
   <app-metadata-filter [filterSettings]="filterSettings" [filterOpen]="filterOpen" (applyFilter)="applyMetadataFilter($event)"></app-metadata-filter>
-  <div class="viewport-container ms-1" [ngClass]="{'empty': items.length === 0 && !isLoading}">
+  <div class="viewport-container ms-1" [ngClass]="{'empty': items.length === 0 && !isLoading, 'expanded': (isFilterOpen$ | async)}">
     <div class="content-container">
       <div class="card-container mt-">
         @if (items.length === 0 && !isLoading) {
diff --git a/UI/Web/src/app/cards/card-detail-layout/card-detail-layout.component.scss b/UI/Web/src/app/cards/card-detail-layout/card-detail-layout.component.scss
index c4aacb7b8..3e07b1af3 100644
--- a/UI/Web/src/app/cards/card-detail-layout/card-detail-layout.component.scss
+++ b/UI/Web/src/app/cards/card-detail-layout/card-detail-layout.component.scss
@@ -5,11 +5,21 @@
     height: calc((var(--vh) *100) - 157px);
     margin-bottom: 10px;
 
+    &.expanded {
+      height: calc((var(--vh) *100) - 520px);
+    }
+
+
+
     &.empty {
         height: auto;
     }
 }
 
+::ng-deep .viewport-container.expanded  .virtual-scroller, ::ng-deep .viewport-container.expanded virtual-scroller {
+  height: calc((var(--vh) *100) - 520px);
+}
+
 .content-container {
     display: flex;
     flex-direction: column;
diff --git a/UI/Web/src/app/cards/card-detail-layout/card-detail-layout.component.ts b/UI/Web/src/app/cards/card-detail-layout/card-detail-layout.component.ts
index a8b27c953..a0b838f07 100644
--- a/UI/Web/src/app/cards/card-detail-layout/card-detail-layout.component.ts
+++ b/UI/Web/src/app/cards/card-detail-layout/card-detail-layout.component.ts
@@ -1,4 +1,4 @@
-import {DOCUMENT, NgClass, NgForOf, NgTemplateOutlet} from '@angular/common';
+import {AsyncPipe, DOCUMENT, NgClass, NgForOf, NgTemplateOutlet} from '@angular/common';
 import {
   ChangeDetectionStrategy,
   ChangeDetectorRef,
@@ -36,9 +36,10 @@ import {MetadataFilterComponent} from "../../metadata-filter/metadata-filter.com
 import {TranslocoDirective} from "@jsverse/transloco";
 import {CardActionablesComponent} from "../../_single-module/card-actionables/card-actionables.component";
 import {SeriesFilterV2} from "../../_models/metadata/v2/series-filter-v2";
-import {filter, map} from "rxjs/operators";
+import {filter, map, startWith} from "rxjs/operators";
 import {takeUntilDestroyed} from "@angular/core/rxjs-interop";
-import {tap} from "rxjs";
+import {of, pipe, tap} from "rxjs";
+import { ToggleService } from 'src/app/_services/toggle.service';
 
 
 const ANIMATION_TIME_MS = 0;
@@ -47,7 +48,7 @@ const ANIMATION_TIME_MS = 0;
   selector: 'app-card-detail-layout',
   standalone: true,
   imports: [LoadingComponent, VirtualScrollerModule, CardActionablesComponent, NgbTooltip, MetadataFilterComponent,
-    TranslocoDirective, NgTemplateOutlet, NgClass, NgForOf],
+    TranslocoDirective, NgTemplateOutlet, NgClass, NgForOf, AsyncPipe],
   templateUrl: './card-detail-layout.component.html',
   styleUrls: ['./card-detail-layout.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -60,6 +61,7 @@ export class CardDetailLayoutComponent implements OnInit, OnChanges {
   private readonly jumpbarService = inject(JumpbarService);
   private readonly router = inject(Router);
   private readonly destroyRef = inject(DestroyRef);
+  private readonly toggleService = inject(ToggleService);
 
   protected readonly Breakpoint = Breakpoint;
 
@@ -73,7 +75,7 @@ export class CardDetailLayoutComponent implements OnInit, OnChanges {
   @Input() parentScroll!: Element | Window;
 
   // Filter Code
-  @Input() filterOpen!: EventEmitter<boolean>;
+  @Input() filterOpen!: EventEmitter<boolean>; // TODO: Remove, we use a toggleservice
   /**
    * Should filtering be shown on the page
    */
@@ -108,6 +110,8 @@ export class CardDetailLayoutComponent implements OnInit, OnChanges {
   updateApplied: number = 0;
   bufferAmount: number = 1;
 
+  isFilterOpen$ = this.toggleService.toggleState$.pipe(takeUntilDestroyed(this.destroyRef), startWith(false));
+
 
 
   constructor(@Inject(DOCUMENT) private document: Document) {}
@@ -169,6 +173,7 @@ export class CardDetailLayoutComponent implements OnInit, OnChanges {
         setTimeout(() => this.virtualScroller.scrollToIndex(0, true, 0, ANIMATION_TIME_MS), 10);
       }
     }
+    
   }
 
   hasCustomSort() {