diff --git a/front/src/components/audio/VolumeControl.vue b/front/src/components/audio/VolumeControl.vue
index c4e0adf59..04e9d8ae9 100644
--- a/front/src/components/audio/VolumeControl.vue
+++ b/front/src/components/audio/VolumeControl.vue
@@ -25,6 +25,10 @@ const handleLeave = () => {
   stop()
   start()
 }
+
+const scroll = (event: WheelEvent) => {
+  volume.value += -Math.sign(event.deltaY) * 0.05
+}
 </script>
 
 <template>
@@ -34,6 +38,7 @@ const handleLeave = () => {
     @click.prevent.stop=""
     @mouseover="handleOver"
     @mouseleave="handleLeave"
+    @wheel.stop.prevent="scroll"
   >
     <span
       v-if="volume === 0"
diff --git a/front/src/composables/audio/player.ts b/front/src/composables/audio/player.ts
index 57772cde3..71564fb96 100644
--- a/front/src/composables/audio/player.ts
+++ b/front/src/composables/audio/player.ts
@@ -7,6 +7,7 @@ import { useQueue, currentIndex, currentTrack } from './queue'
 import { useStore } from '~/store'
 
 import axios from 'axios'
+import { useClamp } from '@vueuse/math'
 
 // Looping
 export enum LoopingMode {
@@ -57,7 +58,7 @@ export const usePlayer = createGlobalState(() => {
   // Volume
   const lastVolume = useStorage('player:last-volume', 0.7)
 
-  const volume: Ref<number> = useStorage('player:volume', 0.7)
+  const volume: Ref<number> = useClamp(useStorage('player:volume', 0.7), 0, 1)
   watch(volume, (gain) => setGain(gain), { immediate: true })
 
   const mute = () => {