diff --git a/src/app/components/games-bar/games-bar.component.html b/src/app/components/games-bar/games-bar.component.html
index 8225cc9..71e4e3c 100644
--- a/src/app/components/games-bar/games-bar.component.html
+++ b/src/app/components/games-bar/games-bar.component.html
@@ -1,4 +1,4 @@
 <div class="games">
-  <app-game-item [active]="i === activeGame" *ngFor="let game of games; index as i" [game]="game" (click)="activeGame = i"></app-game-item>
+  <app-game-item [active]="game.gameId === activeGame?.gameId" *ngFor="let game of games; index as i" [game]="game" (click)="activeGame = game"></app-game-item>
 </div>
-<app-game-info *ngIf="activeGame !== null" [game]="games[activeGame]"></app-game-info>
+<app-game-info *ngIf="activeGame !== null" [game]="activeGame"></app-game-info>
diff --git a/src/app/components/games-bar/games-bar.component.ts b/src/app/components/games-bar/games-bar.component.ts
index 14502de..6a0e11f 100644
--- a/src/app/components/games-bar/games-bar.component.ts
+++ b/src/app/components/games-bar/games-bar.component.ts
@@ -9,7 +9,7 @@ import { GetGames } from 'src/app/services/go';
 })
 export class GamesBarComponent implements OnInit {
   games: Game[] = [];
-  activeGame: Game['id'] | null = null;
+  activeGame: Game | null = null;
 
   constructor() {}
 
@@ -22,7 +22,7 @@ export class GamesBarComponent implements OnInit {
       console.log(value);
       this.games = value;
       if (this.games.length > 0){
-        this.activeGame = this.games[0].title
+        this.activeGame = this.games[0]
       }
     });
   }