diff --git a/frontend/src/app/components/home/categories/categories.component.ts b/frontend/src/app/components/home/categories/categories.component.ts
index 95c04e8..e65ee64 100644
--- a/frontend/src/app/components/home/categories/categories.component.ts
+++ b/frontend/src/app/components/home/categories/categories.component.ts
@@ -25,7 +25,7 @@ export class CategoriesComponent implements AfterViewInit {
   @Input() favoriteVideos: number[] = [];
   @Input() watchedVideos: number[] = [];
 
-  @Output() currentVideoId = new EventEmitter<number>();
+  @Output() videoSelected = new EventEmitter<Video>();
 
   environmentBaseUrl: string = environment.baseUrl;
   isScrollable: boolean = false;
@@ -50,12 +50,9 @@ export class CategoriesComponent implements AfterViewInit {
    *
    * @param videoId The ID of the video to be opened
    */
-  openCurrentVideo(videoId: number): void {
-    const video = this.videos.find((v) => v.id === videoId);
-    if (video) {
-      this.currentVideo = video;
-      this.currentVideoId.emit(videoId);
-    }
+  openCurrentVideo(video: Video): void {
+    this.currentVideo = video;
+    this.videoSelected.emit(video);
   }
 
   /**
diff --git a/frontend/src/app/components/home/categories/video-list/video-list.component.ts b/frontend/src/app/components/home/categories/video-list/video-list.component.ts
index e973f20..df1adf2 100644
--- a/frontend/src/app/components/home/categories/video-list/video-list.component.ts
+++ b/frontend/src/app/components/home/categories/video-list/video-list.component.ts
@@ -15,7 +15,7 @@ export class VideoListComponent {
   @Input() currentVideo: Video | null = null;
   @Input() watchedVideos: number[] = [];
 
-  @Output() videoSelected = new EventEmitter<number>();
+  @Output() videoSelected = new EventEmitter<Video>();
 
   /**
    * Get the URL of the thumbnail image for the given videoId and fileName.
@@ -35,7 +35,7 @@ export class VideoListComponent {
     const video = this.videos.find((v) => v.id === videoId);
     if (video) {
       this.currentVideo = video;
-      this.videoSelected.emit(video.id);
+      this.videoSelected.emit(video);
     }
   }
 
diff --git a/frontend/src/app/components/home/home.component.html b/frontend/src/app/components/home/home.component.html
index cd67145..616d099 100644
--- a/frontend/src/app/components/home/home.component.html
+++ b/frontend/src/app/components/home/home.component.html
@@ -31,7 +31,7 @@
     [currentVideo]="currentVideo"
     [favoriteVideos]="favoriteVideos"
     [watchedVideos]="watchedVideos"
-    (currentVideoId)="currentVideoId($event)"
+    (videoSelected)="openCurrentVideo($event)"
   ></app-categories>
   } @else {
   <div class="video-overlay">
diff --git a/frontend/src/app/components/home/home.component.ts b/frontend/src/app/components/home/home.component.ts
index f3cb13b..3e7540b 100644
--- a/frontend/src/app/components/home/home.component.ts
+++ b/frontend/src/app/components/home/home.component.ts
@@ -207,11 +207,8 @@ export class HomeComponent implements OnInit {
   /**
    * Sets the current video to the given video ID.
    */
-  currentVideoId(videoId: number): void {
-    const video = this.videos.find((v) => v.id === videoId);
-    if (video) {
-      this.currentVideo = video;
-    }
+  openCurrentVideo(video: Video): void {
+    this.currentVideo = video;
   }
 
   /**