diff --git a/front/src/components/audio/VolumeControl.vue b/front/src/components/audio/VolumeControl.vue
index 407fb4a05..3a303ffe5 100644
--- a/front/src/components/audio/VolumeControl.vue
+++ b/front/src/components/audio/VolumeControl.vue
@@ -37,6 +37,7 @@ const scroll = (event: WheelEvent) => {
   <Button
     round
     ghost
+    square
     :class="['component-volume-control', {'expanded': expanded}]"
     @click.prevent.stop=""
     @mouseover="handleOver"
diff --git a/front/src/style/components/_volume_control.scss b/front/src/style/components/_volume_control.scss
index d75726070..d2fb49241 100644
--- a/front/src/style/components/_volume_control.scss
+++ b/front/src/style/components/_volume_control.scss
@@ -10,7 +10,8 @@
   }
   &.expandable {
     .popup {
-      background-color: #1B1C1D;
+      background-color: var(--player-background);
+      border-radius: var(--fw-border-radius);
       position: absolute;
       left: -4em;
       top: calc(-7em + 5px);