diff --git a/frontend/src/components/player/MiniPlayer.vue b/frontend/src/components/player/MiniPlayer.vue
index 72215d8..aca00cb 100644
--- a/frontend/src/components/player/MiniPlayer.vue
+++ b/frontend/src/components/player/MiniPlayer.vue
@@ -52,15 +52,16 @@
           />
           <div class="volume-popup">
             <span class="volume-value">{{ playerStore.volume }}%</span>
-            <input
-              type="range"
-              min="0"
-              max="100"
-              :value="playerStore.volume"
-              @input="handleVolume"
-              class="volume-slider"
-              orient="vertical"
-            />
+            <div class="volume-slider-wrapper">
+              <input
+                type="range"
+                min="0"
+                max="100"
+                :value="playerStore.volume"
+                @input="handleVolume"
+                class="volume-slider"
+              />
+            </div>
           </div>
         </div>
 
@@ -310,6 +311,14 @@ async function handleLeave() {
   visibility: visible;
 }
 
+.volume-slider-wrapper {
+  width: 8px;
+  height: 100px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
 .volume-slider {
   -webkit-appearance: none;
   appearance: none;
@@ -319,8 +328,7 @@ async function handleLeave() {
   border-radius: 4px;
   cursor: pointer;
   transform: rotate(-90deg);
-  margin: 0;
-  padding: 0;
+  transform-origin: center center;
 }
 
 .volume-slider::-webkit-slider-runnable-track {