diff --git a/src/frontend/src/features/rooms/components/Join.tsx b/src/frontend/src/features/rooms/components/Join.tsx
index 4ecfd19a..99a069a3 100644
--- a/src/frontend/src/features/rooms/components/Join.tsx
+++ b/src/frontend/src/features/rooms/components/Join.tsx
@@ -21,6 +21,7 @@ import {
   EffectsConfigurationProps,
 } from '../livekit/components/effects/EffectsConfiguration'
 import { SelectDevice } from '../livekit/components/controls/Device/SelectDevice'
+import { ToggleDevice } from '../livekit/components/controls/Device/ToggleDevice'
 import { usePersistentUserChoices } from '../livekit/hooks/usePersistentUserChoices'
 import { BackgroundProcessorFactory } from '../livekit/components/blur'
 import { isMobileBrowser } from '@livekit/components-core'
@@ -34,7 +35,6 @@ import { Spinner } from '@/primitives/Spinner'
 import { ApiAccessLevel } from '../api/ApiRoom'
 import { useLoginHint } from '@/hooks/useLoginHint'
 import { openPermissionsDialog } from '@/stores/permissions'
-import { ToggleDevice } from './join/ToggleDevice'
 import { useResolveInitiallyDefaultDeviceId } from '../livekit/hooks/useResolveInitiallyDefaultDeviceId'
 import { isSafari } from '@/utils/livekit'
 import type { LocalUserChoices } from '@/stores/userChoices'
@@ -661,15 +661,29 @@ export const Join = ({
                 >
                   <ToggleDevice
                     kind="audioinput"
-                    initialState={audioEnabled}
-                    track={audioTrack}
-                    onChange={(enabled) => saveAudioInputEnabled(enabled)}
+                    context="join"
+                    enabled={audioEnabled}
+                    toggle={async () => {
+                      saveAudioInputEnabled(!audioEnabled)
+                      if (audioEnabled) {
+                        await audioTrack?.mute()
+                      } else {
+                        await audioTrack?.unmute()
+                      }
+                    }}
                   />
                   <ToggleDevice
                     kind="videoinput"
-                    initialState={videoEnabled}
-                    track={videoTrack}
-                    onChange={(enabled) => saveVideoInputEnabled(enabled)}
+                    context="join"
+                    enabled={videoEnabled}
+                    toggle={async () => {
+                      saveVideoInputEnabled(!videoEnabled)
+                      if (videoEnabled) {
+                        await videoTrack?.mute()
+                      } else {
+                        await videoTrack?.unmute()
+                      }
+                    }}
                   />
                 </div>
                 <div
diff --git a/src/frontend/src/features/rooms/components/join/ToggleDevice.tsx b/src/frontend/src/features/rooms/components/join/ToggleDevice.tsx
deleted file mode 100644
index 0e755fd5..00000000
--- a/src/frontend/src/features/rooms/components/join/ToggleDevice.tsx
+++ /dev/null
@@ -1,59 +0,0 @@
-import { UseTrackToggleProps } from '@livekit/components-react'
-import { ToggleDevice as BaseToggleDevice } from '../../livekit/components/controls/Device/ToggleDevice'
-import { LocalAudioTrack, LocalVideoTrack, Track } from 'livekit-client'
-import { ButtonRecipeProps } from '@/primitives/buttonRecipe'
-import { useCallback, useState } from 'react'
-
-type ToggleSource = Exclude<
-  Track.Source,
-  | Track.Source.ScreenShareAudio
-  | Track.Source.Unknown
-  | Track.Source.ScreenShare
->
-
-type ToggleDeviceProps<T extends ToggleSource> = Pick<
-  UseTrackToggleProps<T>,
-  'onChange' | 'initialState'
-> & {
-  track?: LocalAudioTrack | LocalVideoTrack
-  kind: MediaDeviceKind
-  variant?: NonNullable<ButtonRecipeProps>['variant']
-}
-
-export const ToggleDevice = <T extends ToggleSource>({
-  track,
-  kind,
-  onChange,
-  initialState,
-}: ToggleDeviceProps<T>) => {
-  const [isTrackEnabled, setIsTrackEnabled] = useState(initialState ?? false)
-
-  const toggle = useCallback(async () => {
-    try {
-      if (isTrackEnabled) {
-        setIsTrackEnabled(false)
-        onChange?.(false, true)
-        await track?.mute()
-      } else {
-        setIsTrackEnabled(true)
-        onChange?.(true, true)
-        await track?.unmute()
-      }
-    } catch (error) {
-      console.error('Failed to toggle track:', error)
-    }
-  }, [track, onChange, isTrackEnabled])
-
-  return (
-    <BaseToggleDevice
-      enabled={isTrackEnabled}
-      toggle={toggle}
-      kind={kind}
-      variant="whiteCircle"
-      errorVariant="errorCircle"
-      toggleButtonProps={{
-        groupPosition: undefined,
-      }}
-    />
-  )
-}
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 b0c5b359..664937ac 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
@@ -57,8 +57,7 @@ export const AudioDevicesControl = ({
       <ToggleDevice
         {...trackProps}
         kind="audioinput"
-        variant="primaryDark"
-        toggle={trackProps.toggle}
+        toggle={trackProps.toggle as () => Promise<void>}
         toggleButtonProps={{
           ...(hideMenu
             ? {
diff --git a/src/frontend/src/features/rooms/livekit/components/controls/Device/ToggleDevice.tsx b/src/frontend/src/features/rooms/livekit/components/controls/Device/ToggleDevice.tsx
index 012d2de3..6352a86f 100644
--- a/src/frontend/src/features/rooms/livekit/components/controls/Device/ToggleDevice.tsx
+++ b/src/frontend/src/features/rooms/livekit/components/controls/Device/ToggleDevice.tsx
@@ -17,26 +17,52 @@ import { openPermissionsDialog } from '@/stores/permissions'
 import { useCannotUseDevice } from '../../../hooks/useCannotUseDevice'
 import { useDeviceIcons } from '../../../hooks/useDeviceIcons'
 import { useDeviceShortcut } from '../../../hooks/useDeviceShortcut'
+import { ToggleSource, CaptureOptionsBySource } from '@livekit/components-core'
 
-export type ToggleDeviceProps = {
-  enabled: boolean
-  toggle: () => void
-  kind: 'audioinput' | 'videoinput'
+type ToggleDeviceStyleProps = {
   variant?: NonNullable<ButtonRecipeProps>['variant']
   errorVariant?: NonNullable<ButtonRecipeProps>['variant']
   toggleButtonProps?: Partial<ToggleButtonProps>
 }
 
-export const ToggleDevice = ({
+export type ToggleDeviceProps<T extends ToggleSource> = {
+  enabled: boolean
+  toggle: (
+    forceState?: boolean,
+    captureOptions?: CaptureOptionsBySource<T>
+  ) => Promise<void | boolean | undefined> | void
+  context?: 'room' | 'join'
+  kind: 'audioinput' | 'videoinput'
+  toggleButtonProps?: Partial<ToggleButtonProps>
+}
+
+export const ToggleDevice = <T extends ToggleSource>({
   kind,
   enabled,
   toggle,
-  variant = 'primaryDark',
-  errorVariant = 'error2',
-  toggleButtonProps,
-}: ToggleDeviceProps) => {
+  context = 'room',
+  ...props
+}: ToggleDeviceProps<T>) => {
   const { t } = useTranslation('rooms', { keyPrefix: 'join' })
 
+  const { variant, errorVariant, toggleButtonProps } =
+    useMemo<ToggleDeviceStyleProps>(() => {
+      if (context === 'join') {
+        return {
+          variant: 'whiteCircle',
+          errorVariant: 'errorCircle',
+          toggleButtonProps: {
+            groupPosition: undefined,
+          },
+        } as ToggleDeviceStyleProps
+      }
+      return {
+        variant: 'primaryDark',
+        errorVariant: 'error2',
+        toggleButtonProps: undefined,
+      } as ToggleDeviceStyleProps
+    }, [context])
+
   const [pushToTalk, setPushToTalk] = useState(false)
 
   const onKeyDown = () => {
@@ -71,8 +97,8 @@ export const ToggleDevice = ({
   const Icon =
     enabled && !cannotUseDevice ? deviceIcons.toggleOn : deviceIcons.toggleOff
 
-  const context = useMaybeRoomContext()
-  if (kind === 'audioinput' && pushToTalk && context) {
+  const roomContext = useMaybeRoomContext()
+  if (kind === 'audioinput' && pushToTalk && roomContext) {
     return <ActiveSpeakerWrapper />
   }
 
@@ -92,6 +118,7 @@ export const ToggleDevice = ({
         }
         groupPosition="left"
         {...toggleButtonProps}
+        {...props}
       >
         <Icon />
       </ToggleButton>
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 a59f6752..3360bb09 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
@@ -82,7 +82,6 @@ export const VideoDeviceControl = ({
       <ToggleDevice
         {...trackProps}
         kind="videoinput"
-        variant="primaryDark"
         toggle={toggle}
         toggleButtonProps={{
           ...(hideMenu