diff --git a/src/components/CallView/shared/LocalAudioControlButton.vue b/src/components/CallView/shared/LocalAudioControlButton.vue
index f9fb788617a..97d950d2e0e 100644
--- a/src/components/CallView/shared/LocalAudioControlButton.vue
+++ b/src/components/CallView/shared/LocalAudioControlButton.vue
@@ -16,13 +16,13 @@
 			<template #trigger>
 				<NcButton
 					:title="audioButtonTitle"
-					:variant="variant"
+					:variant="audioStreamError ? 'error' : variant"
 					:aria-label="audioButtonAriaLabel"
 					:class="{
 						'no-audio-available': !isAudioAvailable,
 						'audio-control-button': showDevices,
 					}"
-					:disabled="!isAudioAllowed || resumeAudioAfterChange"
+					:disabled="resumeAudioAfterChange"
 					@click.stop="toggleAudio">
 					<template #icon>
 						<VolumeIndicator
@@ -41,26 +41,31 @@
 
 		<NcActions
 			v-if="showDevices"
-			:disabled="!isAudioAvailable || !isAudioAllowed"
+			:disabled="!isAudioAllowed && !audioOutputSupported || !!audioStreamError"
 			class="audio-selector-button"
+			:class="{
+				'no-audio-available': !isAudioAvailable,
+			}"
 			@open="updateDevices">
 			<template #icon>
 				<IconChevronUp :size="16" />
 			</template>
-			<NcActionCaption :name="t('spreed', 'Select a microphone')" />
-			<NcActionButton
-				v-for="device in audioInputDevices"
-				:key="device.deviceId ?? 'none'"
-				class="audio-selector__action"
-				type="radio"
-				:model-value="audioInputId"
-				:value="device.deviceId"
-				:title="device.label"
-				@click="handleAudioInputIdChange(device.deviceId)">
-				{{ device.label }}
-			</NcActionButton>
+			<template v-if="isAudioAllowed">
+				<NcActionCaption :name="t('spreed', 'Select a microphone')" />
+				<NcActionButton
+					v-for="device in audioInputDevices"
+					:key="device.deviceId ?? 'none'"
+					class="audio-selector__action"
+					type="radio"
+					:model-value="audioInputId"
+					:value="device.deviceId"
+					:title="device.label"
+					@click="handleAudioInputIdChange(device.deviceId)">
+					{{ device.label }}
+				</NcActionButton>
+			</template>
+			<NcActionSeparator v-if="isAudioAllowed && audioOutputSupported" />
 			<template v-if="audioOutputSupported">
-				<NcActionSeparator />
 				<NcActionCaption :name="t('spreed', 'Select a speaker')" />
 				<NcActionButton
 					v-for="device in audioOutputDevices"
@@ -171,6 +176,7 @@ export default {
 			devices,
 			audioInputId,
 			audioOutputId,
+			audioStreamError,
 			updateDevices,
 			audioOutputSupported,
 			updatePreferences,
@@ -202,6 +208,7 @@ export default {
 			devices,
 			audioInputId,
 			audioOutputId,
+			audioStreamError,
 			updateDevices,
 			audioOutputSupported,
 			updatePreferences,
@@ -295,7 +302,7 @@ export default {
 	methods: {
 		t,
 		toggleAudio() {
-			if (!this.isAudioAvailable) {
+			if (!this.isAudioAllowed || !this.isAudioAvailable) {
 				emit('talk:media-settings:show')
 				return
 			}
diff --git a/src/components/CallView/shared/LocalVideoControlButton.vue b/src/components/CallView/shared/LocalVideoControlButton.vue
index ca235fdfb91..f11002aa1ff 100644
--- a/src/components/CallView/shared/LocalVideoControlButton.vue
+++ b/src/components/CallView/shared/LocalVideoControlButton.vue
@@ -7,13 +7,13 @@
 	<div class="local-video-control-wrapper">
 		<NcButton
 			:title="videoButtonTitle"
-			:variant="variant"
+			:variant="videoStreamError ? 'error' : variant"
 			:aria-label="videoButtonAriaLabel"
 			:class="{
 				'no-video-available': !isVideoAvailable,
 				'video-control-button': showDevices,
 			}"
-			:disabled="!isVideoAllowed || resumeVideoAfterChange"
+			:disabled="resumeVideoAfterChange"
 			@click.stop="toggleVideo">
 			<template #icon>
 				<IconVideo v-if="showVideoOn || resumeVideoAfterChange" :size="20" />
@@ -23,7 +23,7 @@
 
 		<NcActions
 			v-if="showDevices"
-			:disabled="!isVideoAvailable || !isVideoAllowed"
+			:disabled="!isVideoAvailable || !isVideoAllowed || !!videoStreamError"
 			class="video-selector-button"
 			@open="updateDevices">
 			<template #icon>
@@ -109,6 +109,7 @@ export default {
 		const {
 			devices,
 			videoInputId,
+			videoStreamError,
 			updateDevices,
 			updatePreferences,
 			subscribeToDevices,
@@ -121,6 +122,7 @@ export default {
 		return {
 			devices,
 			videoInputId,
+			videoStreamError,
 			updateDevices,
 			updatePreferences,
 			subscribeToDevices,
@@ -220,7 +222,7 @@ export default {
 	methods: {
 		t,
 		toggleVideo() {
-			if (!this.isVideoAvailable) {
+			if (!this.isVideoAllowed || !this.isVideoAvailable) {
 				emit('talk:media-settings:show')
 				return
 			}
diff --git a/src/components/MediaSettings/MediaSettings.vue b/src/components/MediaSettings/MediaSettings.vue
index 465a12fa999..5d7ab49c4ee 100644
--- a/src/components/MediaSettings/MediaSettings.vue
+++ b/src/components/MediaSettings/MediaSettings.vue
@@ -174,7 +174,7 @@
 								@refresh="updateDevices"
 								@update:device-id="handleAudioOutputIdChange">
 								<template #extra-action>
-									<MediaDevicesSpeakerTest :disabled="audioStreamError" />
+									<MediaDevicesSpeakerTest :disabled="!!audioStreamError" />
 								</template>
 							</MediaDevicesSelector>
 						</template>