diff --git a/src/lib/media/player.svelte b/src/lib/media/player.svelte
index bac57d4..8dce25b 100644
--- a/src/lib/media/player.svelte
+++ b/src/lib/media/player.svelte
@@ -129,17 +129,17 @@
             <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">
+                <svg class="track-icon {index == selectedTrackId ? "track-icon-playing" : ""}" 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>
                 <div class="track-text-container">
-                    <span class="track-title-index">{index + 1}.</span>
+                    <span class="track-title-index">{(index + 1) < 10 ? `0${index + 1}` : index + 1}.</span>
                     <p class="track-title">{t.title}</p>
                 </div>
             </button>
 
-            <a class="track-icon track-download-icon" href={t.link} aria-label="download">
+            <a class="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>
@@ -217,7 +217,7 @@
 
 	.slider {
 		flex: 1;
-		height: 6px;
+		height: 8px;
         background: var(--color-player-bg);
 		border-radius: 6px;
 		overflow: hidden;
@@ -248,6 +248,7 @@
         margin: 0 1px 0 5px;
         align-self: flex-end !important;
         line-height: 0.8rem;
+        font-family: var(--font-mono);
     }
 
     .track-title {
@@ -274,15 +275,26 @@
     .track-title-index, .track-title, .track-icon {
         transition: color var(--duration-animation) var(--anim-curve);
     }
-    .track-play:hover .track-title-index, .track-play:hover .track-title, .track-play:hover .track-icon {
+    .track-play:hover .track-title-index, .track-play:hover .track-title, .track-play:hover .track-icon, .track-play:hover .track-icon-playing {
         color: var(--color-player-text-hover);
     }
+    .track-play:hover .track-icon {
+        opacity: 1;
+    }
 
     .track-icon {
         width: 24px;
+        opacity: 0;
+        transition: opacity var(--duration-animation) var(--anim-curve),
+                    color var(--duration-animation) var(--anim-curve);
         color: var(--color-player-text);
     }
 
+    .track-icon-playing {
+        /* color: var(--color-player-text); */
+        opacity: 1;
+    }
+
     .track-download-icon {
         padding: 0 12px;
         height: 100%;