diff --git a/config/webpack/webpack.common.js b/config/webpack/webpack.common.js
index 97ca87b631..c9105942e9 100644
--- a/config/webpack/webpack.common.js
+++ b/config/webpack/webpack.common.js
@@ -169,6 +169,7 @@ module.exports = {
 			"@ui-kebab-menu": getDir("src/modules/ui/kebab-menu"),
 			"@ui-layout": getDir("src/modules/ui/layout"),
 			"@ui-light-box": getDir("src/modules/ui/light-box"),
+			"@ui-line-clamp": getDir("src/modules/ui/line-clamp"),
 			"@ui-preview-image": getDir("src/modules/ui/preview-image"),
 			"@ui-room-details": getDir("src/modules/ui/room-details"),
 			"@ui-skip-link": getDir("src/modules/ui/skip-link"),
diff --git a/src/components/organisms/vCustomDialog.vue b/src/components/organisms/vCustomDialog.vue
index 8e503755e0..706dedebaa 100644
--- a/src/components/organisms/vCustomDialog.vue
+++ b/src/components/organisms/vCustomDialog.vue
@@ -6,7 +6,7 @@
 		@click:outside="closeDialog"
 		@keydown.esc="closeDialog"
 	>
-		<v-card :ripple="false">
+		<v-card :ripple="false" data-testid="dialog-content">
 			<v-card-title data-testid="dialog-title" class="dialog-title px-6 pt-4">
 				<slot name="title" />
 			</v-card-title>
diff --git a/src/modules/data/board/Board.store.ts b/src/modules/data/board/Board.store.ts
index e06a91adba..eeb3a9ed6f 100644
--- a/src/modules/data/board/Board.store.ts
+++ b/src/modules/data/board/Board.store.ts
@@ -324,7 +324,7 @@ export const useBoardStore = defineStore("boardStore", () => {
 	const deleteBoardSuccess = (payload: DeleteBoardSuccessPayload) => {
 		if (payload.isOwnAction === true) {
 			router.replace({
-				name: "rooms-id",
+				name: "room-details",
 				params: { id: roomId.value },
 			});
 			return;
diff --git a/src/modules/data/board/Board.store.unit.ts b/src/modules/data/board/Board.store.unit.ts
index d5a62b912f..2bdc64d6e2 100644
--- a/src/modules/data/board/Board.store.unit.ts
+++ b/src/modules/data/board/Board.store.unit.ts
@@ -1196,7 +1196,7 @@ describe("BoardStore", () => {
 				});
 
 				expect(router.replace).toHaveBeenCalledWith({
-					name: "rooms-id",
+					name: "room-details",
 					params: { id: "roomId" },
 				});
 			});
diff --git a/src/modules/data/room/RoomCreate.state.ts b/src/modules/data/room/RoomCreate.state.ts
index 12d6e390e8..8a1c607a13 100644
--- a/src/modules/data/room/RoomCreate.state.ts
+++ b/src/modules/data/room/RoomCreate.state.ts
@@ -1,5 +1,5 @@
-import { RoomApiFactory, RoomColor } from "@/serverApi/v3";
-import { RoomCreateParams, RoomItem } from "@/types/room/Room";
+import { RoomApiFactory } from "@/serverApi/v3";
+import { RoomCreateParams, RoomItem, RoomColorEnum } from "@/types/room/Room";
 import { $axios, mapAxiosErrorToResponseError } from "@/utils/api";
 import { ref } from "vue";
 
@@ -9,7 +9,7 @@ export const useRoomCreateState = () => {
 
 	const roomData = ref<RoomCreateParams>({
 		name: "",
-		color: RoomColor.BlueGrey,
+		color: RoomColorEnum.BlueGrey,
 		startDate: undefined,
 		endDate: undefined,
 	});
diff --git a/src/modules/data/room/RoomCreate.state.unit.ts b/src/modules/data/room/RoomCreate.state.unit.ts
index 8f17f278b3..f6613980d2 100644
--- a/src/modules/data/room/RoomCreate.state.unit.ts
+++ b/src/modules/data/room/RoomCreate.state.unit.ts
@@ -6,7 +6,7 @@ import { useApplicationError } from "@/composables/application-error.composable"
 import { initializeAxios, mapAxiosErrorToResponseError } from "@/utils/api";
 import setupStores from "@@/tests/test-utils/setupStores";
 import ApplicationErrorModule from "@/store/application-error";
-import { RoomCreateParams } from "@/types/room/Room";
+import { RoomCreateParams, RoomColorEnum } from "@/types/room/Room";
 import { ref } from "vue";
 import {
 	apiResponseErrorFactory,
@@ -73,7 +73,7 @@ describe("useRoomCreateState", () => {
 	describe("createRoom", () => {
 		const roomData = ref<RoomCreateParams>({
 			name: "Room 1",
-			color: serverApi.RoomColor.BlueGrey,
+			color: RoomColorEnum.BlueGrey,
 			startDate: undefined,
 			endDate: undefined,
 		});
diff --git a/src/modules/data/room/RoomDetails.store.ts b/src/modules/data/room/RoomDetails.store.ts
index 02a288c5a0..af82c1c601 100644
--- a/src/modules/data/room/RoomDetails.store.ts
+++ b/src/modules/data/room/RoomDetails.store.ts
@@ -1,7 +1,13 @@
 import { RoomBoardItem, RoomDetails } from "@/types/room/Room";
 import { ref } from "vue";
 import { defineStore } from "pinia";
-import { RoomApiFactory } from "@/serverApi/v3";
+import {
+	BoardApiFactory,
+	BoardLayout,
+	BoardParentType,
+	CreateBoardBodyParams,
+	RoomApiFactory,
+} from "@/serverApi/v3";
 import { $axios, mapAxiosErrorToResponseError } from "@/utils/api";
 import { createApplicationError } from "@/utils/create-application-error.factory";
 
@@ -17,6 +23,7 @@ export const useRoomDetailsStore = defineStore("roomDetailsStore", () => {
 	const roomBoards = ref<RoomBoardItem[]>([]);
 
 	const roomApi = RoomApiFactory(undefined, "/v3", $axios);
+	const boardApi = BoardApiFactory(undefined, "/v3", $axios);
 
 	const fetchRoom = async (id: string) => {
 		try {
@@ -38,6 +45,22 @@ export const useRoomDetailsStore = defineStore("roomDetailsStore", () => {
 		}
 	};
 
+	const createBoard = async (
+		roomId: string,
+		layout: BoardLayout,
+		title: string
+	) => {
+		const params: CreateBoardBodyParams = {
+			title: title,
+			parentId: roomId,
+			parentType: BoardParentType.Room,
+			layout,
+		};
+		const boardId = (await boardApi.boardControllerCreateBoard(params)).data.id;
+
+		return boardId;
+	};
+
 	const resetState = () => {
 		isLoading.value = true;
 		room.value = undefined;
@@ -51,6 +74,7 @@ export const useRoomDetailsStore = defineStore("roomDetailsStore", () => {
 	return {
 		deactivateRoom,
 		fetchRoom,
+		createBoard,
 		isLoading,
 		resetState,
 		room,
diff --git a/src/modules/data/room/RoomDetails.store.unit.ts b/src/modules/data/room/RoomDetails.store.unit.ts
index ae0bca7fa4..b14e8b6d23 100644
--- a/src/modules/data/room/RoomDetails.store.unit.ts
+++ b/src/modules/data/room/RoomDetails.store.unit.ts
@@ -8,6 +8,7 @@ import { initializeAxios, mapAxiosErrorToResponseError } from "@/utils/api";
 import {
 	apiResponseErrorFactory,
 	axiosErrorFactory,
+	mockApiResponse,
 } from "@@/tests/test-utils";
 
 jest.mock("@/utils/api");
@@ -35,12 +36,14 @@ const setupErrorResponse = (message = "NOT_FOUND", code = 404) => {
 
 describe("useRoomDetailsStore", () => {
 	let roomApiMock: DeepMocked<serverApi.RoomApiInterface>;
+	let boardApiMock: DeepMocked<serverApi.BoardApiInterface>;
 	let axiosMock: DeepMocked<AxiosInstance>;
 	let mockedCreateApplicationErrorCalls: ReturnType<typeof useApplicationError>;
 
 	beforeEach(() => {
 		setActivePinia(createPinia());
 		roomApiMock = createMock<serverApi.RoomApiInterface>();
+		boardApiMock = createMock<serverApi.BoardApiInterface>();
 		axiosMock = createMock<AxiosInstance>();
 		mockedCreateApplicationErrorCalls =
 			createMock<ReturnType<typeof useApplicationError>>();
@@ -49,6 +52,7 @@ describe("useRoomDetailsStore", () => {
 		);
 
 		jest.spyOn(serverApi, "RoomApiFactory").mockReturnValue(roomApiMock);
+		jest.spyOn(serverApi, "BoardApiFactory").mockReturnValue(boardApiMock);
 		initializeAxios(axiosMock);
 	});
 
@@ -135,4 +139,30 @@ describe("useRoomDetailsStore", () => {
 			expect(store.room).toBeUndefined();
 		});
 	});
+
+	describe("createBoard", () => {
+		it("should call createBoard api", async () => {
+			const { store } = setup();
+			const boardId = "board-id";
+			const roomId = "room-id";
+			const layout = serverApi.BoardLayout.Columns;
+			const title = "title";
+
+			boardApiMock.boardControllerCreateBoard.mockResolvedValue(
+				mockApiResponse({
+					data: { id: boardId },
+				})
+			);
+
+			const result = await store.createBoard(roomId, layout, title);
+
+			expect(result).toBe(boardId);
+			expect(boardApiMock.boardControllerCreateBoard).toHaveBeenCalledWith({
+				title,
+				parentId: roomId,
+				parentType: serverApi.BoardParentType.Room,
+				layout,
+			});
+		});
+	});
 });
diff --git a/src/modules/data/room/RoomEdit.state.ts b/src/modules/data/room/RoomEdit.state.ts
index 6ba2853c07..5dcac87131 100644
--- a/src/modules/data/room/RoomEdit.state.ts
+++ b/src/modules/data/room/RoomEdit.state.ts
@@ -1,5 +1,9 @@
-import { RoomApiFactory, RoomColor } from "@/serverApi/v3";
-import { RoomDetails, RoomUpdateParams } from "@/types/room/Room";
+import { RoomApiFactory } from "@/serverApi/v3";
+import {
+	RoomDetails,
+	RoomUpdateParams,
+	RoomColorEnum,
+} from "@/types/room/Room";
 import { $axios, mapAxiosErrorToResponseError } from "@/utils/api";
 import { createApplicationError } from "@/utils/create-application-error.factory";
 import { ref } from "vue";
@@ -19,7 +23,7 @@ export const useRoomEditState = () => {
 
 	const roomData = ref<RoomUpdateParams>({
 		name: "",
-		color: RoomColor.BlueGrey,
+		color: RoomColorEnum.BlueGrey,
 		startDate: undefined,
 		endDate: undefined,
 	});
diff --git a/src/modules/data/room/RoomEdit.state.unit.ts b/src/modules/data/room/RoomEdit.state.unit.ts
index 52bf187f5b..fc1cc125b4 100644
--- a/src/modules/data/room/RoomEdit.state.unit.ts
+++ b/src/modules/data/room/RoomEdit.state.unit.ts
@@ -10,6 +10,7 @@ import {
 	apiResponseErrorFactory,
 	axiosErrorFactory,
 } from "@@/tests/test-utils";
+import { RoomColorEnum } from "@/types/room/Room";
 
 jest.mock("@/utils/api");
 const mockedMapAxiosErrorToResponseError = jest.mocked(
@@ -105,7 +106,7 @@ describe("useRoomEditState", () => {
 			expect(isLoading.value).toBe(true);
 			const params = {
 				name: "room-name",
-				color: serverApi.RoomColor.BlueGrey,
+				color: RoomColorEnum.BlueGrey,
 			};
 
 			await updateRoom("room-id", params);
@@ -123,7 +124,7 @@ describe("useRoomEditState", () => {
 		const { updateRoom, isLoading } = setup();
 		const params = {
 			name: "room-name",
-			color: serverApi.RoomColor.BlueGrey,
+			color: RoomColorEnum.BlueGrey,
 		};
 		roomApiMock.roomControllerUpdateRoom.mockRejectedValue({ code: 404 });
 
diff --git a/src/modules/data/room/Rooms.state.unit.ts b/src/modules/data/room/Rooms.state.unit.ts
index b5ad2d8f0f..09440ba79b 100644
--- a/src/modules/data/room/Rooms.state.unit.ts
+++ b/src/modules/data/room/Rooms.state.unit.ts
@@ -10,6 +10,7 @@ import {
 	apiResponseErrorFactory,
 	axiosErrorFactory,
 } from "@@/tests/test-utils";
+import { RoomColorEnum } from "@/types/room/Room";
 
 jest.mock("@/utils/api");
 const mockedMapAxiosErrorToResponseError = jest.mocked(
@@ -125,7 +126,7 @@ describe("useRoomsState", () => {
 				{
 					id: "1",
 					name: "Room 1",
-					color: serverApi.RoomColor.BlueGrey,
+					color: RoomColorEnum.BlueGrey,
 					schoolId: "6749dd4e657d98af622e370c",
 					createdAt: "2024.11.18",
 					updatedAt: "2024.11.18",
diff --git a/src/modules/feature/board/board/Board.unit.ts b/src/modules/feature/board/board/Board.unit.ts
index b7339b7fef..03d68e7045 100644
--- a/src/modules/feature/board/board/Board.unit.ts
+++ b/src/modules/feature/board/board/Board.unit.ts
@@ -882,7 +882,7 @@ describe("Board", () => {
 
 							expect(wrapperVM.isBoardVisible).toBe(false);
 							expect(router.replace).toHaveBeenCalledWith({
-								name: "rooms-id",
+								name: "room-details",
 								params: { id: mockRoomId },
 							});
 							expect(
diff --git a/src/modules/feature/board/board/Board.vue b/src/modules/feature/board/board/Board.vue
index 4b7bac62ad..05d59f0475 100644
--- a/src/modules/feature/board/board/Board.vue
+++ b/src/modules/feature/board/board/Board.vue
@@ -322,7 +322,7 @@ watch(
 		setAlert();
 
 		if (!(isBoardVisible.value || isTeacher)) {
-			router.replace({ name: "rooms-id", params: { id: roomId.value } });
+			router.replace({ name: "room-details", params: { id: roomId.value } });
 			applicationErrorModule.setError(
 				createApplicationError(
 					HttpStatusCode.Forbidden,
diff --git a/src/modules/feature/room/BoardGrid.vue b/src/modules/feature/room/BoardGrid.vue
index 0439c5bdc0..25f86243e3 100644
--- a/src/modules/feature/room/BoardGrid.vue
+++ b/src/modules/feature/room/BoardGrid.vue
@@ -4,6 +4,7 @@
 			v-for="(board, index) in boards"
 			:key="board.id"
 			cols="12"
+			sm="6"
 			md="4"
 			xl="3"
 		>
diff --git a/src/modules/feature/room/BoardTile.unit.ts b/src/modules/feature/room/BoardTile.unit.ts
index 6229d21a97..3ae2b7eaef 100644
--- a/src/modules/feature/room/BoardTile.unit.ts
+++ b/src/modules/feature/room/BoardTile.unit.ts
@@ -42,7 +42,7 @@ describe("@feature-room/BoardTile", () => {
 		it("should display tile in draft style", () => {
 			const { wrapper } = setup({ board: mockBoard, index: 0 });
 
-			expect(wrapper.classes()).toContain("board-is-draft");
+			expect(wrapper.classes()).toContain("opacity-70");
 		});
 	});
 });
diff --git a/src/modules/feature/room/BoardTile.vue b/src/modules/feature/room/BoardTile.vue
index 2f643bd0f4..7e8659437c 100644
--- a/src/modules/feature/room/BoardTile.vue
+++ b/src/modules/feature/room/BoardTile.vue
@@ -1,23 +1,26 @@
 <template>
 	<VCard
-		class="board-tile"
-		:class="{ 'board-is-draft': isDraft }"
-		hover
-		:data-testid="`board-tile-${props.index}`"
+		:class="isDraft ? 'opacity-70' : 'bg-surface-light'"
+		:variant="isDraft ? 'outlined' : 'flat'"
+		draggable="false"
+		:data-testid="`board-tile-${index}`"
 		:to="boardPath"
 	>
 		<VCardSubtitle
-			class="board-tile-subtitle mt-4"
-			:data-testid="`board-tile-subtitle-${props.index}`"
+			class="mt-4 d-flex align-center"
+			:class="{ 'opacity-100': isDraft }"
+			:data-testid="`board-tile-subtitle-${index}`"
 		>
 			<VIcon size="14" class="mr-1" :icon="subtitleIcon" />
 			{{ subtitleText }}
 		</VCardSubtitle>
 		<VCardTitle
-			class="board-tile-title text-h6 my-2"
-			:data-testid="`board-tile-title-${props.index}`"
+			class="board-tile-title text-body-1 font-weight-bold my-2"
+			:data-testid="`board-tile-title-${index}`"
 		>
-			{{ board.title }}
+			<LineClamp>
+				{{ board.title }}
+			</LineClamp>
 		</VCardTitle>
 	</VCard>
 </template>
@@ -28,6 +31,7 @@ import { RoomBoardItem } from "@/types/room/Room";
 import { mdiViewAgendaOutline, mdiViewDashboardOutline } from "@icons/material";
 import { computed, PropType, toRef } from "vue";
 import { useI18n } from "vue-i18n";
+import { LineClamp } from "@ui-line-clamp";
 
 const props = defineProps({
 	board: { type: Object as PropType<RoomBoardItem>, required: true },
@@ -35,7 +39,6 @@ const props = defineProps({
 });
 
 const { t } = useI18n();
-
 const board = toRef(props, "board");
 
 const isListBoard = computed(() => {
@@ -50,6 +53,7 @@ const subtitleIcon = computed(() => {
 	const icon = isListBoard.value
 		? mdiViewAgendaOutline
 		: mdiViewDashboardOutline;
+
 	return icon;
 });
 
@@ -62,6 +66,7 @@ const subtitleText = computed(() => {
 		const suffix = ` - ${t("common.words.draft")}`;
 		return text + suffix;
 	}
+
 	return text;
 });
 
@@ -69,17 +74,3 @@ const boardPath = computed(() => {
 	return `/boards/${board.value.id}`;
 });
 </script>
-
-<style lang="scss" scoped>
-@import "@/styles/settings.scss";
-
-.board-tile {
-	background-color: map-get($grey, lighten-5);
-	border: 1px solid map-get($grey, lighten-2);
-
-	&.board-is-draft .board-tile-subtitle,
-	&.board-is-draft .board-tile-title {
-		opacity: 0.5;
-	}
-}
-</style>
diff --git a/src/modules/feature/room/RoomColorPicker/RoomColorPicker.unit.ts b/src/modules/feature/room/RoomColorPicker/RoomColorPicker.unit.ts
index 68459cdc87..9bc9964f9b 100644
--- a/src/modules/feature/room/RoomColorPicker/RoomColorPicker.unit.ts
+++ b/src/modules/feature/room/RoomColorPicker/RoomColorPicker.unit.ts
@@ -5,7 +5,7 @@ import {
 import { mount } from "@vue/test-utils";
 import { ComponentProps } from "vue-component-type-helpers";
 import RoomColorPicker from "./RoomColorPicker.vue";
-import { RoomColor } from "@/serverApi/v3";
+import { RoomColorEnum } from "@/types/room/Room";
 
 describe("@feature-room/RoomColorPicker", () => {
 	const setup = (props?: ComponentProps<typeof RoomColorPicker>) => {
@@ -42,7 +42,7 @@ describe("@feature-room/RoomColorPicker", () => {
 
 	describe("when a color is given", () => {
 		it("should render given color as selected", () => {
-			const { wrapper } = setup({ color: RoomColor.Red });
+			const { wrapper } = setup({ color: RoomColorEnum.Red });
 
 			const selectedColor = wrapper.findComponent(
 				"[data-testid=color-swatch-red]"
diff --git a/src/modules/feature/room/RoomColorPicker/RoomColorPicker.vue b/src/modules/feature/room/RoomColorPicker/RoomColorPicker.vue
index bd8f65954e..b338f94c02 100644
--- a/src/modules/feature/room/RoomColorPicker/RoomColorPicker.vue
+++ b/src/modules/feature/room/RoomColorPicker/RoomColorPicker.vue
@@ -5,7 +5,7 @@
 		role="radiogroup"
 		aria-labelledby="room-color-label"
 	>
-		<template v-for="swatchColor in RoomColor" :key="swatchColor">
+		<template v-for="swatchColor in RoomColorEnum" :key="swatchColor">
 			<RoomColorPickerSwatch
 				:color="swatchColor"
 				:is-selected="isSelected(swatchColor)"
@@ -19,12 +19,12 @@
 import { useVModel } from "@vueuse/core";
 import { PropType } from "vue";
 import RoomColorPickerSwatch from "./RoomColorPickerSwatch.vue";
-import { RoomColor } from "@/serverApi/v3";
+import { RoomColorEnum } from "@/types/room/Room";
 
 const props = defineProps({
 	color: {
-		type: String as PropType<RoomColor>,
-		default: RoomColor.BlueGrey,
+		type: String as PropType<RoomColorEnum>,
+		default: RoomColorEnum.BlueGrey,
 	},
 	label: {
 		type: String,
@@ -36,11 +36,11 @@ const emit = defineEmits(["update:color"]);
 
 const currentColor = useVModel(props, "color", emit);
 
-const isSelected = (color: RoomColor) => {
+const isSelected = (color: RoomColorEnum) => {
 	return color === currentColor.value;
 };
 
-const onUpdateColor = (color: RoomColor) => {
+const onUpdateColor = (color: RoomColorEnum) => {
 	emit("update:color", color);
 };
 </script>
diff --git a/src/modules/feature/room/RoomColorPicker/RoomColorPickerSwatch.unit.ts b/src/modules/feature/room/RoomColorPicker/RoomColorPickerSwatch.unit.ts
index e8628e22a1..6bef47a803 100644
--- a/src/modules/feature/room/RoomColorPicker/RoomColorPickerSwatch.unit.ts
+++ b/src/modules/feature/room/RoomColorPicker/RoomColorPickerSwatch.unit.ts
@@ -5,7 +5,7 @@ import {
 import { mount } from "@vue/test-utils";
 import { ComponentProps } from "vue-component-type-helpers";
 import RoomColorPickerSwatch from "./RoomColorPickerSwatch.vue";
-import { RoomColor } from "@/serverApi/v3";
+import { RoomColorEnum } from "@/types/room/Room";
 
 describe("@feature-room/RoomColorPicker/RoomColorPickerSwatch", () => {
 	const setup = (props?: ComponentProps<typeof RoomColorPickerSwatch>) => {
@@ -37,7 +37,7 @@ describe("@feature-room/RoomColorPicker/RoomColorPickerSwatch", () => {
 
 	describe("when color is set", () => {
 		it("should render with given color", () => {
-			const { wrapper } = setup({ color: RoomColor.Red, isSelected: true });
+			const { wrapper } = setup({ color: RoomColorEnum.Red, isSelected: true });
 
 			const selectedColor = wrapper.findComponent(
 				"[data-testid=color-swatch-red]"
@@ -47,7 +47,7 @@ describe("@feature-room/RoomColorPicker/RoomColorPickerSwatch", () => {
 		});
 
 		it("should render selected icon", () => {
-			const { wrapper } = setup({ color: RoomColor.Red, isSelected: true });
+			const { wrapper } = setup({ color: RoomColorEnum.Red, isSelected: true });
 
 			const selectedColor = wrapper.findComponent(
 				"[data-testid=color-swatch-red]"
diff --git a/src/modules/feature/room/RoomColorPicker/RoomColorPickerSwatch.vue b/src/modules/feature/room/RoomColorPicker/RoomColorPickerSwatch.vue
index 0a8040fc82..bc6d72cbd0 100644
--- a/src/modules/feature/room/RoomColorPicker/RoomColorPickerSwatch.vue
+++ b/src/modules/feature/room/RoomColorPicker/RoomColorPickerSwatch.vue
@@ -16,12 +16,12 @@
 import { computed, PropType } from "vue";
 import { mdiCheckCircleOutline } from "@icons/material";
 import { useI18n } from "vue-i18n";
-import { RoomColor } from "@/serverApi/v3";
+import { RoomColorEnum } from "@/types/room/Room";
 
 const props = defineProps({
 	color: {
-		type: String as PropType<RoomColor>,
-		default: RoomColor.BlueGrey,
+		type: String as PropType<RoomColorEnum>,
+		default: RoomColorEnum.BlueGrey,
 	},
 	isSelected: {
 		type: Boolean,
diff --git a/src/modules/feature/room/RoomDetails.unit.ts b/src/modules/feature/room/RoomDetails.unit.ts
deleted file mode 100644
index 397dc62f95..0000000000
--- a/src/modules/feature/room/RoomDetails.unit.ts
+++ /dev/null
@@ -1,41 +0,0 @@
-import {
-	createTestingVuetify,
-	createTestingI18n,
-} from "@@/tests/test-utils/setup";
-import { mount } from "@vue/test-utils";
-import { ComponentProps } from "vue-component-type-helpers";
-import RoomDetails from "./RoomDetails.vue";
-import { RoomDetails as RoomDetailsType } from "@/types/room/Room";
-import { RoomColor } from "@/serverApi/v3";
-
-const mockRoom: RoomDetailsType = {
-	id: "59cce2c61113d1132c98dc06",
-	name: "A11Y for Beginners",
-	color: RoomColor.Magenta,
-	schoolId: "123",
-	startDate: "",
-	endDate: "",
-	permissions: [],
-	createdAt: "2017-09-28T11:49:39.924Z",
-	updatedAt: "2017-09-28T11:49:39.924Z",
-};
-
-describe("@feature-room/RoomDetails", () => {
-	const setup = (props: ComponentProps<typeof RoomDetails>) => {
-		const wrapper = mount(RoomDetails, {
-			global: {
-				plugins: [createTestingVuetify(), createTestingI18n()],
-			},
-			props,
-		});
-
-		return { wrapper };
-	};
-
-	it("should render BoardGrid", async () => {
-		const { wrapper } = setup({ room: mockRoom });
-
-		const boardGrid = wrapper.findComponent({ name: "BoardGrid" });
-		expect(boardGrid.exists()).toStrictEqual(true);
-	});
-});
diff --git a/src/modules/feature/room/RoomDetails.vue b/src/modules/feature/room/RoomDetails.vue
deleted file mode 100644
index 943590ae5e..0000000000
--- a/src/modules/feature/room/RoomDetails.vue
+++ /dev/null
@@ -1,18 +0,0 @@
-<template>
-	<div class="room-details">
-		<BoardGrid :boards="roomBoards" />
-	</div>
-</template>
-
-<script setup lang="ts">
-import { RoomBoardItem, RoomDetails } from "@/types/room/Room";
-import { PropType, toRef } from "vue";
-import BoardGrid from "./BoardGrid.vue";
-
-const props = defineProps({
-	room: { type: Object as PropType<RoomDetails>, required: true },
-	roomBoards: { type: Array as PropType<RoomBoardItem[]> },
-});
-
-const roomBoards = toRef(props, "roomBoards");
-</script>
diff --git a/src/modules/feature/room/RoomForm.unit.ts b/src/modules/feature/room/RoomForm.unit.ts
index 7130e978af..1b680e6c84 100644
--- a/src/modules/feature/room/RoomForm.unit.ts
+++ b/src/modules/feature/room/RoomForm.unit.ts
@@ -5,19 +5,18 @@ import {
 import { flushPromises, mount } from "@vue/test-utils";
 import { ComponentProps } from "vue-component-type-helpers";
 import RoomForm from "./RoomForm.vue";
-import { RoomCreateParams } from "@/types/room/Room";
-import { RoomColor } from "@/serverApi/v3";
+import { RoomColorEnum, RoomCreateParams } from "@/types/room/Room";
 
 const mockRoom: RoomCreateParams = {
 	name: "A11Y for Beginners",
-	color: RoomColor.Magenta,
+	color: RoomColorEnum.Magenta,
 	startDate: "",
 	endDate: "",
 };
 
 const emptyMockRoom: RoomCreateParams = {
 	name: "",
-	color: RoomColor.Magenta,
+	color: RoomColorEnum.Magenta,
 	startDate: undefined,
 	endDate: undefined,
 };
diff --git a/src/modules/feature/room/RoomMenu.unit.ts b/src/modules/feature/room/RoomMenu.unit.ts
new file mode 100644
index 0000000000..6d00358806
--- /dev/null
+++ b/src/modules/feature/room/RoomMenu.unit.ts
@@ -0,0 +1,167 @@
+import {
+	createTestingVuetify,
+	createTestingI18n,
+} from "@@/tests/test-utils/setup";
+import { mount } from "@vue/test-utils";
+import RoomMenu from "./RoomMenu.vue";
+import { RouterLink } from "vue-router";
+import { ref } from "vue";
+import { useRoomAuthorization } from "./roomAuthorization.composable";
+import { createTestingPinia } from "@pinia/testing";
+
+jest.mock("@feature-room/roomAuthorization.composable");
+const roomPermissions: ReturnType<typeof useRoomAuthorization> = {
+	canCreateRoom: ref(false),
+	canViewRoom: ref(false),
+	canEditRoom: ref(false),
+	canDeleteRoom: ref(false),
+};
+(useRoomAuthorization as jest.Mock).mockReturnValue(roomPermissions);
+
+describe("@feature-room/RoomMenu", () => {
+	const setup = () => {
+		const wrapper = mount(RoomMenu, {
+			global: {
+				plugins: [
+					createTestingVuetify(),
+					createTestingI18n(),
+					createTestingPinia(),
+				],
+				stubs: {
+					RouterLink,
+				},
+			},
+		});
+
+		const menuBtn = wrapper.findComponent("[data-testid=room-menu]");
+
+		return { wrapper, menuBtn };
+	};
+
+	describe("when user has no edit and delete permissions", () => {
+		it("should contain no menu items", async () => {
+			roomPermissions.canEditRoom.value = false;
+			roomPermissions.canDeleteRoom.value = false;
+
+			const { wrapper, menuBtn } = setup();
+			await menuBtn.trigger("click");
+
+			const menuItems = wrapper.findAllComponents({ name: "VListItem" });
+
+			expect(menuItems.length).toEqual(0);
+		});
+	});
+
+	describe("when user only has edit permission", () => {
+		it("should contain edit and manage members menu items", async () => {
+			roomPermissions.canEditRoom.value = true;
+			roomPermissions.canDeleteRoom.value = false;
+
+			const { wrapper, menuBtn } = setup();
+			await menuBtn.trigger("click");
+
+			const menuItems = wrapper.findAllComponents({ name: "VListItem" });
+			expect(menuItems.length).toEqual(2);
+
+			const editMenuItem = wrapper.findComponent(
+				"[data-testid=room-action-edit]"
+			);
+			const manageMembersMenuItem = wrapper.findComponent(
+				"[data-testid=room-action-manage-members]"
+			);
+			const deleteMenuItem = wrapper.findComponent(
+				"[data-testid=room-action-delete]"
+			);
+
+			expect(editMenuItem.exists()).toBe(true);
+			expect(manageMembersMenuItem.exists()).toBe(true);
+			expect(deleteMenuItem.exists()).toBe(false);
+		});
+	});
+
+	describe("when user only has delete permission", () => {
+		it("should only contain delete menu item", async () => {
+			roomPermissions.canEditRoom.value = false;
+			roomPermissions.canDeleteRoom.value = true;
+			const { wrapper, menuBtn } = setup();
+			await menuBtn.trigger("click");
+
+			const menuItems = wrapper.findAllComponents({ name: "VListItem" });
+			expect(menuItems.length).toEqual(1);
+
+			const editMenuItem = wrapper.findComponent(
+				"[data-testid=room-action-edit]"
+			);
+			const manageMembersMenuItem = wrapper.findComponent(
+				"[data-testid=room-action-manage-members]"
+			);
+			const deleteMenuItem = wrapper.findComponent(
+				"[data-testid=room-action-delete]"
+			);
+
+			expect(editMenuItem.exists()).toBe(false);
+			expect(manageMembersMenuItem.exists()).toBe(false);
+			expect(deleteMenuItem.exists()).toBe(true);
+		});
+	});
+
+	describe("when user has both edit and delete permissions", () => {
+		it("should show all menu items", async () => {
+			roomPermissions.canEditRoom.value = true;
+			roomPermissions.canDeleteRoom.value = true;
+			const { wrapper, menuBtn } = setup();
+			await menuBtn.trigger("click");
+
+			const menuItems = wrapper.findAllComponents({ name: "VListItem" });
+
+			expect(menuItems.length).toEqual(3);
+		});
+	});
+
+	describe("when clicking on menu button", () => {
+		roomPermissions.canEditRoom.value = true;
+		roomPermissions.canDeleteRoom.value = true;
+
+		describe("and clicking on edit button", () => {
+			it("should emit 'room:edit' event", async () => {
+				const { wrapper, menuBtn } = setup();
+				await menuBtn.trigger("click");
+
+				const editButton = wrapper.getComponent(
+					"[data-testid=room-action-edit]"
+				);
+				await editButton.trigger("click");
+
+				expect(wrapper.emitted("room:edit")).toHaveLength(1);
+			});
+		});
+
+		describe("and clicking on manage members button", () => {
+			it("should emit 'room:manage-members' event", async () => {
+				const { wrapper, menuBtn } = setup();
+				await menuBtn.trigger("click");
+
+				const editButton = wrapper.getComponent(
+					"[data-testid=room-action-manage-members]"
+				);
+				await editButton.trigger("click");
+
+				expect(wrapper.emitted("room:manage-members")).toHaveLength(1);
+			});
+		});
+
+		describe("and clicking on delete button", () => {
+			it("should emit 'room:delete' event", async () => {
+				const { wrapper, menuBtn } = setup();
+				await menuBtn.trigger("click");
+
+				const editButton = wrapper.getComponent(
+					"[data-testid=room-action-delete]"
+				);
+				await editButton.trigger("click");
+
+				expect(wrapper.emitted("room:delete")).toHaveLength(1);
+			});
+		});
+	});
+});
diff --git a/src/modules/feature/room/RoomMenu.vue b/src/modules/feature/room/RoomMenu.vue
new file mode 100644
index 0000000000..3844d7e351
--- /dev/null
+++ b/src/modules/feature/room/RoomMenu.vue
@@ -0,0 +1,67 @@
+<template>
+	<KebabMenu
+		class="mx-2"
+		:aria-label="$t('pages.roomDetails.ariaLabels.menu')"
+		data-testid="room-menu"
+	>
+		<VListItem
+			v-if="canEditRoom"
+			role="menuitem"
+			data-testid="room-action-edit"
+			:aria-label="$t('pages.roomDetails.ariaLabels.menu.action.edit')"
+			@click="() => $emit('room:edit')"
+		>
+			<template #prepend>
+				<VIcon :icon="mdiPencilOutline" />
+			</template>
+			<VListItemTitle>
+				{{ $t("common.actions.edit") }}
+			</VListItemTitle>
+		</VListItem>
+		<VListItem
+			v-if="canEditRoom"
+			role="menuitem"
+			data-testid="room-action-manage-members"
+			:aria-label="$t('pages.rooms.members.manage')"
+			@click="() => $emit('room:manage-members')"
+		>
+			<template #prepend>
+				<VIcon :icon="mdiAccountGroupOutline" />
+			</template>
+			<VListItemTitle>
+				{{ $t("pages.rooms.members.manage") }}
+			</VListItemTitle>
+		</VListItem>
+		<VListItem
+			v-if="canDeleteRoom"
+			role="menuitem"
+			data-testid="room-action-delete"
+			:aria-label="$t('pages.roomDetails.ariaLabels.menu.action.delete')"
+			@click="() => $emit('room:delete')"
+		>
+			<template #prepend>
+				<VIcon :icon="mdiTrashCanOutline" />
+			</template>
+			<VListItemTitle>
+				{{ $t("common.actions.delete") }}
+			</VListItemTitle>
+		</VListItem>
+	</KebabMenu>
+</template>
+
+<script setup lang="ts">
+import { KebabMenu } from "@ui-kebab-menu";
+import {
+	mdiPencilOutline,
+	mdiTrashCanOutline,
+	mdiAccountGroupOutline,
+} from "@icons/material";
+import { useRoomAuthorization } from "@feature-room";
+import { useRoomDetailsStore } from "@data-room";
+import { storeToRefs } from "pinia";
+
+defineEmits(["room:edit", "room:manage-members", "room:delete"]);
+const { room } = storeToRefs(useRoomDetailsStore());
+
+const { canEditRoom, canDeleteRoom } = useRoomAuthorization(room);
+</script>
diff --git a/src/modules/feature/room/RoomTile.unit.ts b/src/modules/feature/room/RoomTile.unit.ts
index 5089d73021..1988d052b3 100644
--- a/src/modules/feature/room/RoomTile.unit.ts
+++ b/src/modules/feature/room/RoomTile.unit.ts
@@ -5,13 +5,12 @@ import {
 import { mount } from "@vue/test-utils";
 import { ComponentProps } from "vue-component-type-helpers";
 import RoomTile from "./RoomTile.vue";
-import { RoomItem } from "@/types/room/Room";
-import { RoomColor } from "@/serverApi/v3";
+import { RoomItem, RoomColorEnum } from "@/types/room/Room";
 
 const mockRoom: RoomItem = {
 	id: "123",
 	name: "A11Y for Beginners",
-	color: RoomColor.Magenta,
+	color: RoomColorEnum.Magenta,
 	schoolId: "123",
 	createdAt: "2024-10-11T16:36:06.434Z",
 	updatedAt: "2024-10-11T16:36:06.434Z",
diff --git a/src/modules/feature/room/RoomTile.vue b/src/modules/feature/room/RoomTile.vue
index 0a406b2f22..b0985a59eb 100644
--- a/src/modules/feature/room/RoomTile.vue
+++ b/src/modules/feature/room/RoomTile.vue
@@ -17,9 +17,9 @@
 </template>
 
 <script setup lang="ts">
-import { RoomItem } from "@/types/room/Room";
 import { computed, PropType } from "vue";
 import { useI18n } from "vue-i18n";
+import { RoomItem } from "@/types/room/Room";
 
 const props = defineProps({
 	room: {
@@ -29,7 +29,6 @@ const props = defineProps({
 });
 
 const { t } = useI18n();
-
 const roomPath = computed(() => `/rooms/${props.room.id}`);
 
 const roomShortName = computed(() => {
diff --git a/src/modules/feature/room/index.ts b/src/modules/feature/room/index.ts
index 49882e414e..4d825f2c12 100644
--- a/src/modules/feature/room/index.ts
+++ b/src/modules/feature/room/index.ts
@@ -1,14 +1,16 @@
 import RoomGrid from "./RoomGrid.vue";
-import RoomDetails from "./RoomDetails.vue";
 import RoomForm from "./RoomForm.vue";
+import RoomMenu from "./RoomMenu.vue";
+import BoardGrid from "./BoardGrid.vue";
 import MembersTable from "./RoomMembers/MembersTable.vue";
 import AddMembers from "./RoomMembers/AddMembers.vue";
 import { useRoomAuthorization } from "./roomAuthorization.composable";
 
 export {
 	RoomGrid,
-	RoomDetails,
 	RoomForm,
+	RoomMenu,
+	BoardGrid,
 	MembersTable,
 	AddMembers,
 	useRoomAuthorization,
diff --git a/src/modules/feature/room/roomAuthorization.composable.ts b/src/modules/feature/room/roomAuthorization.composable.ts
index 1f9f05c2e0..64a3351c06 100644
--- a/src/modules/feature/room/roomAuthorization.composable.ts
+++ b/src/modules/feature/room/roomAuthorization.composable.ts
@@ -22,8 +22,9 @@ export const useRoomAuthorization = (
 		const permissions = toValue(room)?.permissions ?? [];
 
 		canCreateRoom.value =
-			permissions.includes(Permission.RoomEdit) &&
-			authModule.getUserRoles.includes(Roles.Teacher);
+			authModule.getUserPermissions.includes(
+				Permission.RoomCreate.toLowerCase()
+			) && authModule.getUserRoles.includes(Roles.Teacher);
 		canViewRoom.value = permissions.includes(Permission.RoomView);
 		canEditRoom.value = permissions.includes(Permission.RoomEdit);
 		canDeleteRoom.value = permissions.includes(Permission.RoomDelete);
diff --git a/src/modules/feature/room/roomAuthorization.composable.unit.ts b/src/modules/feature/room/roomAuthorization.composable.unit.ts
index f44b68c550..19e370cc52 100644
--- a/src/modules/feature/room/roomAuthorization.composable.unit.ts
+++ b/src/modules/feature/room/roomAuthorization.composable.unit.ts
@@ -6,23 +6,29 @@ import AuthModule from "@/store/auth";
 import { RoomDetails } from "@/types/room/Room";
 import { AUTH_MODULE_KEY } from "@/utils/inject";
 import { mountComposable } from "@@/tests/test-utils";
-import { roomDetailsFactory } from "@@/tests/test-utils/factory/roomDetailsFactory";
+import { roomFactory } from "@@/tests/test-utils/factory/room";
 import { createModuleMocks } from "@@/tests/test-utils/mock-store-module";
 import { ref } from "vue";
 import { useRoomAuthorization } from "./roomAuthorization.composable";
 
-type setupParams = { userRoles?: Roles[]; roomPermissions?: Permission[] };
+type setupParams = {
+	userRoles?: Roles[];
+	userPermissions?: Permission[];
+	roomPermissions?: Permission[];
+};
 
 describe("roomAuthorization", () => {
 	const genericSetup = ({
 		userRoles = [],
+		userPermissions = [],
 		roomPermissions = [],
 	}: setupParams) => {
 		const room = ref<RoomDetails>(
-			roomDetailsFactory.build({ permissions: roomPermissions })
+			roomFactory.build({ permissions: roomPermissions })
 		);
 		const authModuleMock = createModuleMocks(AuthModule, {
 			getUserRoles: userRoles,
+			getUserPermissions: userPermissions,
 		});
 		return mountComposable(() => useRoomAuthorization(room), {
 			global: { provide: { [AUTH_MODULE_KEY]: authModuleMock } },
@@ -34,7 +40,9 @@ describe("roomAuthorization", () => {
 			const setup = () => {
 				return genericSetup({
 					userRoles: [Roles.Teacher],
-					roomPermissions: [Permission.RoomEdit],
+					userPermissions: [
+						Permission.RoomCreate.toLocaleLowerCase() as Permission,
+					],
 				});
 			};
 
diff --git a/src/modules/page/room/RoomCreate.page.unit.ts b/src/modules/page/room/RoomCreate.page.unit.ts
index 2b2b01f884..32ecdb7dd9 100644
--- a/src/modules/page/room/RoomCreate.page.unit.ts
+++ b/src/modules/page/room/RoomCreate.page.unit.ts
@@ -1,4 +1,4 @@
-import { RoomCreateParams } from "@/types/room/Room";
+import { RoomColorEnum, RoomCreateParams } from "@/types/room/Room";
 import { useRoomCreateState } from "@data-room";
 import {
 	createTestingI18n,
@@ -6,7 +6,6 @@ import {
 } from "@@/tests/test-utils/setup";
 import { RoomCreatePage } from "@page-room";
 import { useRouter } from "vue-router";
-import { RoomColor } from "@/serverApi/v3";
 import { RoomForm } from "@feature-room";
 import { NOTIFIER_MODULE_KEY } from "@/utils/inject";
 import { createModuleMocks } from "@@/tests/test-utils/mock-store-module";
@@ -39,7 +38,7 @@ jest.mock<typeof import("@/utils/pageTitle")>("@/utils/pageTitle", () => ({
 
 const roomParams: RoomCreateParams = {
 	name: "test",
-	color: RoomColor.Blue,
+	color: RoomColorEnum.Blue,
 };
 
 describe("@pages/RoomCreate.page.vue", () => {
@@ -82,7 +81,7 @@ describe("@pages/RoomCreate.page.vue", () => {
 		const { roomFormComponent, router } = setup();
 		roomFormComponent.vm.$emit("save", roomParams);
 		expect(router.push).toHaveBeenCalledWith({
-			name: "rooms-id",
+			name: "room-details",
 			params: { id: "123" },
 		});
 	});
diff --git a/src/modules/page/room/RoomCreate.page.vue b/src/modules/page/room/RoomCreate.page.vue
index df3e870b16..06329ea830 100644
--- a/src/modules/page/room/RoomCreate.page.vue
+++ b/src/modules/page/room/RoomCreate.page.vue
@@ -50,7 +50,7 @@ const onSave = async (payload: { room: RoomCreateParams }) => {
 	try {
 		const room = await createRoom(payload.room);
 
-		router.push({ name: "rooms-id", params: { id: room.id } });
+		router.push({ name: "room-details", params: { id: room.id } });
 	} catch (error: unknown) {
 		if (isInvalidRequestError(error)) {
 			notifierModule.show({
diff --git a/src/modules/page/room/RoomDetails.page.unit.ts b/src/modules/page/room/RoomDetails.page.unit.ts
index a3594aa7f9..262f493774 100644
--- a/src/modules/page/room/RoomDetails.page.unit.ts
+++ b/src/modules/page/room/RoomDetails.page.unit.ts
@@ -1,7 +1,4 @@
-import * as serverApi from "@/serverApi/v3/api";
-import DefaultWireframe from "@/components/templates/DefaultWireframe.vue";
-import { RoomColor } from "@/serverApi/v3";
-import { AUTH_MODULE_KEY, ENV_CONFIG_MODULE_KEY } from "@/utils/inject";
+import { ENV_CONFIG_MODULE_KEY } from "@/utils/inject";
 import EnvConfigModule from "@/store/env-config";
 import { envsFactory, mockedPiniaStoreTyping } from "@@/tests/test-utils";
 import { createModuleMocks } from "@@/tests/test-utils/mock-store-module";
@@ -9,24 +6,26 @@ import {
 	createTestingI18n,
 	createTestingVuetify,
 } from "@@/tests/test-utils/setup";
-import { RoomVariant, useRoomDetailsStore } from "@data-room";
+import { RoomVariant, useRoomDetailsStore, useRoomsState } from "@data-room";
 import { RoomDetailsPage } from "@page-room";
 import { createTestingPinia } from "@pinia/testing";
-import AuthModule from "@/store/auth";
-import { nextTick, ref, Ref } from "vue";
-import { Breadcrumb } from "@/components/templates/default-wireframe.types";
+import { ref } from "vue";
 import setupStores from "@@/tests/test-utils/setupStores";
-import { roomDetailsFactory } from "@@/tests/test-utils/factory/roomDetailsFactory";
-import { flushPromises } from "@vue/test-utils";
-import { Router, useRoute, useRouter } from "vue-router";
-import { createMock } from "@golevelup/ts-jest";
+import { roomFactory } from "@@/tests/test-utils/factory/room";
+import { useRouter } from "vue-router";
 import { useRoomAuthorization } from "@feature-room";
+import { flushPromises, VueWrapper } from "@vue/test-utils";
+import * as serverApi from "@/serverApi/v3/api";
+import { createMock, DeepMocked } from "@golevelup/ts-jest";
 
 jest.mock("vue-router", () => ({
-	useRoute: jest.fn(),
-	useRouter: jest.fn(),
+	useRouter: jest.fn().mockReturnValue({
+		push: jest.fn(),
+	}),
 }));
 
+jest.mock("@data-room/Rooms.state");
+
 jest.mock("@feature-room/roomAuthorization.composable");
 const roomPermissions: ReturnType<typeof useRoomAuthorization> = {
 	canCreateRoom: ref(false),
@@ -37,32 +36,33 @@ const roomPermissions: ReturnType<typeof useRoomAuthorization> = {
 (useRoomAuthorization as jest.Mock).mockReturnValue(roomPermissions);
 
 describe("@pages/RoomsDetails.page.vue", () => {
-	const router = createMock<Router>();
-	const useRouteMock = <jest.Mock>useRoute;
-	useRouteMock.mockReturnValue({ params: { id: "room-id" }, push: jest.fn() });
-	const useRouterMock = <jest.Mock>useRouter;
+	let useRoomsStateMock: DeepMocked<ReturnType<typeof useRoomsState>>;
 
 	beforeEach(() => {
-		useRouterMock.mockReturnValue(router);
 		setupStores({
 			envConfigModule: EnvConfigModule,
 		});
+
+		useRoomsStateMock = createMock<ReturnType<typeof useRoomsState>>({
+			isLoading: ref(false),
+			isEmpty: ref(false),
+			rooms: ref([]),
+		});
+		jest.mocked(useRoomsState).mockReturnValue(useRoomsStateMock);
+	});
+
+	afterEach(() => {
+		jest.clearAllMocks();
 	});
 
 	const setup = (
 		{
-			isLoading,
-			roomVariant,
+			undefinedRoom,
 			envs,
-			isTeacher,
-			permissions,
 		}: {
-			isLoading: boolean;
-			roomVariant?: RoomVariant;
-			envs?: Record<string, unknown>;
-			isTeacher?: boolean;
-			permissions?: string[];
-		} = { isLoading: false, roomVariant: RoomVariant.ROOM }
+			undefinedRoom?: boolean;
+			envs?: Partial<serverApi.ConfigResponse>;
+		} = { undefinedRoom: false }
 	) => {
 		const envConfigModule = createModuleMocks(EnvConfigModule, {
 			getEnv: envsFactory.build({
@@ -72,290 +72,347 @@ describe("@pages/RoomsDetails.page.vue", () => {
 			}),
 		});
 
-		const authModule = createModuleMocks(AuthModule, {
-			getUserPermissions: permissions || [],
-			getUserRoles: !isTeacher ? ["teacher"] : [],
-		});
+		const room = roomFactory.build();
 
 		const wrapper = mount(RoomDetailsPage, {
 			global: {
 				plugins: [
 					createTestingVuetify(),
 					createTestingI18n(),
-					createTestingPinia(),
+					createTestingPinia({
+						initialState: {
+							roomDetailsStore: {
+								isLoading: false,
+								room: undefinedRoom ? undefined : room,
+								roomVariant: RoomVariant.ROOM,
+								roomBoards: [],
+							},
+						},
+					}),
 				],
 				provide: {
 					[ENV_CONFIG_MODULE_KEY.valueOf()]: envConfigModule,
-					[AUTH_MODULE_KEY.valueOf()]: authModule,
-				},
-				stubs: {
-					SelectBoardLayoutDialog: true,
-					CourseRoomDetailsPage: true,
 				},
 			},
-			router,
 		});
 
 		const roomDetailsStore = mockedPiniaStoreTyping(useRoomDetailsStore);
-		const room = roomDetailsFactory.build();
-		roomDetailsStore.room = room;
-		roomDetailsStore.roomVariant = roomVariant;
-		roomDetailsStore.isLoading = isLoading;
-		roomDetailsStore.roomBoards = [];
-
-		const wrapperVM = wrapper.vm as unknown as {
-			room: {
-				id: string;
-				name: string;
-				color: RoomColor;
-				createdAt: string;
-				updatedAt: string;
-			};
-			pageTitle: string;
-			breadcrumbs: Breadcrumb[];
-			fabItems: {
-				icon: string;
-				title: string;
-				ariaLabel: string;
-				testId: string;
-			}[];
-			isMembersDialogOpen: boolean;
-			isRoom: Ref<boolean>;
-			onFabClick: ReturnType<typeof jest.fn>;
-			boardLayoutsEnabled: Ref<boolean>;
-		};
 
 		return {
 			wrapper,
 			roomDetailsStore,
-			wrapperVM,
-			authModule,
+			room,
+			router: useRouter(),
+			useRoomsStateMock,
 		};
 	};
 
 	describe("when page is mounted", () => {
-		it("should be rendered in DOM", () => {
-			const { wrapper } = setup();
+		it("should set the page title", async () => {
+			const { room } = setup();
 
-			expect(wrapper.vm).toBeDefined();
+			expect(document.title).toContain(
+				`${room.name} - ${"pages.roomDetails.title"}`
+			);
 		});
 
 		it("should render DefaultWireframe", () => {
 			const { wrapper } = setup();
 
-			const defaultWireframe = wrapper.findComponent(DefaultWireframe);
-			expect(defaultWireframe).toBeDefined();
+			const defaultWireframe = wrapper.findComponent({
+				name: "DefaultWireframe",
+			});
+
+			expect(defaultWireframe.exists()).toBe(true);
+		});
+
+		it("should render BoardGrid", () => {
+			const { wrapper } = setup();
+
+			const boardGrid = wrapper.findComponent({ name: "BoardGrid" });
+			expect(boardGrid.exists()).toBe(true);
 		});
 
-		describe("breadcrumbs", () => {
-			it("should have elements inside the list", () => {
-				const { wrapperVM } = setup();
+		describe("and room is defined", () => {
+			it("should render breadcrumbs with room name", () => {
+				const { wrapper, room } = setup();
 
-				expect(wrapperVM.breadcrumbs).toHaveLength(2);
-				expect(wrapperVM.breadcrumbs[0].title).toContain("pages.rooms.title");
-			});
+				const breadcrumbs = wrapper.getComponent({ name: "Breadcrumbs" });
 
-			describe("when room is undefined", () => {
-				it("should not have any element inside the list", () => {
-					const { wrapperVM, roomDetailsStore } = setup();
-					roomDetailsStore.room = undefined;
-					expect(wrapperVM.breadcrumbs).toHaveLength(0);
+				const breadcrumbItems = breadcrumbs.findAllComponents({
+					name: "v-breadcrumbs-item",
 				});
+
+				expect(breadcrumbItems).toHaveLength(2);
+				expect(breadcrumbItems[1].text()).toContain(room.name);
 			});
 		});
 
-		describe("pageTitle", () => {
-			it("should set the page title", async () => {
-				const { wrapperVM } = setup();
-				expect(wrapperVM.pageTitle).toContain("pages.roomDetails.title");
+		describe("and room is undefined", () => {
+			it("should render breadcrumbs with default name", () => {
+				const { wrapper } = setup({ undefinedRoom: true });
+
+				const breadcrumbs = wrapper.getComponent({ name: "Breadcrumbs" });
+
+				const breadcrumbItems = breadcrumbs.findAllComponents({
+					name: "v-breadcrumbs-item",
+				});
+
+				expect(breadcrumbItems).toHaveLength(2);
+				expect(breadcrumbItems[1].text()).toContain("pages.roomDetails.title");
 			});
 		});
 
-		describe("boardLayoutsEnabled", () => {
-			it("should be true", () => {
-				const { wrapperVM } = setup();
-				expect(wrapperVM.boardLayoutsEnabled).toBe(true);
-			});
+		describe("and user has permission to edit or delete room", () => {
+			it("should render kebab menu", () => {
+				roomPermissions.canEditRoom.value = true;
+				roomPermissions.canDeleteRoom.value = false;
 
-			it("should be false", () => {
-				const { wrapperVM } = setup({
-					envs: { FEATURE_BOARD_LAYOUT_ENABLED: false },
-					isLoading: false,
-				});
-				expect(wrapperVM.boardLayoutsEnabled).toBe(false);
+				const { wrapper } = setup();
+
+				const menu = wrapper.findComponent({ name: "RoomMenu" });
+
+				expect(menu.exists()).toBe(true);
 			});
 		});
 
-		describe("when FEATURE_ROOMS_ENABLED flag is set to true", () => {
-			describe("and user has 'room_create' permission", () => {
-				it("should call fetchRoom on mounted", () => {
-					const { roomDetailsStore } = setup({
-						isLoading: false,
-						permissions: ["room_create"],
-					});
+		describe("and user does not have permission to edit nor to delete room", () => {
+			it("should not render kebab menu", () => {
+				roomPermissions.canEditRoom.value = false;
+				roomPermissions.canDeleteRoom.value = false;
 
-					expect(roomDetailsStore.fetchRoom).toHaveBeenCalledWith("room-id");
-					expect(roomDetailsStore.deactivateRoom).not.toHaveBeenCalled();
-				});
+				const { wrapper } = setup();
+
+				const menu = wrapper.findComponent({ name: "RoomMenu" });
+
+				expect(menu.exists()).toBe(false);
 			});
+		});
+	});
 
-			describe("and user does not have 'room_create' permission", () => {
-				it("should not call fetchRoom on mounted", () => {
-					const { roomDetailsStore } = setup({
-						isLoading: false,
-						permissions: [],
-					});
+	describe("when using the menu", () => {
+		beforeEach(() => {
+			roomPermissions.canEditRoom.value = true;
+			roomPermissions.canDeleteRoom.value = true;
+		});
+
+		describe("and user clicks on edit room", () => {
+			it("should navigate to the edit room page", async () => {
+				const { wrapper, router, room } = setup();
+
+				const menu = wrapper.getComponent({ name: "RoomMenu" });
+				menu.vm.$emit("room:edit");
 
-					expect(roomDetailsStore.deactivateRoom).toHaveBeenCalled();
-					expect(roomDetailsStore.fetchRoom).not.toHaveBeenCalled();
+				expect(menu.emitted()).toHaveProperty("room:edit");
+
+				expect(router.push).toHaveBeenCalledWith({
+					name: "room-edit",
+					params: { id: room.id },
 				});
 			});
 		});
 
-		describe("when FEATURE_ROOMS_ENABLED flag is set false", () => {
-			it("should not call fetchRoom on mounted", () => {
-				const { roomDetailsStore } = setup({
-					envs: { FEATURE_ROOMS_ENABLED: false },
-					isLoading: false,
-				});
+		describe("and user clicks on manage members", () => {
+			it("should navigate to the member management page", async () => {
+				const { wrapper, router, room } = setup();
+
+				const menu = wrapper.getComponent({ name: "RoomMenu" });
+				menu.vm.$emit("room:manage-members");
+
+				expect(menu.emitted()).toHaveProperty("room:manage-members");
 
-				expect(roomDetailsStore.deactivateRoom).toHaveBeenCalled();
-				expect(roomDetailsStore.fetchRoom).not.toHaveBeenCalled();
+				expect(router.push).toHaveBeenCalledWith({
+					name: "room-members",
+					params: { id: room.id },
+				});
 			});
 		});
-	});
 
-	describe("when loading", () => {
-		it("should render a loading indication", () => {
-			const { wrapper } = setup({ isLoading: true });
+		describe("and user clicks on delete room", () => {
+			it("should open confirmation dialog", async () => {
+				const { wrapper } = setup();
 
-			const div = wrapper.find("[data-testid=loading]");
-			expect(div.exists()).toBe(true);
-		});
-	});
+				const menu = wrapper.getComponent({ name: "RoomMenu" });
+				await menu.vm.$emit("room:delete");
+
+				const confirmBtn = wrapper.findComponent(
+					"[data-testid='dialog-confirm']"
+				);
 
-	describe("when roomVariant is invalid", () => {
-		it("should not render RoomDetails", () => {
-			const { wrapper } = setup({
-				roomVariant: RoomVariant.COURSE_ROOM,
-				isLoading: false,
+				expect(confirmBtn.exists()).toBe(true);
 			});
 
-			const roomDetailsComponent = wrapper.findComponent({
-				name: "RoomDetails",
+			describe("and user confirms deletion", () => {
+				it("should delete room", async () => {
+					const { wrapper, useRoomsStateMock } = setup();
+
+					const menu = wrapper.getComponent({ name: "RoomMenu" });
+					await menu.vm.$emit("room:delete");
+
+					const confirmBtn = wrapper.findComponent(
+						"[data-testid='dialog-confirm']"
+					);
+
+					await confirmBtn.trigger("click");
+
+					expect(useRoomsStateMock.deleteRoom).toHaveBeenCalled();
+				});
 			});
-			expect(roomDetailsComponent.exists()).toBe(false);
 		});
 	});
 
-	describe("when not loading", () => {
-		it("should not render a loading indication", async () => {
-			const { wrapper } = setup({
-				isLoading: false,
-				permissions: ["room_create"],
-			});
+	describe("when user wants to create a board", () => {
+		const openSpeedDialMenu = async (wrapper: VueWrapper) => {
+			const speedDialMenu = wrapper.getComponent({ name: "speed-dial-menu" });
+			await speedDialMenu.getComponent({ name: "v-btn" }).trigger("click");
 			await flushPromises();
+		};
+
+		describe("and user does not have 'room_create' permission", () => {
+			it("should not render speed dial menu", () => {
+				roomPermissions.canCreateRoom.value = false;
+				const { wrapper } = setup();
+
+				const fabButton = wrapper.findComponent(
+					"[data-testid='add-content-button']"
+				);
 
-			const div = wrapper.find('[data-testid="loading"]');
-			expect(div.exists()).toBe(false);
+				expect(fabButton.exists()).toBe(false);
+			});
 		});
 
-		describe("when roomVariant is valid", () => {
-			it("should render DefaultLayout ", async () => {
-				const { wrapper } = setup({
-					isLoading: false,
-					roomVariant: RoomVariant.ROOM,
-					permissions: ["room_create"],
+		describe("and multiple board layouts are enabled", () => {
+			beforeEach(() => {
+				roomPermissions.canCreateRoom.value = true;
+			});
+
+			const openDialog = async (wrapper: VueWrapper) => {
+				await openSpeedDialMenu(wrapper);
+
+				const boardCreateDialogBtn = wrapper.findComponent(
+					"[data-testid='fab_button_add_board']"
+				);
+				await boardCreateDialogBtn.trigger("click");
+			};
+
+			it("should render board create button, that opens a dialog", async () => {
+				const { wrapper } = setup();
+				await openSpeedDialMenu(wrapper);
+
+				const actions = wrapper.findAllComponents({
+					name: "SpeedDialMenuAction",
 				});
-				await flushPromises();
+				const boardCreateDialogBtn = wrapper.findComponent(
+					"[data-testid='fab_button_add_board']"
+				);
 
-				const defaultWireframe = wrapper.findComponent(DefaultWireframe);
-				expect(defaultWireframe.exists()).toBe(true);
+				expect(actions).toHaveLength(1);
+				expect(boardCreateDialogBtn.exists()).toBe(true);
 			});
 
-			describe("when user clicks on add content button", () => {
-				it("should open the select layout dialog", async () => {
-					const { wrapper } = setup({
-						isLoading: false,
-						roomVariant: RoomVariant.ROOM,
-						permissions: ["room_create"],
+			it("should open dialog", async () => {
+				const { wrapper } = setup();
+				await openDialog(wrapper);
+
+				const dialog = wrapper.getComponent({
+					name: "SelectBoardLayoutDialog",
+				});
+				const dialogContent = dialog.findComponent({
+					name: "VCard",
+				});
+
+				expect(dialogContent.exists()).toBe(true);
+			});
+
+			describe("and user selects a multi-column layout", () => {
+				it("should create a board with multi-column layout", async () => {
+					const { wrapper, roomDetailsStore, room } = setup();
+					await openDialog(wrapper);
+
+					const selectLayoutDialog = wrapper.findComponent({
+						name: "SelectBoardLayoutDialog",
 					});
+					await selectLayoutDialog.vm.$emit("select:multi-column");
 
-					await flushPromises();
-					const defaultWireframe = wrapper.findComponent(DefaultWireframe);
-					defaultWireframe.vm.$emit("onFabItemClick", "board-type-dialog-open");
+					expect(roomDetailsStore.createBoard).toHaveBeenCalledWith(
+						room.id,
+						serverApi.BoardLayout.Columns,
+						"pages.roomDetails.board.defaultName"
+					);
+				});
+			});
+
+			describe("and user selects a single-column layout", () => {
+				it("should create a board with single-column layout", async () => {
+					const { wrapper, roomDetailsStore, room } = setup();
+					await openDialog(wrapper);
 
 					const selectLayoutDialog = wrapper.findComponent({
 						name: "SelectBoardLayoutDialog",
 					});
-					expect(selectLayoutDialog.exists()).toBe(true);
+					await selectLayoutDialog.vm.$emit("select:single-column");
+
+					expect(roomDetailsStore.createBoard).toHaveBeenCalledWith(
+						room.id,
+						serverApi.BoardLayout.List,
+						"pages.roomDetails.board.defaultName"
+					);
 				});
 			});
+		});
 
-			describe("when user creates a new board", () => {
-				it.each([
-					{ event: "multi-column", layout: "columns" },
-					{ event: "single-column", layout: "list" },
-				])(
-					"should have a '$layout'-layout when '$event' was chosen",
-					async ({ event, layout }) => {
-						roomPermissions.canEditRoom.value = true;
-
-						const { wrapper } = setup({
-							isLoading: false,
-							roomVariant: RoomVariant.ROOM,
-							permissions: ["room_create"],
-						});
-
-						await flushPromises();
-
-						const mockApi = {
-							boardControllerCreateBoard: jest
-								.fn()
-								.mockResolvedValue({ data: { id: "board-id" } }),
-						};
-						const spy = jest
-							.spyOn(serverApi, "BoardApiFactory")
-							.mockReturnValue(
-								mockApi as unknown as serverApi.BoardApiInterface
-							);
-
-						const selectLayoutDialog = wrapper.findComponent({
-							name: "SelectBoardLayoutDialog",
-						});
-
-						await selectLayoutDialog.vm.$emit(`select:${event}`);
-
-						expect(mockApi.boardControllerCreateBoard).toHaveBeenCalledTimes(1);
-						expect(mockApi.boardControllerCreateBoard).toHaveBeenCalledWith(
-							expect.objectContaining({ layout })
-						);
-
-						spy.mockRestore();
-					}
-				);
+		describe("and only column board is enabled", () => {
+			beforeEach(() => {
+				roomPermissions.canCreateRoom.value = true;
+				roomPermissions.canEditRoom.value = true;
 			});
 
-			describe("when user clicks on edit room button", () => {
-				it("should navigate to the edit room page", async () => {
-					const { wrapper } = setup({
-						isLoading: false,
-						roomVariant: RoomVariant.ROOM,
-						permissions: ["room_edit"],
-					});
+			it("should not render dialog", () => {
+				const { wrapper } = setup({
+					envs: { FEATURE_BOARD_LAYOUT_ENABLED: false },
+				});
+
+				const dialog = wrapper.findComponent({
+					name: "SelectBoardLayoutDialog",
+				});
+
+				expect(dialog.exists()).toBe(false);
+			});
 
-					await flushPromises();
-					const defaultWireframe = wrapper.findComponent(DefaultWireframe);
-					const kebabMenu = defaultWireframe.find('[data-testid="room-menu"]');
-					await kebabMenu.trigger("click");
+			it("should render board create button, that creates a multi-column board", async () => {
+				const { wrapper } = setup({
+					envs: { FEATURE_BOARD_LAYOUT_ENABLED: false },
+				});
+				await openSpeedDialMenu(wrapper);
 
-					const menus = wrapper.findAllComponents({ name: "VListItem" });
+				const actions = wrapper.findAllComponents({
+					name: "SpeedDialMenuAction",
+				});
+				const boardCreateBtn = wrapper.findComponent(
+					"[data-testid='fab_button_add_column_board']"
+				);
 
-					menus[0].vm.$emit("click");
-					await nextTick();
+				expect(actions).toHaveLength(1);
+				expect(boardCreateBtn.exists()).toBe(true);
+			});
 
-					expect(useRouteMock).toHaveBeenCalled();
+			it("should create column board", async () => {
+				const { wrapper, roomDetailsStore, room } = setup({
+					envs: { FEATURE_BOARD_LAYOUT_ENABLED: false },
 				});
+				await openSpeedDialMenu(wrapper);
+
+				const boardCreateBtn = wrapper.findComponent(
+					"[data-testid='fab_button_add_column_board']"
+				);
+
+				await boardCreateBtn.trigger("click");
+
+				expect(roomDetailsStore.createBoard).toHaveBeenCalledWith(
+					room.id,
+					serverApi.BoardLayout.Columns,
+					"pages.roomDetails.board.defaultName"
+				);
 			});
 		});
 	});
diff --git a/src/modules/page/room/RoomDetails.page.vue b/src/modules/page/room/RoomDetails.page.vue
index a4cdd23b0e..182f60aa6e 100644
--- a/src/modules/page/room/RoomDetails.page.vue
+++ b/src/modules/page/room/RoomDetails.page.vue
@@ -1,120 +1,44 @@
 <template>
-	<template v-if="isLoading">
-		<div data-testid="loading" class="w-100 text-center">
-			<VProgressCircular
-				color="primary"
-				indeterminate
-				:size="51"
-				class="my-10"
-			/>
-		</div>
-	</template>
-	<template v-else>
-		<template v-if="isRoom">
-			<DefaultWireframe
-				max-width="full"
-				:breadcrumbs="breadcrumbs"
-				:fabItems="fabItems"
-				@onFabItemClick="fabItemClickHandler"
-			>
-				<template #header v-if="room">
-					<div class="d-flex align-items-center">
-						<h1 class="text-h3 mb-4" data-testid="room-title">
-							{{ room.name }}
-						</h1>
-						<KebabMenu
-							v-if="isMenuEnabled"
-							class="mx-2"
-							:aria-label="$t('pages.roomDetails.ariaLabels.menu')"
-							data-testid="room-menu"
-						>
-							<VListItem
-								v-if="canEditRoom"
-								ref="editRoomMenu"
-								role="menuitem"
-								:to="`/rooms/${room.id}/edit`"
-								data-testid="room-action-edit"
-								:aria-label="
-									$t('pages.roomDetails.ariaLabels.menu.action.edit')
-								"
-							>
-								<template v-slot:prepend>
-									<VIcon :icon="mdiPencilOutline" />
-								</template>
-								<VListItemTitle>
-									{{ $t("common.actions.edit") }}
-								</VListItemTitle>
-							</VListItem>
-
-							<VListItem
-								v-if="canEditRoom"
-								ref="manageMembersMenu"
-								role="menuitem"
-								:to="`/rooms/${room.id}/members`"
-								data-testid="room-action-manage-participants"
-								:aria-label="t('pages.rooms.members.manage')"
-							>
-								<template #prepend>
-									<VIcon :icon="mdiAccountGroupOutline" />
-								</template>
-								<VListItemTitle>
-									{{ t("pages.rooms.members.manage") }}
-								</VListItemTitle>
-							</VListItem>
-
-							<VListItem
-								v-if="canDeleteRoom"
-								ref="deleteRoomMenu"
-								role="menuitem"
-								data-testid="room-action-delete"
-								:aria-label="
-									$t('pages.roomDetails.ariaLabels.menu.action.delete')
-								"
-								@click="onDelete"
-							>
-								<template v-slot:prepend>
-									<VIcon :icon="mdiTrashCanOutline" />
-								</template>
-								<VListItemTitle>
-									{{ $t("common.actions.delete") }}
-								</VListItemTitle>
-							</VListItem>
-						</KebabMenu>
-					</div>
-				</template>
-				<RoomDetails v-if="room" :room="room" :room-boards="roomBoards" />
-				<ConfirmationDialog />
-				<SelectBoardLayoutDialog
-					v-if="boardLayoutsEnabled"
-					v-model="boardLayoutDialogIsOpen"
-					@select:multi-column="createBoard(BoardLayout.Columns)"
-					@select:single-column="createBoard(BoardLayout.List)"
+	<DefaultWireframe
+		max-width="full"
+		:breadcrumbs="breadcrumbs"
+		:fabItems="fabItems"
+		@onFabItemClick="fabItemClickHandler"
+	>
+		<template #header>
+			<div class="d-flex align-items-center">
+				<h1 class="text-h3 mb-4" data-testid="room-title">
+					{{ roomTitle }}
+				</h1>
+				<RoomMenu
+					v-if="isMenuEnabled"
+					@room:edit="onEdit"
+					@room:manage-members="onManageMembers"
+					@room:delete="onDelete"
 				/>
-			</DefaultWireframe>
-		</template>
-		<template v-else>
-			<CourseRoomDetailsPage />
+			</div>
 		</template>
-	</template>
+		<BoardGrid :boards="roomBoards" />
+		<ConfirmationDialog />
+		<SelectBoardLayoutDialog
+			v-if="boardLayoutsEnabled && canCreateRoom"
+			v-model="boardLayoutDialogIsOpen"
+			@select:multi-column="onCreateBoard(BoardLayout.Columns)"
+			@select:single-column="onCreateBoard(BoardLayout.List)"
+		/>
+	</DefaultWireframe>
 </template>
 
 <script setup lang="ts">
 import { Breadcrumb } from "@/components/templates/default-wireframe.types";
 import DefaultWireframe from "@/components/templates/DefaultWireframe.vue";
-import CourseRoomDetailsPage from "@/pages/course-rooms/CourseRoomDetails.page.vue";
-import {
-	AUTH_MODULE_KEY,
-	ENV_CONFIG_MODULE_KEY,
-	injectStrict,
-} from "@/utils/inject";
+import { BoardLayout } from "@/serverApi/v3";
+import { ENV_CONFIG_MODULE_KEY, injectStrict } from "@/utils/inject";
 import { buildPageTitle } from "@/utils/pageTitle";
-import { RoomVariant, useRoomDetailsStore, useRoomsState } from "@data-room";
-import { RoomDetails, useRoomAuthorization } from "@feature-room";
+import { useRoomDetailsStore, useRoomsState } from "@data-room";
+import { BoardGrid, RoomMenu, useRoomAuthorization } from "@feature-room";
 import {
-	mdiAccountGroupOutline,
-	mdiPencilOutline,
 	mdiPlus,
-	mdiTrashCanOutline,
 	mdiViewDashboardOutline,
 	mdiViewGridPlusOutline,
 } from "@icons/material";
@@ -122,88 +46,77 @@ import {
 	ConfirmationDialog,
 	useDeleteConfirmationDialog,
 } from "@ui-confirmation-dialog";
-import { KebabMenu } from "@ui-kebab-menu";
 import { SelectBoardLayoutDialog } from "@ui-room-details";
 import { useTitle } from "@vueuse/core";
 import { storeToRefs } from "pinia";
-import { computed, ComputedRef, onUnmounted, ref, watch } from "vue";
+import { computed, ComputedRef, ref } from "vue";
 import { useI18n } from "vue-i18n";
-import { useRoute, useRouter } from "vue-router";
-import {
-	BoardApiFactory,
-	BoardLayout,
-	BoardParentType,
-	CreateBoardBodyParams,
-	Permission,
-} from "@/serverApi/v3";
-import { $axios } from "@/utils/api";
-
-const envConfigModule = injectStrict(ENV_CONFIG_MODULE_KEY);
-const authModule = injectStrict(AUTH_MODULE_KEY);
+import { useRouter } from "vue-router";
 
-const route = useRoute();
 const router = useRouter();
-
-const roomDetailsStore = useRoomDetailsStore();
-const { isLoading, room, roomVariant, roomBoards } =
-	storeToRefs(roomDetailsStore);
-const { deactivateRoom, fetchRoom, resetState } = roomDetailsStore;
-
 const { t } = useI18n();
+const envConfigModule = injectStrict(ENV_CONFIG_MODULE_KEY);
+
 const { deleteRoom } = useRoomsState();
 const { askDeleteConfirmation } = useDeleteConfirmationDialog();
 
+const roomDetailsStore = useRoomDetailsStore();
+const { room, roomBoards } = storeToRefs(roomDetailsStore);
+const { createBoard } = roomDetailsStore;
+
 const pageTitle = computed(() =>
 	buildPageTitle(`${room.value?.name} - ${t("pages.roomDetails.title")}`)
 );
 useTitle(pageTitle);
 
-const breadcrumbs: ComputedRef<Breadcrumb[]> = computed(() => {
-	if (room.value != null) {
-		return [
-			{
-				title: t("pages.rooms.title"),
-				to: "/rooms",
-			},
-			{
-				title: room.value.name,
-				disabled: true,
-			},
-		];
-	}
-	return [];
+const { canCreateRoom, canEditRoom, canDeleteRoom } =
+	useRoomAuthorization(room);
+
+const roomTitle = computed(() => {
+	return room.value ? room.value.name : t("pages.roomDetails.title");
 });
 
 const boardLayoutsEnabled = computed(
 	() => envConfigModule.getEnv.FEATURE_BOARD_LAYOUT_ENABLED
 );
 
-const { canEditRoom, canDeleteRoom } = useRoomAuthorization(room);
-
 const isMenuEnabled = computed(() => canEditRoom.value || canDeleteRoom.value);
-
 const boardLayoutDialogIsOpen = ref(false);
 
+const breadcrumbs: ComputedRef<Breadcrumb[]> = computed(() => {
+	return [
+		{
+			title: t("pages.rooms.title"),
+			to: "/rooms",
+		},
+		{
+			title: roomTitle.value,
+			disabled: true,
+		},
+	];
+});
+
 const fabItems = computed(() => {
+	if (!canCreateRoom.value) return undefined;
+
 	const actions = [];
-	if (canEditRoom.value) {
-		if (boardLayoutsEnabled.value) {
-			actions.push({
-				label: t("pages.courseRoomDetails.fab.add.board"),
-				icon: mdiViewGridPlusOutline,
-				customEvent: "board-type-dialog-open",
-				dataTestId: "fab_button_add_board",
-				ariaLabel: t("pages.courseRoomDetails.fab.add.board"),
-			});
-		} else {
-			actions.push({
-				label: t("pages.courseRoomDetails.fab.add.columnBoard"),
-				icon: mdiViewDashboardOutline,
-				customEvent: "board-create",
-				dataTestId: "fab_button_add_column_board",
-				ariaLabel: t("pages.courseRoomDetails.fab.add.columnBoard"),
-			});
-		}
+
+	if (boardLayoutsEnabled.value) {
+		actions.push({
+			label: t("pages.courseRoomDetails.fab.add.board"),
+			icon: mdiViewGridPlusOutline,
+			customEvent: "board-type-dialog-open",
+			dataTestId: "fab_button_add_board",
+			ariaLabel: t("pages.courseRoomDetails.fab.add.board"),
+		});
+	} else {
+		actions.push({
+			label: t("pages.courseRoomDetails.fab.add.columnBoard"),
+			icon: mdiViewDashboardOutline,
+			customEvent: "board-create",
+			dataTestId: "fab_button_add_column_board",
+			ariaLabel: t("pages.courseRoomDetails.fab.add.columnBoard"),
+		});
 	}
 
 	const items = {
@@ -221,45 +134,30 @@ const fabItemClickHandler = (event: string) => {
 	if (event === "board-type-dialog-open") {
 		boardLayoutDialogIsOpen.value = true;
 	} else if (event === "board-create") {
-		createBoard(BoardLayout.Columns);
+		onCreateBoard(BoardLayout.Columns);
 	}
 };
 
-const canAccessRoom = computed(() => {
-	return (
-		envConfigModule.getEnv.FEATURE_ROOMS_ENABLED &&
-		authModule.getUserPermissions.includes(Permission.RoomCreate.toLowerCase())
-	);
-});
+const onEdit = () => {
+	if (!room.value) return;
 
-watch(
-	() => route.params.id,
-	async () => {
-		if (canAccessRoom.value) {
-			await fetchRoom(route.params.id as string);
-		} else {
-			deactivateRoom();
-		}
-	},
-	{ immediate: true }
-);
-
-const isRoom = computed(() => roomVariant.value === RoomVariant.ROOM);
-
-const createBoard = async (layout: BoardLayout) => {
-	if (!room.value || !canEditRoom.value) return;
-
-	const boardApi = BoardApiFactory(undefined, "/v3", $axios);
+	router.push({
+		name: "room-edit",
+		params: {
+			id: room.value.id,
+		},
+	});
+};
 
-	const params: CreateBoardBodyParams = {
-		title: t("pages.roomDetails.board.defaultName"),
-		parentId: room.value.id,
-		parentType: BoardParentType.Room,
-		layout,
-	};
-	const boardId = (await boardApi.boardControllerCreateBoard(params)).data.id;
+const onManageMembers = () => {
+	if (!room.value) return;
 
-	router.push(`/boards/${boardId}`);
+	router.push({
+		name: "room-members",
+		params: {
+			id: room.value.id,
+		},
+	});
 };
 
 const onDelete = async () => {
@@ -278,7 +176,15 @@ const onDelete = async () => {
 	}
 };
 
-onUnmounted(() => {
-	resetState();
-});
+const onCreateBoard = async (layout: BoardLayout) => {
+	if (!room.value || !canEditRoom.value) return;
+
+	const boardId = await createBoard(
+		room.value.id,
+		layout,
+		t("pages.roomDetails.board.defaultName")
+	);
+
+	router.push(`/boards/${boardId}`);
+};
 </script>
diff --git a/src/modules/page/room/RoomDetailsSwitch.page.unit.ts b/src/modules/page/room/RoomDetailsSwitch.page.unit.ts
new file mode 100644
index 0000000000..7d75d22c0c
--- /dev/null
+++ b/src/modules/page/room/RoomDetailsSwitch.page.unit.ts
@@ -0,0 +1,162 @@
+import { ENV_CONFIG_MODULE_KEY } from "@/utils/inject";
+import EnvConfigModule from "@/store/env-config";
+import { envsFactory, mockedPiniaStoreTyping } from "@@/tests/test-utils";
+import { createModuleMocks } from "@@/tests/test-utils/mock-store-module";
+import {
+	createTestingI18n,
+	createTestingVuetify,
+} from "@@/tests/test-utils/setup";
+import { RoomVariant, useRoomDetailsStore } from "@data-room";
+import { RoomDetailsSwitchPage } from "@page-room";
+import { createTestingPinia } from "@pinia/testing";
+import { ref } from "vue";
+import setupStores from "@@/tests/test-utils/setupStores";
+import { roomFactory } from "@@/tests/test-utils/factory/room/roomFactory";
+import { Router, useRoute, useRouter } from "vue-router";
+import { createMock } from "@golevelup/ts-jest";
+import { useRoomAuthorization } from "@feature-room";
+
+jest.mock("vue-router", () => ({
+	useRoute: jest.fn(),
+	useRouter: jest.fn(),
+}));
+
+jest.mock("@feature-room/roomAuthorization.composable");
+const roomPermissions: ReturnType<typeof useRoomAuthorization> = {
+	canCreateRoom: ref(false),
+	canViewRoom: ref(false),
+	canEditRoom: ref(false),
+	canDeleteRoom: ref(false),
+};
+(useRoomAuthorization as jest.Mock).mockReturnValue(roomPermissions);
+
+describe("@pages/RoomsDetailsSwitch.page.vue", () => {
+	const router = createMock<Router>();
+	const useRouteMock = <jest.Mock>useRoute;
+	useRouteMock.mockReturnValue({ params: { id: "room-id" }, push: jest.fn() });
+	const useRouterMock = <jest.Mock>useRouter;
+
+	beforeEach(() => {
+		useRouterMock.mockReturnValue(router);
+		setupStores({
+			envConfigModule: EnvConfigModule,
+		});
+	});
+
+	const setup = (
+		{
+			isLoading,
+			roomVariant,
+		}: {
+			isLoading: boolean;
+			roomVariant?: RoomVariant;
+		} = { isLoading: false, roomVariant: RoomVariant.ROOM }
+	) => {
+		const envConfigModule = createModuleMocks(EnvConfigModule, {
+			getEnv: envsFactory.build({
+				FEATURE_BOARD_LAYOUT_ENABLED: true,
+				FEATURE_ROOMS_ENABLED: true,
+			}),
+		});
+
+		const room = roomFactory.build();
+
+		const wrapper = mount(RoomDetailsSwitchPage, {
+			global: {
+				plugins: [
+					createTestingVuetify(),
+					createTestingI18n(),
+					createTestingPinia({
+						initialState: {
+							roomDetailsStore: {
+								isLoading,
+								room,
+								roomVariant,
+								roomBoards: [],
+							},
+						},
+					}),
+				],
+				provide: {
+					[ENV_CONFIG_MODULE_KEY.valueOf()]: envConfigModule,
+				},
+				stubs: {
+					CourseRoomDetailsPage: true,
+					"RoomDetails.page": true,
+				},
+			},
+			router,
+		});
+
+		const roomDetailsStore = mockedPiniaStoreTyping(useRoomDetailsStore);
+
+		return {
+			wrapper,
+			roomDetailsStore,
+		};
+	};
+
+	describe("when page is loading", () => {
+		it("should render loading state", async () => {
+			const { wrapper } = setup({ isLoading: true });
+			const loadingState = wrapper.findComponent({ name: "VProgressCircular" });
+
+			expect(loadingState.exists()).toBe(true);
+		});
+
+		describe("and user has access to rooms", () => {
+			it("should fetch room", () => {
+				roomPermissions.canCreateRoom.value = true;
+				const { roomDetailsStore } = setup({ isLoading: true });
+
+				expect(roomDetailsStore.fetchRoom).toHaveBeenCalled();
+			});
+		});
+
+		describe("and user does not have access to rooms", () => {
+			it("should deactivate room", () => {
+				roomPermissions.canCreateRoom.value = false;
+				const { roomDetailsStore } = setup({ isLoading: true });
+
+				expect(roomDetailsStore.deactivateRoom).toHaveBeenCalled();
+			});
+		});
+	});
+
+	describe("when page has loaded", () => {
+		it("should not render a loading indication", async () => {
+			const { wrapper } = setup({ isLoading: false });
+			const loadingState = wrapper.findComponent({ name: "VProgressCircular" });
+
+			expect(loadingState.exists()).toBe(false);
+		});
+
+		describe("and room variant is ROOM", () => {
+			it("should render room details page", () => {
+				roomPermissions.canCreateRoom.value = true;
+				const { wrapper } = setup({
+					isLoading: false,
+					roomVariant: RoomVariant.ROOM,
+				});
+
+				expect(wrapper.html()).toBe(
+					"<room-details.page-stub></room-details.page-stub>"
+				);
+			});
+		});
+
+		describe("and room variant is COURSE_ROOM", () => {
+			it("should render course-room details page", () => {
+				roomPermissions.canCreateRoom.value = true;
+				const { wrapper } = setup({
+					isLoading: false,
+					roomVariant: RoomVariant.COURSE_ROOM,
+				});
+
+				expect(wrapper.html()).toBe(
+					"<course-room-details-page-stub></course-room-details-page-stub>"
+				);
+			});
+		});
+	});
+});
diff --git a/src/modules/page/room/RoomDetailsSwitch.page.vue b/src/modules/page/room/RoomDetailsSwitch.page.vue
new file mode 100644
index 0000000000..baec865be6
--- /dev/null
+++ b/src/modules/page/room/RoomDetailsSwitch.page.vue
@@ -0,0 +1,58 @@
+<template>
+	<template v-if="isLoading">
+		<div data-testid="loading" class="w-100 text-center">
+			<VProgressCircular
+				color="primary"
+				indeterminate
+				:size="51"
+				class="my-10"
+			/>
+		</div>
+	</template>
+	<template v-else>
+		<RoomDetailsPage v-if="isRoom" />
+		<CourseRoomDetailsPage v-else />
+	</template>
+</template>
+
+<script setup lang="ts">
+import CourseRoomDetailsPage from "@/pages/course-rooms/CourseRoomDetails.page.vue";
+import { RoomDetailsPage } from "@page-room";
+import { ENV_CONFIG_MODULE_KEY, injectStrict } from "@/utils/inject";
+import { RoomVariant, useRoomDetailsStore } from "@data-room";
+import { storeToRefs } from "pinia";
+import { computed, onUnmounted, watch } from "vue";
+import { useRoute } from "vue-router";
+import { useRoomAuthorization } from "@feature-room";
+
+const envConfigModule = injectStrict(ENV_CONFIG_MODULE_KEY);
+const route = useRoute();
+
+const roomDetailsStore = useRoomDetailsStore();
+const { isLoading, roomVariant, room } = storeToRefs(roomDetailsStore);
+const { deactivateRoom, fetchRoom, resetState } = roomDetailsStore;
+
+const { canCreateRoom } = useRoomAuthorization(room);
+
+const canAccessRoom = computed(() => {
+	return envConfigModule.getEnv.FEATURE_ROOMS_ENABLED && canCreateRoom.value;
+});
+
+watch(
+	() => route.params.id,
+	async () => {
+		if (canAccessRoom.value) {
+			await fetchRoom(route.params.id as string);
+		} else {
+			deactivateRoom();
+		}
+	},
+	{ immediate: true }
+);
+
+const isRoom = computed(() => roomVariant.value === RoomVariant.ROOM);
+
+onUnmounted(() => {
+	resetState();
+});
+</script>
diff --git a/src/modules/page/room/RoomEdit.page.unit.ts b/src/modules/page/room/RoomEdit.page.unit.ts
index 8ff11f927b..69e1b458a7 100644
--- a/src/modules/page/room/RoomEdit.page.unit.ts
+++ b/src/modules/page/room/RoomEdit.page.unit.ts
@@ -6,8 +6,7 @@ import { useRoomEditState } from "@data-room";
 import { RoomEditPage } from "@page-room";
 import { Breadcrumb } from "@/components/templates/default-wireframe.types";
 import { useRoute, useRouter } from "vue-router";
-import { RoomUpdateParams } from "@/types/room/Room";
-import { RoomColor } from "@/serverApi/v3";
+import { RoomUpdateParams, RoomColorEnum } from "@/types/room/Room";
 import { RoomForm } from "@feature-room";
 import { nextTick } from "vue";
 import { NOTIFIER_MODULE_KEY } from "@/utils/inject";
@@ -50,7 +49,7 @@ jest.mock<typeof import("@/utils/pageTitle")>("@/utils/pageTitle", () => ({
 
 const roomParams: RoomUpdateParams = {
 	name: "test",
-	color: RoomColor.Blue,
+	color: RoomColorEnum.Blue,
 };
 
 describe("@pages/RoomEdit.page.vue", () => {
@@ -111,13 +110,13 @@ describe("@pages/RoomEdit.page.vue", () => {
 		expect(updateRoom).toHaveBeenCalledWith(roomIdMock, roomParams);
 	});
 
-	it("should navigate to 'rooms-id' with correct room id on save", async () => {
+	it("should navigate to 'room-details' with correct room id on save", async () => {
 		const { roomFormComponent, router } = setup();
 
 		roomFormComponent.vm.$emit("save", roomParams);
 
 		expect(router.push).toHaveBeenCalledWith({
-			name: "rooms-id",
+			name: "room-details",
 			params: { id: roomIdMock },
 		});
 	});
@@ -128,7 +127,7 @@ describe("@pages/RoomEdit.page.vue", () => {
 		roomFormComponent.vm.$emit("cancel", roomParams);
 
 		expect(router.push).toHaveBeenCalledWith({
-			name: "rooms-id",
+			name: "room-details",
 			params: { id: roomIdMock },
 		});
 	});
diff --git a/src/modules/page/room/RoomEdit.page.vue b/src/modules/page/room/RoomEdit.page.vue
index ae1973bd61..899cc5eed1 100644
--- a/src/modules/page/room/RoomEdit.page.vue
+++ b/src/modules/page/room/RoomEdit.page.vue
@@ -56,7 +56,7 @@ const onSave = async (payload: { room: RoomUpdateParams }) => {
 		await updateRoom(route.params.id as string, payload.room);
 
 		router.push({
-			name: "rooms-id",
+			name: "room-details",
 			params: { id: route.params.id as string },
 		});
 	} catch (error: unknown) {
@@ -78,7 +78,7 @@ const isInvalidRequestError = (error: unknown): boolean => {
 
 const onCancel = () => {
 	router.push({
-		name: "rooms-id",
+		name: "room-details",
 		params: { id: route.params.id as string },
 	});
 };
diff --git a/src/modules/page/room/RoomMembers.page.unit.ts b/src/modules/page/room/RoomMembers.page.unit.ts
index fb6712e379..9c32138cd1 100644
--- a/src/modules/page/room/RoomMembers.page.unit.ts
+++ b/src/modules/page/room/RoomMembers.page.unit.ts
@@ -18,7 +18,7 @@ import setupStores from "@@/tests/test-utils/setupStores";
 import { ref } from "vue";
 import { RoleName, RoomDetailsResponse } from "@/serverApi/v3";
 import vueDompurifyHTMLPlugin from "vue-dompurify-html";
-import { roomDetailsFactory } from "@@/tests/test-utils/factory/roomDetailsFactory";
+import { roomFactory } from "@@/tests/test-utils/factory/room";
 import { VBtn, VDialog } from "vuetify/lib/components/index.mjs";
 import { AddMembers, MembersTable } from "@feature-room";
 import { mdiPlus } from "@icons/material";
@@ -55,7 +55,7 @@ describe("RoomMembersPage", () => {
 
 	const buildRoom = () => {
 		const roomMembersSchools = roomMemberSchoolResponseFactory.buildList(3);
-		const room = roomDetailsFactory.build();
+		const room = roomFactory.build();
 		const potentialMembers = roomMemberListFactory.buildList(3);
 
 		mockRoomMemberCalls.schools = ref(roomMembersSchools);
diff --git a/src/modules/page/room/Rooms.page.unit.ts b/src/modules/page/room/Rooms.page.unit.ts
index 17389bbb54..299bb1f453 100644
--- a/src/modules/page/room/Rooms.page.unit.ts
+++ b/src/modules/page/room/Rooms.page.unit.ts
@@ -158,7 +158,7 @@ describe("RoomsPage", () => {
 				importFLow.vm.$emit("success", "newName", "newId");
 
 				expect(router.replace).toHaveBeenCalledWith({
-					name: "rooms-id",
+					name: "room-details",
 					params: { id: "newId" },
 				});
 			});
diff --git a/src/modules/page/room/Rooms.page.vue b/src/modules/page/room/Rooms.page.vue
index 24506c687a..8795b917bf 100644
--- a/src/modules/page/room/Rooms.page.vue
+++ b/src/modules/page/room/Rooms.page.vue
@@ -68,7 +68,7 @@ onMounted(() => {
 
 const onImportSuccess = (newName: string, id: string) => {
 	showImportSuccess(newName);
-	router.replace({ name: "rooms-id", params: { id } });
+	router.replace({ name: "room-details", params: { id } });
 };
 
 const showImportSuccess = (newName: string) => {
diff --git a/src/modules/page/room/index.ts b/src/modules/page/room/index.ts
index 5e2dd79e26..a27b2009f8 100644
--- a/src/modules/page/room/index.ts
+++ b/src/modules/page/room/index.ts
@@ -2,6 +2,7 @@ import RoomsPage from "./Rooms.page.vue";
 import RoomCreatePage from "./RoomCreate.page.vue";
 import RoomEditPage from "./RoomEdit.page.vue";
 import RoomDetailsPage from "./RoomDetails.page.vue";
+import RoomDetailsSwitchPage from "./RoomDetailsSwitch.page.vue";
 import RoomMembersPage from "./RoomMembers.page.vue";
 
 export {
@@ -9,5 +10,6 @@ export {
 	RoomCreatePage,
 	RoomEditPage,
 	RoomDetailsPage,
+	RoomDetailsSwitchPage,
 	RoomMembersPage,
 };
diff --git a/src/modules/ui/board/LineClamp.vue b/src/modules/ui/board/LineClamp.vue
deleted file mode 100644
index 6eb968793a..0000000000
--- a/src/modules/ui/board/LineClamp.vue
+++ /dev/null
@@ -1,65 +0,0 @@
-<template>
-	<div ref="textElement" class="line-clamp">
-		<v-tooltip
-			location="top"
-			origin="auto"
-			transition="fade"
-			:max-width="tooltipWidth"
-			v-if="isOverflowingLongText"
-		>
-			<template v-slot:activator="{ props }">
-				<div v-bind="props" class="text-truncate">
-					<slot />
-				</div>
-			</template>
-			<div class="overflow-hidden base-2">
-				{{ tooltipText }}
-			</div>
-		</v-tooltip>
-		<template v-else>
-			<slot />
-		</template>
-	</div>
-</template>
-
-<script lang="ts">
-import { computed, defineComponent, onMounted, ref } from "vue";
-
-export default defineComponent({
-	name: "LineClamp",
-	setup: () => {
-		const textElement = ref<HTMLDivElement | undefined>(undefined);
-		const isOverflowingLongText = ref<boolean>(false);
-		let tooltipWidth = "320px";
-		const tooltipText = computed<string>(
-			() => textElement.value?.innerText ?? ""
-		);
-
-		onMounted(() => {
-			if (textElement.value) {
-				isOverflowingLongText.value =
-					textElement.value.offsetWidth < textElement.value.scrollWidth;
-				tooltipWidth = `${textElement.value.offsetWidth * 0.8}px`;
-			}
-		});
-
-		return {
-			isOverflowingLongText,
-			textElement,
-			tooltipWidth,
-			tooltipText,
-		};
-	},
-});
-</script>
-
-<style lang="scss" scoped>
-.line-clamp {
-	overflow: hidden;
-	white-space: nowrap;
-}
-
-.overflow-hidden {
-	overflow: hidden;
-}
-</style>
diff --git a/src/modules/ui/board/content-element/ContentElementBar.vue b/src/modules/ui/board/content-element/ContentElementBar.vue
index 26265e9f3d..d2a9c9e162 100644
--- a/src/modules/ui/board/content-element/ContentElementBar.vue
+++ b/src/modules/ui/board/content-element/ContentElementBar.vue
@@ -73,7 +73,7 @@
 
 <script setup lang="ts">
 import { PropType } from "vue";
-import LineClamp from "../LineClamp.vue";
+import { LineClamp } from "@ui-line-clamp";
 import { IconProps } from "vuetify";
 import { hasSlotContent } from "@util-vue";
 
diff --git a/src/modules/ui/layout/sidebar/SidebarSelection.composable.ts b/src/modules/ui/layout/sidebar/SidebarSelection.composable.ts
index 500d81a620..d0b8a2d887 100644
--- a/src/modules/ui/layout/sidebar/SidebarSelection.composable.ts
+++ b/src/modules/ui/layout/sidebar/SidebarSelection.composable.ts
@@ -32,7 +32,7 @@ export const useSidebarSelection = (
 		}
 
 		// RoomDetails, CourseRoomDetails
-		if (route.name === "rooms-id") {
+		if (route.name === "room-details") {
 			if (roomVariant.value === RoomVariant.ROOM) {
 				return item.to === "/rooms";
 			} else if (roomVariant.value === RoomVariant.COURSE_ROOM) {
diff --git a/src/modules/ui/layout/sidebar/SidebarSelection.composable.unit.ts b/src/modules/ui/layout/sidebar/SidebarSelection.composable.unit.ts
index 0da961beb1..a89192778e 100644
--- a/src/modules/ui/layout/sidebar/SidebarSelection.composable.unit.ts
+++ b/src/modules/ui/layout/sidebar/SidebarSelection.composable.unit.ts
@@ -137,7 +137,7 @@ describe("@ui/layout/sidebar/SidebarSelection.composable", () => {
 			const setupRoomDetailsRoute = () => {
 				return setup({
 					path: "/rooms/0000dcfbfb5c7a3f00bf21ab",
-					name: "rooms-id",
+					name: "room-details",
 				});
 			};
 
@@ -173,6 +173,56 @@ describe("@ui/layout/sidebar/SidebarSelection.composable", () => {
 				});
 			});
 		});
+
+		describe("when board details path is matched", () => {
+			const setupBoardDetailsRoute = () => {
+				return setup({
+					path: "/boards/0000dcfbfb5c7a3f00bf21ac",
+					name: "boards-id",
+				});
+			};
+
+			describe("and board context is a room", () => {
+				const setupIsRoom = () => {
+					mockedUseSharedBoardPageInformation.mockReturnValue({
+						createPageInformation: jest.fn(),
+						breadcrumbs: computed(() => []),
+						contextType: computed(() => BoardContextType.Room),
+						pageTitle: computed(() => "page-title"),
+						roomId: computed(() => "room-id"),
+						resetPageInformation: jest.fn(),
+					});
+
+					const { roomVariant } = storeToRefs(useRoomDetailsStore());
+					roomVariant.value = RoomVariant.ROOM;
+
+					return setupBoardDetailsRoute();
+				};
+
+				it("should be active", () => {
+					const { roomsItem } = setupIsRoom();
+					const { isActive } = useSidebarSelection(roomsItem);
+
+					expect(isActive.value).toBe(true);
+				});
+			});
+
+			describe("and board context is something else", () => {
+				const setupIsOther = () => {
+					const { roomVariant } = storeToRefs(useRoomDetailsStore());
+					roomVariant.value = undefined;
+
+					return setupBoardDetailsRoute();
+				};
+
+				it("should not be active", () => {
+					const { roomsItem } = setupIsOther();
+					const { isActive } = useSidebarSelection(roomsItem);
+
+					expect(isActive.value).toBe(false);
+				});
+			});
+		});
 	});
 
 	describe("courses item", () => {
@@ -212,7 +262,7 @@ describe("@ui/layout/sidebar/SidebarSelection.composable", () => {
 			const setupRoomDetailsRoute = () => {
 				return setup({
 					path: "/rooms/0000dcfbfb5c7a3f00bf21ab",
-					name: "rooms-id",
+					name: "room-details",
 				});
 			};
 
@@ -257,7 +307,7 @@ describe("@ui/layout/sidebar/SidebarSelection.composable", () => {
 				});
 			};
 
-			describe("when board context is a course", () => {
+			describe("and board context is a course", () => {
 				const setupCourseContext = () => {
 					mockedUseSharedBoardPageInformation.mockReturnValue({
 						createPageInformation: jest.fn(),
@@ -268,6 +318,9 @@ describe("@ui/layout/sidebar/SidebarSelection.composable", () => {
 						resetPageInformation: jest.fn(),
 					});
 
+					const { roomVariant } = storeToRefs(useRoomDetailsStore());
+					roomVariant.value = RoomVariant.COURSE_ROOM;
+
 					return setupBoardDetailsRoute();
 				};
 
@@ -279,7 +332,7 @@ describe("@ui/layout/sidebar/SidebarSelection.composable", () => {
 				});
 			});
 
-			describe("when board context is a user", () => {
+			describe("and board context is a user", () => {
 				const setupUserContext = () => {
 					mockedUseSharedBoardPageInformation.mockReturnValue({
 						createPageInformation: jest.fn(),
@@ -290,6 +343,9 @@ describe("@ui/layout/sidebar/SidebarSelection.composable", () => {
 						resetPageInformation: jest.fn(),
 					});
 
+					const { roomVariant } = storeToRefs(useRoomDetailsStore());
+					roomVariant.value = undefined;
+
 					return setupBoardDetailsRoute();
 				};
 
diff --git a/src/modules/ui/board/LineClamp.unit.ts b/src/modules/ui/line-clamp/LineClamp.unit.ts
similarity index 100%
rename from src/modules/ui/board/LineClamp.unit.ts
rename to src/modules/ui/line-clamp/LineClamp.unit.ts
diff --git a/src/modules/ui/line-clamp/LineClamp.vue b/src/modules/ui/line-clamp/LineClamp.vue
new file mode 100644
index 0000000000..89e2bea63d
--- /dev/null
+++ b/src/modules/ui/line-clamp/LineClamp.vue
@@ -0,0 +1,51 @@
+<template>
+	<div ref="textElement" class="line-clamp">
+		<v-tooltip
+			location="top"
+			origin="auto"
+			transition="fade"
+			:max-width="tooltipWidth"
+			v-if="isOverflowingLongText"
+		>
+			<template v-slot:activator="{ props }">
+				<div v-bind="props" class="text-truncate">
+					<slot />
+				</div>
+			</template>
+			<div class="overflow-hidden base-2">
+				{{ tooltipText }}
+			</div>
+		</v-tooltip>
+		<template v-else>
+			<slot />
+		</template>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { computed, onMounted, ref } from "vue";
+
+const textElement = ref<HTMLDivElement | undefined>(undefined);
+const isOverflowingLongText = ref<boolean>(false);
+let tooltipWidth = "320px";
+const tooltipText = computed<string>(() => textElement.value?.innerText ?? "");
+
+onMounted(() => {
+	if (textElement.value) {
+		isOverflowingLongText.value =
+			textElement.value.offsetWidth < textElement.value.scrollWidth;
+		tooltipWidth = `${textElement.value.offsetWidth * 0.8}px`;
+	}
+});
+</script>
+
+<style lang="scss" scoped>
+.line-clamp {
+	overflow: hidden;
+	white-space: nowrap;
+}
+
+.overflow-hidden {
+	overflow: hidden;
+}
+</style>
diff --git a/src/modules/ui/line-clamp/index.ts b/src/modules/ui/line-clamp/index.ts
new file mode 100644
index 0000000000..ccd8bc30f8
--- /dev/null
+++ b/src/modules/ui/line-clamp/index.ts
@@ -0,0 +1,3 @@
+import LineClamp from "./LineClamp.vue";
+
+export { LineClamp };
diff --git a/src/pages/course-rooms/CourseRoomOverview.page.vue b/src/pages/course-rooms/CourseRoomOverview.page.vue
index 41c734e2d2..c4f5470028 100644
--- a/src/pages/course-rooms/CourseRoomOverview.page.vue
+++ b/src/pages/course-rooms/CourseRoomOverview.page.vue
@@ -388,7 +388,7 @@ export default defineComponent({
 		onImportSuccess(name, id) {
 			this.showImportSuccess(name);
 			if (id) {
-				this.$router.replace({ name: "rooms-id", params: { id } });
+				this.$router.replace({ name: "room-details", params: { id } });
 			} else {
 				this.$router.replace({ name: "course-room-overview" });
 				courseRoomListModule.fetch();
diff --git a/src/router/routes.ts b/src/router/routes.ts
index ce89422cf8..8bf54b687f 100644
--- a/src/router/routes.ts
+++ b/src/router/routes.ts
@@ -262,8 +262,8 @@ export const routes: Readonly<RouteRecordRaw>[] = [
 	},
 	{
 		path: `/rooms/:id(${REGEX_ID})`,
-		component: async () => (await import("@page-room")).RoomDetailsPage,
-		name: "rooms-id",
+		component: async () => (await import("@page-room")).RoomDetailsSwitchPage,
+		name: "room-details",
 	},
 	{
 		path: `/rooms/:id(${REGEX_ID})/edit`,
diff --git a/src/styles/settings.scss b/src/styles/settings.scss
index c60662aba6..f2e599b948 100644
--- a/src/styles/settings.scss
+++ b/src/styles/settings.scss
@@ -48,6 +48,7 @@
 
   // card
   $card-text-letter-spacing: normal,
+  $card-subtitle-opacity: 1,
 
   // list
   $list-item-icon-margin-start: 8px,
diff --git a/src/styles/utility/_body.scss b/src/styles/utility/_body.scss
index ddc078f844..f5d25c0034 100644
--- a/src/styles/utility/_body.scss
+++ b/src/styles/utility/_body.scss
@@ -5,10 +5,6 @@ body.is-noscroll {
 	overflow-y: hidden;
 }
 
-.d-flex {
-	display: flex;
-}
-
 textarea.v-field__input {
 	height: var(--text-base-size);
 }
diff --git a/src/types/room/Room.ts b/src/types/room/Room.ts
index 71cef7d891..aecaee6bb4 100644
--- a/src/types/room/Room.ts
+++ b/src/types/room/Room.ts
@@ -4,6 +4,7 @@ import {
 	RoomDetailsResponse,
 	RoomItemResponse,
 	UpdateRoomBodyParams,
+	RoomColor as RoomColorEnum,
 } from "@/serverApi/v3";
 
 export type RoomItem = RoomItemResponse;
@@ -12,3 +13,5 @@ export type RoomBoardItem = RoomBoardItemResponse;
 
 export type RoomCreateParams = CreateRoomBodyParams;
 export type RoomUpdateParams = UpdateRoomBodyParams;
+
+export { RoomColorEnum };
diff --git a/tests/test-utils/factory/room/index.ts b/tests/test-utils/factory/room/index.ts
index 7e8a4242bc..441a07a356 100644
--- a/tests/test-utils/factory/room/index.ts
+++ b/tests/test-utils/factory/room/index.ts
@@ -1,2 +1,3 @@
 export * from "./roomMembersFactory";
 export * from "./roomBoardTileFactory";
+export * from "./roomFactory";
diff --git a/tests/test-utils/factory/room/roomFactory.ts b/tests/test-utils/factory/room/roomFactory.ts
new file mode 100644
index 0000000000..19f41ab1f6
--- /dev/null
+++ b/tests/test-utils/factory/room/roomFactory.ts
@@ -0,0 +1,14 @@
+import { Factory } from "fishery";
+import { RoomDetails, RoomColorEnum } from "@/types/room/Room";
+
+export const roomFactory = Factory.define<RoomDetails>(({ sequence }) => ({
+	id: `room${sequence}`,
+	name: `room #${sequence}`,
+	color: RoomColorEnum.BlueGrey,
+	schoolId: `school${sequence}`,
+	startDate: new Date().toISOString(),
+	endDate: new Date().toISOString(),
+	permissions: [],
+	createdAt: new Date().toISOString(),
+	updatedAt: new Date().toISOString(),
+}));
diff --git a/tests/test-utils/factory/roomDetailsFactory.ts b/tests/test-utils/factory/roomDetailsFactory.ts
deleted file mode 100644
index fe229d4a0e..0000000000
--- a/tests/test-utils/factory/roomDetailsFactory.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import { Factory } from "fishery";
-import { RoomDetails } from "@/types/room/Room";
-import { RoomColor } from "@/serverApi/v3";
-
-export const roomDetailsFactory = Factory.define<RoomDetails>(
-	({ sequence }) => ({
-		id: `room${sequence}`,
-		name: `room #${sequence}`,
-		color: RoomColor.BlueGrey,
-		schoolId: "6749dd4e657d98af622e370c",
-		startDate: new Date().toISOString(),
-		endDate: new Date().toISOString(),
-		permissions: [],
-		createdAt: new Date().toISOString(),
-		updatedAt: new Date().toISOString(),
-	})
-);
diff --git a/tsconfig.json b/tsconfig.json
index 10a4cc6a45..acf375518c 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -64,6 +64,7 @@
 			"@ui-kebab-menu": ["src/modules/ui/kebab-menu"],
 			"@ui-layout": ["src/modules/ui/layout"],
 			"@ui-light-box": ["src/modules/ui/light-box"],
+			"@ui-line-clamp": ["src/modules/ui/line-clamp"],
 			"@ui-preview-image": ["src/modules/ui/preview-image"],
 			"@ui-room-details": ["src/modules/ui/room-details"],
 			"@ui-skip-link": ["src/modules/ui/skip-link"],