diff --git a/frontend/src/components/RoomOccupation.vue b/frontend/src/components/RoomOccupation.vue
index 06e801f..5cc1386 100644
--- a/frontend/src/components/RoomOccupation.vue
+++ b/frontend/src/components/RoomOccupation.vue
@@ -3,7 +3,7 @@ import FullCalendar from "@fullcalendar/vue3";
 import dayGridPlugin from "@fullcalendar/daygrid";
 import interactionPlugin from "@fullcalendar/interaction";
 import timeGridPlugin from "@fullcalendar/timegrid";
-import { computed, ComputedRef, ref, Ref, watch } from "vue";
+import { computed, ComputedRef, inject, ref, Ref, watch } from "vue";
 import { CalendarOptions, EventInput } from "@fullcalendar/core";
 import { fetchEventsByRoomAndDuration } from "../api/fetchRoom.ts";
 import { useI18n } from "vue-i18n";
@@ -27,6 +27,8 @@ const currentDateFrom: Ref<string> = ref("");
 const currentDateTo: Ref<string> = ref("");
 const occupations: Ref<CalenderEvent[]> = ref([]);
 
+const mobilePage = inject("mobilePage") as Ref<boolean>;
+
 const selectedRoom = computed(() => props.room);
 
 watch(selectedRoom, () => {
@@ -64,12 +66,13 @@ async function getOccupation() {
 
 import allLocales from "@fullcalendar/core/locales-all";
 
-const calendarOptions: ComputedRef<CalendarOptions> = computed(() => {
-  return {
+const calendarOptions: ComputedRef<CalendarOptions> = computed(() => 
+  ({
     locales: allLocales,
     locale: t("languageCode"),
     plugins: [dayGridPlugin, interactionPlugin, timeGridPlugin],
-    initialView: "week",
+    // local debugging of mobilePage variable in object creation on ternary expression
+    initialView: mobilePage.value ? "Day" : "week",
     dayHeaderFormat: { weekday: "short", omitCommas: true },
     slotDuration: "00:15:00",
     eventTimeFormat: {
@@ -77,6 +80,8 @@ const calendarOptions: ComputedRef<CalendarOptions> = computed(() => {
       minute: "2-digit",
       hour12: false,
     },
+    contentHeight: "auto",
+    height: 500,
     views: {
       week: {
         description: "Wochenansicht",
@@ -139,15 +144,23 @@ const calendarOptions: ComputedRef<CalendarOptions> = computed(() => {
             start: event.start,
             end: event.end,
             color: event.showFree ? "var(--green-800)" : "var(--primary-color)",
-            textColor: event.showFree ? "var(--green-50)" : "var(--primary-text-color)",
+            textColor: event.showFree ? "var(--green-50)" : "var(--primary-color-text)",
             title: event.showFree ? t("roomFinderPage.available") : t("roomFinderPage.occupied"),
           } as EventInput;
         }),
       );
     },
-  };
-});
+  })
+);
 </script>
 <template>
   <FullCalendar ref="fullCalendar" :options="calendarOptions" />
 </template>
+
+<style scoped>
+:deep(.fc-toolbar.fc-header-toolbar) {
+  flex-wrap: wrap;
+  justify-content: space-between;
+  gap: 0.5rem;
+}
+</style>
diff --git a/frontend/src/view/RoomFinder.vue b/frontend/src/view/RoomFinder.vue
index e12fdb9..d6b4b45 100644
--- a/frontend/src/view/RoomFinder.vue
+++ b/frontend/src/view/RoomFinder.vue
@@ -54,7 +54,7 @@ rooms().then(
     <div 
       :class="
         [selectedRoom.name === ''? 
-          ['opacity-0', 'pointer-events-none'] : 
+          ['opacity-0', 'pointer-events-none', 'h-1rem', 'overflow-hidden'] : 
           ['opacity-100', 'transition-all', 'transition-duration-500', 'transition-ease-in-out']
         ,
         'w-full', 'lg:w-8']"