diff --git a/web/src/components/DeviceSettingsModal.tsx b/web/src/components/DeviceSettingsModal.tsx
index d77ec4a..403b994 100644
--- a/web/src/components/DeviceSettingsModal.tsx
+++ b/web/src/components/DeviceSettingsModal.tsx
@@ -7,6 +7,7 @@ interface Props {
 
 export function DeviceSettingsModal({ onClose }: Props) {
   const room = useVoiceStore((s) => s._room);
+  const bgMode = useVoiceStore((s) => s.bgMode);
   const [audioInputs, setAudioInputs] = useState<MediaDeviceInfo[]>([]);
   const [audioOutputs, setAudioOutputs] = useState<MediaDeviceInfo[]>([]);
   const [videoInputs, setVideoInputs] = useState<MediaDeviceInfo[]>([]);
@@ -106,7 +107,7 @@ export function DeviceSettingsModal({ onClose }: Props) {
           <div>
             <label className="block text-xxs text-gb-fg-s mb-1">Background Effect</label>
             <select 
-              value={useVoiceStore((s) => s.bgMode)}
+              value={bgMode}
               onChange={(e) => {
                 const mode = e.target.value as 'disabled' | 'background-blur' | 'virtual-background';
                 if (mode === 'virtual-background') {