diff --git a/DeepDrftPublic.Client/Controls/AudioPlayerBar/AudioPlayerBar.razor.css b/DeepDrftPublic.Client/Controls/AudioPlayerBar/AudioPlayerBar.razor.css
index 38848b5..ce23ac6 100644
--- a/DeepDrftPublic.Client/Controls/AudioPlayerBar/AudioPlayerBar.razor.css
+++ b/DeepDrftPublic.Client/Controls/AudioPlayerBar/AudioPlayerBar.razor.css
@@ -89,7 +89,7 @@
 @media (min-width: 600px) {
     ::deep .transport-zone { order: 1; }
     ::deep .seek-zone { order: 2; flex-grow: 1; flex-basis: 0; }
-    ::deep .volume-controls { order: 3; }
+    ::deep .volume-controls { order: 3; align-self: flex-start; }
 }
 
 /* Narrow (< 600px): transport + volume on top row, seek full-width below */
diff --git a/DeepDrftPublic.Client/Controls/AudioPlayerBar/VolumeControls.razor.css b/DeepDrftPublic.Client/Controls/AudioPlayerBar/VolumeControls.razor.css
index c31db9b..89f4198 100644
--- a/DeepDrftPublic.Client/Controls/AudioPlayerBar/VolumeControls.razor.css
+++ b/DeepDrftPublic.Client/Controls/AudioPlayerBar/VolumeControls.razor.css
@@ -1,8 +1,8 @@
 /* Width caps only — layout/colour come from MudStack + theme */
 .volume-controls {
-    width: 140px;
+    width: 70px;
 }
 
 .volume-slider {
-    width: 100px;
+    width: 50px;
 }