diff --git a/js/app.js b/js/app.js
index 11f4acf..0165a7f 100644
--- a/js/app.js
+++ b/js/app.js
@@ -890,7 +890,10 @@ document.addEventListener('DOMContentLoaded', async () => {
     const updateVolumeUI = () => {
         const { volume, muted } = audioPlayer;
         volumeBtn.innerHTML = (muted || volume === 0) ? SVG_MUTE : SVG_VOLUME;
-        volumeFill.style.width = `${muted ? 0 : volume * 100}%`;
+
+        const effectiveVolume = muted ? 0 : volume * 100;
+
+        volumeFill.style.setProperty('--volume-level', `${effectiveVolume}%`);
     };
 
     volumeBtn.addEventListener('click', () => {
@@ -1013,4 +1016,4 @@ document.addEventListener('DOMContentLoaded', async () => {
         e.preventDefault();
         deferredPrompt = e;
     });
-});
\ No newline at end of file
+});
diff --git a/styles.css b/styles.css
index f19e7ef..4c9fc13 100644
--- a/styles.css
+++ b/styles.css
@@ -920,7 +920,7 @@ input:checked + .slider:before {
 }
 
 .volume-controls .volume-bar .volume-fill {
-    width: 70%;
+    width: var(--volume-level, 70%);
     height: 100%;
     background-color: var(--foreground);
     border-radius: 2px;
@@ -933,7 +933,7 @@ input:checked + .slider:before {
 .volume-controls .volume-bar:hover .volume-fill::after {
     content: '';
     position: absolute;
-    right: 0;
+    left: calc(var(--volume-level, 70%) - 6px);
     top: 50%;
     transform: translateY(-50%);
     width: 12px;
@@ -1748,4 +1748,4 @@ input:checked + .slider:before {
         padding: var(--spacing-sm) var(--spacing-md);
         font-size: 0.9rem;
     }
-}
\ No newline at end of file
+}