diff --git a/app/views/break_escape/games/show.html.erb b/app/views/break_escape/games/show.html.erb
index 305ac0f..79028b4 100644
--- a/app/views/break_escape/games/show.html.erb
+++ b/app/views/break_escape/games/show.html.erb
@@ -65,6 +65,11 @@
     <!-- Biometrics is now handled as a minigame -->
   </div>
 
+  <!-- Spotify Play Music Button -->
+  <a id="spotify-play-button" href="https://open.spotify.com/playlist/6c8rckDKa9j3ltwD3W4KHw?si=Hl0MJtg1Tny9peEtqtoahg&pi=GR6GLX9BRASlq" target="_blank" title="Play on Spotify">
+      <img src="/break_escape/assets/icons/spotify_logo.png" alt="Spotify" class="spotify-logo">
+  </a>
+
   <%# Inventory Container %>
   <div id="inventory-container"></div>
 
diff --git a/public/break_escape/assets/icons/spotify_logo.png b/public/break_escape/assets/icons/spotify_logo.png
new file mode 100644
index 0000000..9c2220c
Binary files /dev/null and b/public/break_escape/assets/icons/spotify_logo.png differ
diff --git a/public/break_escape/css/panels.css b/public/break_escape/css/panels.css
index d7c7b93..e9f6150 100644
--- a/public/break_escape/css/panels.css
+++ b/public/break_escape/css/panels.css
@@ -610,4 +610,35 @@
 .toggle-buttons img {
     width: 64px;
     height: 64px;
+}
+
+/* Spotify Play Button */
+#spotify-play-button {
+    /* absolute position: top right; */
+    position: fixed;
+    top: 20px;
+    right: 20px;
+    z-index: 1001;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    transition: transform 0.2s, opacity 0.2s;
+    padding: 8px;
+    text-decoration: none;
+}
+
+#spotify-play-button:hover {
+    border-color: #1ed760;
+    border-radius: 50%;
+    background: rgba(29, 185, 84, 0.2);
+}
+
+.spotify-logo {
+    width: 48px;
+    height: 48px;
+    image-rendering: pixelated;
+    image-rendering: -moz-crisp-edges;
+    image-rendering: crisp-edges;
 } 
\ No newline at end of file