diff --git a/src/components/ModalDialog.vue b/src/components/ModalDialog.vue
index 7323452..b31aee8 100644
--- a/src/components/ModalDialog.vue
+++ b/src/components/ModalDialog.vue
@@ -1,6 +1,6 @@
 <template>
   <TransitionRoot as="template" :show="show">
-    <Dialog as="div" class="relative z-20">
+    <Dialog as="div" class="relative z-20" @close="$emit('close')">
       <TransitionChild
         as="template"
         enter="ease-out duration-300"
@@ -45,4 +45,6 @@ defineProps({
   noScroll: Boolean,
   innerClass: String,
 });
+
+defineEmits(['close']);
 </script>
diff --git a/src/components/ScheduleDialog.vue b/src/components/ScheduleDialog.vue
index 1cc2788..3cc7bdf 100644
--- a/src/components/ScheduleDialog.vue
+++ b/src/components/ScheduleDialog.vue
@@ -1,5 +1,5 @@
 <template>
-  <ModalDialog inner-class="md:-rotate-1" no-scroll>
+  <ModalDialog inner-class="md:-rotate-1" no-scroll @close="$emit('close')">
     <div class="h-full w-full max-w-2xl isolate rounded-2xl overflow-hidden" :class="type.bg">
       <div class="relative h-full overflow-hidden">
         <div class="absolute inset-x-0 bg-zinc-800/40 backdrop-blur-md z-30 pt-10 pb-4">
diff --git a/src/components/StageDialog.vue b/src/components/StageDialog.vue
index 0b76c2b..d1565d8 100644
--- a/src/components/StageDialog.vue
+++ b/src/components/StageDialog.vue
@@ -1,5 +1,5 @@
 <template>
-  <ModalDialog inner-class="-rotate-1 relative">
+  <ModalDialog inner-class="-rotate-1 relative" @close="$emit('close')">
     <div class="bg-zinc-100 p-2">
       <button class="text-zinc-300 bg-zinc-600/50 rounded-full p-1 absolute top-3 right-3" @click="$emit('close')">
         <span class="sr-only">Close</span>