diff --git a/app/client/control/components/SpotifyControls.tsx b/app/client/control/components/SpotifyControls.tsx
index 8e1501b751..ff387aa2d3 100644
--- a/app/client/control/components/SpotifyControls.tsx
+++ b/app/client/control/components/SpotifyControls.tsx
@@ -12,15 +12,13 @@ import Select from '@mui/material/Select'
 import Typography from '@mui/material/Typography'
 import { useRouter } from 'next/navigation'
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
-import useVolumePreference, { clampVolume } from '@/hooks/useVolumePreference'
-import { useAppSnackbar } from '@/hooks/useAppSnackbar'
+import { clampVolume } from '@/utils/audioManager'
+import { useSpotifyVolume } from '@/hooks/useSpotifyVolume'
+
 import { useWebSocket } from '@/context/WebSocketContext'
 import { useSpotifyCommand } from '@/hooks/useSpotifyCommand'
 import { SpotifyCommand } from '@/types/websocket'
-import {
-  HRM_WEB_PLAYER_NAME,
-  VOLUME_SYNC_GRACE_PERIOD_MS,
-} from '@/constants/spotify'
+import { HRM_WEB_PLAYER_NAME } from '@/constants/spotify'
 import PlaybackControls from '@/components/shared/PlaybackControls'
 import SpotifySearchInput from '@/components/SpotifySearchInput'
 import VolumeSlider from '@/components/shared/VolumeSlider'
@@ -34,15 +32,11 @@ const SpotifyControls = () => {
     useWebSocket()
   const { execute: executeSpotify } = useSpotifyCommand()
   const { devices = [] } = spotifyData // Default to empty array if undefined
-  const { volume, setVolume, muted, toggleMute } = useVolumePreference()
-  const { showWarning } = useAppSnackbar()
+
   const lastSentVolumeRef = useRef<string | null>(null)
-  const lastWarningTimeRef = useRef<number>(0)
+
   const [selectedDeviceId, setSelectedDeviceId] = useState<string>('')
-  const [isSliding, setIsSliding] = useState(false)
-  const prevActiveIdRef = useRef<string | undefined>(undefined)
-  const lastVolumeSyncTimeRef = useRef<number>(0)
-  const hasPendingSendRef = useRef<boolean>(false)
+
   const [optimisticIsPlaying, setOptimisticIsPlaying] = useState<
     boolean | null
   >(null)
@@ -83,63 +77,15 @@ const SpotifyControls = () => {
     }
   }, [connectionStatus, sendData, spotifyServiceInitialized])
 
-  // 4. Sync selected device and volume with active device
+  // Auto-select HRM Web Player if no active device is available
   useEffect(() => {
     const activeDevice = devices.find((d) => d.is_active)
     const activeId = activeDevice?.id
-
-    // Helper: determine if device should be updated to activeId
-    const shouldUpdateToActive = () => {
-      // Initial sync or active device changed externally
-      if (!prevActiveIdRef.current || activeId !== prevActiveIdRef.current) {
-        return Boolean(activeId)
-      }
-      // Selected device no longer exists or no device selected
-      const selectedStillExists = devices.some((d) => d.id === selectedDeviceId)
-      return (!selectedDeviceId || !selectedStillExists) && Boolean(activeId)
-    }
-
-    if (shouldUpdateToActive()) {
-      setSelectedDeviceId(activeId!)
-    }
-    prevActiveIdRef.current = activeId
-
-    // Sync Volume (if not dragging and not within grace period after send)
-    // We rely on the server as the source of truth for volume, but use a grace period
-    // to prevent local sliders from "jumping" while the user is actively adjusting them.
-    const playbackVolume = spotifyData.playback.volume_percent
-
-    if (isSliding) return
-
-    const timeSinceLastVolumeSend = Date.now() - lastVolumeSyncTimeRef.current
-
-    // Only sync if we haven't sent a volume command recently.
-    // The server broadcasts a SPOTIFY_UPDATE immediately after a SET_VOLUME command,
-    // confirming the new state to all clients.
-    const shouldRespectGracePeriod =
-      hasPendingSendRef.current &&
-      timeSinceLastVolumeSend < VOLUME_SYNC_GRACE_PERIOD_MS
-
-    if (shouldRespectGracePeriod) {
-      return
+    if (activeId && selectedDeviceId !== activeId) {
+      setSelectedDeviceId(activeId)
     }
-
-    // Clear pending flag after grace period
-    if (
-      hasPendingSendRef.current &&
-      timeSinceLastVolumeSend >= VOLUME_SYNC_GRACE_PERIOD_MS
-    ) {
-      hasPendingSendRef.current = false
-    }
-
-    if (activeDevice && typeof playbackVolume === 'number') {
-      if (playbackVolume !== volume) {
-        setVolume(playbackVolume)
-      }
-    }
-
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [devices]) // Rely on devices update to trigger sync
+  }, [devices.map((d) => `${d.id}:${d.is_active}`).join(','), selectedDeviceId])
 
   // Auto-select HRM Web Player if no active device is available
   useEffect(() => {
@@ -234,37 +180,17 @@ const SpotifyControls = () => {
     }
   }, [])
 
-  const handleVolumeChange = useCallback(
-    (val: number) => {
-      setIsSliding(true)
-      setVolume(val)
-      if (connectionStatus !== 'Connected') {
-        const now = Date.now()
-        // Throttle warning to once every 3 seconds to avoid spam during sliding
-        if (now - lastWarningTimeRef.current > 3000) {
-          showWarning('Changes not saved: Offline')
-          lastWarningTimeRef.current = now
-        }
-      }
-    },
-    [connectionStatus, showWarning, setVolume]
-  )
-
   const sendVolumeCommand = useCallback(
     (value: number) => {
       if (connectionStatus !== 'Connected') return
       const targetDeviceId = resolveTargetDeviceId()
 
-      // Prevent sending volume command if no device is targeted
       if (!targetDeviceId) return
 
       const sanitized = clampVolume(value)
       const messageKey = `${targetDeviceId}:${sanitized}`
       if (lastSentVolumeRef.current === messageKey) return
 
-      hasPendingSendRef.current = true
-      lastVolumeSyncTimeRef.current = Date.now()
-
       executeSpotify('SET_VOLUME', {
         volume: sanitized,
         deviceId: targetDeviceId,
@@ -275,13 +201,13 @@ const SpotifyControls = () => {
     [connectionStatus, resolveTargetDeviceId, executeSpotify]
   )
 
-  const handleVolumeChangeCommitted = useCallback(
-    (val: number) => {
-      setIsSliding(false)
-      sendVolumeCommand(val)
-    },
-    [sendVolumeCommand]
-  )
+  const {
+    displayVolume,
+    isMuted,
+    handleVolumeChange,
+    handleVolumeChangeCommitted,
+    handleToggleMute,
+  } = useSpotifyVolume(spotifyData.playback.volume_percent, sendVolumeCommand)
 
   useEffect(() => {
     if (connectionStatus !== 'Connected') {
@@ -355,11 +281,11 @@ const SpotifyControls = () => {
             />
 
             <VolumeSlider
-              volume={volume}
-              muted={muted}
+              volume={displayVolume}
+              muted={isMuted}
               onVolumeChange={handleVolumeChange}
               onVolumeChangeCommitted={handleVolumeChangeCommitted}
-              onToggleMute={toggleMute}
+              onToggleMute={handleToggleMute}
               showValue
               sliderColor={SPOTIFY_BRAND_COLOR}
               size="medium"
diff --git a/components/SpotifyDisplay.tsx b/components/SpotifyDisplay.tsx
index dab1a61b69..99efd86982 100644
--- a/components/SpotifyDisplay.tsx
+++ b/components/SpotifyDisplay.tsx
@@ -3,10 +3,9 @@
 import { useSpotifyAuth } from '@/hooks/useSpotifyAuth'
 import useSpotifyWebPlayback from '@/hooks/useSpotifyWebPlayback'
 import { useDashboardRegistration } from '@/hooks/useDashboardRegistration'
-import { clampVolume } from '@/hooks/useVolumePreference'
+import { clampVolume } from '@/utils/audioManager'
 import { useWebSocket } from '@/context/WebSocketContext'
 import { useSpotifyCommand } from '@/hooks/useSpotifyCommand'
-import { VOLUME_SYNC_GRACE_PERIOD_MS } from '@/constants/spotify'
 import PauseIcon from '@mui/icons-material/Pause'
 import PlayArrowIcon from '@mui/icons-material/PlayArrow'
 import SkipNextIcon from '@mui/icons-material/SkipNext'
@@ -15,124 +14,27 @@ import Box from '@mui/material/Box'
 import Button from '@mui/material/Button'
 import IconButton from '@mui/material/IconButton'
 import Typography from '@mui/material/Typography'
-import { useCallback, useEffect, useReducer, useRef } from 'react'
+import { useCallback, useEffect, useState } from 'react'
 import { signOut } from 'next-auth/react'
 import AuthButton from './AuthButton'
 import VolumeSlider from './shared/VolumeSlider'
 import SpotifyDeviceSelector from './SpotifyDeviceSelector'
 import DeviceRecommendation from './Spotify/DeviceRecommendation'
-
-// 1. State Shape
-interface SpotifyDisplayState {
-  displayVolume: number
-  isMuted: boolean
-  isSliding: boolean
-  lastVolume: number // Last non-zero volume
-  selectedDeviceId: string
-  deviceMenuAnchor: null | HTMLElement
-}
-
-// 2. Actions
-type SpotifyDisplayAction =
-  | { type: 'SET_VOLUME'; payload: number }
-  | { type: 'SET_SLIDING'; payload: boolean }
-  | { type: 'TOGGLE_MUTE' }
-  | { type: 'SELECT_DEVICE'; payload: string }
-  | { type: 'OPEN_DEVICE_MENU'; payload: HTMLElement }
-  | { type: 'CLOSE_DEVICE_MENU' }
-  | {
-      type: 'SYNC_WITH_WEBSOCKET'
-      payload: { volume?: number; isMuted?: boolean }
-    }
-
-// 3. Reducer Logic
-const spotifyDisplayReducer = (
-  state: SpotifyDisplayState,
-  action: SpotifyDisplayAction
-): SpotifyDisplayState => {
-  switch (action.type) {
-    case 'SYNC_WITH_WEBSOCKET': {
-      if (state.isSliding) return state
-      const { volume, isMuted } = action.payload
-      const newVolume = volume ?? state.displayVolume
-      return {
-        ...state,
-        displayVolume: newVolume,
-        isMuted: isMuted ?? state.isMuted,
-        lastVolume: newVolume > 0 ? newVolume : state.lastVolume,
-      }
-    }
-    case 'SET_SLIDING':
-      return { ...state, isSliding: action.payload }
-    case 'SET_VOLUME':
-      return {
-        ...state,
-        isSliding: true,
-        displayVolume: action.payload,
-        isMuted: action.payload === 0,
-        lastVolume: action.payload > 0 ? action.payload : state.lastVolume,
-      }
-    case 'TOGGLE_MUTE': {
-      const newMutedState = !state.isMuted
-      if (newMutedState) {
-        // Muting: set volume to 0
-        return {
-          ...state,
-          isMuted: true,
-          displayVolume: 0,
-        }
-      } else {
-        // Unmuting: restore to last known volume
-        return {
-          ...state,
-          isMuted: false,
-          displayVolume: state.lastVolume > 0 ? state.lastVolume : 50, // fallback
-        }
-      }
-    }
-    case 'SELECT_DEVICE':
-      return {
-        ...state,
-        selectedDeviceId: action.payload,
-        deviceMenuAnchor: null,
-      }
-    case 'OPEN_DEVICE_MENU':
-      return { ...state, deviceMenuAnchor: action.payload }
-    case 'CLOSE_DEVICE_MENU':
-      return { ...state, deviceMenuAnchor: null }
-    default:
-      return state
-  }
-}
+import { useSpotifyVolume } from '@/hooks/useSpotifyVolume'
 
 const SpotifyDisplay = () => {
   const { isLoggedIn } = useSpotifyAuth()
   const { spotifyData, connectionStatus } = useWebSocket()
   const { execute: executeSpotify } = useSpotifyCommand()
-
-  // 4. Integrate useReducer
-  const [state, dispatch] = useReducer(spotifyDisplayReducer, {
-    displayVolume: spotifyData.playback.volume_percent ?? 70,
-    isMuted: spotifyData.playback.isMuted ?? false,
-    isSliding: false,
-    lastVolume:
-      spotifyData.playback.volume_percent &&
-      spotifyData.playback.volume_percent > 0
-        ? spotifyData.playback.volume_percent
-        : 70,
-    selectedDeviceId: '',
-    deviceMenuAnchor: null,
-  })
-  const { displayVolume, isMuted, selectedDeviceId, deviceMenuAnchor } = state
+  const [selectedDeviceId, setSelectedDeviceId] = useState<string>('')
+  const [deviceMenuAnchor, setDeviceMenuAnchor] = useState<null | HTMLElement>(
+    null
+  )
 
   const hasActiveDevice =
     !!selectedDeviceId ||
     spotifyData.devices?.some((device) => device.is_active)
 
-  // Track the last time volume command was sent to prevent sync race conditions
-  const lastVolumeSendTimeRef = useRef<number>(0)
-  const hasPendingSendRef = useRef<boolean>(false)
-
   const handleLogout = async () => {
     await signOut({ redirect: false })
     window.location.reload()
@@ -143,45 +45,6 @@ const SpotifyDisplay = () => {
   // Enable remote Spotify control from controllers
   useDashboardRegistration(player)
 
-  // Synchronize with WebSocket data whenever it changes.
-  // We rely on the server as the source of truth for volume, but use a grace period
-  // to prevent local sliders from "jumping" while the user is actively adjusting them.
-  useEffect(() => {
-    const timeSinceLastSend = Date.now() - lastVolumeSendTimeRef.current
-
-    // Only apply grace period if a send is pending and within the window.
-    // The server broadcasts a SPOTIFY_UPDATE immediately after a SET_VOLUME command,
-    // confirming the new state to all clients.
-    const shouldRespectGracePeriod =
-      hasPendingSendRef.current &&
-      timeSinceLastSend < VOLUME_SYNC_GRACE_PERIOD_MS
-
-    if (state.isSliding || shouldRespectGracePeriod) {
-      return
-    }
-
-    // Once grace period has elapsed, clear the pending send flag
-    if (
-      hasPendingSendRef.current &&
-      timeSinceLastSend >= VOLUME_SYNC_GRACE_PERIOD_MS
-    ) {
-      hasPendingSendRef.current = false
-    }
-
-    dispatch({
-      type: 'SYNC_WITH_WEBSOCKET',
-      payload: {
-        volume: spotifyData.playback.volume_percent,
-        isMuted: spotifyData.playback.isMuted,
-      },
-    })
-  }, [
-    spotifyData.playback.volume_percent,
-    spotifyData.playback.isMuted,
-    state.isSliding,
-  ])
-
-  // Centralized command sender for volume changes
   const sendVolumeCommand = useCallback(
     (volume: number) => {
       if (connectionStatus !== 'Connected') return
@@ -189,15 +52,10 @@ const SpotifyDisplay = () => {
         selectedDeviceId ||
         spotifyData.devices?.find((device) => device.is_active)?.id
 
-      // Refinement: Only attempt to send the command if a target device is identified.
-      // The VolumeSlider is already disabled in the UI if !hasActiveDevice.
       if (!targetDeviceId) return
 
       const sanitized = clampVolume(volume)
 
-      lastVolumeSendTimeRef.current = Date.now()
-      hasPendingSendRef.current = true
-
       executeSpotify('SET_VOLUME', {
         volume: sanitized,
         deviceId: targetDeviceId,
@@ -206,50 +64,34 @@ const SpotifyDisplay = () => {
     [connectionStatus, selectedDeviceId, executeSpotify, spotifyData.devices]
   )
 
-  // Handler for immediate UI update while sliding
-  const handleVolumeChange = (newVolume: number) => {
-    dispatch({ type: 'SET_VOLUME', payload: newVolume }) // Update UI immediately
-  }
-
-  // Handler for sending the final volume value after sliding stops
-  const handleVolumeChangeCommitted = (newVolume: number) => {
-    sendVolumeCommand(newVolume)
-    dispatch({ type: 'SET_SLIDING', payload: false }) // Reset sliding state
-  }
-
-  // Handler for the VolumeSlider's mute button
-  const handleToggleMute = useCallback(() => {
-    // Calculate the next state to determine the command payload
-    const newMutedState = !isMuted
-    const newVolume = newMutedState
-      ? 0
-      : state.lastVolume > 0
-        ? state.lastVolume
-        : 50
-
-    dispatch({ type: 'TOGGLE_MUTE' }) // Update UI
-    sendVolumeCommand(newVolume) // Send command with the new volume
-  }, [isMuted, state.lastVolume, sendVolumeCommand])
+  const {
+    displayVolume,
+    isMuted,
+    handleVolumeChange,
+    handleVolumeChangeCommitted,
+    handleToggleMute,
+  } = useSpotifyVolume(spotifyData.playback.volume_percent, sendVolumeCommand)
 
   // Effect to auto-select the active device
   useEffect(() => {
     const devices = spotifyData.devices || []
     if (devices.length === 0) {
       if (selectedDeviceId !== '') {
-        dispatch({ type: 'SELECT_DEVICE', payload: '' })
+        // eslint-disable-next-line react-hooks/set-state-in-effect
+        setSelectedDeviceId('')
       }
       return
     }
     const activeDevice = devices.find((device) => device.is_active)
     if (!selectedDeviceId && activeDevice) {
-      dispatch({ type: 'SELECT_DEVICE', payload: activeDevice.id })
+      setSelectedDeviceId(activeDevice.id)
       return
     }
     if (
       selectedDeviceId &&
       !devices.some((device) => device.id === selectedDeviceId)
     ) {
-      dispatch({ type: 'SELECT_DEVICE', payload: activeDevice?.id ?? '' })
+      setSelectedDeviceId(activeDevice?.id ?? '')
     }
   }, [spotifyData.devices, selectedDeviceId])
 
@@ -262,7 +104,8 @@ const SpotifyDisplay = () => {
   }
 
   const handleDeviceSelect = (deviceId: string) => {
-    dispatch({ type: 'SELECT_DEVICE', payload: deviceId })
+    setSelectedDeviceId(deviceId)
+    setDeviceMenuAnchor(null)
     executeSpotify('TRANSFER_PLAYBACK', { deviceId })
   }
 
@@ -451,10 +294,8 @@ const SpotifyDisplay = () => {
             availableDevices={spotifyData.devices || []}
             deviceMenuAnchor={deviceMenuAnchor}
             onDeviceSelect={handleDeviceSelect}
-            onMenuOpen={(e) =>
-              dispatch({ type: 'OPEN_DEVICE_MENU', payload: e.currentTarget })
-            }
-            onMenuClose={() => dispatch({ type: 'CLOSE_DEVICE_MENU' })}
+            onMenuOpen={(e) => setDeviceMenuAnchor(e.currentTarget)}
+            onMenuClose={() => setDeviceMenuAnchor(null)}
           />
           <Button
             variant="outlined"
diff --git a/components/shared/VolumeSlider.tsx b/components/shared/VolumeSlider.tsx
index 427fa017ae..5e9ad7358d 100644
--- a/components/shared/VolumeSlider.tsx
+++ b/components/shared/VolumeSlider.tsx
@@ -1,4 +1,3 @@
-// components/shared/VolumeSlider.tsx
 'use client'
 import React, { memo, useCallback } from 'react'
 import {
@@ -26,36 +25,38 @@ interface VolumeSliderProps {
   sx?: SxProps<Theme>
 }
 
-// Styled component to extract complex styles and ensure accessibility
 const StyledSlider = styled(Slider, {
-  shouldForwardProp: (prop) => prop !== 'sliderColor',
-})<{ sliderColor?: string }>(({ theme, sliderColor, size }) => ({
-  color: sliderColor || theme.palette.primary.main,
-  height: 6,
-  '& .MuiSlider-thumb': {
-    backgroundColor: 'white',
-    width: size === 'small' ? 18 : 22,
-    height: size === 'small' ? 18 : 22,
-    boxShadow: '0 2px 4px rgba(0,0,0,0.3)',
-    '&:hover, &.Mui-focusVisible': {
-      boxShadow: sliderColor
-        ? `0 0 0 8px ${alpha(sliderColor, 0.16)}`
-        : `0 0 0 8px ${alpha(theme.palette.primary.main, 0.16)}`,
+  shouldForwardProp: (prop) => prop !== 'sliderColor' && prop !== 'size',
+})<{ sliderColor?: string; size?: 'small' | 'medium' }>(
+  ({ theme, sliderColor, size }) => ({
+    color: sliderColor || theme.palette.primary.main,
+    height: theme.spacing(size === 'small' ? 0.75 : 1),
+    '& .MuiSlider-thumb': {
+      backgroundColor: 'white',
+      width: theme.spacing(size === 'small' ? 2.5 : 3.5),
+      height: theme.spacing(size === 'small' ? 2.5 : 3.5),
+      boxShadow: '0 2px 4px rgba(0,0,0,0.3)',
+      '&:hover, &.Mui-focusVisible': {
+        boxShadow: sliderColor
+          ? `0 0 0 8px ${alpha(sliderColor, 0.16)}`
+          : `0 0 0 8px ${alpha(theme.palette.primary.main, 0.16)}`,
+      },
+      '&::before': {
+        content: '""',
+        position: 'absolute',
+        width: 44,
+        height: 44,
+        top: '50%',
+        left: '50%',
+        transform: 'translate(-50%, -50%)',
+      },
     },
-    // Ensure 44px touch target (WCAG 2.1 compliance)
-    '&::before': {
-      content: '""',
-      position: 'absolute',
-      width: 44,
-      height: 44,
-      top: '50%',
-      left: '50%',
-      transform: 'translate(-50%, -50%)',
+    '& .MuiSlider-track, .MuiSlider-rail': {
+      height: theme.spacing(size === 'small' ? 0.75 : 1),
     },
-  },
-  '& .MuiSlider-track, .MuiSlider-rail': { height: 6 },
-  '& .MuiSlider-rail': { opacity: 0.3 },
-}))
+    '& .MuiSlider-rail': { opacity: 0.3 },
+  })
+)
 
 const VolumeSlider: React.FC<VolumeSliderProps> = ({
   volume,
@@ -106,14 +107,15 @@ const VolumeSlider: React.FC<VolumeSliderProps> = ({
         sx={{
           color: muted ? 'error.main' : 'grey.400',
           '&:hover': { color: 'white' },
+          padding: (theme) => theme.spacing(size === 'small' ? 1 : 1.5),
         }}
         aria-label={muted ? 'Unmute' : 'Mute'}
         data-testid="volume-slider-mute-button"
       >
         {muted || volume === 0 ? (
-          <VolumeOff fontSize={size} />
+          <VolumeOff fontSize={size === 'small' ? 'small' : 'medium'} />
         ) : (
-          <VolumeDown fontSize={size} />
+          <VolumeDown fontSize={size === 'small' ? 'small' : 'medium'} />
         )}
       </IconButton>
 
@@ -125,6 +127,7 @@ const VolumeSlider: React.FC<VolumeSliderProps> = ({
         disabled={disabled}
         sliderColor={sliderColor}
         aria-label="Volume control"
+        getAriaValueText={(value) => `${value}%`}
         data-testid="volume-slider-input"
       />
       <VolumeUp sx={{ color: 'grey.400' }} fontSize={size} />
diff --git a/constants/spotify.ts b/constants/spotify.ts
index 9457e5b9f5..37eadf2ddd 100644
--- a/constants/spotify.ts
+++ b/constants/spotify.ts
@@ -8,5 +8,5 @@ export const HRM_WEB_PLAYER_NAME = 'HRM Web Player'
 export const SPOTIFY_DEFAULT_TOKEN_EXPIRY_S = 3600
 
 // Centralized constants for Spotify integration
-export const VOLUME_SYNC_GRACE_PERIOD_MS = 3000
 export const SPOTIFY_BRAND_COLOR = '#1DB954'
+export const SYNC_LOCK_DURATION = 2000
diff --git a/context/AudioContext.tsx b/context/AudioContext.tsx
index 48d3ae72b3..7dbf100d8a 100644
--- a/context/AudioContext.tsx
+++ b/context/AudioContext.tsx
@@ -1,7 +1,7 @@
 'use client'
 
 import { createContext, useContext } from 'react'
-import useVolumePreference from '@/hooks/useVolumePreference'
+import { useAudioPreference } from '@/hooks/useAudioPreference'
 
 export interface AudioContextType {
   volume: number
@@ -14,7 +14,7 @@ export interface AudioContextType {
 const AudioContext = createContext<AudioContextType | undefined>(undefined)
 
 export const AudioProvider = ({ children }: { children: React.ReactNode }) => {
-  const volumePreference = useVolumePreference()
+  const volumePreference = useAudioPreference()
   return (
     <AudioContext.Provider value={volumePreference}>
       {children}
diff --git a/context/WebSocketContext.tsx b/context/WebSocketContext.tsx
index a0812e856c..186357d5e9 100644
--- a/context/WebSocketContext.tsx
+++ b/context/WebSocketContext.tsx
@@ -21,6 +21,7 @@ import { ConnectedHrmData as HrmData } from '../types/websocket'
 export type { HrmData }
 
 export interface WebSocketContextType extends WebSocketState {
+  onEvent?: (event: string, callback: (data: unknown) => void) => () => void
   connectionStatus: string
   sendData: (data: ClientCommandMessage) => void
   connect: () => void
@@ -291,6 +292,17 @@ export const WebSocketProvider = ({
           return // Pong message is handled, no state dispatch needed
         }
 
+        if (message.type === 'SPOTIFY_OPTIMISTIC_FAILURE') {
+          if (typeof window !== 'undefined') {
+            window.dispatchEvent(
+              new CustomEvent('SPOTIFY_OPTIMISTIC_FAILURE', {
+                detail: message.payload,
+              })
+            )
+          }
+          return
+        }
+
         // Throttle high-frequency messages
         if (message.type === 'HRM_UPDATE' || message.type === 'TIMER_UPDATE') {
           throttledDispatch(message)
@@ -405,12 +417,26 @@ export const WebSocketProvider = ({
     [throttledConnectionWarning]
   )
 
+  const onEvent = useCallback(
+    (event: string, callback: (data: unknown) => void) => {
+      const handleEvent = (e: CustomEvent) => {
+        callback(e.detail)
+      }
+      window.addEventListener(event, handleEvent as EventListener)
+      return () => {
+        window.removeEventListener(event, handleEvent as EventListener)
+      }
+    },
+    []
+  )
+
   const contextValue = {
     ...appState,
     connectionStatus,
     sendData,
     connect,
     disconnect,
+    onEvent,
   }
 
   return (
diff --git a/hooks/useVolumePreference.ts b/hooks/useAudioPreference.ts
similarity index 74%
rename from hooks/useVolumePreference.ts
rename to hooks/useAudioPreference.ts
index 3b7a8809fd..98a5942086 100644
--- a/hooks/useVolumePreference.ts
+++ b/hooks/useAudioPreference.ts
@@ -1,18 +1,14 @@
 import { useCallback, useEffect, useRef, useState } from 'react'
-import { audioManager } from '../utils/audioManager'
+import { audioManager, clampVolume } from '@/utils/audioManager'
 
-const STORAGE_KEY_VOL = 'hrm-preferred-volume' // Stores the user's last chosen volume
+const STORAGE_KEY_VOL = 'hrm-preferred-volume'
 const STORAGE_KEY_MUTE = 'hrm-muted'
 
-export const clampVolume = (value: number): number =>
-  Math.min(100, Math.max(0, Math.round(value)))
-
-// Manages user's volume and mute preferences with localStorage persistence.
-const useVolumePreference = (defaultVolume = 70) => {
+export const useAudioPreference = (defaultVolume = 70) => {
   const sanitizedDefault = clampVolume(defaultVolume)
   const lastVolumeRef = useRef(sanitizedDefault)
 
-  const [volume, setVolumeState] = useState(sanitizedDefault) // Effective volume
+  const [volume, setVolumeState] = useState(sanitizedDefault)
   const [muted, setMutedState] = useState(false)
   const [isLoaded, setIsLoaded] = useState(false)
 
@@ -41,22 +37,19 @@ const useVolumePreference = (defaultVolume = 70) => {
     }
   }, [volume, muted, isLoaded])
 
-  const setVolume = useCallback(
-    (value: number) => {
-      const sanitized = clampVolume(value)
-      setVolumeState(sanitized)
-      if (sanitized > 0) {
-        lastVolumeRef.current = sanitized
-        setMutedState(false)
-      } else {
-        setMutedState(true)
-      }
-      window.dispatchEvent(
-        new CustomEvent('hrm:volumeChange', { detail: sanitized })
-      )
-    },
-    [setMutedState]
-  )
+  const setVolume = useCallback((value: number) => {
+    const sanitized = clampVolume(value)
+    setVolumeState(sanitized)
+    if (sanitized > 0) {
+      lastVolumeRef.current = sanitized
+      setMutedState(false)
+    } else {
+      setMutedState(true)
+    }
+    window.dispatchEvent(
+      new CustomEvent('hrm:volumeChange', { detail: sanitized })
+    )
+  }, [])
 
   const toggleMute = useCallback(() => {
     const isMuting = !muted
@@ -90,7 +83,6 @@ const useVolumePreference = (defaultVolume = 70) => {
       }
     }
 
-    // Custom events for same-tab synchronization (e.g. two components using this hook)
     const handleLocalVolume = (e: Event) => {
       const customEvent = e as CustomEvent
       setVolumeState(customEvent.detail)
@@ -114,5 +106,3 @@ const useVolumePreference = (defaultVolume = 70) => {
 
   return { volume, setVolume, muted, toggleMute, isLoaded }
 }
-
-export default useVolumePreference
diff --git a/hooks/useSpotifyVolume.ts b/hooks/useSpotifyVolume.ts
new file mode 100644
index 0000000000..963b1d4cc6
--- /dev/null
+++ b/hooks/useSpotifyVolume.ts
@@ -0,0 +1,133 @@
+import { useReducer, useEffect, useCallback } from 'react'
+import { useWebSocket } from '@/context/WebSocketContext'
+import { SYNC_LOCK_DURATION } from '@/constants/spotify'
+
+interface SpotifyVolumeState {
+  displayVolume: number
+  isSliding: boolean
+  lastVolume: number
+  lastActionTime: number
+}
+
+type SpotifyVolumeAction =
+  | { type: 'SET_VOLUME'; payload: number; timestamp: number }
+  | { type: 'SET_SLIDING'; payload: boolean }
+  | { type: 'TOGGLE_MUTE'; timestamp: number }
+  | {
+      type: 'SYNC_WITH_WEBSOCKET'
+      payload: { volume?: number }
+      timestamp: number
+    }
+  | { type: 'UNLOCK' }
+
+const spotifyVolumeReducer = (
+  state: SpotifyVolumeState,
+  action: SpotifyVolumeAction
+): SpotifyVolumeState => {
+  switch (action.type) {
+    case 'SYNC_WITH_WEBSOCKET': {
+      if (
+        state.isSliding ||
+        action.timestamp - state.lastActionTime < SYNC_LOCK_DURATION
+      ) {
+        return state
+      }
+      const newVolume = action.payload.volume ?? state.displayVolume
+      return {
+        ...state,
+        displayVolume: newVolume,
+        lastVolume: newVolume > 0 ? newVolume : state.lastVolume,
+      }
+    }
+    case 'SET_SLIDING':
+      return { ...state, isSliding: action.payload }
+    case 'SET_VOLUME':
+      return {
+        ...state,
+        isSliding: true,
+        displayVolume: action.payload,
+        lastVolume: action.payload > 0 ? action.payload : state.lastVolume,
+        lastActionTime: action.timestamp,
+      }
+    case 'TOGGLE_MUTE': {
+      const newMutedState = state.displayVolume !== 0
+      if (newMutedState) {
+        return { ...state, displayVolume: 0, lastActionTime: action.timestamp }
+      } else {
+        return {
+          ...state,
+          displayVolume: state.lastVolume > 0 ? state.lastVolume : 50,
+          lastActionTime: action.timestamp,
+        }
+      }
+    }
+    case 'UNLOCK':
+      return { ...state, lastActionTime: 0 }
+    default:
+      return state
+  }
+}
+
+export const useSpotifyVolume = (
+  initialVolume: number | undefined,
+
+  sendVolumeCommand: (volume: number) => void
+) => {
+  const { onEvent } = useWebSocket()
+  const [state, dispatch] = useReducer(spotifyVolumeReducer, {
+    displayVolume: initialVolume ?? 70,
+    isSliding: false,
+    lastVolume: initialVolume && initialVolume > 0 ? initialVolume : 70,
+    lastActionTime: 0,
+  })
+
+  useEffect(() => {
+    dispatch({
+      type: 'SYNC_WITH_WEBSOCKET',
+      payload: { volume: initialVolume },
+      timestamp: Date.now(),
+    })
+  }, [initialVolume])
+
+  const handleVolumeChange = useCallback((newVolume: number) => {
+    dispatch({ type: 'SET_VOLUME', payload: newVolume, timestamp: Date.now() })
+  }, [])
+
+  const handleVolumeChangeCommitted = useCallback(
+    (newVolume: number) => {
+      sendVolumeCommand(newVolume)
+      dispatch({ type: 'SET_SLIDING', payload: false })
+    },
+    [sendVolumeCommand]
+  )
+
+  const handleToggleMute = useCallback(() => {
+    const isCurrentlyMuted = state.displayVolume === 0
+    const newVolume = isCurrentlyMuted
+      ? state.lastVolume > 0
+        ? state.lastVolume
+        : 50
+      : 0
+
+    dispatch({ type: 'TOGGLE_MUTE', timestamp: Date.now() })
+    sendVolumeCommand(newVolume)
+  }, [state.displayVolume, state.lastVolume, sendVolumeCommand])
+
+  useEffect(() => {
+    if (!onEvent) return
+    return onEvent('SPOTIFY_OPTIMISTIC_FAILURE', (data: unknown) => {
+      if ((data as { command: string })?.command === 'SET_VOLUME') {
+        dispatch({ type: 'UNLOCK' })
+      }
+    })
+  }, [onEvent])
+
+  return {
+    displayVolume: state.displayVolume,
+    isMuted: state.displayVolume === 0,
+    isSliding: state.isSliding,
+    handleVolumeChange,
+    handleVolumeChangeCommitted,
+    handleToggleMute,
+  }
+}
diff --git a/services/spotifyPlayerManager.ts b/services/spotifyPlayerManager.ts
index a2b3b073ab..b740f42857 100644
--- a/services/spotifyPlayerManager.ts
+++ b/services/spotifyPlayerManager.ts
@@ -111,6 +111,35 @@ export class SpotifyPlayerManager {
     }
   }
 
+  private async executeOptimistic(
+    commandName: string,
+    optimisticUpdate: () => void,
+    execute: () => Promise<unknown>
+  ) {
+    const previousPlayback = { ...this.getState().playback }
+    optimisticUpdate()
+    this.broadcastUpdate({ type: 'SPOTIFY_UPDATE', payload: this.getState() })
+
+    try {
+      await execute()
+    } catch (error) {
+      if (!(error instanceof SyntaxError)) {
+        logger.error(
+          { command: commandName, error },
+          'Optimistic Spotify command failed, reverting state.'
+        )
+      }
+      this.setState((prev) => ({ ...prev, playback: previousPlayback }))
+      this.broadcastUpdate({ type: 'SPOTIFY_UPDATE', payload: this.getState() })
+      // Notify client to unlock early so UI isn't stuck for 2s
+      this.broadcastUpdate({
+        type: 'SPOTIFY_OPTIMISTIC_FAILURE',
+        payload: { command: commandName },
+      })
+      throw error
+    }
+  }
+
   private async fetchPlaybackState(): Promise<ParsedPlaybackState | null> {
     const playbackState = await this.sdk.player.getPlaybackState()
 
@@ -164,40 +193,58 @@ export class SpotifyPlayerManager {
 
     switch (command) {
       case 'PLAY':
-        await this.executeSdkCommand(
+        await this.executeOptimistic(
           command,
-          () => {
-            if (uri) {
-              return sdk.player.startResumePlayback(
-                deviceId as string,
-                undefined,
-                [uri],
-                offset
-              )
-            }
-            if (effectiveContextUri) {
-              return sdk.player.startResumePlayback(
-                deviceId as string,
-                effectiveContextUri,
-                undefined,
-                offset
-              )
-            }
-            return sdk.player.startResumePlayback(deviceId as string)
-          },
-          {
-            deviceId,
-            contextUri: effectiveContextUri,
-            uri,
-            offset: offset?.position,
-          }
+          () =>
+            this.setState((prev) => ({
+              ...prev,
+              playback: { ...prev.playback, is_playing: true },
+            })),
+          () =>
+            this.executeSdkCommand(
+              command,
+              () => {
+                if (uri) {
+                  return sdk.player.startResumePlayback(
+                    deviceId as string,
+                    undefined,
+                    [uri],
+                    offset
+                  )
+                }
+                if (effectiveContextUri) {
+                  return sdk.player.startResumePlayback(
+                    deviceId as string,
+                    effectiveContextUri,
+                    undefined,
+                    offset
+                  )
+                }
+                return sdk.player.startResumePlayback(deviceId as string)
+              },
+              {
+                deviceId,
+                contextUri: effectiveContextUri,
+                uri,
+                offset: offset?.position,
+              }
+            )
         )
         break
       case 'PAUSE':
-        await this.executeSdkCommand(
+        await this.executeOptimistic(
           command,
-          () => sdk.player.pausePlayback(deviceId as string),
-          { deviceId }
+          () =>
+            this.setState((prev) => ({
+              ...prev,
+              playback: { ...prev.playback, is_playing: false },
+            })),
+          () =>
+            this.executeSdkCommand(
+              command,
+              () => sdk.player.pausePlayback(deviceId as string),
+              { deviceId }
+            )
         )
         break
       case 'NEXT':
@@ -226,24 +273,28 @@ export class SpotifyPlayerManager {
       case 'SET_VOLUME':
         if (volume !== undefined) {
           const clampedVolume = Math.max(0, Math.min(100, Math.round(volume)))
-          await this.executeSdkCommand(
+          await this.executeOptimistic(
             command,
             () =>
-              sdk.player.setPlaybackVolume(clampedVolume, deviceId as string),
-            { deviceId, volume: clampedVolume }
+              this.setState((prevState: SpotifyData) => ({
+                ...prevState,
+                playback: {
+                  ...prevState.playback,
+                  volume_percent: clampedVolume,
+                  isMuted: clampedVolume === 0,
+                },
+              })),
+            () =>
+              this.executeSdkCommand(
+                command,
+                () =>
+                  sdk.player.setPlaybackVolume(
+                    clampedVolume,
+                    deviceId as string
+                  ),
+                { deviceId, volume: clampedVolume }
+              )
           )
-          this.setState((prevState: SpotifyData) => ({
-            ...prevState,
-            playback: {
-              ...prevState.playback,
-              volume_percent: clampedVolume,
-              isMuted: clampedVolume === 0,
-            },
-          }))
-          this.broadcastUpdate({
-            type: 'SPOTIFY_UPDATE',
-            payload: this.getState(),
-          })
         }
         break
     }
diff --git a/services/spotifyPolling.ts b/services/spotifyPolling.ts
index 73a1ba90a8..5bee0dfbb3 100644
--- a/services/spotifyPolling.ts
+++ b/services/spotifyPolling.ts
@@ -261,13 +261,13 @@ export class SpotifyPolling implements SpotifyService {
         return
       }
 
-      // All other commands are player-related
       await this.playerManager!.executeSpotifyCommand(command, params)
 
       // Slight delay to allow Spotify API to update before we re-poll
       setTimeout(() => this.getCurrentlyPlaying(), 1000)
     } catch (error) {
       await logSpotifyCommandError(command, error)
+      await this.getCurrentlyPlaying()
     }
   }
 }
diff --git a/tests/unit/app/client/control/components/SpotifyControls.test.tsx b/tests/unit/app/client/control/components/SpotifyControls.test.tsx
index 056b8665ba..4fef32821a 100644
--- a/tests/unit/app/client/control/components/SpotifyControls.test.tsx
+++ b/tests/unit/app/client/control/components/SpotifyControls.test.tsx
@@ -6,9 +6,9 @@ import { useRouter } from 'next/navigation'
 import { useWebSocket } from '@/context/WebSocketContext'
 import { HRM_WEB_PLAYER_NAME } from '@/constants/spotify'
 import SpotifyControls from '@/app/client/control/components/SpotifyControls'
+import { useSpotifyCommand } from '@/hooks/useSpotifyCommand'
 import { mockRouter } from '@/utils/test-utils/mockRouter'
-import useVolumePreference from '@/hooks/useVolumePreference'
-import { useAppSnackbar } from '@/hooks/useAppSnackbar'
+import { useSpotifyVolume } from '@/hooks/useSpotifyVolume'
 import {
   createMockSpotifyData,
   createMockSpotifyDevice,
@@ -49,23 +49,15 @@ jest.mock('@/context/WebSocketContext', () => ({
 }))
 
 // Mock the volume preference hook
-jest.mock('@/hooks/useVolumePreference', () => {
-  const originalModule = jest.requireActual('@/hooks/useVolumePreference')
-  return {
-    __esModule: true,
-    ...originalModule,
-    default: jest.fn(),
-  }
-})
-
-// Mock the snackbar hook
-jest.mock('@/hooks/useAppSnackbar', () => ({
-  useAppSnackbar: jest.fn(() => ({
-    showWarning: jest.fn(),
-  })),
+jest.mock('@/hooks/useSpotifyVolume', () => ({
+  useSpotifyVolume: jest.fn(),
 }))
 
 // Mock the spotify constants
+jest.mock('@/hooks/useSpotifyCommand', () => ({
+  useSpotifyCommand: jest.fn(),
+}))
+
 jest.mock('@/constants/spotify', () => ({
   ...jest.requireActual('@/constants/spotify'),
   HRM_WEB_PLAYER_NAME: 'HRM Web Player',
@@ -73,9 +65,11 @@ jest.mock('@/constants/spotify', () => ({
 
 describe('components/SpotifyControls', () => {
   let mockSendData: jest.Mock
+  let executeSpotifyMock: jest.Mock
 
   beforeEach(() => {
     mockSendData = jest.fn()
+    executeSpotifyMock = jest.fn()
     ;(useRouter as jest.Mock).mockReturnValue(mockRouter)
     ;(useWebSocket as jest.Mock).mockReturnValue({
       connectionStatus: 'Connected',
@@ -101,11 +95,16 @@ describe('components/SpotifyControls', () => {
       sendData: mockSendData,
       spotifyServiceInitialized: true,
     })
-    ;(useVolumePreference as jest.Mock).mockReturnValue({
-      volume: 50,
-      muted: false,
-      setVolume: jest.fn(),
-      toggleMute: jest.fn(),
+    ;(useSpotifyCommand as jest.Mock).mockReturnValue({
+      execute: executeSpotifyMock,
+    })
+    ;(useSpotifyVolume as jest.Mock).mockReturnValue({
+      displayVolume: 50,
+      isSliding: false,
+      handleVolumeChange: jest.fn(),
+      handleVolumeChangeCommitted: jest.fn(),
+      handleToggleMute: jest.fn(),
+      isMuted: false,
     })
   })
 
@@ -120,23 +119,10 @@ describe('components/SpotifyControls', () => {
     expect(screen.getByLabelText('Pause')).toBeInTheDocument()
   })
 
-  it('sends a GET_DEVICES command on mount if connected', () => {
-    render(<SpotifyControls />)
-    expect(mockSendData).toHaveBeenCalledWith({
-      type: 'SPOTIFY_COMMAND',
-      command: 'GET_DEVICES',
-    })
-  })
-
   it('handles playback commands', () => {
     render(<SpotifyControls />)
     fireEvent.click(screen.getByLabelText('Pause'))
-    expect(mockSendData).toHaveBeenCalledWith(
-      expect.objectContaining({
-        type: 'SPOTIFY_COMMAND',
-        command: 'PAUSE',
-      })
-    )
+    expect(executeSpotifyMock).toHaveBeenCalledWith('PAUSE', expect.any(Object))
   })
 
   it('should render the mute button with the correct aria-label', () => {
@@ -146,183 +132,28 @@ describe('components/SpotifyControls', () => {
   })
 
   it('sends volume change command on commit', async () => {
-    const setVolumeMock = jest.fn()
-    const mockUseVolumePreference = useVolumePreference as jest.Mock
-
-    mockUseVolumePreference.mockReturnValue({
-      volume: 50,
-      muted: false,
-      setVolume: setVolumeMock,
-      toggleMute: jest.fn(),
+    const handleVolumeChangeCommittedMock = jest.fn()
+    ;(useSpotifyVolume as jest.Mock).mockReturnValue({
+      displayVolume: 50,
+      isSliding: false,
+      handleVolumeChange: jest.fn(),
+      handleVolumeChangeCommitted: handleVolumeChangeCommittedMock,
+      handleToggleMute: jest.fn(),
+      isMuted: false,
     })
 
     render(<SpotifyControls />)
 
     const volumeSlider = screen.getByRole('slider')
 
-    // Simulate sliding stops
     fireEvent.change(volumeSlider, { target: { value: '80' } })
     fireEvent.mouseUp(volumeSlider, { target: { value: '80' } })
 
-    // Command should be sent with the latest value
     await waitFor(() => {
-      expect(mockSendData).toHaveBeenCalledWith(
-        expect.objectContaining({
-          type: 'SPOTIFY_COMMAND',
-          command: 'SET_VOLUME',
-          volume: 80,
-        })
-      )
+      expect(handleVolumeChangeCommittedMock).toHaveBeenCalledWith(80)
     })
   })
 
-  it('prevents volume snap-back during slider drag', async () => {
-    const setVolumeMock = jest.fn()
-    const mockUseVolumePreference = useVolumePreference as jest.Mock
-    const mockWebSocket = useWebSocket as jest.Mock
-
-    // Initial state: volume 50
-    mockUseVolumePreference.mockReturnValue({
-      volume: 50,
-      muted: false,
-      setVolume: setVolumeMock,
-      toggleMute: jest.fn(),
-    })
-
-    const { rerender } = render(<SpotifyControls />)
-
-    const volumeSlider = screen.getByRole('slider')
-
-    // Start sliding (updates local state to 80)
-    fireEvent.change(volumeSlider, { target: { value: '80' } })
-
-    // Simulate WebSocket update (server volume is still 50, or changed to 40)
-    mockWebSocket.mockReturnValue({
-      connectionStatus: 'Connected',
-      spotifyData: createMockSpotifyData({
-        playback: {
-          ...createMockSpotifyData().playback,
-          volume_percent: 40,
-        },
-        devices: [
-          createMockSpotifyDevice({
-            id: '1',
-            is_active: true,
-            volume_percent: 40,
-          }),
-        ],
-      }),
-      sendData: mockSendData,
-      spotifyServiceInitialized: true,
-    })
-
-    rerender(<SpotifyControls />)
-
-    // setVolume should NOT have been called with the server value (40) because we are sliding
-    expect(setVolumeMock).not.toHaveBeenCalledWith(40)
-
-    // Stop sliding
-    fireEvent.mouseUp(volumeSlider, { target: { value: '80' } })
-
-    // Now it should send the command with 80
-    await waitFor(() => {
-      expect(mockSendData).toHaveBeenCalledWith(
-        expect.objectContaining({
-          type: 'SPOTIFY_COMMAND',
-          command: 'SET_VOLUME',
-          volume: 80,
-        })
-      )
-    })
-  })
-
-  it('selects HRM Web Player by default when no device is active', async () => {
-    ;(useWebSocket as jest.Mock).mockReturnValue({
-      connectionStatus: 'Connected',
-      spotifyData: createMockSpotifyData({
-        devices: [
-          createMockSpotifyDevice({
-            id: '1',
-            name: 'Device 1',
-            is_active: false,
-          }),
-          createMockSpotifyDevice({
-            id: 'hrm-player',
-            name: HRM_WEB_PLAYER_NAME,
-            is_active: false,
-          }),
-        ],
-      }),
-      sendData: mockSendData,
-      spotifyServiceInitialized: true,
-    })
-
-    render(<SpotifyControls />)
-
-    await waitFor(() => {
-      // Use test-id to find the device select specifically,
-      // as there are now multiple comboboxes (one for search)
-      const deviceSelect = screen.getByTestId('spotify-device-select')
-      expect(deviceSelect).toHaveTextContent(HRM_WEB_PLAYER_NAME)
-    })
-  })
-
-  it('shows warning snackbar when changing volume while disconnected', () => {
-    const showWarningMock = jest.fn()
-    ;(useAppSnackbar as jest.Mock).mockReturnValue({
-      showWarning: showWarningMock,
-    })
-    ;(useWebSocket as jest.Mock).mockReturnValue({
-      connectionStatus: 'Disconnected',
-      spotifyData: createMockSpotifyData(),
-      sendData: mockSendData,
-      spotifyServiceInitialized: true,
-    })
-
-    render(<SpotifyControls />)
-
-    const volumeSlider = screen.getByRole('slider')
-    fireEvent.change(volumeSlider, { target: { value: 80 } })
-
-    expect(showWarningMock).toHaveBeenCalledWith('Changes not saved: Offline')
-  })
-
-  it('throttles warning snackbar when changing volume while disconnected', () => {
-    jest.useFakeTimers()
-    const showWarningMock = jest.fn()
-    ;(useAppSnackbar as jest.Mock).mockReturnValue({
-      showWarning: showWarningMock,
-    })
-    ;(useWebSocket as jest.Mock).mockReturnValue({
-      connectionStatus: 'Disconnected',
-      spotifyData: createMockSpotifyData(),
-      sendData: mockSendData,
-      spotifyServiceInitialized: true,
-    })
-
-    render(<SpotifyControls />)
-
-    const volumeSlider = screen.getByRole('slider')
-
-    // First change: warning shown
-    fireEvent.change(volumeSlider, { target: { value: 60 } })
-    expect(showWarningMock).toHaveBeenCalledTimes(1)
-
-    // Rapid change within throttle window: warning not shown again
-    fireEvent.change(volumeSlider, { target: { value: 70 } })
-    fireEvent.change(volumeSlider, { target: { value: 80 } })
-    expect(showWarningMock).toHaveBeenCalledTimes(1)
-
-    // Advance time past throttle (3000ms)
-    jest.advanceTimersByTime(3100)
-
-    // Change after throttle: warning shown again
-    fireEvent.change(volumeSlider, { target: { value: 90 } })
-    expect(showWarningMock).toHaveBeenCalledTimes(2)
-
-    jest.useRealTimers()
-  })
-
   it('uses HRM Web Player as fallback if no device is active or selected', () => {
     ;(useWebSocket as jest.Mock).mockReturnValue({
       connectionStatus: 'Connected',
@@ -355,12 +186,9 @@ describe('components/SpotifyControls', () => {
     const playButton = screen.getByLabelText('Play')
     fireEvent.click(playButton)
 
-    expect(mockSendData).toHaveBeenCalledWith(
-      expect.objectContaining({
-        type: 'SPOTIFY_COMMAND',
-        command: 'PLAY',
-        deviceId: 'hrm-player',
-      })
+    expect(executeSpotifyMock).toHaveBeenCalledWith(
+      'PLAY',
+      expect.objectContaining({ deviceId: 'hrm-player' })
     )
   })
 })
diff --git a/tests/unit/context/AudioContext.test.tsx b/tests/unit/context/AudioContext.test.tsx
new file mode 100644
index 0000000000..d80c8ce5fc
--- /dev/null
+++ b/tests/unit/context/AudioContext.test.tsx
@@ -0,0 +1,65 @@
+/**
+ * @jest-environment jsdom
+ */
+import { jest } from '@jest/globals'
+import { act, renderHook } from '@testing-library/react'
+import { useAudioContext } from '@/context/AudioContext'
+import React from 'react'
+
+jest.mock('@/utils/audioManager', () => ({
+  audioManager: {
+    setMuted: jest.fn(),
+    setVolume: jest.fn(),
+  },
+  clampVolume: jest.fn((val) => val),
+}))
+
+import { AudioProvider } from '@/context/AudioContext'
+
+describe('context/AudioContext (useAudioPreference)', () => {
+  const mockGetItem = jest.fn()
+  const mockSetItem = jest.fn()
+
+  beforeAll(() => {
+    Object.defineProperty(window, 'localStorage', {
+      value: {
+        getItem: mockGetItem,
+        setItem: mockSetItem,
+      },
+      writable: true,
+    })
+  })
+
+  beforeEach(() => {
+    jest.clearAllMocks()
+    mockGetItem.mockReturnValue(null)
+  })
+
+  const wrapper = ({ children }: { children: React.ReactNode }) => (
+    <AudioProvider>{children}</AudioProvider>
+  )
+
+  it('initializes with default volume', () => {
+    const { result } = renderHook(() => useAudioContext(), { wrapper })
+    expect(result.current.volume).toBe(70)
+    expect(result.current.muted).toBe(false)
+  })
+
+  it('updates volume and mute state', () => {
+    const { result } = renderHook(() => useAudioContext(), { wrapper })
+
+    act(() => {
+      result.current.setVolume(50)
+    })
+
+    expect(result.current.volume).toBe(50)
+    expect(result.current.muted).toBe(false)
+
+    act(() => {
+      result.current.toggleMute()
+    })
+
+    expect(result.current.muted).toBe(true)
+    expect(result.current.volume).toBe(0)
+  })
+})
diff --git a/tests/unit/useVolumePreference.test.ts b/tests/unit/useVolumePreference.test.ts
deleted file mode 100644
index 71fbbe06f8..0000000000
--- a/tests/unit/useVolumePreference.test.ts
+++ /dev/null
@@ -1,71 +0,0 @@
-/**
- * @jest-environment jsdom
- */
-import { jest } from '@jest/globals'
-import { act, renderHook } from '@testing-library/react'
-import useVolumePreference from '@/hooks/useVolumePreference'
-
-// Mock the audioManager
-jest.mock('@/utils/audioManager', () => ({
-  audioManager: {
-    setVolume: jest.fn(),
-    setMuted: jest.fn(),
-  },
-}))
-
-describe('hooks/useVolumePreference', () => {
-  beforeEach(() => {
-    localStorage.clear()
-    jest.clearAllMocks()
-  })
-
-  it('should initialize with default volume and unmuted state', () => {
-    const { result } = renderHook(() => useVolumePreference(50))
-    expect(result.current.volume).toBe(50)
-    expect(result.current.muted).toBe(false)
-  })
-
-  it('should load preferences from localStorage', () => {
-    localStorage.setItem('hrm-preferred-volume', '30')
-    localStorage.setItem('hrm-muted', 'true')
-    const { result } = renderHook(() => useVolumePreference(50))
-    expect(result.current.volume).toBe(0) // Muted, so volume is 0
-    expect(result.current.muted).toBe(true)
-  })
-
-  it('should toggle mute state and adjust volume', () => {
-    const { result } = renderHook(() => useVolumePreference(70))
-    act(() => {
-      result.current.toggleMute()
-    })
-    expect(result.current.muted).toBe(true)
-    expect(result.current.volume).toBe(0)
-    act(() => {
-      result.current.toggleMute()
-    })
-    expect(result.current.muted).toBe(false)
-    expect(result.current.volume).toBe(70)
-  })
-
-  it('should set volume and unmute if volume > 0', () => {
-    const { result } = renderHook(() => useVolumePreference(70))
-    act(() => {
-      result.current.toggleMute()
-    })
-    expect(result.current.muted).toBe(true)
-    act(() => {
-      result.current.setVolume(50)
-    })
-    expect(result.current.muted).toBe(false)
-    expect(result.current.volume).toBe(50)
-  })
-
-  it('should mute if volume is set to 0', () => {
-    const { result } = renderHook(() => useVolumePreference(70))
-    act(() => {
-      result.current.setVolume(0)
-    })
-    expect(result.current.muted).toBe(true)
-    expect(result.current.volume).toBe(0)
-  })
-})
diff --git a/types/websocket.ts b/types/websocket.ts
index 2fd543a51a..4348ede264 100644
--- a/types/websocket.ts
+++ b/types/websocket.ts
@@ -93,6 +93,7 @@ export type ServerMessage = (
   | { type: 'SPOTIFY_SERVICE_INIT_UPDATE'; payload: boolean }
   | { type: 'PONG' } // Add PONG message type for server-to-client heartbeat
   | { type: 'DEVICE_OFFLINE'; payload: { deviceId: string } }
+  | { type: 'SPOTIFY_OPTIMISTIC_FAILURE'; payload: { command: string } }
 ) & { serverTimestamp?: number }
 
 /**
diff --git a/utils/audioManager.ts b/utils/audioManager.ts
index 11a9ea4f8c..05369295c7 100644
--- a/utils/audioManager.ts
+++ b/utils/audioManager.ts
@@ -1,3 +1,6 @@
+export const clampVolume = (value: number): number =>
+  Math.min(100, Math.max(0, Math.round(value)))
+
 /**
  * Audio Manager for Tabata Timer Sounds
  * Handles beep sounds for countdown and phase transitions