diff --git a/src/components/TopBar/TopBar.vue b/src/components/TopBar/TopBar.vue
index da7f9019034..6ddc398a366 100644
--- a/src/components/TopBar/TopBar.vue
+++ b/src/components/TopBar/TopBar.vue
@@ -56,12 +56,13 @@
 
 		<!-- Call time -->
 		<CallTime v-if="isInCall"
-			:start="conversation.callStartTime" />
+			:start="conversation.callStartTime"
+			class="dark-hover" />
 
 		<!-- Participants counter -->
 		<NcButton v-if="isInCall && !isOneToOneConversation && isModeratorOrUser"
 			v-tooltip="t('spreed', 'Participants in call')"
-			class="top-bar__button"
+			class="top-bar__button dark-hover"
 			type="tertiary"
 			@click="openSidebar('participants')">
 			<template #icon>
@@ -73,7 +74,7 @@
 
 		<!-- Local media controls -->
 		<LocalMediaControls v-if="isInCall"
-			class="local-media-controls"
+			class="local-media-controls dark-hover"
 			:token="token"
 			:model="localMediaModel"
 			:show-actions="!isSidebar"
@@ -82,16 +83,18 @@
 
 		<!-- TopBar menu -->
 		<TopBarMenu :token="token"
+			class="top-bar__button dark-hover"
 			:show-actions="!isSidebar"
 			:is-sidebar="isSidebar"
-			:model="localMediaModel" />
+			:model="localMediaModel"
+			@open-breakout-rooms-editor="showBreakoutRoomsEditor = true" />
 
 		<CallButton class="top-bar__button" />
 
 		<template v-if="showOpenSidebarButton">
 			<!-- sidebar toggle -->
 			<NcButton v-if="!isInCall"
-				class="top-bar__button"
+				class="top-bar__button dark-hover"
 				close-after-click="true"
 				type="tertiary"
 				@click="openSidebar">
@@ -103,7 +106,7 @@
 			<!-- chat button -->
 			<div v-if="isInCall"
 				class="chat-button">
-				<NcActions class="top-bar__button"
+				<NcActions class="top-bar__button dark-hover"
 					close-after-click="true"
 					:container="container">
 					<NcActionButton key="openSideBarButtonMessageText"
@@ -121,6 +124,11 @@
 				</NcCounterBubble>
 			</div>
 		</template>
+
+		<!-- Breakout rooms editor -->
+		<BreakoutRoomsEditor v-if="showBreakoutRoomsEditor"
+			:token="token"
+			@close="showBreakoutRoomsEditor = false" />
 	</div>
 </template>
 
@@ -147,6 +155,7 @@ import TopBarMenu from './TopBarMenu.vue'
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 import CallTime from './CallTime.vue'
 import MenuIcon from 'vue-material-design-icons/Menu.vue'
+import BreakoutRoomsEditor from '../BreakoutRoomsEditor/BreakoutRoomsEditor.vue'
 
 export default {
 	name: 'TopBar',
@@ -156,6 +165,7 @@ export default {
 	},
 
 	components: {
+		BreakoutRoomsEditor,
 		NcActionButton,
 		NcActions,
 		NcCounterBubble,
@@ -194,6 +204,7 @@ export default {
 	data: () => {
 		return {
 			unreadNotificationHandle: null,
+			showBreakoutRoomsEditor: false,
 			localCallParticipantModel,
 			localMediaModel,
 		}
@@ -404,11 +415,10 @@ export default {
 			color: #fff;
 		}
 
-		& button.top-bar__button:hover,
-		:deep(.action-item--open .action-item__menutoggle),
-		:deep(.action-item__menutoggle:hover),
-		:deep(.action-item--single:hover),
-		:deep(.buttons-bar button:hover) {
+		: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);
 		}
 	}
diff --git a/src/components/TopBar/TopBarMenu.vue b/src/components/TopBar/TopBarMenu.vue
index 471ab9b3463..8989f531ad6 100644
--- a/src/components/TopBar/TopBarMenu.vue
+++ b/src/components/TopBar/TopBarMenu.vue
@@ -20,147 +20,139 @@
 -->
 
 <template>
-	<Fragment>
-		<NcActions v-if="!isSidebar"
-			v-shortkey.once="disableKeyboardShortcuts ? null : ['f']"
-			v-tooltip="t('spreed', 'Conversation actions')"
-			class="top-bar__button"
-			:aria-label="t('spreed', 'Conversation actions')"
-			:container="container"
-			@shortkey.native="toggleFullscreen">
-			<!-- Menu icon: white if in call -->
-			<template v-if="isInCall" #icon>
-				<DotsHorizontal :size="20"
-					fill-color="#ffffff" />
-			</template>
-			<template v-if="showActions && isInCall">
-				<!-- Raise hand -->
-				<NcActionButton :close-after-click="true"
-					@click="toggleHandRaised">
-					<!-- The following icon is much bigger than all the others
+	<NcActions v-if="!isSidebar"
+		v-shortkey.once="disableKeyboardShortcuts ? null : ['f']"
+		v-tooltip="t('spreed', 'Conversation actions')"
+		:aria-label="t('spreed', 'Conversation actions')"
+		:container="container"
+		@shortkey.native="toggleFullscreen">
+		<!-- Menu icon: white if in call -->
+		<template v-if="isInCall" #icon>
+			<DotsHorizontal :size="20"
+				fill-color="#ffffff" />
+		</template>
+		<template v-if="showActions && isInCall">
+			<!-- Raise hand -->
+			<NcActionButton :close-after-click="true"
+				@click="toggleHandRaised">
+				<!-- The following icon is much bigger than all the others
 					so we reduce its size -->
-					<template #icon>
-						<HandBackLeft :size="16" />
-					</template>
-					{{ raiseHandButtonLabel }}
-				</NcActionButton>
-
-				<!-- Blur background -->
-				<NcActionButton v-if="isVirtualBackgroundAvailable"
-					:close-after-click="true"
-					@click="toggleVirtualBackground">
-					<template #icon>
-						<BlurOff v-if="isVirtualBackgroundEnabled"
-							:size="20" />
-						<Blur v-else
-							:size="20" />
-					</template>
-					{{ toggleVirtualBackgroundButtonLabel }}
-				</NcActionButton>
-
-				<!-- Mute others -->
-				<template v-if="showModerationOptions && canFullModerate">
-					<NcActionButton :close-after-click="true"
-						@click="forceMuteOthers">
-						<template #icon>
-							<MicrophoneOff :size="20" />
-						</template>
-						{{ t('spreed', 'Mute others') }}
-					</NcActionButton>
+				<template #icon>
+					<HandBackLeft :size="16" />
 				</template>
+				{{ raiseHandButtonLabel }}
+			</NcActionButton>
 
-				<!-- Device settings -->
-				<NcActionButton :close-after-click="true"
-					@click="showSettings">
-					<template #icon>
-						<VideoIcon :size="20" />
-					</template>
-					{{ t('spreed', 'Devices settings') }}
-				</NcActionButton>
-				<NcActionSeparator />
-			</template>
-
-			<!-- Call layout switcher -->
-			<NcActionButton v-if="showActions && isInCall"
+			<!-- Blur background -->
+			<NcActionButton v-if="isVirtualBackgroundAvailable"
 				:close-after-click="true"
-				@click="changeView">
+				@click="toggleVirtualBackground">
 				<template #icon>
-					<GridView v-if="!isGrid"
+					<BlurOff v-if="isVirtualBackgroundEnabled"
 						:size="20" />
-					<PromotedView v-else
+					<Blur v-else
 						:size="20" />
 				</template>
-				{{ changeViewText }}
-			</NcActionButton>
-
-			<!-- Fullscreen -->
-			<NcActionButton :icon="iconFullscreen"
-				:aria-label="t('spreed', 'Toggle fullscreen')"
-				:close-after-click="true"
-				@click="toggleFullscreen">
-				{{ labelFullscreen }}
+				{{ toggleVirtualBackgroundButtonLabel }}
 			</NcActionButton>
 
-			<!-- Go to file -->
-			<NcActionLink v-if="isFileConversation"
-				:href="linkToFile">
-				<template #icon>
-					<File :size="20" />
-				</template>
-				{{ t('spreed', 'Go to file') }}
-			</NcActionLink>
-			<NcActionSeparator v-if="showModerationOptions" />
-			<template v-if="showModerationOptions">
+			<!-- Mute others -->
+			<template v-if="showModerationOptions && canFullModerate">
 				<NcActionButton :close-after-click="true"
-					icon="icon-rename"
-					@click="handleRenameConversation">
-					{{ t('spreed', 'Rename conversation') }}
-				</NcActionButton>
-			</template>
-			<!-- Call recording -->
-			<template v-if="canModerateRecording">
-				<NcActionButton v-if="!isRecording && isInCall"
-					:close-after-click="true"
-					@click="startRecording">
+					@click="forceMuteOthers">
 					<template #icon>
-						<RecordCircle :size="20" />
+						<MicrophoneOff :size="20" />
 					</template>
-					{{ t('spreed', 'Start recording') }}
-				</NcActionButton>
-				<NcActionButton v-else-if="isRecording && isInCall"
-					:close-after-click="true"
-					@click="stopRecording">
-					<template #icon>
-						<StopIcon :size="20" />
-					</template>
-					{{ t('spreed', 'Stop recording') }}
+					{{ t('spreed', 'Mute others') }}
 				</NcActionButton>
 			</template>
 
-			<!-- Breakout rooms -->
+			<!-- Device settings -->
 			<NcActionButton :close-after-click="true"
-				@click="openBreakoutRoomsEditor">
+				@click="showSettings">
 				<template #icon>
-					<DotsCircle :size="20" />
+					<VideoIcon :size="20" />
 				</template>
-				{{ t('spreed', 'Setup breakout rooms') }}
+				{{ t('spreed', 'Devices settings') }}
 			</NcActionButton>
-
-			<!-- Conversation settings -->
+			<NcActionSeparator />
+		</template>
+
+		<!-- Call layout switcher -->
+		<NcActionButton v-if="showActions && isInCall"
+			:close-after-click="true"
+			@click="changeView">
+			<template #icon>
+				<GridView v-if="!isGrid"
+					:size="20" />
+				<PromotedView v-else
+					:size="20" />
+			</template>
+			{{ changeViewText }}
+		</NcActionButton>
+
+		<!-- Fullscreen -->
+		<NcActionButton :icon="iconFullscreen"
+			:aria-label="t('spreed', 'Toggle fullscreen')"
+			:close-after-click="true"
+			@click="toggleFullscreen">
+			{{ labelFullscreen }}
+		</NcActionButton>
+
+		<!-- Go to file -->
+		<NcActionLink v-if="isFileConversation"
+			:href="linkToFile">
+			<template #icon>
+				<File :size="20" />
+			</template>
+			{{ t('spreed', 'Go to file') }}
+		</NcActionLink>
+		<NcActionSeparator v-if="showModerationOptions" />
+		<template v-if="showModerationOptions">
 			<NcActionButton :close-after-click="true"
-				@click="openConversationSettings">
+				icon="icon-rename"
+				@click="handleRenameConversation">
+				{{ t('spreed', 'Rename conversation') }}
+			</NcActionButton>
+		</template>
+		<!-- Call recording -->
+		<template v-if="canModerateRecording">
+			<NcActionButton v-if="!isRecording && isInCall"
+				:close-after-click="true"
+				@click="startRecording">
+				<template #icon>
+					<RecordCircle :size="20" />
+				</template>
+				{{ t('spreed', 'Start recording') }}
+			</NcActionButton>
+			<NcActionButton v-else-if="isRecording && isInCall"
+				:close-after-click="true"
+				@click="stopRecording">
 				<template #icon>
-					<Cog :size="20" />
+					<StopIcon :size="20" />
 				</template>
-				{{ t('spreed', 'Conversation settings') }}
+				{{ t('spreed', 'Stop recording') }}
 			</NcActionButton>
-		</NcActions>
+		</template>
 
-		<!-- Breakout rooms editor -->
-		<BreakoutRoomsEditor v-if="showBreakoutRoomsEditor"
-			:token="token"
-			@close="showBreakoutRoomsEditor = false" />
-	</Fragment>
+		<!-- Breakout rooms -->
+		<NcActionButton :close-after-click="true"
+			@click="$emit('open-breakout-rooms-editor')">
+			<template #icon>
+				<DotsCircle :size="20" />
+			</template>
+			{{ t('spreed', 'Setup breakout rooms') }}
+		</NcActionButton>
+
+		<!-- Conversation settings -->
+		<NcActionButton :close-after-click="true"
+			@click="openConversationSettings">
+			<template #icon>
+				<Cog :size="20" />
+			</template>
+			{{ t('spreed', 'Conversation settings') }}
+		</NcActionButton>
+	</NcActions>
 </template>
 
 <script>
@@ -189,8 +181,6 @@ import RecordCircle from 'vue-material-design-icons/RecordCircle.vue'
 import StopIcon from 'vue-material-design-icons/Stop.vue'
 import VideoIcon from 'vue-material-design-icons/Video.vue'
 import DotsCircle from 'vue-material-design-icons/DotsCircle.vue'
-import BreakoutRoomsEditor from '../BreakoutRoomsEditor/BreakoutRoomsEditor.vue'
-import { Fragment } from 'vue-frag'
 
 export default {
 	name: 'TopBarMenu',
@@ -212,8 +202,6 @@ export default {
 		RecordCircle,
 		StopIcon,
 		DotsCircle,
-		BreakoutRoomsEditor,
-		Fragment,
 	},
 
 	mixins: [
@@ -251,10 +239,11 @@ export default {
 		},
 	},
 
+	emits: ['open-breakout-rooms-editor'],
+
 	data() {
 		return {
 			boundaryElement: document.querySelector('.main-view'),
-			showBreakoutRoomsEditor: false,
 		}
 	},
 
@@ -486,10 +475,6 @@ export default {
 				token: this.token,
 			})
 		},
-
-		openBreakoutRoomsEditor() {
-			this.showBreakoutRoomsEditor = true
-		},
 	},
 }
 </script>