diff --git a/src/components/BreakoutRoomsEditor/BreakoutRoomsParticipantsEditor.vue b/src/components/BreakoutRoomsEditor/BreakoutRoomsParticipantsEditor.vue
index 25e5153ebd7..2d58a94654b 100644
--- a/src/components/BreakoutRoomsEditor/BreakoutRoomsParticipantsEditor.vue
+++ b/src/components/BreakoutRoomsEditor/BreakoutRoomsParticipantsEditor.vue
@@ -29,7 +29,7 @@
 				:allow-collapse="true"
 				:open="true">
 				<template #icon>
-					<GoogleCircles :size="20" />
+					<DotsCircle :size="20" />
 				</template>
 				<SelectableParticipant v-for="participant in unassignedParticipants"
 					:key="participant.attendeeId"
@@ -44,7 +44,7 @@
 					:allow-collapse="true"
 					:open="true">
 					<template #icon>
-						<GoogleCircles :size="20" />
+						<DotsCircle :size="20" />
 					</template>
 					<SelectableParticipant v-for="attendeeId in item"
 						:key="attendeeId"
@@ -70,7 +70,6 @@
 				type="tertiary"
 				@click="goBack">
 				<template #icon>
-					<!-- TODO: choose final icon -->
 					<ArrowLeft :size="20" />
 				</template>
 				{{ t('spreed', 'Back') }}
@@ -88,8 +87,7 @@
 					:close-after-click="true"
 					@click="assignAttendees(index)">
 					<template #icon>
-						<!-- TODO: choose final icon -->
-						<GoogleCircles :size="20" />
+						<DotsCircle :size="20" />
 					</template>
 					{{ roomName(index) }}
 				</NcActionButton>
@@ -106,7 +104,7 @@
 <script>
 import ArrowLeft from 'vue-material-design-icons/ArrowLeft.vue'
 import Delete from 'vue-material-design-icons/Delete.vue'
-import GoogleCircles from 'vue-material-design-icons/GoogleCircles.vue'
+import DotsCircle from 'vue-material-design-icons/DotsCircle.vue'
 import Reload from 'vue-material-design-icons/Reload.vue'
 
 import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
@@ -124,7 +122,7 @@ export default {
 	components: {
 		NcActions,
 		NcActionButton,
-		GoogleCircles,
+		DotsCircle,
 		Reload,
 		NcAppNavigationItem,
 		SelectableParticipant,
diff --git a/src/components/RightSidebar/BreakoutRooms/BreakoutRoomItem.vue b/src/components/RightSidebar/BreakoutRooms/BreakoutRoomItem.vue
index 4b8f32750c5..ef7e9ffe9ea 100644
--- a/src/components/RightSidebar/BreakoutRooms/BreakoutRoomItem.vue
+++ b/src/components/RightSidebar/BreakoutRooms/BreakoutRoomItem.vue
@@ -21,59 +21,55 @@
 -->
 
 <template>
-	<NcAppNavigationItem :key="roomName"
-		:force-display-actions="true"
-		class="breakout-rooms__room"
-		:title="roomName"
-		:allow-collapse="true"
-		:inline-actions="1"
-		:open="true">
-		<template #icon>
-			<!-- TODO: choose final icon -->
-			<GoogleCircles :size="20" />
-		</template>
-		<template #actions>
-			<NcActionButton @click="joinRoom">
-				<template #icon>
-					<ArrowRight :size="16" />
-				</template>
-				{{ t('spreed', 'Join room') }}
-			</NcActionButton>
-			<NcActionButton v-if="showAssistanceButton"
-				@click="dismissRequestAssistance">
-				<template #icon>
-					<HandBackLeft :size="16" />
-				</template>
-				{{ t('spreed', 'Dismiss request for assistance') }}
-			</NcActionButton>
-			<NcActionButton @click="openSendMessageForm">
-				<template #icon>
-					<Send :size="16" />
-				</template>
-				{{ t('spreed', 'Send message to room') }}
-			</NcActionButton>
-		</template>
-		<!-- Send message dialog -->
-		<SendMessageDialog v-if="isDialogOpened"
-			:display-name="roomName"
-			:token="roomToken"
-			@close="closeSendMessageForm" />
+	<Fragment>
+		<li :key="roomName"
+			class="breakout-room-item">
+			<DotsCircle class="breakout-room-item__icon" :size="20" />
+			{{ roomName }}
+			<div class="breakout-room-item__actions">
+				<NcButton @click="joinRoom">
+					{{ t('spreed', 'Join') }}
+				</NcButton>
+				<NcActions :force-menu="true">
+					<NcActionButton v-if="showAssistanceButton"
+						@click="dismissRequestAssistance">
+						<template #icon>
+							<HandBackLeft :size="16" />
+						</template>
+						{{ t('spreed', 'Dismiss request for assistance') }}
+					</NcActionButton>
+					<NcActionButton @click="openSendMessageForm">
+						<template #icon>
+							<Send :size="16" />
+						</template>
+						{{ t('spreed', 'Send message to room') }}
+					</NcActionButton>
+				</NcActions>
+			</div>
+			<!-- Send message dialog -->
+			<SendMessageDialog v-if="isDialogOpened"
+				:display-name="roomName"
+				:token="roomToken"
+				@close="closeSendMessageForm" />
+		</li>
 		<template v-for="participant in roomParticipants">
 			<Participant :key="participant.actorId" :participant="participant" />
 		</template>
-	</NcAppNavigationItem>
+	</Fragment>
 </template>
 
 <script>
-import ArrowRight from 'vue-material-design-icons/ArrowRight.vue'
-import GoogleCircles from 'vue-material-design-icons/GoogleCircles.vue'
+import { Fragment } from 'vue-frag'
+
+import DotsCircle from 'vue-material-design-icons/DotsCircle.vue'
 import HandBackLeft from 'vue-material-design-icons/HandBackLeft.vue'
 import Send from 'vue-material-design-icons/Send.vue'
 
 import { showWarning } from '@nextcloud/dialogs'
 
 import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
-import NcAppNavigationItem from '@nextcloud/vue/dist/Components/NcAppNavigationItem.js'
+import NcActions from '@nextcloud/vue/dist/Components/NcActions.js'
+import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 
 import SendMessageDialog from '../../BreakoutRoomsEditor/SendMessageDialog.vue'
 import Participant from '../Participants/ParticipantsList/Participant/Participant.vue'
@@ -86,16 +82,17 @@ export default {
 
 	components: {
 		// Components
-		NcAppNavigationItem,
 		Participant,
 		NcActionButton,
 		SendMessageDialog,
+		NcButton,
+		NcActions,
+		Fragment,
 
 		// Icons
-		GoogleCircles,
+		DotsCircle,
 		HandBackLeft,
 		Send,
-		ArrowRight,
 	},
 
 	props: {
@@ -187,6 +184,22 @@ export default {
 }
 </script>
 
-<style scoped>
-
+<style lang="scss" scoped>
+.breakout-room-item {
+	font-weight: bold;
+	display: flex;
+	align-items: center;
+	margin-top: calc(var(--default-grid-baseline)*5);
+	gap: var(--default-grid-baseline);
+
+	&__icon {
+		margin: 0 18px 0 16px ;
+	}
+
+	&__actions {
+		margin-left: auto;
+		display: flex;
+		gap: var(--default-grid-baseline);
+	}
+}
 </style>
diff --git a/src/components/RightSidebar/BreakoutRooms/BreakoutRoomsActions.vue b/src/components/RightSidebar/BreakoutRooms/BreakoutRoomsActions.vue
index 0666164f418..751a764bac4 100644
--- a/src/components/RightSidebar/BreakoutRooms/BreakoutRoomsActions.vue
+++ b/src/components/RightSidebar/BreakoutRooms/BreakoutRoomsActions.vue
@@ -22,7 +22,7 @@
 				:wide="true"
 				@click="stopBreakoutRooms">
 				<template #icon>
-					<StopIcon :size="20" />
+					<Check :size="20" />
 				</template>
 				{{ stopLabel }}
 			</NcButton>
@@ -93,10 +93,10 @@
 
 <script>
 import ArrowLeft from 'vue-material-design-icons/ArrowLeft.vue'
+import Check from 'vue-material-design-icons/Check.vue'
 import Cog from 'vue-material-design-icons/Cog.vue'
 import Play from 'vue-material-design-icons/Play.vue'
 import Send from 'vue-material-design-icons/Send.vue'
-import StopIcon from 'vue-material-design-icons/Stop.vue'
 
 import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
 import NcActions from '@nextcloud/vue/dist/Components/NcActions.js'
@@ -125,7 +125,7 @@ export default {
 		// Icons
 		Play,
 		Cog,
-		StopIcon,
+		Check,
 		ArrowLeft,
 		Send,
 	},