diff --git a/src/frontend/panda.config.ts b/src/frontend/panda.config.ts
index e083b055..aba8d84c 100644
--- a/src/frontend/panda.config.ts
+++ b/src/frontend/panda.config.ts
@@ -124,6 +124,7 @@ const config: Config = {
         ...pandaPreset.theme.tokens.colors,
         primaryDark: {
           50: { value: '#161622' },
+          75: { value: '#222234' },
           100: { value: '#2D2D46' },
           200: { value: '#43436A' },
           300: { value: '#5A5A8F' },
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 39ecde7d..ca6e9548 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
@@ -7,12 +7,14 @@ import { Track } from 'livekit-client'
 import { ToggleDevice } from './ToggleDevice'
 import { css } from '@/styled-system/css'
 import { usePersistentUserChoices } from '../../../hooks/usePersistentUserChoices'
+import { useCanPublishTrack } from '../../../hooks/useCanPublishTrack'
 import { useCannotUseDevice } from '../../../hooks/useCannotUseDevice'
-import Source = Track.Source
 import * as React from 'react'
 import { SelectDevice } from './SelectDevice'
 import { SettingsButton } from './SettingsButton'
 import { SettingsDialogExtendedKey } from '@/features/settings/type'
+import { TrackSource } from '@livekit/protocol'
+import Source = Track.Source
 
 type AudioDevicesControlProps = Omit<
   UseTrackToggleProps<Source.Microphone>,
@@ -50,6 +52,8 @@ export const AudioDevicesControl = ({
   const cannotUseDevice = useCannotUseDevice(kind)
   const selectLabel = t(`settings.${SettingsDialogExtendedKey.AUDIO}`)
 
+  const canPublishTrack = useCanPublishTrack(TrackSource.MICROPHONE)
+
   return (
     <div
       className={css({
@@ -59,6 +63,7 @@ export const AudioDevicesControl = ({
     >
       <ToggleDevice
         {...trackProps}
+        isDisabled={!canPublishTrack}
         kind={kind}
         toggle={trackProps.toggle as () => Promise<void>}
         overrideToggleButtonProps={{
@@ -77,7 +82,9 @@ export const AudioDevicesControl = ({
             groupPosition="right"
             square
             variant={
-              trackProps.enabled && !cannotUseDevice ? 'primaryDark' : 'error2'
+              !canPublishTrack || !trackProps.enabled || cannotUseDevice
+                ? 'error2'
+                : 'primaryDark'
             }
           >
             <RiArrowUpSLine />
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 b6770ca3..bd77f87d 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
@@ -27,6 +27,7 @@ type ToggleDeviceStyleProps = {
 
 export type ToggleDeviceProps<T extends ToggleSource> = {
   enabled: boolean
+  isDisabled?: boolean
   toggle: (
     forceState?: boolean,
     captureOptions?: CaptureOptionsBySource<T>
@@ -39,6 +40,7 @@ export type ToggleDeviceProps<T extends ToggleSource> = {
 export const ToggleDevice = <T extends ToggleSource>({
   kind,
   enabled,
+  isDisabled,
   toggle,
   context = 'room',
   overrideToggleButtonProps,
@@ -105,7 +107,9 @@ export const ToggleDevice = <T extends ToggleSource>({
   }, [enabled, kind, deviceShortcut, t])
 
   const Icon =
-    enabled && !cannotUseDevice ? deviceIcons.toggleOn : deviceIcons.toggleOff
+    isDisabled || cannotUseDevice || !enabled
+      ? deviceIcons.toggleOff
+      : deviceIcons.toggleOn
 
   const roomContext = useMaybeRoomContext()
   if (kind === 'audioinput' && pushToTalk && roomContext) {
@@ -117,7 +121,10 @@ export const ToggleDevice = <T extends ToggleSource>({
       {cannotUseDevice && <PermissionNeededButton />}
       <ToggleButton
         isSelected={!enabled}
-        variant={enabled && !cannotUseDevice ? variant : errorVariant}
+        isDisabled={isDisabled}
+        variant={
+          isDisabled || cannotUseDevice || !enabled ? errorVariant : variant
+        }
         shySelected
         onPress={() => (cannotUseDevice ? openPermissionsDialog() : toggle())}
         aria-label={toggleLabel}
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 8b821705..918bab5e 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
@@ -7,6 +7,7 @@ import { Track, VideoCaptureOptions } from 'livekit-client'
 import { ToggleDevice } from './ToggleDevice'
 import { css } from '@/styled-system/css'
 import { usePersistentUserChoices } from '../../../hooks/usePersistentUserChoices'
+import { useCanPublishTrack } from '../../../hooks/useCanPublishTrack'
 import { useCannotUseDevice } from '../../../hooks/useCannotUseDevice'
 import { useSidePanel } from '../../../hooks/useSidePanel'
 import { BackgroundProcessorFactory } from '../../blur'
@@ -15,6 +16,7 @@ import * as React from 'react'
 import { SelectDevice } from './SelectDevice'
 import { SettingsButton } from './SettingsButton'
 import { SettingsDialogExtendedKey } from '@/features/settings/type'
+import { TrackSource } from '@livekit/protocol'
 
 const EffectsButton = ({ onPress }: { onPress: () => void }) => {
   const { t } = useTranslation('rooms', { keyPrefix: 'selectDevice' })
@@ -95,6 +97,7 @@ export const VideoDeviceControl = ({
   }
 
   const selectLabel = t(`settings.${SettingsDialogExtendedKey.VIDEO}`)
+  const canPublishTrack = useCanPublishTrack(TrackSource.CAMERA)
 
   return (
     <div
@@ -105,6 +108,7 @@ export const VideoDeviceControl = ({
     >
       <ToggleDevice
         {...trackProps}
+        isDisabled={!canPublishTrack}
         kind={kind}
         toggle={toggleWithProcessor}
         overrideToggleButtonProps={{
@@ -123,7 +127,9 @@ export const VideoDeviceControl = ({
             groupPosition="right"
             square
             variant={
-              trackProps.enabled && !cannotUseDevice ? 'primaryDark' : 'error2'
+              !canPublishTrack || !trackProps.enabled || cannotUseDevice
+                ? 'error2'
+                : 'primaryDark'
             }
           >
             <RiArrowUpSLine />
diff --git a/src/frontend/src/features/rooms/livekit/components/controls/ScreenShareToggle.tsx b/src/frontend/src/features/rooms/livekit/components/controls/ScreenShareToggle.tsx
index 1ac1c905..620f12de 100644
--- a/src/frontend/src/features/rooms/livekit/components/controls/ScreenShareToggle.tsx
+++ b/src/frontend/src/features/rooms/livekit/components/controls/ScreenShareToggle.tsx
@@ -6,6 +6,8 @@ import { Track } from 'livekit-client'
 import React from 'react'
 import { type ButtonRecipeProps } from '@/primitives/buttonRecipe'
 import { ToggleButtonProps } from '@/primitives/ToggleButton'
+import { TrackSource } from '@livekit/protocol'
+import { useCanPublishTrack } from '@/features/rooms/livekit/hooks/useCanPublishTrack'
 
 type Props = Omit<
   UseTrackToggleProps<Track.Source.ScreenShare>,
@@ -29,10 +31,13 @@ export const ScreenShareToggle = ({
   const tooltipLabel = enabled ? 'stop' : 'start'
   const Icon = enabled ? RiCloseFill : RiArrowUpLine
 
+  const canShareScreen = useCanPublishTrack(TrackSource.SCREEN_SHARE)
+
   // fixme - remove ToggleButton custom styles when we design a proper icon
   return (
     <ToggleButton
       isSelected={enabled}
+      isDisabled={!canShareScreen}
       square
       variant={variant}
       tooltip={t(tooltipLabel)}
diff --git a/src/frontend/src/features/rooms/livekit/hooks/useCanPublishTrack.ts b/src/frontend/src/features/rooms/livekit/hooks/useCanPublishTrack.ts
new file mode 100644
index 00000000..0d418f63
--- /dev/null
+++ b/src/frontend/src/features/rooms/livekit/hooks/useCanPublishTrack.ts
@@ -0,0 +1,17 @@
+import { TrackSource } from '@livekit/protocol'
+import {
+  useLocalParticipant,
+  useParticipantPermissions,
+} from '@livekit/components-react'
+
+export function useCanPublishTrack(trackSource: TrackSource): boolean {
+  const { localParticipant } = useLocalParticipant()
+  const permissions = useParticipantPermissions({
+    participant: localParticipant,
+  })
+
+  return Boolean(
+    permissions?.canPublish &&
+      permissions?.canPublishSources?.includes(trackSource)
+  )
+}
diff --git a/src/frontend/src/primitives/buttonRecipe.ts b/src/frontend/src/primitives/buttonRecipe.ts
index a105686b..e5563a37 100644
--- a/src/frontend/src/primitives/buttonRecipe.ts
+++ b/src/frontend/src/primitives/buttonRecipe.ts
@@ -148,6 +148,10 @@ export const buttonRecipe = cva({
           backgroundColor: 'primaryDark.900',
           color: 'primaryDark.100',
         },
+        '&[data-disabled]': {
+          backgroundColor: 'primaryDark.75',
+          color: 'primaryDark.300',
+        },
         '&[data-hovered]': {
           backgroundColor: 'primaryDark.300',
           color: 'white',
@@ -247,8 +251,8 @@ export const buttonRecipe = cva({
           color: 'error.100 !important',
         },
         '&[data-disabled]': {
-          backgroundColor: 'error.200',
-          color: 'error.300',
+          backgroundColor: 'error.200 !important',
+          color: 'error.300 !important',
         },
       },
       errorCircle: {