diff --git a/src/frontend/src/features/rooms/livekit/components/controls/Device/AudioDevicesControl.tsx b/src/frontend/src/features/rooms/livekit/components/controls/Device/AudioDevicesControl.tsx
index 62cfad63..c6fb3784 100644
--- a/src/frontend/src/features/rooms/livekit/components/controls/Device/AudioDevicesControl.tsx
+++ b/src/frontend/src/features/rooms/livekit/components/controls/Device/AudioDevicesControl.tsx
@@ -82,42 +82,47 @@ export const AudioDevicesControl = ({
           >
             <RiArrowUpSLine />
           </Button>
-          <div
-            className={css({
-              maxWidth: '36rem',
-              padding: '0.15rem',
-              display: 'flex',
-              gap: '0.5rem',
-            })}
-          >
+          {({ close }) => (
             <div
-              style={{
-                flex: '1 1 0',
-                minWidth: 0,
-              }}
+              className={css({
+                maxWidth: '36rem',
+                padding: '0.15rem',
+                display: 'flex',
+                gap: '0.5rem',
+              })}
             >
-              <SelectDevice
-                context="room"
-                kind={kind}
-                id={audioDeviceId}
-                onSubmit={saveAudioInputDeviceId}
+              <div
+                style={{
+                  flex: '1 1 0',
+                  minWidth: 0,
+                }}
+              >
+                <SelectDevice
+                  context="room"
+                  kind={kind}
+                  id={audioDeviceId}
+                  onSubmit={saveAudioInputDeviceId}
+                />
+              </div>
+              <div
+                style={{
+                  flex: '1 1 0',
+                  minWidth: 0,
+                }}
+              >
+                <SelectDevice
+                  context="room"
+                  kind="audiooutput"
+                  id={audioOutputDeviceId}
+                  onSubmit={saveAudioOutputDeviceId}
+                />
+              </div>
+              <SettingsButton
+                settingTab={SettingsDialogExtendedKey.AUDIO}
+                onPress={close}
               />
             </div>
-            <div
-              style={{
-                flex: '1 1 0',
-                minWidth: 0,
-              }}
-            >
-              <SelectDevice
-                context="room"
-                kind="audiooutput"
-                id={audioOutputDeviceId}
-                onSubmit={saveAudioOutputDeviceId}
-              />
-            </div>
-            <SettingsButton settingTab={SettingsDialogExtendedKey.AUDIO} />
-          </div>
+          )}
         </Popover>
       )}
     </div>
diff --git a/src/frontend/src/features/rooms/livekit/components/controls/Device/SettingsButton.tsx b/src/frontend/src/features/rooms/livekit/components/controls/Device/SettingsButton.tsx
index b17009a9..b1a96fc0 100644
--- a/src/frontend/src/features/rooms/livekit/components/controls/Device/SettingsButton.tsx
+++ b/src/frontend/src/features/rooms/livekit/components/controls/Device/SettingsButton.tsx
@@ -6,8 +6,10 @@ import { SettingsDialogExtendedKey } from '@/features/settings/type'
 
 export const SettingsButton = ({
   settingTab,
+  onPress,
 }: {
   settingTab: SettingsDialogExtendedKey
+  onPress?: () => void
 }) => {
   const { t } = useTranslation('rooms', { keyPrefix: 'selectDevice' })
   const { setDialogOpen, setDefaultSelectedKey } = useSettingsDialog()
@@ -22,6 +24,7 @@ export const SettingsButton = ({
       onPress={() => {
         setDefaultSelectedKey(settingTab)
         setDialogOpen(true)
+        onPress?.()
       }}
     >
       <RiSettings3Line size={24} />
diff --git a/src/frontend/src/features/rooms/livekit/components/controls/Device/VideoDeviceControl.tsx b/src/frontend/src/features/rooms/livekit/components/controls/Device/VideoDeviceControl.tsx
index 836adde8..5c026ac4 100644
--- a/src/frontend/src/features/rooms/livekit/components/controls/Device/VideoDeviceControl.tsx
+++ b/src/frontend/src/features/rooms/livekit/components/controls/Device/VideoDeviceControl.tsx
@@ -16,9 +16,9 @@ import { SelectDevice } from './SelectDevice'
 import { SettingsButton } from './SettingsButton'
 import { SettingsDialogExtendedKey } from '@/features/settings/type'
 
-const EffectsButton = () => {
+const EffectsButton = ({ onPress }: { onPress: () => void }) => {
   const { t } = useTranslation('rooms', { keyPrefix: 'selectDevice' })
-  const { toggleEffects } = useSidePanel()
+  const { isEffectsOpen, toggleEffects } = useSidePanel()
   return (
     <Button
       size="sm"
@@ -26,7 +26,10 @@ const EffectsButton = () => {
       tooltip={t('effects')}
       aria-label={t('effects')}
       variant="primaryDark"
-      onPress={toggleEffects}
+      onPress={() => {
+        if (!isEffectsOpen) toggleEffects()
+        onPress()
+      }}
     >
       <RiImageCircleAiFill size={24} />
     </Button>
@@ -125,30 +128,35 @@ export const VideoDeviceControl = ({
           >
             <RiArrowUpSLine />
           </Button>
-          <div
-            className={css({
-              maxWidth: '36rem',
-              padding: '0.15rem',
-              display: 'flex',
-              gap: '0.5rem',
-            })}
-          >
+          {({ close }) => (
             <div
-              style={{
-                flex: '1 1 0',
-                minWidth: 0,
-              }}
+              className={css({
+                maxWidth: '36rem',
+                padding: '0.15rem',
+                display: 'flex',
+                gap: '0.5rem',
+              })}
             >
-              <SelectDevice
-                context="room"
-                kind={kind}
-                id={userChoices.videoDeviceId}
-                onSubmit={saveVideoInputDeviceId}
+              <div
+                style={{
+                  flex: '1 1 0',
+                  minWidth: 0,
+                }}
+              >
+                <SelectDevice
+                  context="room"
+                  kind={kind}
+                  id={userChoices.videoDeviceId}
+                  onSubmit={saveVideoInputDeviceId}
+                />
+              </div>
+              <EffectsButton onPress={close} />
+              <SettingsButton
+                settingTab={SettingsDialogExtendedKey.VIDEO}
+                onPress={close}
               />
             </div>
-            <EffectsButton />
-            <SettingsButton settingTab={SettingsDialogExtendedKey.VIDEO} />
-          </div>
+          )}
         </Popover>
       )}
     </div>
diff --git a/src/frontend/src/primitives/Popover.tsx b/src/frontend/src/primitives/Popover.tsx
index 6e09231c..5ccd995f 100644
--- a/src/frontend/src/primitives/Popover.tsx
+++ b/src/frontend/src/primitives/Popover.tsx
@@ -80,7 +80,7 @@ export const Popover = ({
   ]
   variant?: 'dark' | 'light'
   withArrow?: boolean
-} & DialogProps) => {
+} & Omit<DialogProps, 'children'>) => {
   const [trigger, popoverContent] = children
   return (
     <DialogTrigger>