diff --git a/application/controllers/api/frontend/v1/Stundenplan.php b/application/controllers/api/frontend/v1/Stundenplan.php
index 4f7e7a053..2bff6016f 100644
--- a/application/controllers/api/frontend/v1/Stundenplan.php
+++ b/application/controllers/api/frontend/v1/Stundenplan.php
@@ -98,7 +98,8 @@ class Stundenplan extends FHCAPI_Controller
 
      
 		$result = $this->StundenplanModel->getRoomDataOnDay($ort_kurzbz,$start_date,$end_date);
-        
+        // logging the result of the query
+        //$this->loglib->logErrorDB(print_r($result,true),"this is the result of the query");
             
 
 		if(isError($result)){
diff --git a/application/models/ressource/Reservierung_model.php b/application/models/ressource/Reservierung_model.php
index 23d17f974..e149cf0d7 100755
--- a/application/models/ressource/Reservierung_model.php
+++ b/application/models/ressource/Reservierung_model.php
@@ -22,7 +22,13 @@ class Reservierung_model extends DB_Model
 	{
 
 		$raum_reservierungen= $this->execReadOnlyQuery("
-		SELECT res.*, mit.kurzbz as person_kurzbz , CONCAT(studg.typ,studg.kurzbz,'-') as stg
+		SELECT res.*, mit.kurzbz as person_kurzbz , 
+		CASE
+			WHEN res.verband IS NOT NULL OR res.semester IS NOT NULL THEN
+				CONCAT(UPPER(studg.typ),UPPER(studg.kurzbz),'-',res.verband,res.semester) 
+			ELSE
+				CONCAT(UPPER(studg.typ),UPPER(studg.kurzbz)) 
+		END AS stg
 		FROM lehre.vw_reservierung res
 		JOIN public.tbl_mitarbeiter mit ON mit.mitarbeiter_uid=res.uid
 		JOIN public.tbl_studiengang studg ON studg.studiengang_kz=res.studiengang_kz
diff --git a/application/models/ressource/Stundenplan_model.php b/application/models/ressource/Stundenplan_model.php
index 299faa049..5ce6a9823 100755
--- a/application/models/ressource/Stundenplan_model.php
+++ b/application/models/ressource/Stundenplan_model.php
@@ -18,23 +18,25 @@ class Stundenplan_model extends DB_Model
 	 * 
 	 * @return stdClass
 	 */
-	public function getRoomDataOnDay($ort_kurzbz='EDV_A2.06',$start_date,$end_date){
+	public function getRoomDataOnDay($ort_kurzbz,$start_date,$end_date){
 
 
-		//TODO alternative query version that unions the reservierungen into the stundenplan with different 'eintrags_type' column
-		/*"
+	
+		/*$raum_stundenplan= $this->execReadOnlyQuery("
 		-- merging all reservierungs information with the stundenplan information but with different types
-		SELECT 'stundenplan_eintrag' as eintrags_type, ort_kurzbz, studiengang_kz, uid, stunde, datum, titel, semester, verband, gruppe, gruppe_kurzbz, stg_kurzbz, CONCAT(UPPER(sp.stg_typ),UPPER(sp.stg_kurzbz),'-',COALESCE(CAST(sp.semester AS varchar),'/'),COALESCE(CAST(sp.verband AS varchar),'/')) AS stg, CONCAT(lehrfach,'-',lehrform) AS lv_info, * FROM lehre.vw_stundenplan sp
+		SELECT 'stundenplan_eintrag' as eintrags_type, CONCAT(UPPER(sp.stg_typ),UPPER(sp.stg_kurzbz),'-',COALESCE(CAST(sp.semester AS varchar),'/'),COALESCE(CAST(sp.verband AS varchar),'/')) AS stg, CONCAT(lehrfach,'-',lehrform) AS lv_info, ort_kurzbz, studiengang_kz, uid, stunde, datum, titel, semester, verband, gruppe, gruppe_kurzbz, stg_kurzbz, * FROM lehre.vw_stundenplan sp
 		WHERE ort_kurzbz = ? AND datum >= ? AND datum <= ? 
 		UNION ALL
-		SELECT 'reservierungs_eintrag' as eintrags_type, ort_kurzbz, studiengang_kz, uid, stunde, datum, titel, semester, verband, gruppe, gruppe_kurzbz, stg_kurzbz, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL FROM lehre.vw_reservierung res
+		SELECT 'reservierungs_eintrag' as eintrags_type, NULL, NULL, ort_kurzbz, studiengang_kz, uid, stunde, datum, titel, semester, verband, gruppe, gruppe_kurzbz, stg_kurzbz, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL FROM lehre.vw_reservierung res
 		WHERE ort_kurzbz = ? AND datum >= ? AND datum <= ?
-		"*/
+		", [$ort_kurzbz, $start_date, $end_date,$ort_kurzbz, $start_date, $end_date]);
+		*/
+
 
 		$raum_stundenplan= $this->execReadOnlyQuery("
 		SELECT CONCAT(UPPER(sp.stg_typ),UPPER(sp.stg_kurzbz),'-',COALESCE(CAST(sp.semester AS varchar),'/'),COALESCE(CAST(sp.verband AS varchar),'/')) AS stg, CONCAT(lehrfach,'-',lehrform) AS lv_info, * FROM lehre.vw_stundenplan sp
 		WHERE ort_kurzbz = ? AND datum >= ? AND datum <= ? 
-		", [$ort_kurzbz, $start_date, $end_date]);
+		", [$ort_kurzbz, $start_date, $end_date]); 
 
 		return $raum_stundenplan;
 	}
diff --git a/public/js/apps/Cis/RoomInformation.js b/public/js/apps/Cis/RoomInformation.js
index d485227b2..e64348dd8 100644
--- a/public/js/apps/Cis/RoomInformation.js
+++ b/public/js/apps/Cis/RoomInformation.js
@@ -1,7 +1,7 @@
 import FhcCalendar from "../../components/Calendar/Calendar.js";
 import CalendarDate from "../../composables/CalendarDate.js";
 import FhcApi from "../../plugin/FhcApi.js";
-
+import Phrasen from "../../plugin/Phrasen.js";
 const app = Vue.createApp({
 	components: {
 		FhcCalendar
@@ -10,7 +10,9 @@ const app = Vue.createApp({
 		return {
 			stunden: [],
 			events: null,
-            calendarWeek: new CalendarDate(new Date("2024-06-06")),
+            calendarWeek: new CalendarDate(new Date("2024-05-07")),
+            reservierungenLoaded:false,
+            stundenplanLoaded:false,
         }
 	},
     computed:{
@@ -59,14 +61,16 @@ const app = Vue.createApp({
                     });
                     
                     this.events = res.data;
+                    this.stundenplanLoaded = true;
+                    console.log(this.events,"this are the events")
                 }
             });
 
-            this.$fhcApi.factory.stundenplan.getReservierungen('SEM_E0.04', this.weekFirstDay, this.weekLastDay).then(res => {
+           /*  this.$fhcApi.factory.stundenplan.getReservierungen('EDV_F4.26', this.weekFirstDay, this.weekLastDay).then(res => {
                 if (res.data && res.data.forEach) {
                     res.data.forEach((el, i) => {
                         el.reservierung = true;
-                        el.color = '#CCCCCC';
+                        el.color = '#' + (el.farbe || 'ffffff');
                         el.start = new Date(el.datum + ' ' + this.stunden[el.stunde].beginn);
                         el.end = new Date(el.datum + ' ' + this.stunden[el.stunde].ende);
                         el.title = el.titel;
@@ -77,29 +81,40 @@ const app = Vue.createApp({
                 }
 
                 let reservierungs_events = res.data;
+
+                // adding the last reservierung twice for testing purposes
+                let last_reservierung=Object.assign({}, reservierungs_events[reservierungs_events.length-1]);
+                last_reservierung.person_kurzbz="drSimml";
+                reservierungs_events.push(last_reservierung);
+
                 console.log(reservierungs_events, " this are the reserverungs event")
                 this.events = [...(this.events?this.events:[]),...reservierungs_events];
-                
-            });
+                this.reservierungenLoaded=true;
+                console.log(reservierungs_events,"this are the reservierungs events")
+            }); */
         });
 
 	},
     template: /*html*/`
     <div>
-        <fhc-calendar v-slot="{event}" :initialDate="currentDate" :events="events" initial-mode="week" show-weeks>
-            <div class="d-flex flex-column align-items-center justify-content-evenly h-100">
-                
-
-                <span>{{event.orig.reservierung? event.orig.title :event.orig.lv_info}}</span>	
-                <span v-if="event.orig.reservierung">{{event.orig.stg}}</span>
-                <span v-else v-for="(item, index) in event.orig.stg.split('/')" :key="index">{{item}}</span>
-                <span>{{event.orig.reservierung? event.orig.person_kurzbz : event.orig.lektor}}</span>
-             
-			</div>
+        <fhc-calendar v-if="stundenplanLoaded || reservierungenLoaded" v-slot="{event,day}" :initialDate="currentDate" :events="events" initial-mode="week" show-weeks>
+           
+           <template v-if="event.orig.eintrags_type != 'reservierungs_eintrag'">
+            <a class="text-decoration-none text-dark" href="#" :title="event.orig.title + ' - ' + event.orig.lehrfach_bez + ' [' + event.orig.ort_kurzbz+']'"   >    
+                <div class="d-flex flex-column align-items-center justify-content-evenly h-100" :style="{'background-color':event.orig.color}">
+                    <span>{{event.orig.reservierung? event.orig.title :event.orig.lv_info}}</span>	
+                    <span v-if="event.orig.reservierung">{{event.orig.stg}}</span>
+                    <span v-else v-for="(item, index) in event.orig.stg.split('/')" :key="index">{{item}}</span>
+                    <span>{{event.orig.reservierung? event.orig.person_kurzbz : event.orig.lektor}}</span>
+                </div>
+            </a>
+            </template>
+            <p v-else>this is a reservierung</p>
         </fhc-calendar>
     </div>
     `,
 });
 app.config.unwrapInjectedRef = true;
 app.use(FhcApi);
+app.use(Phrasen);
 app.mount('#content');
\ No newline at end of file
diff --git a/public/js/components/Calendar/Calendar.js b/public/js/components/Calendar/Calendar.js
index 4ce70911e..cef013ff5 100755
--- a/public/js/components/Calendar/Calendar.js
+++ b/public/js/components/Calendar/Calendar.js
@@ -148,9 +148,9 @@ export default {
 	template: `
 	<div ref="container" class="fhc-calendar card" :class="sizeClass">
 		<calendar-modal v-if="currentlySelectedEvent" :event="currentlySelectedEvent" ref="calendarModal"  />
-		<component v-slot="{event}" :is="'calendar-' + mode" @update:mode="mode=$event" @change:range="$emit('change:range',$event)" @input="handleInput" >
+		<component v-slot="{event,day}" :is="'calendar-' + mode" @update:mode="mode=$event" @change:range="$emit('change:range',$event)" @input="handleInput" >
 			<!--Week Page layout-->
-			<slot :event="event">
+			<slot :event="event" :day="day">
 				<div class="d-flex flex-column align-items-center justify-content-evenly h-100">
 					<span>{{event.orig.title}}</span>	
 					<span>{{event.orig.ort_kurzbz}}</span>
diff --git a/public/js/components/Calendar/Week.js b/public/js/components/Calendar/Week.js
index b4ec09e52..a6389fe52 100755
--- a/public/js/components/Calendar/Week.js
+++ b/public/js/components/Calendar/Week.js
@@ -42,8 +42,8 @@ export default {
 	<div class="fhc-calendar-week">
 		<calendar-header :title="title" @prev="prev" @next="next" @click="$emit('update:mode', 'weeks')" />
 		<calendar-pane ref="pane" v-slot="slot" @slid="paneChanged">
-			<calendar-week-page v-slot="{event}" :year="focusDate.y" :week="focusDate.w+slot.offset" @update:mode="$emit('update:mode', $event)" @page:back="prev" @page:forward="next" @input="selectEvent" >
-				<slot :event="event" ></slot>
+			<calendar-week-page v-slot="{event,day}" :year="focusDate.y" :week="focusDate.w+slot.offset" @update:mode="$emit('update:mode', $event)" @page:back="prev" @page:forward="next" @input="selectEvent" >
+				<slot :event="event" :day="day" ></slot>
 			</calendar-week-page>
 		</calendar-pane>
 	</div>`
diff --git a/public/js/components/Calendar/Week/Page.js b/public/js/components/Calendar/Week/Page.js
index c6636ad43..db28e7028 100755
--- a/public/js/components/Calendar/Week/Page.js
+++ b/public/js/components/Calendar/Week/Page.js
@@ -111,9 +111,10 @@ export default {
 						<div v-for="hour in hours" style="min-height:100px" :key="hour" class="text-muted text-end small" :ref="'hour' + hour">{{hour}}:00</div>
 					</div>
 					<div v-for="day in eventsPerDayAndHour" :key="day" class="day border-start" :style="{'grid-template-columns': 'repeat(' + day.lanes + ', 1fr)', 'grid-template-rows': 'repeat(' + (1440 / smallestTimeFrame) + ', 1fr)'}">
-						<a  href="#" :title="event.orig.title + ' - ' + event.orig.lehrfach_bez + ' [' + event.orig.ort_kurzbz+']'" v-for="event in day.events" :key="event" class="mx-2 border border-dark border-2 small rounded overflow-hidden text-decoration-none text-dark" :style="{'background-color': event.orig.farbe?'#'.concat(event.orig.farbe):'white','grid-column-start': 1+(event.lane-1)*day.lanes/event.maxLane, 'grid-column-end': 1+event.lane*day.lanes/event.maxLane, 'grid-row-start': dateToMinutesOfDay(event.start), 'grid-row-end': dateToMinutesOfDay(event.end) ,'--test': dateToMinutesOfDay(event.end)}" @click.prevent="$emit('input', event.orig)">
-							<slot :event="event" />
-						</a>
+						<div class="mx-2 border border-dark border-2 small rounded overflow-hidden "  @click.prevent="$emit('input', event.orig)" :style="{'grid-column-start': 1+(event.lane-1)*day.lanes/event.maxLane, 'grid-column-end': 1+event.lane*day.lanes/event.maxLane, 'grid-row-start': dateToMinutesOfDay(event.start), 'grid-row-end': dateToMinutesOfDay(event.end) ,'--test': dateToMinutesOfDay(event.end)}" v-for="event in day.events" :key="event">	
+							<slot :event="event" :day="day"></slot>
+						</div>
+						
 					</div>
 				</div>
 			</div>