diff --git a/application/core/Events.php b/application/core/Events.php
index 037ce90da..a7d4754cc 100644
--- a/application/core/Events.php
+++ b/application/core/Events.php
@@ -8,7 +8,8 @@ Events::on('loadRenderers', function ($renderers) {
 	$fhc_core_renderers["lehreinheit"] = array(
 		'calendarEvent' => APP_ROOT.'public/js/components/Cis/LvPlan/EventTypes/calendarEvent.js',
 		'modalTitle' => APP_ROOT.'public/js/components/Cis/Mylv/modalTitle.js',
-		'modalContent' => APP_ROOT.'public/js/components/Cis/Mylv/modalContent.js'
+		'modalContent' => APP_ROOT.'public/js/components/Cis/Mylv/modalContent.js',
+		'calendarEventStyles' => APP_ROOT.'public/css/Cis4/CoreCalendarEvents.css'
 	);
 });
 
diff --git a/public/css/Cis4/CoreCalendarEvents.css b/public/css/Cis4/CoreCalendarEvents.css
new file mode 100644
index 000000000..5efe8b608
--- /dev/null
+++ b/public/css/Cis4/CoreCalendarEvents.css
@@ -0,0 +1,75 @@
+/* Moodle Events in Month Page */
+.monthPageContainer .lehreinheitEventContent{
+	display: grid;
+	grid-template-columns: auto 1fr;
+	grid-template-rows: 1fr;
+	border-bottom: 1px solid var(--bs-border-color);
+	
+}
+
+.monthPageContainer .lehreinheitEventContent #lehreinheitEventHeader {
+	display:grid;
+	padding: .25rem .5rem .25rem .25rem;
+	margin-right: .25rem;
+	align-content: center;
+}
+
+
+.monthPageContainer .lehreinheitEventContent #lehreinheitEventText {
+	display: flex;
+	flex-wrap: wrap;
+	column-gap: 5px;
+	font-size: .875em;
+	align-items:center;
+	justify-content: space-evenly;
+	
+}
+
+/* Moodle Events in Week Page */
+.weekPageContainer .lehreinheitEventContent {
+	display: grid;
+	grid-template-columns: auto 1fr;
+	grid-template-rows: 1fr;
+
+}
+
+.weekPageContainer .lehreinheitEventContent #lehreinheitEventHeader {
+	display: grid;
+	padding: .25rem .5rem .25rem .25rem;
+	margin-right: .25rem;
+	align-content: center;
+}
+
+
+.weekPageContainer .lehreinheitEventContent #lehreinheitEventText {
+	display: flex;
+	flex-wrap: wrap;
+	column-gap: 5px;
+	align-items: center;
+	justify-content: space-evenly;
+
+}
+
+/* Moodle Events in Day Page */
+.dayPageContainer .lehreinheitEventContent {
+	display: flex;
+	padding-left:4rem;
+	justify-content: space-evenly;
+	align-items: center;
+
+}
+
+.dayPageContainer .lehreinheitEventContent #lehreinheitEventHeader {
+	display:grid;
+	align-content: center;
+	border-right: 1px solid var(--bs-border-color);
+}
+
+.dayPageContainer .lehreinheitEventContent #lehreinheitEventText {
+	display: contents;
+}
+
+.dayPageContainer .lehreinheitEventContent #lehreinheitEventText *{
+	font-weight: 500;
+}
+
diff --git a/public/css/components/calendar.css b/public/css/components/calendar.css
index 7eb6487dc..4d082fa5a 100644
--- a/public/css/components/calendar.css
+++ b/public/css/components/calendar.css
@@ -413,77 +413,7 @@
 	opacity: 0.5;
 }
 
-
-.dayPageContainer, .weekPageContainer{
+.dayPageContainer,
+.weekPageContainer {
 	container-type: inline-size;
 }
-
-.dayPageContainer .lehreinheitEventContent,
-.weekPageContainer .lehreinheitEventContent {
-	display: flex;
-	flex-direction: column;
-}
-
-.dayPageContainer .moodleEventContent,
-.weekPageContainer .moodleEventContent{
-	display: flex;
-	flex-direction: row;
-}
-
-.dayPageContainer .lehreinheitEventContent{
-	flex-grow:1;
-	align-items: center;
-	font-size: 0.875rem;
-	font-weight: 400;
-	line-height:1.25;
-}
-
-.dayPageContainer .lehreinheitEventHeader {
-	display: flex;
-	flex-direction: column;
-	padding: 1rem;
-	border-right: 1px solid gray;
-}
-
-.dayPageContainer .moodleEventContent {
-	align-items: center;
-	font-size: 0.875rem;
-	font-weight: 400;
-	line-height: 1.25;
-	width:100%;
-}
-
-.weekPageContainer .moodleEventContent {
-	align-items: center;
-	font-size: 0.875rem;
-	font-weight: 400;
-	line-height: 1.25;
-	width: 100%;
-}
-
-.weekPageContainer .lehreinheitEventHeader {
-	display: flex;
-	flex-direction: column;
-	padding: 1rem;
-	border-right: 1px solid gray;
-}
-
-.weekPageContainer .lehreinheitEventContent {
-	flex-grow: 1;
-	align-items: center;
-	font-size: 0.875rem;
-	font-weight: 400;
-	line-height: 1.25;
-}
-
-
-@container( min-width: 500px){
-	.dayPageContainer .lehreinheitEventContent,
-	.weekPageContainer .lehreinheitEventContent {
-		flex-direction: row;
-	}
-
-	.dayPageContainer .lehreinheitEventContent{
-		justify-content: space-evenly;
-	}
-}
diff --git a/public/js/apps/Dashboard/Fhc.js b/public/js/apps/Dashboard/Fhc.js
index a40d28193..637e08cce 100644
--- a/public/js/apps/Dashboard/Fhc.js
+++ b/public/js/apps/Dashboard/Fhc.js
@@ -293,10 +293,26 @@ const app = Vue.createApp({
 			.then(res => res.data)
 			.then(data => {
 				for (let rendertype of Object.keys(data)) {
-					
-					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)));
+					let modalTitle = null;
+					let modalContent = null;
+					let calendarEvent = null;
+					if (data[rendertype].modalTitle)
+						modalTitle = Vue.markRaw(Vue.defineAsyncComponent(() => import(data[rendertype].modalTitle)));
+					if (data[rendertype].modalContent) 	
+						modalContent = Vue.markRaw(Vue.defineAsyncComponent(() => import(data[rendertype].modalContent)));
+					if (data[rendertype].calendarEvent) 	
+						calendarEvent = Vue.markRaw(Vue.defineAsyncComponent(() => import(data[rendertype].calendarEvent)));
+
+					if (data[rendertype].calendarEventStyles){
+						console.log(data[rendertype].calendarEventStyles)
+						var head = document.head;
+						var link = document.createElement("link");
+						link.type = "text/css";
+						link.rel = "stylesheet";
+						link.href = data[rendertype].calendarEventStyles;
+						head.appendChild(link);
+					}
+
 					if(this.renderers === null) {
 						this.renderers = {};
 					}
diff --git a/public/js/components/Cis/LvPlan/EventTypes/calendarEvent.js b/public/js/components/Cis/LvPlan/EventTypes/calendarEvent.js
index 088fb42f9..6fa957d91 100644
--- a/public/js/components/Cis/LvPlan/EventTypes/calendarEvent.js
+++ b/public/js/components/Cis/LvPlan/EventTypes/calendarEvent.js
@@ -16,15 +16,16 @@ export default {
 		},
 	},
 	template: `
-	<div class="lehreinheitEventHeader" v-if="!event.allDayEvent && event?.beginn && event?.ende" >
-		<span class="small">{{convertTime(event.beginn.split(":"))}}</span>
-		<span class="small">{{convertTime(event.ende.split(":"))}}</span>
+	<div class="lehreinheitEventContent h-100 w-100 p-1" >
+		<div id="lehreinheitEventHeader" class="h-100 " v-if="!event.allDayEvent && event?.beginn && event?.ende" >
+			<span class="small">{{convertTime(event.beginn.split(":"))}}</span>
+			<span class="small">{{convertTime(event.ende.split(":"))}}</span>
+		</div>
+		<div id="lehreinheitEventText">
+			<span>{{event.topic}}</span>
+			<span v-for="lektor in event.lektor">{{lektor.kurzbz}}</span>
+			<span>{{event.ort_kurzbz}}</span>
+		</div>
 	</div>
-	<div class="lehreinheitEventContent">
-		<span>{{event.topic}}</span>
-		<span v-for="lektor in event.lektor">{{lektor.kurzbz}}</span>
-		<span>{{event.ort_kurzbz}}</span>
-	</div>
-	
 	`,
 }
diff --git a/public/js/components/Cis/LvPlan/LvPlan.js b/public/js/components/Cis/LvPlan/LvPlan.js
index c4dca0e5f..49fa88a60 100644
--- a/public/js/components/Cis/LvPlan/LvPlan.js
+++ b/public/js/components/Cis/LvPlan/LvPlan.js
@@ -336,13 +336,13 @@ const LvPlan = {
 			</div>
 		</template>
 		<template #monthPage="{event,day}">
-			<div @click="showModal(event)" class="p-1">
+			<div @click="showModal(event)" class="monthPageContainer " >
 				<component :is="calendarEventComponent(event.type)" :event="event" ></component>
 			</div>
 		</template>
 		<template #weekPage="{event,day}">
 			<div @click="showModal(event)" type = "button"
-				class="weekPageContainer position-relative border border-secondary border d-flex flex-col align-items-center justify-content-evenly h-100"
+				class="weekPageContainer position-relative border border-secondary border  h-100"
 				:class="{'p-1':event.allDayEvent}"
 				style = "overflow: auto;" >
 				<component :is="calendarEventComponent(event.type)" :event="event" ></component>
@@ -350,9 +350,7 @@ const LvPlan = {
 		</template>
 		<template #dayPage="{event,day,mobile}">
 			<div @click="mobile? showModal(event):null" type="button" class="dayPageContainer fhc-entry border border-secondary border m-0 h-100  text-center">
-				<div class="h-100 d-flex flex-col justify-content-evenly align-items-center">
-					<component :is="calendarEventComponent(event.type)" :event="event"></component>
-				</div>
+				<component :is="calendarEventComponent(event.type)" :event="event"></component>
 			</div>
 		</template>
 		<template #pageMobilContent="{lvMenu, event}">