diff --git a/src/lib/media/player.svelte b/src/lib/media/player.svelte
index a0ac3d0..2f552de 100644
--- a/src/lib/media/player.svelte
+++ b/src/lib/media/player.svelte
@@ -61,12 +61,12 @@
             onclick={() => paused = !paused}
             >
             {#if paused}
-                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
+                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                     <path stroke-linecap="round" stroke-linejoin="round" d="M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
                     <path stroke-linecap="round" stroke-linejoin="round" d="M15.91 11.672a.375.375 0 0 1 0 .656l-5.603 3.113a.375.375 0 0 1-.557-.328V8.887c0-.286.307-.466.557-.327l5.603 3.112Z" />
                 </svg>
             {:else}
-                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
+                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                     <path stroke-linecap="round" stroke-linejoin="round" d="M14.25 9v6m-4.5 0V9M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
                 </svg>
             {/if}
@@ -114,26 +114,21 @@
 
     <div class="track-list">
         {#each tracks as t, index}
-            <div class="track-container">
-                <button class="icon" aria-label="play" onclick={() => {
-                    playTrack(index);
-                }}>
-                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
-                        <path stroke-linecap="round" stroke-linejoin="round" d="M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
-                        <path stroke-linecap="round" stroke-linejoin="round" d="M15.91 11.672a.375.375 0 0 1 0 .656l-5.603 3.113a.375.375 0 0 1-.557-.328V8.887c0-.286.307-.466.557-.327l5.603 3.112Z" />
-                    </svg>
-                </button>
-                
+            <button class="track-play" aria-label="play" onclick={() => {
+                playTrack(index);
+            }}>
+                <svg class="track-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" d="M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
+                    <path stroke-linecap="round" stroke-linejoin="round" d="M15.91 11.672a.375.375 0 0 1 0 .656l-5.603 3.113a.375.375 0 0 1-.557-.328V8.887c0-.286.307-.466.557-.327l5.603 3.112Z" />
+                </svg>
                 <p class="track-title">{t.title}</p>
+            </button>
 
-                <div class="spacer"></div>
-
-                <a class="icon" href={t.link} aria-label="download">
-                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
-                        <path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5M16.5 12 12 16.5m0 0L7.5 12m4.5 4.5V3" />
-                    </svg>
-                </a>
-            </div>
+            <a class="track-icon track-download-icon" href={t.link} aria-label="download">
+                <svg class="icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5M16.5 12 12 16.5m0 0L7.5 12m4.5 4.5V3" />
+                </svg>
+            </a>
         {/each}
     </div>
 </div>
@@ -147,14 +142,15 @@
     }
     .icon:hover {
         cursor: pointer;
-        color: var(--color-highlight-alt);
+        /* color: var(--color-highlight-alt); */
     }
 
     .media-player {
         width: 100%;
         border-radius: var(--border-radius);
         background-color: var(--color-background-highlight-alt);
-        padding: 8px 12px;
+        padding: 16px 0 16px;
+        overflow: hidden;
     }
 
     .media-player p, .media-player a {
@@ -165,12 +161,17 @@
         display: grid;
         grid-template-columns: min-content auto min-content;
         gap: 4px;
+        margin: 0 16px;
     }
 
     .now-playing-button {
         align-self: center;
-        width: 32px;
-        height: 32px;
+        width: 40px;
+        height: 40px;
+    }
+    /* not sure why the svg target is required only for the latter here but it won't work without it */
+    .now-playing-button:hover, .track-download-icon:hover svg {
+        color: var(--color-highlight-alt);
     }
 
     .now-playing-hint, .now-playing-duration {
@@ -193,7 +194,7 @@
     .progress-container {
 		display: flex;
 		align-items: center;
-        margin: 4px 0;
+        margin: 4px 12px;
     }
 
 	.slider {
@@ -202,6 +203,8 @@
 		background: var(--color-background-highlight-alt);
 		border-radius: 6px;
 		overflow: hidden;
+        cursor: pointer;
+        margin: 4px 0;
 	}
 
 	.progress-bar {
@@ -211,19 +214,45 @@
         transition: width var(--duration-animation) var(--anim-curve);
 	}
 
+    .track-list {
+        display: grid;
+        grid-template-columns: auto min-content;
+        align-items: center;
+    }
+
     .track-title {
         margin: 0 4px !important;
         line-height: 1.0rem;
+        font-size: 1.0rem;
     }
 
-    .track-container {
+    .track-play {
         display: flex;
         flex-direction: row;
         align-items: center;
-        margin: 8px 0;
+        width: 100%;
+        padding: 4px 0 4px 16px;
+        height: fit-content;
+        cursor: pointer;
+        border-top-right-radius: var(--border-radius);
+        border-bottom-right-radius: var(--border-radius);
+        transition: background-color var(--duration-animation) var(--anim-curve);
+    }
+    .track-play:hover {
+        background-color: var(--color-background-highlight-hover-alt);
     }
 
-    .spacer {
-        margin: 0 auto;
+    .track-icon {
+        width: 24px;
+        color: var(--color-text);
+    }
+
+    .track-download-icon {
+        padding: 0 12px;
+        height: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        transition: color var(--duration-animation) var(--anim-curve);
     }
 </style>
\ No newline at end of file