diff --git a/frontend/src/components/Modals/CalendarModal.vue b/frontend/src/components/Modals/CalendarModal.vue
new file mode 100644
index 00000000..3933251d
--- /dev/null
+++ b/frontend/src/components/Modals/CalendarModal.vue
@@ -0,0 +1,35 @@
+<template>
+  <Dialog v-model="show" :options="{ size: '2xl' }">
+    <template #body> Hello </template>
+  </Dialog>
+</template>
+
+<script setup>
+import { ref, nextTick, watch, computed } from 'vue'
+
+const show = defineModel()
+const event = defineModel('event')
+
+const loading = ref(false)
+const error = ref(null)
+const title = ref(null)
+const editMode = ref(false)
+
+let _event = ref({})
+
+watch(
+  () => show.value,
+  (value) => {
+    if (!value) return
+    editMode.value = false
+    nextTick(() => {
+      title.value.el.focus()
+      _event.value = { ...event.value }
+
+      if (_event.value.name) {
+        editMode.value = true
+      }
+    })
+  },
+)
+</script>
diff --git a/frontend/src/pages/Calendar.vue b/frontend/src/pages/Calendar.vue
index d2db5df3..e0ddcbdf 100644
--- a/frontend/src/pages/Calendar.vue
+++ b/frontend/src/pages/Calendar.vue
@@ -25,6 +25,9 @@
       @create="(event) => createEvent(event)"
       @update="(event) => updateEvent(event)"
       @delete="(eventID) => deleteEvent(eventID)"
+      :onClick="showDetails"
+      :onDblClick="editDetails"
+      :onCellDblClick="showNewModal"
     >
       <template
         #header="{
@@ -76,9 +79,11 @@
         </p>
       </template>
     </Calendar>
+    <CalendarModal v-model="showModal" v-model:event="event" />
   </div>
 </template>
 <script setup>
+import CalendarModal from '@/components/Modals/CalendarModal.vue'
 import ViewBreadcrumbs from '@/components/ViewBreadcrumbs.vue'
 import LayoutHeader from '@/components/LayoutHeader.vue'
 import { sessionStore } from '@/stores/session'
@@ -138,6 +143,9 @@ function createEvent(event) {
     event_type: event.eventType,
     color: event.color,
   })
+
+  showModal.value = false
+  event.value = {}
 }
 
 function updateEvent(event) {
@@ -153,6 +161,9 @@ function updateEvent(event) {
     event_type: event.eventType,
     color: event.color,
   })
+
+  showModal.value = false
+  event.value = {}
 }
 
 function deleteEvent(eventID) {
@@ -176,4 +187,27 @@ function deleteEvent(eventID) {
     ],
   })
 }
+
+const showModal = ref(false)
+const event = ref({})
+
+function showDetails(e) {}
+
+function editDetails(e) {
+  showModal.value = true
+  event.value = { ...e.calendarEvent }
+}
+
+function showNewModal(e) {
+  showModal.value = true
+  event.value = {
+    title: '',
+    description: '',
+    date: dayjs(e.date).format('YYYY-MM-DD'),
+    from_time: fromTime,
+    to_time: toTime,
+    isFullDay: false,
+    eventType: 'Public',
+  }
+}
 </script>