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 39c6766..3b2a6ec 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
@@ -17,11 +17,21 @@ export class VideoListComponent {
   @Input() videoCategory: string = '';
   @Output() currentVideoId = new EventEmitter<number>();
 
+  /**
+   * Get the URL of the thumbnail image for the given videoId and fileName.
+   * @param videoId The id of the video.
+   * @param fileName The name of the video file.
+   * @returns The URL of the thumbnail image.
+   */
   getThumbnailUrl(videoId: number | undefined, fileName: string): string {
     const id = videoId ?? 0;
     return `${environment.baseUrl}/media/thumbnails/${id}/${fileName}_480p.jpg`;
   }
 
+  /**
+   * Set the current video based on the given videoId and emit the videoId.
+   * @param videoId The id of the video to set as the current video.
+   */
   openCurrentVideo(videoId: number | undefined) {
     if (videoId !== undefined) {
       const video = this.videos.find((v) => v.id === videoId);
@@ -32,6 +42,10 @@ export class VideoListComponent {
     }
   }
 
+  /**
+   * Scrolls the video container to the left by a fixed amount when the scroll-left button is clicked.
+   * @param event The mouse event triggered by clicking the scroll-left button.
+   */
   scrollLeft(event: MouseEvent) {
     const button = event.target as HTMLElement;
     const container = button
@@ -42,6 +56,10 @@ export class VideoListComponent {
     }
   }
 
+  /**
+   * Scrolls the video container to the right by a fixed amount when the scroll-right button is clicked.
+   * @param event The mouse event triggered by clicking the scroll-right button.
+   */
   scrollRight(event: MouseEvent) {
     const button = event.target as HTMLElement;
     const container = button