diff --git a/src/components/MediaSettings/MediaSettings.vue b/src/components/MediaSettings/MediaSettings.vue
index 9f8bf4b2dcb..a6529316fa8 100644
--- a/src/components/MediaSettings/MediaSettings.vue
+++ b/src/components/MediaSettings/MediaSettings.vue
@@ -74,46 +74,28 @@
 				</div>
 			</div>
 
-			<!-- Tabs -->
-			<div class="media-settings__call-preferences">
-				<NcButton :type="showDeviceSelection ? 'secondary' : 'tertiary'"
-					wide
-					@click="toggleTab('devices')">
-					<template #icon>
-						<Cog :size="20" />
-					</template>
-					{{ t('spreed', 'Devices') }}
-				</NcButton>
-				<NcButton v-if="isVirtualBackgroundAvailable"
-					:type="showBackgroundEditor ? 'secondary' : 'tertiary'"
-					wide
-					@click="toggleTab('backgrounds')">
-					<template #icon>
-						<Creation :size="20" />
-					</template>
-					{{ t('spreed', 'Backgrounds') }}
-				</NcButton>
-			</div>
-
-			<!-- Device selection -->
-			<div v-if="showDeviceSelection" class="media-settings__device-selection">
-				<MediaDevicesSelector kind="audioinput"
-					:devices="devices"
-					:device-id="audioInputId"
-					@refresh="updateDevices"
-					@update:deviceId="handleAudioInputIdChange" />
-				<MediaDevicesSelector kind="videoinput"
-					:devices="devices"
-					:device-id="videoInputId"
-					@refresh="updateDevices"
-					@update:deviceId="handleVideoInputIdChange" />
-				<MediaDevicesSpeakerTest />
-			</div>
+			<!-- Tab panels -->
+			<MediaSettingsTabs :active.sync="tabContent" :tabs="tabs">
+				<template #tab-panel:devices>
+					<MediaDevicesSelector kind="audioinput"
+						:devices="devices"
+						:device-id="audioInputId"
+						@refresh="updateDevices"
+						@update:deviceId="handleAudioInputIdChange" />
+					<MediaDevicesSelector kind="videoinput"
+						:devices="devices"
+						:device-id="videoInputId"
+						@refresh="updateDevices"
+						@update:deviceId="handleVideoInputIdChange" />
+					<MediaDevicesSpeakerTest />
+				</template>
 
-			<!-- Background selection -->
-			<VideoBackgroundEditor v-if="showBackgroundEditor"
-				:token="token"
-				@update-background="handleUpdateVirtualBackground" />
+				<template #tab-panel:backgrounds>
+					<VideoBackgroundEditor class="media-settings__tab"
+						:token="token"
+						@update-background="handleUpdateVirtualBackground" />
+				</template>
+			</MediaSettingsTabs>
 
 			<!-- "Always show" setting -->
 			<NcCheckboxRadioSwitch v-if="!isPublicShareAuthSidebar"
@@ -192,7 +174,7 @@
 </template>
 
 <script>
-import { ref } from 'vue'
+import { computed, markRaw, ref } from 'vue'
 
 import Bell from 'vue-material-design-icons/Bell.vue'
 import BellOff from 'vue-material-design-icons/BellOff.vue'
@@ -215,6 +197,7 @@ import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip.js'
 
 import MediaDevicesSelector from './MediaDevicesSelector.vue'
 import MediaDevicesSpeakerTest from './MediaDevicesSpeakerTest.vue'
+import MediaSettingsTabs from './MediaSettingsTabs.vue'
 import VideoBackgroundEditor from './VideoBackgroundEditor.vue'
 import AvatarWrapper from '../AvatarWrapper/AvatarWrapper.vue'
 import VideoBackground from '../CallView/shared/VideoBackground.vue'
@@ -242,8 +225,6 @@ export default {
 		Bell,
 		BellOff,
 		CallButton,
-		Cog,
-		Creation,
 		NcActionButton,
 		NcActions,
 		NcButton,
@@ -252,6 +233,7 @@ export default {
 		NcNoteCard,
 		MediaDevicesSelector,
 		MediaDevicesSpeakerTest,
+		MediaSettingsTabs,
 		ReflectHorizontal,
 		VideoBackground,
 		VideoIcon,
@@ -290,6 +272,20 @@ export default {
 			virtualBackground,
 		} = useDevices(video, false)
 
+		const isVirtualBackgroundAvailable = computed(() => virtualBackground.value.isAvailable())
+
+		const devicesTab = {
+			id: 'devices',
+			label: t('spreed', 'Devices'),
+			icon: markRaw(Cog),
+		}
+		const backgroundsTab = {
+			id: 'backgrounds',
+			label: t('spreed', 'Backgrounds'),
+			icon: markRaw(Creation),
+		}
+		const tabs = computed(() => isVirtualBackgroundAvailable.value ? [devicesTab, backgroundsTab] : [devicesTab])
+
 		return {
 			AVATAR,
 			isInCall,
@@ -310,13 +306,14 @@ export default {
 			stopDevices,
 			virtualBackground,
 			model: localMediaModel,
+			tabs,
 		}
 	},
 
 	data() {
 		return {
 			modal: false,
-			tabContent: 'none',
+			tabContent: undefined,
 			audioOn: undefined,
 			videoOn: undefined,
 			silentCall: false,
@@ -428,18 +425,6 @@ export default {
 			return !(this.hasCall && !this.isInLobby) && !this.isPublicShareAuthSidebar
 		},
 
-		showDeviceSelection() {
-			return this.tabContent === 'devices'
-		},
-
-		showBackgroundEditor() {
-			return this.tabContent === 'backgrounds'
-		},
-
-		isVirtualBackgroundAvailable() {
-			return this.virtualBackground.isAvailable()
-		},
-
 		showUpdateChangesButton() {
 			return this.updatedBackground || this.audioDeviceStateChanged
 				|| this.videoDeviceStateChanged
@@ -471,13 +456,13 @@ export default {
 		},
 
 		audioInputId(audioInputId) {
-			if (this.showDeviceSelection && audioInputId && !this.audioOn) {
+			if (this.tabContent === 'devices' && audioInputId && !this.audioOn) {
 				this.toggleAudio()
 			}
 		},
 
 		videoInputId(videoInputId) {
-			if (this.showDeviceSelection && videoInputId && !this.videoOn) {
+			if (this.tabContent === 'devices' && videoInputId && !this.videoOn) {
 				this.toggleVideo()
 			}
 		},
@@ -667,14 +652,6 @@ export default {
 			}
 		},
 
-		toggleTab(tab) {
-			if (this.tabContent !== tab) {
-				this.tabContent = tab
-			} else {
-				this.tabContent = 'none'
-			}
-		},
-
 		setShowMediaSettings(newValue) {
 			this.settingsStore.setShowMediaSettings(this.token, newValue)
 		},
@@ -732,18 +709,6 @@ export default {
 		box-shadow: 0 0 var(--default-grid-baseline) var(--color-box-shadow);
 	}
 
-	&__device-selection {
-		width: 100%;
-	}
-
-	&__call-preferences {
-		height: var(--default-clickable-area);
-		display: flex;
-		justify-content: center;
-		align-items: center;
-		gap: calc(var(--default-grid-baseline) * 2);
-	}
-
 	&__call-buttons {
 		display: flex;
 		z-index: 1;
diff --git a/src/components/MediaSettings/MediaSettingsTabs.vue b/src/components/MediaSettings/MediaSettingsTabs.vue
new file mode 100644
index 00000000000..b92a6d2e037
--- /dev/null
+++ b/src/components/MediaSettings/MediaSettingsTabs.vue
@@ -0,0 +1,158 @@
+<!--
+  - SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors
+  - SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import type { Component } from 'vue'
+
+import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
+
+import TransitionExpandDown from './TransitionExpandDown.vue'
+
+type TabDefinition = {
+	id: string,
+	label: string,
+	icon: Component,
+}
+
+const props = defineProps<{
+    tabs: TabDefinition[],
+    active?: string,
+}>()
+
+const emit = defineEmits<{
+    (event: 'update:active', value?: string): void
+}>()
+
+/** Whether the tab panel is open */
+const isOpen = ref(!!props.active)
+
+// A11y ReferenceIDs
+const randomId = Math.random().toString(36).substring(7)
+const getRefId = (scope: 'tab' | 'panel', key: string) => `tab-${randomId}-${scope}-${key}`
+
+/**
+ * Whether the tab panel horizontal transition is enabled.
+ * Used to prevent the panel switch transition when the tab is first rendered.
+ */
+const enableTransition = ref(false)
+
+/** Index of the active tab for the transition effect */
+const activeIndex = computed(() => props.tabs.findIndex(tab => tab.id === props.active))
+
+/**
+ * Whether the tab is active
+ * @param tabId - Tab ID
+ */
+function isActive(tabId: string) {
+	return tabId === props.active
+}
+
+/**
+ * Whether the tab is selected on UI
+ * @param tabId - Tab ID
+ */
+function isSelected(tabId: string) {
+	return isOpen.value && isActive(tabId)
+}
+
+/**
+ * Toggle the tab:
+ * - Toggle the tab on the current tab click
+ * - Switch and open tab on a new tab click
+ * @param tabId - New selected tabId
+ */
+function handleTabClick(tabId: string) {
+	if (isActive(tabId)) {
+		isOpen.value = !isOpen.value
+	} else {
+		emit('update:active', tabId)
+		isOpen.value = true
+	}
+}
+
+/**
+ * Handle the tab panel opening transition finish
+ */
+function handleTabsAfterOpen() {
+	// Enable horizontal slide transition only after the tab panel is fully open
+	// Otherwise it slides to the active tab during opening
+	enableTransition.value = true
+}
+
+/**
+ * Handle the tab panel closing transition finish
+ */
+function handleTabsAfterClosed() {
+	// Emit tab change to none only when the tab panel is fully closed
+	// Otherwise visually open tab disappears with transition during closing
+	emit('update:active', undefined)
+	enableTransition.value = false
+}
+</script>
+
+<template>
+	<div class="tabs">
+		<div class="tab-list" role="tablist">
+			<NcButton v-for="tab in tabs"
+				:id="getRefId('tab', tab.id)"
+				:key="tab.id"
+				wide
+				role="tab"
+				:type="isSelected(tab.id) ? 'secondary' : 'tertiary'"
+				:aria-selected="isSelected(tab.id) ? 'true' : 'false'"
+				:aria-controls="getRefId('panel', tab.id)"
+				@click.stop="handleTabClick(tab.id)">
+				<template #icon>
+					<component :is="tab.icon" :size="20" />
+				</template>
+				{{ tab.label }}
+			</NcButton>
+		</div>
+
+		<TransitionExpandDown :show="isOpen" @after-enter="handleTabsAfterOpen" @after-leave="handleTabsAfterClosed">
+			<div class="tab-panels-container">
+				<div v-for="tab in tabs"
+					:id="getRefId('panel', tab.id)"
+					:key="tab.id"
+					class="tab-panel"
+					:class="{ 'tab-panel--with-transition': enableTransition }"
+					role="tabpanel"
+					:inert="!isActive(tab.id)"
+					:aria-hidden="!isActive(tab.id)"
+					:aria-labelledby="getRefId('tab', tab.id)"
+					:style="activeIndex !== -1 ? `transform: translateX(${-activeIndex * 100}%)` : ''">
+					<slot :name="`tab-panel:${tab.id}`" />
+				</div>
+			</div>
+		</TransitionExpandDown>
+	</div>
+</template>
+
+<style lang="scss" scoped>
+.tab-list {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	gap: calc(var(--default-grid-baseline) * 2);
+}
+
+.tab-panels-container {
+	display: flex;
+	width: 100%;
+	overflow: hidden;
+	transition: height ease var(--animation-slow);
+}
+
+.tab-panel {
+	width: 100%;
+	flex: 1 0 100%;
+	transition: none;
+
+	&--with-transition {
+		transition: transform ease var(--animation-slow);
+	}
+}
+</style>
diff --git a/src/components/MediaSettings/TransitionExpandDown.vue b/src/components/MediaSettings/TransitionExpandDown.vue
new file mode 100644
index 00000000000..090e7547d12
--- /dev/null
+++ b/src/components/MediaSettings/TransitionExpandDown.vue
@@ -0,0 +1,49 @@
+<!--
+  - SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors
+  - SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+
+<script setup lang="ts">
+defineProps<{
+	show: boolean,
+}>()
+
+const emit = defineEmits<{
+	(event: 'after-enter'): void,
+	(event: 'after-leave'): void,
+}>()
+</script>
+
+<template>
+	<Transition name="expand-down"
+		@after-enter="emit('after-enter')"
+		@after-leave="emit('after-leave')">
+		<div v-show="show" class="expand-down-wrapper">
+			<slot />
+		</div>
+	</Transition>
+</template>
+
+<style scoped>
+.expand-down-wrapper {
+	display: grid;
+	grid-template-rows: 1fr;
+	grid-template-columns: 1fr;
+	overflow: hidden;
+}
+
+.expand-down-enter-active,
+.expand-down-leave-active {
+	transition: grid-template-rows ease var(--animation-slow);
+}
+
+.expand-down-enter,
+.expand-down-leave-to {
+	grid-template-rows: 0fr;
+}
+
+.expand-down-enter-to,
+.expand-down-leave {
+	grid-template-rows: 1fr;
+}
+</style>
diff --git a/src/components/MediaSettings/VideoBackgroundEditor.vue b/src/components/MediaSettings/VideoBackgroundEditor.vue
index 53c82522084..2daba8761a3 100644
--- a/src/components/MediaSettings/VideoBackgroundEditor.vue
+++ b/src/components/MediaSettings/VideoBackgroundEditor.vue
@@ -302,6 +302,11 @@ export default {
 		&--selected {
 			box-shadow: inset 0 0 0 var(--default-grid-baseline) var(--color-primary-element);
 		}
+
+		&:focus-visible {
+			// Do not overflow container
+			outline-offset: -2px; // inline with server's global focus outline
+		}
 	}
 }