diff --git a/public/js/apps/Dashboard/Fhc.js b/public/js/apps/Dashboard/Fhc.js
index 830bd2ec3..720bcd0b3 100644
--- a/public/js/apps/Dashboard/Fhc.js
+++ b/public/js/apps/Dashboard/Fhc.js
@@ -293,16 +293,16 @@ const app = Vue.createApp({
 			.then(data => {
 				for (let rendertype of Object.keys(data)) {
 					
-					let modalTitel = Vue.defineAsyncComponent(() => import(data[rendertype].modalTitel));
-					let modalContent = Vue.defineAsyncComponent(() => import(data[rendertype].modalContent));
-					let calendarEvent = Vue.defineAsyncComponent(() => import(data[rendertype].calendarEvent));
+					let modalTitle = Vue.markRaw(Vue.defineAsyncComponent(() => import(data[rendertype].modalTitle)));
+					let modalContent = Vue.markRaw(Vue.defineAsyncComponent(() => import(data[rendertype].modalContent)));
+					let calendarEvent = Vue.markRaw(Vue.defineAsyncComponent(() => import(data[rendertype].calendarEvent)));
 					if(this.renderers === null) {
 						this.renderers = {};
 					}
 					if (!this.renderers[rendertype]) {
 						this.renderers[rendertype] = {}
 					}
-					this.renderers[rendertype].modalTitel = modalTitel;
+					this.renderers[rendertype].modalTitle = modalTitle;
 					this.renderers[rendertype].modalContent = modalContent;
 					this.renderers[rendertype].calendarEvent = calendarEvent;
 				}
diff --git a/public/js/components/Cis/Stundenplan/Stundenplan.js b/public/js/components/Cis/Stundenplan/Stundenplan.js
index 4ca8bdc13..700d8b463 100644
--- a/public/js/components/Cis/Stundenplan/Stundenplan.js
+++ b/public/js/components/Cis/Stundenplan/Stundenplan.js
@@ -26,7 +26,9 @@ const Stundenplan = {
 			studiensemester_start: null,
 			studiensemester_ende: null,
 			uid: null,
-			renderComponents: {}
+			renderComponents: {},
+			isModalContentResolved: false,
+			isModalTitleResolved: false,
 		}
 	},
 	props: {
@@ -109,9 +111,25 @@ const Stundenplan = {
 		},
 	},
 	methods:{
+		modalTitleResolved: function () {
+			this.isModalTitleResolved = true;
+			if(this.isModalContentResolved && this.isModalTitleResolved)
+				Vue.nextTick(() => {
+					if(this.$refs.lvmodal) 
+						this.$refs.lvmodal.show();
+				});
+		},
+		modalContentResolved: function () {
+			this.isModalContentResolved = true;
+			if (this.isModalContentResolved && this.isModalTitleResolved)
+				Vue.nextTick(() => {
+					if (this.$refs.lvmodal)
+						this.$refs.lvmodal.show();
+				});
+		},
 		// component renderers fetches from different addons
 		modalTitleComponent(type){
-			return this.renderers[type].modalTitel;
+			return this.renderers[type].modalTitle;
 		},
 		modalContentComponent(type) {
 			return this.renderers[type].modalContent;
@@ -186,9 +204,8 @@ const Stundenplan = {
 		},
 		showModal: function(event){
 			this.currentlySelectedEvent = event;
-			Vue.nextTick(() => {
-				this.$refs.lvmodal.show();
-			});
+			this.isModalTitleResolved = false;
+			this.isModalContentResolved = false;
 		},
 		updateRange: function ({start,end, mounted}) {
 			let checkDate = (date) => {
@@ -275,14 +292,14 @@ const Stundenplan = {
 	<hr>
 	<lv-modal v-if="currentlySelectedEvent" :event="currentlySelectedEvent" ref="lvmodal" >
 		<template #modalTitle>
-			<Suspense>
-				<component :is="modalTitleComponent(currentlySelectedEvent.type)" v-if="currentlySelectedEvent" :event="currentlySelectedEvent" ></component>
-			</Suspense>
-			</template>
+		<Suspense @resolve="modalTitleResolved">
+			<component :is="modalTitleComponent(currentlySelectedEvent.type)" v-if="currentlySelectedEvent" :event="currentlySelectedEvent" ></component>
+		</Suspense>
+		</template>
 		<template #modalContent>
-			<Suspense>
-				<component :is="modalContentComponent(currentlySelectedEvent.type)" v-if="currentlySelectedEvent" :event="currentlySelectedEvent" ></component>
-			</Suspense>
+		<Suspense @resolve="modalContentResolved">
+			<component :is="modalContentComponent(currentlySelectedEvent.type)" v-if="currentlySelectedEvent" :event="currentlySelectedEvent" ></component>
+		</Suspense>
 		</template>
 	</lv-modal>