diff --git a/src/components/feature-board-file-element/FileContentElement.unit.ts b/src/components/feature-board-file-element/FileContentElement.unit.ts
index 0aecf000af..80742e1dac 100644
--- a/src/components/feature-board-file-element/FileContentElement.unit.ts
+++ b/src/components/feature-board-file-element/FileContentElement.unit.ts
@@ -1,4 +1,8 @@
-import { FileRecordScanStatus, PreviewStatus } from "@/fileStorageApi/v3";
+import {
+	FileRecordScanStatus,
+	PreviewStatus,
+	PreviewWidth,
+} from "@/fileStorageApi/v3";
 import NotifierModule from "@/store/notifier";
 import { AnyContentElement } from "@/types/board/ContentElement";
 import { convertDownloadToPreviewUrl } from "@/utils/fileHelper";
@@ -10,8 +14,8 @@ import { fileElementResponseFactory } from "@@/tests/test-utils/factory/fileElem
 import { fileRecordResponseFactory } from "@@/tests/test-utils/factory/filerecordResponse.factory";
 import { MountOptions, shallowMount } from "@vue/test-utils";
 import Vue from "vue";
-import FileContent from "./content/FileContent.vue";
 import FileContentElement from "./FileContentElement.vue";
+import FileContent from "./content/FileContent.vue";
 import { FileProperties } from "./shared/types/file-properties";
 import FileUpload from "./upload/FileUpload.vue";
 
@@ -131,7 +135,10 @@ describe("FileContentElement", () => {
 					name: fileRecordResponse.name,
 					isDownloadAllowed: true,
 					url: fileRecordResponse.url,
-					previewUrl: convertDownloadToPreviewUrl(fileRecordResponse.url),
+					previewUrl: convertDownloadToPreviewUrl(
+						fileRecordResponse.url,
+						PreviewWidth._500
+					),
 					size: fileRecordResponse.size,
 					previewStatus: fileRecordResponse.previewStatus,
 					element,
@@ -441,7 +448,10 @@ describe("FileContentElement", () => {
 					name: fileRecordResponse.name,
 					isDownloadAllowed: true,
 					url: fileRecordResponse.url,
-					previewUrl: convertDownloadToPreviewUrl(fileRecordResponse.url),
+					previewUrl: convertDownloadToPreviewUrl(
+						fileRecordResponse.url,
+						PreviewWidth._500
+					),
 					size: fileRecordResponse.size,
 					previewStatus: fileRecordResponse.previewStatus,
 					element,
diff --git a/src/components/feature-board-file-element/FileContentElement.vue b/src/components/feature-board-file-element/FileContentElement.vue
index 41bd32e0b7..7ce005a3c0 100644
--- a/src/components/feature-board-file-element/FileContentElement.vue
+++ b/src/components/feature-board-file-element/FileContentElement.vue
@@ -35,7 +35,7 @@
 </template>
 
 <script lang="ts">
-import { FileRecordParentType } from "@/fileStorageApi/v3";
+import { FileRecordParentType, PreviewWidth } from "@/fileStorageApi/v3";
 import { FileElementResponse } from "@/serverApi/v3";
 import {
 	convertDownloadToPreviewUrl,
@@ -84,7 +84,7 @@ export default defineComponent({
 			}
 
 			const previewUrl = isPreviewPossible(fileRecord.value?.previewStatus)
-				? convertDownloadToPreviewUrl(fileRecord.value.url)
+				? convertDownloadToPreviewUrl(fileRecord.value.url, PreviewWidth._500)
 				: undefined;
 
 			return {
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 44caed6689..3cad2add66 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,8 +1,8 @@
 import { fileElementResponseFactory } from "@@/tests/test-utils";
 import createComponentMocks from "@@/tests/test-utils/componentMocks";
 import { shallowMount } from "@vue/test-utils";
-import FileDescription from "./file-description/FileDescription.vue";
 import FileDisplay from "./FileDisplay.vue";
+import FileDescription from "./file-description/FileDescription.vue";
 import ImageDisplay from "./image-display/ImageDisplay.vue";
 
 describe("FileDisplay", () => {
@@ -48,6 +48,7 @@ describe("FileDisplay", () => {
 			const { wrapper, fileNameProp, previewUrlProp } = setup();
 
 			const props = wrapper.findComponent(ImageDisplay).attributes();
+
 			expect(props.name).toBe(fileNameProp);
 			expect(props.previewurl).toBe(previewUrlProp);
 			expect(props.iseditmode).toBe("true");
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 fa497c7bc0..6fbc88eef1 100644
--- a/src/components/feature-board-file-element/content/display/FileDisplay.vue
+++ b/src/components/feature-board-file-element/content/display/FileDisplay.vue
@@ -2,6 +2,7 @@
 	<div>
 		<ImageDisplay
 			v-if="fileProperties.previewUrl"
+			:url="fileProperties.url"
 			:preview-url="fileProperties.previewUrl"
 			:name="fileProperties.name"
 			:is-edit-mode="isEditMode"
diff --git a/src/components/feature-board-file-element/content/display/image-display/ImageDisplay.unit.ts b/src/components/feature-board-file-element/content/display/image-display/ImageDisplay.unit.ts
index 5600b633e0..cd1da23632 100644
--- a/src/components/feature-board-file-element/content/display/image-display/ImageDisplay.unit.ts
+++ b/src/components/feature-board-file-element/content/display/image-display/ImageDisplay.unit.ts
@@ -1,9 +1,20 @@
+import { convertDownloadToPreviewUrl } from "@/utils/fileHelper";
 import { I18N_KEY } from "@/utils/inject";
 import { fileElementResponseFactory, i18nMock } from "@@/tests/test-utils";
 import createComponentMocks from "@@/tests/test-utils/componentMocks";
+import { LightBoxOptions, useLightBox } from "@ui-light-box";
 import { shallowMount } from "@vue/test-utils";
+import { nextTick, ref } from "vue";
 import ImageDisplay from "./ImageDisplay.vue";
 
+jest.mock("@ui-light-box");
+jest.mock("@/utils/fileHelper");
+
+const mockedUseLightBox = jest.mocked(useLightBox);
+const mockedConvertDownloadToPreviewUrl = jest.mocked(
+	convertDownloadToPreviewUrl
+);
+
 describe("ImageDisplay", () => {
 	const setup = (props: { isEditMode: boolean; alternativeText?: string }) => {
 		document.body.setAttribute("data-app", "true");
@@ -12,13 +23,23 @@ describe("ImageDisplay", () => {
 			content: { alternativeText: props.alternativeText },
 		});
 		const propsData = {
-			name: "file-record #1.txt",
+			url: "url/1/file-record #1.txt",
 			previewUrl: "preview/1/file-record #1.txt",
+			name: "file-record #1.txt",
 			isEditMode: props.isEditMode,
 			element,
 		};
 
+		const isLightBoxOpen = ref(false);
+		const open = jest.fn();
+		mockedUseLightBox.mockReturnValue({ isLightBoxOpen, open });
+
+		mockedConvertDownloadToPreviewUrl.mockImplementation(
+			(downloadUrl) => downloadUrl
+		);
+
 		const wrapper = shallowMount(ImageDisplay, {
+			attachTo: document.body,
 			propsData,
 			...createComponentMocks({ i18n: true }),
 			provide: {
@@ -28,9 +49,11 @@ describe("ImageDisplay", () => {
 
 		return {
 			wrapper,
-			fileNameProp: propsData.name,
-			previewUrl: propsData.previewUrl,
+			urlProp: propsData.url,
+			nameProp: propsData.name,
+			previewUrlProp: propsData.previewUrl,
 			element,
+			open,
 		};
 	};
 	const imageSelektor = "img";
@@ -63,29 +86,29 @@ describe("ImageDisplay", () => {
 		it("should have set loading before src", () => {
 			// This test ensures that "loading" attribute is rendered before "src",
 			// because the order of attributes is crucial for lazy loading to work.
-			const { wrapper, fileNameProp } = setup({ isEditMode: false });
+			const { wrapper, nameProp } = setup({ isEditMode: false });
 
 			const renderedImageTag = wrapper.find(imageSelektor).html();
-			const expectedHtml = `<img loading="lazy" src="preview/1/${fileNameProp}" alt="components.cardElement.fileElement.emptyAlt ${fileNameProp}" class="rounded-t-sm image">`;
+			const expectedHtml = `<img loading="lazy" src="preview/1/${nameProp}" alt="components.cardElement.fileElement.emptyAlt ${nameProp}" class="image-display-image rounded-t-sm">`;
 
 			expect(renderedImageTag).toBe(expectedHtml);
 		});
 
 		it("should have set src correctly", () => {
-			const { wrapper, previewUrl } = setup({ isEditMode: false });
+			const { wrapper, previewUrlProp } = setup({ isEditMode: false });
 
 			const src = wrapper.find(imageSelektor).attributes("src");
 
-			expect(src).toBe(previewUrl);
+			expect(src).toBe(previewUrlProp);
 		});
 
 		it("should have set alt correctly", () => {
-			const { wrapper, fileNameProp } = setup({ isEditMode: false });
+			const { wrapper, nameProp } = setup({ isEditMode: false });
 
 			const alt = wrapper.find(imageSelektor).attributes("alt");
 
 			expect(alt).toBe(
-				"components.cardElement.fileElement.emptyAlt " + fileNameProp
+				"components.cardElement.fileElement.emptyAlt " + nameProp
 			);
 		});
 
@@ -105,15 +128,190 @@ describe("ImageDisplay", () => {
 
 		describe("When alternative text is undefined", () => {
 			it("should have set alt correctly", () => {
-				const { wrapper, fileNameProp } = setup({ isEditMode: false });
+				const { wrapper, nameProp } = setup({ isEditMode: false });
 
 				const alt = wrapper.find(imageSelektor).attributes("alt");
 
 				expect(alt).toBe(
-					"components.cardElement.fileElement.emptyAlt " + fileNameProp
+					"components.cardElement.fileElement.emptyAlt " + nameProp
 				);
 			});
 		});
+
+		it("should call open function, when the container is clicked", () => {
+			const alternativeText = "alternative text";
+			const { wrapper, urlProp, nameProp, open } = setup({
+				isEditMode: false,
+				alternativeText,
+			});
+			const options: LightBoxOptions = {
+				downloadUrl: urlProp,
+				previewUrl: urlProp,
+				alt: alternativeText,
+				name: nameProp,
+			};
+
+			const container = wrapper.find(".image-display-container");
+			container.trigger("click");
+
+			expect(open).toHaveBeenCalledTimes(1);
+			expect(open).toHaveBeenCalledWith(options);
+		});
+
+		it("should call open function, when the image is clicked", () => {
+			const alternativeText = "alternative text";
+			const { wrapper, urlProp, nameProp, open } = setup({
+				isEditMode: false,
+				alternativeText,
+			});
+			const options: LightBoxOptions = {
+				downloadUrl: urlProp,
+				previewUrl: urlProp,
+				alt: alternativeText,
+				name: nameProp,
+			};
+
+			const image = wrapper.find(".image-display-image");
+			image.trigger("click");
+
+			expect(open).toHaveBeenCalledTimes(1);
+			expect(open).toHaveBeenCalledWith(options);
+		});
+
+		it("should call open function, when the overlay is clicked", async () => {
+			const alternativeText = "alternative text";
+			const { wrapper, urlProp, nameProp, open } = setup({
+				isEditMode: false,
+				alternativeText,
+			});
+			const options: LightBoxOptions = {
+				downloadUrl: urlProp,
+				previewUrl: urlProp,
+				alt: alternativeText,
+				name: nameProp,
+			};
+
+			wrapper.trigger("focusin");
+			await nextTick();
+
+			const overlay = wrapper.find(".image-display-overlay");
+
+			expect(overlay.exists()).toBe(true);
+			expect(overlay.isVisible()).toBe(true);
+
+			overlay.trigger("click");
+
+			expect(open).toHaveBeenCalledTimes(1);
+			expect(open).toHaveBeenCalledWith(options);
+		});
+
+		it("should show overlay, when the image is focused, and hide it, when not (using focusin and focusout)", async () => {
+			const { wrapper } = setup({ isEditMode: false });
+
+			wrapper.trigger("focusin");
+			await nextTick();
+
+			const overlayFocusIn = wrapper.find(".image-display-overlay");
+
+			expect(overlayFocusIn.exists()).toBe(true);
+			expect(overlayFocusIn.isVisible()).toBe(true);
+
+			wrapper.trigger("focusout");
+			await nextTick();
+
+			const overlayFocusOut = wrapper.find(".image-display-overlay");
+
+			expect(overlayFocusOut.exists()).toBe(false);
+		});
+
+		it("should show overlay, when the image is focused, and hide it, when not (using focus and blur)", async () => {
+			const { wrapper } = setup({ isEditMode: false });
+
+			const container = wrapper.find(".image-display-container")
+				.element as HTMLDivElement;
+
+			expect(document.activeElement).toBe(document.body);
+
+			container.focus();
+			await nextTick();
+
+			expect(document.activeElement).toBe(container);
+
+			const overlayFocus = wrapper.find(".image-display-overlay");
+
+			expect(overlayFocus.exists()).toBe(true);
+			expect(overlayFocus.isVisible()).toBe(true);
+
+			container.blur();
+			await nextTick();
+
+			expect(document.activeElement).toBe(document.body);
+
+			const overlayBlur = wrapper.find(".image-display-overlay");
+
+			expect(overlayBlur.exists()).toBe(false);
+		});
+
+		it("should call open function, when Enter key is pressed", async () => {
+			const alternativeText = "alternative text";
+			const { wrapper, urlProp, nameProp, open } = setup({
+				isEditMode: false,
+				alternativeText,
+			});
+			const options: LightBoxOptions = {
+				downloadUrl: urlProp,
+				previewUrl: urlProp,
+				alt: alternativeText,
+				name: nameProp,
+			};
+
+			const container = wrapper.find(".image-display-container");
+			container.trigger("keydown.enter");
+			await nextTick();
+
+			expect(open).toHaveBeenCalledTimes(1);
+			expect(open).toHaveBeenCalledWith(options);
+		});
+
+		it("should call open function, when Space key is pressed", async () => {
+			const alternativeText = "alternative text";
+			const { wrapper, urlProp, nameProp, open } = setup({
+				isEditMode: false,
+				alternativeText,
+			});
+			const options: LightBoxOptions = {
+				downloadUrl: urlProp,
+				previewUrl: urlProp,
+				alt: alternativeText,
+				name: nameProp,
+			};
+
+			const container = wrapper.find(".image-display-container");
+			container.trigger("keydown.space");
+			await nextTick();
+
+			expect(open).toHaveBeenCalledTimes(1);
+			expect(open).toHaveBeenCalledWith(options);
+		});
+
+		it("should show overlay, when the user hovers over the image, and hides when not", async () => {
+			const { wrapper } = setup({ isEditMode: false });
+
+			wrapper.trigger("mouseenter");
+			await nextTick();
+
+			const overlayEnter = wrapper.find(".image-display-overlay");
+
+			expect(overlayEnter.exists()).toBe(true);
+			expect(overlayEnter.isVisible()).toBe(true);
+
+			wrapper.trigger("mouseleave");
+			await nextTick();
+
+			const overlayLeave = wrapper.find(".image-display-overlay");
+
+			expect(overlayLeave.exists()).toBe(false);
+		});
 	});
 
 	describe("when isEditMode is true", () => {
@@ -134,11 +332,11 @@ describe("ImageDisplay", () => {
 		});
 
 		it("should have set src correctly", () => {
-			const { wrapper, previewUrl } = setup({ isEditMode: true });
+			const { wrapper, previewUrlProp } = setup({ isEditMode: true });
 
 			const src = wrapper.find(imageSelektor).attributes("src");
 
-			expect(src).toBe(previewUrl);
+			expect(src).toBe(previewUrlProp);
 		});
 
 		describe("When alternative text is defined", () => {
@@ -157,14 +355,131 @@ describe("ImageDisplay", () => {
 
 		describe("When alternative text is undefined", () => {
 			it("should have set alt correctly", () => {
-				const { wrapper, fileNameProp } = setup({ isEditMode: true });
+				const { wrapper, nameProp } = setup({ isEditMode: true });
 
 				const alt = wrapper.find(imageSelektor).attributes("alt");
 
 				expect(alt).toBe(
-					"components.cardElement.fileElement.emptyAlt " + fileNameProp
+					"components.cardElement.fileElement.emptyAlt " + nameProp
 				);
 			});
 		});
+
+		it("should not call open function, when the container is clicked", () => {
+			const alternativeText = "alternative text";
+			const { wrapper, open } = setup({
+				isEditMode: true,
+				alternativeText,
+			});
+
+			const container = wrapper.find(".image-display-container");
+			container.trigger("click");
+
+			expect(open).toHaveBeenCalledTimes(0);
+		});
+
+		it("should not call open function, when the image is clicked", () => {
+			const alternativeText = "alternative text";
+			const { wrapper, open } = setup({
+				isEditMode: true,
+				alternativeText,
+			});
+
+			const image = wrapper.find(".image-display-image");
+			image.trigger("click");
+
+			expect(open).toHaveBeenCalledTimes(0);
+		});
+
+		it("should not show overlay, when the image is focused (using focusin and focusout)", async () => {
+			const { wrapper } = setup({ isEditMode: true });
+
+			wrapper.trigger("focusin");
+			await nextTick();
+
+			const overlayFocusIn = wrapper.find(".image-display-overlay");
+
+			expect(overlayFocusIn.exists()).toBe(false);
+
+			wrapper.trigger("focusout");
+			await nextTick();
+
+			const overlayFocusOut = wrapper.find(".image-display-overlay");
+
+			expect(overlayFocusOut.exists()).toBe(false);
+		});
+
+		it("should not show overlay, when the image is focused (using focus and blur)", async () => {
+			const { wrapper } = setup({ isEditMode: true });
+
+			const container = wrapper.find(".image-display-container")
+				.element as HTMLDivElement;
+
+			expect(document.activeElement).toBe(document.body);
+
+			container.focus();
+			await nextTick();
+
+			expect(document.activeElement).toBe(container);
+
+			const overlayFocus = wrapper.find(".image-display-overlay");
+
+			expect(overlayFocus.exists()).toBe(false);
+
+			container.blur();
+			await nextTick();
+
+			expect(document.activeElement).toBe(document.body);
+
+			const overlayBlur = wrapper.find(".image-display-overlay");
+
+			expect(overlayBlur.exists()).toBe(false);
+		});
+
+		it("should not call open function, when Enter key is pressed", async () => {
+			const alternativeText = "alternative text";
+			const { wrapper, open } = setup({
+				isEditMode: true,
+				alternativeText,
+			});
+
+			const container = wrapper.find(".image-display-container");
+			container.trigger("keydown.enter");
+			await nextTick();
+
+			expect(open).toHaveBeenCalledTimes(0);
+		});
+
+		it("should not call open function, when Space key is pressed", async () => {
+			const alternativeText = "alternative text";
+			const { wrapper, open } = setup({
+				isEditMode: true,
+				alternativeText,
+			});
+
+			const container = wrapper.find(".image-display-container");
+			container.trigger("keydown.space");
+			await nextTick();
+
+			expect(open).toHaveBeenCalledTimes(0);
+		});
+
+		it("should not show overlay, when the user hovers over the image", async () => {
+			const { wrapper } = setup({ isEditMode: true });
+
+			wrapper.trigger("mouseenter");
+			await nextTick();
+
+			const overlayEnter = wrapper.find(".image-display-overlay");
+
+			expect(overlayEnter.exists()).toBe(false);
+
+			wrapper.trigger("mouseleave");
+			await nextTick();
+
+			const overlayLeave = wrapper.find(".image-display-overlay");
+
+			expect(overlayLeave.exists()).toBe(false);
+		});
 	});
 });
diff --git a/src/components/feature-board-file-element/content/display/image-display/ImageDisplay.vue b/src/components/feature-board-file-element/content/display/image-display/ImageDisplay.vue
index 614c6d71db..5dfd591f64 100644
--- a/src/components/feature-board-file-element/content/display/image-display/ImageDisplay.vue
+++ b/src/components/feature-board-file-element/content/display/image-display/ImageDisplay.vue
@@ -1,11 +1,25 @@
 <template>
-	<div class="image-wrapper">
+	<div
+		class="image-display-container"
+		ref="containerRef"
+		:tabindex="tabIndex"
+		@click.stop.prevent="onClick"
+		@focusin.stop.prevent="onFocusIn"
+		@focusout.stop.prevent="onFocusOut"
+		@keydown.enter.stop.prevent="onKeyDown"
+		@keydown.space.stop.prevent="onKeyDown"
+		@mouseenter.stop.prevent="onMouseEnter"
+		@mouseleave.stop.prevent="onMouseLeave"
+	>
+		<div v-if="showOverlay" class="image-display-overlay rounded-t-sm"></div>
+
 		<img
-			class="rounded-t-sm image"
+			class="image-display-image rounded-t-sm"
 			loading="lazy"
 			:src="previewUrl"
 			:alt="alternativeText"
 		/>
+
 		<v-app-bar flat color="transparent" class="menu">
 			<v-spacer></v-spacer>
 			<slot></slot>
@@ -15,12 +29,15 @@
 
 <script lang="ts">
 import { FileElementResponse } from "@/serverApi/v3";
+import { convertDownloadToPreviewUrl } from "@/utils/fileHelper";
 import { I18N_KEY, injectStrict } from "@/utils/inject";
-import { computed, defineComponent, PropType } from "vue";
+import { LightBoxOptions, useLightBox } from "@ui-light-box";
+import { PropType, computed, defineComponent, ref } from "vue";
 
 export default defineComponent({
 	name: "ImageDisplay",
 	props: {
+		url: { type: String, required: true },
 		previewUrl: { type: String, required: true },
 		name: { type: String, required: true },
 		isEditMode: { type: Boolean, required: true },
@@ -28,6 +45,11 @@ export default defineComponent({
 	},
 	setup(props) {
 		const i18n = injectStrict(I18N_KEY);
+		const containerRef = ref<HTMLDivElement | undefined>();
+		const isFocused = ref(false);
+		const isHovered = ref(false);
+
+		const tabIndex = computed(() => (!props.isEditMode ? 0 : -1));
 
 		const alternativeText = computed(() => {
 			const altTranslation = i18n.t(
@@ -40,25 +62,105 @@ export default defineComponent({
 			return altText;
 		});
 
+		const showOverlay = computed(
+			() => !props.isEditMode && (isFocused.value || isHovered.value)
+		);
+
+		const onClick = () => {
+			if (!props.isEditMode) {
+				openLightBox();
+			}
+			if (!props.isEditMode) {
+				containerRef.value?.blur();
+			}
+		};
+
+		const onFocusIn = () => {
+			if (!props.isEditMode) {
+				isFocused.value = true;
+			}
+		};
+
+		const onFocusOut = () => {
+			if (!props.isEditMode) {
+				isFocused.value = false;
+			}
+		};
+
+		const onKeyDown = () => {
+			if (!props.isEditMode) {
+				openLightBox();
+			}
+		};
+
+		const onMouseEnter = () => {
+			if (!props.isEditMode) {
+				isHovered.value = true;
+			}
+		};
+
+		const onMouseLeave = () => {
+			if (!props.isEditMode) {
+				isHovered.value = false;
+			}
+		};
+
+		const openLightBox = () => {
+			const previewUrl = convertDownloadToPreviewUrl(props.url);
+
+			const options: LightBoxOptions = {
+				downloadUrl: props.url,
+				previewUrl: previewUrl,
+				alt: alternativeText.value,
+				name: props.name,
+			};
+
+			const { open } = useLightBox();
+
+			open(options);
+		};
+
 		return {
 			alternativeText,
+			containerRef,
+			showOverlay,
+			tabIndex,
+			onClick,
+			onFocusIn,
+			onFocusOut,
+			onKeyDown,
+			onMouseEnter,
+			onMouseLeave,
 		};
 	},
 });
 </script>
 
 <style scoped>
-.image-wrapper {
+.image-display-container {
+	position: relative;
 	min-height: 52px;
 	display: flex;
 	align-items: center;
 }
-.image {
+
+.image-display-overlay {
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	background: var(--v-black-base);
+	opacity: 0.2;
+}
+
+.image-display-image {
 	pointer-events: none;
 	display: block;
 	margin-right: auto;
 	margin-left: auto;
 }
+
 .menu {
 	position: absolute;
 	top: 0px;
diff --git a/src/components/feature-board-submission-element/components/SubmissionContentElement.unit.ts b/src/components/feature-board-submission-element/components/SubmissionContentElement.unit.ts
index 115daa7cbb..1c5cfe1b20 100644
--- a/src/components/feature-board-submission-element/components/SubmissionContentElement.unit.ts
+++ b/src/components/feature-board-submission-element/components/SubmissionContentElement.unit.ts
@@ -7,7 +7,7 @@ import { submissionContainerElementResponseFactory } from "@@/tests/test-utils/f
 import { createMock } from "@golevelup/ts-jest";
 import { useDeleteConfirmationDialog } from "@ui-confirmation-dialog";
 import { MountOptions, shallowMount } from "@vue/test-utils";
-import Vue, { nextTick, ref } from "vue";
+import Vue, { ref } from "vue";
 import SubmissionContentElement from "./SubmissionContentElement.vue";
 import SubmissionContentElementDisplay from "./SubmissionContentElementDisplay.vue";
 import SubmissionContentElementEdit from "./SubmissionContentElementEdit.vue";
@@ -51,9 +51,6 @@ describe("SubmissionContentElement", () => {
 	const getWrapper = (props: {
 		element: AnyContentElement;
 		isEditMode: boolean;
-		isFirstElement: boolean;
-		isLastElement: boolean;
-		hasMultipleElements: boolean;
 	}) => {
 		const wrapper = shallowMount(
 			SubmissionContentElement as MountOptions<Vue>,
@@ -87,9 +84,6 @@ describe("SubmissionContentElement", () => {
 			const { wrapper } = getWrapper({
 				element,
 				isEditMode: false,
-				isFirstElement: false,
-				isLastElement: false,
-				hasMultipleElements: false,
 			});
 
 			return {
@@ -154,7 +148,7 @@ describe("SubmissionContentElement", () => {
 				.props("editable");
 
 			expect(editable).toBe(
-				mockedUseSubmissionContentElementStateResponse.editable
+				!mockedUseSubmissionContentElementStateResponse.isOverdue
 			);
 		});
 
@@ -187,9 +181,6 @@ describe("SubmissionContentElement", () => {
 			const { wrapper } = getWrapper({
 				element,
 				isEditMode: true,
-				isFirstElement: false,
-				isLastElement: false,
-				hasMultipleElements: false,
 			});
 
 			return {
@@ -213,36 +204,6 @@ describe("SubmissionContentElement", () => {
 			expect(component.exists()).toBe(true);
 		});
 
-		it("should hand over isFirstElement property to SubmissionContentElementEdit", async () => {
-			const { wrapper } = setup();
-
-			const isFirstElement = wrapper
-				.findComponent(SubmissionContentElementEdit)
-				.props("isFirstElement");
-
-			expect(isFirstElement).toBe(false);
-		});
-
-		it("should hand over isLastElement property to SubmissionContentElementEdit", async () => {
-			const { wrapper } = setup();
-
-			const isLastElement = wrapper
-				.findComponent(SubmissionContentElementEdit)
-				.props("isLastElement");
-
-			expect(isLastElement).toBe(false);
-		});
-
-		it("should hand over hasMultipleElements property to SubmissionContentElementEdit", async () => {
-			const { wrapper } = setup();
-
-			const hasMultipleElements = wrapper
-				.findComponent(SubmissionContentElementEdit)
-				.props("hasMultipleElements");
-
-			expect(hasMultipleElements).toBe(false);
-		});
-
 		it("should hand over dueDate to SubmissionContentElementEdit", async () => {
 			const { wrapper, element } = setup();
 
@@ -285,45 +246,10 @@ describe("SubmissionContentElement", () => {
 				.props("editable");
 
 			expect(editable).toBe(
-				mockedUseSubmissionContentElementStateResponse.editable
+				!mockedUseSubmissionContentElementStateResponse.isOverdue
 			);
 		});
 
-		it("should emit 'move-down:edit' when it receives move-down:element event from child", async () => {
-			const { wrapper } = setup();
-
-			const component = wrapper.findComponent(SubmissionContentElementEdit);
-			component.vm.$emit("move-down:element");
-
-			const emitted = wrapper.emitted();
-			expect(emitted["move-down:edit"]).toBeDefined();
-		});
-
-		it("should emit 'move-up:edit' when it receives move-up:element event from child", async () => {
-			const { wrapper } = setup();
-
-			const component = wrapper.findComponent(SubmissionContentElementEdit);
-			component.vm.$emit("move-up:element");
-
-			const emitted = wrapper.emitted();
-			expect(emitted["move-up:edit"]).toBeDefined();
-		});
-
-		it("should pass delete:element event from child to parent", async () => {
-			const { wrapper } = setup();
-
-			await nextTick();
-			await nextTick();
-
-			const child = wrapper.findComponent(SubmissionContentElementEdit);
-			child.vm.$emit("delete:element");
-
-			await nextTick();
-			await nextTick();
-
-			expect(wrapper.emitted("delete:element")).toHaveLength(1);
-		});
-
 		it("should emit 'move-keyboard:edit' when arrow key down is pressed", async () => {
 			const { wrapper } = setup();
 
diff --git a/src/components/feature-board-submission-element/components/SubmissionContentElement.vue b/src/components/feature-board-submission-element/components/SubmissionContentElement.vue
index f3ab5ab2e6..ab85d25c9d 100644
--- a/src/components/feature-board-submission-element/components/SubmissionContentElement.vue
+++ b/src/components/feature-board-submission-element/components/SubmissionContentElement.vue
@@ -16,7 +16,7 @@
 				:dueDate="modelValue.dueDate"
 				:loading="loading"
 				:submissions="submissions"
-				:editable="editable"
+				:editable="!isOverdue"
 				@update:completed="onUpdateCompleted"
 			/>
 			<SubmissionContentElementEdit
@@ -24,15 +24,14 @@
 				:dueDate="modelValue.dueDate"
 				:loading="loading"
 				:submissions="submissions"
-				:editable="editable"
-				:isFirstElement="isFirstElement"
-				:isLastElement="isLastElement"
-				:hasMultipleElements="hasMultipleElements"
+				:editable="!isOverdue"
 				@update:dueDate="($event) => (modelValue.dueDate = $event)"
-				@move-down:element="onMoveSubmissionEditDown"
-				@move-up:element="onMoveSubmissionEditUp"
-				@delete:element="onDeleteElement"
-			/>
+			>
+				<slot
+					name="menu"
+					:elementName="t('components.cardElement.submissionElement')"
+				/>
+			</SubmissionContentElementEdit>
 		</div>
 	</v-card>
 </template>
@@ -44,7 +43,6 @@ import SubmissionContentElementDisplay from "./SubmissionContentElementDisplay.v
 import SubmissionContentElementEdit from "./SubmissionContentElementEdit.vue";
 import { useSubmissionContentElementState } from "../composables/SubmissionContentElementState.composable";
 import { useBoardFocusHandler, useContentElementState } from "@data-board";
-import { useDeleteConfirmationDialog } from "@ui-confirmation-dialog";
 import { useI18n } from "@/composables/i18n.composable";
 
 export default defineComponent({
@@ -59,31 +57,19 @@ export default defineComponent({
 			required: true,
 		},
 		isEditMode: { type: Boolean, required: true },
-		isFirstElement: { type: Boolean, required: true },
-		isLastElement: { type: Boolean, required: true },
-		hasMultipleElements: { type: Boolean, required: true },
 	},
-	emits: [
-		"delete:element",
-		"move-down:edit",
-		"move-up:edit",
-		"move-keyboard:edit",
-	],
+	emits: ["move-keyboard:edit"],
 	setup(props, { emit }) {
 		const { t } = useI18n();
 		const submissionContentElement = ref(null);
 		const element = toRef(props, "element");
 		useBoardFocusHandler(element.value.id, submissionContentElement);
-		const { loading, submissions, editable, updateSubmissionItem } =
-			useSubmissionContentElementState(
-				element.value.id,
-				element.value.content.dueDate
-			);
-
-		const { askDeleteConfirmation } = useDeleteConfirmationDialog();
 
 		const { modelValue } = useContentElementState(props);
 
+		const { loading, submissions, isOverdue, updateSubmissionItem } =
+			useSubmissionContentElementState(element.value.id, modelValue);
+
 		const onKeydownArrow = (event: KeyboardEvent) => {
 			if (props.isEditMode) {
 				event.preventDefault();
@@ -91,25 +77,6 @@ export default defineComponent({
 			}
 		};
 
-		const onMoveSubmissionEditDown = () => {
-			emit("move-down:edit");
-		};
-
-		const onMoveSubmissionEditUp = () => {
-			emit("move-up:edit");
-		};
-
-		const onDeleteElement = async (): Promise<void> => {
-			const shouldDelete = await askDeleteConfirmation(
-				t("components.cardElement.submissionElement").toString(),
-				"boardElement"
-			);
-
-			if (shouldDelete) {
-				emit("delete:element", element.value.id);
-			}
-		};
-
 		const onUpdateCompleted = (completed: boolean) => {
 			updateSubmissionItem(completed);
 		};
@@ -119,12 +86,10 @@ export default defineComponent({
 			submissionContentElement,
 			submissions,
 			loading,
-			editable,
-			onDeleteElement,
+			isOverdue,
 			onKeydownArrow,
-			onMoveSubmissionEditDown,
-			onMoveSubmissionEditUp,
 			onUpdateCompleted,
+			t,
 		};
 	},
 });
diff --git a/src/components/feature-board-submission-element/components/SubmissionContentElementEdit.unit.ts b/src/components/feature-board-submission-element/components/SubmissionContentElementEdit.unit.ts
index d90628ecdb..4e8c2b9cda 100644
--- a/src/components/feature-board-submission-element/components/SubmissionContentElementEdit.unit.ts
+++ b/src/components/feature-board-submission-element/components/SubmissionContentElementEdit.unit.ts
@@ -3,7 +3,6 @@ import { I18N_KEY } from "@/utils/inject";
 import createComponentMocks from "@@/tests/test-utils/componentMocks";
 import { shallowMount, MountOptions } from "@vue/test-utils";
 import SubmissionContentElementEdit from "./SubmissionContentElementEdit.vue";
-import SubmissionContentElementMenu from "./SubmissionContentElementMenu.vue";
 import SubmissionItemsTeacherDisplay from "./SubmissionItemsTeacherDisplay.vue";
 import { i18nMock, submissionsResponseFactory } from "@@/tests/test-utils";
 import { DateTimePicker } from "@feature-date-time-picker";
@@ -16,9 +15,6 @@ describe("SubmissionContentElementEdit", () => {
 
 		const propsData = {
 			dueDate: "01.01.2023 01:23",
-			isFirstElement: false,
-			isLastElement: false,
-			hasMultipleElements: false,
 			submissions: mockedSubmissions,
 			editable: true,
 			loading: true,
@@ -37,9 +33,6 @@ describe("SubmissionContentElementEdit", () => {
 		return {
 			wrapper,
 			dueDate: propsData.dueDate,
-			isFirstElementProp: propsData.isFirstElement,
-			isLastElementProp: propsData.isLastElement,
-			hasMultipleElementsProp: propsData.hasMultipleElements,
 		};
 	};
 
@@ -60,44 +53,6 @@ describe("SubmissionContentElementEdit", () => {
 		expect(dateTimePicker.exists()).toBe(true);
 	});
 
-	it("should render the SubmissionContentElementMenu", () => {
-		const { wrapper } = setup();
-
-		const menu = wrapper.findComponent(SubmissionContentElementMenu);
-
-		expect(menu.exists()).toBe(true);
-	});
-
-	it("should hand over isFirstElement prop correctly to SubmissionContentElementMenu", () => {
-		const { wrapper, isFirstElementProp } = setup();
-
-		const isFirstElement = wrapper
-			.findComponent(SubmissionContentElementMenu)
-			.props("isFirstElement");
-
-		expect(isFirstElement).toBe(isFirstElementProp);
-	});
-
-	it("should hand over isLastElement prop correctly to SubmissionContentElementMenu", () => {
-		const { wrapper, isLastElementProp } = setup();
-
-		const isLastElement = wrapper
-			.findComponent(SubmissionContentElementMenu)
-			.props("isLastElement");
-
-		expect(isLastElement).toBe(isLastElementProp);
-	});
-
-	it("should hand over hasMultipleElements prop correctly to SubmissionContentElementMenu", () => {
-		const { wrapper, hasMultipleElementsProp } = setup();
-
-		const hasMultipleElements = wrapper
-			.findComponent(SubmissionContentElementMenu)
-			.props("hasMultipleElements");
-
-		expect(hasMultipleElements).toBe(hasMultipleElementsProp);
-	});
-
 	it("should hand over submissions prop to SubmissionItemsTeacherDisplay", () => {
 		const { wrapper } = setup();
 
@@ -127,31 +82,4 @@ describe("SubmissionContentElementEdit", () => {
 
 		expect(editable).toBe(true);
 	});
-
-	it("should forward delete:element from SubmissionContentElementMenu", () => {
-		const { wrapper } = setup();
-		const menu = wrapper.findComponent(SubmissionContentElementMenu);
-
-		menu.vm.$emit("delete:element");
-
-		expect(wrapper.emitted("delete:element")).toHaveLength(1);
-	});
-
-	it("should forward move-down:element from SubmissionContentElementMenu", () => {
-		const { wrapper } = setup();
-		const menu = wrapper.findComponent(SubmissionContentElementMenu);
-
-		menu.vm.$emit("move-down:element");
-
-		expect(wrapper.emitted("move-down:element")).toHaveLength(1);
-	});
-
-	it("should forward move-down:up from SubmissionContentElementMenu", () => {
-		const { wrapper } = setup();
-		const menu = wrapper.findComponent(SubmissionContentElementMenu);
-
-		menu.vm.$emit("move-up:element");
-
-		expect(wrapper.emitted("move-up:element")).toHaveLength(1);
-	});
 });
diff --git a/src/components/feature-board-submission-element/components/SubmissionContentElementEdit.vue b/src/components/feature-board-submission-element/components/SubmissionContentElementEdit.vue
index bf64e40584..03b3505412 100644
--- a/src/components/feature-board-submission-element/components/SubmissionContentElementEdit.vue
+++ b/src/components/feature-board-submission-element/components/SubmissionContentElementEdit.vue
@@ -3,14 +3,7 @@
 		<div class="grey lighten-4 pa-4 rounded">
 			<SubmissionContentElementTitle />
 			<div class="menu">
-				<SubmissionContentElementMenu
-					:isFirstElement="isFirstElement"
-					:isLastElement="isLastElement"
-					:hasMultipleElements="hasMultipleElements"
-					@move-down:element="onMoveElementDown"
-					@move-up:element="onMoveElementUp"
-					@delete:element="onDeleteElement"
-				/>
+				<slot />
 			</div>
 			<date-time-picker
 				class="mt-1"
@@ -32,7 +25,6 @@
 import { defineComponent, PropType } from "vue";
 import { useI18n } from "@/composables/i18n.composable";
 import { SubmissionsResponse } from "@/serverApi/v3";
-import SubmissionContentElementMenu from "./SubmissionContentElementMenu.vue";
 import SubmissionContentElementTitle from "./SubmissionContentElementTitle.vue";
 import { DateTimePicker } from "@feature-date-time-picker";
 import SubmissionItemsTeacherDisplay from "./SubmissionItemsTeacherDisplay.vue";
@@ -40,7 +32,6 @@ import SubmissionItemsTeacherDisplay from "./SubmissionItemsTeacherDisplay.vue";
 export default defineComponent({
 	name: "SubmissionContentElementEdit",
 	components: {
-		SubmissionContentElementMenu,
 		SubmissionContentElementTitle,
 		DateTimePicker,
 		SubmissionItemsTeacherDisplay,
@@ -61,40 +52,17 @@ export default defineComponent({
 			type: Boolean,
 			required: true,
 		},
-		isFirstElement: { type: Boolean, required: true },
-		isLastElement: { type: Boolean, required: true },
-		hasMultipleElements: { type: Boolean, required: true },
 	},
-	emits: [
-		"delete:element",
-		"move-down:element",
-		"move-up:element",
-		"update:dueDate",
-	],
+	emits: ["update:dueDate"],
 	setup(props, { emit }) {
 		const { t } = useI18n();
 
-		const onMoveElementDown = () => {
-			emit("move-down:element");
-		};
-
-		const onMoveElementUp = () => {
-			emit("move-up:element");
-		};
-
-		const onDeleteElement = () => {
-			emit("delete:element");
-		};
-
 		const onDateTimeInput = (dateTime: string) => {
 			emit("update:dueDate", dateTime);
 		};
 
 		return {
 			t,
-			onMoveElementDown,
-			onMoveElementUp,
-			onDeleteElement,
 			onDateTimeInput,
 		};
 	},
diff --git a/src/components/feature-board-submission-element/components/SubmissionContentElementMenu.unit.ts b/src/components/feature-board-submission-element/components/SubmissionContentElementMenu.unit.ts
deleted file mode 100644
index df5f051c29..0000000000
--- a/src/components/feature-board-submission-element/components/SubmissionContentElementMenu.unit.ts
+++ /dev/null
@@ -1,304 +0,0 @@
-import { I18N_KEY } from "@/utils/inject";
-import createComponentMocks from "@@/tests/test-utils/componentMocks";
-import { BoardMenuAction } from "@ui-board";
-import { shallowMount } from "@vue/test-utils";
-import SubmissionContentElementMenu from "./SubmissionContentElementMenu.vue";
-
-describe("SubmissionContentElementMenu", () => {
-	const setup = () => {
-		document.body.setAttribute("data-app", "true");
-
-		const propsData = {
-			isFirstElement: false,
-			isLastElement: false,
-			hasMultipleElements: false,
-		};
-
-		const wrapper = shallowMount(SubmissionContentElementMenu, {
-			...createComponentMocks({ i18n: true }),
-			propsData,
-			provide: {
-				[I18N_KEY as symbol]: { t: (key: string) => key },
-			},
-		});
-
-		return {
-			wrapper,
-		};
-	};
-
-	it("should be found in dom", () => {
-		const { wrapper } = setup();
-
-		const submissionContentElementMenu = wrapper.findComponent(
-			SubmissionContentElementMenu
-		);
-		expect(submissionContentElementMenu.exists()).toBe(true);
-	});
-
-	describe("move up and down board actions", () => {
-		const setup = () => {
-			document.body.setAttribute("data-app", "true");
-
-			const multipleElementsSetupProps = {
-				isFirstElement: false,
-				isLastElement: false,
-				hasMultipleElements: true,
-			};
-			const wrapper = shallowMount(SubmissionContentElementMenu, {
-				...createComponentMocks({ i18n: true }),
-				propsData: multipleElementsSetupProps,
-			});
-
-			return {
-				wrapper,
-			};
-		};
-
-		describe("when move up menu action is clicked", () => {
-			it("should emit move-up:element event", async () => {
-				const { wrapper } = setup();
-
-				const moveUpTranslation = wrapper.vm
-					.$t("components.board.action.moveUp")
-					.toString();
-				const childComponent = wrapper
-					.findAllComponents(BoardMenuAction)
-					.filter((c) => c.text().includes(moveUpTranslation))
-					.at(0);
-				childComponent.vm.$emit("click");
-
-				expect(wrapper.emitted("move-up:element")?.length).toBe(1);
-			});
-		});
-
-		describe("when move down menu action is clicked", () => {
-			it("should emit move-down:element event", async () => {
-				const { wrapper } = setup();
-
-				const moveDownTranslation = wrapper.vm
-					.$t("components.board.action.moveDown")
-					.toString();
-				const childComponent = wrapper
-					.findAllComponents(BoardMenuAction)
-					.filter((c) => c.text().includes(moveDownTranslation))
-					.at(0);
-				childComponent.vm.$emit("click");
-
-				expect(wrapper.emitted("move-down:element")?.length).toBe(1);
-			});
-		});
-
-		describe("when multiple elements are present", () => {
-			it("should show the move up action", () => {
-				const { wrapper } = setup();
-
-				const moveUpTranslation = wrapper.vm
-					.$t("components.board.action.moveUp")
-					.toString();
-
-				const childComponent = wrapper
-					.findAllComponents(BoardMenuAction)
-					.filter((c) => c.text().includes(moveUpTranslation))
-					.at(0);
-
-				expect(childComponent.exists()).toBe(true);
-			});
-
-			it("should show the move down action", () => {
-				const { wrapper } = setup();
-
-				const moveDownTranslation = wrapper.vm
-					.$t("components.board.action.moveDown")
-					.toString();
-
-				const childComponent = wrapper
-					.findAllComponents(BoardMenuAction)
-					.filter((c) => c.text().includes(moveDownTranslation))
-					.at(0);
-
-				expect(childComponent.exists()).toBe(true);
-			});
-
-			describe("when element is at the beginning of the content elements list", () => {
-				const setup = () => {
-					document.body.setAttribute("data-app", "true");
-
-					const firstElementSetupProps = {
-						isFirstElement: true,
-						isLastElement: false,
-						hasMultipleElements: true,
-					};
-					const wrapper = shallowMount(SubmissionContentElementMenu, {
-						...createComponentMocks({ i18n: true }),
-						propsData: firstElementSetupProps,
-					});
-
-					return {
-						wrapper,
-					};
-				};
-
-				it("should not show the move up action", () => {
-					const { wrapper } = setup();
-
-					const moveUpTranslation = wrapper.vm
-						.$t("components.board.action.moveUp")
-						.toString();
-
-					const childComponent = wrapper
-						.findAllComponents(BoardMenuAction)
-						.filter((c) => c.text().includes(moveUpTranslation));
-
-					expect(childComponent.exists()).toBe(false);
-				});
-
-				it("should show the move down action", () => {
-					const { wrapper } = setup();
-
-					const moveDownTranslation = wrapper.vm
-						.$t("components.board.action.moveDown")
-						.toString();
-
-					const childComponent = wrapper
-						.findAllComponents(BoardMenuAction)
-						.filter((c) => c.text().includes(moveDownTranslation))
-						.at(0);
-
-					expect(childComponent.exists()).toBe(true);
-				});
-			});
-
-			describe("when element is at the end of the content elements list", () => {
-				const setup = () => {
-					document.body.setAttribute("data-app", "true");
-
-					const lastElementSetupProps = {
-						isFirstElement: false,
-						isLastElement: true,
-						hasMultipleElements: true,
-					};
-					const wrapper = shallowMount(SubmissionContentElementMenu, {
-						...createComponentMocks({ i18n: true }),
-						propsData: lastElementSetupProps,
-					});
-
-					return {
-						wrapper,
-					};
-				};
-
-				it("should show the move up action", () => {
-					const { wrapper } = setup();
-
-					const moveUpTranslation = wrapper.vm
-						.$t("components.board.action.moveUp")
-						.toString();
-
-					const childComponent = wrapper
-						.findAllComponents(BoardMenuAction)
-						.filter((c) => c.text().includes(moveUpTranslation))
-						.at(0);
-
-					expect(childComponent.exists()).toBe(true);
-				});
-
-				it("should not show the move down action", () => {
-					const { wrapper } = setup();
-
-					const moveDownTranslation = wrapper.vm
-						.$t("components.board.action.moveDown")
-						.toString();
-
-					const childComponent = wrapper
-						.findAllComponents(BoardMenuAction)
-						.filter((c) => c.text().includes(moveDownTranslation));
-
-					expect(childComponent.exists()).toBe(false);
-				});
-			});
-		});
-
-		describe("when only a single element is present", () => {
-			const setup = () => {
-				document.body.setAttribute("data-app", "true");
-
-				const singleElementSetupProps = {
-					isFirstElement: false,
-					isLastElement: false,
-					hasMultipleElements: false,
-				};
-				const wrapper = shallowMount(SubmissionContentElementMenu, {
-					...createComponentMocks({ i18n: true }),
-					propsData: singleElementSetupProps,
-				});
-
-				return {
-					wrapper,
-				};
-			};
-
-			it("should not show the move up action", () => {
-				const { wrapper } = setup();
-
-				const moveUpTranslation = wrapper.vm
-					.$t("components.board.action.moveUp")
-					.toString();
-
-				const childComponent = wrapper
-					.findAllComponents(BoardMenuAction)
-					.filter((c) => c.text().includes(moveUpTranslation));
-
-				expect(childComponent.exists()).toBe(false);
-			});
-
-			it("should not show the move down action", () => {
-				const { wrapper } = setup();
-
-				const moveDownTranslation = wrapper.vm
-					.$t("components.board.action.moveDown")
-					.toString();
-
-				const childComponent = wrapper
-					.findAllComponents(BoardMenuAction)
-					.filter((c) => c.text().includes(moveDownTranslation));
-
-				expect(childComponent.exists()).toBe(false);
-			});
-		});
-	});
-
-	describe("delete board action", () => {
-		it("should show delete board menu action", () => {
-			const { wrapper } = setup();
-
-			const deleteTranslation = wrapper.vm
-				.$t("components.board.action.delete")
-				.toString();
-
-			const childComponent = wrapper
-				.findAllComponents(BoardMenuAction)
-				.filter((c) => c.text().includes(deleteTranslation))
-				.at(0);
-
-			expect(childComponent.exists()).toBe(true);
-		});
-
-		describe("when delete board menu action is clicked", () => {
-			it("should emit delete:element event", async () => {
-				const { wrapper } = setup();
-
-				const deleteTranslation = wrapper.vm
-					.$t("components.board.action.delete")
-					.toString();
-				const childComponent = wrapper
-					.findAllComponents(BoardMenuAction)
-					.filter((c) => c.text().includes(deleteTranslation))
-					.at(0);
-				childComponent.vm.$emit("click");
-
-				expect(wrapper.emitted("delete:element")?.length).toBe(1);
-			});
-		});
-	});
-});
diff --git a/src/components/feature-board-submission-element/components/SubmissionContentElementMenu.vue b/src/components/feature-board-submission-element/components/SubmissionContentElementMenu.vue
deleted file mode 100644
index f9d43b6ff5..0000000000
--- a/src/components/feature-board-submission-element/components/SubmissionContentElementMenu.vue
+++ /dev/null
@@ -1,80 +0,0 @@
-<template>
-	<BoardMenu scope="element">
-		<BoardMenuAction
-			v-if="hasMultipleElements && !isFirstElement"
-			data-testid="board-submission-element-edit-menu-move-up"
-			@click="onMoveElementUp"
-		>
-			<template #icon>
-				<VIcon>
-					{{ mdiArrowCollapseUp }}
-				</VIcon>
-			</template>
-
-			{{ $t("components.board.action.moveUp") }}
-		</BoardMenuAction>
-		<BoardMenuAction
-			v-if="hasMultipleElements && !isLastElement"
-			data-testid="board-submission-element-edit-menu-move-down"
-			@click="onMoveElementDown"
-		>
-			<template #icon>
-				<VIcon>
-					{{ mdiArrowCollapseDown }}
-				</VIcon>
-			</template>
-			{{ $t("components.board.action.moveDown") }}
-		</BoardMenuAction>
-		<BoardMenuAction
-			data-testid="board-submission-element-edit-menu-delete"
-			@click="onDelete"
-		>
-			<template #icon>
-				<VIcon>
-					{{ mdiTrashCanOutline }}
-				</VIcon>
-			</template>
-			{{ $t("components.board.action.delete") }}
-		</BoardMenuAction>
-	</BoardMenu>
-</template>
-
-<script lang="ts">
-import {
-	mdiArrowCollapseDown,
-	mdiArrowCollapseUp,
-	mdiTrashCanOutline,
-} from "@mdi/js";
-import { defineComponent } from "vue";
-import { BoardMenu, BoardMenuAction } from "@ui-board";
-
-export default defineComponent({
-	name: "SubmissionContentElementMenu",
-	components: { BoardMenu, BoardMenuAction },
-	props: {
-		isFirstElement: { type: Boolean, required: true },
-		isLastElement: { type: Boolean, required: true },
-		hasMultipleElements: { type: Boolean, required: true },
-	},
-	emits: ["delete:element", "move-down:element", "move-up:element"],
-	setup(_, { emit }) {
-		const onDelete = () => {
-			emit("delete:element");
-		};
-		const onMoveElementDown = () => {
-			emit("move-down:element");
-		};
-		const onMoveElementUp = () => {
-			emit("move-up:element");
-		};
-		return {
-			mdiArrowCollapseUp,
-			mdiArrowCollapseDown,
-			mdiTrashCanOutline,
-			onDelete,
-			onMoveElementDown,
-			onMoveElementUp,
-		};
-	},
-});
-</script>
diff --git a/src/components/feature-board-submission-element/composables/SubmissionContentElementState.composable.ts b/src/components/feature-board-submission-element/composables/SubmissionContentElementState.composable.ts
index 7552aee54d..f4a6aed8be 100644
--- a/src/components/feature-board-submission-element/composables/SubmissionContentElementState.composable.ts
+++ b/src/components/feature-board-submission-element/composables/SubmissionContentElementState.composable.ts
@@ -1,11 +1,11 @@
 import { useSubmissionItemApi } from "./SubmissionItemApi.composable";
 import { useErrorHandler } from "@/components/error-handling/ErrorHandler.composable";
-import { ref, computed, onMounted } from "vue";
+import { ref, computed, onMounted, Ref } from "vue";
 import { SubmissionsResponse } from "@/serverApi/v3";
 
 export const useSubmissionContentElementState = (
 	id: string,
-	dueDate?: string
+	modelValue: Ref<{ dueDate?: string }>
 ) => {
 	const { notifyWithTemplate } = useErrorHandler();
 	const {
@@ -54,8 +54,11 @@ export const useSubmissionContentElementState = (
 		}
 	};
 
-	const editable = computed(() => {
-		return !dueDate || new Date() < new Date(dueDate);
+	const isOverdue = computed(() => {
+		return (
+			!modelValue.value.dueDate ||
+			new Date() > new Date(modelValue.value.dueDate)
+		);
 	});
 
 	onMounted(() => {
@@ -67,6 +70,6 @@ export const useSubmissionContentElementState = (
 		fetchSubmissionItems,
 		updateSubmissionItem,
 		loading,
-		editable,
+		isOverdue,
 	};
 };
diff --git a/src/components/feature-board-submission-element/composables/SubmissionContentElementState.composable.unit.ts b/src/components/feature-board-submission-element/composables/SubmissionContentElementState.composable.unit.ts
index 34384282c8..71778e2f7f 100644
--- a/src/components/feature-board-submission-element/composables/SubmissionContentElementState.composable.unit.ts
+++ b/src/components/feature-board-submission-element/composables/SubmissionContentElementState.composable.unit.ts
@@ -2,6 +2,7 @@ import { mountComposable } from "@@/tests/test-utils/mountComposable";
 import { useSubmissionContentElementState } from "./SubmissionContentElementState.composable";
 import { useSubmissionItemApi } from "./SubmissionItemApi.composable";
 import { I18N_KEY, NOTIFIER_MODULE_KEY } from "@/utils/inject";
+import { ref } from "vue";
 import NotifierModule from "@/store/notifier";
 import { createModuleMocks } from "@/utils/mock-store-module";
 import { createMock, DeepMocked } from "@golevelup/ts-jest";
@@ -32,7 +33,7 @@ describe("SubmissionContentElementState.composable", () => {
 
 	const setup = (
 		contentElementId = "123123",
-		dueDate = "2100-12-31T00:00:00.000Z"
+		dueDate = ref({ dueDate: "2100-12-31T00:00:00.000Z" })
 	) => {
 		return mountComposable(
 			() => useSubmissionContentElementState(contentElementId, dueDate),
@@ -53,6 +54,26 @@ describe("SubmissionContentElementState.composable", () => {
 		).toHaveBeenCalledWith(contentElementId);
 	});
 
+	describe("isOverdue state", () => {
+		it("should be true if dueDate is in past", async () => {
+			const contentElementId = "123124";
+			const dueDateInPast = ref({ dueDate: "2000-12-31T00:00:00.000Z" });
+
+			const { isOverdue } = setup(contentElementId, dueDateInPast);
+
+			expect(isOverdue.value).toBe(true);
+		});
+
+		it("should be false if dueDate is in future", async () => {
+			const contentElementId = "123124";
+			const dueDateInFuture = ref({ dueDate: "2100-12-31T00:00:00.000Z" });
+
+			const { isOverdue } = setup(contentElementId, dueDateInFuture);
+
+			expect(isOverdue.value).toBe(false);
+		});
+	});
+
 	it("should return fetch function that updates submission items and loading state", async () => {
 		const contentElementId = "123124";
 		mockedUseSubmissionItemApiCalls.fetchSubmissionItemsCall.mockReturnValue(
diff --git a/src/components/feature-board/board/Board.vue b/src/components/feature-board/board/Board.vue
index 6124883c74..fb8db54ca3 100644
--- a/src/components/feature-board/board/Board.vue
+++ b/src/components/feature-board/board/Board.vue
@@ -41,40 +41,42 @@
 				></BoardColumnGhost>
 				<ConfirmationDialog></ConfirmationDialog>
 				<AddElementDialog></AddElementDialog>
+				<LightBox></LightBox>
 			</template>
 		</div>
 	</div>
 </template>
 
 <script lang="ts">
+import {
+	CardMove,
+	ColumnMove,
+	DragAndDropKey,
+	columnDropPlaceholderOptions,
+	horizontalCursorKeys,
+} from "@/types/board/DragAndDrop";
 import { DeviceMediaQuery } from "@/types/enum/device-media-query.enum";
 import { I18N_KEY, injectStrict } from "@/utils/inject";
+import {
+	useBoardPermissions,
+	useBoardState,
+	useSharedBoardPageInformation,
+	useSharedEditMode,
+} from "@data-board";
 import { ConfirmationDialog } from "@ui-confirmation-dialog";
+import { LightBox } from "@ui-light-box";
+import { useBoardNotifier } from "@util-board";
 import { useMediaQuery } from "@vueuse/core";
 import {
 	computed,
 	defineComponent,
 	onMounted,
 	onUnmounted,
-	watch,
 	toRef,
+	watch,
 } from "vue";
-import {
-	useBoardState,
-	useBoardPermissions,
-	useSharedEditMode,
-	useSharedBoardPageInformation,
-} from "@data-board";
-import { useBoardNotifier } from "@util-board";
-import { useBodyScrolling } from "../shared/BodyScrolling.composable";
 import AddElementDialog from "../shared/AddElementDialog.vue";
-import {
-	CardMove,
-	ColumnMove,
-	DragAndDropKey,
-	columnDropPlaceholderOptions,
-	horizontalCursorKeys,
-} from "@/types/board/DragAndDrop";
+import { useBodyScrolling } from "../shared/BodyScrolling.composable";
 import BoardColumn from "./BoardColumn.vue";
 import BoardColumnGhost from "./BoardColumnGhost.vue";
 // eslint-disable-next-line @typescript-eslint/no-var-requires
@@ -88,6 +90,7 @@ export default defineComponent({
 		BoardColumnGhost,
 		ConfirmationDialog,
 		AddElementDialog,
+		LightBox,
 	},
 	props: {
 		boardId: { type: String, required: true },
diff --git a/src/components/feature-board/card/ContentElementList.vue b/src/components/feature-board/card/ContentElementList.vue
index 2b9e6c9629..ea47ad8141 100644
--- a/src/components/feature-board/card/ContentElementList.vue
+++ b/src/components/feature-board/card/ContentElementList.vue
@@ -33,14 +33,21 @@
 				:key="element.id"
 				:element="element"
 				:isEditMode="isEditMode"
-				:isFirstElement="firstElementId === element.id"
-				:isLastElement="lastElementId === element.id"
-				:hasMultipleElements="hasMultipleElements"
 				@move-keyboard:edit="onMoveElementKeyboard(index, element, $event)"
-				@move-down:edit="onMoveElementDown(index, element)"
-				@move-up:edit="onMoveElementUp(index, element)"
-				@delete:element="onDeleteElement"
-			/>
+			>
+				<template #menu="{ elementName }">
+					<ContentElementMenu
+						:elementId="element.id"
+						:name="elementName"
+						:isFirstElement="firstElementId === element.id"
+						:isLastElement="lastElementId === element.id"
+						:hasMultipleElements="hasMultipleElements"
+						@move-down:element="onMoveElementDown(index, element)"
+						@move-up:element="onMoveElementUp(index, element)"
+						@delete:element="onDeleteElement"
+					/>
+				</template>
+			</SubmissionContentElement>
 			<ExternalToolElement
 				v-else-if="showExternalToolElement(element)"
 				:key="element.id"
diff --git a/src/components/feature-date-time-picker/DatePicker.unit.ts b/src/components/feature-date-time-picker/DatePicker.unit.ts
index 8a0c4a5dfc..813cbde394 100644
--- a/src/components/feature-date-time-picker/DatePicker.unit.ts
+++ b/src/components/feature-date-time-picker/DatePicker.unit.ts
@@ -78,18 +78,4 @@ describe("DatePicker", () => {
 			expect(wrapper.emitted("update:date")).toBeUndefined();
 		});
 	});
-
-	describe("when date is not required", () => {
-		it("should not emit error event", async () => {
-			setup({ date: new Date().toISOString() });
-
-			const textField = wrapper.findComponent({ name: "v-text-field" });
-
-			textField.vm.$emit("blur", {
-				target: { value: new Date().toISOString() },
-			});
-			await wrapper.vm.$nextTick();
-			expect(wrapper.emitted("error")).toBe(undefined);
-		});
-	});
 });
diff --git a/src/components/feature-date-time-picker/DatePicker.vue b/src/components/feature-date-time-picker/DatePicker.vue
index 95f9e87c78..184043d53c 100644
--- a/src/components/feature-date-time-picker/DatePicker.vue
+++ b/src/components/feature-date-time-picker/DatePicker.vue
@@ -20,6 +20,7 @@
 					:class="{ 'menu-open': showDateDialog }"
 					append-icon="$mdiCalendar"
 					readonly
+					:messages="messages"
 					:rules="rules"
 					data-testid="date-input"
 					@keydown.space="showDateDialog = true"
@@ -46,7 +47,6 @@
 </template>
 
 <script lang="ts">
-import { I18N_KEY, injectStrict } from "@/utils/inject";
 import { mdiCalendarClock } from "@mdi/js";
 import { useDebounceFn } from "@vueuse/core";
 import dayjs from "dayjs";
@@ -64,12 +64,11 @@ export default defineComponent({
 		required: { type: Boolean },
 		minDate: { type: String },
 		maxDate: { type: String },
+		dateTimeInPast: { type: Boolean, default: false },
 	},
 	emits: ["update:date"],
 	setup(props, { emit }) {
-		const { t } = useI18n();
-		const i18n = injectStrict(I18N_KEY);
-		const locale = i18n.locale;
+		const { t, locale } = useI18n();
 
 		const modelValue = computed<string>({
 			get() {
@@ -142,6 +141,14 @@ export default defineComponent({
 			showDateDialog.value = false;
 		}, 50);
 
+		const messages = computed(() => {
+			if (props.dateTimeInPast) {
+				return t("components.datePicker.messages.future");
+			}
+
+			return [];
+		});
+
 		return {
 			mdiCalendarClock,
 			locale,
@@ -154,6 +161,7 @@ export default defineComponent({
 			onInput,
 			onError,
 			onMenuToggle,
+			messages,
 		};
 	},
 });
@@ -171,5 +179,9 @@ export default defineComponent({
 		width: 20px;
 		height: 20px;
 	}
+
+	.v-messages__message {
+		line-height: 14px;
+	}
 }
 </style>
diff --git a/src/components/feature-date-time-picker/DateTimePicker.unit.ts b/src/components/feature-date-time-picker/DateTimePicker.unit.ts
index ade22cfb68..8f57a6d2c9 100644
--- a/src/components/feature-date-time-picker/DateTimePicker.unit.ts
+++ b/src/components/feature-date-time-picker/DateTimePicker.unit.ts
@@ -36,46 +36,65 @@ describe("DateTimePicker", () => {
 		expect(wrapper.findComponent(DateTimePicker).exists()).toBe(true);
 	});
 
-	it("should emit input event on date input", async () => {
-		setup({ dateTime: new Date().toISOString() });
+	describe("if date and time are set", () => {
+		it("should emit input event on date input", async () => {
+			setup({ dateTime: new Date().toISOString() });
 
-		const datePicker = wrapper.findComponent({ name: "date-picker" });
-		expect(datePicker.exists()).toBe(true);
-		const tomorrow = new Date();
-		tomorrow.setDate(tomorrow.getDate() + 1);
-		datePicker.vm.$emit("update:date", tomorrow);
+			const datePicker = wrapper.findComponent({ name: "date-picker" });
+			expect(datePicker.exists()).toBe(true);
+			const tomorrow = new Date();
+			tomorrow.setDate(tomorrow.getDate() + 1);
+			datePicker.vm.$emit("update:date", tomorrow);
 
-		await wrapper.vm.$nextTick();
+			await wrapper.vm.$nextTick();
 
-		expect(wrapper.emitted("input")).toHaveLength(1);
-	});
+			expect(wrapper.emitted("input")).toHaveLength(1);
+		});
 
-	it("should emit input event on time input", async () => {
-		jest.useFakeTimers();
-		setup({ dateTime: new Date().toISOString() });
+		it("should emit input event on time input", async () => {
+			jest.useFakeTimers();
+			setup({ dateTime: new Date().toISOString() });
 
-		const timePicker = wrapper.findComponent({ name: "time-picker" });
-		expect(timePicker.exists()).toBe(true);
-		timePicker.vm.$emit("update:time", "00:00");
+			const timePicker = wrapper.findComponent({ name: "time-picker" });
+			expect(timePicker.exists()).toBe(true);
+			timePicker.vm.$emit("update:time", "00:00");
 
-		jest.advanceTimersByTime(1000);
+			jest.advanceTimersByTime(1000);
 
-		expect(wrapper.emitted("input")).toHaveLength(1);
+			expect(wrapper.emitted("input")).toHaveLength(1);
+		});
 	});
 
-	it("should restrict timepicker when date is today", async () => {
-		setup({ dateTime: new Date().toISOString() });
+	describe("if only date is set", () => {
+		it("should emit input event with time set to 23:59", async () => {
+			jest.useFakeTimers();
+			setup({ dateTime: "" });
 
-		const timePicker = wrapper.findComponent({ name: "time-picker" });
-		expect(timePicker.exists()).toBe(true);
-		expect(timePicker.props("allowPast")).toBe(false);
+			const datePicker = wrapper.findComponent({ name: "date-picker" });
+			const date = new Date("2030-01-01");
+			datePicker.vm.$emit("update:date", date);
+
+			jest.advanceTimersByTime(1000);
+
+			const emits = wrapper.emitted("input");
+			expect(emits?.length).toEqual(1);
+			date.setHours(23);
+			date.setMinutes(59);
+			expect(emits?.[0]).toEqual([date.toISOString()]);
+		});
 	});
 
-	it("should not restrict timepicker when date is in the future", async () => {
-		setup({ dateTime: new Date("2300-01-01T00:00:00").toISOString() });
+	describe("if only time is set", () => {
+		it("should emit no input event", async () => {
+			jest.useFakeTimers();
+			setup({ dateTime: "" });
 
-		const timePicker = wrapper.findComponent({ name: "time-picker" });
-		expect(timePicker.exists()).toBe(true);
-		expect(timePicker.props("allowPast")).toBe(true);
+			const timePicker = wrapper.findComponent({ name: "time-picker" });
+			timePicker.vm.$emit("update:time", "00:00");
+
+			jest.advanceTimersByTime(1000);
+
+			expect(wrapper.emitted("input")).toBe(undefined);
+		});
 	});
 });
diff --git a/src/components/feature-date-time-picker/DateTimePicker.vue b/src/components/feature-date-time-picker/DateTimePicker.vue
index 16b41671b1..efb5604181 100644
--- a/src/components/feature-date-time-picker/DateTimePicker.vue
+++ b/src/components/feature-date-time-picker/DateTimePicker.vue
@@ -2,22 +2,21 @@
 	<div class="d-flex flex-row">
 		<date-picker
 			class="mr-2 picker-width"
-			:required="required"
+			:required="dateRequired"
 			:date="date"
 			:label="dateInputLabel"
 			:aria-label="dateInputAriaLabel"
 			:minDate="minDate"
 			:maxDate="maxDate"
-			@update:date="handleDateInput"
+			:date-time-in-past="dateTimeInPast"
+			@update:date="onDateUpdate"
 		/>
 		<time-picker
 			class="picker-width"
-			:required="required"
 			:time="time"
 			:label="timeInputLabel"
 			:aria-label="timeInputAriaLabel"
-			:allow-past="allowPast || !dateIsToday"
-			@update:time="handleTimeInput"
+			@update:time="onTimeUpdate"
 		/>
 	</div>
 </template>
@@ -26,9 +25,8 @@
 import DatePicker from "./DatePicker.vue";
 import TimePicker from "./TimePicker.vue";
 import { useVModel } from "@vueuse/core";
-import { isToday } from "@/plugins/datetime";
-import { I18N_KEY, injectStrict } from "@/utils/inject";
-import { defineComponent, ref } from "vue";
+import { computed, defineComponent, ref } from "vue";
+import { useI18n } from "@/composables/i18n.composable";
 import dayjs from "dayjs";
 
 export default defineComponent({
@@ -48,15 +46,12 @@ export default defineComponent({
 		timeInputAriaLabel: { type: String, default: "" },
 		minDate: { type: String },
 		maxDate: { type: String },
-		required: {
-			type: Boolean,
-		},
-		allowPast: { type: Boolean },
 	},
 	emits: ["input"],
 	setup(props, { emit }) {
-		const i18n = injectStrict(I18N_KEY);
-		const locale = i18n.locale;
+		const { locale } = useI18n();
+
+		const dateTimeInPast = ref(false);
 
 		const getTime = (dateIsoString: string) => {
 			if (dateIsoString === "") {
@@ -73,39 +68,45 @@ export default defineComponent({
 			dateTime.value ? dayjs(dateTime.value).format("YYYY-MM-DD") : ""
 		);
 		const time = ref(dateTime.value ? getTime(dateTime.value) : "");
-		const dateIsToday = ref(isToday(date.value));
+		const dateRequired = computed(() => time.value !== "");
 
 		const emitDateTime = () => {
-			if (date.value !== "" && time.value !== "") {
-				const dateTime = new Date(date.value);
-				const hoursAndMinutes = time.value.split(":");
-				dateTime.setHours(
-					parseInt(hoursAndMinutes[0]),
-					parseInt(hoursAndMinutes[1])
-				);
-				emit("input", dateTime.toISOString());
+			if (date.value === "") {
+				return;
+			}
+
+			let timeValue = time.value;
+			if (timeValue === "") {
+				timeValue = "23:59";
 			}
+
+			const dateTime = new Date(date.value);
+			const hoursAndMinutes = timeValue.split(":");
+			dateTime.setHours(
+				parseInt(hoursAndMinutes[0]),
+				parseInt(hoursAndMinutes[1])
+			);
+			dateTimeInPast.value = dateTime < new Date();
+			emit("input", dateTime.toISOString());
 		};
 
-		const handleDateInput = (newDate: string) => {
+		const onDateUpdate = (newDate: string) => {
 			date.value = newDate;
-			dateIsToday.value = isToday(date.value);
-
 			emitDateTime();
 		};
 
-		const handleTimeInput = (newTime: string) => {
+		const onTimeUpdate = (newTime: string) => {
 			time.value = newTime;
-
 			emitDateTime();
 		};
 
 		return {
 			date,
 			time,
-			dateIsToday,
-			handleDateInput,
-			handleTimeInput,
+			onDateUpdate,
+			onTimeUpdate,
+			dateRequired,
+			dateTimeInPast,
 		};
 	},
 });
diff --git a/src/components/feature-date-time-picker/TimePicker.unit.ts b/src/components/feature-date-time-picker/TimePicker.unit.ts
index 7b947d6a42..721b4adc86 100644
--- a/src/components/feature-date-time-picker/TimePicker.unit.ts
+++ b/src/components/feature-date-time-picker/TimePicker.unit.ts
@@ -144,108 +144,5 @@ describe("TimePicker", () => {
 				expect(wrapper.emitted("update:time")).toBeUndefined();
 			});
 		});
-
-		describe("when time in the past is not allowed", () => {
-			it("should disable selection of time in the past", async () => {
-				setup({
-					time: "12:30",
-					allowPast: false,
-				});
-
-				const textField = wrapper.findComponent({ name: "v-text-field" });
-				const input = textField.find("input");
-				expect(input.exists()).toBe(true);
-				await input.trigger("click");
-
-				const oneOClockListItem = wrapper
-					.findAll({ name: "v-list-item" })
-					.at(0); // 00:00
-				expect(oneOClockListItem.attributes()["aria-disabled"]).toBeDefined();
-			});
-
-			it("should enable selection of time in the future", async () => {
-				setup({
-					time: "12:30",
-					allowPast: false,
-				});
-
-				const textField = wrapper.findComponent({ name: "v-text-field" });
-				const input = textField.find("input");
-				expect(input.exists()).toBe(true);
-				await input.trigger("click");
-
-				const fiveOClockListItem = wrapper
-					.findAll({ name: "v-list-item" })
-					.at(10); // 05:00
-				expect(
-					fiveOClockListItem.attributes()["aria-disabled"]
-				).toBeUndefined();
-			});
-
-			it("should not emit update:time event when time inserted is in the past", async () => {
-				setup({
-					time: "12:30",
-					allowPast: false,
-				});
-
-				const input = wrapper
-					.findComponent({ name: "v-text-field" })
-					.find("input");
-
-				await input.trigger("focus");
-				await input.setValue("03:01");
-				await input.trigger("blur");
-				await wrapper.vm.$nextTick();
-
-				expect(wrapper.emitted("update:time")).toBeUndefined();
-			});
-
-			it("should emit input event when time inserted is in the future", async () => {
-				setup({
-					time: "12:30",
-					allowPast: false,
-				});
-
-				const input = wrapper
-					.findComponent({ name: "v-text-field" })
-					.find("input");
-
-				await input.trigger("focus");
-				await input.setValue("03:11");
-
-				jest.advanceTimersByTime(1000);
-				expect(wrapper.emitted("update:time")).toHaveLength(1);
-			});
-		});
-
-		describe("when time in the past is allowed", () => {
-			it("should enable selection of time in the past", async () => {
-				setup({ time: "12:30" });
-
-				const textField = wrapper.findComponent({ name: "v-text-field" });
-				const input = textField.find("input");
-				expect(input.exists()).toBe(true);
-				await input.trigger("click");
-
-				const oneOClockListItem = wrapper
-					.findAll({ name: "v-list-item" })
-					.at(0); // 00:00
-				expect(oneOClockListItem.attributes()["aria-disabled"]).toBeUndefined();
-			});
-
-			it("should emit input event when time inserted is in the past", async () => {
-				setup({ time: "12:30" });
-
-				const input = wrapper
-					.findComponent({ name: "v-text-field" })
-					.find("input");
-
-				await input.trigger("focus");
-				await input.setValue("02:00");
-
-				jest.advanceTimersByTime(1000);
-				expect(wrapper.emitted("update:time")).toHaveLength(1);
-			});
-		});
 	});
 });
diff --git a/src/components/feature-date-time-picker/TimePicker.vue b/src/components/feature-date-time-picker/TimePicker.vue
index 3c86e2da27..3e5c94be77 100644
--- a/src/components/feature-date-time-picker/TimePicker.vue
+++ b/src/components/feature-date-time-picker/TimePicker.vue
@@ -37,7 +37,6 @@
 							:data-testid="`time-select-${index}`"
 							class="time-list-item text-left"
 							@click="onSelect(timeOfDay.value)"
-							:disabled="timeOfDay.disabled"
 						>
 							<v-list-item-title>{{ timeOfDay.value }}</v-list-item-title>
 						</v-list-item>
@@ -51,7 +50,7 @@
 
 <script lang="ts">
 import { useDebounceFn } from "@vueuse/core";
-import { computed, defineComponent, ref, toRef } from "vue";
+import { computed, defineComponent, ref } from "vue";
 import { useTimePickerState } from "./TimePickerState.composable";
 import { ValidationRule } from "@/types/date-time-picker/Validation";
 import { useI18n } from "@/composables/i18n.composable";
@@ -63,7 +62,6 @@ export default defineComponent({
 		label: { type: String, default: "" },
 		ariaLabel: { type: String, default: "" },
 		required: { type: Boolean },
-		allowPast: { type: Boolean, default: true },
 	},
 	emits: ["update:time"],
 	setup(props, { emit }) {
@@ -81,9 +79,7 @@ export default defineComponent({
 		const inputField = ref<HTMLInputElement | null>(null);
 		const valid = ref(true);
 
-		const { timesOfDayList, timeInPast } = useTimePickerState(
-			toRef(props, "allowPast")
-		);
+		const { timesOfDayList } = useTimePickerState();
 
 		const timeRegex = /^([01]\d|2[0-3]):[0-5]\d$/g;
 
@@ -102,19 +98,6 @@ export default defineComponent({
 				: true;
 		};
 
-		const allowPastRule: ValidationRule = (value: string | null) => {
-			if (value === "" || value === null) {
-				return true;
-			}
-			const hoursAndMinutes = value.split(":");
-			return timeInPast(
-				parseInt(hoursAndMinutes[0]),
-				parseInt(hoursAndMinutes[1])
-			)
-				? t("components.timePicker.validation.future")
-				: true;
-		};
-
 		const rules = computed<ValidationRule[]>(() => {
 			const rules: ValidationRule[] = [];
 
@@ -122,9 +105,7 @@ export default defineComponent({
 				rules.push(requiredRule);
 			}
 			rules.push(formatRule);
-			if (!props.allowPast) {
-				rules.push(allowPastRule);
-			}
+
 			return rules;
 		});
 
diff --git a/src/components/feature-date-time-picker/TimePickerState.composable.ts b/src/components/feature-date-time-picker/TimePickerState.composable.ts
index fb80d84e66..44b9a7892c 100644
--- a/src/components/feature-date-time-picker/TimePickerState.composable.ts
+++ b/src/components/feature-date-time-picker/TimePickerState.composable.ts
@@ -1,42 +1,25 @@
-import { computed, Ref } from "vue";
+import { computed } from "vue";
 import dayjs from "dayjs";
 
-export const useTimePickerState = (allowPast: Ref<boolean>) => {
+export const useTimePickerState = () => {
 	const timesOfDayList = computed(() => {
 		type timeItem = {
 			value: string;
-			disabled: boolean;
 		};
 
 		const times: timeItem[] = [];
 		for (let hour = 0; hour < 24; hour++) {
 			times.push({
 				value: dayjs().hour(hour).minute(0).format("HH:mm"),
-				disabled: !allowPast.value && timeInPast(hour, 0),
 			});
 			times.push({
 				value: dayjs().hour(hour).minute(30).format("HH:mm"),
-				disabled: !allowPast.value && timeInPast(hour, 30),
 			});
 		}
 		return times;
 	});
 
-	const timeInPast = (hour: number, minute: number): boolean => {
-		const date = new Date();
-		const currentHour = date.getHours();
-		const currentMinute = date.getMinutes();
-		if (hour < currentHour) {
-			return true;
-		}
-		if (hour === currentHour && minute < currentMinute) {
-			return true;
-		}
-		return false;
-	};
-
 	return {
 		timesOfDayList,
-		timeInPast,
 	};
 };
diff --git a/src/components/rooms/RoomExternalToolCard.unit.ts b/src/components/rooms/RoomExternalToolCard.unit.ts
index 1fb7ed145a..f465dbc31e 100644
--- a/src/components/rooms/RoomExternalToolCard.unit.ts
+++ b/src/components/rooms/RoomExternalToolCard.unit.ts
@@ -6,11 +6,23 @@ import { externalToolDisplayDataFactory } from "@@/tests/test-utils/factory/exte
 import EnvConfigModule from "@/store/env-config";
 import { createModuleMocks } from "@/utils/mock-store-module";
 import RoomExternalToolCard from "./RoomExternalToolCard.vue";
-import { ENV_CONFIG_MODULE_KEY, I18N_KEY } from "@/utils/inject";
+import {
+	ENV_CONFIG_MODULE_KEY,
+	EXTERNAL_TOOLS_MODULE_KEY,
+	I18N_KEY,
+} from "@/utils/inject";
 import { ToolConfigurationStatus } from "@/store/external-tool";
+import ExternalToolsModule from "@/store/external-tools";
+import flushPromises from "flush-promises";
+import { toolLaunchRequestResponseFactory } from "@@/tests/test-utils";
+import { ToolLaunchRequestResponse } from "@/serverApi/v3";
 
 describe("RoomExternalToolCard", () => {
-	const getWrapper = (tool: ExternalToolDisplayData, canEdit: boolean) => {
+	const getWrapper = (
+		tool: ExternalToolDisplayData,
+		canEdit: boolean,
+		externalToolsModuleMock = createModuleMocks(ExternalToolsModule)
+	) => {
 		document.body.setAttribute("data-app", "true");
 
 		const envConfigModule = createModuleMocks(EnvConfigModule, {
@@ -33,11 +45,14 @@ describe("RoomExternalToolCard", () => {
 						tc: (key: string): string => key,
 					},
 					[ENV_CONFIG_MODULE_KEY.valueOf()]: envConfigModule,
+					[EXTERNAL_TOOLS_MODULE_KEY.valueOf()]: externalToolsModuleMock,
 				},
 			}
 		);
 
-		return wrapper;
+		return {
+			wrapper,
+		};
 	};
 
 	afterEach(() => {
@@ -52,7 +67,7 @@ describe("RoomExternalToolCard", () => {
 						status: ToolConfigurationStatus.Outdated,
 					});
 
-				const wrapper: Wrapper<Vue> = getWrapper(tool, false);
+				const { wrapper } = getWrapper(tool, false);
 
 				return {
 					wrapper,
@@ -76,7 +91,7 @@ describe("RoomExternalToolCard", () => {
 						status: ToolConfigurationStatus.Latest,
 					});
 
-				const wrapper: Wrapper<Vue> = getWrapper(tool, false);
+				const { wrapper } = getWrapper(tool, false);
 
 				return {
 					wrapper,
@@ -97,24 +112,81 @@ describe("RoomExternalToolCard", () => {
 	});
 
 	describe("when the user clicks the card", () => {
-		const setup = () => {
-			const tool: ExternalToolDisplayData =
-				externalToolDisplayDataFactory.build();
+		describe("when there was no error while loading launch request", () => {
+			const setup = async () => {
+				const toolDisplayData: ExternalToolDisplayData =
+					externalToolDisplayDataFactory.build();
 
-			const wrapper: Wrapper<Vue> = getWrapper(tool, true);
+				const launchRequest: ToolLaunchRequestResponse =
+					toolLaunchRequestResponseFactory.build();
 
-			return {
-				wrapper,
-				tool,
+				const externalToolsModuleMock = createModuleMocks(ExternalToolsModule);
+				externalToolsModuleMock.loadToolLaunchData.mockResolvedValueOnce(
+					launchRequest
+				);
+
+				const { wrapper } = getWrapper(
+					toolDisplayData,
+					true,
+					externalToolsModuleMock
+				);
+
+				await flushPromises();
+
+				return {
+					wrapper,
+					toolDisplayData,
+					launchRequest,
+				};
 			};
-		};
 
-		it("should emit the click event", async () => {
-			const { wrapper, tool } = setup();
+			it("should emit the click event", async () => {
+				const { wrapper, toolDisplayData, launchRequest } = await setup();
+
+				await wrapper.trigger("click");
 
-			await wrapper.trigger("click");
+				expect(wrapper.emitted("click")).toContainEqual([
+					launchRequest,
+					toolDisplayData,
+				]);
+			});
+		});
+
+		describe("when loading error is set", () => {
+			const setup = async () => {
+				const toolDisplayData: ExternalToolDisplayData =
+					externalToolDisplayDataFactory.build();
+
+				const launchRequest: ToolLaunchRequestResponse =
+					toolLaunchRequestResponseFactory.build();
+
+				const externalToolsModuleMock = createModuleMocks(ExternalToolsModule);
+				externalToolsModuleMock.loadToolLaunchData.mockRejectedValueOnce(
+					new Error()
+				);
+
+				const { wrapper } = getWrapper(
+					toolDisplayData,
+					true,
+					externalToolsModuleMock
+				);
+
+				await flushPromises();
 
-			expect(wrapper.emitted("click")).toContainEqual([tool]);
+				return {
+					wrapper,
+					toolDisplayData,
+					launchRequest,
+				};
+			};
+
+			it("should emit the error event", async () => {
+				const { wrapper, toolDisplayData } = await setup();
+
+				await wrapper.trigger("click");
+
+				expect(wrapper.emitted("error")).toContainEqual([toolDisplayData]);
+			});
 		});
 	});
 
@@ -123,7 +195,7 @@ describe("RoomExternalToolCard", () => {
 			const tool: ExternalToolDisplayData =
 				externalToolDisplayDataFactory.build();
 
-			const wrapper: Wrapper<Vue> = getWrapper(tool, true);
+			const { wrapper } = getWrapper(tool, true);
 
 			return {
 				wrapper,
@@ -203,7 +275,7 @@ describe("RoomExternalToolCard", () => {
 			const tool: ExternalToolDisplayData =
 				externalToolDisplayDataFactory.build();
 
-			const wrapper: Wrapper<Vue> = getWrapper(tool, false);
+			const { wrapper } = getWrapper(tool, false);
 
 			return { wrapper };
 		};
diff --git a/src/components/rooms/RoomExternalToolCard.vue b/src/components/rooms/RoomExternalToolCard.vue
index e4f02a4dd3..a6f0a9fee1 100644
--- a/src/components/rooms/RoomExternalToolCard.vue
+++ b/src/components/rooms/RoomExternalToolCard.vue
@@ -33,19 +33,38 @@
 </template>
 
 <script lang="ts">
+import {
+	computed,
+	ComputedRef,
+	defineComponent,
+	onMounted,
+	PropType,
+	ref,
+	Ref,
+} from "vue";
 import RoomDotMenu from "@/components/molecules/RoomDotMenu.vue";
 import { ExternalToolDisplayData } from "@/store/external-tool/external-tool-display-data";
-import { ENV_CONFIG_MODULE_KEY, I18N_KEY, injectStrict } from "@/utils/inject";
+import {
+	ENV_CONFIG_MODULE_KEY,
+	EXTERNAL_TOOLS_MODULE_KEY,
+	I18N_KEY,
+	injectStrict,
+} from "@/utils/inject";
 import { mdiAlert, mdiPencilOutline, mdiTrashCanOutline } from "@mdi/js";
-import { computed, ComputedRef, defineComponent, PropType } from "vue";
-import { ToolConfigurationStatus } from "@/store/external-tool";
+import {
+	ToolConfigurationStatus,
+	ToolLaunchRequest,
+} from "@/store/external-tool";
 import EnvConfigModule from "@/store/env-config";
 import RoomBaseCard from "./RoomBaseCard.vue";
+import ExternalToolsModule from "@/store/external-tools";
+import { ExternalToolMapper } from "@/store/external-tool/mapper";
+import { ToolLaunchRequestResponse } from "@/serverApi/v3";
 
 export default defineComponent({
 	name: "RoomExternalToolCard",
 	components: { RoomBaseCard, RoomDotMenu },
-	emits: ["edit", "delete", "click"],
+	emits: ["edit", "delete", "click", "error"],
 	props: {
 		tool: {
 			type: Object as PropType<ExternalToolDisplayData>,
@@ -61,11 +80,19 @@ export default defineComponent({
 		const envConfigModule: EnvConfigModule = injectStrict(
 			ENV_CONFIG_MODULE_KEY
 		);
+		const externalToolsModule: ExternalToolsModule = injectStrict(
+			EXTERNAL_TOOLS_MODULE_KEY
+		);
 
 		const t = (key: string): string => i18n.tc(key, 0);
 
 		const handleClick = () => {
-			emit("click", props.tool);
+			if (loadingError.value) {
+				emit("error", props.tool);
+				return;
+			}
+
+			emit("click", toolLaunchRequest.value, props.tool);
 		};
 
 		const handleEdit = () => {
@@ -98,6 +125,31 @@ export default defineComponent({
 			() => props.tool.status === ToolConfigurationStatus.Outdated
 		);
 
+		const toolLaunchRequest: Ref<ToolLaunchRequest | undefined> = ref();
+
+		const loadingError: Ref<boolean> = ref(false);
+		const loadLaunchRequest = async () => {
+			loadingError.value = false;
+			try {
+				const response: ToolLaunchRequestResponse | undefined =
+					await externalToolsModule.loadToolLaunchData(
+						props.tool.contextExternalToolId
+					);
+				toolLaunchRequest.value = response
+					? ExternalToolMapper.mapToToolLaunchRequest(response)
+					: undefined;
+			} catch (e: unknown) {
+				loadingError.value = true;
+			}
+		};
+
+		onMounted(async () => {
+			if (isToolOutdated.value) {
+				return;
+			}
+			await loadLaunchRequest();
+		});
+
 		return {
 			t,
 			handleClick,
diff --git a/src/components/ui-light-box/LightBox.composable.ts b/src/components/ui-light-box/LightBox.composable.ts
new file mode 100644
index 0000000000..c230391637
--- /dev/null
+++ b/src/components/ui-light-box/LightBox.composable.ts
@@ -0,0 +1,54 @@
+import { createSharedComposable } from "@vueuse/core";
+import { ref } from "vue";
+
+export interface LightBoxOptions {
+	downloadUrl: string;
+	previewUrl: string;
+	alt: string;
+	name: string;
+}
+
+export const useLightBox = () => {
+	const { isLightBoxOpen, openInternal } = useInternalLightBox();
+
+	const open = (data: LightBoxOptions) => {
+		openInternal(data);
+	};
+
+	return {
+		isLightBoxOpen,
+		open,
+	};
+};
+
+export const useInternalLightBox = createSharedComposable(() => {
+	const isLightBoxOpen = ref<boolean>(false);
+	const lightBoxOptions = ref<LightBoxOptions>({
+		downloadUrl: "",
+		previewUrl: "",
+		alt: "",
+		name: "",
+	});
+
+	const close = () => {
+		lightBoxOptions.value = {
+			downloadUrl: "",
+			previewUrl: "",
+			alt: "",
+			name: "",
+		};
+		isLightBoxOpen.value = false;
+	};
+
+	const openInternal = (options: LightBoxOptions) => {
+		lightBoxOptions.value = options;
+		isLightBoxOpen.value = true;
+	};
+
+	return {
+		close,
+		isLightBoxOpen,
+		lightBoxOptions,
+		openInternal,
+	};
+});
diff --git a/src/components/ui-light-box/LightBox.composable.unit.ts b/src/components/ui-light-box/LightBox.composable.unit.ts
new file mode 100644
index 0000000000..18b5f478a0
--- /dev/null
+++ b/src/components/ui-light-box/LightBox.composable.unit.ts
@@ -0,0 +1,111 @@
+import { I18N_KEY } from "@/utils/inject";
+import { mountComposable } from "@@/tests/test-utils/mountComposable";
+import {
+	LightBoxOptions,
+	useInternalLightBox,
+	useLightBox,
+} from "./LightBox.composable";
+
+const defaultLightBoxOptions: LightBoxOptions = {
+	downloadUrl: "",
+	previewUrl: "",
+	alt: "",
+	name: "",
+};
+
+describe("LightBox composable", () => {
+	describe("useLightBox", () => {
+		const setup = () => {
+			const { open, isLightBoxOpen } = mountComposable(() => useLightBox(), {
+				[I18N_KEY.valueOf()]: { t: (k: string) => k },
+			});
+
+			return {
+				open,
+				isLightBoxOpen,
+			};
+		};
+
+		beforeEach(() => {
+			jest.clearAllMocks();
+		});
+
+		describe("open", () => {
+			describe("when open is called", () => {
+				it("should open the LightBox", async () => {
+					const { open, isLightBoxOpen } = setup();
+
+					expect(isLightBoxOpen.value).toBe(false);
+
+					const data: LightBoxOptions = {
+						downloadUrl: "url-string",
+						previewUrl: "previewUrl-string",
+						alt: "alt-string",
+						name: "name-string",
+					};
+					open(data);
+
+					expect(isLightBoxOpen.value).toBe(true);
+				});
+			});
+		});
+	});
+
+	describe("useInternalLightBox", () => {
+		const setup = () => {
+			const { close, isLightBoxOpen, lightBoxOptions, openInternal } =
+				mountComposable(() => useInternalLightBox(), {
+					[I18N_KEY.valueOf()]: { t: (k: string) => k },
+				});
+
+			return {
+				close,
+				isLightBoxOpen,
+				lightBoxOptions,
+				openInternal,
+			};
+		};
+
+		beforeEach(() => {
+			jest.clearAllMocks();
+		});
+
+		describe("when openInternal is called", () => {
+			it("should open the LightBox", async () => {
+				const { openInternal, isLightBoxOpen, lightBoxOptions } = setup();
+
+				isLightBoxOpen.value = false;
+				lightBoxOptions.value = defaultLightBoxOptions;
+
+				const data: LightBoxOptions = {
+					downloadUrl: "url-string",
+					previewUrl: "previewUrl-string",
+					alt: "alt-string",
+					name: "name-string",
+				};
+				openInternal(data);
+
+				expect(isLightBoxOpen.value).toBe(true);
+				expect(lightBoxOptions.value).toBe(data);
+			});
+		});
+
+		describe("when close is called", () => {
+			it("should close the LightBox and set lightBoxOptions to undefined", async () => {
+				const { close, isLightBoxOpen, lightBoxOptions } = setup();
+
+				isLightBoxOpen.value = true;
+				lightBoxOptions.value = {
+					downloadUrl: "downloadUrl-string",
+					previewUrl: "previewUrl-string",
+					alt: "alt-string",
+					name: "name-string",
+				};
+				close();
+
+				expect(isLightBoxOpen.value).toBe(false);
+				expect(lightBoxOptions.value).toStrictEqual(defaultLightBoxOptions);
+			});
+		});
+	});
+});
diff --git a/src/components/ui-light-box/LightBox.unit.ts b/src/components/ui-light-box/LightBox.unit.ts
new file mode 100644
index 0000000000..9c8fb5146b
--- /dev/null
+++ b/src/components/ui-light-box/LightBox.unit.ts
@@ -0,0 +1,223 @@
+import { downloadFile } from "@/utils/fileHelper";
+import createComponentMocks from "@@/tests/test-utils/componentMocks";
+import { mdiClose, mdiFileDocumentOutline, mdiTrayArrowDown } from "@mdi/js";
+import { MountOptions, shallowMount } from "@vue/test-utils";
+import Vue, { nextTick, ref } from "vue";
+import { LightBoxOptions, useInternalLightBox } from "./LightBox.composable";
+import LightBox from "./LightBox.vue";
+
+jest.mock("./LightBox.composable");
+jest.mock("@/utils/fileHelper");
+
+const mockedUseInternalLightBox = jest.mocked(useInternalLightBox);
+
+describe("LightBox", () => {
+	beforeEach(() => {
+		jest.resetAllMocks();
+	});
+
+	const setup = (props: {
+		downloadUrl?: string;
+		previewUrl?: string;
+		alt?: string;
+		name?: string;
+	}) => {
+		document.body.setAttribute("data-app", "true");
+
+		const close = jest.fn();
+		const isLightBoxOpen = ref(true);
+		const lightBoxOptions = ref<LightBoxOptions>({
+			downloadUrl: props.downloadUrl ?? "test-downloadUrl",
+			previewUrl: props.previewUrl ?? "test-previewUrl",
+			alt: props.alt ?? "test-alt",
+			name: props.name ?? "test-name",
+		});
+
+		const mockedDownloadFile = jest.mocked(downloadFile).mockReturnValueOnce();
+
+		mockedUseInternalLightBox.mockReturnValue({
+			close: close,
+			isLightBoxOpen: isLightBoxOpen,
+			lightBoxOptions: lightBoxOptions,
+			openInternal: jest.fn(),
+		});
+
+		const wrapper = shallowMount(LightBox as MountOptions<Vue>, {
+			...createComponentMocks({ i18n: true }),
+		});
+
+		return {
+			close,
+			isLightBoxOpen,
+			lightBoxOptions,
+			mockedDownloadFile,
+			wrapper,
+		};
+	};
+
+	describe("when component is mounted", () => {
+		it("should be found in dom", () => {
+			const { wrapper } = setup({});
+
+			const lightBox = wrapper.findComponent(LightBox);
+
+			expect(lightBox.exists()).toBe(true);
+		});
+
+		it("should set image src correctly", () => {
+			const { lightBoxOptions, wrapper } = setup({});
+
+			const src = wrapper.find("img").attributes("src");
+
+			expect(src).toEqual(lightBoxOptions.value.previewUrl);
+		});
+
+		it("should set image alt correctly", () => {
+			const { lightBoxOptions, wrapper } = setup({});
+
+			const alt = wrapper.find("img").attributes("alt");
+
+			expect(alt).toEqual(lightBoxOptions.value.alt);
+		});
+
+		it("should show close button", () => {
+			const { wrapper } = setup({});
+
+			const closeButton = wrapper.findAllComponents({ name: "v-btn" }).at(0);
+
+			expect(closeButton.text()).toEqual(mdiClose);
+		});
+
+		describe("when close button is clicked", () => {
+			it("should call close function", async () => {
+				const { close, wrapper } = setup({});
+
+				const closeButton = wrapper.findAllComponents({ name: "v-btn" }).at(0);
+				await closeButton.vm.$emit("click");
+
+				expect(close).toBeCalled();
+			});
+		});
+
+		describe("when file name is set", () => {
+			it("should show toolbar title", () => {
+				const { wrapper } = setup({});
+
+				const toolbarTitle = wrapper.findComponent({ name: "v-toolbar-title" });
+
+				expect(toolbarTitle.exists()).toBe(true);
+			});
+
+			it("should show file icon", () => {
+				const { wrapper } = setup({});
+
+				const toolbarTitle = wrapper.findComponent({ name: "v-toolbar-title" });
+				const fileIcon = toolbarTitle.findComponent({ name: "v-icon" });
+
+				expect(fileIcon.exists()).toBe(true);
+				expect(fileIcon.text()).toEqual(mdiFileDocumentOutline);
+			});
+
+			it("should show file name", () => {
+				const { wrapper } = setup({});
+
+				const toolbarTitle = wrapper.findComponent({ name: "v-toolbar-title" });
+				const fileName = toolbarTitle.find("span");
+
+				expect(fileName.exists()).toBe(true);
+			});
+
+			it("should set file name correctly", () => {
+				const { lightBoxOptions, wrapper } = setup({});
+
+				const toolbarTitle = wrapper.findComponent({ name: "v-toolbar-title" });
+				const fileName = toolbarTitle.find("span");
+
+				expect(fileName.text()).toEqual(lightBoxOptions.value.name);
+			});
+		});
+
+		describe("when file name is empty", () => {
+			it("should not show toolbar title", () => {
+				const { wrapper } = setup({ name: "" });
+
+				const toolbarTitle = wrapper.findComponent({ name: "v-toolbar-title" });
+
+				expect(toolbarTitle.exists()).toBe(false);
+			});
+		});
+
+		describe("when download url is set", () => {
+			it("should show download button", () => {
+				const { wrapper } = setup({});
+
+				const downloadButton = wrapper
+					.findAllComponents({ name: "v-btn" })
+					.at(1);
+
+				expect(downloadButton.text()).toEqual(mdiTrayArrowDown);
+			});
+
+			describe("when download button is clicked", () => {
+				it("should call downloadFile function", async () => {
+					const { lightBoxOptions, mockedDownloadFile, wrapper } = setup({});
+
+					const downloadButton = wrapper
+						.findAllComponents({ name: "v-btn" })
+						.at(1);
+					await downloadButton.vm.$emit("click");
+
+					expect(mockedDownloadFile).toBeCalledWith(
+						lightBoxOptions.value.downloadUrl,
+						lightBoxOptions.value.name
+					);
+				});
+			});
+		});
+
+		describe("when download url is empty", () => {
+			it("should not show download button", () => {
+				const { wrapper } = setup({ downloadUrl: "" });
+
+				const buttons = wrapper.findAllComponents({ name: "v-btn" });
+
+				expect(buttons).toHaveLength(1);
+			});
+		});
+	});
+
+	describe("when Escape button is pressed", () => {
+		it("should call close function", async () => {
+			const { close } = setup({});
+
+			// simulate keypress on document
+			const event = new KeyboardEvent("keydown", { key: "Escape" });
+			window.dispatchEvent(event);
+			await nextTick();
+
+			expect(close).toBeCalled();
+		});
+	});
+
+	describe("when area outside of the image is clicked", () => {
+		it("should call close function", async () => {
+			const { close, wrapper } = setup({});
+
+			const overlay = wrapper.findComponent({ name: "v-overlay" });
+			await overlay.vm.$emit("click");
+
+			expect(close).toBeCalled();
+		});
+	});
+
+	describe("when isLightBoxOpen is set to false", () => {
+		it("should hide the LightBox", async () => {
+			const { isLightBoxOpen, wrapper } = setup({});
+
+			isLightBoxOpen.value = false;
+			const lightBox = wrapper.findComponent(LightBox);
+
+			expect(lightBox.isVisible()).toBe(true);
+		});
+	});
+});
diff --git a/src/components/ui-light-box/LightBox.vue b/src/components/ui-light-box/LightBox.vue
new file mode 100644
index 0000000000..d88e82ded4
--- /dev/null
+++ b/src/components/ui-light-box/LightBox.vue
@@ -0,0 +1,78 @@
+<template>
+	<v-dialog fullscreen hide-overlay :value="isLightBoxOpen">
+		<v-toolbar flat>
+			<v-btn icon @click="close">
+				<v-icon>{{ mdiClose }}</v-icon>
+			</v-btn>
+			<v-toolbar-title
+				v-if="lightBoxOptions.name !== ''"
+				class="d-flex align-items-center"
+			>
+				<v-icon color="black" class="mr-2" size="18">{{
+					mdiFileDocumentOutline
+				}}</v-icon>
+				<span class="subtitle-1 font-weight-bold text-truncate mr-8">{{
+					lightBoxOptions.name
+				}}</span>
+			</v-toolbar-title>
+			<v-spacer />
+			<v-btn v-if="lightBoxOptions.downloadUrl !== ''" icon @click="download">
+				<v-icon>{{ mdiTrayArrowDown }}</v-icon>
+			</v-btn>
+		</v-toolbar>
+		<v-overlay absolute class="mt-16 pa-4" @click="close">
+			<div
+				class="d-flex align-items-center justify-content-center"
+				style="height: 100%"
+			>
+				<img
+					:src="lightBoxOptions.previewUrl"
+					:alt="lightBoxOptions.alt"
+					style="max-height: 100%; max-width: 100%"
+					@click.stop
+				/>
+			</div>
+		</v-overlay>
+	</v-dialog>
+</template>
+
+<script lang="ts">
+import { downloadFile } from "@/utils/fileHelper";
+import { mdiClose, mdiFileDocumentOutline, mdiTrayArrowDown } from "@mdi/js";
+import { onKeyStroke } from "@vueuse/core";
+import { defineComponent } from "vue";
+import { useInternalLightBox } from "./LightBox.composable";
+
+export default defineComponent({
+	name: "LightBox",
+	setup() {
+		const { close, isLightBoxOpen, lightBoxOptions } = useInternalLightBox();
+
+		onKeyStroke("Escape", (e) => close(), { eventName: "keydown" });
+
+		const download = async () => {
+			await downloadFile(
+				lightBoxOptions.value.downloadUrl,
+				lightBoxOptions.value.name
+			);
+		};
+
+		return {
+			close,
+			download,
+			isLightBoxOpen,
+			lightBoxOptions,
+			mdiClose,
+			mdiFileDocumentOutline,
+			mdiTrayArrowDown,
+		};
+	},
+});
+</script>
+
+<style scoped>
+.v-overlay >>> .v-overlay__content {
+	height: 100%;
+	width: 100%;
+}
+</style>
diff --git a/src/components/ui-light-box/index.ts b/src/components/ui-light-box/index.ts
new file mode 100644
index 0000000000..f077df65fe
--- /dev/null
+++ b/src/components/ui-light-box/index.ts
@@ -0,0 +1,4 @@
+import { LightBoxOptions, useLightBox } from "./LightBox.composable";
+import LightBox from "./LightBox.vue";
+
+export { LightBox, LightBoxOptions, useLightBox };
diff --git a/src/composables/i18n.composable.ts b/src/composables/i18n.composable.ts
index ea7bb79c22..1b9c9ec12a 100644
--- a/src/composables/i18n.composable.ts
+++ b/src/composables/i18n.composable.ts
@@ -12,8 +12,11 @@ export const useI18n = () => {
 		return i18n.te(key, locale);
 	};
 
+	const locale = i18n.locale;
+
 	return {
 		t,
 		te,
+		locale,
 	};
 };
diff --git a/src/locales/de.json b/src/locales/de.json
index 54ea984fe3..2b0ce093bb 100644
--- a/src/locales/de.json
+++ b/src/locales/de.json
@@ -137,6 +137,7 @@
 	"common.words.languages.en": "Englisch",
 	"common.words.languages.es": "Spanisch",
 	"common.words.languages.uk": "Ukrainisch",
+	"components.datePicker.messages.future": "Bitte Datum und Uhrzeit in der Zukunft angeben.",
 	"components.datePicker.validation.required": "Bitte Datum angeben.",
 	"components.timePicker.validation.required": "Bitte Uhrzeit angeben.",
 	"components.timePicker.validation.format": "Bitte Format HH:MM verwenden.",
@@ -735,8 +736,8 @@
 	"pages.administration.school.index.authSystems.copyLink": "Link kopieren",
 	"pages.administration.school.index.authSystems.edit": "{system} bearbeiten",
 	"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.index.title": "Klassen verwalten",
+	"pages.administration.classes.index.add": "Klasse hinzufügen",
 	"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",
diff --git a/src/locales/en.json b/src/locales/en.json
index bf558ace10..1e6dadebce 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -136,6 +136,7 @@
 	"common.words.languages.en": "English",
 	"common.words.languages.es": "Spanish",
 	"common.words.languages.uk": "Ukrainian",
+	"components.datePicker.messages.future": "Please specify a date and time in the future.",
 	"components.datePicker.validation.required": "Please enter a date.",
 	"components.timePicker.validation.required": "Please enter a time.",
 	"components.timePicker.validation.format": "Please use format HH:MM",
@@ -733,8 +734,8 @@
 	"pages.administration.school.index.authSystems.copyLink": "Copy Link",
 	"pages.administration.school.index.authSystems.edit": "Edit {system}",
 	"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.index.title": "Manage classes",
+	"pages.administration.classes.index.add": "Add class",
 	"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",
diff --git a/src/locales/es.json b/src/locales/es.json
index 896bc1b7a9..9e199408ad 100644
--- a/src/locales/es.json
+++ b/src/locales/es.json
@@ -136,6 +136,7 @@
 	"common.words.languages.en": "Inglés",
 	"common.words.languages.es": "Español",
 	"common.words.languages.uk": "Ucranio",
+	"components.datePicker.messages.future": "Por favor, especifique una fecha y una hora en el futuro.",
 	"components.datePicker.validation.required": "Por favor ingrese una fecha.",
 	"components.timePicker.validation.required": "Por favor ingrese un tiempo.",
 	"components.timePicker.validation.format": "Por favor utilice el formato HH:MM",
@@ -722,8 +723,8 @@
 	"pages.administration.school.index.authSystems.copyLink": "Copiar enlace",
 	"pages.administration.school.index.authSystems.edit": "Editar {system}",
 	"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.index.title": "Administrar clases",
+	"pages.administration.classes.index.add": "Agregar clase",
 	"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",
diff --git a/src/locales/uk.json b/src/locales/uk.json
index 3748f37625..0c2741cc2f 100644
--- a/src/locales/uk.json
+++ b/src/locales/uk.json
@@ -137,6 +137,7 @@
 	"common.words.languages.en": "Англійська",
 	"common.words.languages.es": "Іспанська",
 	"common.words.languages.uk": "Українська",
+	"components.datePicker.messages.future": "Будь ласка, вкажіть дату та час у майбутньому.",
 	"components.datePicker.validation.required": "Будь ласка, введіть дату.",
 	"components.timePicker.validation.required": "Будь ласка, введіть час.",
 	"components.timePicker.validation.format": "Використовуйте формат ГГ:ХХ",
@@ -812,8 +813,8 @@
 	"pages.administration.teachers.new.success": "Викладача успішно створено!",
 	"pages.administration.teachers.new.title": "Додати викладача",
 	"pages.administration.teachers.table.edit.ariaLabel": "Редагування вчителя",
-	"pages.administration.classes.index.title":  "Керувати заняттями",
-	"pages.administration.classes.index.add":  "Додати клас",
+	"pages.administration.classes.index.title": "Керувати заняттями",
+	"pages.administration.classes.index.add": "Додати клас",
 	"pages.content._id.addToTopic": "Для додавання в",
 	"pages.content._id.collection.selectElements": "Виберіть елементи, які треба додати до теми",
 	"pages.content._id.metadata.author": "Автор",
diff --git a/src/pages/rooms/tools/RoomExternalToolsSection.unit.ts b/src/pages/rooms/tools/RoomExternalToolsSection.unit.ts
index d23ae92ab2..015ec19160 100644
--- a/src/pages/rooms/tools/RoomExternalToolsSection.unit.ts
+++ b/src/pages/rooms/tools/RoomExternalToolsSection.unit.ts
@@ -1,7 +1,6 @@
 import { createMock, DeepMocked } from "@golevelup/ts-jest";
 import { mount, MountOptions, Wrapper } from "@vue/test-utils";
 import createComponentMocks from "@@/tests/test-utils/componentMocks";
-import { AxiosError } from "axios";
 import Vue from "vue";
 import {
 	AUTH_MODULE_KEY,
@@ -13,27 +12,34 @@ import {
 import {
 	businessErrorFactory,
 	externalToolDisplayDataFactory,
+	toolLaunchRequestResponseFactory,
 } from "@@/tests/test-utils/factory";
 import {
 	ExternalToolDisplayData,
+	ToolConfigurationStatus,
 	ToolContextType,
 } from "@/store/external-tool";
 import AuthModule from "@/store/auth";
 import ContextExternalToolsModule from "@/store/context-external-tools";
-import ExternalToolsModule from "@/store/external-tools";
-import { BusinessError } from "@/store/types/commons";
 import { createModuleMocks } from "@/utils/mock-store-module";
 import VueRouter from "vue-router";
 import * as routerComposables from "vue-router/composables";
-import EnvConfigModule from "../../../store/env-config";
+import EnvConfigModule from "@/store/env-config";
 import RoomExternalToolsSection from "./RoomExternalToolsSection.vue";
+import ExternalToolsModule from "@/store/external-tools";
+import flushPromises from "flush-promises";
+import { BusinessError } from "@/store/types/commons";
+import { AxiosError } from "axios";
 
 describe("RoomExternalToolsSection", () => {
 	let router: DeepMocked<VueRouter>;
 
 	const getWrapper = (
-		props: { tools: ExternalToolDisplayData[]; roomId: string },
-		externalToolsModuleGetter?: Partial<ExternalToolsModule>
+		props: {
+			tools: ExternalToolDisplayData[];
+			roomId: string;
+		},
+		externalToolsModuleMock = createModuleMocks(ExternalToolsModule)
 	) => {
 		document.body.setAttribute("data-app", "true");
 
@@ -41,15 +47,6 @@ describe("RoomExternalToolsSection", () => {
 			ContextExternalToolsModule
 		);
 
-		const externalToolsModule = createModuleMocks(ExternalToolsModule, {
-			getBusinessError: {
-				statusCode: "",
-				message: "",
-				error: undefined,
-			},
-			...externalToolsModuleGetter,
-		});
-
 		const authModule = createModuleMocks(AuthModule, {
 			getUserPermissions: ["CONTEXT_TOOL_ADMIN"],
 			getUserRoles: ["teacher"],
@@ -77,7 +74,7 @@ describe("RoomExternalToolsSection", () => {
 					},
 					[CONTEXT_EXTERNAL_TOOLS_MODULE_KEY.valueOf()]:
 						contextExternalToolsModule,
-					[EXTERNAL_TOOLS_MODULE_KEY.valueOf()]: externalToolsModule,
+					[EXTERNAL_TOOLS_MODULE_KEY.valueOf()]: externalToolsModuleMock,
 					[AUTH_MODULE_KEY.valueOf()]: authModule,
 					[ENV_CONFIG_MODULE_KEY.valueOf()]: envConfigModule,
 				},
@@ -87,7 +84,6 @@ describe("RoomExternalToolsSection", () => {
 		return {
 			wrapper,
 			contextExternalToolsModule,
-			externalToolsModule,
 			authModule,
 		};
 	};
@@ -256,135 +252,132 @@ describe("RoomExternalToolsSection", () => {
 	});
 
 	describe("when clicking on a tool", () => {
-		const setup = () => {
-			const tool: ExternalToolDisplayData =
-				externalToolDisplayDataFactory.build();
-
-			const { wrapper, externalToolsModule } = getWrapper({
-				tools: [tool],
-				roomId: "roomId",
-			});
-
-			return {
-				wrapper,
-				externalToolsModule,
-				tool,
+		describe("when the tool has missing auto parameters and loading requestData throw an error", () => {
+			const setup = async () => {
+				const tool: ExternalToolDisplayData =
+					externalToolDisplayDataFactory.build({
+						status: ToolConfigurationStatus.Latest,
+					});
+
+				const error: BusinessError = businessErrorFactory.build({
+					error: new AxiosError("this error is expected"),
+					message: "MISSING_TOOL_PARAMETER_VALUE some value is missing",
+				});
+
+				const externalToolsModule = createModuleMocks(ExternalToolsModule);
+				externalToolsModule.loadToolLaunchData.mockRejectedValueOnce(error);
+
+				const { wrapper } = getWrapper(
+					{ tools: [tool], roomId: "roomId" },
+					externalToolsModule
+				);
+
+				await flushPromises();
+
+				return {
+					wrapper,
+					tool,
+				};
 			};
-		};
 
-		it("should fetch the launch data", async () => {
-			const { wrapper, externalToolsModule, tool } = setup();
+			it("should open up the error dialog", async () => {
+				const { wrapper } = await setup();
 
-			const card = wrapper.findComponent({
-				name: "room-external-tool-card",
-			});
+				const card = wrapper.findComponent({
+					name: "room-external-tool-card",
+				});
 
-			await card.trigger("click");
+				await card.trigger("click");
 
-			expect(externalToolsModule.loadToolLaunchData).toHaveBeenCalledWith(
-				tool.contextExternalToolId
-			);
+				const dialog = wrapper.find('[data-testId="error-dialog"]');
+				expect(dialog.exists()).toBeTruthy();
+				expect(wrapper.vm.isErrorDialogOpen).toBeTruthy();
+			});
 		});
-	});
-
-	describe("when clicking on a tool which has missing auto parameters", () => {
-		const setup = () => {
-			const tool: ExternalToolDisplayData =
-				externalToolDisplayDataFactory.build();
 
-			const error: BusinessError = businessErrorFactory.build({
-				error: new AxiosError("this error is expected"),
-				message: "MISSING_TOOL_PARAMETER_VALUE some value is missing",
-			});
+		describe("when the tool is launchable", () => {
+			const setup = async () => {
+				const tool: ExternalToolDisplayData =
+					externalToolDisplayDataFactory.build({
+						status: ToolConfigurationStatus.Latest,
+					});
+
+				const externalToolsModule = createModuleMocks(ExternalToolsModule);
+				externalToolsModule.loadToolLaunchData.mockResolvedValue(
+					toolLaunchRequestResponseFactory.build()
+				);
+
+				const { wrapper } = getWrapper(
+					{
+						tools: [tool],
+						roomId: "roomId",
+					},
+					externalToolsModule
+				);
 
-			const { wrapper } = getWrapper(
-				{ tools: [tool], roomId: "roomId" },
-				{
-					getBusinessError: error,
-				}
-			);
+				await flushPromises();
 
-			return {
-				wrapper,
-				tool,
+				return {
+					wrapper,
+				};
 			};
-		};
 
-		it("should display a dialog", async () => {
-			const { wrapper, tool } = setup();
+			it("should not open up the error dialog", async () => {
+				const { wrapper } = await setup();
 
-			const card = wrapper.findComponent({
-				name: "room-external-tool-card",
-			});
-			await card.vm.$emit("click", tool);
+				const card = wrapper.findComponent({
+					name: "room-external-tool-card",
+				});
 
-			const dialog = wrapper.find('[data-testId="error-dialog"]');
+				await card.trigger("click");
 
-			expect(dialog.exists()).toBeTruthy();
-			expect(wrapper.vm.isErrorDialogOpen).toBeTruthy();
-		});
-	});
-
-	describe("when click on a outdated tool", () => {
-		const setup = () => {
-			const tool: ExternalToolDisplayData =
-				externalToolDisplayDataFactory.build();
+				wrapper.find('[data-testId="error-dialog"]');
 
-			const error: BusinessError = businessErrorFactory.build({
-				error: new AxiosError("this error is expected"),
-				message: "TOOL_STATUS_OUTDATED this tool is outdated",
+				expect(wrapper.vm.isErrorDialogOpen).toBeFalsy();
 			});
+		});
 
-			const { wrapper } = getWrapper(
-				{ tools: [tool], roomId: "roomId" },
-				{
-					getBusinessError: error,
-				}
-			);
-
-			return {
-				wrapper,
-				tool,
-			};
-		};
-
-		it("should display a dialog", async () => {
-			const { wrapper, tool } = setup();
-
-			const card = wrapper.findComponent({
-				name: "room-external-tool-card",
-			});
-			await card.vm.$emit("click", tool);
+		describe("and tool is not launchable because it is outdated", () => {
+			const setup = async () => {
+				const tool: ExternalToolDisplayData =
+					externalToolDisplayDataFactory.build({
+						status: ToolConfigurationStatus.Outdated,
+					});
+
+				const externalToolsModule = createModuleMocks(ExternalToolsModule);
+				externalToolsModule.loadToolLaunchData.mockResolvedValueOnce(
+					toolLaunchRequestResponseFactory.build()
+				);
+
+				const { wrapper } = getWrapper(
+					{
+						tools: [tool],
+						roomId: "roomId",
+					},
+					externalToolsModule
+				);
 
-			const dialog = wrapper.find('[data-testId="error-dialog"]');
+				await flushPromises();
 
-			expect(dialog.exists()).toBeTruthy();
-			expect(wrapper.vm.isErrorDialogOpen).toBeTruthy();
-		});
-	});
+				return {
+					wrapper,
+				};
+			};
 
-	describe("when click on a latest tool", () => {
-		const setup = () => {
-			const tool: ExternalToolDisplayData =
-				externalToolDisplayDataFactory.build();
+			it("should open up the error dialog", async () => {
+				const { wrapper } = await setup();
 
-			const { wrapper } = getWrapper({ tools: [tool], roomId: "roomId" });
+				const card = wrapper.findComponent({
+					name: "room-external-tool-card",
+				});
 
-			return {
-				wrapper,
-				tool,
-			};
-		};
+				await card.trigger("click");
 
-		it("should not display a dialog", async () => {
-			const { wrapper, tool } = setup();
+				const dialog = wrapper.find('[data-testId="error-dialog"]');
 
-			const card = wrapper.findComponent({
-				name: "room-external-tool-card",
+				expect(dialog.exists()).toBeTruthy();
+				expect(wrapper.vm.isErrorDialogOpen).toBeTruthy();
 			});
-			await card.vm.$emit("click", tool);
-
-			expect(wrapper.vm.isErrorDialogOpen).toBeFalsy();
 		});
 	});
 });
diff --git a/src/pages/rooms/tools/RoomExternalToolsSection.vue b/src/pages/rooms/tools/RoomExternalToolsSection.vue
index a8cb87f66b..b643685cd0 100644
--- a/src/pages/rooms/tools/RoomExternalToolsSection.vue
+++ b/src/pages/rooms/tools/RoomExternalToolsSection.vue
@@ -10,6 +10,7 @@
 			@delete="onOpenDeleteDialog"
 			@edit="onEditTool"
 			@click="onClickTool"
+			@error="onError"
 			:data-testid="`external-tool-card-${index}`"
 		></room-external-tool-card>
 
@@ -85,19 +86,12 @@
 
 <script lang="ts">
 import { RenderHTML } from "@feature-render-html";
-import RoomExternalToolCard from "@/components/rooms/RoomExternalToolCard.vue";
-import {
-	ToolLaunchRequestResponse,
-	ToolLaunchRequestResponseMethodEnum,
-} from "@/serverApi/v3";
 import AuthModule from "@/store/auth";
 import ContextExternalToolsModule from "@/store/context-external-tools";
 import { ExternalToolDisplayData } from "@/store/external-tool/external-tool-display-data";
-import ExternalToolsModule from "@/store/external-tools";
 import {
 	AUTH_MODULE_KEY,
 	CONTEXT_EXTERNAL_TOOLS_MODULE_KEY,
-	EXTERNAL_TOOLS_MODULE_KEY,
 	I18N_KEY,
 	injectStrict,
 } from "@/utils/inject";
@@ -112,7 +106,13 @@ import {
 import VueI18n from "vue-i18n";
 import VCustomDialog from "@/components/organisms/vCustomDialog.vue";
 import { useRouter } from "vue-router/composables";
-import { ToolContextType } from "@/store/external-tool";
+import {
+	ToolConfigurationStatus,
+	ToolContextType,
+	ToolLaunchRequest,
+	ToolLaunchRequestMethodEnum,
+} from "@/store/external-tool";
+import RoomExternalToolCard from "@/components/rooms/RoomExternalToolCard.vue";
 
 export default defineComponent({
 	name: "RoomExternalToolsSection",
@@ -135,9 +135,6 @@ export default defineComponent({
 		const contextExternalToolsModule: ContextExternalToolsModule = injectStrict(
 			CONTEXT_EXTERNAL_TOOLS_MODULE_KEY
 		);
-		const externalToolsModule: ExternalToolsModule = injectStrict(
-			EXTERNAL_TOOLS_MODULE_KEY
-		);
 		const i18n: VueI18n = injectStrict(I18N_KEY);
 		const authModule: AuthModule = injectStrict(AUTH_MODULE_KEY);
 
@@ -183,8 +180,6 @@ export default defineComponent({
 
 		const onCloseErrorDialog = () => {
 			isErrorDialogOpen.value = false;
-
-			externalToolsModule.resetBusinessError();
 		};
 
 		const onEditTool = (tool: ExternalToolDisplayData) => {
@@ -198,26 +193,37 @@ export default defineComponent({
 			});
 		};
 
-		const onClickTool = async (tool: ExternalToolDisplayData) => {
-			const launchToolResponse: ToolLaunchRequestResponse | undefined =
-				await externalToolsModule.loadToolLaunchData(
-					tool.contextExternalToolId
-				);
-
-			switch (launchToolResponse?.method) {
-				case ToolLaunchRequestResponseMethodEnum.Get:
-					handleGetLaunchRequest(launchToolResponse);
-					break;
-				case ToolLaunchRequestResponseMethodEnum.Post:
-					handlePostLaunchRequest(launchToolResponse);
-					break;
-				default:
-					handleLaunchError(tool);
-					break;
+		const onClickTool = async (
+			toolLaunchRequest: ToolLaunchRequest,
+			displayData: ExternalToolDisplayData
+		) => {
+			if (isToolLaunchable(displayData)) {
+				switch (toolLaunchRequest?.method) {
+					case ToolLaunchRequestMethodEnum.Get:
+						handleGetLaunchRequest(toolLaunchRequest);
+						break;
+					case ToolLaunchRequestMethodEnum.Post:
+						handlePostLaunchRequest(toolLaunchRequest);
+						break;
+					default:
+						isToolLaunchable(displayData);
+						break;
+				}
 			}
 		};
 
-		const handleGetLaunchRequest = (toolLaunch: ToolLaunchRequestResponse) => {
+		const onError = (displayData: ExternalToolDisplayData): void => {
+			showErrorDialog(displayData);
+		};
+
+		const showErrorDialog = (
+			displayData: ExternalToolDisplayData | undefined
+		) => {
+			selectedItem.value = displayData;
+			isErrorDialogOpen.value = true;
+		};
+
+		const handleGetLaunchRequest = (toolLaunch: ToolLaunchRequest) => {
 			if (toolLaunch.openNewTab) {
 				window.open(toolLaunch.url, "_blank");
 				return;
@@ -225,7 +231,7 @@ export default defineComponent({
 			window.location.href = toolLaunch.url;
 		};
 
-		const handlePostLaunchRequest = (toolLaunch: ToolLaunchRequestResponse) => {
+		const handlePostLaunchRequest = (toolLaunch: ToolLaunchRequest) => {
 			const form: HTMLFormElement = document.createElement("form");
 			form.method = "POST";
 			form.action = toolLaunch.url;
@@ -248,17 +254,15 @@ export default defineComponent({
 			form.submit();
 		};
 
-		const handleLaunchError = (tool: ExternalToolDisplayData) => {
-			const businessErrorMessage = externalToolsModule.getBusinessError.message;
-
-			if (
-				["TOOL_STATUS_OUTDATED", "MISSING_TOOL_PARAMETER_VALUE"].some(
-					(keyword) => businessErrorMessage.includes(keyword)
-				)
-			) {
-				selectedItem.value = tool;
-				isErrorDialogOpen.value = true;
+		const isToolLaunchable = (
+			displayData: ExternalToolDisplayData
+		): boolean => {
+			if (displayData.status === ToolConfigurationStatus.Latest) {
+				return true;
 			}
+			showErrorDialog(displayData);
+
+			return false;
 		};
 
 		const errorDialogText: ComputedRef<string> = computed(() => {
@@ -283,6 +287,7 @@ export default defineComponent({
 			isErrorDialogOpen,
 			onCloseErrorDialog,
 			errorDialogText,
+			onError,
 		};
 	},
 });
diff --git a/src/store/external-tool/index.ts b/src/store/external-tool/index.ts
index 3928997f15..f7ad865da8 100644
--- a/src/store/external-tool/index.ts
+++ b/src/store/external-tool/index.ts
@@ -10,3 +10,5 @@ export * from "./tool-configuration-status.enum";
 export * from "./school-external-tool";
 export * from "./tool-parameter-location.enum";
 export * from "./context-external-tool-template-list-item";
+export * from "./tool-launch-request";
+export * from "./tool-launch-request-method.enum";
diff --git a/src/store/external-tool/mapper/common-tool.mapper.ts b/src/store/external-tool/mapper/common-tool.mapper.ts
index 4c8ca78aed..7d1d06034e 100644
--- a/src/store/external-tool/mapper/common-tool.mapper.ts
+++ b/src/store/external-tool/mapper/common-tool.mapper.ts
@@ -4,6 +4,7 @@ import {
 	CustomParameterResponseLocationEnum,
 	CustomParameterResponseScopeEnum,
 	CustomParameterResponseTypeEnum,
+	ToolLaunchRequestResponseMethodEnum,
 	ToolReferenceResponseStatusEnum,
 } from "@/serverApi/v3";
 import { ToolConfigurationStatus } from "../tool-configuration-status.enum";
@@ -11,6 +12,7 @@ import { ToolParameterEntry } from "../tool-parameter-entry";
 import { ToolParameterLocation } from "../tool-parameter-location.enum";
 import { ToolParameterScope } from "../tool-parameter-scope.enum";
 import { ToolParameterType } from "../tool-parameter.enum";
+import { ToolLaunchRequestMethodEnum } from "@/store/external-tool";
 
 export const ToolParamLocationMapping: Record<
 	CustomParameterResponseLocationEnum,
@@ -56,6 +58,14 @@ export const ToolConfigurationStatusMapping: Record<
 	[ToolReferenceResponseStatusEnum.Unknown]: ToolConfigurationStatus.Unknown,
 };
 
+export const ToolLaunchRequestMethodMapping: Record<
+	ToolLaunchRequestResponseMethodEnum,
+	ToolLaunchRequestMethodEnum
+> = {
+	[ToolLaunchRequestResponseMethodEnum.Get]: ToolLaunchRequestMethodEnum.Get,
+	[ToolLaunchRequestResponseMethodEnum.Post]: ToolLaunchRequestMethodEnum.Post,
+};
+
 export class CommonToolMapper {
 	static mapToCustomParameterEntryParam(
 		parameter: ToolParameterEntry
diff --git a/src/store/external-tool/mapper/external-tool.mapper.ts b/src/store/external-tool/mapper/external-tool.mapper.ts
index 0b36053f19..863e9179a6 100644
--- a/src/store/external-tool/mapper/external-tool.mapper.ts
+++ b/src/store/external-tool/mapper/external-tool.mapper.ts
@@ -1,15 +1,18 @@
 import {
 	CustomParameterResponse,
+	ToolLaunchRequestResponse,
 	ToolReferenceListResponse,
 } from "@/serverApi/v3";
 import { ExternalToolDisplayData } from "../external-tool-display-data";
 import { ToolParameter } from "../tool-parameter";
 import {
 	ToolConfigurationStatusMapping,
+	ToolLaunchRequestMethodMapping,
 	ToolParamLocationMapping,
 	ToolParamScopeMapping,
 	ToolParamTypeMapping,
 } from "./common-tool.mapper";
+import { ToolLaunchRequest } from "../tool-launch-request";
 
 export class ExternalToolMapper {
 	static mapToToolParameter(response: CustomParameterResponse): ToolParameter {
@@ -44,4 +47,17 @@ export class ExternalToolMapper {
 
 		return mapped;
 	}
+
+	static mapToToolLaunchRequest(
+		response: ToolLaunchRequestResponse
+	): ToolLaunchRequest {
+		const mapped: ToolLaunchRequest = {
+			method: ToolLaunchRequestMethodMapping[response.method],
+			url: response.url,
+			payload: response.payload,
+			openNewTab: response.openNewTab,
+		};
+
+		return mapped;
+	}
 }
diff --git a/src/store/external-tool/tool-launch-request-method.enum.ts b/src/store/external-tool/tool-launch-request-method.enum.ts
new file mode 100644
index 0000000000..82d6b7dce3
--- /dev/null
+++ b/src/store/external-tool/tool-launch-request-method.enum.ts
@@ -0,0 +1,4 @@
+export enum ToolLaunchRequestMethodEnum {
+	Get = "GET",
+	Post = "POST",
+}
diff --git a/src/store/external-tool/tool-launch-request.ts b/src/store/external-tool/tool-launch-request.ts
new file mode 100644
index 0000000000..8870b56aaf
--- /dev/null
+++ b/src/store/external-tool/tool-launch-request.ts
@@ -0,0 +1,8 @@
+import { ToolLaunchRequestMethodEnum } from "@/store/external-tool/tool-launch-request-method.enum";
+
+export type ToolLaunchRequest = {
+	method: ToolLaunchRequestMethodEnum;
+	url: string;
+	payload?: string;
+	openNewTab?: boolean;
+};
diff --git a/src/store/external-tools.ts b/src/store/external-tools.ts
index 14d5622c4a..3070424a4d 100644
--- a/src/store/external-tools.ts
+++ b/src/store/external-tools.ts
@@ -5,7 +5,6 @@ import {
 	ToolApiInterface,
 	ToolLaunchRequestResponse,
 } from "@/serverApi/v3";
-import { BusinessError } from "./types/commons";
 import { AxiosResponse } from "axios";
 
 @Module({
@@ -16,12 +15,6 @@ import { AxiosResponse } from "axios";
 export default class ExternalToolsModule extends VuexModule {
 	private loading = false;
 
-	private businessError: BusinessError = {
-		statusCode: "",
-		message: "",
-		error: undefined,
-	};
-
 	private get toolApi(): ToolApiInterface {
 		return ToolApiFactory(undefined, "v3", $axios);
 	}
@@ -30,29 +23,11 @@ export default class ExternalToolsModule extends VuexModule {
 		return this.loading;
 	}
 
-	get getBusinessError() {
-		return this.businessError;
-	}
-
 	@Mutation
 	setLoading(loading: boolean): void {
 		this.loading = loading;
 	}
 
-	@Mutation
-	setBusinessError(businessError: BusinessError): void {
-		this.businessError = businessError;
-	}
-
-	@Mutation
-	resetBusinessError(): void {
-		this.businessError = {
-			statusCode: "",
-			message: "",
-			error: undefined,
-		};
-	}
-
 	@Action
 	async loadToolLaunchData(
 		contextExternalToolId: string
@@ -70,16 +45,10 @@ export default class ExternalToolsModule extends VuexModule {
 			return resp.data;
 		} catch (error: unknown) {
 			const apiError = mapAxiosErrorToResponseError(error);
-
 			console.log(apiError);
+			this.setLoading(false);
 
-			this.setBusinessError({
-				error: apiError,
-				statusCode: apiError.code,
-				message: `${apiError.type}: ${apiError.message}`,
-			});
+			throw apiError;
 		}
-
-		this.setLoading(false);
 	}
 }
diff --git a/src/store/external-tools.unit.ts b/src/store/external-tools.unit.ts
index bdd375522f..fadb7745e9 100644
--- a/src/store/external-tools.unit.ts
+++ b/src/store/external-tools.unit.ts
@@ -1,15 +1,10 @@
 import { ToolApiInterface, ToolLaunchRequestResponse } from "@/serverApi/v3";
 import * as serverApi from "@/serverApi/v3/api";
-import {
-	axiosErrorFactory,
-	businessErrorFactory,
-	toolLaunchRequestResponeFactory,
-} from "@@/tests/test-utils/factory";
+import { toolLaunchRequestResponseFactory } from "@@/tests/test-utils/factory";
 import { createMock, DeepMocked } from "@golevelup/ts-jest";
 import { mockApiResponse } from "@@/tests/test-utils";
-import { mapAxiosErrorToResponseError } from "@/utils/api";
 import ExternalToolsModule from "./external-tools";
-import { BusinessError } from "./types/commons";
+import { AxiosError } from "axios";
 
 describe("ExternalToolsModule", () => {
 	let module: ExternalToolsModule;
@@ -29,20 +24,11 @@ describe("ExternalToolsModule", () => {
 	});
 
 	describe("mutations", () => {
-		describe("resetBusinessError", () => {
-			it("should reset the error", () => {
-				const error = businessErrorFactory.build();
+		describe("setLoading", () => {
+			it("should set the loading state", () => {
+				module.setLoading(true);
 
-				module.setBusinessError(error);
-
-				module.resetBusinessError();
-
-				expect(module.getBusinessError).not.toEqual(error);
-				expect(module.getBusinessError).toEqual({
-					statusCode: "",
-					message: "",
-					error: undefined,
-				});
+				expect(module.getLoading).toBeTruthy();
 			});
 		});
 	});
@@ -52,7 +38,7 @@ describe("ExternalToolsModule", () => {
 			describe("when receiving an api response", () => {
 				const setup = () => {
 					const mockResponse: ToolLaunchRequestResponse =
-						toolLaunchRequestResponeFactory.build();
+						toolLaunchRequestResponseFactory.build();
 
 					apiMock.toolLaunchControllerGetToolLaunchRequest.mockResolvedValue(
 						mockApiResponse({
@@ -85,30 +71,22 @@ describe("ExternalToolsModule", () => {
 				});
 			});
 
-			describe("when an error occurs", () => {
+			describe("when receiving an api error", () => {
 				const setup = () => {
-					const error = axiosErrorFactory.build();
-					const apiError = mapAxiosErrorToResponseError(error);
-
 					apiMock.toolLaunchControllerGetToolLaunchRequest.mockRejectedValue(
-						error
+						new AxiosError("error")
 					);
-
-					return {
-						apiError,
-					};
 				};
 
-				it("should set the businessError", async () => {
-					const { apiError } = setup();
-
-					await module.loadToolLaunchData("contextToolId");
+				it("should throw an error", async () => {
+					setup();
 
-					expect(module.getBusinessError).toEqual<BusinessError>({
-						error: apiError,
-						statusCode: apiError.code,
-						message: `${apiError.type}: ${apiError.message}`,
-					});
+					try {
+						await module.loadToolLaunchData("contextToolId");
+					} catch (error) {
+						expect(error).toBeDefined();
+						expect(module.getLoading).toBeFalsy();
+					}
 				});
 			});
 		});
diff --git a/src/utils/fileHelper.ts b/src/utils/fileHelper.ts
index 8299b44794..b142f7e09e 100644
--- a/src/utils/fileHelper.ts
+++ b/src/utils/fileHelper.ts
@@ -54,11 +54,12 @@ export function getFileExtension(fileName: string): string {
 
 export function convertDownloadToPreviewUrl(
 	downloadUrl: string,
-	width: PreviewWidth = PreviewWidth._500
+	width?: PreviewWidth
 ): string {
 	const previewUrl =
 		downloadUrl.replace("download", "preview") +
-		`?outputFormat=${PreviewOutputMimeTypes.IMAGE_WEBP}&width=${width}`;
+		`?outputFormat=${PreviewOutputMimeTypes.IMAGE_WEBP}` +
+		(width ? `&width=${width}` : "");
 
 	return previewUrl;
 }
diff --git a/src/utils/fileHelper.unit.ts b/src/utils/fileHelper.unit.ts
index f8ad71d103..0f5a2df4c5 100644
--- a/src/utils/fileHelper.unit.ts
+++ b/src/utils/fileHelper.unit.ts
@@ -1,4 +1,8 @@
-import { FileRecordScanStatus, PreviewStatus } from "@/fileStorageApi/v3";
+import {
+	FileRecordScanStatus,
+	PreviewStatus,
+	PreviewWidth,
+} from "@/fileStorageApi/v3";
 import {
 	convertDownloadToPreviewUrl,
 	convertFileSize,
@@ -152,45 +156,79 @@ describe("@/utils/fileHelper", () => {
 	});
 
 	describe("convertDownloadToPreviewUrl", () => {
-		it("should return the preview url", () => {
-			const url = "/file/download/233/text.txt";
+		describe("when second argument width is undefined", () => {
+			it("should return the preview url", () => {
+				const url = "/file/download/233/text.txt";
 
-			const result = convertDownloadToPreviewUrl(url);
+				const result = convertDownloadToPreviewUrl(url);
 
-			expect(result).toEqual(
-				`/file/preview/233/text.txt?outputFormat=image/webp&width=500`
-			);
-		});
+				expect(result).toEqual(
+					`/file/preview/233/text.txt?outputFormat=image/webp`
+				);
+			});
 
-		it("should return the preview url with two download words in source", () => {
-			const url = "/file/download/233/download";
+			it("should return the preview url with two download words in source", () => {
+				const url = "/file/download/233/download";
 
-			const result = convertDownloadToPreviewUrl(url);
+				const result = convertDownloadToPreviewUrl(url);
 
-			expect(result).toEqual(
-				`/file/preview/233/download?outputFormat=image/webp&width=500`
-			);
-		});
+				expect(result).toEqual(
+					`/file/preview/233/download?outputFormat=image/webp`
+				);
+			});
 
-		it("should return the preview url with two download words in source with extension", () => {
-			const url = "/file/download/233/download.txt";
+			it("should return the preview url with two download words in source with extension", () => {
+				const url = "/file/download/233/download.txt";
 
-			const result = convertDownloadToPreviewUrl(url);
+				const result = convertDownloadToPreviewUrl(url);
 
-			expect(result).toEqual(
-				`/file/preview/233/download.txt?outputFormat=image/webp&width=500`
-			);
+				expect(result).toEqual(
+					`/file/preview/233/download.txt?outputFormat=image/webp`
+				);
+			});
 		});
 
-		it("should return the preview url", () => {
-			const url = "/file/download/233/text.txt";
+		describe("when second argument width is set", () => {
+			it("should return the preview url", () => {
+				const url = "/file/download/233/text.txt";
+
+				const result = convertDownloadToPreviewUrl(url, PreviewWidth._500);
+
+				expect(result).toEqual(
+					`/file/preview/233/text.txt?outputFormat=image/webp&width=500`
+				);
+			});
+
+			it("should return the preview url with two download words in source", () => {
+				const url = "/file/download/233/download";
+
+				const result = convertDownloadToPreviewUrl(url, PreviewWidth._500);
 
-			// @ts-expect-error Enum only provides on value currently but will provide more in the future
-			const result = convertDownloadToPreviewUrl(url, 1000);
+				expect(result).toEqual(
+					`/file/preview/233/download?outputFormat=image/webp&width=500`
+				);
+			});
 
-			expect(result).toEqual(
-				`/file/preview/233/text.txt?outputFormat=image/webp&width=1000`
-			);
+			it("should return the preview url with two download words in source with extension", () => {
+				const url = "/file/download/233/download.txt";
+
+				const result = convertDownloadToPreviewUrl(url, PreviewWidth._500);
+
+				expect(result).toEqual(
+					`/file/preview/233/download.txt?outputFormat=image/webp&width=500`
+				);
+			});
+
+			it("should return the preview url", () => {
+				const url = "/file/download/233/text.txt";
+
+				// @ts-expect-error Enum only provides on value currently but will provide more in the future
+				const result = convertDownloadToPreviewUrl(url, 1000);
+
+				expect(result).toEqual(
+					`/file/preview/233/text.txt?outputFormat=image/webp&width=1000`
+				);
+			});
 		});
 	});
 
diff --git a/tests/test-utils/factory/index.ts b/tests/test-utils/factory/index.ts
index 11c85ddc7e..94f3919fbe 100644
--- a/tests/test-utils/factory/index.ts
+++ b/tests/test-utils/factory/index.ts
@@ -31,7 +31,7 @@ export * from "./submissionsResponseFactory";
 export * from "./taskResponseFactory";
 export * from "./timestampsResponseFactory";
 export * from "./toolConfigurationTemplateFactory";
-export * from "./toolLaunchRequestResponeFactory";
+export * from "./toolLaunchRequestResponseFactory";
 export * from "./toolParameterFactory";
 export * from "./toolParameterEntryFactory";
 export * from "./userDataResponseFactory";
diff --git a/tests/test-utils/factory/toolLaunchRequestFactory.ts b/tests/test-utils/factory/toolLaunchRequestFactory.ts
new file mode 100644
index 0000000000..fc177f6e3d
--- /dev/null
+++ b/tests/test-utils/factory/toolLaunchRequestFactory.ts
@@ -0,0 +1,13 @@
+import { Factory } from "fishery";
+import {
+	ToolLaunchRequest,
+	ToolLaunchRequestMethodEnum,
+} from "@/store/external-tool";
+
+export const toolLaunchRequestFactory = Factory.define<ToolLaunchRequest>(
+	({ sequence }) => ({
+		method: ToolLaunchRequestMethodEnum.Get,
+		payload: '{ "key": "value" }',
+		url: "https://example.com/tool-launch",
+	})
+);
diff --git a/tests/test-utils/factory/toolLaunchRequestResponeFactory.ts b/tests/test-utils/factory/toolLaunchRequestResponseFactory.ts
similarity index 86%
rename from tests/test-utils/factory/toolLaunchRequestResponeFactory.ts
rename to tests/test-utils/factory/toolLaunchRequestResponseFactory.ts
index 346f6226a6..ecf832e333 100644
--- a/tests/test-utils/factory/toolLaunchRequestResponeFactory.ts
+++ b/tests/test-utils/factory/toolLaunchRequestResponseFactory.ts
@@ -4,7 +4,7 @@ import {
 	ToolLaunchRequestResponseMethodEnum,
 } from "@/serverApi/v3";
 
-export const toolLaunchRequestResponeFactory =
+export const toolLaunchRequestResponseFactory =
 	Factory.define<ToolLaunchRequestResponse>(() => ({
 		method: ToolLaunchRequestResponseMethodEnum.Get,
 		payload: '{ "key": "value" }',
diff --git a/tsconfig.json b/tsconfig.json
index 3170e1e201..ae80da5cbe 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -43,6 +43,7 @@
 			"@feature-render-html": ["src/components/feature-render-html"],
 			"@ui-board": ["src/components/ui-board"],
 			"@ui-confirmation-dialog": ["src/components/ui-confirmation-dialog"],
+			"@ui-light-box": ["src/components/ui-light-box"],
 			"@util-board": ["src/components/util-board"],
 			"@page-board": ["src/components/page-board"],
 			"@/*": ["src/*"],
diff --git a/vue.config.js b/vue.config.js
index d5dff7a5ab..6e606a5ded 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -49,6 +49,7 @@ module.exports = defineConfig({
 				"@ui-confirmation-dialog": getDir(
 					"src/components/ui-confirmation-dialog"
 				),
+				"@ui-light-box": getDir("src/components/ui-light-box"),
 				"@util-board": getDir("src/components/util-board"),
 				"@page-board": getDir("src/components/page-board"),
 			},