diff --git a/src/app/app.component.html b/src/app/app.component.html
index 0e333be..30605c9 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1,7 +1,9 @@
 <select [formControl]="control">
-  <option *ngFor="let option of options" [value]="">{{ option }}</option>
+  <option *ngFor="let option of options" [value]="option">{{ option }}</option>
 </select>
 
-<div>card</div>
+<div *ngFor="let card of cards$ | async">
+  {{ card.name }} {{ card.id }}
+</div>
 
 <router-outlet></router-outlet>
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 61d8ec4..740ef48 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -1,6 +1,7 @@
 import { Component } from '@angular/core';
 import { FormControl } from '@angular/forms';
 import { CardType, DataService } from './data.service';
+import { map, startWith, switchMap } from 'rxjs';
 
 
 @Component({
@@ -12,6 +13,13 @@ export class AppComponent {
   readonly options: CardType[] = ['KEK', 'OMEGA', 'PEPEGA', 'OMEGA'];
   readonly control = new FormControl(this.options[0]);
 
+  readonly cards$ = this.control.valueChanges.pipe(
+    startWith(this.control.value),
+    switchMap((cardType) => this.dataService.getData().pipe(
+      map((cards) => cards.filter((card) => card.type === cardType)),
+    )),
+  );
+
   constructor(
     private dataService: DataService,
   ) {