diff --git a/apps/performance/37-optimize-big-list/src/app/person-list.component.ts b/apps/performance/37-optimize-big-list/src/app/person-list.component.ts
index 6159baaaa..e64349397 100644
--- a/apps/performance/37-optimize-big-list/src/app/person-list.component.ts
+++ b/apps/performance/37-optimize-big-list/src/app/person-list.component.ts
@@ -1,21 +1,34 @@
-import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+import { ChangeDetectionStrategy, Component, input } from '@angular/core';
 
 import { NgForTrackByModule } from '@angular-challenges/shared/directives';
+import { ScrollingModule } from '@angular/cdk/scrolling';
 import { CommonModule } from '@angular/common';
 import { Person } from './person.model';
 
 @Component({
   selector: 'app-person-list',
-  imports: [CommonModule, NgForTrackByModule],
+  imports: [CommonModule, NgForTrackByModule, ScrollingModule],
   template: `
     <div class="relative h-[300px] overflow-hidden">
       <div class="absolute inset-0 overflow-scroll">
-        <div
-          *ngFor="let person of persons; trackByProp: 'email'"
-          class="flex h-9 items-center justify-between border-b">
-          <h3>{{ person.name }}</h3>
-          <p>{{ person.email }}</p>
-        </div>
+        <cdk-virtual-scroll-viewport
+          class="h-full"
+          itemSize="50"
+          minBufferPx="0"
+          maxBufferPx="50">
+          <div
+            *cdkVirtualFor="let person of persons(); trackBy: trackByEmail"
+            class="flex h-9 items-center justify-between border-b">
+            <h3>{{ person.name }}</h3>
+            <p>{{ person.email }}</p>
+          </div>
+        </cdk-virtual-scroll-viewport>
+        <!--        <div-->
+        <!--          *ngFor="let person of persons; trackByProp: 'email'"-->
+        <!--          class="flex h-9 items-center justify-between border-b">-->
+        <!--          <h3>{{ person.name }}</h3>-->
+        <!--          <p>{{ person.email }}</p>-->
+        <!--        </div>-->
       </div>
     </div>
   `,
@@ -25,5 +38,9 @@ import { Person } from './person.model';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class PersonListComponent {
-  @Input() persons: Person[] = [];
+  persons = input.required<Person[]>();
+
+  trackByEmail(index: number, person: Person): string {
+    return person.email;
+  }
 }