diff --git a/components/calendar/dialog/QuickCreateEvent.vue b/components/calendar/dialog/QuickCreateEvent.vue
index 5ad48a6..72d2afd 100644
--- a/components/calendar/dialog/QuickCreateEvent.vue
+++ b/components/calendar/dialog/QuickCreateEvent.vue
@@ -41,12 +41,12 @@ const breakpoints = useBreakpoints(
 
   <UiDialog v-model:open="isDialogOpen">
     <UiDialogContent
-      class="border-indigo-200 dark:bg-slate-950 dark:border-indigo-950"
+      class="max-md:translate-0 max-md:inset-0 max-md:w-full max-md:block"
       :trap-focus="true"
-      @escape-key-down.prevent="handleClosing"
+      @escape-key-down="handleClosing"
       @pointer-down-outside.prevent="handleClosing"
     >
-      <UiDialogTitle>
+      <UiDialogTitle class="max-md:mb-8">
         {{ $t("entity.calendar.event.addSingle") }}
       </UiDialogTitle>
       <CalendarFormCreateEvent @event-created="toggleDialog" />
diff --git a/components/calendar/dialog/UpdateEvent.vue b/components/calendar/dialog/UpdateEvent.vue
index 70d643e..81be899 100644
--- a/components/calendar/dialog/UpdateEvent.vue
+++ b/components/calendar/dialog/UpdateEvent.vue
@@ -25,13 +25,13 @@ function handleClosing() {
     <UiDialogContent
       :disable-outside-pointer-events="true"
       :trap-focus="true"
-      class="pl-3 min-w-96 border-border"
+      class="pl-3 md:min-w-96 max-md:translate-0 max-md:inset-0 max-md:w-full max-md:block"
       @escape-key-down="handleClosing"
       @focus-outside="handleClosing"
       @interact-outside="handleClosing"
       @pointer-down-outside="(e) => e.preventDefault()"
     >
-      <header class="pl-8 grid gap-y-2">
+      <header class="pl-8 grid gap-y-2 max-md:mb-8">
         <UiDialogTitle>
           {{ $t('entity.calendar.event.editDialog.title') }}
         </UiDialogTitle>
diff --git a/components/calendar/state/monthly/Layout.vue b/components/calendar/state/monthly/Layout.vue
index 1d5019f..2ccb827 100644
--- a/components/calendar/state/monthly/Layout.vue
+++ b/components/calendar/state/monthly/Layout.vue
@@ -76,12 +76,12 @@ function handleClosing() {
 
       <UiDialog v-model:open="isDialogOpen">
         <UiDialogContent
-          class="border-indigo-200 dark:bg-slate-950 dark:border-indigo-950"
+          class="max-md:translate-0 max-md:inset-0 max-md:w-full max-md:block"
           :trap-focus="true"
-          @escape-key-down.prevent="handleClosing"
+          @escape-key-down="handleClosing"
           @pointer-down-outside.prevent="null"
         >
-          <UiDialogTitle>
+          <UiDialogTitle class="max-md:mb-8">
             {{ $t("entity.calendar.event.addSingle") }}
           </UiDialogTitle>
           <CalendarFormCreateEvent @event-created="toggleDialog" />