diff --git a/src/components/Modal.vue b/src/components/Modal.vue
index 395ce58..fac5fcf 100644
--- a/src/components/Modal.vue
+++ b/src/components/Modal.vue
@@ -6,7 +6,12 @@
     @contextmenu.prevent
   >
     <!-- @click="closeModal" -->
-    <component :is="component_ref" :data="data" @click.stop class="p-4 bg-white rounded-lg" />
+    <component
+      :is="component_ref"
+      :data="data"
+      @click.stop
+      class="p-4 bg-white rounded-lg max-h-[95%] overflow-y-auto"
+    />
   </div>
 </template>
 
diff --git a/src/components/admin/club/calendar/CreateCalendarModal.vue b/src/components/admin/club/calendar/CreateCalendarModal.vue
index a1a77f6..a032a3f 100644
--- a/src/components/admin/club/calendar/CreateCalendarModal.vue
+++ b/src/components/admin/club/calendar/CreateCalendarModal.vue
@@ -76,7 +76,7 @@
         />
         <label for="allDay">ganztägig</label>
       </div>
-      <div v-if="!allDay" class="flex flex-row gap-2">
+      <div v-if="!allDay" class="flex flex-col sm:flex-row gap-2">
         <div class="w-full">
           <label for="starttime">Startzeit</label>
           <input
@@ -105,7 +105,7 @@
           />
         </div>
       </div>
-      <div v-else class="flex flex-row gap-2">
+      <div v-else class="flex flex-col sm:flex-row gap-2">
         <div class="w-full">
           <label for="startdate">Startdatum</label>
           <input
diff --git a/src/components/admin/club/calendar/UpdateCalendarModal.vue b/src/components/admin/club/calendar/UpdateCalendarModal.vue
index 19b46ee..d098241 100644
--- a/src/components/admin/club/calendar/UpdateCalendarModal.vue
+++ b/src/components/admin/club/calendar/UpdateCalendarModal.vue
@@ -78,7 +78,7 @@
         <input type="checkbox" id="allDay" v-model="calendar.allDay" />
         <label for="allDay">ganztägig</label>
       </div>
-      <div v-if="!calendar.allDay" class="flex flex-row gap-2">
+      <div v-if="!calendar.allDay" class="flex flex-col sm:flex-row gap-2">
         <div class="w-full">
           <label for="starttime">Startzeit</label>
           <input
@@ -113,7 +113,7 @@
           />
         </div>
       </div>
-      <div v-else class="flex flex-row gap-2">
+      <div v-else class="flex flex-col sm:flex-row gap-2">
         <div class="w-full">
           <label for="startdate">Startdatum</label>
           <input
diff --git a/src/components/public/calendar/ShowCalendarEntryModal.vue b/src/components/public/calendar/ShowCalendarEntryModal.vue
index 267db82..0b77d30 100644
--- a/src/components/public/calendar/ShowCalendarEntryModal.vue
+++ b/src/components/public/calendar/ShowCalendarEntryModal.vue
@@ -18,7 +18,7 @@
         <textarea id="content" class="h-18" readonly :value="data.content"></textarea>
       </div>
       <div v-if="data.allDay" class="flex flex-row gap-2 items-center">Der Termin findet ganztägig statt.</div>
-      <div v-if="data.allDay == false" class="flex flex-row gap-2">
+      <div v-if="data.allDay == false" class="flex flex-col sm:flex-row gap-2">
         <div class="w-full">
           <label for="starttime">Startzeit</label>
           <input type="datetime-local" id="starttime" readonly :value="formatForDateTimeLocalInput(data.starttime)" />
@@ -34,7 +34,7 @@
           />
         </div>
       </div>
-      <div v-else class="flex flex-row gap-2">
+      <div v-else class="flex flex-col sm:flex-row gap-2">
         <div class="w-full">
           <label for="startdate">Startdatum</label>
           <input type="date" id="startdate" readonly :value="formatForDateInput(data.starttime)" />
diff --git a/src/main.css b/src/main.css
index d5c8f00..f23dcde 100644
--- a/src/main.css
+++ b/src/main.css
@@ -87,7 +87,8 @@ select {
 input[readonly],
 textarea[readonly],
 select[readonly] {
-  @apply pointer-events-none;
+  @apply select-none;
+  /* pointer-events-none; */
 }
 
 input[disabled],
@@ -124,7 +125,7 @@ summary::-webkit-details-marker {
 }
 
 .fc-button-primary {
-  @apply !bg-primary !border-primary !outline-none !ring-0 hover:!bg-red-700 hover:!border-red-700;
+  @apply !bg-primary !border-primary !outline-none !ring-0 hover:!bg-red-700 hover:!border-red-700 h-10 text-center;
 }
 .fc-button-active {
   @apply !bg-red-500 !border-red-500;
@@ -132,3 +133,19 @@ summary::-webkit-details-marker {
 .fc-toolbar {
   @apply flex-wrap;
 }
+
+/* For screens between 850px and 768px */
+@media (max-width: 850px) and (min-width: 768px) {
+  .fc-header-toolbar.fc-toolbar.fc-toolbar-ltr > .fc-toolbar-chunk:nth-child(2) {
+    @apply !order-1;
+  }
+  /* Your styles for this range */
+}
+
+/* For screens between 525px and 0px */
+@media (max-width: 525px) and (min-width: 0px) {
+  /* Your styles for this range */
+  .fc-header-toolbar.fc-toolbar.fc-toolbar-ltr > .fc-toolbar-chunk:nth-child(2) {
+    @apply !order-1;
+  }
+}