diff --git a/backend/video_app/tasks.py b/backend/video_app/tasks.py
index 84d12db..306b318 100644
--- a/backend/video_app/tasks.py
+++ b/backend/video_app/tasks.py
@@ -59,17 +59,17 @@ def create_thumbnails(instance, model_id):
         ffmpeg.input(video_file_path, ss=1).output(thumbnail_1080p_path, vf='scale=1920:-1', vframes=1).run(overwrite_output=True)
         ffmpeg.input(video_file_path, ss=1).output(thumbnail_480_path, vf='scale=720:-1', vframes=1).run(overwrite_output=True)
         
-        create_video_thumbnail(video_file_path, thumbnail_dir, base_filename)
+        create_video_preview_clip(video_file_path, thumbnail_dir, base_filename)
 
     except ffmpeg._run.Error as e:
         error_message = e.stderr.decode() if e.stderr else "Unknown ffmpeg error"
         print(f"An error has occurred: {error_message}")
 
-def create_video_thumbnail(video_file_path, thumbnail_dir, base_filename):
+def create_video_preview_clip(video_file_path, thumbnail_dir, base_filename):
     """
-    Creates a 10-second video thumbnail from a video file without audio.
+    Creates a 10-second silent video preview clip from a video file.
     """
-    video_thumbnail_filename = base_filename + '_video-thumbnail.mp4'
+    video_thumbnail_filename = base_filename + '_preview-clip.mp4'
     video_thumbnail_path = os.path.join(thumbnail_dir, video_thumbnail_filename)
 
     try:
diff --git a/frontend/src/app/components/home/hero-banner/hero-banner.component.html b/frontend/src/app/components/home/hero-banner/hero-banner.component.html
index eaf0ebd..5888e05 100644
--- a/frontend/src/app/components/home/hero-banner/hero-banner.component.html
+++ b/frontend/src/app/components/home/hero-banner/hero-banner.component.html
@@ -18,7 +18,7 @@
     @if (currentVideo) {
     <video
       #videoElement
-      [src]="videoUrl"
+      [src]="previewClipUrl"
       poster="{{ thumbnailUrl }}"
       autoplay
       muted
@@ -60,7 +60,7 @@
         [imgPath]="'play'"
         [imgReverse]="true"
         [disabled]="!isAnyResolutionAvailable()"
-        (click)="playVideoId(playUrl, currentVideo)"
+        (click)="playVideoId(videoUrl, currentVideo)"
       ></app-btn-large>
       <div class="favorite-img" (click)="toggleLikeVideo(currentVideo)">
         @if(checkLikeVideos(currentVideo)) {
diff --git a/frontend/src/app/components/home/hero-banner/hero-banner.component.ts b/frontend/src/app/components/home/hero-banner/hero-banner.component.ts
index 1ed5646..b68ae41 100644
--- a/frontend/src/app/components/home/hero-banner/hero-banner.component.ts
+++ b/frontend/src/app/components/home/hero-banner/hero-banner.component.ts
@@ -40,11 +40,12 @@ export class HeroBannerComponent implements OnChanges {
   @Output() refreshChange = new EventEmitter<Video[]>();
   @Output() videosChange = new EventEmitter<any[]>();
   @Output() favoriteVideoChange = new EventEmitter<any[]>();
+  @Output() watchedVideoChange = new EventEmitter<any[]>();
 
   isVideoLoaded: boolean = false;
-  videoUrl: string = '';
+  previewClipUrl: string = '';
   thumbnailUrl: string = '';
-  playUrl: string = '';
+  videoUrl: string = '';
   environmentBaseUrl: string = environment.baseUrl;
 
   availableResolutions: string[];
@@ -94,9 +95,9 @@ export class HeroBannerComponent implements OnChanges {
     if (this.currentVideo) {
       const videoId = this.currentVideo.id;
       const fileName = this.currentVideo.file_name;
-      this.playUrl = `${this.environmentBaseUrl}/media/videos/${videoId}/${fileName}`;
+      this.videoUrl = `${this.environmentBaseUrl}/media/videos/${videoId}/${fileName}`;
       this.thumbnailUrl = `${this.environmentBaseUrl}/media/thumbnails/${videoId}/${fileName}_1080p.jpg`;
-      this.videoUrl = `${this.environmentBaseUrl}/media/thumbnails/${videoId}/${fileName}_video-thumbnail.mp4`;
+      this.previewClipUrl = `${this.environmentBaseUrl}/media/thumbnails/${videoId}/${fileName}_preview-clip.mp4`;
     }
   }
 
@@ -156,15 +157,7 @@ export class HeroBannerComponent implements OnChanges {
     this.watchedVideos = this.watchedVideos.includes(videoId)
       ? this.watchedVideos.filter((id) => id !== videoId)
       : [...this.watchedVideos, videoId];
-    this.updateWatchedVideos();
-  }
-
-  /**
-   * Updates the watched videos list on the server.
-   */
-  private updateWatchedVideos(): void {
-    const body = { watched_videos: this.watchedVideos };
-    this.userService.updateWatchedVideos(body);
+    this.watchedVideoChange.emit(this.watchedVideos);
   }
 
   /**
diff --git a/frontend/src/app/components/home/home.component.html b/frontend/src/app/components/home/home.component.html
index 6731a24..a8dedb0 100644
--- a/frontend/src/app/components/home/home.component.html
+++ b/frontend/src/app/components/home/home.component.html
@@ -20,6 +20,7 @@
     (videosChange)="onVideosChange($event)"
     (refreshChange)="onRefreshPage($event)"
     (favoriteVideoChange)="onFavoriteVideoChange($event)"
+    (watchedVideoChange)="onWatchedVideoChange($event)"
   ></app-hero-banner>
   <!-- Spacer -->
   <div *ngIf="!isWideScreenView" class="spacer"></div>
diff --git a/frontend/src/app/components/home/home.component.ts b/frontend/src/app/components/home/home.component.ts
index e422a6e..f3cb13b 100644
--- a/frontend/src/app/components/home/home.component.ts
+++ b/frontend/src/app/components/home/home.component.ts
@@ -128,6 +128,14 @@ export class HomeComponent implements OnInit {
     this.userService.updateLikedVideos(body);
   }
 
+  /**
+   * Updates user's liked videos in the backend.
+   */
+  private updateWatchedVideos(): void {
+    const body = { watched_videos: this.watchedVideos };
+    this.userService.updateWatchedVideos(body);
+  }
+
   /**
    * Called when favorite videos change.
    */
@@ -136,6 +144,14 @@ export class HomeComponent implements OnInit {
     this.updateLikedVideos();
   }
 
+  /**
+   * Called when favorite videos change.
+   */
+  onWatchedVideoChange(watched: number[]): void {
+    this.watchedVideos = watched;
+    this.updateWatchedVideos();
+  }
+
   /**
    * Updates current video after refresh.
    */