diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
index 3eab6201b6..5c17a1e424 100644
--- a/.github/workflows/test.yml
+++ b/.github/workflows/test.yml
@@ -26,8 +26,12 @@ jobs:
         run: npm run test:unit:ci
         env:
           NODE_OPTIONS: "--unhandled-rejections=warn"
+      - uses: actions/setup-java@v3
+        with:
+          distribution: 'temurin'
+          java-version: '17'
       - name: SonarCloud upload coverage
-        uses: SonarSource/sonarcloud-github-action@v1.9
+        uses: SonarSource/sonarcloud-github-action@v2.0.2
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
           SONAR_TOKEN: ${{ secrets.SONARCLOUD_TOKEN }}
diff --git a/src/components/administration/AdminMigrationSection.vue b/src/components/administration/AdminMigrationSection.vue
index 737c31f348..cffec9e685 100644
--- a/src/components/administration/AdminMigrationSection.vue
+++ b/src/components/administration/AdminMigrationSection.vue
@@ -1,8 +1,5 @@
 <template>
 	<div>
-		<h2 class="text-h4 mb-10">
-			{{ t("components.administration.adminMigrationSection.headers") }}
-		</h2>
 		<div v-if="!isGracePeriodExpired" data-testId="migration-control-section">
 			<RenderHTML
 				data-testid="text-description"
@@ -14,32 +11,36 @@
 				component="p"
 			/>
 			<div v-if="isStartButtonVisible">
-				<v-alert light prominent text type="info">
-					<RenderHTML
-						data-testid="migration-info-text"
-						:html="
-							t('components.administration.adminMigrationSection.infoText')
-						"
-						component="span"
-					/>
+				<v-alert light text type="info">
+					<div class="alert-text">
+						<RenderHTML
+							data-testid="migration-info-text"
+							:html="
+								t('components.administration.adminMigrationSection.infoText')
+							"
+							component="span"
+						/>
+					</div>
 				</v-alert>
 			</div>
 			<div v-else-if="isMigrationActive">
-				<v-alert light prominent text type="info">
-					<RenderHTML
-						data-testid="migration-active-status"
-						:html="
-							t(
-								'components.administration.adminMigrationSection.migrationActive'
-							)
-						"
-						component="span"
-					/>
+				<v-alert light text type="info">
+					<div class="alert-text">
+						<RenderHTML
+							data-testid="migration-active-status"
+							:html="
+								t(
+									'components.administration.adminMigrationSection.migrationActive'
+								)
+							"
+							component="span"
+						/>
+					</div>
 				</v-alert>
 			</div>
 			<v-btn
 				v-if="isStartButtonVisible"
-				class="my-5 button-start"
+				class="my-4 button-start"
 				color="primary"
 				depressed
 				:disabled="!officialSchoolNumber"
@@ -54,7 +55,7 @@
 			</v-btn>
 			<v-btn
 				v-if="isEndButtonVisible"
-				class="my-5 button-end"
+				class="my-4 button-end"
 				color="primary"
 				depressed
 				:disabled="!oauthMigration.startedAt"
@@ -161,7 +162,7 @@
 
 <script lang="ts">
 import { MigrationBody } from "@/serverApi/v3";
-import { OauthMigration, School } from "@/store/types/schools";
+import { School } from "@/store/types/schools";
 import {
 	ENV_CONFIG_MODULE_KEY,
 	injectStrict,
@@ -364,3 +365,10 @@ export default defineComponent({
 	},
 });
 </script>
+
+<style lang="scss" scoped>
+.alert-text {
+	color: var(--v-black-base) !important;
+	line-height: var(--line-height-lg) !important;
+}
+</style>
diff --git a/src/components/administration/ExternalToolSection.unit.ts b/src/components/administration/ExternalToolSection.unit.ts
index e2fb4f8d9e..9bb7f44a28 100644
--- a/src/components/administration/ExternalToolSection.unit.ts
+++ b/src/components/administration/ExternalToolSection.unit.ts
@@ -82,26 +82,6 @@ describe("ExternalToolSection", () => {
 		});
 	});
 
-	describe("headers is called", () => {
-		describe("when table is rendered", () => {
-			it("should display dataTableHeaders in v-data-table", () => {
-				const { wrapper } = setup();
-
-				const vueWrapperArray = wrapper
-					.find(".v-data-table-header")
-					.findAll("th");
-
-				expect(vueWrapperArray.at(0).find("span").text()).toEqual(
-					"common.labels.name"
-				);
-				expect(vueWrapperArray.at(1).find("span").text()).toEqual(
-					"components.administration.externalToolsSection.table.header.status"
-				);
-				expect(vueWrapperArray.at(2).find("span").text()).toEqual("");
-			});
-		});
-	});
-
 	describe("items is called", () => {
 		const setupItems = () => {
 			const firstToolName = "Test";
@@ -136,6 +116,24 @@ describe("ExternalToolSection", () => {
 			};
 		};
 
+		describe("when table is rendered", () => {
+			it("should display dataTableHeaders in v-data-table", () => {
+				const { wrapper } = setupItems();
+
+				const vueWrapperArray = wrapper
+					.find(".v-data-table-header")
+					.findAll("th");
+
+				expect(vueWrapperArray.at(0).find("span").text()).toEqual(
+					"common.labels.name"
+				);
+				expect(vueWrapperArray.at(1).find("span").text()).toEqual(
+					"components.administration.externalToolsSection.table.header.status"
+				);
+				expect(vueWrapperArray.at(2).find("span").text()).toEqual("");
+			});
+		});
+
 		describe("when external tools were loaded", () => {
 			it("names should be rendered in the datatable", () => {
 				const { wrapper, firstToolName, secondToolName } = setupItems();
@@ -209,7 +207,7 @@ describe("ExternalToolSection", () => {
 
 						await deleteButton.trigger("click");
 
-						expect(wrapper.find("p").text()).toContain(firstToolName);
+						expect(wrapper.findAll("p").at(1).text()).toContain(firstToolName);
 					});
 				});
 
diff --git a/src/components/administration/ExternalToolSection.vue b/src/components/administration/ExternalToolSection.vue
index 0c68fd9f75..7395b1dd23 100644
--- a/src/components/administration/ExternalToolSection.vue
+++ b/src/components/administration/ExternalToolSection.vue
@@ -1,9 +1,10 @@
 <template>
 	<div>
-		<h2 class="text-h4 mb-10">
-			{{ t("components.administration.externalToolsSection.header") }}
-		</h2>
+		<p class="mb-6">
+			{{ t("components.administration.externalToolsSection.info") }}
+		</p>
 		<v-data-table
+			v-if="items.length"
 			:disable-pagination="true"
 			:hide-default-footer="true"
 			:items="items"
@@ -36,7 +37,7 @@
 			</template>
 		</v-data-table>
 		<v-btn
-			class="my-5 button-save"
+			class="mt-8 mb-4 button-save float-right"
 			color="primary"
 			depressed
 			:to="{ name: 'administration-tool-config-overview' }"
diff --git a/src/components/data-group/GroupApi.composable.ts b/src/components/data-group/GroupApi.composable.ts
new file mode 100644
index 0000000000..a3e0f0ff58
--- /dev/null
+++ b/src/components/data-group/GroupApi.composable.ts
@@ -0,0 +1,22 @@
+import { $axios } from "@/utils/api";
+import { GroupApiFactory, GroupResponse } from "@/serverApi/v3";
+import { AxiosResponse } from "axios";
+import { GroupMapper } from "./GroupMapper";
+import { Group } from "@data-group";
+
+export const useGroupApi = () => {
+	const groupApi = GroupApiFactory(undefined, "/v3", $axios);
+
+	const getGroup = async (groupId: string): Promise<Group> => {
+		const response: AxiosResponse<GroupResponse> =
+			await groupApi.groupControllerGetGroup(groupId);
+
+		const group: Group = GroupMapper.mapToGroup(response.data);
+
+		return group;
+	};
+
+	return {
+		getGroup,
+	};
+};
diff --git a/src/components/data-group/GroupApi.composable.unit.ts b/src/components/data-group/GroupApi.composable.unit.ts
new file mode 100644
index 0000000000..24652ab740
--- /dev/null
+++ b/src/components/data-group/GroupApi.composable.unit.ts
@@ -0,0 +1,64 @@
+import * as serverApi from "@/serverApi/v3/api";
+import { GroupResponse } from "@/serverApi/v3/api";
+import { mockApiResponse } from "@@/tests/test-utils";
+import { createMock, DeepMocked } from "@golevelup/ts-jest";
+import { groupResponseFactory } from "@@/tests/test-utils/factory/groupResponseFactory";
+import { Group, GroupType, GroupUserRole, useGroupApi } from "@data-group";
+
+describe("GroupApi.composable", () => {
+	let groupApi: DeepMocked<serverApi.GroupApiInterface>;
+
+	beforeEach(() => {
+		groupApi = createMock<serverApi.GroupApiInterface>();
+
+		jest.spyOn(serverApi, "GroupApiFactory").mockReturnValue(groupApi);
+	});
+
+	afterEach(() => {
+		jest.clearAllMocks();
+	});
+
+	describe("getGroup", () => {
+		const setup = () => {
+			const group: GroupResponse = groupResponseFactory.build();
+
+			groupApi.groupControllerGetGroup.mockResolvedValue(
+				mockApiResponse({ data: group })
+			);
+
+			return {
+				group,
+			};
+		};
+
+		it("should call the api for groups", async () => {
+			setup();
+
+			await useGroupApi().getGroup("groupId");
+
+			expect(groupApi.groupControllerGetGroup).toHaveBeenCalledWith("groupId");
+		});
+
+		it("should return a group", async () => {
+			const { group } = setup();
+
+			const result: Group = await useGroupApi().getGroup("groupId");
+
+			expect(result).toEqual<Group>({
+				id: group.id,
+				name: group.name,
+				type: GroupType.Class,
+				organizationId: group.organizationId,
+				users: [
+					{
+						id: group.users[0].id,
+						firstName: group.users[0].firstName,
+						lastName: group.users[0].lastName,
+						role: GroupUserRole.Student,
+					},
+				],
+				externalSource: group.externalSource,
+			});
+		});
+	});
+});
diff --git a/src/components/data-group/GroupMapper.ts b/src/components/data-group/GroupMapper.ts
new file mode 100644
index 0000000000..2c929534bf
--- /dev/null
+++ b/src/components/data-group/GroupMapper.ts
@@ -0,0 +1,62 @@
+import {
+	GroupResponse,
+	GroupResponseTypeEnum,
+	GroupUserResponse,
+	GroupUserResponseRoleEnum,
+} from "@/serverApi/v3";
+import { Group, GroupType, GroupUser, GroupUserRole } from "./types";
+
+export const GroupTypeMapping: Record<GroupResponseTypeEnum, GroupType> = {
+	[GroupResponseTypeEnum.Class]: GroupType.Class,
+};
+
+export const GroupUserRoleMapping: Partial<
+	Record<GroupUserResponseRoleEnum, GroupUserRole>
+> = {
+	[GroupUserResponseRoleEnum.Administrator]: GroupUserRole.Administrator,
+	[GroupUserResponseRoleEnum.Student]: GroupUserRole.Student,
+	[GroupUserResponseRoleEnum.Teacher]: GroupUserRole.Teacher,
+};
+
+export const GroupUserRoleNameTranslationMapping: Record<
+	GroupUserRole,
+	string
+> = {
+	[GroupUserRole.Administrator]: "common.roleName.administrator",
+	[GroupUserRole.Student]: "common.roleName.student",
+	[GroupUserRole.Teacher]: "common.roleName.teacher",
+	[GroupUserRole.Unknown]: "common.labels.unknown",
+};
+
+export class GroupMapper {
+	static mapToGroup(groupResponse: GroupResponse): Group {
+		return {
+			id: groupResponse.id,
+			name: groupResponse.name,
+			type: GroupTypeMapping[groupResponse.type],
+			users: groupResponse.users.map((user) =>
+				GroupMapper.mapToGroupUser(user)
+			),
+			externalSource: groupResponse.externalSource,
+			organizationId: groupResponse.organizationId,
+		};
+	}
+
+	private static mapToGroupUser(
+		groupUserResponse: GroupUserResponse
+	): GroupUser {
+		return {
+			id: groupUserResponse.id,
+			firstName: groupUserResponse.firstName,
+			lastName: groupUserResponse.lastName,
+			role:
+				GroupUserRoleMapping[groupUserResponse.role] ?? GroupUserRole.Unknown,
+		};
+	}
+
+	static getTranslationKey(role: GroupUserRole): string {
+		const translationKey: string = GroupUserRoleNameTranslationMapping[role];
+
+		return translationKey;
+	}
+}
diff --git a/src/components/data-group/GroupState.composable.ts b/src/components/data-group/GroupState.composable.ts
new file mode 100644
index 0000000000..5e038297ba
--- /dev/null
+++ b/src/components/data-group/GroupState.composable.ts
@@ -0,0 +1,34 @@
+import { useErrorHandler } from "@/components/error-handling/ErrorHandler.composable";
+import { ref, Ref } from "vue";
+import { Group, useGroupApi } from "@data-group";
+
+export const useGroupState = () => {
+	const { handleError } = useErrorHandler();
+	const { getGroup } = useGroupApi();
+
+	const isLoading: Ref<boolean> = ref(false);
+	const group: Ref<Group | undefined> = ref();
+
+	const fetchGroup = async (groupId: string): Promise<void> => {
+		isLoading.value = true;
+
+		try {
+			const fetchedGroup: Group = await getGroup(groupId);
+			group.value = fetchedGroup;
+		} catch (error) {
+			// TODO: fix this
+			handleError(error, {
+				404: undefined,
+				500: undefined,
+			});
+		}
+
+		isLoading.value = false;
+	};
+
+	return {
+		isLoading,
+		group,
+		fetchGroup,
+	};
+};
diff --git a/src/components/data-group/GroupState.composable.unit.ts b/src/components/data-group/GroupState.composable.unit.ts
new file mode 100644
index 0000000000..4f052e516a
--- /dev/null
+++ b/src/components/data-group/GroupState.composable.unit.ts
@@ -0,0 +1,85 @@
+import { createMock, DeepMocked } from "@golevelup/ts-jest";
+import { useErrorHandler } from "../error-handling/ErrorHandler.composable";
+import { Group, useGroupApi, useGroupState } from "./index";
+import { groupFactory } from "@@/tests/test-utils/factory/groupFactory";
+
+jest.mock("@data-group/GroupApi.composable");
+jest.mock("@/components/error-handling/ErrorHandler.composable");
+
+describe("GroupState.composable", () => {
+	let useGroupApiMock: DeepMocked<ReturnType<typeof useGroupApi>>;
+	let useErrorHandlerMock: DeepMocked<ReturnType<typeof useErrorHandler>>;
+
+	beforeEach(() => {
+		useGroupApiMock = createMock<ReturnType<typeof useGroupApi>>();
+		useErrorHandlerMock = createMock<ReturnType<typeof useErrorHandler>>();
+
+		jest.mocked(useGroupApi).mockReturnValue(useGroupApiMock);
+		jest.mocked(useErrorHandler).mockReturnValue(useErrorHandlerMock);
+	});
+
+	afterEach(() => {
+		jest.clearAllMocks();
+	});
+
+	describe("when no data is loaded", () => {
+		it("should not have data", async () => {
+			const { group } = useGroupState();
+
+			expect(group.value).toBeUndefined();
+		});
+	});
+
+	describe("when data is loaded", () => {
+		const setup = () => {
+			const groupMock: Group = groupFactory.build();
+
+			useGroupApiMock.getGroup.mockResolvedValue(groupMock);
+
+			return {
+				groupMock,
+				...useGroupState(),
+			};
+		};
+
+		it("should call the api to get a group", async () => {
+			const { fetchGroup } = setup();
+
+			await fetchGroup("groupId");
+
+			expect(useGroupApiMock.getGroup).toHaveBeenCalledWith("groupId");
+		});
+
+		it("should set the group in the state", async () => {
+			const { fetchGroup, group, groupMock } = setup();
+
+			await fetchGroup("groupId");
+
+			expect(group.value).toEqual(groupMock);
+		});
+	});
+
+	describe("when an error occurs during loading", () => {
+		const setup = () => {
+			const error = new Error("unable to load");
+
+			useGroupApiMock.getGroup.mockRejectedValue(error);
+
+			return {
+				error,
+				...useGroupState(),
+			};
+		};
+
+		it("should handle the error", async () => {
+			const { fetchGroup, error } = setup();
+
+			await fetchGroup("groupId");
+
+			expect(useErrorHandlerMock.handleError).toHaveBeenCalledWith(error, {
+				404: undefined,
+				500: undefined,
+			});
+		});
+	});
+});
diff --git a/src/components/data-group/index.ts b/src/components/data-group/index.ts
new file mode 100644
index 0000000000..704edeb582
--- /dev/null
+++ b/src/components/data-group/index.ts
@@ -0,0 +1,4 @@
+export * from "./types";
+export * from "./GroupState.composable";
+export * from "./GroupApi.composable";
+export * from "./GroupMapper";
diff --git a/src/components/data-group/types/ExternalSource.ts b/src/components/data-group/types/ExternalSource.ts
new file mode 100644
index 0000000000..d1d81fe202
--- /dev/null
+++ b/src/components/data-group/types/ExternalSource.ts
@@ -0,0 +1,5 @@
+export type ExternalSource = {
+	externalId: string;
+
+	systemId: string;
+};
diff --git a/src/components/data-group/types/Group.ts b/src/components/data-group/types/Group.ts
new file mode 100644
index 0000000000..cdef29af8e
--- /dev/null
+++ b/src/components/data-group/types/Group.ts
@@ -0,0 +1,17 @@
+import { ExternalSourceResponse } from "@/serverApi/v3";
+import { GroupType } from "./GroupType";
+import { GroupUser } from "./GroupUser";
+
+export type Group = {
+	id: string;
+
+	name: string;
+
+	type: GroupType;
+
+	users: GroupUser[];
+
+	externalSource?: ExternalSourceResponse;
+
+	organizationId?: string;
+};
diff --git a/src/components/data-group/types/GroupType.ts b/src/components/data-group/types/GroupType.ts
new file mode 100644
index 0000000000..75cb9dc123
--- /dev/null
+++ b/src/components/data-group/types/GroupType.ts
@@ -0,0 +1,3 @@
+export enum GroupType {
+	Class = "class",
+}
diff --git a/src/components/data-group/types/GroupUser.ts b/src/components/data-group/types/GroupUser.ts
new file mode 100644
index 0000000000..4cf1307044
--- /dev/null
+++ b/src/components/data-group/types/GroupUser.ts
@@ -0,0 +1,11 @@
+import { GroupUserRole } from "./GroupUserRole";
+
+export type GroupUser = {
+	id: string;
+
+	firstName: string;
+
+	lastName: string;
+
+	role: GroupUserRole;
+};
diff --git a/src/components/data-group/types/GroupUserRole.ts b/src/components/data-group/types/GroupUserRole.ts
new file mode 100644
index 0000000000..b8d491d30c
--- /dev/null
+++ b/src/components/data-group/types/GroupUserRole.ts
@@ -0,0 +1,6 @@
+export enum GroupUserRole {
+	Administrator = "administrator",
+	Student = "student",
+	Teacher = "teacher",
+	Unknown = "unknown",
+}
diff --git a/src/components/data-group/types/index.ts b/src/components/data-group/types/index.ts
new file mode 100644
index 0000000000..c151275d4c
--- /dev/null
+++ b/src/components/data-group/types/index.ts
@@ -0,0 +1,5 @@
+export * from "./Group";
+export * from "./GroupType";
+export * from "./GroupUser";
+export * from "./GroupUserRole";
+export * from "./ExternalSource";
diff --git a/src/components/data-system/SystemApi.composable.ts b/src/components/data-system/SystemApi.composable.ts
new file mode 100644
index 0000000000..b67365e102
--- /dev/null
+++ b/src/components/data-system/SystemApi.composable.ts
@@ -0,0 +1,33 @@
+import { PublicSystemResponse, SystemsApiFactory } from "@/serverApi/v3";
+import { $axios } from "@/utils/api";
+import { AxiosResponse } from "axios";
+import { System } from "./type";
+import { useErrorHandler } from "@/components/error-handling/ErrorHandler.composable";
+
+export const useSystemApi = () => {
+	const { handleError } = useErrorHandler();
+	const systemApi = SystemsApiFactory(undefined, "/v3", $axios);
+
+	const getSystem = async (systemId: string): Promise<System | undefined> => {
+		try {
+			const response: AxiosResponse<PublicSystemResponse> =
+				await systemApi.systemControllerGetSystem(systemId);
+
+			const system: System = {
+				id: response.data.id,
+				displayName: response.data.displayName ?? "",
+			};
+
+			return system;
+		} catch (error) {
+			handleError(error, {
+				404: undefined,
+				500: undefined,
+			});
+		}
+	};
+
+	return {
+		getSystem,
+	};
+};
diff --git a/src/components/data-system/SystemApi.composable.unit.ts b/src/components/data-system/SystemApi.composable.unit.ts
new file mode 100644
index 0000000000..eb9a7357e2
--- /dev/null
+++ b/src/components/data-system/SystemApi.composable.unit.ts
@@ -0,0 +1,87 @@
+import * as serverApi from "@/serverApi/v3/api";
+import { PublicSystemResponse, SystemsApiInterface } from "@/serverApi/v3/api";
+import { createMock, DeepMocked } from "@golevelup/ts-jest";
+import { mockApiResponse } from "@@/tests/test-utils";
+import { useSystemApi } from "@data-system";
+import { useErrorHandler } from "@/components/error-handling/ErrorHandler.composable";
+
+jest.mock("@/components/error-handling/ErrorHandler.composable");
+
+describe("SystemApi.composable", () => {
+	let systemApi: DeepMocked<SystemsApiInterface>;
+	let useErrorHandlerMock: DeepMocked<ReturnType<typeof useErrorHandler>>;
+
+	beforeEach(() => {
+		systemApi = createMock<SystemsApiInterface>();
+		useErrorHandlerMock = createMock<ReturnType<typeof useErrorHandler>>();
+
+		jest.spyOn(serverApi, "SystemsApiFactory").mockReturnValue(systemApi);
+		jest.mocked(useErrorHandler).mockReturnValue(useErrorHandlerMock);
+	});
+
+	afterEach(() => {
+		jest.clearAllMocks();
+	});
+
+	describe("getSystem", () => {
+		const setup = () => {
+			const system: PublicSystemResponse = {
+				id: "systemId",
+				displayName: "displayName",
+			};
+
+			systemApi.systemControllerGetSystem.mockResolvedValue(
+				mockApiResponse({ data: system })
+			);
+
+			return {
+				system,
+			};
+		};
+
+		describe("when the api call succeeds", () => {
+			it("should call the api for systems", async () => {
+				setup();
+
+				await useSystemApi().getSystem("systemId");
+
+				expect(systemApi.systemControllerGetSystem).toHaveBeenCalledWith(
+					"systemId"
+				);
+			});
+
+			it("should return a system", async () => {
+				const { system } = setup();
+
+				const result = await useSystemApi().getSystem("systemId");
+
+				expect(result).toEqual({
+					id: system.id,
+					displayName: system.displayName,
+				});
+			});
+		});
+
+		describe("when the api call fails", () => {
+			const setup = () => {
+				const error = new Error();
+				systemApi.systemControllerGetSystem.mockRejectedValue(error);
+
+				return {
+					error,
+				};
+			};
+
+			it("should call the error handler", async () => {
+				const { error } = setup();
+
+				await useSystemApi().getSystem("systemId");
+
+				expect(useErrorHandlerMock.handleError).toHaveBeenCalledWith(error, {
+					404: undefined,
+					500: undefined,
+				});
+			});
+		});
+	});
+});
diff --git a/src/components/data-system/index.ts b/src/components/data-system/index.ts
new file mode 100644
index 0000000000..f76af4c02e
--- /dev/null
+++ b/src/components/data-system/index.ts
@@ -0,0 +1,2 @@
+export * from "./type";
+export * from "./SystemApi.composable";
diff --git a/src/components/data-system/type/System.ts b/src/components/data-system/type/System.ts
new file mode 100644
index 0000000000..4db6241e1d
--- /dev/null
+++ b/src/components/data-system/type/System.ts
@@ -0,0 +1,5 @@
+export interface System {
+	id: string;
+
+	displayName: string;
+}
diff --git a/src/components/data-system/type/index.ts b/src/components/data-system/type/index.ts
new file mode 100644
index 0000000000..bfc398b708
--- /dev/null
+++ b/src/components/data-system/type/index.ts
@@ -0,0 +1 @@
+export * from "./System";
diff --git a/src/components/feature-board-file-element/FileContentElement.unit.ts b/src/components/feature-board-file-element/FileContentElement.unit.ts
index 10165a32ab..cd5d7d7b02 100644
--- a/src/components/feature-board-file-element/FileContentElement.unit.ts
+++ b/src/components/feature-board-file-element/FileContentElement.unit.ts
@@ -109,7 +109,7 @@ describe("FileContentElement", () => {
 				await wrapper.vm.$nextTick();
 
 				const fileUpload = wrapper.findComponent(FileUpload);
-				expect(fileUpload.exists()).toBe(false);
+				expect(fileUpload.exists()).toBe(true);
 			});
 
 			it("should not render slot menu component", async () => {
@@ -388,6 +388,7 @@ describe("FileContentElement", () => {
 					const props = wrapper.findComponent(FileUpload).props();
 
 					expect(props.elementId).toEqual(element.id);
+					expect(props.isEditMode).toBe(true);
 				});
 
 				describe("when FileUpload emits upload:file event", () => {
diff --git a/src/components/feature-board-file-element/FileContentElement.vue b/src/components/feature-board-file-element/FileContentElement.vue
index 7fc570029d..3a9b9e8a58 100644
--- a/src/components/feature-board-file-element/FileContentElement.vue
+++ b/src/components/feature-board-file-element/FileContentElement.vue
@@ -27,8 +27,9 @@
 			</BoardMenu>
 		</FileContent>
 		<FileUpload
-			v-else-if="isEditMode"
+			v-else
 			:elementId="element.id"
+			:isEditMode="isEditMode"
 			@upload:file="onUploadFile"
 		>
 			<BoardMenu scope="element">
diff --git a/src/components/feature-board-file-element/content/alert/useFileAlerts.composable.ts b/src/components/feature-board-file-element/content/alert/useFileAlerts.composable.ts
index 361eb94df5..008d7c21f6 100644
--- a/src/components/feature-board-file-element/content/alert/useFileAlerts.composable.ts
+++ b/src/components/feature-board-file-element/content/alert/useFileAlerts.composable.ts
@@ -33,7 +33,6 @@ export const useFileAlerts = (
 function mapPreviewStatusToFileAlert(
 	previewStatus?: PreviewStatus
 ): FileAlert | undefined {
-	console.log(previewStatus);
 	if (previewStatus === PreviewStatus.AWAITING_SCAN_STATUS)
 		return FileAlert.AWAITING_SCAN_STATUS;
 	if (previewStatus === PreviewStatus.PREVIEW_NOT_POSSIBLE_SCAN_STATUS_BLOCKED)
diff --git a/src/components/feature-board-file-element/content/display/FileDisplay.unit.ts b/src/components/feature-board-file-element/content/display/FileDisplay.unit.ts
index 3e8e6bfb04..9c5f01754a 100644
--- a/src/components/feature-board-file-element/content/display/FileDisplay.unit.ts
+++ b/src/components/feature-board-file-element/content/display/FileDisplay.unit.ts
@@ -1,4 +1,8 @@
-import { isAudioMimeType, isVideoMimeType } from "@/utils/fileHelper";
+import {
+	isAudioMimeType,
+	isPdfMimeType,
+	isVideoMimeType,
+} from "@/utils/fileHelper";
 import { fileElementResponseFactory } from "@@/tests/test-utils";
 import createComponentMocks from "@@/tests/test-utils/componentMocks";
 import { shallowMount } from "@vue/test-utils";
@@ -11,6 +15,7 @@ import VideoDisplay from "./video-display/VideoDisplay.vue";
 jest.mock("@/utils/fileHelper");
 const isVideoMimeTypeMock = jest.mocked(isVideoMimeType);
 const isAudioMimeTypeMock = jest.mocked(isAudioMimeType);
+const isPdfMimeTypeMock = jest.mocked(isPdfMimeType);
 
 describe("FileDisplay", () => {
 	describe("when previewUrl is defined", () => {
@@ -260,7 +265,7 @@ describe("FileDisplay", () => {
 
 			it("should pass correct props to audio display component", () => {
 				const { wrapper, srcProp } = setup();
-				console.log(wrapper.html());
+
 				const props = wrapper.findComponent(AudioDisplay).attributes();
 
 				expect(props.src).toBe(srcProp);
@@ -275,7 +280,50 @@ describe("FileDisplay", () => {
 			});
 		});
 
-		describe("when mimeType is not a video or audio type", () => {
+		describe("when mimeType is pdf type", () => {
+			const setup = () => {
+				document.body.setAttribute("data-app", "true");
+
+				const element = fileElementResponseFactory.build();
+				const propsData = {
+					fileProperties: {
+						name: "test",
+						size: 100,
+						url: "test",
+						previewUrl: undefined,
+						previewStatus: "test",
+						isDownloadAllowed: true,
+						element,
+					},
+					isEditMode: true,
+				};
+
+				isPdfMimeTypeMock.mockReset();
+				isPdfMimeTypeMock.mockReturnValueOnce(true);
+
+				const wrapper = shallowMount(FileDisplay, {
+					propsData,
+					...createComponentMocks({}),
+				});
+
+				return {
+					wrapper,
+					fileNameProp: propsData.fileProperties.name,
+					previewUrlProp: propsData.fileProperties.previewUrl,
+					url: propsData.fileProperties.url,
+				};
+			};
+
+			it("should pass correct props to file description", () => {
+				const { wrapper, url } = setup();
+
+				const props = wrapper.findComponent(FileDescription).attributes();
+
+				expect(props.src).toBe(url);
+			});
+		});
+
+		describe("when mimeType is not a video or audio or pdf type", () => {
 			const setup = () => {
 				document.body.setAttribute("data-app", "true");
 
@@ -299,6 +347,9 @@ describe("FileDisplay", () => {
 				isAudioMimeTypeMock.mockReset();
 				isAudioMimeTypeMock.mockReturnValueOnce(false);
 
+				isPdfMimeTypeMock.mockReset();
+				isPdfMimeTypeMock.mockReturnValueOnce(false);
+
 				const wrapper = shallowMount(FileDisplay, {
 					propsData,
 					...createComponentMocks({}),
@@ -317,6 +368,14 @@ describe("FileDisplay", () => {
 				expect(props.showtitle).toBeTruthy();
 			});
 
+			it("should pass src to file description", () => {
+				const { wrapper } = setup();
+
+				const props = wrapper.findComponent(FileDescription).attributes();
+
+				expect(props.src).toBe(undefined);
+			});
+
 			it("should not render image display component", () => {
 				const { wrapper } = setup();
 
diff --git a/src/components/feature-board-file-element/content/display/FileDisplay.vue b/src/components/feature-board-file-element/content/display/FileDisplay.vue
index c2aafb7725..498cc58c28 100644
--- a/src/components/feature-board-file-element/content/display/FileDisplay.vue
+++ b/src/components/feature-board-file-element/content/display/FileDisplay.vue
@@ -30,6 +30,7 @@
 			:caption="fileProperties.element.content.caption"
 			:show-title="showTitle"
 			:is-edit-mode="isEditMode"
+			:src="fileDescriptionSrc"
 		>
 			<slot />
 		</FileDescription>
@@ -37,7 +38,11 @@
 </template>
 
 <script lang="ts">
-import { isAudioMimeType, isVideoMimeType } from "@/utils/fileHelper";
+import {
+	isAudioMimeType,
+	isVideoMimeType,
+	isPdfMimeType,
+} from "@/utils/fileHelper";
 import { computed, defineComponent, PropType } from "vue";
 import { FileProperties } from "../../shared/types/file-properties";
 import { FileAlert } from "../../shared/types/FileAlert.enum";
@@ -62,6 +67,12 @@ export default defineComponent({
 			return isVideoMimeType(props.fileProperties.mimeType);
 		});
 
+		const fileDescriptionSrc = computed(() => {
+			return isPdfMimeType(props.fileProperties.mimeType)
+				? props.fileProperties.url
+				: undefined;
+		});
+
 		const hasAudioMimeType = computed(() => {
 			return isAudioMimeType(props.fileProperties.mimeType);
 		});
@@ -80,6 +91,7 @@ export default defineComponent({
 
 		return {
 			hasVideoMimeType,
+			fileDescriptionSrc,
 			hasAudioMimeType,
 			showTitle,
 			onAddAlert,
diff --git a/src/components/feature-board-file-element/content/display/file-description/FileDescription.unit.ts b/src/components/feature-board-file-element/content/display/file-description/FileDescription.unit.ts
index 9aed4b7014..cecbd417bc 100644
--- a/src/components/feature-board-file-element/content/display/file-description/FileDescription.unit.ts
+++ b/src/components/feature-board-file-element/content/display/file-description/FileDescription.unit.ts
@@ -9,6 +9,7 @@ describe("FileDescription", () => {
 		showTitle: boolean;
 		name?: string;
 		caption?: string;
+		src?: string;
 	}) => {
 		document.body.setAttribute("data-app", "true");
 
@@ -17,6 +18,7 @@ describe("FileDescription", () => {
 			caption: props.caption,
 			isEditMode: props.isEditMode,
 			showTitle: props.showTitle,
+			src: props.src,
 		};
 		const wrapper = shallowMount(FileDescription, {
 			propsData,
@@ -27,6 +29,7 @@ describe("FileDescription", () => {
 			wrapper,
 			name: propsData.name,
 			caption: propsData.caption,
+			src: propsData.src,
 		};
 	};
 
@@ -35,6 +38,7 @@ describe("FileDescription", () => {
 		showTitle: boolean;
 		name?: string;
 		caption?: string;
+		src?: string;
 	}) => {
 		document.body.setAttribute("data-app", "true");
 
@@ -43,6 +47,7 @@ describe("FileDescription", () => {
 			caption: props.caption ?? "testCaption",
 			isEditMode: props.isEditMode,
 			showTitle: props.showTitle,
+			src: props.src,
 		};
 		const wrapper = mount(FileDescription, {
 			propsData,
@@ -53,6 +58,7 @@ describe("FileDescription", () => {
 			wrapper,
 			name: propsData.name,
 			caption: propsData.caption,
+			src: propsData.src,
 		};
 	};
 
@@ -101,6 +107,35 @@ describe("FileDescription", () => {
 
 				expect(contentElementBar.props("icon")).toBe(mdiFileDocumentOutline);
 			});
+
+			describe("when src is defined", () => {
+				it("should render link", () => {
+					const src = "testSrc";
+					const { wrapper, name } = mountSetup({
+						isEditMode: false,
+						showTitle: true,
+						src,
+					});
+					console.log(wrapper.html());
+					const link = wrapper.find("a");
+
+					expect(link.attributes("href")).toBe(src);
+					expect(link.text()).toBe(name);
+				});
+			});
+
+			describe("when src is undefined", () => {
+				it("should not render link", () => {
+					const { wrapper, name } = mountSetup({
+						isEditMode: false,
+						showTitle: true,
+					});
+					const link = wrapper.find("a");
+
+					expect(link.exists()).toBeFalsy();
+					expect(wrapper.text()).toContain(name);
+				});
+			});
 		});
 
 		describe("when showTitle is false", () => {
@@ -162,6 +197,35 @@ describe("FileDescription", () => {
 
 				expect(contentElementBar.props("hasGreyBackground")).toBe(true);
 			});
+
+			describe("when src is defined", () => {
+				it("should render link", () => {
+					const src = "testSrc";
+					const { wrapper, name } = mountSetup({
+						isEditMode: false,
+						showTitle: true,
+						src,
+					});
+					console.log(wrapper.html());
+					const link = wrapper.find("a");
+
+					expect(link.attributes("href")).toBe(src);
+					expect(link.text()).toBe(name);
+				});
+			});
+
+			describe("when src is undefined", () => {
+				it("should not render link", () => {
+					const { wrapper, name } = mountSetup({
+						isEditMode: false,
+						showTitle: true,
+					});
+					const link = wrapper.find("a");
+
+					expect(link.exists()).toBeFalsy();
+					expect(wrapper.text()).toContain(name);
+				});
+			});
 		});
 
 		describe("when showTitle is false", () => {
diff --git a/src/components/feature-board-file-element/content/display/file-description/FileDescription.vue b/src/components/feature-board-file-element/content/display/file-description/FileDescription.vue
index 49b0c161cc..aa89cb1950 100644
--- a/src/components/feature-board-file-element/content/display/file-description/FileDescription.vue
+++ b/src/components/feature-board-file-element/content/display/file-description/FileDescription.vue
@@ -6,7 +6,10 @@
 			:icon="mdiFileDocumentOutline"
 		>
 			<template #title>
-				<ContentElementTitle>{{ name }}</ContentElementTitle>
+				<ContentElementTitle>
+					<a v-if="src" :href="src" target="_blank">{{ name }}</a>
+					<span v-else>{{ name }}</span>
+				</ContentElementTitle>
 			</template>
 			<template #menu>
 				<slot />
@@ -34,6 +37,7 @@ export default defineComponent({
 		caption: { type: String, required: false },
 		showTitle: { type: Boolean, required: true },
 		isEditMode: { type: Boolean, required: true },
+		src: { type: String, required: false },
 	},
 	setup() {
 		return {
@@ -43,3 +47,14 @@ export default defineComponent({
 	components: { ContentElementBar, ContentElementTitle },
 });
 </script>
+<style scope>
+a {
+	text-decoration: none;
+}
+a:visited {
+	color: inherit;
+}
+a:hover {
+	text-decoration: underline;
+}
+</style>
diff --git a/src/components/feature-board-file-element/upload/FileUpload.unit.ts b/src/components/feature-board-file-element/upload/FileUpload.unit.ts
index 353793434b..873e6d46c0 100644
--- a/src/components/feature-board-file-element/upload/FileUpload.unit.ts
+++ b/src/components/feature-board-file-element/upload/FileUpload.unit.ts
@@ -14,61 +14,123 @@ const useSharedLastCreatedElementMock = jest.mocked(
 useSharedLastCreatedElementMock.mockReturnValue(mockedUse);
 
 describe(FileUpload.name, () => {
-	const setupProps = (fileName: string) => ({
-		fileName,
-		elementId: "element 123",
-		url: "1/file-record #1.txt",
-	});
+	describe("when isEditMode is true", () => {
+		const setup = (fileName = "") => {
+			document.body.setAttribute("data-app", "true");
+
+			const propsData = {
+				fileName,
+				elementId: "element 123",
+				url: "1/file-record #1.txt",
+				isEditMode: true,
+			};
+			const testSlot = "testSlot";
+			const wrapper = shallowMount(FileUpload, {
+				...createComponentMocks({ i18n: true }),
+				propsData,
+				slots: {
+					default: testSlot,
+				},
+			});
+
+			return {
+				wrapper,
+				fileNameProp: propsData.fileName,
+				urlProp: propsData.url,
+				elementId: propsData.elementId,
+				testSlot,
+			};
+		};
 
-	const setup = (fileName = "") => {
-		document.body.setAttribute("data-app", "true");
+		describe("when file is not picked", () => {
+			it("should render FilePicker component", () => {
+				const { wrapper } = setup();
 
-		const propsData = setupProps(fileName);
+				const filePicker = wrapper.findComponent(FilePicker);
+				expect(filePicker.exists()).toBe(true);
+			});
 
-		const wrapper = shallowMount(FileUpload, {
-			...createComponentMocks({ i18n: true }),
-			propsData,
+			it("should render default slot", () => {
+				const { wrapper, testSlot } = setup();
+
+				expect(wrapper.text()).toContain(testSlot);
+			});
 		});
 
-		return {
-			wrapper,
-			fileNameProp: propsData.fileName,
-			urlProp: propsData.url,
-			elementId: propsData.elementId,
-		};
-	};
+		describe("when file gets picked", () => {
+			it("should be emitted as an upload:file event", async () => {
+				const { wrapper } = setup();
 
-	it("should be found in dom", () => {
-		const { wrapper } = setup();
+				const filePicker = wrapper.findComponent(FilePicker);
+				expect(filePicker.exists()).toBe(true);
 
-		const component = wrapper.findComponent(FileUpload);
-		expect(component.exists()).toBe(true);
-	});
+				filePicker.vm.$emit("update:file", { fileName: "Test.jpg" });
 
-	describe("when file gets picked", () => {
-		it("should be emitted as an upload:file event", async () => {
-			const { wrapper } = setup();
+				expect(wrapper.emitted("upload:file")).toHaveLength(1);
+			});
 
-			const filePicker = wrapper.findComponent(FilePicker);
-			expect(filePicker.exists()).toBe(true);
+			it("should render v-progress-linear component", async () => {
+				const { wrapper } = setup();
+
+				const filePicker = wrapper.findComponent(FilePicker);
+				expect(filePicker.exists()).toBe(true);
 
-			filePicker.vm.$emit("update:file", { fileName: "Test.jpg" });
+				filePicker.vm.$emit("update:file", { fileName: "Test.jpg" });
 
-			expect(wrapper.emitted("upload:file")).toHaveLength(1);
+				await nextTick();
+
+				const progressLinear = wrapper.find("v-progress-linear-stub");
+				expect(progressLinear.exists()).toBe(true);
+			});
 		});
+	});
+
+	describe("when isEditMode is false", () => {
+		const setup = (fileName = "") => {
+			document.body.setAttribute("data-app", "true");
+
+			const propsData = {
+				fileName,
+				elementId: "element 123",
+				url: "1/file-record #1.txt",
+				isEditMode: false,
+			};
+			const testSlot = "testSlot";
+			const wrapper = shallowMount(FileUpload, {
+				...createComponentMocks({ i18n: true }),
+				propsData,
+				slots: {
+					default: testSlot,
+				},
+			});
+
+			return {
+				wrapper,
+				fileNameProp: propsData.fileName,
+				urlProp: propsData.url,
+				elementId: propsData.elementId,
+				testSlot,
+			};
+		};
 
-		it("should render v-progress-linear component", async () => {
+		it("should not render FilePicker component", () => {
 			const { wrapper } = setup();
 
 			const filePicker = wrapper.findComponent(FilePicker);
-			expect(filePicker.exists()).toBe(true);
+			expect(filePicker.exists()).toBe(false);
+		});
+
+		it("should not render default slot", () => {
+			const { wrapper, testSlot } = setup();
 
-			filePicker.vm.$emit("update:file", { fileName: "Test.jpg" });
+			expect(wrapper.text()).not.toContain(testSlot);
+		});
 
-			await nextTick();
+		it("should not render progress bar", () => {
+			const { wrapper } = setup();
 
 			const progressLinear = wrapper.find("v-progress-linear-stub");
-			expect(progressLinear.exists()).toBe(true);
+			expect(progressLinear.exists()).toBe(false);
 		});
 	});
 });
diff --git a/src/components/feature-board-file-element/upload/FileUpload.vue b/src/components/feature-board-file-element/upload/FileUpload.vue
index ae49c676b7..3ba5fec8e6 100644
--- a/src/components/feature-board-file-element/upload/FileUpload.vue
+++ b/src/components/feature-board-file-element/upload/FileUpload.vue
@@ -1,5 +1,5 @@
 <template>
-	<v-app-bar flat color="transparent">
+	<v-app-bar v-if="isEditMode" flat color="transparent">
 		<FilePicker
 			v-if="!fileWasPicked"
 			@update:file="onFileSelect"
@@ -24,6 +24,7 @@ export default defineComponent({
 	name: "FileUpload",
 	props: {
 		elementId: { type: String, required: true },
+		isEditMode: { type: Boolean },
 	},
 	components: { FilePicker },
 	emits: ["upload:file"],
diff --git a/src/components/organisms/administration/AuthSystems.vue b/src/components/organisms/administration/AuthSystems.vue
index d284513d91..ff494b7671 100644
--- a/src/components/organisms/administration/AuthSystems.vue
+++ b/src/components/organisms/administration/AuthSystems.vue
@@ -1,8 +1,5 @@
 <template>
-	<section>
-		<h2 class="text-h4 mb-10">
-			{{ $t("pages.administration.school.index.authSystems.title") }}
-		</h2>
+	<div>
 		<v-text-field
 			v-if="customLoginLinkEnabled && !hasSystems"
 			id="school-login-link-0"
@@ -111,7 +108,7 @@
 		<v-btn
 			v-if="hasSystemCreatePermission"
 			color="primary"
-			class="my-8 add-ldap"
+			class="mt-8 mb-4 add-ldap float-right"
 			depressed
 			to="/administration/ldap/config"
 		>
@@ -129,7 +126,7 @@
 					$t("pages.administration.school.index.authSystems.deleteAuthSystem")
 				}}
 			</h2>
-			<template slot="content">
+			<template #content>
 				<p class="text-md mt-2">
 					{{
 						$t(
@@ -139,7 +136,7 @@
 				</p>
 			</template>
 		</v-custom-dialog>
-	</section>
+	</div>
 </template>
 
 <script>
diff --git a/src/components/organisms/administration/GeneralSettings.unit.js b/src/components/organisms/administration/GeneralSettings.unit.js
index 2baa5b51fb..24198d3f0f 100644
--- a/src/components/organisms/administration/GeneralSettings.unit.js
+++ b/src/components/organisms/administration/GeneralSettings.unit.js
@@ -156,11 +156,11 @@ describe("GeneralSettings", () => {
 			const ele = wrapper.find(searchStrings.languagesSelect);
 			expect(ele.vm.$props.items).toHaveLength(3);
 			expect(ele.vm.$props.items[0].name).toStrictEqual("Deutsch");
-			expect(ele.vm.$props.items[0].abbreveation).toStrictEqual("de");
+			expect(ele.vm.$props.items[0].abbreviation).toStrictEqual("de");
 			expect(ele.vm.$props.items[1].name).toStrictEqual("Englisch");
-			expect(ele.vm.$props.items[1].abbreveation).toStrictEqual("en");
+			expect(ele.vm.$props.items[1].abbreviation).toStrictEqual("en");
 			expect(ele.vm.$props.items[2].name).toStrictEqual("Spanisch");
-			expect(ele.vm.$props.items[2].abbreveation).toStrictEqual("es");
+			expect(ele.vm.$props.items[2].abbreviation).toStrictEqual("es");
 		});
 	});
 
diff --git a/src/components/organisms/administration/GeneralSettings.vue b/src/components/organisms/administration/GeneralSettings.vue
index e36b007b3c..486085aa08 100644
--- a/src/components/organisms/administration/GeneralSettings.vue
+++ b/src/components/organisms/administration/GeneralSettings.vue
@@ -1,154 +1,151 @@
 <template>
-	<section>
-		<h2 class="text-h4 mb-10">
-			{{ $t("pages.administration.school.index.generalSettings") }}
-		</h2>
-		<v-form>
-			<v-overlay :value="loading" :absolute="true">
-				<v-progress-circular color="primary" indeterminate />
-			</v-overlay>
-			<v-row>
-				<v-col>
-					<v-text-field
-						v-model="localSchool.name"
-						class="school-name"
-						:label="
-							$t(
-								'pages.administration.school.index.generalSettings.labels.nameOfSchool'
-							)
-						"
-						dense
-						:readonly="!hasSchoolEditPermission"
-						:disabled="isSyncedSchool"
-						data-testid="school-name"
-					/>
-				</v-col>
-			</v-row>
-			<v-row>
-				<v-col>
-					<v-text-field
-						v-model="localSchool.officialSchoolNumber"
-						class="school-number"
-						data-testid="school-number"
-						:label="
-							$t(
-								'pages.administration.school.index.generalSettings.labels.schoolNumber'
-							)
-						"
-						dense
-						:disabled="!!school.officialSchoolNumber"
-						:hint="
-							$t(
-								'pages.administration.school.index.generalSettings.changeSchoolValueWarning'
-							)
-						"
-						persistent-hint
-						:readonly="!hasSchoolEditPermission"
-					/>
-				</v-col>
-			</v-row>
-			<v-row>
-				<v-col>
-					<v-select
-						v-model="localSchool.county"
-						class="school-counties"
-						:label="
-							$t(
-								'pages.administration.school.index.generalSettings.labels.chooseACounty'
-							)
-						"
-						:items="federalState.counties"
-						item-text="name"
-						item-value="_id"
-						return-object
-						dense
-						:disabled="!!localSchool.county"
-						:hint="
-							$t(
-								'pages.administration.school.index.generalSettings.changeSchoolValueWarning'
-							)
-						"
-						persistent-hint
-					/>
-				</v-col>
-			</v-row>
-			<v-row>
-				<v-col class="d-flex">
-					<v-file-input
-						class="school-logo"
-						:label="
-							$t(
-								'pages.administration.school.index.generalSettings.labels.uploadSchoolLogo'
-							)
-						"
-						v-model="logoFile"
-						dense
-						prepend-icon=""
-					/>
-				</v-col>
-			</v-row>
-			<v-row>
-				<v-col>
-					<v-text-field
-						v-model="localSchool.timezone"
-						class="timezone-input"
-						:label="
-							$t(
-								'pages.administration.school.index.generalSettings.labels.timezone'
-							)
-						"
-						dense
-						disabled
-						:hint="
-							$t(
-								'pages.administration.school.index.generalSettings.timezoneHint'
-							)
-						"
-						persistent-hint
-					/>
-				</v-col>
-			</v-row>
-			<v-row>
-				<v-col>
-					<v-select
-						v-model="localSchool.language"
-						class="language-select"
-						:label="
-							$t(
-								'pages.administration.school.index.generalSettings.labels.language'
-							)
-						"
-						:items="languages"
-						item-text="name"
-						item-value="abbreveation"
-						dense
-						:hint="
-							$t(
-								'pages.administration.school.index.generalSettings.languageHint'
-							)
-						"
-						persistent-hint
-					/>
-				</v-col>
-			</v-row>
-			<privacy-settings
-				:permissions="localSchool.permissions || {}"
-				:features="localSchool.features || {}"
-				@update-privacy-settings="onUpdatePrivacySettings"
-				@update-feature-settings="onUpdateFeatureSettings"
-			/>
-			<v-btn
-				class="my-5 button-save"
-				data-testid="save-general-setting"
-				color="primary"
-				depressed
-				:disabled="loading"
-				@click="save"
-			>
-				{{ $t("pages.administration.school.index.generalSettings.save") }}
-			</v-btn>
-		</v-form>
-	</section>
+	<v-form>
+		<v-overlay :value="loading" :absolute="true">
+			<v-progress-circular color="primary" indeterminate />
+		</v-overlay>
+		<v-row>
+			<v-col>
+				<v-text-field
+					v-model="localSchool.name"
+					class="school-name"
+					:label="
+						$t(
+							'pages.administration.school.index.generalSettings.labels.nameOfSchool'
+						)
+					"
+					dense
+					:readonly="!hasSchoolEditPermission"
+					:disabled="isSyncedSchool"
+					data-testid="school-name"
+				/>
+			</v-col>
+		</v-row>
+		<v-row class="mb-2">
+			<v-col>
+				<v-text-field
+					v-model="localSchool.officialSchoolNumber"
+					class="school-number"
+					data-testid="school-number"
+					:label="
+						$t(
+							'pages.administration.school.index.generalSettings.labels.schoolNumber'
+						)
+					"
+					dense
+					:disabled="!!school.officialSchoolNumber"
+					:hint="
+						$t(
+							'pages.administration.school.index.generalSettings.changeSchoolValueWarning'
+						)
+					"
+					persistent-hint
+					:readonly="!hasSchoolEditPermission"
+				/>
+			</v-col>
+		</v-row>
+		<v-row class="mb-2">
+			<v-col>
+				<v-select
+					v-model="localSchool.county"
+					class="school-counties"
+					:label="
+						$t(
+							'pages.administration.school.index.generalSettings.labels.chooseACounty'
+						)
+					"
+					:items="federalState.counties"
+					item-text="name"
+					item-value="_id"
+					return-object
+					dense
+					:disabled="!!localSchool.county"
+					:hint="
+						$t(
+							'pages.administration.school.index.generalSettings.changeSchoolValueWarning'
+						)
+					"
+					persistent-hint
+				/>
+			</v-col>
+		</v-row>
+		<v-row>
+			<v-col>
+				<v-file-input
+					class="school-logo"
+					:label="
+						$t(
+							'pages.administration.school.index.generalSettings.labels.uploadSchoolLogo'
+						)
+					"
+					v-model="logoFile"
+					dense
+					prepend-icon=""
+					prepend-inner-icon="$file"
+				/>
+			</v-col>
+		</v-row>
+		<v-row class="mb-2">
+			<v-col>
+				<v-text-field
+					v-model="localSchool.timezone"
+					class="timezone-input"
+					:label="
+						$t(
+							'pages.administration.school.index.generalSettings.labels.timezone'
+						)
+					"
+					dense
+					disabled
+					:hint="
+						$t('pages.administration.school.index.generalSettings.timezoneHint')
+					"
+					persistent-hint
+				/>
+			</v-col>
+		</v-row>
+		<v-row class="mb-8">
+			<v-col>
+				<v-select
+					v-model="localSchool.language"
+					class="language-select"
+					:label="
+						$t(
+							'pages.administration.school.index.generalSettings.labels.language'
+						)
+					"
+					:items="languages"
+					item-text="name"
+					item-value="abbreviation"
+					dense
+				>
+					<template #item="{ item }">
+						<v-icon class="me-2"> {{ item.flagIcon }} </v-icon>
+						{{ item.name }}
+					</template>
+					<template #selection="{ item }">
+						<v-icon class="me-2"> {{ item.flagIcon }} </v-icon>
+						{{ item.name }}
+					</template>
+				</v-select>
+			</v-col>
+		</v-row>
+		<privacy-settings
+			:permissions="localSchool.permissions || {}"
+			:features="localSchool.features || {}"
+			@update-privacy-settings="onUpdatePrivacySettings"
+			@update-feature-settings="onUpdateFeatureSettings"
+		/>
+		<v-btn
+			class="mt-6 my-4 button-save float-right"
+			data-testid="save-general-setting"
+			color="primary"
+			depressed
+			:disabled="loading"
+			@click="save"
+		>
+			{{ $t("pages.administration.school.index.generalSettings.save") }}
+		</v-btn>
+	</v-form>
 </template>
 
 <script>
@@ -194,7 +191,9 @@ export default {
 		languages() {
 			return this.availableLanguages.split(",").map((lang) => {
 				const name = this.$t(`common.words.languages.${lang}`);
-				return { name, abbreveation: lang };
+				const flagIcon =
+					"$langIcon" + lang.charAt(0).toUpperCase() + lang.slice(1);
+				return { name, abbreviation: lang, flagIcon };
 			});
 		},
 		hasSchoolEditPermission: () => {
@@ -246,6 +245,10 @@ export default {
 				schoolCopy.logo = this.school.logo_dataUrl;
 			}
 			this.localSchool = schoolCopy;
+
+			if (!this.localSchool.language) {
+				this.localSchool.language = "de";
+			}
 		},
 		printDate,
 		toBase64,
diff --git a/src/components/organisms/administration/PrivacySettings.vue b/src/components/organisms/administration/PrivacySettings.vue
index ee50bdd36d..2241dbf6a4 100644
--- a/src/components/organisms/administration/PrivacySettings.vue
+++ b/src/components/organisms/administration/PrivacySettings.vue
@@ -1,8 +1,5 @@
 <template>
-	<section>
-		<h3 class="text-h6">
-			{{ $t("pages.administration.school.index.privacySettings") }}
-		</h3>
+	<div>
 		<v-row
 			class="student-visibility-switch"
 			v-if="isTeacherStudentVisibilityVisible"
@@ -27,22 +24,10 @@
 							$emit('update-privacy-settings', $event, 'teacher.STUDENT_LIST')
 					"
 				/>
-				<p v-if="isTeacherStudentVisibilityConfigurable" class="body-2 mb-0">
-					{{
-						theme === "brb"
-							? $t(
-									"pages.administration.school.index.privacySettings.longText.studentVisibilityBrandenburg"
-							  )
-							: theme === "n21"
-							? $t(
-									"pages.administration.school.index.privacySettings.longText.studentVisibilityNiedersachsen"
-							  )
-							: $t(
-									"pages.administration.school.index.privacySettings.longText.studentVisibility"
-							  )
-					}}
+				<p v-if="isTeacherStudentVisibilityConfigurable" class="switch-hint">
+					{{ $t(studentVisibilityTextKey) }}
 				</p>
-				<p v-else class="body-2 mb-0">
+				<p v-else class="switch-hint">
 					{{
 						$t(
 							"pages.administration.school.index.privacySettings.longText.configurabilityInfoText"
@@ -71,7 +56,7 @@
 							$emit('update-privacy-settings', $event, 'student.LERNSTORE_VIEW')
 					"
 				/>
-				<p class="body-2 mb-0">
+				<p class="switch-hint">
 					{{
 						$t(
 							"pages.administration.school.index.privacySettings.longText.lernStore"
@@ -100,7 +85,7 @@
 						($event) => $emit('update-feature-settings', $event, 'rocketChat')
 					"
 				/>
-				<p class="body-2 mb-0">
+				<p class="switch-hint">
 					{{
 						$t(
 							"pages.administration.school.index.privacySettings.longText.chatFunction"
@@ -130,7 +115,7 @@
 							$emit('update-feature-settings', $event, 'videoconference')
 					"
 				/>
-				<p class="body-2 mb-0">
+				<p class="switch-hint">
 					{{
 						$t(
 							"pages.administration.school.index.privacySettings.longText.videoConference"
@@ -139,7 +124,7 @@
 				</p>
 			</v-col>
 		</v-row>
-	</section>
+	</div>
 </template>
 
 <script>
@@ -179,6 +164,16 @@ export default {
 				return envConfigModule.getTeacherStudentVisibilityIsEnabledByDefault;
 			}
 		},
+		studentVisibilityTextKey() {
+			switch (this.theme) {
+				case "n21":
+					return "pages.administration.school.index.privacySettings.longText.studentVisibilityNiedersachsen";
+				case "brb":
+					return "pages.administration.school.index.privacySettings.longText.studentVisibilityBrandenburg";
+				default:
+					return "pages.administration.school.index.privacySettings.longText.studentVisibility";
+			}
+		},
 		lernStoreVisibility() {
 			return this.permissions.student
 				? this.permissions.student.LERNSTORE_VIEW
@@ -187,3 +182,13 @@ export default {
 	},
 };
 </script>
+
+<style lang="scss" scoped>
+.switch-hint {
+	font-size: 12px !important;
+	line-height: 18px !important;
+	font-weight: 400 !important;
+	margin-top: -8px !important;
+	margin-left: 60px !important;
+}
+</style>
diff --git a/src/components/organisms/administration/SchoolPolicy.vue b/src/components/organisms/administration/SchoolPolicy.vue
index 6fc10da73a..13846ca714 100644
--- a/src/components/organisms/administration/SchoolPolicy.vue
+++ b/src/components/organisms/administration/SchoolPolicy.vue
@@ -1,18 +1,16 @@
 <template>
-	<section>
-		<h4 class="text-h4 mb-6">
-			{{ t("common.words.privacyPolicy") }}
-		</h4>
+	<div>
 		<v-alert
 			v-if="status === 'error'"
 			light
-			prominent
 			text
 			type="error"
 			class="mb-6"
 			data-testid="error-alert"
 		>
-			{{ t("pages.administration.school.index.schoolPolicy.error") }}
+			<div class="alert-text">
+				{{ t("pages.administration.school.index.schoolPolicy.error") }}
+			</div>
 		</v-alert>
 		<template v-else>
 			<v-progress-linear
@@ -113,7 +111,7 @@
 				</template>
 			</v-custom-dialog>
 		</template>
-	</section>
+	</div>
 </template>
 
 <script lang="ts">
diff --git a/src/components/organisms/administration/SchoolPolicyFormDialog.vue b/src/components/organisms/administration/SchoolPolicyFormDialog.vue
index 2299e194b2..73517c19ee 100644
--- a/src/components/organisms/administration/SchoolPolicyFormDialog.vue
+++ b/src/components/organisms/administration/SchoolPolicyFormDialog.vue
@@ -43,7 +43,7 @@
 					:rules="[rules.required, rules.mustBePdf, rules.maxSize(4194304)]"
 					@blur="onBlur"
 				>
-					<template v-slot:append>
+					<template #append>
 						<v-icon
 							v-if="!isValid && isTouched"
 							color="var(--v-error-base)"
@@ -169,6 +169,7 @@ export default defineComponent({
 <style lang="scss" scoped>
 .alert-text {
 	color: var(--v-black-base) !important;
+	line-height: var(--line-height-lg) !important;
 }
 
 .button-left {
diff --git a/src/components/organisms/administration/SchoolTerms.vue b/src/components/organisms/administration/SchoolTerms.vue
index d1ef7bc8f4..64eb1e2891 100644
--- a/src/components/organisms/administration/SchoolTerms.vue
+++ b/src/components/organisms/administration/SchoolTerms.vue
@@ -1,18 +1,16 @@
 <template>
-	<section>
-		<h4 class="text-h4 mb-6">
-			{{ t("common.words.termsOfUse") }}
-		</h4>
+	<div>
 		<v-alert
 			v-if="status === 'error'"
 			light
-			prominent
 			text
 			type="error"
 			class="mb-6"
 			data-testid="error-alert"
 		>
-			{{ t("pages.administration.school.index.termsOfUse.error") }}
+			<div class="alert-text">
+				{{ t("pages.administration.school.index.termsOfUse.error") }}
+			</div>
 		</v-alert>
 		<template v-else>
 			<v-progress-linear
@@ -109,7 +107,7 @@
 				</template>
 			</v-custom-dialog>
 		</template>
-	</section>
+	</div>
 </template>
 
 <script lang="ts">
diff --git a/src/components/organisms/administration/SchoolTermsFormDialog.vue b/src/components/organisms/administration/SchoolTermsFormDialog.vue
index d9ded71d67..07a06e224d 100644
--- a/src/components/organisms/administration/SchoolTermsFormDialog.vue
+++ b/src/components/organisms/administration/SchoolTermsFormDialog.vue
@@ -41,7 +41,7 @@
 					:rules="[rules.required, rules.mustBePdf, rules.maxSize(4194304)]"
 					@blur="onBlur"
 				>
-					<template v-slot:append>
+					<template #append>
 						<v-icon
 							v-if="!isValid && isTouched"
 							color="var(--v-error-base)"
@@ -165,6 +165,7 @@ export default defineComponent({
 <style lang="scss" scoped>
 .alert-text {
 	color: var(--v-black-base) !important;
+	line-height: var(--line-height-lg) !important;
 }
 
 .button-left {
diff --git a/src/components/page-class-members/ClassMembers.page.unit.ts b/src/components/page-class-members/ClassMembers.page.unit.ts
new file mode 100644
index 0000000000..c32d2e1e3d
--- /dev/null
+++ b/src/components/page-class-members/ClassMembers.page.unit.ts
@@ -0,0 +1,210 @@
+import { mount, MountOptions } from "@vue/test-utils";
+import Vue, { ref } from "vue";
+import createComponentMocks from "@@/tests/test-utils/componentMocks";
+import { I18N_KEY, NOTIFIER_MODULE_KEY } from "@/utils/inject";
+import { i18nMock } from "@@/tests/test-utils";
+import ClassMembersPage from "@/components/page-class-members/ClassMembers.page.vue";
+import { Group, useGroupState } from "@data-group";
+import { createMock, DeepMocked } from "@golevelup/ts-jest";
+import { groupFactory } from "@@/tests/test-utils/factory";
+import ClassMembersInfoBox from "@/components/page-class-members/ClassMembersInfoBox.vue";
+import { createModuleMocks } from "@/utils/mock-store-module";
+import NotifierModule from "@/store/notifier";
+
+jest.mock("@data-group");
+
+describe("@pages/ClassMembers.page.vue", () => {
+	let useGroupStateMock: DeepMocked<ReturnType<typeof useGroupState>>;
+
+	const getWrapper = (
+		propsData: { groupId: string },
+		group: Group = groupFactory.build()
+	) => {
+		document.body.setAttribute("data-app", "true");
+
+		useGroupStateMock.isLoading = ref(false);
+		useGroupStateMock.group = ref(group);
+
+		const notifierModule = createModuleMocks(NotifierModule);
+
+		const wrapper = mount(ClassMembersPage as MountOptions<Vue>, {
+			...createComponentMocks({ i18n: true }),
+			propsData: { ...propsData },
+			provide: {
+				[I18N_KEY.valueOf()]: i18nMock,
+				[NOTIFIER_MODULE_KEY.valueOf()]: notifierModule,
+			},
+		});
+
+		return {
+			wrapper,
+		};
+	};
+
+	beforeEach(() => {
+		useGroupStateMock = createMock<ReturnType<typeof useGroupState>>();
+
+		jest.mocked(useGroupState).mockReturnValue(useGroupStateMock);
+	});
+
+	afterEach(() => {
+		jest.clearAllMocks();
+	});
+
+	describe("title", () => {
+		const setup = () => {
+			const group: Group = groupFactory.build();
+
+			const { wrapper } = getWrapper(
+				{
+					groupId: "groupId",
+				},
+				group
+			);
+
+			return {
+				wrapper,
+				group,
+			};
+		};
+
+		it("should render static title", () => {
+			const { wrapper, group } = setup();
+
+			const title = wrapper.find("h1");
+
+			expect(title.text()).toContain(`common.labels.class '${group.name}'`);
+		});
+
+		it("should show subtitle that group is from external system", () => {
+			const { wrapper } = setup();
+
+			const title = wrapper.find("h1");
+			const subtitle = title.find("span");
+
+			expect(subtitle.text()).toEqual("(page-class-members.title.info)");
+		});
+	});
+
+	describe("breadcrumbs", () => {
+		const setup = () => {
+			const group: Group = groupFactory.build();
+
+			const { wrapper } = getWrapper(
+				{
+					groupId: "groupId",
+				},
+				group
+			);
+
+			return {
+				wrapper,
+				group,
+			};
+		};
+
+		it("should render static breadcrumbs", () => {
+			const { wrapper } = setup();
+
+			const breadcrumbs = wrapper.findAll(".breadcrumbs-item");
+
+			expect(breadcrumbs.at(0).text()).toEqual(
+				"pages.administration.index.title"
+			);
+			expect(breadcrumbs.at(1).text()).toEqual(
+				"pages.administration.classes.index.title"
+			);
+		});
+
+		it("should render dynamic class name breadcrumb", () => {
+			const { wrapper, group } = setup();
+
+			const breadcrumb = wrapper.findAll(".breadcrumbs-item").at(2);
+
+			expect(breadcrumb.text()).toEqual(`common.labels.class '${group.name}'`);
+		});
+	});
+
+	describe("onMounted", () => {
+		it("should load the group for given groupId", async () => {
+			getWrapper({
+				groupId: "groupId",
+			});
+
+			expect(useGroupStateMock.fetchGroup).toHaveBeenCalledWith("groupId");
+		});
+	});
+
+	describe("datatable", () => {
+		const setup = () => {
+			const group = groupFactory.build();
+
+			const { wrapper } = getWrapper(
+				{
+					groupId: "groupId",
+				},
+				group
+			);
+
+			return {
+				wrapper,
+				group,
+			};
+		};
+
+		it("should render datatable", () => {
+			const { wrapper } = setup();
+
+			const datatable = wrapper.findComponent({ name: "v-data-table" });
+
+			expect(datatable.exists()).toBeTruthy();
+		});
+
+		it("should render datatable with correct headers", () => {
+			const { wrapper } = setup();
+
+			const datatable = wrapper.findComponent({ name: "v-data-table" });
+
+			expect(datatable.props("headers")).toEqual([
+				{
+					text: "common.labels.name",
+					value: "lastName",
+				},
+				{
+					text: "common.labels.firstName",
+					value: "firstName",
+				},
+				{
+					text: "common.labels.role",
+					value: "roleName",
+				},
+			]);
+		});
+
+		it("should render datatable with correct items", () => {
+			const { wrapper, group } = setup();
+
+			const datatable = wrapper.findComponent({ name: "v-data-table" });
+
+			expect(datatable.props("items")).toEqual([
+				{
+					firstName: group.users[0].firstName,
+					lastName: group.users[0].lastName,
+					roleName: "undefined",
+				},
+			]);
+		});
+	});
+
+	describe("ClassMembersInfoBox", () => {
+		it("should render ClassMembersInfoBox", () => {
+			const { wrapper } = getWrapper({
+				groupId: "groupId",
+			});
+
+			const infoBox = wrapper.findComponent(ClassMembersInfoBox);
+
+			expect(infoBox.exists()).toBeTruthy();
+		});
+	});
+});
diff --git a/src/components/page-class-members/ClassMembers.page.vue b/src/components/page-class-members/ClassMembers.page.vue
new file mode 100644
index 0000000000..4aa41d2b06
--- /dev/null
+++ b/src/components/page-class-members/ClassMembers.page.vue
@@ -0,0 +1,133 @@
+<template>
+	<DefaultWireframe
+		:headline="t('pages.administration.classes.index.title')"
+		:breadcrumbs="breadcrumbs"
+		:full-width="true"
+		data-testid="admin-class-title"
+	>
+		<template #header>
+			<h1 class="text-h3">
+				{{ title }}
+				<span v-show="isExternal" class="text-subtitle-1">
+					({{ t("page-class-members.title.info") }})
+				</span>
+			</h1>
+		</template>
+		<v-data-table
+			:items="items"
+			:headers="headers"
+			:loading="isLoading"
+			:loading-text="t('common.loading.text')"
+			:no-data-text="t('common.nodata')"
+			data-testid="class-members-table"
+		/>
+		<ClassMembersInfoBox class="mt-5" :system-id="externalSystemId" />
+	</DefaultWireframe>
+</template>
+
+<script lang="ts">
+import { Breadcrumb } from "@/components/templates/default-wireframe.types";
+import DefaultWireframe from "@/components/templates/DefaultWireframe.vue";
+import { useI18n } from "@/composables/i18n.composable";
+import { GroupMapper, GroupUser, useGroupState } from "@data-group";
+import { computed, ComputedRef, defineComponent, onMounted } from "vue";
+import { DataTableHeader } from "vuetify";
+import ClassMembersInfoBox from "./ClassMembersInfoBox.vue";
+
+interface GroupUserTableData {
+	firstName: string;
+	lastName: string;
+	roleName: string;
+}
+
+export default defineComponent({
+	components: { ClassMembersInfoBox, DefaultWireframe },
+	props: {
+		groupId: {
+			type: String,
+			required: true,
+		},
+	},
+	setup(props) {
+		const { fetchGroup, group, isLoading } = useGroupState();
+
+		onMounted(() => {
+			fetchGroup(props.groupId);
+		});
+
+		const { t } = useI18n();
+
+		const groupName: ComputedRef<string> = computed(
+			() => group.value?.name ?? ""
+		);
+
+		const title: ComputedRef<string> = computed(
+			() => `${t("common.labels.class")} '${groupName.value}'`
+		);
+
+		const breadcrumbs: ComputedRef<Breadcrumb[]> = computed(() => [
+			{
+				text: t("pages.administration.index.title"),
+				href: "/administration/",
+			},
+			{
+				text: t("pages.administration.classes.index.title"),
+				to: "/administration/groups/classes",
+			},
+			{
+				text: title.value,
+				disabled: true,
+			},
+		]);
+
+		const externalSystemId: ComputedRef<string | undefined> = computed(
+			() => group.value?.externalSource?.systemId
+		);
+
+		const items: ComputedRef<GroupUserTableData[]> = computed(
+			() => group.value?.users.map(mapGroupUserToTableData) ?? []
+		);
+
+		const mapGroupUserToTableData = (
+			groupUser: GroupUser
+		): GroupUserTableData => {
+			return {
+				firstName: groupUser.firstName,
+				lastName: groupUser.lastName,
+				roleName: t(GroupMapper.getTranslationKey(groupUser.role)),
+			};
+		};
+
+		const headers: DataTableHeader[] = [
+			{
+				text: t("common.labels.name"),
+				value: "lastName",
+			},
+			{
+				text: t("common.labels.firstName"),
+				value: "firstName",
+			},
+			{
+				text: t("common.labels.role"),
+				value: "roleName",
+			},
+		];
+
+		const isExternal: ComputedRef<boolean> = computed(
+			() => !!group.value?.externalSource
+		);
+
+		return {
+			t,
+			title,
+			externalSystemId,
+			groupName,
+			breadcrumbs,
+			items,
+			isLoading,
+			headers,
+			isExternal,
+		};
+	},
+});
+</script>
diff --git a/src/components/page-class-members/ClassMembersInfoBox.unit.ts b/src/components/page-class-members/ClassMembersInfoBox.unit.ts
new file mode 100644
index 0000000000..72e57615e8
--- /dev/null
+++ b/src/components/page-class-members/ClassMembersInfoBox.unit.ts
@@ -0,0 +1,117 @@
+import { mount, MountOptions } from "@vue/test-utils";
+import Vue from "vue";
+import createComponentMocks from "@@/tests/test-utils/componentMocks";
+import { I18N_KEY } from "@/utils/inject";
+import { i18nMock } from "@@/tests/test-utils";
+import ClassMembersInfoBox from "@/components/page-class-members/ClassMembersInfoBox.vue";
+import { useSystemApi } from "@data-system";
+import { createMock, DeepMocked } from "@golevelup/ts-jest";
+import flushPromises from "flush-promises";
+
+jest.mock("@data-system");
+
+describe("ClassMembersInfoBox", () => {
+	let useSystemApiMock: DeepMocked<ReturnType<typeof useSystemApi>>;
+
+	const getWrapper = (propsData: { systemId: string }) => {
+		document.body.setAttribute("data-app", "true");
+
+		const wrapper = mount(ClassMembersInfoBox as MountOptions<Vue>, {
+			...createComponentMocks({ i18n: true }),
+			propsData: { ...propsData },
+			provide: {
+				[I18N_KEY.valueOf()]: i18nMock,
+			},
+		});
+
+		return {
+			wrapper,
+		};
+	};
+
+	beforeEach(() => {
+		useSystemApiMock = createMock<ReturnType<typeof useSystemApi>>();
+
+		jest.mocked(useSystemApi).mockReturnValue(useSystemApiMock);
+	});
+
+	afterEach(() => {
+		jest.clearAllMocks();
+	});
+
+	describe("alert", () => {
+		const setup = async () => {
+			useSystemApiMock.getSystem.mockResolvedValue({
+				id: "systemId",
+				displayName: "asdf",
+			});
+
+			const { wrapper } = getWrapper({
+				systemId: "systemId",
+			});
+
+			await flushPromises();
+
+			return {
+				wrapper,
+			};
+		};
+
+		it("should render alert component", async () => {
+			const { wrapper } = await setup();
+
+			const alert = wrapper.findComponent({ name: "v-alert" });
+
+			expect(alert.text()).toEqual(
+				'page-class-members.systemInfoText {"systemName":"asdf"}'
+			);
+		});
+	});
+
+	describe("text", () => {
+		it("should render text", () => {
+			const { wrapper } = getWrapper({
+				systemId: "systemId",
+			});
+
+			const text = wrapper.find('[data-testid="class-members-info-box-text"]');
+
+			expect(text.text()).toEqual(
+				"page-class-members.classMembersInfoBox.text"
+			);
+		});
+	});
+
+	describe("onMounted", () => {
+		it("should load the system", async () => {
+			getWrapper({
+				systemId: "systemId",
+			});
+
+			expect(useSystemApiMock.getSystem).toHaveBeenCalledWith("systemId");
+		});
+	});
+
+	describe("watch", () => {
+		const setup = () => {
+			const { wrapper } = getWrapper({
+				systemId: "systemId",
+			});
+
+			return {
+				wrapper,
+			};
+		};
+
+		it("should load the system when systemId changes", async () => {
+			const { wrapper } = setup();
+
+			wrapper.setProps({ systemId: "systemId2" });
+
+			await Vue.nextTick();
+
+			expect(useSystemApiMock.getSystem).toHaveBeenCalledWith("systemId");
+			expect(useSystemApiMock.getSystem).toHaveBeenCalledWith("systemId2");
+		});
+	});
+});
diff --git a/src/components/page-class-members/ClassMembersInfoBox.vue b/src/components/page-class-members/ClassMembersInfoBox.vue
new file mode 100644
index 0000000000..d715ce8ca3
--- /dev/null
+++ b/src/components/page-class-members/ClassMembersInfoBox.vue
@@ -0,0 +1,78 @@
+<template>
+	<div data-testid="class-members-info-box">
+		<v-alert v-show="hasSystem" light prominent text type="info" class="mb-0">
+			<div class="alert-text">
+				{{
+					t("page-class-members.systemInfoText", {
+						systemName,
+					})
+				}}
+			</div>
+		</v-alert>
+		<h2 class="text-h4">
+			{{ t("page-class-members.classMembersInfoBox.title") }}
+		</h2>
+		<RenderHTML
+			:html="t('page-class-members.classMembersInfoBox.text')"
+			data-testid="class-members-info-box-text"
+			component="div"
+		/>
+	</div>
+</template>
+<script lang="ts">
+import { useI18n } from "@/composables/i18n.composable";
+import { System, useSystemApi } from "@data-system";
+import {
+	computed,
+	ComputedRef,
+	defineComponent,
+	onMounted,
+	ref,
+	Ref,
+	watch,
+} from "vue";
+import { RenderHTML } from "@feature-render-html";
+
+export default defineComponent({
+	components: { RenderHTML },
+	props: {
+		systemId: {
+			type: String,
+			default: "",
+		},
+	},
+	setup(props) {
+		const { getSystem } = useSystemApi();
+		const { t } = useI18n();
+
+		const system: Ref<System | undefined> = ref();
+
+		onMounted(async () => {
+			if (props.systemId) {
+				system.value = await getSystem(props.systemId);
+			}
+		});
+
+		watch(
+			() => props.systemId,
+			async (value, oldValue) => {
+				if (value && value !== oldValue) {
+					system.value = await getSystem(props.systemId);
+				}
+			}
+		);
+
+		const hasSystem: ComputedRef<boolean> = computed(() => !!system.value);
+
+		const systemName: ComputedRef<string> = computed(() => {
+			return system.value?.displayName ?? "";
+		});
+
+		return {
+			t,
+			hasSystem,
+			systemName,
+		};
+	},
+});
+</script>
diff --git a/src/components/page-class-members/index.ts b/src/components/page-class-members/index.ts
new file mode 100644
index 0000000000..e382dbbd37
--- /dev/null
+++ b/src/components/page-class-members/index.ts
@@ -0,0 +1,3 @@
+import ClassMembersPage from "./ClassMembers.page.vue";
+
+export { ClassMembersPage };
diff --git a/src/components/topbar/MenuQrCode.vue b/src/components/topbar/MenuQrCode.vue
index a689f816e8..47045ab136 100644
--- a/src/components/topbar/MenuQrCode.vue
+++ b/src/components/topbar/MenuQrCode.vue
@@ -12,7 +12,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref } from "vue";
+import { ComponentPublicInstance, defineComponent, ref } from "vue";
 import { mdiPrinter } from "@mdi/js";
 
 export default defineComponent({
@@ -24,13 +24,13 @@ export default defineComponent({
 		},
 	},
 	setup() {
-		const qrCode = ref<HTMLDivElement | null>(null);
+		const qrCode = ref<ComponentPublicInstance<HTMLDivElement>>();
 
 		const openPrintMenu = () => {
 			const win = window.open();
 
 			if (qrCode.value !== null) {
-				win?.document.write(qrCode.value.innerHTML);
+				win?.document.write(qrCode.value!.$el.innerHTML);
 				win?.print();
 				win?.close();
 			}
diff --git a/src/components/ui-alert/SuccessAlert.unit.ts b/src/components/ui-alert/SuccessAlert.unit.ts
index eea5ef51d9..be8c78e8fb 100644
--- a/src/components/ui-alert/SuccessAlert.unit.ts
+++ b/src/components/ui-alert/SuccessAlert.unit.ts
@@ -22,7 +22,7 @@ describe("SuccessAlert", () => {
 
 	it("should pass correct color to filealert", () => {
 		const { wrapper } = setup();
-		console.log(wrapper.html());
+
 		const color = wrapper.findComponent(BaseAlert).attributes("color");
 
 		expect(color).toBe("success");
diff --git a/src/components/ui-board/BoardMenuActionEdit.vue b/src/components/ui-board/BoardMenuActionEdit.vue
index 48d6eade2b..c2eec44a85 100644
--- a/src/components/ui-board/BoardMenuActionEdit.vue
+++ b/src/components/ui-board/BoardMenuActionEdit.vue
@@ -1,11 +1,11 @@
 <template>
-	<BoardMenuAction :icon="mdiCogOutline" @click="onClick">
-		{{ $t("common.labels.settings") }}
+	<BoardMenuAction :icon="mdiPencilOutline" @click="onClick">
+		{{ $t("common.actions.edit") }}
 	</BoardMenuAction>
 </template>
 
 <script lang="ts">
-import { mdiCogOutline } from "@mdi/js";
+import { mdiPencilOutline } from "@mdi/js";
 import { BoardMenuAction } from "@ui-board";
 import { defineComponent } from "vue";
 
@@ -24,7 +24,7 @@ export default defineComponent({
 
 		return {
 			onClick,
-			mdiCogOutline,
+			mdiPencilOutline,
 		};
 	},
 });
diff --git a/src/locales/de.json b/src/locales/de.json
index 330047a4df..6d9d3b5ced 100644
--- a/src/locales/de.json
+++ b/src/locales/de.json
@@ -37,6 +37,7 @@
 	"common.labels.consent": "Einverständnis",
 	"common.labels.createdAt": "Erstellungsdatum",
 	"common.labels.course": "Kurs",
+	"common.labels.class": "Klasse",
 	"common.labels.date": "Datum",
 	"common.labels.expand": "expandieren",
 	"common.labels.expanded": "geöffnet",
@@ -82,6 +83,8 @@
 	"common.labels.notVisible": "Nicht sichtbar",
 	"common.labels.externalsource": "Quelle",
 	"common.labels.settings": "Einstellungen",
+	"common.labels.role": "Rolle",
+	"common.labels.unknown": "Unbekannt",
 	"common.placeholder.birthdate": "20.2.2002",
 	"common.placeholder.dateformat": "TT.MM.JJJJ",
 	"common.placeholder.email": "clara.fall@mail.de",
@@ -169,9 +172,10 @@
 	"components.administration.adminMigrationSection.startWarningCard.text": "Mit dem Start der Migration wird allen Schüler:innen und Lehrkräften Ihrer Schule der Wechsel des Anmeldesystems zu moin.schule ermöglicht. Anwender, die den Wechsel des Anmeldesystems durchgeführt haben, können sich anschließend nur noch über moin.schule anmelden.",
 	"components.administration.adminMigrationSection.startWarningCard.title": "Möchten Sie die Account-Migration zu moin.schule jetzt wirklich starten?",
 	"components.administration.externalToolsSection.header": "Externe Tools",
+	"components.administration.externalToolsSection.info": "Dieser Bereich ermöglicht es, Drittanbieter-Tools nahtlos in die Cloud zu integrieren. Mit den bereitgestellten Funktionen, können Tools hinzugefügt, bestehende zu aktualisiert oder nicht mehr benötigte entfernt werden. Durch die Einbindung externer Tools kann die Funktionalität und Effizienz der Cloud erweitert und an spezifische Bedürfnisse angepasst werden.",
 	"components.administration.externalToolsSection.description": "Die schulspezifischen Parameter für das externe Tool werden hier konfiguriert. Nach dem Speichern der Konfiguration ist das Tool innerhalb der Schule verfügbar.<br><br>\nDurch das Löschen einer Konfiguration wird das Tool der Schule wieder entzogen.<br><br>\nWeitere Informationen sind in unserem <a href=\"https://docs.dbildungscloud.de/pages/viewpage.action?pageId=246055610\" target=\"_blank\">Hilfebereich zu externen Tools</a> zu finden.",
 	"components.administration.externalToolsSection.table.header.status": "Status",
-	"components.administration.externalToolsSection.action.add": "Tool hinzufügen",
+	"components.administration.externalToolsSection.action.add": "Externes Tool hinzufügen",
 	"components.administration.externalToolsSection.action.edit": "Tool bearbeiten",
 	"components.administration.externalToolsSection.action.delete": "Tool löschen",
 	"components.administration.externalToolsSection.dialog.title": "Externes Tool entfernen?",
@@ -668,12 +672,13 @@
 	"pages.administration.teachers.index.remove.progress.description": "Bitte warten...",
 	"pages.administration.teachers.table.edit.ariaLabel": "Lehrkraft bearbeiten",
 	"pages.administration.school.index.title": "Schule verwalten",
-	"pages.administration.school.index.info": "Für einige Einstellungen geht es ",
-	"pages.administration.school.index.back": "hier zurück zur alten Administrationsseite",
+	"pages.administration.school.index.back": "Für einige Einstellungen geht es ",
+	"pages.administration.school.index.backLink": "hier zurück zur alten Administrationsseite",
+	"pages.administration.school.index.info": "Mit allen Änderungen und Einstellungen im Verwaltungsbereich wird bestätigt, dass diese durch einen weisungsberechtigten Schul-Admin mit Befugnis zu Anpassungen der Schule in der Cloud durchgeführt werden. Anpassungen durch den Schul-Admin gelten insofern als Weisung der Schule gegenüber dem Cloudbetreiber {instituteTitle}.",
 	"pages.administration.school.index.error": "Beim Laden der Schule ist ein Fehler aufgetreten",
 	"pages.administration.school.index.error.gracePeriodExceeded": "Die Wartefrist nach Abschluss der Migration ist abgelaufen",
 	"pages.administration.school.index.generalSettings": "Allgemeine Einstellungen",
-	"pages.administration.school.index.generalSettings.save": "Allgemeine Einstellungen speichern",
+	"pages.administration.school.index.generalSettings.save": "Einstellungen speichern",
 	"pages.administration.school.index.generalSettings.labels.nameOfSchool": "Name der Schule",
 	"pages.administration.school.index.generalSettings.labels.schoolNumber": "Schulnummer",
 	"pages.administration.school.index.generalSettings.labels.chooseACounty": "Bitte wählen Sie den Kreis, zu dem die Schule gehört",
@@ -744,6 +749,12 @@
 	"pages.administration.school.index.authSystems.delete": "{system} löschen",
 	"pages.administration.classes.index.title": "Klassen verwalten",
 	"pages.administration.classes.index.add": "Klasse hinzufügen",
+	"pages.administration.classes.deleteDialog.title": "Klasse löschen?",
+	"pages.administration.classes.deleteDialog.content": "Möchten Sie wirklich die Klasse \"<i>{itemName}</i>\" löschen?",
+	"pages.administration.classes.manage": "Klasse verwalten",
+	"pages.administration.classes.edit": "Klasse bearbeiten",
+	"pages.administration.classes.delete": "Klasse löschen",
+	"pages.administration.classes.createSuccessor": "Klasse in das nächste Schuljahr versetzen",
 	"pages.content._id.addToTopic": "Hinzufügen zu",
 	"pages.content._id.collection.selectElements": "Wählen Sie die Elemente, die Sie zum Thema hinzufügen möchten",
 	"pages.content._id.metadata.author": "Autor",
@@ -1021,5 +1032,9 @@
 	"feature-board-file-element.placeholder.uploadFile": "Datei hochladen",
 	"feature-board-external-tool-element.placeholder.selectTool": "Tool auswählen...",
 	"feature-board-external-tool-element.dialog.title": "Auswahl & Einstellungen",
-	"util-validators-invalid-url": "Bitte geben Sie eine gültige URL ein."
+	"util-validators-invalid-url": "Bitte geben Sie eine gültige URL ein.",
+	"page-class-members.title.info": "importiert aus einem externen System",
+	"page-class-members.systemInfoText": "Daten der Klasse werden mit {systemName} synchronisiert. Die Klassenliste kann vorübergehend veraltet sein, bis sie mit dem neusten Stand in {systemName} abgeglichen wird. Die Daten werden nach jeder Anmeldung eines Klassenmitglieds in der Niedersächsischen Bildungscloud aktualisiert.",
+	"page-class-members.classMembersInfoBox.title": "Schüler:innen sind noch nicht in der Niedersächsischen Bildungscloud?",
+	"page-class-members.classMembersInfoBox.text": "<p>Eine Einverständniserklärung bei der Registrierung von Schüler:innen muss <b>nicht</b> eingeholt werden. Die Nutzung der Niedersächsischen Bildungscloud ist im niedersächsischen Schulgesetz (§ 31 Abs. 5 NSchG) geregelt.<br><br>Falls die Schule die Daten der Nutzenden über ein externes System bezieht bzw. übermittelt bekommt, sind keine weiteren Schritte in der Cloud notwendig. Die Registrierung erfolgt über das externe System.<br><br>Anderenfalls können über den Verwaltungsbereich der Cloud Einladungen zur Registrierung per Link versendet werden:<br><ul><li>Versand von Registrierungslinks an die hinterlegten E-Mail-Adressen (auch direkt beim Importieren/Anlegen möglich)</li><li>Registrierungslinks als QR-Druckbogen drucken, ausschneiden und QR-Zettel an Schüler:innen verteilen</li><li>Einen oder mehrere Nutzer:innen auswählen, z.B. alle Schüler:innen einer Klasse, und dann die gewünschte Aktion durchführen</li><li>Alternativ möglich: Wechseln in den Bearbeiten-Modus des Nutzerprofils und den individuellen Registrierungslink direkt abrufen, um ihn händisch zu versenden</li></ul></p>"
 }
diff --git a/src/locales/en.json b/src/locales/en.json
index f424329836..50ac2a7d9b 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -38,6 +38,7 @@
 	"common.labels.consent": "Consent",
 	"common.labels.createdAt": "Created At",
 	"common.labels.course": "Course",
+	"common.labels.class": "Class",
 	"common.labels.expand": "expand",
 	"common.labels.expanded": "expanded",
 	"common.labels.email": "Email",
@@ -82,6 +83,8 @@
 	"common.labels.notVisible": "Not visible",
 	"common.labels.externalsource": "Source",
 	"common.labels.settings": "Setting",
+	"common.labels.role": "Role",
+	"common.labels.unknown": "Unknown",
 	"common.placeholder.birthdate": "20.2.2002",
 	"common.placeholder.dateformat": "DD.MM.YYYY",
 	"common.placeholder.email": "clara.fall@mail.de",
@@ -168,9 +171,10 @@
 	"components.administration.adminMigrationSection.startWarningCard.text": "With the start of the migration, all students and teachers at your school will be able to switch the registration system to moin.schule. Users who have changed the login system can then only log in via moin.schule.",
 	"components.administration.adminMigrationSection.startWarningCard.title": "Do you really want to start the account migration to moin.schule now?",
 	"components.administration.externalToolsSection.header": "External Tools",
+	"components.administration.externalToolsSection.info": "This area allows third-party tools to be seamlessly integrated into the cloud. With the functions provided, tools can be added, existing tools can be updated or tools that are no longer needed can be removed. By integrating external tools, the functionality and efficiency of the cloud can be extended and adapted to specific needs.",
 	"components.administration.externalToolsSection.description": "The school-specific parameters for the external tool are configured here. After saving the configuration, the tool will be available within the school.<br><br>\nDeleting a configuration will make the tool withdrawn from school.<br><br>\nFurther information is available in our <a href=\"https://docs.dbildungscloud.de/pages/viewpage.action?pageId=246055610\" target=\"_blank\">Help section on external tools</a>.",
 	"components.administration.externalToolsSection.table.header.status": "Status",
-	"components.administration.externalToolsSection.action.add": "Add Tool",
+	"components.administration.externalToolsSection.action.add": "Add External Tool",
 	"components.administration.externalToolsSection.action.edit": "Edit Tool",
 	"components.administration.externalToolsSection.action.delete": "Delete Tool",
 	"components.administration.externalToolsSection.dialog.title": "Remove External Tool",
@@ -665,13 +669,14 @@
 	"pages.administration.teachers.new.success": "Teacher successfully created!",
 	"pages.administration.teachers.new.title": "Add teacher",
 	"pages.administration.teachers.table.edit.ariaLabel": "Edit teacher",
-	"pages.administration.school.index.info": "For some settings go ",
-	"pages.administration.school.index.back": "back to the old administration page here",
+	"pages.administration.school.index.back": "For some settings go ",
+	"pages.administration.school.index.backLink": "back to the old administration page here",
+	"pages.administration.school.index.info": "With all changes and settings in the administration area, it is confirmed that these are carried out by a school admin with authority to make adjustments to the school in the cloud. Adjustments made by the school admin are deemed to be instructions from the school to the cloud operator {instituteTitle}.",
 	"pages.administration.school.index.title": "Manage school",
 	"pages.administration.school.index.error": "An error occured while loading the school",
 	"pages.administration.school.index.error.gracePeriodExceeded": "The grace period after finishing migration has expired",
 	"pages.administration.school.index.generalSettings": "General Settings",
-	"pages.administration.school.index.generalSettings.save": "Save general settings",
+	"pages.administration.school.index.generalSettings.save": "Save settings",
 	"pages.administration.school.index.generalSettings.labels.nameOfSchool": "Name of the school",
 	"pages.administration.school.index.generalSettings.labels.schoolNumber": "School number",
 	"pages.administration.school.index.generalSettings.labels.chooseACounty": "Please choose the county your school belongs to",
@@ -742,6 +747,12 @@
 	"pages.administration.school.index.authSystems.delete": "Delete {system}",
 	"pages.administration.classes.index.title": "Manage classes",
 	"pages.administration.classes.index.add": "Add class",
+	"pages.administration.classes.deleteDialog.title": "Delete class?",
+	"pages.administration.classes.deleteDialog.content": "Are you sure you want to delete class \"<i>{itemName}<i>\"?",
+	"pages.administration.classes.manage": "Manage class",
+	"pages.administration.classes.edit": "Edit class",
+	"pages.administration.classes.delete": "Delete class",
+	"pages.administration.classes.createSuccessor": "Move class to the next school year",
 	"pages.content._id.addToTopic": "To be added to",
 	"pages.content._id.collection.selectElements": "Select the items you want to add to the topic",
 	"pages.content._id.metadata.author": "Author",
@@ -1021,5 +1032,9 @@
 	"ui-confirmation-dialog.ask-delete.card": "Delete {type} {title}?",
 	"feature-board-file-element.placeholder.uploadFile": "Upload file",
 	"feature-board-external-tool-element.placeholder.selectTool": "Select Tool...",
-	"feature-board-external-tool-element.dialog.title": "Selection & Settings"
+	"feature-board-external-tool-element.dialog.title": "Selection & Settings",
+	"page-class-members.title.info": "imported from an external system",
+	"page-class-members.systemInfoText": "Class data is synchronized with {systemName}. The class list may be temporarily out of date until it is updated with the latest version in {systemName}. The data is updated every time a class member registers in the Niedersächsischen Bildungscloud.",
+	"page-class-members.classMembersInfoBox.title": "Students are not yet in the Niedersächsischen Bildungscloud?",
+	"page-class-members.classMembersInfoBox.text": "<p>A declaration of consent does <b>not</b> need to be obtained when registering students. The use of the Niedersächsischen Bildungscloud is regulated in the Lower Saxony Schools Act (Section 31 Para. 5 NSchG).<br><br>If the school obtains or receives the user's data via an external system, no further steps are necessary in the cloud. Registration takes place via the external system.<br><br>Otherwise, invitations to register can be sent via link via the administration area of the cloud:<br><ul><li>Sending registration links to the stored email addresses (also possible to create directly when importing)</li><li>Print registration links as QR print sheets, cut them out and distribute QR slips to students</li><li>Select one or more users, e.g. all students in a class , and then carry out the desired action</li><li>Alternatively possible: Switch to edit mode of the user profile and retrieve the individual registration link directly in order to send it manually</li></ul></p>"
 }
diff --git a/src/locales/es.json b/src/locales/es.json
index aa345d84c8..457b3a0a72 100644
--- a/src/locales/es.json
+++ b/src/locales/es.json
@@ -38,6 +38,7 @@
 	"common.labels.consent": "Consentimiento",
 	"common.labels.createdAt": "Creado en",
 	"common.labels.course": "Curso",
+	"common.labels.class": "Clase",
 	"common.labels.expand": "expandir",
 	"common.labels.expanded": "expandido",
 	"common.labels.email": "Correo electrónico",
@@ -82,6 +83,8 @@
 	"common.labels.notVisible": "No visible",
 	"common.labels.externalsource": "Fuente",
 	"common.labels.settings": "Ajustes",
+	"common.labels.role": "Papel",
+	"common.labels.unknown": "Desconocido",
 	"common.placeholder.birthdate": "20.2.2002",
 	"common.placeholder.dateformat": "DD.MM.AAAA",
 	"common.placeholder.email": "clara.fall@mail.de",
@@ -168,9 +171,10 @@
 	"components.administration.adminMigrationSection.startWarningCard.text": "Con el inicio de la migración, todos los estudiantes y profesores de su escuela podrán cambiar el sistema de registro a moin.schule. Los usuarios que hayan cambiado el sistema de inicio de sesión solo podrán iniciar sesión a través de moin.schule.",
 	"components.administration.adminMigrationSection.startWarningCard.title": "¿Realmente desea iniciar la migración de la cuenta a moin.schule ahora?",
 	"components.administration.externalToolsSection.header": "Herramientas Externas",
+	"components.administration.externalToolsSection.info": "Esta área permite integrar a la perfección herramientas de terceros en la nube. Con las funciones proporcionadas, se pueden añadir herramientas, actualizar las existentes o eliminar las que ya no sean necesarias. Mediante la integración de herramientas externas, la funcionalidad y la eficiencia de la nube pueden ampliarse y adaptarse a necesidades específicas.",
 	"components.administration.externalToolsSection.description": "Los parámetros específicos de la escuela para la herramienta externa se configuran aquí. Después de guardar la configuración, la herramienta estará disponible dentro de la escuela.<br><br>\nEliminar una configuración hará la herramienta retirada de la escuela.<br><br>\nMás información está disponible en nuestro <a href=\"https://docs.dbildungscloud.de/pages/viewpage.action?pageId=246055610\" target=\" _blank\">Sección de ayuda sobre herramientas externas</a>.",
 	"components.administration.externalToolsSection.table.header.status": "Estado",
-	"components.administration.externalToolsSection.action.add": "Agregar herramienta",
+	"components.administration.externalToolsSection.action.add": "Añadir Herramienta Externa",
 	"components.administration.externalToolsSection.action.edit": "Editar herramienta",
 	"components.administration.externalToolsSection.action.delete": "Eliminar herramienta",
 	"components.administration.externalToolsSection.dialog.title": "Quitar Herramienta Externa",
@@ -657,10 +661,11 @@
 	"pages.administration.school.index.title": "Administrar escuela",
 	"pages.administration.school.index.error": "Ocurrió un error al cargar la escuela",
 	"pages.administration.school.index.error.gracePeriodExceeded": "El período de gracia después de finalizar la migración ha expirado",
-	"pages.administration.school.index.info": "Para algunos ajustes ",
-	"pages.administration.school.index.back": "vuelva a la antigua página de administración aquí",
+	"pages.administration.school.index.back": "Para algunos ajustes ",
+	"pages.administration.school.index.backLink": "vuelva a la antigua página de administración aquí",
+	"pages.administration.school.index.info": "Con todos los cambios y ajustes en el área de administración, se confirma que estos son llevados a cabo por un administrador de la escuela autorizado para hacer ajustes en la escuela en la nube. Los ajustes realizados por el administrador de la escuela se consideran instrucciones de la escuela al operador de la nube {instituteTitle}.",
 	"pages.administration.school.index.generalSettings": "Configuración general",
-	"pages.administration.school.index.generalSettings.save": "Guardar la configuración general",
+	"pages.administration.school.index.generalSettings.save": "Guardar configuración",
 	"pages.administration.school.index.generalSettings.labels.nameOfSchool": "Nombre de la escuela",
 	"pages.administration.school.index.generalSettings.labels.schoolNumber": "Numero de la escuela",
 	"pages.administration.school.index.generalSettings.labels.chooseACounty": "Por favor, seleccione el distrito al que pertenece la escuela",
@@ -731,6 +736,12 @@
 	"pages.administration.school.index.authSystems.delete": "Eliminar {system}",
 	"pages.administration.classes.index.title": "Administrar clases",
 	"pages.administration.classes.index.add": "Agregar clase",
+	"pages.administration.classes.deleteDialog.title": "¿Eliminar clase?",
+	"pages.administration.classes.deleteDialog.content": "¿Está seguro de que desea eliminar la clase \"<i>{itemName}<i>\"?",
+	"pages.administration.classes.manage": "Administrar clase",
+	"pages.administration.classes.edit": "Editar clase",
+	"pages.administration.classes.delete": "Eliminar clase",
+	"pages.administration.classes.createSuccessor": "Mover la clase al próximo año escolar",
 	"pages.content._id.addToTopic": "Para ser añadido a",
 	"pages.content._id.collection.selectElements": "Selecciona los elementos que deses añadir al tema",
 	"pages.content._id.metadata.author": "Autor",
@@ -1017,5 +1028,9 @@
 	"ui-confirmation-dialog.ask-delete.card": "¿Eliminar {type} {title}?",
 	"feature-board-file-element.placeholder.uploadFile": "Cargar archivo",
 	"feature-board-external-tool-element.placeholder.selectTool": "Herramienta de selección...",
-	"feature-board-external-tool-element.dialog.title": "Selección y configuración"
+	"feature-board-external-tool-element.dialog.title": "Selección y configuración",
+	"page-class-members.title.info": "importado desde un sistema externo",
+	"page-class-members.systemInfoText": "Los datos de la clase se sincronizan con {systemName}. La lista de clases puede estar temporalmente desactualizada hasta que se actualice con la última versión en {systemName}. Los datos se actualizan cada vez que un miembro del grupo se registra en Niedersächsischen Bildungscloud.",
+	"page-class-members.classMembersInfoBox.title": "¿Los estudiantes aún no están en la Niedersächsischen Bildungscloud?",
+	"page-class-members.classMembersInfoBox.text": "<p><b>No</b> es necesario obtener una declaración de consentimiento al registrar estudiantes. El uso de Niedersächsischen Bildungscloud está regulado por la Ley de escuelas de Baja Sajonia (artículo 31, párrafo 5 de la NSchG).<br><br>Si la escuela obtiene o recibe los datos del usuario a través de un sistema externo, no es necesario realizar ningún otro paso en el proceso nube. El registro se realiza a través del sistema externo.<br><br>De lo contrario, las invitaciones para registrarse se pueden enviar mediante un enlace a través del área de administración de la nube:<br><ul><li>Envío de enlaces de registro a las direcciones de correo electrónico almacenadas (También es posible crear directamente al importar)</li><li>Imprima enlaces de registro como hojas de impresión QR, recórtelas y distribuya recibos QR a los estudiantes<li><li>Seleccione uno o más usuarios, p.e. todos los estudiantes de una clase y luego llevar a cabo la acción deseada</li><li>Alternativamente posible: cambiar al modo de edición del perfil de usuario y recuperar el enlace de registro individual directamente para enviarlo manualmente</li></ul></p>"
 }
diff --git a/src/locales/uk.json b/src/locales/uk.json
index 732fa4ef9f..7d3716ccac 100644
--- a/src/locales/uk.json
+++ b/src/locales/uk.json
@@ -37,6 +37,7 @@
 	"common.labels.complete.lastName": "Повне прізвище",
 	"common.labels.consent": "Згода",
 	"common.labels.course": "Курс",
+	"common.labels.class": "Клас",
 	"common.labels.createdAt": "Створено в",
 	"common.labels.description": "Опис",
 	"common.labels.email": "Електронна пошта",
@@ -82,6 +83,8 @@
 	"common.labels.notVisible": "Не видно",
 	"common.labels.externalsource": "Джерело",
 	"common.labels.settings": "Налаштування",
+	"common.labels.role": "Роль",
+	"common.labels.unknown": "Невідомий",
 	"common.placeholder.birthdate": "20.02.2002",
 	"common.placeholder.dateformat": "ДД.ММ.РРРР",
 	"common.placeholder.email": "clara.fall@mail.de",
@@ -169,9 +172,10 @@
 	"components.administration.adminMigrationSection.startWarningCard.text": "З початком міграції всі учні та вчителі вашої школи зможуть перейти з системи реєстрації на moin.schule. Користувачі, які змінили систему входу, зможуть увійти лише через moin.schule.",
 	"components.administration.adminMigrationSection.startWarningCard.title": "Ви справді хочете розпочати міграцію облікового запису до moin.schule зараз?",
 	"components.administration.externalToolsSection.header": "Зовнішні інструменти",
+	"components.administration.externalToolsSection.info": "Ця область дозволяє легко інтегрувати сторонні інструменти в хмару. За допомогою наданих функцій можна додавати інструменти, оновлювати існуючі або видаляти інструменти, які більше не потрібні. Інтегруючи зовнішні інструменти, можна розширити функціональність і ефективність хмари та адаптувати її до конкретних потреб.",
 	"components.administration.externalToolsSection.description": "Тут налаштовуються спеціальні параметри зовнішнього інструменту для школи. Після збереження конфігурації інструмент буде доступний у школі.<br><br>\nВидалення конфігурації призведе до інструмент вилучено зі школи.<br><br>\nДодаткову інформацію можна знайти на нашому сайті <a href=\"https://docs.dbildungscloud.de/pages/viewpage.action?pageId=246055610\" target=\" _blank\">Розділ довідки щодо зовнішніх інструментів</a>.",
 	"components.administration.externalToolsSection.table.header.status": "статус",
-	"components.administration.externalToolsSection.action.add": "додати інструмент",
+	"components.administration.externalToolsSection.action.add": "Додати зовнішній інструмент",
 	"components.administration.externalToolsSection.action.edit": "інструмент редагування",
 	"components.administration.externalToolsSection.action.delete": "Видалити інструменти",
 	"components.administration.externalToolsSection.dialog.title": "Видаліть зовнішній інструмент",
@@ -646,8 +650,9 @@
 	"pages.administration.school.index.authSystems.type": "Тип",
 	"pages.administration.school.index.authSystems.edit": "Редагувати {system}",
 	"pages.administration.school.index.authSystems.delete": "Видалити {system}",
-	"pages.administration.school.index.info": "Для деяких налаштувань ",
-	"pages.administration.school.index.back": "поверніться до старої сторінки адміністрування тут",
+	"pages.administration.school.index.back": "Для деяких налаштувань ",
+	"pages.administration.school.index.backLink": "поверніться до старої сторінки адміністрування тут",
+	"pages.administration.school.index.info": "Усі зміни та налаштування в області адміністрування підтверджують, що вони здійснені адміністратором школи, який має повноваження вносити корективи в хмарну систему школи. Налаштування, зроблені адміністратором школи, вважаються інструкціями від школи до оператора хмари {instituteTitle}.",
 	"pages.administration.school.index.error": "Під час завантаження школи сталася помилка",
 	"pages.administration.school.index.error.gracePeriodExceeded": "Пільговий період після завершення міграції минув",
 	"pages.administration.school.index.generalSettings": "Загальні параметри",
@@ -660,7 +665,7 @@
 	"pages.administration.school.index.generalSettings.labels.timezone": "Часовий пояс",
 	"pages.administration.school.index.generalSettings.labels.uploadSchoolLogo": "Завантажити логотип школи",
 	"pages.administration.school.index.generalSettings.languageHint": "Якщо мову школи не встановлено, застосовується системна мова за замовчуванням (німецька).",
-	"pages.administration.school.index.generalSettings.save": "Зберегти загальні параметри",
+	"pages.administration.school.index.generalSettings.save": "Зберегти налаштування",
 	"pages.administration.school.index.generalSettings.timezoneHint": "Щоб змінити часовий пояс, зверніться до одного з адміністраторів.",
 	"pages.administration.school.index.privacySettings": "Параметри конфіденційності",
 	"pages.administration.school.index.privacySettings.labels.chatFunction": "Активувати функцію чату",
@@ -822,6 +827,12 @@
 	"pages.administration.teachers.table.edit.ariaLabel": "Редагування вчителя",
 	"pages.administration.classes.index.title": "Керувати заняттями",
 	"pages.administration.classes.index.add": "Додати клас",
+	"pages.administration.classes.deleteDialog.title": "Видалити клас?",
+	"pages.administration.classes.deleteDialog.content": "Ви впевнені, що хочете видалити клас \"<i>{itemName}<i>\"?",
+	"pages.administration.classes.manage": "Керувати класом",
+	"pages.administration.classes.edit": "Редагувати клас",
+	"pages.administration.classes.delete": "Видалити клас",
+	"pages.administration.classes.createSuccessor": "Перенести клас на наступний навчальний рік",
 	"pages.content._id.addToTopic": "Для додавання в",
 	"pages.content._id.collection.selectElements": "Виберіть елементи, які треба додати до теми",
 	"pages.content._id.metadata.author": "Автор",
@@ -1047,5 +1058,9 @@
 	"ui-confirmation-dialog.ask-delete.card": "{type} {title} буде видалена. Ви впевнені, що хочете видалити?",
 	"feature-board-file-element.placeholder.uploadFile": "Cargar archivo",
 	"feature-board-external-tool-element.placeholder.selectTool": "Виберіть інструмент...",
-	"feature-board-external-tool-element.dialog.title": "Вибір і налаштування"
+	"feature-board-external-tool-element.dialog.title": "Вибір і налаштування",
+	"page-class-members.title.info": "імпортовані із зовнішньої системи",
+	"page-class-members.systemInfoText": "Дані класу синхронізуються з {systemName}. Список класів може бути тимчасово застарілим, поки його не буде оновлено останньою версією в {systemName}. Дані оновлюються кожного разу, коли учасник класу реєструється в Niedersächsischen Bildungscloud.",
+	"page-class-members.classMembersInfoBox.title": "Студенти ще не в Niedersächsischen Bildungscloud?",
+	"page-class-members.classMembersInfoBox.text": "<p>Заява про згоду <b>не</b> потрібна під час реєстрації студентів. Використання Niedersächsischen Bildungscloud регулюється Законом про школи Нижньої Саксонії (розділ 31, параграф 5 NSchG).<br><br>Якщо школа отримує або отримує дані користувача через зовнішню систему, жодних подальших дій у хмара. Реєстрація відбувається через зовнішню систему.<br><br>Інакше запрошення до реєстрації можна надіслати за посиланням через область адміністрування хмари:<br><ul><li>Надіслати посилання на реєстрацію на збережені адреси електронної пошти (також можна створювати безпосередньо під час імпорту)</li><li>Друкуйте реєстраційні посилання як QR-аркуші для друку, вирізайте їх і роздавайте QR-бланки студентам</li><li>Виберіть одного або кількох користувачів, напр. усіх студентів у класі, а потім виконайте потрібну дію</li><li>Як альтернатива: перейдіть у режим редагування профілю користувача та отримайте індивідуальне реєстраційне посилання безпосередньо, щоб надіслати його вручну</li></ul></p>"
 }
diff --git a/src/pages/administration/ClassOverview.page.unit.ts b/src/pages/administration/ClassOverview.page.unit.ts
index 5b9a24a22c..690f712554 100644
--- a/src/pages/administration/ClassOverview.page.unit.ts
+++ b/src/pages/administration/ClassOverview.page.unit.ts
@@ -1,20 +1,29 @@
+import AuthModule from "@/store/auth";
 import GroupModule from "@/store/group";
+import { ClassInfo, ClassRootType } from "@/store/types/class-info";
+import { Pagination } from "@/store/types/commons";
+import { SortOrder } from "@/store/types/sort-order.enum";
+import { AUTH_MODULE_KEY, GROUP_MODULE_KEY, I18N_KEY } from "@/utils/inject";
 import { createModuleMocks } from "@/utils/mock-store-module";
 import { classInfoFactory, i18nMock } from "@@/tests/test-utils";
-import { MountOptions, Wrapper, mount } from "@vue/test-utils";
-import ClassOverview from "./ClassOverview.page.vue";
-import { GROUP_MODULE_KEY, I18N_KEY } from "@/utils/inject";
 import createComponentMocks from "@@/tests/test-utils/componentMocks";
+import { mount, MountOptions, Wrapper } from "@vue/test-utils";
 import Vue from "vue";
-import { SortOrder } from "@/store/types/sort-order.enum";
-import { Pagination } from "@/store/types/commons";
+import ClassOverview from "./ClassOverview.page.vue";
 
 describe("ClassOverview", () => {
 	const getWrapper = (getters: Partial<GroupModule> = {}) => {
 		document.body.setAttribute("data-app", "true");
 
 		const groupModule = createModuleMocks(GroupModule, {
-			getClasses: [classInfoFactory.build()],
+			getClasses: [
+				classInfoFactory.build(),
+				classInfoFactory.build({
+					externalSourceName: undefined,
+					type: ClassRootType.Class,
+					isUpgradable: true,
+				}),
+			],
 			getPagination: {
 				limit: 10,
 				skip: 0,
@@ -23,6 +32,10 @@ describe("ClassOverview", () => {
 			...getters,
 		});
 
+		const authModule = createModuleMocks(AuthModule, {
+			getUserPermissions: ["CLASS_EDIT".toLowerCase()],
+		});
+
 		const wrapper: Wrapper<Vue> = mount(ClassOverview as MountOptions<Vue>, {
 			...createComponentMocks({
 				i18n: true,
@@ -30,6 +43,7 @@ describe("ClassOverview", () => {
 			provide: {
 				[I18N_KEY.valueOf()]: i18nMock,
 				[GROUP_MODULE_KEY.valueOf()]: groupModule,
+				[AUTH_MODULE_KEY.valueOf()]: authModule,
 			},
 		});
 
@@ -70,6 +84,37 @@ describe("ClassOverview", () => {
 		});
 	});
 
+	describe("when there are classes or groups to display", () => {
+		const setup = () => {
+			const classes: ClassInfo[] = [
+				classInfoFactory.build(),
+				classInfoFactory.build({
+					externalSourceName: undefined,
+					type: ClassRootType.Class,
+					isUpgradable: true,
+				}),
+			];
+
+			const { wrapper, groupModule } = getWrapper({
+				getClasses: classes,
+			});
+
+			return {
+				classes,
+				wrapper,
+				groupModule,
+			};
+		};
+
+		it("should display the entries in the table", async () => {
+			const { classes, wrapper } = setup();
+
+			const table = wrapper.find('[data-testid="admin-class-table"]');
+
+			expect(table.props("items")).toEqual(classes);
+		});
+	});
+
 	describe("onUpdateSortBy", () => {
 		describe("when changing the sortBy", () => {
 			const setup = () => {
@@ -87,9 +132,10 @@ describe("ClassOverview", () => {
 			it("should call store to change sort by", async () => {
 				const { sortBy, wrapper, groupModule } = setup();
 
-				await wrapper
+				wrapper
 					.find('[data-testid="admin-class-table"]')
 					.vm.$emit("update:sort-by", sortBy);
+				await Vue.nextTick();
 
 				expect(groupModule.loadClassesForSchool).toHaveBeenCalled();
 				expect(groupModule.setSortBy).toHaveBeenCalledWith(sortBy);
@@ -114,9 +160,10 @@ describe("ClassOverview", () => {
 			it("should call store to change sort order", async () => {
 				const { sortOrder, wrapper, groupModule } = setup();
 
-				await wrapper
+				wrapper
 					.find('[data-testid="admin-class-table"]')
 					.vm.$emit("update:sort-desc", sortOrder);
+				await Vue.nextTick();
 
 				expect(groupModule.loadClassesForSchool).toHaveBeenCalled();
 				expect(groupModule.setSortOrder).toHaveBeenCalledWith(SortOrder.DESC);
@@ -154,9 +201,10 @@ describe("ClassOverview", () => {
 			it("should call store to change the limit in pagination", async () => {
 				const { itemsPerPage, wrapper, groupModule, pagination } = setup();
 
-				await wrapper
+				wrapper
 					.find('[data-testid="admin-class-table"]')
 					.vm.$emit("update:items-per-page", itemsPerPage);
+				await Vue.nextTick();
 
 				expect(groupModule.loadClassesForSchool).toHaveBeenCalled();
 				expect(groupModule.setPagination).toHaveBeenCalledWith({
@@ -192,9 +240,10 @@ describe("ClassOverview", () => {
 			it("should call store to update current page", async () => {
 				const { page, wrapper, groupModule, pagination } = setup();
 
-				await wrapper
+				wrapper
 					.find('[data-testid="admin-class-table"]')
 					.vm.$emit("update:page", page);
+				await Vue.nextTick();
 
 				expect(groupModule.loadClassesForSchool).toHaveBeenCalled();
 				expect(groupModule.setPage).toHaveBeenCalledWith(page);
@@ -202,4 +251,273 @@ describe("ClassOverview", () => {
 			});
 		});
 	});
+
+	describe("action buttons", () => {
+		describe("when legacy classes are available", () => {
+			const setup = () => {
+				const { wrapper } = getWrapper();
+
+				return {
+					wrapper,
+				};
+			};
+
+			it("should render 4 buttons", () => {
+				const { wrapper } = setup();
+
+				const manageBtn = wrapper.find(
+					'[data-testid="legacy-class-table-manage-btn"]'
+				);
+
+				const editBtn = wrapper.find('[data-testid="class-table-edit-btn"]');
+
+				const deleteBtn = wrapper.find(
+					'[data-testid="class-table-delete-btn"]'
+				);
+
+				const successorBtn = wrapper.find(
+					'[data-testid="class-table-successor-btn"]'
+				);
+
+				expect(manageBtn.exists()).toBeTruthy();
+				expect(editBtn.exists()).toBeTruthy();
+				expect(deleteBtn.exists()).toBeTruthy();
+				expect(successorBtn.exists()).toBeTruthy();
+			});
+		});
+
+		describe("when no classes are available", () => {
+			const setup = () => {
+				const { wrapper } = getWrapper({
+					getClasses: [classInfoFactory.build()],
+				});
+
+				return {
+					wrapper,
+				};
+			};
+
+			it("should render only manage button which refers to members page", () => {
+				const { wrapper } = setup();
+
+				const manageBtn = wrapper.find(
+					'[data-testid="class-table-members-manage-btn"]'
+				);
+
+				const editBtn = wrapper.find('[data-testid="class-table-edit-btn"]');
+
+				const deleteBtn = wrapper.find(
+					'[data-testid="class-table-delete-btn"]'
+				);
+
+				const successorBtn = wrapper.find(
+					'[data-testid="class-table-successor-btn"]'
+				);
+
+				expect(manageBtn.exists()).toBeTruthy();
+				expect(editBtn.exists()).toBeFalsy();
+				expect(deleteBtn.exists()).toBeFalsy();
+				expect(successorBtn.exists()).toBeFalsy();
+			});
+		});
+
+		describe("when clicking on the manage class button", () => {
+			describe("when group class root type is class", () => {
+				const setup = () => {
+					const { wrapper, groupModule } = getWrapper();
+
+					const classId: string = groupModule.getClasses[1].id;
+
+					return {
+						wrapper,
+						classId,
+					};
+				};
+
+				it("should redirect to legacy class manage page", async () => {
+					const { wrapper, classId } = setup();
+
+					const manageBtn = wrapper.find(
+						'[data-testid="legacy-class-table-manage-btn"]'
+					);
+
+					expect(manageBtn.attributes().href).toStrictEqual(
+						`/administration/classes/${classId}/manage`
+					);
+					expect(
+						manageBtn.findComponent({ name: "router-link" }).exists()
+					).toBeFalsy();
+				});
+			});
+
+			describe("when class root type is group", () => {
+				const setup = () => {
+					const { wrapper, groupModule } = getWrapper();
+
+					const classId: string = groupModule.getClasses[0].id;
+
+					return {
+						wrapper,
+						classId,
+					};
+				};
+
+				it("should redirect to group class members page", async () => {
+					const { wrapper } = setup();
+
+					const manageBtn = wrapper.find(
+						'[data-testid="class-table-members-manage-btn"]'
+					);
+
+					const routerLink = manageBtn.findComponent({ name: "router-link" });
+
+					expect(manageBtn.attributes().href).toBeUndefined();
+					expect(routerLink.exists()).toBeTruthy();
+				});
+			});
+		});
+
+		describe("when clicking on the edit class button", () => {
+			const setup = () => {
+				const { wrapper, groupModule } = getWrapper();
+
+				const classId: string = groupModule.getClasses[1].id;
+
+				return {
+					wrapper,
+					classId,
+				};
+			};
+
+			it("should redirect to legacy class edit page", async () => {
+				const { wrapper, classId } = setup();
+
+				const editBtn = wrapper.find('[data-testid="class-table-edit-btn"]');
+
+				expect(editBtn.attributes().href).toStrictEqual(
+					`/administration/classes/${classId}/edit`
+				);
+			});
+		});
+
+		describe("when class is upgradable", () => {
+			describe("when clicking on the upgrade class button", () => {
+				const setup = () => {
+					const { wrapper, groupModule } = getWrapper();
+
+					const classId: string = groupModule.getClasses[1].id;
+
+					return {
+						wrapper,
+						classId,
+					};
+				};
+
+				it("should redirect to legacy class upgrade page", async () => {
+					const { wrapper, classId } = setup();
+
+					const successorBtn = wrapper.find(
+						'[data-testid="class-table-successor-btn"]'
+					);
+
+					expect(successorBtn.attributes().href).toStrictEqual(
+						`/administration/classes/${classId}/createSuccessor`
+					);
+				});
+			});
+		});
+
+		describe("when class is not upgradable", () => {
+			const setup = () => {
+				const { wrapper } = getWrapper({
+					getClasses: [
+						classInfoFactory.build({
+							externalSourceName: undefined,
+							type: ClassRootType.Class,
+							isUpgradable: false,
+						}),
+					],
+				});
+
+				return {
+					wrapper,
+				};
+			};
+
+			it("should display the upgrade button as disabled", () => {
+				const { wrapper } = setup();
+
+				const successorBtn = wrapper.find(
+					'[data-testid="class-table-successor-btn"]'
+				);
+
+				expect(successorBtn.props("disabled")).toEqual(true);
+			});
+		});
+
+		describe("when clicking on the delete class button", () => {
+			const setup = () => {
+				const { wrapper } = getWrapper();
+
+				return {
+					wrapper,
+				};
+			};
+
+			it("should open the delete dialog", async () => {
+				const { wrapper } = setup();
+
+				await wrapper
+					.find('[data-testid="class-table-delete-btn"]')
+					.trigger("click");
+
+				const dialog = wrapper.find('[data-testid="delete-dialog"]');
+
+				expect(dialog.props("isOpen")).toBeTruthy();
+			});
+		});
+
+		describe("when delete dialog is open", () => {
+			const setup = () => {
+				const { wrapper, groupModule } = getWrapper();
+
+				return {
+					wrapper,
+					groupModule,
+				};
+			};
+
+			describe("when clicking on cancel button", () => {
+				it("should not delete class", async () => {
+					const { wrapper, groupModule } = setup();
+
+					await wrapper
+						.find('[data-testid="class-table-delete-btn"]')
+						.trigger("click");
+
+					const dialog = wrapper.find('[data-testid="delete-dialog"]');
+
+					await dialog.find('[data-testid="dialog-cancel"').trigger("click");
+
+					expect(groupModule.deleteClass).not.toHaveBeenCalled();
+				});
+			});
+
+			describe("when clicking on confirm button", () => {
+				it("should delete class", async () => {
+					const { wrapper, groupModule } = setup();
+
+					await wrapper
+						.find('[data-testid="class-table-delete-btn"]')
+						.trigger("click");
+
+					const dialog = wrapper.find('[data-testid="delete-dialog"]');
+
+					await dialog.find('[data-testid="dialog-confirm"').trigger("click");
+
+					expect(groupModule.deleteClass).toHaveBeenCalled();
+				});
+			});
+		});
+	});
 });
diff --git a/src/pages/administration/ClassOverview.page.vue b/src/pages/administration/ClassOverview.page.vue
index 55114c83e6..e9654a09c4 100644
--- a/src/pages/administration/ClassOverview.page.vue
+++ b/src/pages/administration/ClassOverview.page.vue
@@ -21,7 +21,108 @@
 			@update:sort-desc="updateSortOrder"
 			@update:items-per-page="onUpdateItemsPerPage"
 			@update:page="onUpdateCurrentPage"
-		/>
+		>
+			<template v-slot:[`item.actions`]="{ item }">
+				<template v-if="showClassAction(item)">
+					<v-btn
+						:title="t('pages.administration.classes.manage')"
+						:aria-label="t('pages.administration.classes.manage')"
+						data-testid="legacy-class-table-manage-btn"
+						outlined
+						color="secondary"
+						small
+						:href="`/administration/classes/${item.id}/manage`"
+						class="mx-1 px-1"
+						min-width="0"
+					>
+						<v-icon>{{ mdiAccountGroupOutline }}</v-icon>
+					</v-btn>
+					<v-btn
+						:title="t('pages.administration.classes.edit')"
+						:aria-label="t('pages.administration.classes.edit')"
+						data-testid="class-table-edit-btn"
+						outlined
+						color="secondary"
+						small
+						:href="`/administration/classes/${item.id}/edit`"
+						class="mx-1 px-1"
+						min-width="0"
+					>
+						<v-icon>{{ mdiPencilOutline }}</v-icon>
+					</v-btn>
+					<v-btn
+						:title="$t('pages.administration.classes.delete')"
+						:aria-label="$t('pages.administration.classes.delete')"
+						data-testid="class-table-delete-btn"
+						outlined
+						color="secondary"
+						small
+						@click="onClickDeleteIcon(item)"
+						class="mx-1 px-1"
+						min-width="0"
+					>
+						<v-icon>{{ mdiTrashCanOutline }}</v-icon>
+					</v-btn>
+					<v-btn
+						:disabled="!item.isUpgradable"
+						:aria-label="t('pages.administration.classes.createSuccessor')"
+						:title="t('pages.administration.classes.createSuccessor')"
+						data-testid="class-table-successor-btn"
+						outlined
+						color="secondary"
+						small
+						:href="`/administration/classes/${item.id}/createSuccessor`"
+						class="mx-1 px-1"
+						min-width="0"
+					>
+						<v-icon>{{ mdiArrowUp }}</v-icon>
+					</v-btn>
+				</template>
+				<template v-else-if="showGroupAction(item)">
+					<v-btn
+						:title="t('pages.administration.classes.manage')"
+						:aria-label="t('pages.administration.classes.manage')"
+						data-testid="class-table-members-manage-btn"
+						outlined
+						color="secondary"
+						small
+						:to="{
+							name: 'administration-groups-classes-members',
+							params: { groupId: item.id },
+						}"
+						class="mx-1 px-1"
+						min-width="0"
+					>
+						<v-icon>{{ mdiAccountGroupOutline }}</v-icon>
+					</v-btn>
+				</template>
+			</template>
+		</v-data-table>
+
+		<v-custom-dialog
+			:is-open="isDeleteDialogOpen"
+			max-width="360"
+			data-testId="delete-dialog"
+			has-buttons
+			:buttons="['cancel', 'confirm']"
+			@dialog-closed="onCancelClassDeletion"
+			@dialog-confirmed="onConfirmClassDeletion"
+		>
+			<h2 slot="title" class="text-h4 my-2">
+				{{ t("pages.administration.classes.deleteDialog.title") }}
+			</h2>
+			<template #content>
+				<RenderHTML
+					class="text-md mt-2"
+					:html="
+						t('pages.administration.classes.deleteDialog.content', {
+							itemName: selectedItemName,
+						})
+					"
+					component="p"
+				/>
+			</template>
+		</v-custom-dialog>
 
 		<v-btn
 			class="my-5 button-start"
@@ -37,18 +138,39 @@
 <script lang="ts">
 import { Breadcrumb } from "@/components/templates/default-wireframe.types";
 import DefaultWireframe from "@/components/templates/DefaultWireframe.vue";
-import { computed, ComputedRef, defineComponent, onMounted } from "vue";
-import GroupModule from "@/store/group";
 import { useI18n } from "@/composables/i18n.composable";
+import GroupModule from "@/store/group";
+import { ClassInfo, ClassRootType } from "@/store/types/class-info";
 import { Pagination } from "@/store/types/commons";
-import { ClassInfo } from "@/store/types/class-info";
-import { GROUP_MODULE_KEY, injectStrict } from "@/utils/inject";
 import { SortOrder } from "@/store/types/sort-order.enum";
+import {
+	AUTH_MODULE_KEY,
+	GROUP_MODULE_KEY,
+	injectStrict,
+} from "@/utils/inject";
+import { RenderHTML } from "@feature-render-html";
+import {
+	mdiAccountGroupOutline,
+	mdiArrowUp,
+	mdiPencilOutline,
+	mdiTrashCanOutline,
+} from "@mdi/js";
+import {
+	computed,
+	ComputedRef,
+	defineComponent,
+	onMounted,
+	ref,
+	Ref,
+} from "vue";
+import VCustomDialog from "@/components/organisms/vCustomDialog.vue";
+import AuthModule from "@/store/auth";
 
 export default defineComponent({
-	components: { DefaultWireframe },
+	components: { DefaultWireframe, RenderHTML, VCustomDialog },
 	setup() {
 		const groupModule: GroupModule = injectStrict(GROUP_MODULE_KEY);
+		const authModule: AuthModule = injectStrict(AUTH_MODULE_KEY);
 
 		const { t } = useI18n();
 
@@ -72,6 +194,34 @@ export default defineComponent({
 			() => groupModule.getClasses
 		);
 
+		const hasPermission: ComputedRef<boolean> = computed(() =>
+			authModule.getUserPermissions.includes("CLASS_EDIT".toLowerCase())
+		);
+
+		const showClassAction = (item: ClassInfo) =>
+			hasPermission.value && item.type === ClassRootType.Class;
+
+		const showGroupAction = (item: ClassInfo) =>
+			hasPermission.value && item.type === ClassRootType.Group;
+
+		const isDeleteDialogOpen: Ref<boolean> = ref(false);
+
+		const selectedItem: Ref<ClassInfo | undefined> = ref();
+
+		const selectedItemName: ComputedRef<string> = computed(
+			() => selectedItem.value?.name || "???"
+		);
+
+		const onClickDeleteIcon = (selectedClass: ClassInfo) => {
+			selectedItem.value = selectedClass;
+			isDeleteDialogOpen.value = true;
+		};
+
+		const onCancelClassDeletion = () => {
+			selectedItem.value = undefined;
+			isDeleteDialogOpen.value = false;
+		};
+
 		const pagination: ComputedRef<Pagination> = computed(
 			() => groupModule.getPagination
 		);
@@ -98,8 +248,19 @@ export default defineComponent({
 				text: t("common.labels.teacher"),
 				sortable: true,
 			},
+			{
+				value: "actions",
+				text: "",
+				sortable: false,
+			},
 		];
 
+		const onConfirmClassDeletion = async () => {
+			if (selectedItem.value) {
+				await groupModule.deleteClass(selectedItem.value.id);
+			}
+		};
+
 		const onUpdateSortBy = async (sortBy: string) => {
 			groupModule.setSortBy(sortBy);
 			await groupModule.loadClassesForSchool();
@@ -121,9 +282,7 @@ export default defineComponent({
 		};
 
 		onMounted(() => {
-			(async () => {
-				await groupModule.loadClassesForSchool();
-			})();
+			groupModule.loadClassesForSchool();
 		});
 
 		return {
@@ -132,14 +291,27 @@ export default defineComponent({
 			breadcrumbs,
 			headers,
 			classes,
+			hasPermission,
+			showClassAction,
+			showGroupAction,
 			page,
 			sortBy,
 			sortOrder,
 			pagination,
+			selectedItem,
+			selectedItemName,
+			isDeleteDialogOpen,
+			onClickDeleteIcon,
+			onCancelClassDeletion,
+			onConfirmClassDeletion,
 			onUpdateSortBy,
 			updateSortOrder,
 			onUpdateCurrentPage,
 			onUpdateItemsPerPage,
+			mdiAccountGroupOutline,
+			mdiPencilOutline,
+			mdiTrashCanOutline,
+			mdiArrowUp,
 		};
 	},
 });
diff --git a/src/pages/administration/SchoolSettings.page.unit.ts b/src/pages/administration/SchoolSettings.page.unit.ts
new file mode 100644
index 0000000000..5edd41c3c7
--- /dev/null
+++ b/src/pages/administration/SchoolSettings.page.unit.ts
@@ -0,0 +1,194 @@
+import SchoolSettings from "./SchoolSettings.page.vue";
+import EnvConfigModule from "@/store/env-config";
+import SchoolsModule from "@/store/schools";
+import { createModuleMocks } from "@/utils/mock-store-module";
+import { shallowMount, Wrapper } from "@vue/test-utils";
+import createComponentMocks from "@@/tests/test-utils/componentMocks";
+import { FederalState } from "@/store/types/schools";
+import { mockSchool } from "@@/tests/test-utils/mockObjects";
+import {
+	I18N_KEY,
+	ENV_CONFIG_MODULE_KEY,
+	SCHOOLS_MODULE_KEY,
+} from "@/utils/inject";
+import { i18nMock } from "@@/tests/test-utils";
+import { useApplicationError } from "@/composables/application-error.composable";
+import VueRouter from "vue-router";
+
+jest.mock<typeof import("@/utils/pageTitle")>("@/utils/pageTitle", () => ({
+	buildPageTitle: (pageTitle) => pageTitle ?? "",
+}));
+
+describe("SchoolSettingsPage", () => {
+	let envConfigModule: jest.Mocked<EnvConfigModule>;
+	let schoolsModule: jest.Mocked<SchoolsModule>;
+
+	const mockFederalState: FederalState = {
+		_id: "00001234597947823",
+		counties: [
+			{
+				antaresKey: "BRB",
+				_id: "00001234597998793",
+				id: "00001234597998793",
+				countyId: "12051",
+				name: "Brandenburg an der Havel",
+			},
+			{
+				antaresKey: "CB",
+				_id: "00001234597913216",
+				id: "00001234597913216",
+				countyId: "12052",
+				name: "Cottbus",
+			},
+		],
+		name: "Brandenburg",
+		abbreviation: "BB",
+		logoUrl:
+			"https://upload.wikimedia.org/wikipedia/commons/thumb/4/45/Brandenburg_Wappen.svg/354px-Brandenburg_Wappen.svg.png",
+		__v: 0,
+	};
+
+	const mockSystems: any[] = [{ _id: "123", type: "itslearning" }];
+
+	const setup = (
+		envConfigGetters: Partial<EnvConfigModule> = {
+			getFeatureSchoolSanisUserMigrationEnabled: true,
+			getSchoolPolicyEnabled: true,
+			getSchoolTermsOfUseEnabled: true,
+		},
+		schoolGetters: Partial<SchoolsModule> = {}
+	) => {
+		schoolsModule = createModuleMocks(SchoolsModule, {
+			getSchool: mockSchool,
+			getFederalState: mockFederalState,
+			getSystems: mockSystems,
+			getCurrentYear: {
+				_id: "123",
+				name: "School Year 3000",
+				__v: 1,
+				startDate: "",
+				endDate: "",
+			},
+			...schoolGetters,
+		});
+
+		envConfigModule = createModuleMocks(EnvConfigModule, {
+			...envConfigGetters,
+		});
+
+		const componentOptions = createComponentMocks({ i18n: true });
+		const { localVue } = componentOptions;
+		localVue.use(VueRouter);
+		const router = new VueRouter({ routes: [{ path: "home" }] });
+
+		const wrapper: Wrapper<any> = shallowMount(SchoolSettings, {
+			...componentOptions,
+			provide: {
+				[I18N_KEY.valueOf()]: i18nMock,
+				[SCHOOLS_MODULE_KEY.valueOf()]: schoolsModule,
+				[ENV_CONFIG_MODULE_KEY.valueOf()]: envConfigModule,
+			},
+			router,
+		});
+
+		return wrapper;
+	};
+
+	describe("when feature school policy is enabled", () => {
+		it("should render privacy policy expansion panel", () => {
+			const wrapper = setup();
+
+			expect(wrapper.find('[data-testid="policy-panel"]').exists()).toBe(true);
+		});
+	});
+
+	describe("when feature school policy is disabled", () => {
+		it("should not render privacy policy expansion panel", () => {
+			const wrapper = setup({
+				getSchoolPolicyEnabled: false,
+			});
+
+			expect(wrapper.find('[data-testid="policy-panel"]').exists()).toBe(false);
+		});
+	});
+
+	describe("when feature school terms of use is enabled", () => {
+		it("should render terms of use expansion panel", () => {
+			const wrapper = setup();
+
+			expect(wrapper.find('[data-testid="terms-panel"]').exists()).toBe(true);
+		});
+	});
+
+	describe("when feature school terms of use is disabled", () => {
+		it("should not render terms of use expansion panel", () => {
+			const wrapper = setup({
+				getSchoolTermsOfUseEnabled: false,
+			});
+
+			expect(wrapper.find('[data-testid="terms-panel"]').exists()).toBe(false);
+		});
+	});
+
+	describe("when feature admin migration is enabled", () => {
+		it("should render admin migration expansion panel", () => {
+			const wrapper = setup();
+
+			expect(wrapper.find('[data-testid="migration-panel"]').exists()).toBe(
+				true
+			);
+		});
+	});
+
+	describe("when feature admin migration is disabled", () => {
+		it("should not render admin migration expansion panel", () => {
+			const wrapper = setup({
+				getFeatureSchoolSanisUserMigrationEnabled: false,
+			});
+
+			expect(wrapper.find('[data-testid="migration-panel"]').exists()).toBe(
+				false
+			);
+		});
+	});
+
+	it("should compute systems correctly", () => {
+		const wrapper = setup();
+
+		expect(Array.isArray(wrapper.vm.systems)).toBeTruthy();
+		expect(wrapper.vm.systems[0].type).toStrictEqual("itslearning");
+	});
+
+	it("should show skeleton while loading", () => {
+		const wrapper = setup(undefined, {
+			getLoading: true,
+		});
+
+		expect(
+			wrapper.find('[data-testid="systems-panel-skeleton"]').exists()
+		).toBe(true);
+	});
+
+	it("should render alert on error", () => {
+		const wrapper = setup(undefined, {
+			getError: useApplicationError().createApplicationError(500, "someKey"),
+		});
+
+		const noError = wrapper.find('[data-testid="no-error"]');
+		const errorAlert = wrapper.find('[data-testid="error-alert"]');
+
+		expect(noError.exists()).toBe(false);
+		expect(errorAlert.exists()).toBe(true);
+	});
+
+	it("should load needed data from server", async () => {
+		const fetchSystemsSpy = jest.spyOn(schoolsModule, "fetchSystems");
+		const fetchFederalStateSpy = jest.spyOn(schoolsModule, "fetchFederalState");
+
+		const wrapper = setup();
+		await wrapper.vm.$nextTick();
+
+		expect(fetchSystemsSpy).toHaveBeenCalled();
+		expect(fetchFederalStateSpy).toHaveBeenCalled();
+	});
+});
diff --git a/src/pages/administration/SchoolSettings.page.vue b/src/pages/administration/SchoolSettings.page.vue
index 7cc3b3dfab..bd1ee4ef5f 100644
--- a/src/pages/administration/SchoolSettings.page.vue
+++ b/src/pages/administration/SchoolSettings.page.vue
@@ -1,108 +1,243 @@
 <template>
 	<default-wireframe
-		:headline="$t('pages.administration.school.index.title')"
+		:headline="headline"
 		:breadcrumbs="breadcrumbs"
 		:full-width="false"
 	>
-		<v-alert v-if="schoolError" light prominent text type="error">
-			{{ $t(schoolError.translationKey) }}
+		<v-alert v-if="error" light text type="error" data-testid="error-alert">
+			<div class="alert-text">
+				{{ t(error.translationKey) }}
+			</div>
 		</v-alert>
-		<img
-			v-if="schoolError"
-			class="school-error-image"
-			role="presentation"
-			alt=""
-			src="@/assets/img/pc_repair.png"
-		/>
-		<div v-if="!schoolError" class="no-school-error">
-			<v-alert light prominent text type="info">
-				{{ $t("pages.administration.school.index.info") }}
-				<a href="/administration/school/">
-					{{ $t("pages.administration.school.index.back") }}
-				</a>
+		<div v-else data-testid="no-error">
+			<v-alert light text type="info" class="mb-4">
+				<div class="alert-text">
+					{{ t("pages.administration.school.index.back") }}
+					<a href="/administration/school/">
+						{{ t("pages.administration.school.index.backLink") }}</a
+					>.
+				</div>
 			</v-alert>
-			<h2 class="text-h4">
-				{{ currentSchoolYear }}
-			</h2>
-			<v-divider class="my-sm-6 my-md-3" />
-			<v-row>
-				<v-col>
-					<general-settings />
-					<school-policy v-if="schoolPolicyEnabled" />
-					<school-terms-of-use v-if="schoolTermsOfUseEnabled" />
-					<admin-migration-section v-if="isOauthMigrationEnabled" />
-					<template v-if="loading">
-						<v-skeleton-loader type="table-thead, table-row, table-row" />
-					</template>
-					<auth-systems v-else :systems="systems" />
-					<external-tools-section />
-				</v-col>
-			</v-row>
+			<v-alert light text type="info" class="mb-12">
+				<div class="alert-text">
+					{{ t("pages.administration.school.index.info", { instituteTitle }) }}
+				</div>
+			</v-alert>
+			<template>
+				<v-divider />
+				<v-expansion-panels
+					hover
+					accordion
+					flat
+					multiple
+					class="mb-9"
+					v-model="openedPanels"
+				>
+					<v-expansion-panel data-testid="general-settings-panel">
+						<v-expansion-panel-header hide-actions>
+							<template v-slot:default="{ open }">
+								<div class="text-h4">
+									{{ t("pages.administration.school.index.generalSettings") }}
+								</div>
+								<div class="v-expansion-panel-header__icon">
+									<v-icon>
+										<template v-if="!open">$mdiPlus</template>
+										<template v-else>$mdiMinus</template>
+									</v-icon>
+								</div>
+							</template>
+						</v-expansion-panel-header>
+						<v-expansion-panel-content eager>
+							<general-settings class="mt-9" />
+						</v-expansion-panel-content>
+						<v-divider />
+					</v-expansion-panel>
+
+					<v-expansion-panel
+						v-if="isFeatureSchoolPolicyEnabled"
+						data-testid="policy-panel"
+					>
+						<v-expansion-panel-header hide-actions>
+							<template v-slot:default="{ open }">
+								<div class="text-h4">
+									{{ t("common.words.privacyPolicy") }}
+								</div>
+								<div class="v-expansion-panel-header__icon">
+									<v-icon>
+										<template v-if="!open">$mdiPlus</template>
+										<template v-else>$mdiMinus</template>
+									</v-icon>
+								</div>
+							</template>
+						</v-expansion-panel-header>
+						<v-expansion-panel-content eager>
+							<school-policy class="mt-9" />
+						</v-expansion-panel-content>
+						<v-divider />
+					</v-expansion-panel>
+
+					<v-expansion-panel
+						v-if="isFeatureSchoolTermsOfUseEnabled"
+						data-testid="terms-panel"
+					>
+						<v-expansion-panel-header hide-actions>
+							<template v-slot:default="{ open }">
+								<div class="text-h4">
+									{{ t("common.words.termsOfUse") }}
+								</div>
+								<div class="v-expansion-panel-header__icon">
+									<v-icon>
+										<template v-if="!open">$mdiPlus</template>
+										<template v-else>$mdiMinus</template>
+									</v-icon>
+								</div>
+							</template>
+						</v-expansion-panel-header>
+						<v-expansion-panel-content eager>
+							<school-terms-of-use class="mt-9" />
+						</v-expansion-panel-content>
+						<v-divider />
+					</v-expansion-panel>
+
+					<v-expansion-panel
+						v-if="isFeatureOauthMigrationEnabled"
+						data-testid="migration-panel"
+					>
+						<v-expansion-panel-header hide-actions>
+							<template v-slot:default="{ open }">
+								<div class="text-h4">
+									{{
+										t("components.administration.adminMigrationSection.headers")
+									}}
+								</div>
+								<div class="v-expansion-panel-header__icon">
+									<v-icon>
+										<template v-if="!open">$mdiPlus</template>
+										<template v-else>$mdiMinus</template>
+									</v-icon>
+								</div>
+							</template>
+						</v-expansion-panel-header>
+						<v-expansion-panel-content eager>
+							<admin-migration-section class="mt-9" />
+						</v-expansion-panel-content>
+						<v-divider />
+					</v-expansion-panel>
+
+					<v-expansion-panel data-testid="systems-panel">
+						<v-expansion-panel-header hide-actions>
+							<template v-slot:default="{ open }">
+								<div class="text-h4">
+									{{ t("pages.administration.school.index.authSystems.title") }}
+								</div>
+								<div class="v-expansion-panel-header__icon">
+									<v-icon>
+										<template v-if="!open">$mdiPlus</template>
+										<template v-else>$mdiMinus</template>
+									</v-icon>
+								</div>
+							</template>
+						</v-expansion-panel-header>
+						<v-expansion-panel-content eager>
+							<template v-if="isLoading">
+								<v-skeleton-loader
+									class="mt-9"
+									type="table-thead, table-row, table-row"
+									data-testid="systems-panel-skeleton"
+								/>
+							</template>
+							<auth-systems class="mt-9" v-else :systems="systems" />
+						</v-expansion-panel-content>
+						<v-divider />
+					</v-expansion-panel>
+
+					<v-expansion-panel data-testid="tools-panel">
+						<v-expansion-panel-header hide-actions>
+							<template v-slot:default="{ open }">
+								<div class="text-h4">
+									{{
+										t("components.administration.externalToolsSection.header")
+									}}
+								</div>
+								<div class="v-expansion-panel-header__icon">
+									<v-icon>
+										<template v-if="!open">$mdiPlus</template>
+										<template v-else>$mdiMinus</template>
+									</v-icon>
+								</div>
+							</template>
+						</v-expansion-panel-header>
+						<v-expansion-panel-content eager>
+							<external-tools-section class="mt-9" />
+						</v-expansion-panel-content>
+						<v-divider />
+					</v-expansion-panel>
+				</v-expansion-panels>
+			</template>
 		</div>
 	</default-wireframe>
 </template>
 
-<script>
-import { envConfigModule, schoolsModule } from "@/store";
+<script lang="ts">
 import DefaultWireframe from "@/components/templates/DefaultWireframe.vue";
-import GeneralSettings from "@/components/organisms/administration/GeneralSettings";
+import GeneralSettings from "@/components/organisms/administration/GeneralSettings.vue";
 import SchoolPolicy from "@/components/organisms/administration/SchoolPolicy.vue";
-import AuthSystems from "@/components/organisms/administration/AuthSystems";
-import AdminMigrationSection from "@/components/administration/AdminMigrationSection";
-import ExternalToolsSection from "@/components/administration/ExternalToolSection";
-import { buildPageTitle } from "@/utils/pageTitle";
+import AuthSystems from "@/components/organisms/administration/AuthSystems.vue";
+import AdminMigrationSection from "@/components/administration/AdminMigrationSection.vue";
+import ExternalToolsSection from "@/components/administration/ExternalToolSection.vue";
 import SchoolTermsOfUse from "@/components/organisms/administration/SchoolTerms.vue";
+import { useI18n } from "@/composables/i18n.composable";
+import { School } from "@/store/types/schools";
+import { useTitle } from "@vueuse/core";
+import { Breadcrumb } from "@/components/templates/default-wireframe.types";
+import { ApplicationError } from "@/store/types/application-error";
+import { buildPageTitle } from "@/utils/pageTitle";
+import {
+	injectStrict,
+	ENV_CONFIG_MODULE_KEY,
+	SCHOOLS_MODULE_KEY,
+} from "@/utils/inject";
+import { computed, ComputedRef, defineComponent, ref, Ref, watch } from "vue";
+import { useRoute } from "vue-router/composables";
 
-export default {
+export default defineComponent({
+	name: "SchoolSettings",
 	components: {
+		DefaultWireframe,
 		ExternalToolsSection,
 		AdminMigrationSection,
 		GeneralSettings,
 		SchoolPolicy,
 		SchoolTermsOfUse,
 		AuthSystems,
-		DefaultWireframe,
-	},
-	data() {
-		return {
-			breadcrumbs: [
-				{
-					text: this.$t("pages.administration.index.title"),
-					href: "/administration/",
-				},
-				{
-					text: this.$t("pages.administration.school.index.title"),
-					disabled: true,
-				},
-			],
-		};
-	},
-	computed: {
-		systems() {
-			return schoolsModule.getSystems;
-		},
-		loading() {
-			return schoolsModule.getLoading;
-		},
-		school() {
-			return schoolsModule.getSchool;
-		},
-		schoolError() {
-			return schoolsModule.getError;
-		},
-		schoolPolicyEnabled: () => envConfigModule.getSchoolPolicyEnabled,
-		schoolTermsOfUseEnabled: () => envConfigModule.getSchoolTermsOfUseEnabled,
-		isOauthMigrationEnabled: () =>
-			envConfigModule.getFeatureSchoolSanisUserMigrationEnabled,
-		currentSchoolYear() {
-			return `${this.$t("common.words.schoolYear")} ${
-				schoolsModule.getCurrentYear.name
-			}`;
-		},
 	},
-	watch: {
-		school: {
-			handler: function (newSchool, oldSchool) {
+	setup() {
+		const { t } = useI18n();
+		const schoolsModule = injectStrict(SCHOOLS_MODULE_KEY);
+		const envConfigModule = injectStrict(ENV_CONFIG_MODULE_KEY);
+		const route = useRoute();
+
+		const headline: Ref<string> = ref(
+			t("pages.administration.school.index.title")
+		);
+		const pageTitle = buildPageTitle(headline.value);
+		useTitle(pageTitle);
+
+		const breadcrumbs: Ref<Breadcrumb[]> = ref([
+			{
+				text: t("pages.administration.index.title"),
+				href: "/administration/",
+			},
+			{
+				text: t("pages.administration.school.index.title"),
+				disabled: true,
+			},
+		]);
+
+		const school: ComputedRef<School> = computed(() => schoolsModule.getSchool);
+		watch(
+			school,
+			(newSchool, oldSchool) => {
 				// fetch school year and systems when the school is loaded
 				// if the school object gets a new reference (e.g. after updating it) do not reload the year or systems
 				if (
@@ -116,13 +251,79 @@ export default {
 					schoolsModule.fetchFederalState();
 				}
 			},
-			immediate: true,
-		},
-	},
-	mounted() {
-		document.title = buildPageTitle(
-			this.$t("pages.administration.school.index.title")
+			{ immediate: true }
 		);
+
+		const openedPanels: ComputedRef<number[]> = computed(() => {
+			// those need to be in order of code appearance since index is needed for panels v-model
+			const panels: string[] = [
+				"general",
+				"privacy",
+				"terms",
+				"migration",
+				"authentication",
+				"tools",
+			];
+
+			let openedPanelsArr: number[] = [];
+			if (route.query.openPanels) {
+				openedPanelsArr = route.query.openPanels
+					.toString()
+					.split(",")
+					.map((panelName) => panels.findIndex((p) => p === panelName));
+			}
+
+			return openedPanelsArr;
+		});
+		const systems: ComputedRef<any[]> = computed(
+			() => schoolsModule.getSystems
+		);
+		const isLoading: ComputedRef<boolean> = computed(
+			() => schoolsModule.getLoading
+		);
+		const error: ComputedRef<ApplicationError | null> = computed(
+			() => schoolsModule.getError
+		);
+		const isFeatureOauthMigrationEnabled: ComputedRef<boolean | undefined> =
+			computed(() => envConfigModule.getFeatureSchoolSanisUserMigrationEnabled);
+		const isFeatureSchoolPolicyEnabled: ComputedRef<boolean | undefined> =
+			computed(() => envConfigModule.getSchoolPolicyEnabled);
+		const isFeatureSchoolTermsOfUseEnabled: ComputedRef<boolean | undefined> =
+			computed(() => envConfigModule.getSchoolTermsOfUseEnabled);
+		const instituteTitle: ComputedRef<string> = computed(() => {
+			switch (envConfigModule.getTheme) {
+				case "n21":
+					return "Landesinitiative n-21: Schulen in Niedersachsen online e.V.";
+				case "thr":
+					return "Thüringer Institut für Lehrerfortbildung, Lehrplanentwicklung und Medien";
+				case "brb":
+					return "Dataport";
+				default:
+					return "Dataport";
+			}
+		});
+
+		return {
+			t,
+			headline,
+			breadcrumbs,
+			openedPanels,
+			school,
+			systems,
+			isLoading,
+			error,
+			isFeatureOauthMigrationEnabled,
+			isFeatureSchoolPolicyEnabled,
+			isFeatureSchoolTermsOfUseEnabled,
+			instituteTitle,
+		};
 	},
-};
+});
 </script>
+
+<style lang="scss" scoped>
+.alert-text {
+	color: var(--v-black-base) !important;
+	line-height: var(--line-height-lg) !important;
+}
+</style>
diff --git a/src/pages/administration/school-external-tool/SchoolExternalToolConfigurator.page.unit.ts b/src/pages/administration/school-external-tool/SchoolExternalToolConfigurator.page.unit.ts
index 1209ef6060..7d46792f9e 100644
--- a/src/pages/administration/school-external-tool/SchoolExternalToolConfigurator.page.unit.ts
+++ b/src/pages/administration/school-external-tool/SchoolExternalToolConfigurator.page.unit.ts
@@ -227,6 +227,7 @@ describe("SchoolExternalToolConfigurator", () => {
 
 				expect(routerPush).toHaveBeenCalledWith({
 					path: "/administration/school-settings",
+					query: { openPanels: "tools" },
 				});
 			});
 
@@ -310,6 +311,7 @@ describe("SchoolExternalToolConfigurator", () => {
 
 				expect(routerPush).toHaveBeenCalledWith({
 					path: "/administration/school-settings",
+					query: { openPanels: "tools" },
 				});
 			});
 
diff --git a/src/pages/administration/school-external-tool/SchoolExternalToolConfigurator.page.vue b/src/pages/administration/school-external-tool/SchoolExternalToolConfigurator.page.vue
index 52e35a2f03..da1a721e31 100644
--- a/src/pages/administration/school-external-tool/SchoolExternalToolConfigurator.page.vue
+++ b/src/pages/administration/school-external-tool/SchoolExternalToolConfigurator.page.vue
@@ -157,7 +157,10 @@ export default defineComponent({
 					status: "success",
 				});
 
-				await router.push({ path: schoolSetting.to });
+				await router.push({
+					path: schoolSetting.to,
+					query: { openPanels: "tools" },
+				});
 			}
 		};
 
diff --git a/src/pages/administration/school-settings.unit.js b/src/pages/administration/school-settings.unit.js
deleted file mode 100644
index 637d8b0655..0000000000
--- a/src/pages/administration/school-settings.unit.js
+++ /dev/null
@@ -1,370 +0,0 @@
-import SchoolPage from "./SchoolSettings.page.vue";
-import { envConfigModule, schoolsModule } from "@/store";
-import setupStores from "@@/tests/test-utils/setupStores";
-import EnvConfigModule from "@/store/env-config";
-import SchoolsModule from "@/store/schools";
-import AuthModule from "@/store/auth";
-import { ApplicationError } from "@/store/types/application-error";
-
-const school = {
-	_id: { $oid: "5f2987e020834114b8efd6f8" },
-	name: "Paul-Gerhardt-Gymnasium",
-	federalState: { $oid: "0000b186816abba584714c53" },
-	county: {
-		antaresKey: "BRB",
-		_id: { $oid: "5fa55eb53f472a2d986c8812" },
-		countyId: 12051,
-		name: "Brandenburg an der Havel",
-	},
-	systems: [
-		{ $oid: "0000d186816abba584714c91" },
-		{ $oid: "0000d186816abba584714c90" },
-	],
-	currentYear: {
-		_id: "5ebd6dc14a431f75ec9a3e77",
-		name: "2021/22",
-		startDate: "2021-08-01T00:00:00.000Z",
-		endDate: "2022-07-31T00:00:00.000Z",
-	},
-	purpose: "demo",
-	enableStudentTeamCreation: false,
-	officialSchoolNumber: "123",
-	features: {
-		rocketChat: true,
-		videoconference: true,
-		studentVisibility: true,
-	},
-	permissions: {
-		teacher: {
-			STUDENT_LIST: true,
-		},
-		student: {
-			LERNSTORE_VIEW: true,
-		},
-	},
-};
-
-const federalState = {
-	_id: "00001234597947823",
-	counties: [
-		{
-			antaresKey: "BRB",
-			_id: "00001234597998793",
-			countyId: 12051,
-			name: "Brandenburg an der Havel",
-		},
-		{
-			antaresKey: "CB",
-			_id: "00001234597913216",
-			countyId: 12052,
-			name: "Cottbus",
-		},
-	],
-	name: "Brandenburg",
-	abbreviation: "BB",
-	logoUr:
-		"https://upload.wikimedia.org/wikipedia/commons/thumb/4/45/Brandenburg_Wappen.svg/354px-Brandenburg_Wappen.svg.png",
-	__v: 0,
-};
-
-const systems = [{ _id: "123", type: "itslearning" }];
-
-const envs = {
-	NOT_AUTHENTICATED_REDIRECT_URL: "/login",
-	JWT_SHOW_TIMEOUT_WARNING_SECONDS: 3600,
-	JWT_TIMEOUT_SECONDS: 7200,
-	SC_THEME: "default",
-	LERNSTORE_MODE: "__vue_devtool_undefined__",
-	ADMIN_TABLES_DISPLAY_CONSENT_COLUMN: true,
-	FEATURE_ES_COLLECTIONS_ENABLED: true,
-	FEATURE_EXTENSIONS_ENABLED: true,
-	FEATURE_TEAMS_ENABLED: true,
-	FEATURE_ADMIN_TOGGLE_STUDENT_LERNSTORE_VIEW_ENABLED: true,
-	TEACHER_STUDENT_VISIBILITY__IS_CONFIGURABLE: true,
-	FEATURE_SCHOOL_POLICY_ENABLED_NEW: true,
-	FEATURE_SCHOOL_TERMS_OF_USE_ENABLED: true,
-	FEATURE_VIDEOCONFERENCE_ENABLED: true,
-	FEATURE_SCHOOL_SANIS_USER_MIGRATION_ENABLED: true,
-	ROCKETCHAT_SERVICE_ENABLED: true,
-	I18N__AVAILABLE_LANGUAGES: "de,en,es",
-	I18N__DEFAULT_LANGUAGE: "de",
-	I18N__DEFAULT_TIMEZONE: "Europe/Berlin",
-	I18N__FALLBACK_LANGUAGE: "de",
-	DOCUMENT_BASE_DIR: "https://s3.hidrive.strato.com/cloud-instances/",
-	SC_TITLE: "HPI Schul-Cloud",
-};
-
-const mockStore = {
-	"env-config": {
-		// actions: {
-		// 	fetchConsentVersions: jest.fn(),
-		// },
-	},
-	"consent-versions": {
-		getters: {
-			getConsentVersions: () => {
-				return [];
-			},
-			getLoading: () => {
-				return false;
-			},
-			getError: () => {
-				return null;
-			},
-		},
-		actions: {
-			addConsentVersion: jest.fn(),
-			fetchConsentVersions: jest.fn(),
-		},
-	},
-	schools: {
-		getters: {
-			getSchool: () => {
-				return school;
-			},
-			getLoading: () => {
-				return false;
-			},
-			getError: () => {
-				return null;
-			},
-			getSystems: () => {
-				return [{ _id: "123", type: "itslearning" }];
-			},
-			getCurrentYear: () => {
-				return school.currentYear;
-			},
-		},
-		actions: {
-			update: jest.fn(),
-		},
-	},
-};
-
-setupStores({
-	authModule: AuthModule,
-	envConfigModule: EnvConfigModule,
-	schoolsModule: SchoolsModule,
-});
-
-const fetchSystemsSpy = jest
-	.spyOn(schoolsModule, "fetchSystems")
-	.mockImplementation(() => {
-		schoolsModule.setSystems(systems);
-	});
-const fetchFederalStateSpy = jest
-	.spyOn(schoolsModule, "fetchFederalState")
-	.mockImplementation(() => {
-		schoolsModule.setFederalState(federalState);
-	});
-
-describe("SchoolSettingPage", () => {
-	beforeEach(() => {
-		schoolsModule.setSchool(school);
-		schoolsModule.setSystems([]);
-		schoolsModule.setFederalState(federalState);
-		envConfigModule.setEnvs(envs);
-	});
-
-	it("tests env var school policy being true", () => {
-		const wrapper = shallowMount(SchoolPage, {
-			...createComponentMocks({
-				i18n: true,
-				vuetify: true,
-				store: mockStore,
-			}),
-		});
-
-		expect(wrapper.vm.schoolPolicyEnabled).toBeTruthy();
-	});
-
-	it("tests env var school policy being false", () => {
-		envConfigModule.setEnvs({
-			FEATURE_SCHOOL_POLICY_ENABLED_NEW: false,
-			I18N__AVAILABLE_LANGUAGES: "de,en,es",
-		});
-		const wrapper = shallowMount(SchoolPage, {
-			...createComponentMocks({
-				i18n: true,
-				vuetify: true,
-				store: mockStore,
-			}),
-		});
-
-		expect(wrapper.vm.schoolPolicyEnabled).toBeFalsy();
-	});
-
-	it("tests env var terms of use being true", () => {
-		const wrapper = shallowMount(SchoolPage, {
-			...createComponentMocks({
-				i18n: true,
-				vuetify: true,
-				store: mockStore,
-			}),
-		});
-
-		expect(wrapper.vm.schoolTermsOfUseEnabled).toBeTruthy();
-	});
-
-	it("tests env var terms of use being false", () => {
-		envConfigModule.setEnvs({
-			FEATURE_SCHOOL_TERMS_OF_USE_ENABLED: false,
-			I18N__AVAILABLE_LANGUAGES: "de,en,es",
-		});
-		const wrapper = shallowMount(SchoolPage, {
-			...createComponentMocks({
-				i18n: true,
-				vuetify: true,
-				store: mockStore,
-			}),
-		});
-
-		expect(wrapper.vm.schoolTermsOfUseEnabled).toBeFalsy();
-	});
-
-	it("tests env var school oauth migration being true", () => {
-		envConfigModule.setEnvs({
-			FEATURE_SCHOOL_SANIS_USER_MIGRATION_ENABLED: true,
-			I18N__AVAILABLE_LANGUAGES: "de,en,es",
-		});
-		const wrapper = shallowMount(SchoolPage, {
-			...createComponentMocks({
-				i18n: true,
-				vuetify: true,
-				store: mockStore,
-			}),
-		});
-
-		expect(wrapper.vm.isOauthMigrationEnabled).toBe(true);
-	});
-
-	it("tests env var school oauth migration being false", () => {
-		envConfigModule.setEnvs({
-			FEATURE_SCHOOL_SANIS_USER_MIGRATION_ENABLED: false,
-			I18N__AVAILABLE_LANGUAGES: "de,en,es",
-		});
-		const wrapper = shallowMount(SchoolPage, {
-			...createComponentMocks({
-				i18n: true,
-				vuetify: true,
-				store: mockStore,
-			}),
-		});
-
-		expect(wrapper.vm.isOauthMigrationEnabled).toBe(false);
-	});
-
-	it("tests whether current school year is computed right", () => {
-		const wrapper = shallowMount(SchoolPage, {
-			...createComponentMocks({
-				i18n: true,
-				vuetify: true,
-			}),
-		});
-
-		expect(wrapper.vm.currentSchoolYear).toStrictEqual("Schuljahr 2021/22");
-	});
-
-	it("systems section should be visible and shows its data", () => {
-		const wrapper = shallowMount(SchoolPage, {
-			...createComponentMocks({
-				i18n: true,
-				vuetify: true,
-			}),
-		});
-
-		expect(Array.isArray(wrapper.vm.systems)).toBeTruthy();
-		expect(wrapper.vm.systems[0].type).toStrictEqual("itslearning");
-	});
-
-	it("AdminMigrationSection should be visible", () => {
-		const wrapper = shallowMount(SchoolPage, {
-			...createComponentMocks({
-				i18n: true,
-				vuetify: true,
-				store: mockStore,
-			}),
-		});
-
-		expect(
-			wrapper.findComponent({ name: "admin-migration-section" }).exists()
-		).toStrictEqual(true);
-	});
-
-	it("AdminMigrationSection should not be visible", () => {
-		envConfigModule.setEnvs({
-			FEATURE_SCHOOL_SANIS_USER_MIGRATION_ENABLED: false,
-			I18N__AVAILABLE_LANGUAGES: "de,en,es",
-		});
-		const wrapper = shallowMount(SchoolPage, {
-			...createComponentMocks({
-				i18n: true,
-				vuetify: true,
-			}),
-		});
-
-		expect(
-			wrapper.findComponent({ name: "admin-migration-section" }).exists()
-		).toStrictEqual(false);
-	});
-
-	it("should load skeleton while loading", () => {
-		schoolsModule.setLoading(true);
-		const wrapper = shallowMount(SchoolPage, {
-			...createComponentMocks({
-				i18n: true,
-				vuetify: true,
-			}),
-		});
-
-		expect(wrapper.findComponent({ name: "v-skeleton-loader" }).exists()).toBe(
-			true
-		);
-	});
-
-	it("error image should visible if schoolError occurred", () => {
-		schoolsModule.setError({ error: { message: "some errors" } });
-		const wrapper = shallowMount(SchoolPage, {
-			...createComponentMocks({
-				i18n: true,
-				vuetify: true,
-			}),
-		});
-
-		const schoolError = wrapper.find(".school-error-image");
-		const noSchoolError = wrapper.find(".no-school-error");
-
-		expect(schoolError.exists()).toBeTruthy();
-		expect(noSchoolError.exists()).toBeFalsy();
-	});
-
-	it("error message in should be visible if schoolError occurred", () => {
-		schoolsModule.setError(
-			new ApplicationError(500, "pages.administration.school.index.error")
-		);
-		const wrapper = shallowMount(SchoolPage, {
-			...createComponentMocks({
-				i18n: true,
-				vuetify: true,
-			}),
-		});
-
-		const text = wrapper.findComponent({ name: "v-alert" }).text();
-
-		expect(text).toStrictEqual(
-			"Beim Laden der Schule ist ein Fehler aufgetreten"
-		);
-	});
-
-	it("should load needed data form server", async () => {
-		const wrapper = shallowMount(SchoolPage, {
-			...createComponentMocks({
-				i18n: true,
-				vuetify: true,
-			}),
-		});
-		await wrapper.vm.$nextTick();
-		expect(fetchSystemsSpy).toHaveBeenCalled();
-		expect(fetchFederalStateSpy).toHaveBeenCalled();
-	});
-});
diff --git a/src/router/routes.ts b/src/router/routes.ts
index 63a0f970f8..1d0e8bb747 100644
--- a/src/router/routes.ts
+++ b/src/router/routes.ts
@@ -99,7 +99,17 @@ export const routes: Array<RouteConfig> = [
 		path: "/administration/groups/classes",
 		component: () => import("@/pages/administration/ClassOverview.page.vue"),
 		name: "administration-groups-classes",
-		beforeEnter: createPermissionGuard(["class_list"]),
+		beforeEnter: createPermissionGuard(["class_list", "group_list"]),
+	},
+	{
+		path: `/administration/groups/classes/:groupId(${REGEX_ID})`,
+		name: "administration-groups-classes-members",
+		component: async () =>
+			(await import("@page-class-members")).ClassMembersPage,
+		beforeEnter: createPermissionGuard(["group_view"]),
+		props: (route: Route) => ({
+			groupId: route.params.groupId,
+		}),
 	},
 	{
 		path: "/cfiles",
diff --git a/src/router/vue-client-route.js b/src/router/vue-client-route.js
index bd218f8241..eda489f3bb 100644
--- a/src/router/vue-client-route.js
+++ b/src/router/vue-client-route.js
@@ -24,6 +24,7 @@ const vueRoutes = [
 	`^/administration/school-settings/tool-configuration/${mongoId}/?$`,
 	`^/administration/migration/?$`,
 	`^/administration/groups/classes/?$`,
+	`^/administration/groups/classes/${mongoId}/?$`,
 	`^/cfiles/?$`,
 	`^/cfiles/teams/?$`,
 	`^/cfiles/teams/.+`,
diff --git a/src/serverApi/v3/api.ts b/src/serverApi/v3/api.ts
index 057eee0784..c11606e3c8 100644
--- a/src/serverApi/v3/api.ts
+++ b/src/serverApi/v3/api.ts
@@ -401,6 +401,12 @@ export interface ClassInfoResponse {
      * @memberof ClassInfoResponse
      */
     schoolYear?: string;
+    /**
+     * 
+     * @type {boolean}
+     * @memberof ClassInfoResponse
+     */
+    isUpgradable?: boolean;
 }
 
 /**
@@ -1463,6 +1469,25 @@ export interface EntityNotFoundError {
      */
     details?: object;
 }
+/**
+ * 
+ * @export
+ * @interface ExternalSourceResponse
+ */
+export interface ExternalSourceResponse {
+    /**
+     * 
+     * @type {string}
+     * @memberof ExternalSourceResponse
+     */
+    externalId: string;
+    /**
+     * 
+     * @type {string}
+     * @memberof ExternalSourceResponse
+     */
+    systemId: string;
+}
 /**
  * 
  * @export
@@ -1860,6 +1885,116 @@ export interface ForbiddenOperationError {
      */
     details?: object;
 }
+/**
+ * 
+ * @export
+ * @interface GroupResponse
+ */
+export interface GroupResponse {
+    /**
+     * 
+     * @type {string}
+     * @memberof GroupResponse
+     */
+    id: string;
+    /**
+     * 
+     * @type {string}
+     * @memberof GroupResponse
+     */
+    name: string;
+    /**
+     * 
+     * @type {string}
+     * @memberof GroupResponse
+     */
+    type: GroupResponseTypeEnum;
+    /**
+     * 
+     * @type {Array<GroupUserResponse>}
+     * @memberof GroupResponse
+     */
+    users: Array<GroupUserResponse>;
+    /**
+     * 
+     * @type {ExternalSourceResponse}
+     * @memberof GroupResponse
+     */
+    externalSource?: ExternalSourceResponse;
+    /**
+     * 
+     * @type {string}
+     * @memberof GroupResponse
+     */
+    organizationId?: string;
+}
+
+/**
+    * @export
+    * @enum {string}
+    */
+export enum GroupResponseTypeEnum {
+    Class = 'class'
+}
+
+/**
+ * 
+ * @export
+ * @interface GroupUserResponse
+ */
+export interface GroupUserResponse {
+    /**
+     * 
+     * @type {string}
+     * @memberof GroupUserResponse
+     */
+    id: string;
+    /**
+     * 
+     * @type {string}
+     * @memberof GroupUserResponse
+     */
+    firstName: string;
+    /**
+     * 
+     * @type {string}
+     * @memberof GroupUserResponse
+     */
+    lastName: string;
+    /**
+     * 
+     * @type {string}
+     * @memberof GroupUserResponse
+     */
+    role: GroupUserResponseRoleEnum;
+}
+
+/**
+    * @export
+    * @enum {string}
+    */
+export enum GroupUserResponseRoleEnum {
+    Administrator = 'administrator',
+    CourseAdministrator = 'courseAdministrator',
+    CourseStudent = 'courseStudent',
+    CourseSubstitutionTeacher = 'courseSubstitutionTeacher',
+    CourseTeacher = 'courseTeacher',
+    Demo = 'demo',
+    DemoStudent = 'demoStudent',
+    DemoTeacher = 'demoTeacher',
+    Expert = 'expert',
+    Helpdesk = 'helpdesk',
+    Student = 'student',
+    Superhero = 'superhero',
+    Teacher = 'teacher',
+    Teamadministrator = 'teamadministrator',
+    Teamexpert = 'teamexpert',
+    Teamleader = 'teamleader',
+    Teammember = 'teammember',
+    Teamowner = 'teamowner',
+    User = 'user'
+}
+
 /**
  * 
  * @export
@@ -3264,7 +3399,7 @@ export interface OauthConfigResponse {
      * @type {string}
      * @memberof OauthConfigResponse
      */
-    logoutEndpoint: string;
+    logoutEndpoint?: string;
     /**
      * Issuer
      * @type {string}
@@ -4098,7 +4233,7 @@ export interface SubmissionContainerContentBody {
      * @type {string}
      * @memberof SubmissionContainerContentBody
      */
-    dueDate?: string | null;
+    dueDate?: string;
 }
 /**
  * 
@@ -8861,6 +8996,44 @@ export const GroupApiAxiosParamCreator = function (configuration?: Configuration
 
 
     
+            setSearchParams(localVarUrlObj, localVarQueryParameter, options.query);
+            let headersFromBaseOptions = baseOptions && baseOptions.headers ? baseOptions.headers : {};
+            localVarRequestOptions.headers = {...localVarHeaderParameter, ...headersFromBaseOptions, ...options.headers};
+
+            return {
+                url: toPathString(localVarUrlObj),
+                options: localVarRequestOptions,
+            };
+        },
+        /**
+         * 
+         * @summary Get a group by id.
+         * @param {string} groupId 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        groupControllerGetGroup: async (groupId: string, options: any = {}): Promise<RequestArgs> => {
+            // verify required parameter 'groupId' is not null or undefined
+            assertParamExists('groupControllerGetGroup', 'groupId', groupId)
+            const localVarPath = `/groups/{groupId}`
+                .replace(`{${"groupId"}}`, encodeURIComponent(String(groupId)));
+            // use dummy base URL string because the URL constructor only accepts absolute URLs.
+            const localVarUrlObj = new URL(localVarPath, DUMMY_BASE_URL);
+            let baseOptions;
+            if (configuration) {
+                baseOptions = configuration.baseOptions;
+            }
+
+            const localVarRequestOptions = { method: 'GET', ...baseOptions, ...options};
+            const localVarHeaderParameter = {} as any;
+            const localVarQueryParameter = {} as any;
+
+            // authentication bearer required
+            // http bearer authentication required
+            await setBearerAuthToObject(localVarHeaderParameter, configuration)
+
+
+    
             setSearchParams(localVarUrlObj, localVarQueryParameter, options.query);
             let headersFromBaseOptions = baseOptions && baseOptions.headers ? baseOptions.headers : {};
             localVarRequestOptions.headers = {...localVarHeaderParameter, ...headersFromBaseOptions, ...options.headers};
@@ -8894,6 +9067,17 @@ export const GroupApiFp = function(configuration?: Configuration) {
             const localVarAxiosArgs = await localVarAxiosParamCreator.groupControllerFindClassesForSchool(skip, limit, sortOrder, sortBy, options);
             return createRequestFunction(localVarAxiosArgs, globalAxios, BASE_PATH, configuration);
         },
+        /**
+         * 
+         * @summary Get a group by id.
+         * @param {string} groupId 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        async groupControllerGetGroup(groupId: string, options?: any): Promise<(axios?: AxiosInstance, basePath?: string) => AxiosPromise<GroupResponse>> {
+            const localVarAxiosArgs = await localVarAxiosParamCreator.groupControllerGetGroup(groupId, options);
+            return createRequestFunction(localVarAxiosArgs, globalAxios, BASE_PATH, configuration);
+        },
     }
 };
 
@@ -8917,6 +9101,16 @@ export const GroupApiFactory = function (configuration?: Configuration, basePath
         groupControllerFindClassesForSchool(skip?: number, limit?: number, sortOrder?: 'asc' | 'desc', sortBy?: 'name' | 'externalSourceName', options?: any): AxiosPromise<ClassInfoSearchListResponse> {
             return localVarFp.groupControllerFindClassesForSchool(skip, limit, sortOrder, sortBy, options).then((request) => request(axios, basePath));
         },
+        /**
+         * 
+         * @summary Get a group by id.
+         * @param {string} groupId 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        groupControllerGetGroup(groupId: string, options?: any): AxiosPromise<GroupResponse> {
+            return localVarFp.groupControllerGetGroup(groupId, options).then((request) => request(axios, basePath));
+        },
     };
 };
 
@@ -8939,6 +9133,16 @@ export interface GroupApiInterface {
      */
     groupControllerFindClassesForSchool(skip?: number, limit?: number, sortOrder?: 'asc' | 'desc', sortBy?: 'name' | 'externalSourceName', options?: any): AxiosPromise<ClassInfoSearchListResponse>;
 
+    /**
+     * 
+     * @summary Get a group by id.
+     * @param {string} groupId 
+     * @param {*} [options] Override http request option.
+     * @throws {RequiredError}
+     * @memberof GroupApiInterface
+     */
+    groupControllerGetGroup(groupId: string, options?: any): AxiosPromise<GroupResponse>;
+
 }
 
 /**
@@ -8962,6 +9166,18 @@ export class GroupApi extends BaseAPI implements GroupApiInterface {
     public groupControllerFindClassesForSchool(skip?: number, limit?: number, sortOrder?: 'asc' | 'desc', sortBy?: 'name' | 'externalSourceName', options?: any) {
         return GroupApiFp(this.configuration).groupControllerFindClassesForSchool(skip, limit, sortOrder, sortBy, options).then((request) => request(this.axios, this.basePath));
     }
+
+    /**
+     * 
+     * @summary Get a group by id.
+     * @param {string} groupId 
+     * @param {*} [options] Override http request option.
+     * @throws {RequiredError}
+     * @memberof GroupApi
+     */
+    public groupControllerGetGroup(groupId: string, options?: any) {
+        return GroupApiFp(this.configuration).groupControllerGetGroup(groupId, options).then((request) => request(this.axios, this.basePath));
+    }
 }
 
 
diff --git a/src/store/group.ts b/src/store/group.ts
index cb9c751f24..d27dc28750 100644
--- a/src/store/group.ts
+++ b/src/store/group.ts
@@ -6,10 +6,10 @@ import {
 import { $axios, mapAxiosErrorToResponseError } from "@/utils/api";
 import { AxiosResponse } from "axios";
 import { Action, Module, Mutation, VuexModule } from "vuex-module-decorators";
+import { GroupMapper } from "./group/group.mapper";
 import { ClassInfo } from "./types/class-info";
 import { BusinessError, Pagination } from "./types/commons";
 import { SortOrder } from "./types/sort-order.enum";
-import { GroupMapper } from "./group/group.mapper";
 
 @Module({
 	name: "groupModule",
@@ -104,6 +104,29 @@ export default class GroupModule extends VuexModule {
 		this.page = page;
 	}
 
+	@Action
+	async deleteClass(classId: string): Promise<void> {
+		this.setLoading(true);
+
+		try {
+			await $axios.delete(`/v1/classes/${classId}`);
+
+			await this.loadClassesForSchool();
+		} catch (error) {
+			const apiError = mapAxiosErrorToResponseError(error);
+
+			console.log(apiError);
+
+			this.setBusinessError({
+				error: apiError,
+				statusCode: apiError.code,
+				message: `${apiError.type}: ${apiError.message}`,
+			});
+		}
+
+		this.setLoading(false);
+	}
+
 	@Action
 	async loadClassesForSchool(): Promise<void> {
 		this.setLoading(true);
diff --git a/src/store/group.unit.ts b/src/store/group.unit.ts
index 074411b43b..3c92c477b0 100644
--- a/src/store/group.unit.ts
+++ b/src/store/group.unit.ts
@@ -1,33 +1,38 @@
-import * as serverApi from "@/serverApi/v3/api";
 import {
 	ClassInfoResponse,
 	ClassInfoSearchListResponse,
 	GroupApiInterface,
 } from "@/serverApi/v3";
+import * as serverApi from "@/serverApi/v3/api";
+import { initializeAxios, mapAxiosErrorToResponseError } from "@/utils/api";
 import {
 	axiosErrorFactory,
 	businessErrorFactory,
 	classInfoResponseFactory,
 	classInfoSearchListResponseFactory,
 } from "@@/tests/test-utils";
+import { classInfoFactory } from "@@/tests/test-utils/factory/classInfoFactory";
+import { mockApiResponse } from "@@/tests/test-utils/mockApiResponse";
+import { createMock, DeepMocked } from "@golevelup/ts-jest";
+import { AxiosInstance } from "axios";
+import GroupModule from "./group";
 import { ClassInfo, ClassRootType } from "./types/class-info";
 import { BusinessError, Pagination } from "./types/commons";
 import { SortOrder } from "./types/sort-order.enum";
-import GroupModule from "./group";
-import { createMock, DeepMocked } from "@golevelup/ts-jest";
-import { mockApiResponse } from "@@/tests/test-utils/mockApiResponse";
-import { mapAxiosErrorToResponseError } from "@/utils/api";
 
 describe("GroupModule", () => {
 	let module: GroupModule;
 
 	let apiMock: DeepMocked<GroupApiInterface>;
+	let axiosMock: DeepMocked<AxiosInstance>;
 
 	beforeEach(() => {
 		module = new GroupModule({});
 
 		apiMock = createMock<GroupApiInterface>();
+		axiosMock = createMock<AxiosInstance>();
 
+		initializeAxios(axiosMock);
 		jest.spyOn(serverApi, "GroupApiFactory").mockReturnValue(apiMock);
 	});
 
@@ -257,4 +262,72 @@ describe("GroupModule", () => {
 			});
 		});
 	});
+
+	describe("deleteClass", () => {
+		describe("when called", () => {
+			const setup = () => {
+				const class1: ClassInfo = classInfoFactory.build();
+
+				module.setClasses([class1]);
+
+				return {
+					class1,
+				};
+			};
+
+			it("should delete the class", async () => {
+				const { class1 } = setup();
+
+				await module.deleteClass(class1.id);
+
+				expect(axiosMock.delete).toHaveBeenCalled();
+			});
+
+			it("should load classes for school", async () => {
+				const { class1 } = setup();
+
+				await module.deleteClass(class1.id);
+
+				expect(apiMock.groupControllerFindClassesForSchool).toHaveBeenCalled();
+			});
+		});
+
+		describe("when an error occurs during the api call", () => {
+			const setup = () => {
+				const error = axiosErrorFactory.build();
+				const apiError = mapAxiosErrorToResponseError(error);
+				const class1: ClassInfo = classInfoFactory.build();
+				const class2: ClassInfo = classInfoFactory.build();
+
+				module.setClasses([class1, class2]);
+				axiosMock.delete.mockRejectedValue(error);
+
+				return {
+					apiError,
+					class1,
+					class2,
+				};
+			};
+
+			it("should update the stores error", async () => {
+				const { apiError, class1 } = setup();
+
+				await module.deleteClass(class1.id);
+
+				expect(module.getBusinessError).toEqual<BusinessError>({
+					error: apiError,
+					statusCode: apiError.code,
+					message: `${apiError.type}: ${apiError.message}`,
+				});
+			});
+
+			it("should not remove the class from the store", async () => {
+				const { class1, class2 } = setup();
+
+				await module.deleteClass(class1.id);
+
+				expect(module.getClasses).toEqual([class1, class2]);
+			});
+		});
+	});
 });
diff --git a/src/store/group/group.mapper.ts b/src/store/group/group.mapper.ts
index 8335273cfd..602b759f63 100644
--- a/src/store/group/group.mapper.ts
+++ b/src/store/group/group.mapper.ts
@@ -18,6 +18,7 @@ export class GroupMapper {
 				teachers: classInfoResponse.teachers,
 				type: ClassRootTypeMapping[classInfoResponse.type],
 				id: classInfoResponse.id,
+				isUpgradable: classInfoResponse.isUpgradable,
 			})
 		);
 
diff --git a/src/store/types/class-info.ts b/src/store/types/class-info.ts
index 22080dd13a..bb36fe2ac2 100644
--- a/src/store/types/class-info.ts
+++ b/src/store/types/class-info.ts
@@ -4,6 +4,7 @@ export type ClassInfo = {
 	teachers: string[];
 	type: ClassRootType;
 	id: string;
+	isUpgradable?: boolean;
 };
 
 export enum ClassRootType {
diff --git a/src/utils/fileHelper.ts b/src/utils/fileHelper.ts
index fb18d57216..bd83fa566f 100644
--- a/src/utils/fileHelper.ts
+++ b/src/utils/fileHelper.ts
@@ -81,6 +81,10 @@ export function isVideoMimeType(mimeType: string): boolean {
 	);
 }
 
+export function isPdfMimeType(mimeType: string): boolean {
+	return mimeType === "application/pdf";
+}
+
 export function isAudioMimeType(mimeType: string): boolean {
 	return mimeType.startsWith("audio/");
 }
diff --git a/src/utils/fileHelper.unit.ts b/src/utils/fileHelper.unit.ts
index bcb121cbbe..230e018f8c 100644
--- a/src/utils/fileHelper.unit.ts
+++ b/src/utils/fileHelper.unit.ts
@@ -10,6 +10,7 @@ import {
 	getFileExtension,
 	isAudioMimeType,
 	isDownloadAllowed,
+	isPdfMimeType,
 	isPreviewPossible,
 	isVideoMimeType,
 } from "./fileHelper";
@@ -429,4 +430,40 @@ describe("@/utils/fileHelper", () => {
 			});
 		});
 	});
+
+	describe("isPdfMimeType", () => {
+		describe("when file has pdf mime type", () => {
+			it("should return true", () => {
+				const result = isPdfMimeType("application/pdf");
+
+				expect(result).toBe(true);
+			});
+		});
+
+		describe("when file has no pdf mime type", () => {
+			it("should return false", () => {
+				const result = isPdfMimeType("image/png");
+
+				expect(result).toBe(false);
+			});
+
+			it("should return false", () => {
+				const result = isPdfMimeType("application/");
+
+				expect(result).toBe(false);
+			});
+
+			it("should return false", () => {
+				const result = isPdfMimeType(" ");
+
+				expect(result).toBe(false);
+			});
+
+			it("should return false", () => {
+				const result = isPdfMimeType("");
+
+				expect(result).toBe(false);
+			});
+		});
+	});
 });
diff --git a/tests/test-utils/factory/classInfoFactory.ts b/tests/test-utils/factory/classInfoFactory.ts
index adbaf1b509..3d44a9797c 100644
--- a/tests/test-utils/factory/classInfoFactory.ts
+++ b/tests/test-utils/factory/classInfoFactory.ts
@@ -5,6 +5,6 @@ export const classInfoFactory = Factory.define<ClassInfo>(({ sequence }) => ({
 	name: `className${sequence}`,
 	externalSourceName: "Source",
 	teachers: ["TestTeacher"],
-	type: ClassRootType.Class,
+	type: ClassRootType.Group,
 	id: `id-${sequence}`,
 }));
diff --git a/tests/test-utils/factory/groupFactory.ts b/tests/test-utils/factory/groupFactory.ts
new file mode 100644
index 0000000000..1b0515b078
--- /dev/null
+++ b/tests/test-utils/factory/groupFactory.ts
@@ -0,0 +1,21 @@
+import { Factory } from "fishery";
+import { Group, GroupType, GroupUserRole } from "@data-group";
+
+export const groupFactory = Factory.define<Group>(({ sequence }) => ({
+	id: `group-${sequence}`,
+	name: `Group ${sequence}`,
+	type: GroupType.Class,
+	organizationId: `organization-${sequence}`,
+	users: [
+		{
+			id: `user-${sequence}`,
+			firstName: `Users firstname ${sequence}`,
+			lastName: `Users lastname ${sequence}`,
+			role: GroupUserRole.Student,
+		},
+	],
+	externalSource: {
+		externalId: `external-id-${sequence}`,
+		systemId: `system-id-${sequence}`,
+	},
+}));
diff --git a/tests/test-utils/factory/groupResponseFactory.ts b/tests/test-utils/factory/groupResponseFactory.ts
new file mode 100644
index 0000000000..f55d9d3101
--- /dev/null
+++ b/tests/test-utils/factory/groupResponseFactory.ts
@@ -0,0 +1,27 @@
+import {
+	GroupResponse,
+	GroupResponseTypeEnum,
+	GroupUserResponseRoleEnum,
+} from "@/serverApi/v3";
+import { Factory } from "fishery";
+
+export const groupResponseFactory = Factory.define<GroupResponse>(
+	({ sequence }) => ({
+		id: `group-${sequence}`,
+		name: `Group ${sequence}`,
+		type: GroupResponseTypeEnum.Class,
+		organizationId: `organization-${sequence}`,
+		users: [
+			{
+				id: `user-${sequence}`,
+				firstName: `Users firstname ${sequence}`,
+				lastName: `Users lastname ${sequence}`,
+				role: GroupUserResponseRoleEnum.Student,
+			},
+		],
+		externalSource: {
+			externalId: `external-id-${sequence}`,
+			systemId: `system-id-${sequence}`,
+		},
+	})
+);
diff --git a/tests/test-utils/factory/index.ts b/tests/test-utils/factory/index.ts
index 4c1ccfa61b..f374d67408 100644
--- a/tests/test-utils/factory/index.ts
+++ b/tests/test-utils/factory/index.ts
@@ -42,3 +42,5 @@ export * from "./videoConferenceInfoFactory";
 export * from "./videoConferenceInfoResponseFactory";
 export * from "./videoConferenceJoinResponseFactory";
 export * from "./toolReferenceResponseFactory";
+export * from "./groupResponseFactory";
+export * from "./groupFactory";
diff --git a/tsconfig.json b/tsconfig.json
index 99d972f024..a0c2321d40 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -19,6 +19,8 @@
 		"paths": {
 			"@data-board": ["src/components/data-board"],
 			"@data-external-tool": ["src/components/data-external-tool"],
+			"@data-group": ["src/components/data-group"],
+			"@data-system": ["src/components/data-system"],
 			"@feature-board-file-element": [
 				"src/components/feature-board-file-element"
 			],
@@ -46,6 +48,7 @@
 			"@util-board": ["src/components/util-board"],
 			"@util-validators": ["src/components/util-validators"],
 			"@page-board": ["src/components/page-board"],
+			"@page-class-members": ["src/components/page-class-members"],
 			"@/*": ["src/*"],
 			"@@/*": ["*"]
 		},
diff --git a/vue.config.js b/vue.config.js
index fd93d2a3d8..64aa926ac4 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -22,6 +22,8 @@ module.exports = defineConfig({
 			alias: {
 				"@data-board": getDir("src/components/data-board"),
 				"@data-external-tool": getDir("src/components/data-external-tool"),
+				"@data-group": getDir("src/components/data-group"),
+				"@data-system": getDir("src/components/data-system"),
 				"@feature-board-file-element": getDir(
 					"src/components/feature-board-file-element"
 				),
@@ -52,6 +54,7 @@ module.exports = defineConfig({
 				"@util-board": getDir("src/components/util-board"),
 				"@util-validators": getDir("src/components/util-validators"),
 				"@page-board": getDir("src/components/page-board"),
+				"@page-class-members": getDir("src/components/page-class-members"),
 			},
 			extensions: [".js", ".ts", ".vue", ".json"],
 			plugins: [new ThemeResolverPlugin(__dirname, replacements)],