diff --git a/src/components/CallView/shared/LocalAudioControlButton.vue b/src/components/CallView/shared/LocalAudioControlButton.vue
index cb90c5eab81..194c12ab106 100644
--- a/src/components/CallView/shared/LocalAudioControlButton.vue
+++ b/src/components/CallView/shared/LocalAudioControlButton.vue
@@ -20,7 +20,7 @@
 <template>
 	<NcButton v-shortkey.once="disableKeyboardShortcuts ? null : ['m']"
 		v-tooltip="audioButtonTooltip"
-		:type="ncButtonType"
+		:type="type"
 		:aria-label="audioButtonAriaLabel"
 		:class="{ 'no-audio-available': !isAudioAllowed || !model.attributes.audioAvailable }"
 		@shortkey="toggleAudio"
@@ -30,7 +30,6 @@
 				:audio-enabled="showMicrophoneOn"
 				:current-volume="model.attributes.currentVolume"
 				:volume-threshold="model.attributes.volumeThreshold"
-				:primary-color="color"
 				overlay-muted-color="#888888" />
 		</template>
 	</NcButton>
@@ -70,16 +69,11 @@ export default {
 			default: OCP.Accessibility.disableKeyboardShortcuts(),
 		},
 
-		ncButtonType: {
+		type: {
 			type: String,
 			default: 'tertiary-no-background',
 		},
 
-		color: {
-			type: String,
-			default: 'currentColor',
-		},
-
 		token: {
 			type: String,
 			required: true,
diff --git a/src/components/CallView/shared/LocalVideoControlButton.vue b/src/components/CallView/shared/LocalVideoControlButton.vue
index 5030d372790..d46c465f9fb 100644
--- a/src/components/CallView/shared/LocalVideoControlButton.vue
+++ b/src/components/CallView/shared/LocalVideoControlButton.vue
@@ -20,14 +20,14 @@
 <template>
 	<NcButton v-shortkey.once="disableKeyboardShortcuts ? null : ['v']"
 		v-tooltip="videoButtonTooltip"
-		:type="ncButtonType"
+		:type="type"
 		:aria-label="videoButtonAriaLabel"
 		:class="{ 'no-video-available': !isVideoAllowed || !model.attributes.videoAvailable }"
 		@shortkey="toggleVideo"
 		@click.stop="toggleVideo">
 		<template #icon>
-			<VideoIcon v-if="showVideoOn" :size="20" :fill-color="color" />
-			<VideoOff v-else :size="20" :fill-color="color" />
+			<VideoIcon v-if="showVideoOn" :size="20" />
+			<VideoOff v-else :size="20" />
 		</template>
 	</NcButton>
 </template>
@@ -68,16 +68,11 @@ export default {
 			default: OCP.Accessibility.disableKeyboardShortcuts(),
 		},
 
-		ncButtonType: {
+		type: {
 			type: String,
 			default: 'tertiary-no-background',
 		},
 
-		color: {
-			type: String,
-			default: 'currentColor',
-		},
-
 		token: {
 			type: String,
 			required: true,
diff --git a/src/components/CallView/shared/ViewerOverlayCallView.vue b/src/components/CallView/shared/ViewerOverlayCallView.vue
index 95505abd431..ebeafbc66da 100644
--- a/src/components/CallView/shared/ViewerOverlayCallView.vue
+++ b/src/components/CallView/shared/ViewerOverlayCallView.vue
@@ -106,13 +106,13 @@
 								:token="token"
 								:conversation="conversation"
 								:model="localModel"
-								nc-button-type="secondary"
+								type="secondary"
 								disable-keyboard-shortcuts />
 							<LocalVideoControlButton class="viewer-overlay__button"
 								:token="token"
 								:conversation="conversation"
 								:model="localModel"
-								nc-button-type="secondary"
+								type="secondary"
 								disable-keyboard-shortcuts />
 						</div>
 					</div>
diff --git a/src/components/TopBar/CallButton.vue b/src/components/TopBar/CallButton.vue
index 7f776f3dd71..b9a1f156780 100644
--- a/src/components/TopBar/CallButton.vue
+++ b/src/components/TopBar/CallButton.vue
@@ -51,7 +51,7 @@
 		</NcButton>
 		<NcButton v-else-if="showLeaveCallButton && !canEndForAll && !isBreakoutRoom"
 			id="call_button"
-			type="error"
+			:type="isScreensharing ? 'tertiary' : 'error'"
 			:disabled="loading"
 			@click="leaveCall(false)">
 			<template #icon>
@@ -64,7 +64,7 @@
 			:menu-name="leaveCallCombinedLabel"
 			force-name
 			:container="container"
-			type="error">
+			:type="isScreensharing ? 'tertiary' : 'error'">
 			<template #icon>
 				<VideoOff v-if="!isBreakoutRoom" :size="20" />
 				<ArrowLeft v-else :size="20" />
@@ -170,6 +170,11 @@ export default {
 			type: Boolean,
 			default: false,
 		},
+
+		isScreensharing: {
+			type: Boolean,
+			default: false,
+		}
 	},
 
 	setup() {
@@ -446,4 +451,5 @@ export default {
 #call_button {
 	margin: 0 auto;
 }
+
 </style>
diff --git a/src/components/TopBar/ReactionMenu.vue b/src/components/TopBar/ReactionMenu.vue
index c49041b334a..9152f4d0c2d 100644
--- a/src/components/TopBar/ReactionMenu.vue
+++ b/src/components/TopBar/ReactionMenu.vue
@@ -21,12 +21,12 @@
 
 <template>
 	<NcActions v-tooltip="t('spreed', 'Send a reaction')"
+		type="tertiary"
 		:aria-label="t('spreed', 'Send a reaction')"
 		:container="container"
 		class="reaction">
 		<template #icon>
-			<EmoticonOutline :size="20"
-				fill-color="#ffffff" />
+			<EmoticonOutline :size="20" />
 		</template>
 
 		<NcActionButtonGroup class="reaction__group"
diff --git a/src/components/TopBar/TopBar.vue b/src/components/TopBar/TopBar.vue
index 3bee056e429..a99fff4a8c6 100644
--- a/src/components/TopBar/TopBar.vue
+++ b/src/components/TopBar/TopBar.vue
@@ -20,7 +20,7 @@
 -->
 
 <template>
-	<div class="top-bar" :class="{ 'in-call': isInCall }">
+	<div class="top-bar" :data-theme-dark="isInCall">
 		<ConversationIcon :key="conversation.token"
 			class="conversation-icon"
 			:offline="isPeerInactive"
@@ -60,33 +60,28 @@
 
 		<!-- Call time -->
 		<CallTime v-if="isInCall"
-			:start="conversation.callStartTime"
-			class="top-bar__button dark-hover" />
+			:start="conversation.callStartTime" />
 
 		<!-- Participants counter -->
 		<NcButton v-if="isInCall && !isOneToOneConversation && isModeratorOrUser"
 			:title="participantsInCallAriaLabel"
 			:aria-label="participantsInCallAriaLabel"
-			class="top-bar__button dark-hover"
 			type="tertiary"
 			@click="openSidebar('participants')">
 			<template #icon>
-				<AccountMultiple :size="20"
-					fill-color="#ffffff" />
+				<AccountMultiple :size="20" />
 			</template>
 			{{ participantsInCall }}
 		</NcButton>
 
 		<!-- Reactions menu -->
-		<ReactionMenu v-if="hasReactionSupport"
-			class="top-bar__button dark-hover"
+		<ReactionMenu v-if="isInCall && hasReactionSupport"
 			:token="token"
 			:supported-reactions="supportedReactions"
 			:local-call-participant-model="localCallParticipantModel" />
 
 		<!-- Local media controls -->
 		<TopBarMediaControls v-if="isInCall"
-			class="local-media-controls dark-hover"
 			:token="token"
 			:model="localMediaModel"
 			:show-actions="!isSidebar"
@@ -95,13 +90,12 @@
 
 		<!-- TopBar menu -->
 		<TopBarMenu :token="token"
-			class="top-bar__button dark-hover"
 			:show-actions="!isSidebar"
 			:is-sidebar="isSidebar"
 			:model="localMediaModel"
 			@open-breakout-rooms-editor="showBreakoutRoomsEditor = true" />
 
-		<CallButton class="top-bar__button" />
+		<CallButton :is-screensharing="!!localMediaModel.attributes.localScreen" />
 
 		<!-- sidebar toggle -->
 		<template v-if="showOpenSidebarButton">
@@ -109,7 +103,6 @@
 			<NcButton v-if="!isInCall"
 				:aria-label="t('spreed', 'Open sidebar')"
 				:title="t('spreed', 'Open sidebar')"
-				class="top-bar__button dark-hover"
 				close-after-click="true"
 				type="tertiary"
 				@click="openSidebar">
@@ -122,12 +115,11 @@
 			<NcButton v-else
 				:aria-label="t('spreed', 'Open chat')"
 				:title="t('spreed', 'Open chat')"
-				class="top-bar__button chat-button dark-hover"
+				class="chat-button"
 				type="tertiary"
 				@click="openSidebar('chat')">
 				<template #icon>
-					<MessageText :size="20"
-						fill-color="#ffffff" />
+					<MessageText :size="20" />
 					<NcCounterBubble v-if="unreadMessagesCounter > 0"
 						class="chat-button__unread-messages-counter"
 						:type="hasUnreadMentions ? 'highlighted' : 'outlined'">
@@ -406,7 +398,9 @@ export default {
 <style lang="scss" scoped>
 .top-bar {
 	display: flex;
+	flex-wrap: wrap;
 	z-index: 10;
+	gap: 3px;
 	justify-content: flex-end;
 	padding: 8px;
 	background-color: var(--color-main-background);
@@ -416,40 +410,13 @@ export default {
 		margin-right: var(--default-clickable-area);
 	}
 
-	&.in-call {
+	&[data-theme-dark="true"] {
 		right: 0;
 		border: none;
 		position: absolute;
 		top: 0;
-		left:0;
+		left: 0;
 		background-color: transparent;
-		display: flex;
-		flex-wrap: wrap;
-		& * {
-			color: #fff;
-		}
-
-		:deep(button.dark-hover:hover),
-		.dark-hover :deep(button:hover),
-		.dark-hover :deep(.action-item--open button),
-		:deep(.action-item--open.dark-hover button) {
-			background-color: rgba(0, 0, 0, 0.2);
-		}
-	}
-
-	&__button {
-		margin: 0 2px;
-		align-self: center;
-		display: flex;
-		align-items: center;
-		white-space: nowrap;
-		.icon {
-			margin-right: 4px !important;
-		}
-
-		&__force-white {
-			color: white;
-		}
 	}
 
 	.chat-button {
diff --git a/src/components/TopBar/TopBarMediaControls.vue b/src/components/TopBar/TopBarMediaControls.vue
index 22377bddfde..aa5b7fe7392 100644
--- a/src/components/TopBar/TopBarMediaControls.vue
+++ b/src/components/TopBar/TopBarMediaControls.vue
@@ -63,28 +63,29 @@
 			:token="token"
 			:conversation="conversation"
 			:model="model"
-			color="#ffffff" />
+			type="tertiary" />
 
 		<LocalVideoControlButton :token="token"
 			:conversation="conversation"
 			:model="model"
-			color="#ffffff" />
+			type="tertiary" />
 
 		<NcButton v-if="isVirtualBackgroundAvailable && !showActions"
 			v-tooltip="toggleVirtualBackgroundButtonLabel"
-			type="tertiary-no-background"
+			type="tertiary"
 			:aria-label="toggleVirtualBackgroundButtonLabel"
 			:class="blurButtonClass"
 			@click.stop="toggleVirtualBackground">
 			<template #icon>
-				<Blur v-if="isVirtualBackgroundEnabled" :size="20" fill-color="#ffffff" />
-				<BlurOff v-else :size="20" fill-color="#ffffff" />
+				<Blur v-if="isVirtualBackgroundEnabled" :size="20" />
+				<BlurOff v-else :size="20" />
 			</template>
 		</NcButton>
 
-		<NcActions v-if="!screenSharingButtonHidden"
+		<NcActions v-if="!screenSharingButtonHidden && isScreensharing"
 			id="screensharing-button"
 			v-tooltip="screenSharingButtonTooltip"
+			type="error"
 			:aria-label="screenSharingButtonAriaLabel"
 			:class="screenSharingButtonClass"
 			class="app-navigation-entry-utils-menu-button"
@@ -93,33 +94,31 @@
 			:open.sync="screenSharingMenuOpen">
 			<!-- Actions button icon -->
 			<template #icon>
-				<MonitorOff v-if="model.attributes.localScreen" :size="20" fill-color="#ffffff" />
-				<MonitorShare v-else :size="20" fill-color="#ffffff" />
+				<MonitorOff v-if="isScreensharing" :size="20" />
 			</template>
 			<!-- /Actions button icon -->
 			<!-- Actions -->
-			<NcActionButton v-if="!screenSharingMenuOpen"
-				@click.stop="toggleScreenSharingMenu">
+			<NcActionButton close-after-click @click="showScreen">
 				<template #icon>
-					<MonitorShare :size="20" fill-color="#ffffff" />
+					<Monitor :size="20" />
 				</template>
-				{{ screenSharingButtonTooltip }}
+				{{ t('spreed', 'Show your screen') }}
+			</NcActionButton>
+			<NcActionButton close-after-click @click="stopScreen">
+				<template #icon>
+					<MonitorOff :size="20" />
+				</template>
+				{{ t('spreed', 'Stop screensharing') }}
 			</NcActionButton>
-			<template v-if="model.attributes.localScreen">
-				<NcActionButton close-after-click @click="showScreen">
-					<template #icon>
-						<Monitor :size="20" />
-					</template>
-					{{ t('spreed', 'Show your screen') }}
-				</NcActionButton>
-				<NcActionButton close-after-click @click="stopScreen">
-					<template #icon>
-						<MonitorOff :size="20" />
-					</template>
-					{{ t('spreed', 'Stop screensharing') }}
-				</NcActionButton>
-			</template>
 		</NcActions>
+		<NcButton v-else-if="!screenSharingButtonHidden"
+			v-tooltip="screenSharingButtonTooltip"
+			type="tertiary"
+			@click.stop="toggleScreenSharingMenu">
+			<template #icon>
+				<MonitorShare :size="20" />
+			</template>
+		</NcButton>
 	</div>
 </template>
 
@@ -254,11 +253,15 @@ export default {
 
 		screenSharingButtonClass() {
 			return {
-				'screensharing-enabled': this.isScreensharingAllowed && this.model.attributes.localScreen,
+				'screensharing-enabled': this.isScreensharingAllowed && this.isScreensharing,
 				'no-screensharing-available': !this.isScreensharingAllowed,
 			}
 		},
 
+		isScreensharing() {
+			return this.model.attributes.localScreen
+		},
+
 		screenSharingButtonTooltip() {
 			if (!this.isScreensharingAllowed) {
 				return t('spreed', 'You are not allowed to enable screensharing')
@@ -272,7 +275,7 @@ export default {
 				return t('spreed', 'No screensharing')
 			}
 
-			return this.model.attributes.localScreen
+			return this.isScreensharing
 				? t('spreed', 'Screensharing options')
 				: t('spreed', 'Enable screensharing')
 		},
@@ -282,7 +285,7 @@ export default {
 				return ''
 			}
 
-			return this.model.attributes.localScreen
+			return this.isScreensharing
 				? t('spreed', 'Screensharing options')
 				: t('spreed', 'Enable screensharing')
 		},
@@ -486,13 +489,13 @@ export default {
 				return
 			}
 
-			if (!this.model.attributes.localScreen) {
+			if (!this.isScreensharing) {
 				this.startShareScreen()
 			}
 		},
 
 		showScreen() {
-			if (this.model.attributes.localScreen) {
+			if (this.isScreensharing) {
 				emit('switch-screen-to-id', this.localCallParticipantModel.attributes.peerId)
 			}
 		},
@@ -568,6 +571,7 @@ export default {
 .buttons-bar {
 	display: flex;
 	align-items: center;
+	gap: 3px;
 }
 
 .buttons-bar #screensharing-menu button {
diff --git a/src/components/TopBar/TopBarMenu.vue b/src/components/TopBar/TopBarMenu.vue
index 09a23c851c3..3103bb58deb 100644
--- a/src/components/TopBar/TopBarMenu.vue
+++ b/src/components/TopBar/TopBarMenu.vue
@@ -25,13 +25,13 @@
 			v-shortkey.once="disableKeyboardShortcuts ? null : ['r']"
 			v-tooltip="raiseHandButtonLabel"
 			:aria-label="raiseHandButtonLabel"
-			type="tertiary-no-background"
+			type="tertiary"
 			@shortkey="toggleHandRaised"
 			@click.stop="toggleHandRaised">
 			<template #icon>
 				<!-- The following icon is much bigger than all the others
 					so we reduce its size -->
-				<HandBackLeft :size="18" fill-color="#ffffff" />
+				<HandBackLeft :size="18" />
 			</template>
 		</NcButton>
 
@@ -39,12 +39,12 @@
 			v-shortkey.once="disableKeyboardShortcuts ? null : ['f']"
 			v-tooltip="t('spreed', 'Conversation actions')"
 			:aria-label="t('spreed', 'Conversation actions')"
+			type="tertiary"
 			:container="container"
 			@shortkey.native="toggleFullscreen">
 			<!-- Menu icon: white if in call -->
 			<template v-if="isInCall" #icon>
-				<DotsHorizontal :size="20"
-					fill-color="#ffffff" />
+				<DotsHorizontal :size="20" />
 			</template>
 			<template v-if="showActions && isInCall">
 				<!-- Raise hand -->