diff --git a/src/frontend/src/features/rooms/components/Join.tsx b/src/frontend/src/features/rooms/components/Join.tsx
index 87354cc7..e4e2014a 100644
--- a/src/frontend/src/features/rooms/components/Join.tsx
+++ b/src/frontend/src/features/rooms/components/Join.tsx
@@ -5,7 +5,6 @@ import { Screen } from '@/layout/Screen'
 import { useEffect, useMemo, useRef, useState } from 'react'
 import { LocalVideoTrack, Track } from 'livekit-client'
 import { H } from '@/primitives/H'
-import { SelectToggleDevice } from '../livekit/components/controls/SelectToggleDevice'
 import { Field } from '@/primitives/Field'
 import { Button, Dialog, Text, Form } from '@/primitives'
 import { VStack } from '@/styled-system/jsx'
@@ -29,6 +28,8 @@ import { ApiAccessLevel } from '../api/ApiRoom'
 import { useLoginHint } from '@/hooks/useLoginHint'
 import { useSnapshot } from 'valtio'
 import { openPermissionsDialog, permissionsStore } from '@/stores/permissions'
+import { ToggleDevice } from './join/ToggleDevice'
+import { SelectDevice } from './join/SelectDevice'
 
 const onError = (e: Error) => console.error('ERROR', e)
 
@@ -502,6 +503,33 @@ export const Join = ({
                     )}
                   </div>
                 </div>
+                <div
+                  className={css({
+                    position: 'absolute',
+                    bottom: '1rem',
+                    zIndex: '1',
+                    display: 'flex',
+                    gap: '1rem',
+                    justifyContent: 'center',
+                    left: '50%',
+                    transform: 'translateX(-50%)',
+                  })}
+                >
+                  <ToggleDevice
+                    source={Track.Source.Microphone}
+                    initialState={audioEnabled}
+                    track={audioTrack}
+                    onChange={(enabled) => saveAudioInputEnabled(enabled)}
+                    onDeviceError={(error) => console.error(error)}
+                  />
+                  <ToggleDevice
+                    source={Track.Source.Camera}
+                    initialState={videoEnabled}
+                    track={videoTrack}
+                    onChange={(enabled) => saveVideoInputEnabled(enabled)}
+                    onDeviceError={(error) => console.error(error)}
+                  />
+                </div>
                 <div
                   className={css({
                     position: 'absolute',
@@ -528,32 +556,26 @@ export const Join = ({
                 marginX: 'auto',
               })}
             >
-              <div>
-                <SelectToggleDevice
-                  source={Track.Source.Microphone}
-                  initialState={audioEnabled}
-                  track={audioTrack}
-                  initialDeviceId={audioDeviceId}
-                  onChange={(enabled) => saveAudioInputEnabled(enabled)}
-                  onDeviceError={(error) => console.error(error)}
-                  onActiveDeviceChange={(deviceId) =>
-                    saveAudioInputDeviceId(deviceId ?? '')
-                  }
-                  variant="tertiary"
+              <div
+                className={css({
+                  width: '50%',
+                })}
+              >
+                <SelectDevice
+                  kind="audioinput"
+                  id={audioDeviceId}
+                  onSubmit={saveAudioInputDeviceId}
                 />
               </div>
-              <div>
-                <SelectToggleDevice
-                  source={Track.Source.Camera}
-                  initialState={videoEnabled}
-                  track={videoTrack}
-                  initialDeviceId={videoDeviceId}
-                  onChange={(enabled) => saveVideoInputEnabled(enabled)}
-                  onDeviceError={(error) => console.error(error)}
-                  onActiveDeviceChange={(deviceId) =>
-                    saveVideoInputDeviceId(deviceId ?? '')
-                  }
-                  variant="tertiary"
+              <div
+                className={css({
+                  width: '50%',
+                })}
+              >
+                <SelectDevice
+                  kind="videoinput"
+                  id={videoDeviceId}
+                  onSubmit={saveVideoInputDeviceId}
                 />
               </div>
             </div>
diff --git a/src/frontend/src/features/rooms/components/join/SelectDevice.tsx b/src/frontend/src/features/rooms/components/join/SelectDevice.tsx
new file mode 100644
index 00000000..67e17e58
--- /dev/null
+++ b/src/frontend/src/features/rooms/components/join/SelectDevice.tsx
@@ -0,0 +1,74 @@
+import {
+  RemixiconComponentType,
+  RiMicLine,
+  RiVideoOnLine,
+} from '@remixicon/react'
+import { useTranslation } from 'react-i18next'
+import { useMediaDeviceSelect } from '@livekit/components-react'
+import { useMemo } from 'react'
+import { Select } from '@/primitives/Select'
+
+type DeviceItems = Array<{ value: string; label: string }>
+
+type DeviceConfig = {
+  icon: RemixiconComponentType
+}
+
+type SelectDeviceProps = {
+  id?: string
+  onSubmit?: (id: string) => void
+  kind: MediaDeviceKind
+}
+
+export const SelectDevice = ({ id, onSubmit, kind }: SelectDeviceProps) => {
+  const { t } = useTranslation('rooms', { keyPrefix: 'join' })
+
+  const config = useMemo<DeviceConfig | undefined>(() => {
+    switch (kind) {
+      case 'audioinput':
+        return {
+          icon: RiMicLine,
+        }
+      case 'videoinput':
+        return {
+          icon: RiVideoOnLine,
+        }
+    }
+  }, [kind])
+
+  const getDefaultSelectedKey = (items: DeviceItems) => {
+    if (!items || items.length === 0) return
+    const defaultItem =
+      items.find((item) => item.value === 'default') || items[0]
+    return defaultItem.value
+  }
+
+  const {
+    devices: devices,
+    activeDeviceId: activeDeviceId,
+    setActiveMediaDevice: setActiveMediaDevice,
+  } = useMediaDeviceSelect({ kind, requestPermissions: false })
+
+  const items: DeviceItems = devices
+    .filter((d) => !!d.deviceId)
+    .map((d) => ({
+      value: d.deviceId,
+      label: d.label,
+    }))
+
+  return (
+    <Select
+      aria-label={t(`${kind}.choose`)}
+      label=""
+      isDisabled={items.length === 0}
+      items={items}
+      iconComponent={config?.icon}
+      placeholder={t('selectDevice.loading')}
+      defaultSelectedKey={id || activeDeviceId || getDefaultSelectedKey(items)}
+      onSelectionChange={(key) => {
+        onSubmit?.(key as string)
+        setActiveMediaDevice(key as string)
+      }}
+    />
+  )
+}
diff --git a/src/frontend/src/features/rooms/components/join/ToggleDevice.tsx b/src/frontend/src/features/rooms/components/join/ToggleDevice.tsx
new file mode 100644
index 00000000..b47a518c
--- /dev/null
+++ b/src/frontend/src/features/rooms/components/join/ToggleDevice.tsx
@@ -0,0 +1,38 @@
+import { useTrackToggle, UseTrackToggleProps } from '@livekit/components-react'
+import { ToggleDevice as BaseToggleDevice } from '../../livekit/components/controls/ToggleDevice'
+import {
+  TOGGLE_DEVICE_CONFIG,
+  ToggleSource,
+} from '../../livekit/config/ToggleDeviceConfig'
+import { LocalAudioTrack, LocalVideoTrack } from 'livekit-client'
+import { ButtonRecipeProps } from '@/primitives/buttonRecipe'
+
+type ToggleDeviceProps<T extends ToggleSource> = UseTrackToggleProps<T> & {
+  track?: LocalAudioTrack | LocalVideoTrack | undefined
+  source: ToggleSource
+  variant?: NonNullable<ButtonRecipeProps>['variant']
+}
+
+export const ToggleDevice = <T extends ToggleSource>(
+  props: ToggleDeviceProps<T>
+) => {
+  const config = TOGGLE_DEVICE_CONFIG[props.source]
+
+  if (!config) {
+    throw new Error('Invalid source')
+  }
+
+  const trackProps = useTrackToggle(props)
+
+  return (
+    <BaseToggleDevice
+      {...trackProps}
+      config={config}
+      variant="whiteCircle"
+      errorVariant="errorCircle"
+      toggleButtonProps={{
+        groupPosition: undefined,
+      }}
+    />
+  )
+}
diff --git a/src/frontend/src/features/rooms/livekit/components/controls/SelectToggleDevice.tsx b/src/frontend/src/features/rooms/livekit/components/controls/SelectToggleDevice.tsx
index 8158d0cf..66536295 100644
--- a/src/frontend/src/features/rooms/livekit/components/controls/SelectToggleDevice.tsx
+++ b/src/frontend/src/features/rooms/livekit/components/controls/SelectToggleDevice.tsx
@@ -5,14 +5,7 @@ import {
   UseTrackToggleProps,
 } from '@livekit/components-react'
 import { Button, Menu, MenuList } from '@/primitives'
-import {
-  RemixiconComponentType,
-  RiArrowDownSLine,
-  RiMicLine,
-  RiMicOffLine,
-  RiVideoOffLine,
-  RiVideoOnLine,
-} from '@remixicon/react'
+import { RiArrowDownSLine } from '@remixicon/react'
 import {
   LocalAudioTrack,
   LocalVideoTrack,
@@ -20,8 +13,6 @@ import {
   VideoCaptureOptions,
 } from 'livekit-client'
 
-import { Shortcut } from '@/features/shortcuts/types'
-
 import { ToggleDevice } from '@/features/rooms/livekit/components/controls/ToggleDevice.tsx'
 import { css } from '@/styled-system/css'
 import { ButtonRecipeProps } from '@/primitives/buttonRecipe'
@@ -30,56 +21,17 @@ import { usePersistentUserChoices } from '../../hooks/usePersistentUserChoices'
 import { BackgroundProcessorFactory } from '../blur'
 import { useSnapshot } from 'valtio'
 import { permissionsStore } from '@/stores/permissions'
-
-export type ToggleSource = Exclude<
-  Track.Source,
-  Track.Source.ScreenShareAudio | Track.Source.Unknown
->
-
-type SelectToggleSource = Exclude<ToggleSource, Track.Source.ScreenShare>
-
-export type SelectToggleDeviceConfig = {
-  kind: MediaDeviceKind
-  iconOn: RemixiconComponentType
-  iconOff: RemixiconComponentType
-  shortcut?: Shortcut
-  longPress?: Shortcut
-}
-
-type SelectToggleDeviceConfigMap = {
-  [key in SelectToggleSource]: SelectToggleDeviceConfig
-}
-
-const selectToggleDeviceConfig: SelectToggleDeviceConfigMap = {
-  [Track.Source.Microphone]: {
-    kind: 'audioinput',
-    iconOn: RiMicLine,
-    iconOff: RiMicOffLine,
-    shortcut: {
-      key: 'd',
-      ctrlKey: true,
-    },
-    longPress: {
-      key: 'Space',
-    },
-  },
-  [Track.Source.Camera]: {
-    kind: 'videoinput',
-    iconOn: RiVideoOnLine,
-    iconOff: RiVideoOffLine,
-    shortcut: {
-      key: 'e',
-      ctrlKey: true,
-    },
-  },
-}
+import {
+  TOGGLE_DEVICE_CONFIG,
+  ToggleSource,
+} from '../../config/ToggleDeviceConfig'
 
 type SelectToggleDeviceProps<T extends ToggleSource> =
   UseTrackToggleProps<T> & {
     track?: LocalAudioTrack | LocalVideoTrack | undefined
     initialDeviceId?: string
     onActiveDeviceChange: (deviceId: string) => void
-    source: SelectToggleSource
+    source: ToggleSource
     variant?: NonNullable<ButtonRecipeProps>['variant']
     menuVariant?: 'dark' | 'light'
     hideMenu?: boolean
@@ -94,7 +46,7 @@ export const SelectToggleDevice = <T extends ToggleSource>({
   menuVariant = 'light',
   ...props
 }: SelectToggleDeviceProps<T>) => {
-  const config = selectToggleDeviceConfig[props.source]
+  const config = TOGGLE_DEVICE_CONFIG[props.source]
   if (!config) {
     throw new Error('Invalid source')
   }
diff --git a/src/frontend/src/features/rooms/livekit/components/controls/ToggleDevice.tsx b/src/frontend/src/features/rooms/livekit/components/controls/ToggleDevice.tsx
index cfe42590..744f8c45 100644
--- a/src/frontend/src/features/rooms/livekit/components/controls/ToggleDevice.tsx
+++ b/src/frontend/src/features/rooms/livekit/components/controls/ToggleDevice.tsx
@@ -3,7 +3,6 @@ import { useRegisterKeyboardShortcut } from '@/features/shortcuts/useRegisterKey
 import { useMemo, useState } from 'react'
 import { appendShortcutLabel } from '@/features/shortcuts/utils'
 import { useTranslation } from 'react-i18next'
-import { SelectToggleDeviceConfig } from './SelectToggleDevice'
 import { PermissionNeededButton } from './PermissionNeededButton'
 import useLongPress from '@/features/shortcuts/useLongPress'
 import { ActiveSpeaker } from '@/features/rooms/components/ActiveSpeaker'
@@ -15,13 +14,15 @@ import {
 import { ButtonRecipeProps } from '@/primitives/buttonRecipe'
 import { ToggleButtonProps } from '@/primitives/ToggleButton'
 import { openPermissionsDialog } from '@/stores/permissions'
+import { ToggleDeviceConfig } from '../../config/ToggleDeviceConfig'
 
 export type ToggleDeviceProps = {
   enabled: boolean
   isPermissionDeniedOrPrompted?: boolean
   toggle: () => void
-  config: SelectToggleDeviceConfig
+  config: ToggleDeviceConfig
   variant?: NonNullable<ButtonRecipeProps>['variant']
+  errorVariant?: NonNullable<ButtonRecipeProps>['variant']
   toggleButtonProps?: Partial<ToggleButtonProps>
 }
 
@@ -30,6 +31,7 @@ export const ToggleDevice = ({
   enabled,
   toggle,
   variant = 'primaryDark',
+  errorVariant = 'error2',
   toggleButtonProps,
   isPermissionDeniedOrPrompted,
 }: ToggleDeviceProps) => {
@@ -72,7 +74,9 @@ export const ToggleDevice = ({
       {isPermissionDeniedOrPrompted && <PermissionNeededButton />}
       <ToggleButton
         isSelected={!enabled}
-        variant={enabled && !isPermissionDeniedOrPrompted ? variant : 'error2'}
+        variant={
+          enabled && !isPermissionDeniedOrPrompted ? variant : errorVariant
+        }
         shySelected
         onPress={() =>
           isPermissionDeniedOrPrompted ? openPermissionsDialog() : toggle()
diff --git a/src/frontend/src/features/rooms/livekit/config/ToggleDeviceConfig.ts b/src/frontend/src/features/rooms/livekit/config/ToggleDeviceConfig.ts
new file mode 100644
index 00000000..7eb55ee0
--- /dev/null
+++ b/src/frontend/src/features/rooms/livekit/config/ToggleDeviceConfig.ts
@@ -0,0 +1,52 @@
+import { Track } from 'livekit-client'
+import {
+  RemixiconComponentType,
+  RiMicLine,
+  RiMicOffLine,
+  RiVideoOffLine,
+  RiVideoOnLine,
+} from '@remixicon/react'
+import { Shortcut } from '@/features/shortcuts/types'
+
+export type ToggleSource = Exclude<
+  Track.Source,
+  | Track.Source.ScreenShareAudio
+  | Track.Source.Unknown
+  | Track.Source.ScreenShare
+>
+
+export type ToggleDeviceConfig = {
+  kind: MediaDeviceKind
+  iconOn: RemixiconComponentType
+  iconOff: RemixiconComponentType
+  shortcut?: Shortcut
+  longPress?: Shortcut
+}
+
+type ToggleDeviceConfigMap = {
+  [key in ToggleSource]: ToggleDeviceConfig
+}
+
+export const TOGGLE_DEVICE_CONFIG = {
+  [Track.Source.Microphone]: {
+    kind: 'audioinput',
+    iconOn: RiMicLine,
+    iconOff: RiMicOffLine,
+    shortcut: {
+      key: 'd',
+      ctrlKey: true,
+    },
+    longPress: {
+      key: 'Space',
+    },
+  },
+  [Track.Source.Camera]: {
+    kind: 'videoinput',
+    iconOn: RiVideoOnLine,
+    iconOff: RiVideoOffLine,
+    shortcut: {
+      key: 'e',
+      ctrlKey: true,
+    },
+  },
+} as const satisfies ToggleDeviceConfigMap
diff --git a/src/frontend/src/locales/de/rooms.json b/src/frontend/src/locales/de/rooms.json
index 94194520..74096556 100644
--- a/src/frontend/src/locales/de/rooms.json
+++ b/src/frontend/src/locales/de/rooms.json
@@ -8,6 +8,9 @@
     "back": "Dem Meeting erneut beitreten"
   },
   "join": {
+    "selectDevice": {
+      "loading": "Laden…"
+    },
     "videoinput": {
       "choose": "Kamera auswählen",
       "disable": "Kamera deaktivieren",
diff --git a/src/frontend/src/locales/en/rooms.json b/src/frontend/src/locales/en/rooms.json
index 80a68792..e7706ab0 100644
--- a/src/frontend/src/locales/en/rooms.json
+++ b/src/frontend/src/locales/en/rooms.json
@@ -8,6 +8,9 @@
     "back": "Rejoin the meeting"
   },
   "join": {
+    "selectDevice": {
+      "loading": "Loading…"
+    },
     "videoinput": {
       "choose": "Select camera",
       "disable": "Disable camera",
diff --git a/src/frontend/src/locales/fr/rooms.json b/src/frontend/src/locales/fr/rooms.json
index b32e629c..fb3a4fad 100644
--- a/src/frontend/src/locales/fr/rooms.json
+++ b/src/frontend/src/locales/fr/rooms.json
@@ -8,6 +8,9 @@
     "back": "Réintégrer la réunion"
   },
   "join": {
+    "selectDevice": {
+      "loading": "Chargement…"
+    },
     "videoinput": {
       "choose": "Choisir la webcam",
       "disable": "Désactiver la webcam",
diff --git a/src/frontend/src/locales/nl/rooms.json b/src/frontend/src/locales/nl/rooms.json
index d4a58b13..9d49f947 100644
--- a/src/frontend/src/locales/nl/rooms.json
+++ b/src/frontend/src/locales/nl/rooms.json
@@ -8,6 +8,9 @@
     "back": "Sluit weer bij de vergadering aan"
   },
   "join": {
+    "selectDevice": {
+      "loading": "Bezig met laden…"
+    },
     "videoinput": {
       "choose": "Selecteer camera",
       "disable": "Camera uitschakelen",
diff --git a/src/frontend/src/primitives/buttonRecipe.ts b/src/frontend/src/primitives/buttonRecipe.ts
index 59b14a2e..b1364b77 100644
--- a/src/frontend/src/primitives/buttonRecipe.ts
+++ b/src/frontend/src/primitives/buttonRecipe.ts
@@ -251,6 +251,20 @@ export const buttonRecipe = cva({
           color: 'error.300',
         },
       },
+      errorCircle: {
+        backgroundColor: 'error.500',
+        width: '56px',
+        height: '56px',
+        borderRadius: '100%',
+        color: 'white',
+        '&[data-hovered]': {
+          backgroundColor: 'error.600',
+        },
+        '&[data-pressed]': {
+          backgroundColor: 'error.700',
+          color: 'error.200',
+        },
+      },
       // @TODO: better handling of colors… this is a mess
       success: {
         colorPalette: 'success',