diff --git a/Frontend/src/app/pages/mood/mood.component.html b/Frontend/src/app/pages/mood/mood.component.html
index 63fb9dab..a72ce6a7 100644
--- a/Frontend/src/app/pages/mood/mood.component.html
+++ b/Frontend/src/app/pages/mood/mood.component.html
@@ -1,14 +1,18 @@
 <div class="col-start-1 col-span-5 row-start-2 row-span-4 pl-2 pr-2" style="height: 72vh;">
-    <div style="background-color: rgba(0, 0, 0, 0.7);" class="rounded-lg overflow-hidden h-full relative p-8">
+    <div  class="rounded-lg overflow-hidden h-full relative p-8">
         <app-back-button></app-back-button>
         <app-page-title class="text-5xl font-bold text-center mb-6">{{title}}</app-page-title>
 
         <div class="grid grid-cols-5 gap-3">
-            <div *ngFor="let album of albums" class="album-art flex flex-col items-center hover:cursor-pointer" (click)="playTrack(album.title,album.artist)">
-                <img [src]="album.imageUrl" alt="{{ album.title }}" class="w-32 h-32 object-cover rounded-md">
+            <div *ngFor="let album of albums" class="album-art flex flex-col items-center hover:cursor-pointer group">
+                <div class="relative">
+                    <img [src]="album.imageUrl" alt="{{ album.title }}" class="w-32 h-32 object-cover rounded-md">
+                    <app-play-icon [switchMood]="false" (click)="playTrack(album.title,album.artist)" [width]="'7vh'" class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100">
+                    </app-play-icon>
+                </div>
                 <p class="text-center text-white text-lg font-semibold">{{ album.title }}</p>
                 <p class="text-center text-sm text-white text-gray-500">{{ album.artist }}</p>
             </div>
         </div>
     </div>
-</div>
+</div>
\ No newline at end of file
diff --git a/Frontend/src/app/pages/mood/mood.component.ts b/Frontend/src/app/pages/mood/mood.component.ts
index 78b00872..7dc7df64 100644
--- a/Frontend/src/app/pages/mood/mood.component.ts
+++ b/Frontend/src/app/pages/mood/mood.component.ts
@@ -14,11 +14,12 @@ import { Track } from '../../services/search.service';
 import { ProviderService } from "../../services/provider.service";
 import { YouTubeService } from "../../services/youtube.service";
 import { SpotifyService } from "../../services/spotify.service";  // <-- Use Track interface
+import { PlayIconComponent } from '../../components/organisms/play-icon/play-icon.component';
 
 @Component({
   selector: 'app-mood',
   standalone: true,
-  imports: [NgForOf, NgIf, NgClass, NgSwitch, NgSwitchCase, NavbarComponent, SearchBarComponent, ProfileComponent, MoodDropDownComponent, BackButtonComponent, PageTitleComponent],
+  imports: [NgForOf, NgIf, NgClass, NgSwitch, NgSwitchCase, NavbarComponent, SearchBarComponent, ProfileComponent, MoodDropDownComponent, BackButtonComponent, PageTitleComponent,PlayIconComponent],
   templateUrl: './mood.component.html',
   styleUrls: ['./mood.component.css']
 })