diff --git a/client/src/clients/api/meeting.ts b/client/src/clients/api/meeting.ts
index 7a61205ba..f7f6f9c71 100644
--- a/client/src/clients/api/meeting.ts
+++ b/client/src/clients/api/meeting.ts
@@ -14,7 +14,7 @@ export class MeetingApi extends ApiClientBase {
 
   list(query?: any) {
     return this.unwrap(
-      () => this.$http.get<Api.Returns.List<Api.Meetings>>(this.getUrl('', query)),
+      () => this.$http.get<Api.Returns.List<Api.Meeting>>(this.getUrl('', query)),
       {
         transform: (d) => d.results
       }
diff --git a/client/src/components/CalenderComponent.vue b/client/src/components/CalenderComponent.vue
new file mode 100644
index 000000000..5df9eaa64
--- /dev/null
+++ b/client/src/components/CalenderComponent.vue
@@ -0,0 +1,435 @@
+<template>
+  <v-row class="justify-center py-4">
+    <v-col cols="2">
+      <v-checkbox v-model="filters.vacation" color="#fcd091" label="Vacations" />
+    </v-col>
+    <v-col cols="2">
+      <v-checkbox v-model="filters.meeting" color="#efeaea" label="Meetings" />
+    </v-col>
+    <v-col cols="2">
+      <v-checkbox v-model="filters.event" color="#47a2ff" label="Events" />
+    </v-col>
+    <v-col cols="2">
+      <v-checkbox v-model="filters.holiday" color="#5effb4" label="Holidays" />
+    </v-col>
+    <v-col cols="2">
+      <v-checkbox v-model="filters.birthday" color="#e0adf0" label="Birthdays" />
+    </v-col>
+  </v-row>
+  <v-divider class="d-flex mx-auto" style="width: 90%"></v-divider>
+
+  <div class="ma-7 px-7">
+    <div class="loading-container d-flex align-center justify-center my-5" v-if="isLoading">
+      <v-alert density="compact" class="pa-5" type="info" text="Events are loading..."></v-alert>
+    </div>
+
+    <FullCalendar
+      class="fc"
+      :options="{
+        ...options,
+        events: filteredEvents as any
+      }"
+    >
+    </FullCalendar>
+  </div>
+
+  <!-- Dialogs -->
+  <!-- Create new event dialog -->
+  <v-dialog
+    v-if="selectedEventType.isNewEvent"
+    :routeQuery="dates?.startStr"
+    :modelValue="selectedEventType.isNewEvent"
+    @click:outside="closeDialog(CalendarEventSelection.NewEvent)"
+  >
+    <v-card>
+      <calender-request :dates="dates" @close-dialog="closeDialog(CalendarEventSelection.NewEvent)"
+        @create-vacation="createVacation($event)" @create-meeting="createMeeting($event)"
+        @create-event="createEvent($event)" />
+    </v-card>
+  </v-dialog>
+
+  <!-- View meeting dialog -->
+  <v-dialog v-if="selectedEventType.isViewRequest && selectedEventType.isMeeting && selectedEvent"
+    :routeQuery="selectedEvent.id" :modelValue="selectedEventType.isMeeting">
+    <v-card>
+      <meeting-card :meeting="selectedEvent" @close-dialog="closeDialog(CalendarEventSelection.Meeting)" />
+    </v-card>
+  </v-dialog>
+
+  <!-- View holiday dialog -->
+  <v-dialog v-if="selectedEventType.isViewRequest && selectedEventType.isHoliday && selectedEvent"
+    :routeQuery="selectedEvent.id" :modelValue="selectedEventType.isHoliday">
+    <v-card>
+      <holiday-card :holiday="selectedEvent" @close-dialog="closeDialog(CalendarEventSelection.PublicHoliday)" />
+    </v-card>
+  </v-dialog>
+
+  <!-- View holiday dialog -->
+  <v-dialog v-if="selectedEventType.isViewRequest && selectedEventType.isBirthday && selectedEvent"
+    :routeQuery="selectedEvent.id" :modelValue="selectedEventType.isBirthday">
+    <v-card>
+      <birthday-card :birthday="selectedEvent" @close-dialog="closeDialog(CalendarEventSelection.Birthday)" />
+    </v-card>
+  </v-dialog>
+
+  <!-- View event dialog -->
+  <v-dialog v-if="selectedEventType.isViewRequest && selectedEventType.isEvent && selectedEvent"
+    :routeQuery="selectedEvent.id" :modelValue="selectedEventType.isEvent">
+    <v-card>
+      <event-card :event="selectedEvent" @close-dialog="closeDialog(CalendarEventSelection.Event)" />
+    </v-card>
+  </v-dialog>
+
+  <!-- View vacation dialog -->
+  <v-dialog
+    v-if="selectedEventType.isViewRequest && selectedEventType.isVacation && selectedEvent"
+    :routeQuery="selectedEvent"
+    :modelValue="selectedEventType.isVacation"
+  >
+    <v-card>
+      <vacation-card
+      :vacation="(selectedEvent as Api.Vacation)"
+        @close-dialog="closeDialog(CalendarEventSelection.Vacation)"
+        @status-vacation="updateVacationStatus($event)"
+        @update-vacation="updateVacation($event)"
+        @delete-vacation="deleteVacation()" />
+    </v-card>
+  </v-dialog>
+</template>
+
+<script lang="ts" setup>
+import { reactive, ref, watch } from 'vue'
+import { type CalendarApi, type CalendarOptions } from '@fullcalendar/core'
+import { useApi } from '@/hooks'
+import { useAsyncState } from '@vueuse/core'
+import calenderRequest from '@/components/calenderRequest.vue'
+import meetingCard from '@/components/cards/meetingCard.vue'
+import holidayCard from '@/components/cards/holidayCard.vue'
+import birthdayCard from '@/components/cards/birthdayCard.vue'
+import vacationCard from '@/components/cards/vacationCard.vue'
+import eventCard from '@/components/cards/eventCard.vue'
+import FullCalendar from '@fullcalendar/vue3'
+import dayGridPlugin from '@fullcalendar/daygrid'
+import timeGridPlugin from '@fullcalendar/timegrid'
+import listPlugin from '@fullcalendar/list'
+import interactionPlugin from '@fullcalendar/interaction'
+import { CalendarEventSelection, type Api } from '@/types'
+import { normalizeEvent, normalizeVacation } from '@/utils/helpers'
+import { normalizedBirthday, normalizeHoliday, normalizeMeeting } from '@/utils'
+import { ApiClientBase } from '@/clients/api/base'
+
+const homeEvents = ref<Api.Home[]>([])
+const filteredEvents = ref<Api.Home[]>([])
+
+const currentDate = ref<Date>(new Date())
+const calendar = ref<CalendarApi>()
+const isLoading = ref<boolean>(false)
+const $api = useApi()
+const dates = ref<any>()
+
+const filters = reactive({
+  meeting: true,
+  event: true,
+  vacation: true,
+  holiday: true,
+  birthday: true
+})
+
+const selectedEventType = reactive({
+  isMeeting: false,
+  isEvent: false,
+  isVacation: false,
+  isHoliday: false,
+  isBirthday: false,
+  isNewEvent: false,
+  isViewRequest: false
+})
+
+const meetings = ref<Api.Meeting[]>([])
+const events = ref<Api.Event[]>([])
+const vacations = ref<Api.Vacation[]>([])
+const holidays = ref<Api.Holiday[]>([])
+const birthdays = ref<Api.User[]>([])
+const cached_users = new Map<number, Api.User>()
+
+const selectedEvent = ref<Api.Meeting | Api.Event | Api.Vacation | Api.Holiday | Api.User>()
+
+const me = ApiClientBase.user.value?.fullUser
+if (me) {
+  cached_users.set(me.id, me)
+}
+
+const loadEvents = async () => {
+  isLoading.value = true
+  await useAsyncState(
+    () =>
+      $api.home.list({
+        month: currentDate.value.getMonth() + 1,
+        year: currentDate.value.getFullYear()
+      }),
+    [],
+    {
+      onSuccess(data) {
+        for (const event of data) {
+          updateEventCalendarType(event)
+        }
+        filteredEvents.value = [...homeEvents.value]
+      }
+    }
+  )
+  isLoading.value = false
+}
+
+const updateEventCalendarType = (event: any) => {
+  if (event.type === 'vacation') {
+    const vacationEvent = normalizeVacation(event) as any
+    homeEvents.value.push(vacationEvent)
+    vacations.value.push(event)
+  } else if (event.type === 'holiday') {
+    const publicHoliday = normalizeHoliday(event) as any
+    homeEvents.value.push(publicHoliday)
+    holidays.value.push(event)
+  } else if (event.type === 'meeting') {
+    const meeting = normalizeMeeting(event) as any
+    homeEvents.value.push(meeting)
+    meetings.value.push(event)
+  } else if (event.type === 'birthday') {
+    const birthday = normalizedBirthday(event) as any
+    homeEvents.value.push(birthday)
+    birthdays.value.push(event)
+  } else if (event.type === 'event') {
+    const _event = normalizeEvent(event) as any
+    homeEvents.value.push(_event)
+    events.value.push(event)
+  }
+
+  filteredEvents.value = [...homeEvents.value]
+}
+
+const filterEvents = () => {
+  filteredEvents.value = homeEvents.value.filter((event) => {
+    return (
+      (event.type === 'meeting' && filters.meeting) ||
+      (event.type === 'event' && filters.event) ||
+      (event.type === 'vacation' && filters.vacation) ||
+      (event.type === 'holiday' && filters.holiday) ||
+      (event.type === 'birthday' && filters.birthday)
+    )
+  })
+}
+
+function onSelect(arg: any) {
+  calendar.value = arg.view.calendar
+  dates.value = arg
+  openDialog(CalendarEventSelection.NewEvent)
+}
+
+function onClick(arg: any) {
+  selectedEvent.value = undefined
+  calendar.value = arg.view.calendar
+  const clickedEventTitle = arg.event.title as string
+
+  // We use a normalized event ID to avoid duplication. It's created by concatenating 'holiday', 'birthday', 'event', 'meeting', and 'vacation' with the event ID.
+  if (clickedEventTitle === CalendarEventSelection.PublicHoliday) {
+    selectedEvent.value = holidays.value.filter(
+      (holiday) => holiday.id === Number(arg.event.id.replace('holiday', ''))
+    )[0]
+
+    openDialog(CalendarEventSelection.PublicHoliday)
+  } else if (
+    clickedEventTitle
+      .toLocaleLowerCase()
+      .includes(CalendarEventSelection.Vacation.toLocaleLowerCase())
+  ) {
+    selectedEvent.value = vacations.value.filter(
+      (vacation) => vacation.id === Number(arg.event.id.replace('vacation', ''))
+    )[0]
+    openDialog(CalendarEventSelection.Vacation)
+  } else if (clickedEventTitle === CalendarEventSelection.Birthday) {
+    selectedEvent.value = birthdays.value.filter(
+      (birthday) => birthday.id === Number(arg.event.id.replace('birthday', ''))
+    )[0]
+    openDialog(CalendarEventSelection.Birthday)
+  } else if (clickedEventTitle === CalendarEventSelection.Event) {
+    selectedEvent.value = events.value.filter(
+      (event) => event.id === Number(arg.event.id.replace('event', ''))
+    )[0]
+    openDialog(CalendarEventSelection.Event)
+  } else if (clickedEventTitle === CalendarEventSelection.Meeting) {
+    selectedEvent.value = meetings.value.filter(
+      (meeting) => meeting.id === Number(arg.event.id.replace('meeting', ''))
+    )[0]
+    openDialog(CalendarEventSelection.Meeting)
+  }
+  selectedEventType.isViewRequest = true
+}
+
+function openDialog(dialogType: CalendarEventSelection) {
+  if (dialogType === CalendarEventSelection.Birthday) {
+    selectedEventType.isBirthday = true
+  } else if (dialogType === CalendarEventSelection.Event) {
+    selectedEventType.isEvent = true
+  } else if (dialogType === CalendarEventSelection.Meeting) {
+    selectedEventType.isMeeting = true
+  } else if (dialogType === CalendarEventSelection.PublicHoliday) {
+    selectedEventType.isHoliday = true
+  } else if (dialogType === CalendarEventSelection.Vacation) {
+    selectedEventType.isVacation = true
+  } else if (dialogType === CalendarEventSelection.NewEvent) {
+    selectedEventType.isNewEvent = true
+  }
+}
+
+function closeDialog(dialogType: CalendarEventSelection) {
+  if (dialogType === CalendarEventSelection.Birthday) {
+    selectedEventType.isBirthday = false
+  } else if (dialogType === CalendarEventSelection.Event) {
+    selectedEventType.isEvent = false
+  } else if (dialogType === CalendarEventSelection.Meeting) {
+    selectedEventType.isMeeting = false
+  } else if (dialogType === CalendarEventSelection.PublicHoliday) {
+    selectedEventType.isHoliday = false
+  } else if (dialogType === CalendarEventSelection.Vacation) {
+    selectedEventType.isVacation = false
+  } else if (dialogType === CalendarEventSelection.NewEvent) {
+    selectedEventType.isNewEvent = false
+  }
+}
+
+async function createVacation(vacation: Api.Vacation) {
+  if (cached_users.has(vacation.applying_user.id)) {
+    vacation.applying_user = cached_users.get(vacation.applying_user.id)
+  } else {
+    const user = await $api.users.getuser(vacation.applying_user.id, { disableNotify: true })
+    cached_users.set(vacation.applying_user.id, user)
+    vacation.applying_user = user
+  }
+
+  vacations.value.push(vacation)
+  const vacationEvent = normalizeVacation(vacation) as any
+  filteredEvents.value.push(vacationEvent)
+  closeDialog(CalendarEventSelection.NewEvent)
+}
+
+async function createMeeting(meeting: Api.Meeting) {
+  meetings.value.push(meeting)
+  const meetingEvent = normalizeMeeting(meeting) as any
+  filteredEvents.value.push(meetingEvent)
+  closeDialog(CalendarEventSelection.NewEvent)
+}
+
+async function createEvent(event: Api.Event) {
+  events.value.push(event)
+  const eventData = normalizeEvent(event) as any
+  filteredEvents.value.push(eventData)
+  closeDialog(CalendarEventSelection.NewEvent)
+}
+
+async function updateVacationStatus(data: string) {
+  const vacationIndex = vacations.value.findIndex((vacation) => vacation.id === selectedEvent.value!.id)
+  if (vacationIndex !== -1) {
+    if (data === 'Approve') {
+      vacations.value[vacationIndex].status = 'approved'
+    } else;
+    if (data === 'Reject') {
+      vacations.value[vacationIndex].status = 'rejected'
+    }
+  }
+  closeDialog(CalendarEventSelection.Vacation)
+}
+
+async function updateVacation(vacation: Api.Vacation) {
+  vacations.value = vacations.value.filter((vacation) => vacation.id !== selectedEvent.value?.id)
+  filteredEvents.value = filteredEvents.value.filter(event => event.id.toString() !== `vacation${selectedEvent.value?.id}`)
+
+  if (cached_users.has(vacation.applying_user)) {
+    vacation.applying_user = cached_users.get(vacation.applying_user)
+  } else {
+    const user = await $api.users.getuser(vacation.applying_user, { disableNotify: true })
+    cached_users.set(vacation.applying_user, user)
+    vacation.applying_user = user
+  }
+  vacation.type="vacation"
+  vacations.value.push(vacation)
+  const vacationEvent = normalizeVacation(vacation) as any
+  filteredEvents.value.push(vacationEvent)
+  closeDialog(CalendarEventSelection.Vacation)
+}
+
+
+async function deleteVacation() {
+  vacations.value = vacations.value.filter((vacation) => vacation.id !== selectedEvent.value?.id)  
+  filteredEvents.value = filteredEvents.value.filter(event => event.id.toString() !== `vacation${selectedEvent.value?.id}`)
+  closeDialog(CalendarEventSelection.Vacation)
+}
+
+const options = reactive<CalendarOptions>({
+  plugins: [dayGridPlugin, timeGridPlugin, listPlugin, interactionPlugin],
+  // dayMaxEventRows: true,
+  dayMaxEvents: true,
+  initialView: 'dayGridMonth',
+  headerToolbar: {
+    left: 'prev,next today',
+    center: 'title',
+    right: 'dayGridMonth,dayGridWeek,listDay'
+  },
+  selectable: true,
+  weekends: true,
+  select: onSelect,
+  eventClick: onClick,
+  events: [],
+  editable: false,
+  datesSet: (arg) => (currentDate.value = arg.view.currentStart)
+})
+
+watch(currentDate, () => loadEvents(), { deep: true })
+watch(filters, filterEvents, { deep: true })
+</script>
+
+<style>
+.fc {
+  font-size: 0.875rem !important;
+}
+
+.fc-theme-standard .fc-scrollgrid {
+  border: 1px solid #3c3c3c !important;
+}
+
+.fc-theme-standard td,
+.fc-theme-standard th {
+  border: 1px solid #3c3c3c !important;
+}
+
+.fc .fc-button .fc-icon {
+  font-size: 1em;
+  vertical-align: baseline;
+}
+
+.fc-daygrid-block-event .fc-event-time,
+.fc-daygrid-block-event .fc-event-title {
+  padding: 1px 9px;
+}
+
+button {
+  text-transform: capitalize !important;
+}
+
+.fc-daygrid-event-harness {
+  cursor: pointer;
+}
+
+.fc-event-title {
+  font-weight: 500;
+  color: #131313 !important;
+  cursor: pointer;
+}
+
+.fc-popover {
+  background-color: rgb(49 47 47) !important;
+  color: #ffffff;
+
+  .fc-popover-header {
+    background-color: rgb(100, 99, 99) !important;
+  }
+}
+</style>
diff --git a/client/src/components/calender.vue b/client/src/components/calender.vue
deleted file mode 100644
index 87ef51361..000000000
--- a/client/src/components/calender.vue
+++ /dev/null
@@ -1,510 +0,0 @@
-<!-- eslint-disable vue/no-async-in-computed-properties -->
-<template>
-  <v-row class="justify-center py-4">
-    <v-col cols="2">
-      <v-checkbox v-model="selected.meetings" color="#efeaea" label="Meetings" />
-    </v-col>
-    <v-col cols="2">
-      <v-checkbox v-model="selected.events" color="#47a2ff" label="Events" />
-    </v-col>
-    <v-col cols="2">
-      <v-checkbox v-model="selected.vacations" color="#fcd091" label="Vacations" />
-    </v-col>
-    <v-col cols="2">
-      <v-checkbox v-model="selected.holidays" color="#5effb4" label="Holidays" />
-    </v-col>
-    <v-col cols="2">
-      <v-checkbox v-model="selected.birthdays" color="#e0adf0" label="Birthdays" />
-    </v-col>
-  </v-row>
-  <v-divider class="d-flex mx-auto" style="width: 90%"></v-divider>
-  <div class="ma-7 px-7">
-    <div
-      class="loading-container d-flex align-center justify-center my-5"
-      v-if="homes.isLoading.value"
-    >
-      <v-alert density="compact" class="pa-5" type="info" text="Events are loading..."></v-alert>
-    </div>
-    <FullCalendar
-      class="fc"
-      :options="{
-        ...options,
-        events: eventsOption,
-        dayCellDidMount
-      }"
-    />
-  </div>
-  <VDialog
-    v-if="dates?.startStr"
-    :routeQuery="dates?.startStr"
-    :modelValue="showDialog[dates?.startStr]"
-  >
-    <v-card>
-      <calenderRequest
-        :dates="dates"
-        @close-dialog="closeDialog(dates?.startStr)"
-        @create-vacation="createVacation(dates?.startStr, $event)"
-        @create-meeting="createMeeting(dates?.startStr, $event)"
-        @create-event="createEvent(dates?.startStr, $event)"
-      />
-    </v-card>
-  </VDialog>
-
-  <VDialog
-    v-if="isViewRequest && isMeeting && meeting"
-    :routeQuery="meeting.id"
-    :modelValue="showDialog[meeting.id]"
-  >
-    <v-card>
-      <meetingCard :meeting="meeting" @close-dialog="closeDialog(meeting.id)" />
-    </v-card>
-  </VDialog>
-
-  <VDialog
-    v-if="isViewRequest && isHoliday && holiday"
-    :routeQuery="holiday.id"
-    :modelValue="showDialog[holiday.id]"
-  >
-    <v-card>
-      <holidayCard :holiday="holiday" @close-dialog="closeDialog(holiday.id)" />
-    </v-card>
-  </VDialog>
-
-  <VDialog
-    v-if="isViewRequest && isBirthday && birthday"
-    :routeQuery="birthday.id"
-    :modelValue="showDialog[birthday.id]"
-  >
-    <v-card>
-      <birthdayCard :birthday="birthday" @close-dialog="closeDialog(birthday.id)" />
-    </v-card>
-  </VDialog>
-
-  <VDialog
-    v-if="isViewRequest && isEvent && event"
-    :routeQuery="event.name"
-    :modelValue="showDialog[event.name]"
-  >
-    <v-card>
-      <eventCard :event="event" @close-dialog="closeDialog(event.name)" />
-    </v-card>
-  </VDialog>
-
-  <VDialog
-    v-if="isViewRequest && isLeave && vacation"
-    :routeQuery="vacation.id"
-    :modelValue="showDialog[vacation.id]"
-  >
-    <v-card>
-      <vacationCard
-        :vacation="vacation"
-        @close-dialog="closeDialog(vacation.id)"
-        @status-vacation="updateVacationStatus(vacation.id, $event)"
-        @update-vacation="updateVacation(vacation.id, $event)"
-        @delete-vacation="deleteVacation(vacation.id)"
-      />
-    </v-card>
-  </VDialog>
-</template>
-<script lang="ts">
-import dayGridPlugin from '@fullcalendar/daygrid'
-import interactionPlugin from '@fullcalendar/interaction' // Add this line
-import timeGridPlugin from '@fullcalendar/timegrid'
-import FullCalendar from '@fullcalendar/vue3'
-import listPlugin from '@fullcalendar/list'
-import calenderRequest from '@/components/calenderRequest.vue'
-import meetingCard from '@/components/cards/meetingCard.vue'
-import eventCard from '@/components/cards/eventCard.vue'
-import vacationCard from '@/components/cards/vacationCard.vue'
-import holidayCard from '@/components/cards/holidayCard.vue'
-import birthdayCard from '@/components/cards/birthdayCard.vue'
-
-import { ref, computed, reactive, watch } from 'vue'
-import type { Api } from '@/types'
-import { useApi } from '@/hooks'
-import type { EventClickArg, CalendarApi, DayCellMountArg } from '@fullcalendar/core/index.js'
-import { useAsyncState } from '@vueuse/core'
-import {
-  normalizeEvent,
-  normalizeVacation,
-  normalizeMeeting,
-  normalizeHoliday,
-  normalizedBirthday
-} from '@/utils'
-import { ApiClientBase } from '@/clients/api/base'
-
-const cached_users = new Map<number, Api.User>()
-
-export default {
-  name: 'calenderCshr',
-  components: {
-    FullCalendar,
-    calenderRequest,
-    meetingCard,
-    eventCard,
-    vacationCard,
-    holidayCard,
-    birthdayCard
-  },
-
-  setup() {
-    const me = ApiClientBase.user.value?.fullUser
-    if (me) {
-      cached_users.set(me.id, me)
-    }
-
-    const $api = useApi()
-    const meeting = ref<Api.Meetings>()
-    const currentDate = ref<Date>(new Date())
-    const isViewRequest = ref<Boolean>(false)
-    const isEvent = ref<Boolean>(false)
-    const isMeeting = ref<Boolean>(false)
-    const isLeave = ref<Boolean>(false)
-    const isHoliday = ref<Boolean>(false)
-    const isBirthday = ref<Boolean>(false)
-    const event = ref<Api.Inputs.Event>()
-    const birthday = ref<Api.User>()
-    const vacation = ref<Api.Vacation>()
-    const holiday = ref<Api.Holiday>()
-    const calendar = ref<CalendarApi>()
-    const dates = ref<any>()
-    const selected = ref({
-      events: true,
-      vacations: true,
-      meetings: true,
-      holidays: true,
-      birthdays: true
-    })
-    const showDialog = ref<{ [key: string]: boolean }>({})
-    const meetings = ref<Api.Meetings[]>([])
-    const vacations = ref<Api.Vacation[]>([])
-    const holidays = ref<Api.Holiday[]>([])
-    const events = ref<Api.Inputs.Event[]>([])
-    const birthdays = ref<Api.User[]>([])
-
-    async function filteHome(data: any) {
-      for (const home of data) {
-        if (home.title === 'meeting') {
-          home.meeting.forEach((meeting: Api.Meetings) => {
-            meetings.value.push(meeting)
-          })
-        }
-        if (home.title === 'birthday') {
-          home.users.forEach((birthday: Api.User) => {
-            let u: Api.User
-            u = birthday
-            u.birthday = home.date
-            birthdays.value.push(u)
-          })
-        }
-        if (home.title === 'public_holiday') {
-          home.holidays.forEach((holiday: Api.Holiday) => {
-            holidays.value.push(holiday)
-          })
-        }
-        if (home.title === 'event') {
-          home.event.forEach((event: Api.Inputs.Event) => {
-            events.value.push(event)
-          })
-        }
-
-        if (home.title === 'vacation') {
-          for (const vacation of home.vacation) {
-            let v: Api.Vacation
-            v = vacation
-
-            if (cached_users.has(vacation.applying_user.id)) {
-              v.user = cached_users.get(vacation.applying_user.id)
-            } else {
-              const user = await $api.users.getuser(vacation.applying_user.id, {
-                disableNotify: true
-              })
-              cached_users.set(vacation.applying_user.id, user)
-              v.user = user
-            }
-
-            vacations.value.push(v)
-          }
-        }
-      }
-    }
-
-    const homes = useAsyncState(
-      () =>
-        $api.home.list({
-          month: currentDate.value.getMonth() + 1,
-          year: currentDate.value.getFullYear()
-        }),
-      [],
-      {
-        onSuccess(data) {
-          filteHome(data)
-        }
-      }
-    )
-
-    watch(
-      () => currentDate.value,
-      async (newValue, oldValue) => {
-        if (
-          newValue.getMonth() + 1 !== oldValue.getMonth() + 1 ||
-          newValue.getFullYear() !== oldValue.getFullYear()
-        ) {
-          homes.execute()
-        }
-      }
-    )
-
-    const onSelect = async (arg: any) => {
-      calendar.value = arg.view.calendar
-      dates.value = arg
-
-      openDialog(arg.startStr)
-    }
-
-    const onClick = async (arg: EventClickArg) => {
-      calendar.value = arg.view.calendar
-
-      if (arg.event.title === 'Meeting') {
-        meeting.value = meetings.value.filter((meeting) => meeting.id === Number(arg.event.id))[0]
-        isMeeting.value = true
-        openDialog(meeting.value.id)
-      } else if (arg.event.title === 'Event') {
-        event.value = events.value.filter((event) => event.name === arg.event.id)[0]
-        isEvent.value = true
-        openDialog(event.value.name)
-      } else if (arg.event.title === 'Birthday') {
-        birthday.value = birthdays.value.filter(
-          (birthday) => birthday.id === Number(arg.event.id)
-        )[0]
-        isBirthday.value = true
-        openDialog(birthday.value.id)
-      } else if (arg.event.title.includes('Vacation')) {
-        vacation.value = vacations.value.filter(
-          (vacation) => vacation.id === Number(arg.event.id)
-        )[0]
-        isLeave.value = true
-        openDialog(vacation.value.id)
-      } else if (arg.event.title === 'Public Holiday') {
-        holiday.value = holidays.value.filter((holiday) => holiday.id === Number(arg.event.id))[0]
-        isHoliday.value = true
-        openDialog(holiday.value.id)
-      }
-      isViewRequest.value = true
-    }
-
-    const plugins = [dayGridPlugin, timeGridPlugin, listPlugin, interactionPlugin] as any
-    const eventsOption = computed(() => {
-      const normalizedMeetings = selected.value.meetings ? meetings.value.map(normalizeMeeting) : []
-      const normalizedEvents = selected.value.events ? events.value.map(normalizeEvent) : []
-      const normalizedBirthdays = selected.value.birthdays
-        ? birthdays.value.map(normalizedBirthday)
-        : []
-      const normalizedHolidays = selected.value.holidays ? holidays.value.map(normalizeHoliday) : []
-
-      const normalizedVacations = selected.value.vacations
-        ? vacations.value.map(normalizeVacation)
-        : []
-
-      return [
-        ...normalizedMeetings,
-        ...normalizedEvents,
-        ...normalizedVacations,
-        ...normalizedHolidays,
-        ...normalizedBirthdays
-      ]
-    })
-
-    function dayCellDidMount({ el, date }: DayCellMountArg) {
-      for (const event of eventsOption.value) {
-        const current = date.getTime()
-        const start = new Date(event.start).getTime() - 86_400_000
-        const end = new Date(event.end).getTime()
-
-        const shouldUpdate = current >= start && current <= end
-        if (shouldUpdate) {
-          el.style.backgroundColor = 'rgba(255, 255, 255, 0.05)'
-          return
-        }
-      }
-    }
-
-    const options = reactive<any>({
-      plugins,
-      dayMaxEvents: true,
-      initialView: 'dayGridMonth',
-      headerToolbar: {
-        left: 'prev,next today',
-        center: 'title',
-        right: 'dayGridMonth,dayGridWeek,listDay'
-      },
-      selectable: true,
-      weekends: true,
-      select: onSelect,
-      eventClick: onClick,
-      editable: false,
-      datesSet: (arg: any) => (currentDate.value = arg.view.currentStart)
-    })
-
-    function closeDialog(id: string | number) {
-      isViewRequest.value, isEvent.value, isMeeting.value, (isLeave.value = false)
-      event.value, meeting.value, (dates.value = undefined)
-      showDialog.value[id] = false
-    }
-
-    async function createVacation(id: number | string, data: any) {
-      data.vacation.forEach(async (vacation: Api.Vacation) => {
-        let v: Api.Vacation
-        v = vacation
-
-        if (cached_users.has(vacation.applying_user.id)) {
-          v.user = cached_users.get(vacation.applying_user.id)
-        } else {
-          const user = await $api.users.getuser(vacation.applying_user.id, { disableNotify: true })
-          cached_users.set(vacation.applying_user.id, user)
-          v.user = user
-        }
-
-        vacations.value.push(v)
-      })
-      closeDialog(id)
-    }
-    async function createMeeting(id: number | string, data: any) {
-      data.meeting.forEach((meeting: Api.Meetings) => {
-        meetings.value.push(meeting)
-      })
-      closeDialog(id)
-    }
-    async function createEvent(id: number | string, data: any) {
-      data.event.forEach((event: Api.Inputs.Event) => {
-        events.value.push(event)
-      })
-
-      closeDialog(id)
-    }
-    async function deleteVacation(id: number | string) {
-      vacations.value = vacations.value.filter((vacation) => vacation.id !== id)
-      closeDialog(id)
-    }
-
-    async function updateVacation(id: number | string, data: any) {
-      vacations.value = vacations.value.filter((vacation) => vacation.id !== id)
-      let v: Api.Vacation
-      v = data
-
-      if (cached_users.has(data.applying_user.id)) {
-        v.user = cached_users.get(data.applying_user.id)
-      } else {
-        const user = await $api.users.getuser(data.applying_user.id, {
-          disableNotify: true
-        })
-        cached_users.set(data.applying_user.id, user)
-        v.user = user
-      }
-
-      v.isUpdated = true
-      vacations.value.push(v)
-      closeDialog(id)
-    }
-
-    async function updateVacationStatus(id: number, data: string) {
-      const vacationIndex = vacations.value.findIndex((vacation) => vacation.id === id)
-      if (vacationIndex !== -1) {
-        if (data === 'Approve') {
-          vacations.value[vacationIndex].status = 'approved'
-        } else;
-        if (data === 'Reject') {
-          vacations.value[vacationIndex].status = 'rejected'
-        }
-      }
-      closeDialog(id)
-    }
-
-    async function openDialog(id: string | number) {
-      showDialog.value[id] = true
-    }
-
-    return {
-      events,
-      vacations,
-      meetings,
-      isViewRequest,
-      isEvent,
-      isLeave,
-      isMeeting,
-      meeting,
-      event,
-      showDialog,
-      options,
-      eventsOption,
-      dates,
-      vacation,
-      holiday,
-      isHoliday,
-      isBirthday,
-      birthday,
-      selected,
-      homes,
-      currentDate,
-      updateVacation,
-      dayCellDidMount,
-      closeDialog,
-      openDialog,
-      onSelect,
-      onClick,
-      createVacation,
-      createMeeting,
-      createEvent,
-      deleteVacation,
-      updateVacationStatus,
-      calenderRequest,
-      meetingCard,
-      eventCard,
-      vacationCard,
-      holidayCard,
-      birthdayCard
-    }
-  }
-}
-</script>
-<style>
-.fc {
-  font-size: 0.875rem !important;
-}
-
-.fc-theme-standard .fc-scrollgrid {
-  border: 1px solid #3c3c3c !important;
-}
-.fc-theme-standard td,
-.fc-theme-standard th {
-  border: 1px solid #3c3c3c !important;
-}
-
-.fc .fc-button .fc-icon {
-  font-size: 1em;
-  vertical-align: baseline;
-}
-
-.fc-daygrid-block-event .fc-event-time,
-.fc-daygrid-block-event .fc-event-title {
-  padding: 1px 9px;
-}
-
-button {
-  text-transform: capitalize !important;
-}
-
-.fc-event-title {
-  color: #131313;
-  font-weight: 500;
-}
-
-.fc-popover {
-  background-color: rgb(49 47 47) !important;
-  color: #ffffff;
-
-  .fc-popover-header {
-    background-color: rgb(100, 99, 99) !important;
-  }
-}
-</style>
diff --git a/client/src/components/cards/vacationCard.vue b/client/src/components/cards/vacationCard.vue
index b683296bf..15955b025 100644
--- a/client/src/components/cards/vacationCard.vue
+++ b/client/src/components/cards/vacationCard.vue
@@ -17,7 +17,7 @@
       <v-form ref="form" @submit.prevent="updateVacation()">
 
         <v-row class="d-flex justify-center my-2" v-if="couldUpdate">
-          <v-btn color="primary" class="mx-1 my-2" :disabled="!form?.isValid || disabled">Update</v-btn>
+          <v-btn color="primary" class="mx-1 my-2" type="submit" :disabled="!form?.isValid || disabled">Update</v-btn>
           <v-btn color="error" class="mx-1 my-2" @click="handleDelete">Delete</v-btn>
         </v-row>
         <v-divider class="my-2"></v-divider>
@@ -29,7 +29,7 @@
               <p>
                 Applying User :
                 <span color="warning" class="mx-2">{{
-                  vacation.user.full_name
+                  vacation.applying_user.full_name
                 }}</span>
               </p>
             </v-col>
@@ -80,10 +80,16 @@ import { computed, ref, watch } from 'vue';
 import { useApi } from '@/hooks'
 import { useAsyncState } from '@vueuse/core'
 import { ApiClientBase } from '@/clients/api/base'
+import type { PropType } from 'vue';
 
 export default {
   name: 'vacationCard',
-  props: ['vacation'],
+  props: {
+    vacation: {
+      type: Object as PropType<Api.Vacation>,
+      required: true,
+    }
+  },
   emits: {
     'close-dialog': (item: Boolean) => item,
     'update-vacation': (item: any) => item,
@@ -132,6 +138,7 @@ export default {
     const couldUpdate = computed(() => {
       if (user.value) {
         if (props.vacation.status == 'pending') {
+          // could update if user signed in is the same user applied for vacation
           if (props.vacation.isUpdated && user.value.fullUser.id == props.vacation.applying_user) {
             return true
           }
@@ -150,16 +157,21 @@ export default {
     const couldApprove = computed(() => {
       
       if (user.value) {
+        // only admins or supervisors could approve vacation
         if (
           user.value.fullUser.user_type === 'Admin' ||
           user.value.fullUser.user_type === 'Supervisor'
           ) {
-          if (props.vacation.user.id == user.value.fullUser.id) {
+          // Could approve if user signed in is the same user applied for vacation
+          if (props.vacation.applying_user.id == user.value.fullUser.id) {
             return true
           }
+          // Could approve if applying user reports to the supervisor or admin logged in 
+          // and works from the same office
           if (
-            props.vacation.user.reporting_to[0]?.id === props.vacation.user?.id &&
-            props.vacation.user.location.name === user.value.fullUser.location.name
+            props.vacation.applying_user.reporting_to &&
+            props.vacation.applying_user.reporting_to[0]?.id === props.vacation.applying_user?.id &&
+            props.vacation.applying_user.location.name === user.value.fullUser.location.name
           ) {
             return true
           }
@@ -225,7 +237,7 @@ export default {
     async function updateVacation() {
       const actualDays = await calculateActualDays()
 
-      useAsyncState(
+      await useAsyncState(
         $api.vacations.edit.update(props.vacation.id, {
           reason: leaveReason.value.reason,
           from_date: startDate.value,
diff --git a/client/src/components/requests/eventRequest.vue b/client/src/components/requests/eventRequest.vue
index d254c2e97..0bbd264f5 100644
--- a/client/src/components/requests/eventRequest.vue
+++ b/client/src/components/requests/eventRequest.vue
@@ -1,13 +1,33 @@
 <template>
   <v-form ref="form" @submit.prevent="createEvent()">
     <div class="mt-3">
-      <v-text-field ref="startDateField" color="info" item-color="info" base-color="info" variant="outlined"
-        hide-details="auto" label="From" v-model="startDate" type="date" :rules="[validateDates]"></v-text-field>
+      <v-text-field
+        ref="startDateField"
+        color="info"
+        item-color="info"
+        base-color="info"
+        variant="outlined"
+        hide-details="auto"
+        label="From"
+        v-model="startDate"
+        type="date"
+        :rules="[validateDates]"
+      ></v-text-field>
     </div>
 
     <div class="mt-3">
-      <v-text-field ref="endDateField" color="info" item-color="info" base-color="info" variant="outlined"
-        hide-details="auto" label="To" v-model="endDate" type="date" :rules="[validateDates]"></v-text-field>
+      <v-text-field
+        ref="endDateField"
+        color="info"
+        item-color="info"
+        base-color="info"
+        variant="outlined"
+        hide-details="auto"
+        label="To"
+        v-model="endDate"
+        type="date"
+        :rules="[validateDates]"
+      ></v-text-field>
     </div>
 
     <div class="mt-3">
@@ -34,12 +54,19 @@
     </div>
 
     <v-row class="mt-3 pa-4 d-flex justify-end">
-      <v-btn color="primary" type="submit" :disabled="!form?.isValid"> Submit </v-btn>
+      <v-btn
+        color="primary"
+        type="submit"
+        :disabled="!form?.isValid || requesting"
+        :loading="requesting"
+      >
+        Submit
+      </v-btn>
     </v-row>
   </v-form>
 </template>
 <script lang="ts">
-import { computed, ref, watch } from 'vue'
+import { computed, onMounted, ref, watch } from 'vue'
 import { fieldRequired } from '@/utils'
 import { useApi } from '@/hooks'
 import { useAsyncState } from '@vueuse/core'
@@ -63,6 +90,7 @@ export default {
     const eventEnd = ref()
     const startDateField = ref()
     const endDateField = ref()
+    const requesting = ref<boolean>(false)
 
     watch(
       () => [startDate.value, endDate.value],
@@ -76,11 +104,12 @@ export default {
 
 
     const validateDates = (value: string | null): string | boolean => {
-      if (!startDate.value) return 'Please select start date.';
-      if (!endDate.value) return 'Please select end date.';
-      if (endDate.value <= startDate.value) return 'End date must be after start date.';
-      return true;
-    };
+      if (!startDate.value) return 'Please select start date.'
+      if (!endDate.value) return 'Please select end date.'
+      if (endDate.value < startDate.value) return 'End date must be after start date.'
+      return true
+    }
+
     const from_date = computed(() => {
       let val = new Date(startDate.value)
       if (eventStart.value) {
@@ -100,8 +129,14 @@ export default {
       return val.toISOString()
     })
 
+    onMounted(async () => {
+      startDateField.value.validate()
+      endDateField.value.validate()
+     
+    })
     async function createEvent() {
-      useAsyncState(
+      requesting.value = true;
+      await useAsyncState(
         $api.event.create({
           name: name.value,
           description: description.value,
@@ -115,6 +150,7 @@ export default {
           }
         }
       )
+      requesting.value = false;
     }
 
     return {
@@ -126,6 +162,7 @@ export default {
       fieldRequired,
       eventStart,
       eventEnd,
+      requesting,
       startDateField,
       endDateField,
       validateDates,
diff --git a/client/src/components/requests/leaveRequest.vue b/client/src/components/requests/leaveRequest.vue
index 4e789c90a..506a6ba27 100644
--- a/client/src/components/requests/leaveRequest.vue
+++ b/client/src/components/requests/leaveRequest.vue
@@ -1,55 +1,114 @@
 <template>
   <v-form ref="form" @submit.prevent="createLeave()">
     <v-alert v-if="form?.isValid && isValid" density="compact" class="pa-5 my-5" type="warning">
-      {{ actualDays.state.value === 0 ? "Actual vacation days requested is zero, Selected days might include weekends or public holidays" : "Actual vacation days requested are " + actualDays.state.value +" days" }}
+      {{
+        actualDays.state.value === 0
+          ? 'Actual vacation days requested is zero, Selected days might include weekends or public holidays'
+          : 'Actual vacation days requested are ' + actualDays.state.value + ' days'
+      }}
     </v-alert>
-    <div class="mt-3" v-if="user?.fullUser.user_type === 'Admin'"> <v-radio-group inline v-model="selectedOption">
+    <div class="mt-3" v-if="user?.fullUser.user_type === 'Admin'">
+      <v-radio-group inline v-model="selectedOption">
         <v-radio label="For yourself" value="me"></v-radio>
         <v-radio label="For Another User" value="anotheruser"></v-radio>
-      </v-radio-group> </div>
+      </v-radio-group>
+    </div>
     <div class="mt-3" v-if="selectedOption === 'anotheruser'">
-      <v-autocomplete color="info" item-color="info" base-color="info" variant="outlined" v-model="selectedUser"
-        :items="officeUsers" item-title="full_name" item-value="id" label="User" return-object :rules="requiredRules">
-
+      <v-autocomplete
+        color="info"
+        item-color="info"
+        base-color="info"
+        variant="outlined"
+        v-model="selectedUser"
+        :items="officeUsers"
+        item-title="full_name"
+        item-value="id"
+        label="User"
+        return-object
+        :rules="requiredRules"
+      >
         <template #append-item v-if="reloadMore">
           <VContainer>
-            <VBtn @click="() => { return page++, count--, concatUsers() }" block color="secondary" variant="tonal"
-              prepend-icon="mdi-reload">
+            <VBtn
+              @click="
+                () => {
+                  return page++, count--, concatUsers()
+                }
+              "
+              block
+              color="secondary"
+              variant="tonal"
+              prepend-icon="mdi-reload"
+            >
               Load More Users
             </VBtn>
           </VContainer>
         </template>
       </v-autocomplete>
-
     </div>
 
     <div class="mt-3">
-      <v-text-field ref="startDateField" color="info" item-color="info" base-color="info" variant="outlined"
-        hide-details="auto" label="From" v-model="startDate" type="date" :rules="[validateDates]"></v-text-field>
+      <v-text-field
+        ref="startDateField"
+        color="info"
+        item-color="info"
+        base-color="info"
+        variant="outlined"
+        hide-details="auto"
+        label="From"
+        v-model="startDate"
+        type="date"
+        :rules="[validateDates]"
+      ></v-text-field>
     </div>
 
     <div class="mt-3">
-      <v-text-field ref="endDateField" color="info" item-color="info" base-color="info" variant="outlined"
-        hide-details="auto" label="To" v-model="endDate" type="date" :rules="[validateDates]"></v-text-field>
+      <v-text-field
+        ref="endDateField"
+        color="info"
+        item-color="info"
+        base-color="info"
+        variant="outlined"
+        hide-details="auto"
+        label="To"
+        v-model="endDate"
+        type="date"
+        :rules="[validateDates]"
+      ></v-text-field>
     </div>
     <div class="mt-3">
-      <v-autocomplete color="info" item-color="info" base-color="info" variant="outlined" v-model="leaveReason"
-        :items="leaveReasons" label="Reason" return-object item-title="name">
+      <v-autocomplete
+        color="info"
+        item-color="info"
+        base-color="info"
+        variant="outlined"
+        v-model="leaveReason"
+        :items="leaveReasons"
+        label="Reason"
+        return-object
+        item-title="name"
+      >
       </v-autocomplete>
     </div>
     <v-row class="pa-4 d-flex justify-end">
-      <v-btn color="primary" type="Submit" :disabled="!form?.isValid || !isValid || actualDays.state.value === 0"> Submit
+      <v-btn
+        color="primary"
+        type="Submit"
+        :disabled="!form?.isValid || !isValid || actualDays.state.value === 0 || requesting"
+        :loading="requesting"
+      >
+        Submit
       </v-btn>
     </v-row>
   </v-form>
 </template>
 <script lang="ts">
 import { useApi } from '@/hooks'
-import { Selection, type Api } from '@/types';
+import { Selection, type Api } from '@/types'
 import { requiredRules, listUsers } from '@/utils'
-import { useAsyncState } from '@vueuse/core';
-import { computed, onMounted, ref, watch } from 'vue';
-import { ApiClientBase } from '@/clients/api/base';
+import { useAsyncState } from '@vueuse/core'
+import { computed, onMounted, ref, watch } from 'vue'
+import { ApiClientBase } from '@/clients/api/base'
 
 export default {
   name: 'leaveRequest',
@@ -60,7 +119,7 @@ export default {
   setup(props, ctx) {
     const $api = useApi()
     const form = ref()
-    const officeUsers = ref<any[]>([]);
+    const officeUsers = ref<any[]>([])
     const selectedUser = ref()
     const selectedOption = ref<Selection>(Selection.ME)
     const page = ref(1)
@@ -69,53 +128,56 @@ export default {
     const endDateField = ref()
     const startDate = ref<Date>(props.dates.startStr)
     const endDate = ref<any>(new Date(props.dates.endStr))
-    endDate.value.setDate(endDate.value.getDate() - 1);
-    endDate.value = endDate.value.toISOString().split('T')[0];
+    endDate.value.setDate(endDate.value.getDate() - 1)
+    endDate.value = endDate.value.toISOString().split('T')[0]
     const user = ApiClientBase.user
     const userId = ref<number | undefined>()
     const leaveReason = ref<Api.LeaveReason>()
     const leaveReasons = ref<Api.LeaveReason[]>([])
-    const actualDays = useAsyncState(
-      async () => {
-        return $api.vacations.calculate.list({
-          start_date: startDate.value,
-          end_date: endDate.value,
-        })
-      },
-      undefined,
-
-    )
+    const requesting = ref<boolean>(false)
+    const actualDays = useAsyncState(async () => {
+      return $api.vacations.calculate.list({
+        start_date: startDate.value,
+        end_date: endDate.value
+      })
+    }, undefined)
 
     const isValid = computed(() => {
-      let val = leaveReason.value ? true : false;
-      return val;
-    });
-
-    const balance = useAsyncState(() => $api.vacations.getVacationBalance({ "user_ids": userId.value }), null, {
-      immediate: false,
-      onSuccess(data: any) {
-        leaveReasons.value = [{
-          name: `Emergency Leaves  ${data[0].emergency_leaves.reserved} / ${data[0].emergency_leaves.all}`,
-          reason: "emergency_leaves",
-        }, {
-          name: `Sick Leaves  ${data[0].sick_leaves.reserved} / ∞`,
-          reason: "sick_leaves",
-        },
-        {
-          name: `Annual Leaves  ${data[0].annual_leaves.reserved} / ${data[0].annual_leaves.all}`,
-          reason: "annual_leaves",
-        },
-        {
-          name: `Unpaid ${data[0].unpaid.reserved} / ∞`,
-          reason: "unpaid",
-        },
-        {
-          name: `Compensation  ${data[0].compensation.reserved} / ∞`,
-          reason: "compensation",
-        },]
+      let val = leaveReason.value ? true : false
+      return val
+    })
 
+    const balance = useAsyncState(
+      () => $api.vacations.getVacationBalance({ user_ids: userId.value }),
+      null,
+      {
+        immediate: false,
+        onSuccess(data: any) {
+          leaveReasons.value = [
+            {
+              name: `Emergency Leaves  ${data[0].emergency_leaves.reserved} / ${data[0].emergency_leaves.all}`,
+              reason: 'emergency_leaves'
+            },
+            {
+              name: `Sick Leaves  ${data[0].sick_leaves.reserved} / ∞`,
+              reason: 'sick_leaves'
+            },
+            {
+              name: `Annual Leaves  ${data[0].annual_leaves.reserved} / ${data[0].annual_leaves.all}`,
+              reason: 'annual_leaves'
+            },
+            {
+              name: `Unpaid ${data[0].unpaid.reserved} / ∞`,
+              reason: 'unpaid'
+            },
+            {
+              name: `Compensation  ${data[0].compensation.reserved} / ∞`,
+              reason: 'compensation'
+            }
+          ]
+        }
       }
-    })
+    )
 
     watch(
       () => [selectedOption.value],
@@ -126,11 +188,9 @@ export default {
           selectedUser.value = undefined
           userId.value = user.value?.fullUser.id
           balance.execute()
-
         }
-
-      },
-    );
+      }
+    )
 
     watch(
       () => [selectedUser.value],
@@ -139,41 +199,41 @@ export default {
           userId.value = selectedUser.value.id
           balance.execute()
         }
-      },
-    );
-
-
-
+      }
+    )
 
     watch(
       () => [startDate.value, endDate.value],
       async () => {
         setTimeout(async () => {
-          startDateField.value.validate();
-          endDateField.value.validate();
-          actualDays.execute();
-        }, 200);
-      },
-    );
+          startDateField.value.validate()
+          endDateField.value.validate()
+          actualDays.execute()
+        }, 200)
+      }
+    )
 
     const validateDates = (value: string | null): string | boolean => {
-      if (!startDate.value) return 'Please select start date.';
-      if (!endDate.value) return 'Please select end date.';
-      if (endDate.value < startDate.value) return 'End date must be after start date.';
-      return true;
-    };
+      if (!startDate.value) return 'Please select start date.'
+      if (!endDate.value) return 'Please select end date.'
+      if (endDate.value < startDate.value) return 'End date must be after start date.'
+      return true
+    }
 
     async function concatUsers() {
-      const { page: currentPage, count: currentCount, users: newUsers } = await listUsers($api, page.value, count.value);
+      const {
+        page: currentPage,
+        count: currentCount,
+        users: newUsers
+      } = await listUsers($api, page.value, count.value)
 
-      page.value = currentPage;
-      count.value = currentCount;
-      officeUsers.value = officeUsers.value.concat(newUsers);
+      page.value = currentPage
+      count.value = currentCount
+      officeUsers.value = officeUsers.value.concat(newUsers)
     }
     onMounted(async () => {
-
-      startDateField.value.validate();
-      endDateField.value.validate();
+      startDateField.value.validate()
+      endDateField.value.validate()
       userId.value = user.value?.fullUser.id
       balance.execute()
       concatUsers()
@@ -185,17 +245,18 @@ export default {
       if (count.value > 1) {
         return true
       }
-      return false;
-    });
+      return false
+    })
 
     async function createLeave() {
+      requesting.value = true
       if (leaveReason.value) {
         if (selectedOption.value === Selection.ANOTHERUSER) {
-          useAsyncState(
+          await useAsyncState(
             $api.vacations.admin.create(selectedUser.value.id, {
               reason: leaveReason.value.reason,
               from_date: startDate.value,
-              end_date: endDate.value,
+              end_date: endDate.value
             }),
             null,
             {
@@ -204,11 +265,9 @@ export default {
               }
             }
           )
-
-        }
-        else {
-          useAsyncState($api.vacations.create(
-            {
+        } else {
+          await useAsyncState(
+            $api.vacations.create({
               reason: leaveReason.value.reason,
               from_date: startDate.value,
               end_date: endDate.value
@@ -222,6 +281,7 @@ export default {
           )
         }
       }
+      requesting.value = false
     }
 
     return {
@@ -240,12 +300,13 @@ export default {
       selectedUser,
       officeUsers,
       page,
+      requesting,
       count,
       selectedOption,
       concatUsers,
       createLeave,
-      validateDates,
-    };
-  },
-};
+      validateDates
+    }
+  }
+}
 </script>
diff --git a/client/src/components/requests/meetingRequest.vue b/client/src/components/requests/meetingRequest.vue
index 9e6e5afd4..ec6730ae8 100644
--- a/client/src/components/requests/meetingRequest.vue
+++ b/client/src/components/requests/meetingRequest.vue
@@ -59,7 +59,14 @@
       </v-text-field>
     </div>
     <v-row class="mt-3 pa-4 d-flex justify-end">
-      <v-btn color="primary" type="submit" :disabled="!form?.isValid"> Submit </v-btn>
+      <v-btn
+        color="primary"
+        type="submit"
+        :disabled="!form?.isValid || requesting"
+        :loading="requesting"
+      >
+        Submit
+      </v-btn>
     </v-row>
   </v-form>
 </template>
@@ -82,6 +89,7 @@ export default {
     const location = ref<string>('')
     const form = ref()
     const meetingTime = ref()
+    const requesting = ref<boolean>(false)
 
     const meetingDateTime = computed(() => {
       let val = new Date(startDate.value)
@@ -94,7 +102,8 @@ export default {
     })
 
     async function createMeeting() {
-      useAsyncState(
+      requesting.value = true
+      await useAsyncState(
         $api.meeting.create({
           date: meetingDateTime.value,
           meeting_link: meetingLink.value,
@@ -107,6 +116,7 @@ export default {
           }
         }
       )
+      requesting.value = false
     }
 
     return {
@@ -115,6 +125,7 @@ export default {
       location,
       form,
       meetingTime,
+      requesting,
       fieldRequired,
       createMeeting
     }
diff --git a/client/src/router/index.ts b/client/src/router/index.ts
index 019015b99..ca24a0256 100644
--- a/client/src/router/index.ts
+++ b/client/src/router/index.ts
@@ -6,6 +6,7 @@ const router = createRouter({
   routes: [
     { path: '/login', component: () => import('@/views/LoginView.vue') },
     { path: '/', component: () => import('@/views/CalendarView.vue') },
+    { path: '/test', component: () => import('@/views/TestView.vue') },
     { path: '/notifications', component: () => import('@/views/NotificationsView.vue') },
     { path: '/team', component: () => import('@/views/TeamView.vue') },
     { path: '/users', name: 'users', component: () => import('@/views/UsersView.vue') },
diff --git a/client/src/types/api.ts b/client/src/types/api.ts
index 4c54fb026..58569ad49 100644
--- a/client/src/types/api.ts
+++ b/client/src/types/api.ts
@@ -40,7 +40,7 @@ export module Api {
     actual_days: number
     applying_user: number | any
     approval_user: number
-    user?: Api.User
+    applying_user_full_name?: string;
     isUpdated?: boolean
   }
 
@@ -52,7 +52,8 @@ export module Api {
   export interface Certificate {}
 
   export interface Salary {}
-  export interface Meetings {
+  export interface Meeting {
+    type: string;
     id: number
     invited_users: any[]
     date: any
@@ -70,7 +71,16 @@ export module Api {
     }
     location: string
   }
+  export interface Event {
+    id: number
+    name: string
+    type: string;
+    description: string;
+    from_date: string;
+    end_date: string;
+  }
   export interface User {
+    type: string;
     id: number
     first_name: string
     last_name: string
@@ -84,6 +94,7 @@ export module Api {
     mobile_number: string
     reporting_to: number[]
     birthday: string
+    date: string
     location: {
       id: number
       name: string
@@ -143,7 +154,7 @@ export module Api {
     export type Meeting = MsgRes<Meeting>
 
     export type Profile = MsgRes<User>
-    export type AllMeetings = MsgRes<Meetings>
+    export type AllMeetings = MsgRes<Meeting>
 
     export type Login = MsgRes<{
       id: number
@@ -243,6 +254,7 @@ export module Api {
     }
   }
   export interface Holiday {
+    type: string
     id: number
     location: {
       id: number
@@ -256,7 +268,7 @@ export module Api {
 
   export interface Home {
     id: number
-    title: string
+    type: string
     className: string
     eventName: string
     vacation?: any
diff --git a/client/src/types/index.ts b/client/src/types/index.ts
index 9687ee7b6..6b57a8f9e 100644
--- a/client/src/types/index.ts
+++ b/client/src/types/index.ts
@@ -1,20 +1,28 @@
 export * from './api'
 
-
 export interface Country {
-    id: number
-    country: string
+  id: number
+  country: string
 }
 
 export interface JWTokenObject {
-    token_type: string
-    exp: number
-    iat: number
-    jti: string
-    user_id: number
+  token_type: string
+  exp: number
+  iat: number
+  jti: string
+  user_id: number
 }
 
 export enum Selection {
-    ME = "me",
-    ANOTHERUSER = "anotheruser",
-  }
\ No newline at end of file
+  ME = 'me',
+  ANOTHERUSER = 'anotheruser'
+}
+
+export enum CalendarEventSelection {
+  PublicHoliday = 'Public Holiday',
+  Birthday = 'Birthday',
+  Vacation = 'Vacation',
+  Event = 'Event',
+  Meeting = 'Meeting',
+  NewEvent = 'New Event'
+}
diff --git a/client/src/utils/helpers.ts b/client/src/utils/helpers.ts
index 2ed5bd648..7aa6f3d7c 100644
--- a/client/src/utils/helpers.ts
+++ b/client/src/utils/helpers.ts
@@ -65,17 +65,18 @@ export function handelDates(start: any, end: any): any {
 }
 
 
-export function normalizeEvent(e: Api.Inputs.Event): any {
+export function normalizeEvent(e: Api.Event): any {
   const dates = handelDates(e.from_date, e.end_date)
 
   return {
+    type: e.type,
     title: 'Event',
     classNames: ['cshr-event'],
     color: '#47a2ff',
     start: dates.start,
     end: dates.end,
     backgroundColor: '#47a2ff',
-    id: e.name,
+    id: e.type + e.id.toString(),
     allDay: true
   }
 }
@@ -83,12 +84,13 @@ export function normalizeVacation(v: Api.Vacation) {
   const dates = handelDates(v.from_date, v.end_date)
 
   return {
-    title: `${v.user!.full_name}'s Vacation`,
+    type: v.type,
+    title: `${v.applying_user_full_name ? v.applying_user_full_name : v.applying_user.full_name }'s Vacation`,
     color: '#fcd091',
     start: dates.start,
     end: dates.end,
     backgroundColor: '#fcd091',
-    id: v.id.toString(),
+    id: v.type + v.id.toString(),
     allDay: true
   }
 }
@@ -97,40 +99,43 @@ export function normalizeHoliday(h: Api.Holiday) {
   const dates = handelDates(h.holiday_date, h.holiday_date)
 
   return {
+    type: h.type,
     title: `Public Holiday`,
     color: '#5effb4',
     start: dates.start,
     end: dates.end,
     backgroundColor: '#5effb4',
-    id: h.id.toString(),
+    id: h.type + h.id.toString(),
     allDay: true
   }
 }
 export function normalizedBirthday(u: Api.User) {
-  const dates = handelDates(u.birthday, u.birthday)
+  const dates = handelDates(u.date, u.date)
 
   return {
+    type: u.type,
     title: `Birthday`,
     color: '#e0adf0',
     start: dates.start,
     end: dates.end,
     backgroundColor: '#e0adf0',
-    id: u.id.toString(),
+    id: u.type + u.id.toString(),
     allDay: true
   }
 }
 
 
-export function normalizeMeeting(m: Api.Meetings): any {
+export function normalizeMeeting(m: Api.Meeting): any {
   const dates = handelDates(m.date, m.date)
 
   return {
+    type: m.type,
     title: 'Meeting',
     color: '#efeaea',
     start: dates.start,
     end: dates.end,
     backgroundColor: '#efeaea',
-    id: m.id,
+    id: m.type + m.id.toString(),
     allDay: true
   }
 }
@@ -168,7 +173,7 @@ export function isValidToken(token: string): boolean {
 export async function listUsers($api: ApiClient, page: number, count: number): Promise<{ page: number, count: number,  users: any[]}> {
   
     const res = await $api.users.admin.office_users.list({ page });
-    let users: any[] = [];
+    const users: any[] = [];
     if (res.count) {
       count = Math.ceil(res.count / 10)
     } else {
diff --git a/client/src/views/CalendarView.vue b/client/src/views/CalendarView.vue
index b03b8667e..09b8d2f46 100644
--- a/client/src/views/CalendarView.vue
+++ b/client/src/views/CalendarView.vue
@@ -1,21 +1,13 @@
 <template>
-  <calenderCshr />
+  <calender-component />
 </template>
 
 <script lang="ts">
-import { $api } from "@/clients";
-import calenderCshr from "@/components/calender.vue"
-import type { Api } from "@/types";
-import { onMounted, ref } from "vue";
+import CalenderComponent from "@/components/CalenderComponent.vue"
 export default {
   name: 'CalendarView',
   components: {
-    calenderCshr,
+    CalenderComponent,
   },
-  setup() {
-    return {
-      calenderCshr,
-    }
-  }
 }
 </script>
diff --git a/client/src/views/TestView.vue b/client/src/views/TestView.vue
new file mode 100644
index 000000000..99c82e111
--- /dev/null
+++ b/client/src/views/TestView.vue
@@ -0,0 +1,82 @@
+<template>
+  <div>
+    <v-row>
+      <v-col cols="2">
+        <v-checkbox v-model="filters.meeting" color="#efeaea" label="Meetings" />
+      </v-col>
+      <v-col cols="2">
+        <v-checkbox v-model="filters.event" color="#47a2ff" label="Events" />
+      </v-col>
+      <v-col cols="2">
+        <v-checkbox v-model="filters.vacation" color="#fcd091" label="Vacations" />
+      </v-col>
+      <v-col cols="2">
+        <v-checkbox v-model="filters.holiday" color="#5effb4" label="Holidays" />
+      </v-col>
+      <v-col cols="2">
+        <v-checkbox v-model="filters.birthday" color="#e0adf0" label="Birthdays" />
+      </v-col>
+    </v-row>
+
+    <v-row>
+      <v-col class="ml-5 mr-5" v-for="event of filteredEvents" :key="event.type">
+        <v-card class="pa-5" color="blue">{{ event.type }}</v-card>
+      </v-col>
+    </v-row>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { $api } from '@/clients'
+import type { Api } from '@/types'
+import { useAsyncState } from '@vueuse/core'
+import { watch } from 'vue'
+import { reactive, ref } from 'vue'
+
+const currentDate = ref<Date>(new Date())
+const events = ref<Api.Home[]>([])
+const filteredEvents = ref<Api.Home[]>([])
+
+const loadEvents = async () => {
+  useAsyncState(
+    () =>
+      $api.home.list({
+        month: currentDate.value.getMonth() + 1,
+        year: currentDate.value.getFullYear()
+      }),
+    [],
+    {
+      onSuccess(data) {
+        events.value = data
+        filteredEvents.value = [...events.value]
+      }
+    }
+  )
+}
+
+loadEvents()
+
+const filters = reactive({
+  meeting: true,
+  event: true,
+  vacation: true,
+  holiday: true,
+  birthday: true
+})
+
+const filterEvents = () => {  
+  console.log("events.value len 1", events.value.length);
+  filteredEvents.value = events.value.filter(event => {
+    return (
+      (event.type === 'meeting' && filters.meeting) ||
+      (event.type === 'event' && filters.event) ||
+      (event.type === 'vacation' && filters.vacation) ||
+      (event.type === 'holiday' && filters.holiday) ||
+      (event.type === 'birthday' && filters.birthday)
+    );
+  });
+  console.log("filteredEvents", filteredEvents.value.length);
+}
+
+watch(filters, filterEvents, { deep: true })
+</script>
diff --git a/server/cshr/serializers/event.py b/server/cshr/serializers/event.py
index 50d2e3945..5a0592ca3 100644
--- a/server/cshr/serializers/event.py
+++ b/server/cshr/serializers/event.py
@@ -10,6 +10,7 @@ class Meta:
         fields = [
             # "people",
             # "custom_people",
+            "id",
             "name",
             "description",
             # "location",
diff --git a/server/cshr/services/event.py b/server/cshr/services/event.py
index 66bd0c9fd..f92102c7a 100644
--- a/server/cshr/services/event.py
+++ b/server/cshr/services/event.py
@@ -1,10 +1,9 @@
 """This file contains everything related to the Event model."""
 import datetime
 from cshr.models.event import Event
-from typing import Any, Dict, List
+from typing import List
 
 from cshr.models.users import User
-from cshr.serializers.event import EventSerializer
 
 
 def get_event_by_id(id: str) -> Event:
@@ -36,31 +35,3 @@ def filter_events_by_day(day: int) -> List[Event]:
     return Event.objects.filter(
         from_date__year=today.year, from_date__month=today.month, from_date__day=day
     )
-
-
-def send_event_to_calendar(event: Event) -> Dict[str, Any]:
-    from cshr.services.landing_page import (
-        LandingPageClassNameEnum,
-        LandingPageTypeEnum,
-    )
-
-    """
-    Takes the standerd event, then update it with calendar values.
-        calendar pattern:
-            - {
-                "title": str(event),
-                "date": date(from_date),
-                "len": int(len(end_date - from_date)),
-                "className": str(--task-warning),
-                "eventName": str(event)
-            }
-    """
-    response: Dict(str, Any) = {}
-    response["len"] = (event.end_date - event.from_date).days + 1
-    response["date"] = event.from_date
-    response["title"] = LandingPageTypeEnum.Event.value
-    response["className"] = LandingPageClassNameEnum.Event.value
-    response["isBottom"] = True
-    response["eventName"] = LandingPageTypeEnum.Event.value
-    response["event"] = [EventSerializer(event).data]
-    return response
diff --git a/server/cshr/services/landing_page.py b/server/cshr/services/landing_page.py
index 3e28c96cc..a987f3830 100644
--- a/server/cshr/services/landing_page.py
+++ b/server/cshr/services/landing_page.py
@@ -1,149 +1,59 @@
 """This file contains everything related to the landing page functionalty."""
-import datetime
-from cshr.api.response import CustomResponse
-from cshr.models.event import Event
-from cshr.models.meetings import Meetings
+
 from cshr.models.users import User
-from cshr.models.vacations import PublicHoliday, Vacation
-from cshr.serializers.event import EventSerializer
-from cshr.serializers.meetings import MeetingsSerializer
-from cshr.serializers.public_holidays import PublicHolidaySerializer
-from cshr.serializers.users import BaseUserSerializer
-from cshr.serializers.vacations import LandingPageVacationsSerializer
 from cshr.services.event import filter_events_by_month_and_year
 from cshr.services.meetings import filter_meetings_by_month_and_year
 from cshr.services.public_holidays import (
     filter_public_holidays_by_month_and_year,
 )
-from cshr.services.users import filter_users_by_berithday_month
+from cshr.services.users import filter_users_by_birth_month
 from cshr.services.vacations import filter_vacations_by_month_and_year
-from typing import Any, List, Dict, Union
-from itertools import chain
-from enum import Enum
-
-
-class LandingPageTypeEnum(Enum):
-    VACATION = "vacation"
-    PUBLIC_HOLIDAY = "public_holiday"
-    BIRTHDAY = "birthday"
-    MEETING = "meeting"
-    Event = "event"
+from typing import Any, List
+
+from cshr.utils.wrappers import (
+    wrap_birthday_event,
+    wrap_event_request,
+    wrap_holiday_request,
+    wrap_meeting_request,
+    wrap_vacation_request,
+)
 
 
-class LandingPageClassNameEnum(Enum):
-    PUBLIC_HOLIDAY = "task--success"
-    VACATION = "task--warning"
-    BIRTHDAY = "task--primary"
-    MEETING = "task--danger"
-    Event = "task--info"
+def landing_page_calendar_functionality(user: User, month: str, year: str) -> List[Any]:
+    response: List[Any] = []
 
+    # Fetch vacations
+    vacations = filter_vacations_by_month_and_year(month, year).order_by("-created_at")
+    for vacation in vacations:
+        vacation_data = wrap_vacation_request(vacation)
+        response.append(vacation_data)
 
-def landing_page_calendar_functionality(user: User, month: str, year: str):
-    """
-    This function will filter all of events based on its yesr, month.
-    """
-    vacations: List[Vacation] = filter_vacations_by_month_and_year(
-        month, year
-    ).order_by("-created_at")
-    meetings: List[Meetings] = filter_meetings_by_month_and_year(
-        user, month, year
-    ).order_by("-created_at")
-    events: List[Event] = filter_events_by_month_and_year(user, month, year).order_by(
+    # Fetch meetings
+    meetings = filter_meetings_by_month_and_year(user, month, year).order_by(
         "-created_at"
     )
-    users_birthdates: List[User] = filter_users_by_berithday_month(month).order_by(
+    for meeting in meetings:
+        meeting_data = wrap_meeting_request(meeting)
+        response.append(meeting_data)
+
+    # Fetch events
+    events = filter_events_by_month_and_year(user, month, year).order_by("-created_at")
+    for event in events:
+        event_data = wrap_event_request(event)
+        response.append(event_data)
+
+    # Fetch users' birthdays
+    users_birthdates = filter_users_by_birth_month(month).order_by("-created_at")
+    for birthday_user in users_birthdates:
+        birthday_data = wrap_birthday_event(birthday_user)
+        response.append(birthday_data)
+
+    # Fetch public holidays
+    public_holidays = filter_public_holidays_by_month_and_year(year, month).order_by(
         "-created_at"
     )
-    public_holidays: PublicHoliday = filter_public_holidays_by_month_and_year(
-        year, month
-    ).order_by("-created_at")
-
-    objects: Union[List[Any], None] = list(
-        chain(public_holidays, vacations, events, meetings, users_birthdates)
-    )
-
-    response: List[Any] = []
-
-    for object in objects:
-        obj: Dict = {}
-        obj["id"] = object.id
-        if isinstance(object, Vacation):
-            obj["title"] = LandingPageTypeEnum.VACATION.value
-            obj["className"] = LandingPageClassNameEnum.VACATION.value
-            obj["eventName"] = LandingPageTypeEnum.VACATION.value
-            obj["vacation"] = LandingPageVacationsSerializer(
-                vacations.filter(
-                    from_date__day=object.from_date.day,
-                    from_date__month=object.from_date.month,
-                ),
-                many=True,
-            ).data
-        elif isinstance(object, PublicHoliday):
-            obj["title"] = LandingPageTypeEnum.PUBLIC_HOLIDAY.value
-            obj["className"] = LandingPageClassNameEnum.PUBLIC_HOLIDAY.value
-            obj["eventName"] = LandingPageTypeEnum.PUBLIC_HOLIDAY.value
-            obj["holidays"] = PublicHolidaySerializer(
-                public_holidays.filter(
-                    holiday_date__day=object.holiday_date.day,
-                    holiday_date__month=object.holiday_date.month,
-                ),
-                many=True,
-            ).data
-            obj["date"] = object.holiday_date
-            obj["len"] = 1
-        elif isinstance(object, Meetings):
-            obj["title"] = LandingPageTypeEnum.MEETING.value
-            obj["date"] = object.date
-            obj["len"] = 1
-            obj["vlen"] = 2
-            obj["className"] = LandingPageClassNameEnum.MEETING.value
-            obj["eventName"] = LandingPageTypeEnum.MEETING.value
-            obj["meeting"] = MeetingsSerializer(
-                meetings.filter(
-                    date__day=object.date.day, date__month=object.date.month
-                ),
-                many=True,
-            ).data
-        elif isinstance(object, Event):
-            obj["len"] = (object.end_date - object.from_date).days + 1
-            obj["date"] = object.from_date
-            obj["title"] = LandingPageTypeEnum.Event.value
-            obj["className"] = LandingPageClassNameEnum.Event.value
-            obj["isBottom"] = True
-            obj["eventName"] = LandingPageTypeEnum.Event.value
-            obj["event"] = EventSerializer(
-                events.filter(
-                    from_date__day=object.from_date.day,
-                    from_date__month=object.from_date.month,
-                    from_date__year=object.from_date.year,
-                ),
-                many=True,
-            ).data
-        elif isinstance(object, User):
-            today = datetime.datetime.now()
-            obj["title"] = LandingPageTypeEnum.BIRTHDAY.value
-            obj["className"] = LandingPageClassNameEnum.BIRTHDAY.value
-            obj["eventName"] = LandingPageTypeEnum.BIRTHDAY.value
-            obj["date"] = f"{today.year}-{object.birthday.month}-{object.birthday.day}"
-            obj["len"] = 1
-            obj["vlen"] = 2
-            obj["users"] = BaseUserSerializer(
-                users_birthdates.filter(
-                    birthday__day=object.birthday.day,
-                    birthday__month=object.birthday.month,
-                ),
-                many=True,
-            ).data
-        else:
-            return CustomResponse.bad_request(message="Unknown landing page type")
-
-        if (
-            hasattr(object, "from_date")
-            and hasattr(object, "end_date")
-            and not isinstance(object, Event)
-        ):
-            obj["len"] = (object.end_date - object.from_date).days + 1
-            obj["date"] = object.from_date
-        response.append(obj)
+    for holiday in public_holidays:
+        holiday_data = wrap_holiday_request(holiday)
+        response.append(holiday_data)
 
     return response
diff --git a/server/cshr/services/meetings.py b/server/cshr/services/meetings.py
index e6df87834..d182db85d 100644
--- a/server/cshr/services/meetings.py
+++ b/server/cshr/services/meetings.py
@@ -1,9 +1,8 @@
 """This file contains everything related to the Meetings model."""
 from cshr.models.meetings import Meetings
-from typing import Any, Dict, List
+from typing import List
 
 from cshr.models.users import User
-from cshr.serializers.meetings import MeetingsSerializer
 
 
 def get_meeting_by_id(id: str) -> Meetings:
@@ -32,30 +31,3 @@ def filter_meetings_by_month_and_year(user: User, month: str, year: str) -> Meet
 def filter_meetings_by_day(year: int, month: int, day: int) -> List[Meetings]:
     """Filter all users by birthdates"""
     return Meetings.objects.filter(date__year=year, date__month=month, date__day=day)
-
-
-def send_meeting_to_calendar(meeting: Meetings) -> Dict[str, Any]:
-    from cshr.services.landing_page import (
-        LandingPageClassNameEnum,
-        LandingPageTypeEnum,
-    )
-
-    """
-    Takes the standerd meeting, then update it with calendar values.
-        calendar pattern:
-            - {
-                "title": str(meeting),
-                "date": date(from_date),
-                "len": int(len(end_date - from_date)),
-                "className": str(--task-warning),
-                "eventName": str(meeting)
-            }
-    """
-    response: Dict(str, Any) = {}
-    response["title"] = LandingPageTypeEnum.MEETING.value
-    response["className"] = LandingPageClassNameEnum.MEETING.value
-    response["eventName"] = LandingPageTypeEnum.MEETING.value
-    response["meeting"] = [MeetingsSerializer(meeting).data]
-    response["len"] = 1
-    response["date"] = meeting.date
-    return response
diff --git a/server/cshr/services/users.py b/server/cshr/services/users.py
index 6685b8603..6f2e552ab 100644
--- a/server/cshr/services/users.py
+++ b/server/cshr/services/users.py
@@ -62,7 +62,7 @@ def get_user_type_by_id(id: str) -> User:
         return None
 
 
-def filter_users_by_berithday_month(month: str) -> User:
+def filter_users_by_birth_month(month: str) -> User:
     """Filter users based on birthdayes."""
     users: List[User] = User.objects.filter(birthday__month=month)
     return users
@@ -102,7 +102,7 @@ def get_admin_office_users(admin: User) -> User:
     )
 
 
-def get_or_create_skill_by_name(name: str) -> UserSkills or bool:
+def get_or_create_skill_by_name(name: str) -> UserSkills or bool: # type: ignore
     """Return a skill by name"""
     return UserSkills.objects.get_or_create(name=name.lower())
 
diff --git a/server/cshr/services/vacations.py b/server/cshr/services/vacations.py
index 894f9ba12..7320badba 100644
--- a/server/cshr/services/vacations.py
+++ b/server/cshr/services/vacations.py
@@ -3,9 +3,7 @@
 from cshr.models.users import User
 from cshr.models.vacations import Vacation, VacationBalance
 from django.db.models import Q
-from typing import Any, Dict, List
-
-from cshr.serializers.vacations import LandingPageVacationsSerializer
+from typing import List
 
 
 def filter_vacations_by_month_and_year(month: str, year: str) -> Vacation:
@@ -16,12 +14,10 @@ def filter_vacations_by_month_and_year(month: str, year: str) -> Vacation:
         Q(
             from_date__month=month,
             from_date__year=year,
-            status__in=[STATUS_CHOICES.PENDING, STATUS_CHOICES.APPROVED],
         )
         | Q(
             end_date__month=month,
             end_date__year=year,
-            status__in=[STATUS_CHOICES.PENDING, STATUS_CHOICES.APPROVED],
         )
     )
     return vacations
@@ -90,30 +86,3 @@ def filter_user_vacations_by_pending_status(user: User) -> Vacation:
 def filter_user_vacations(user: User) -> Vacation:
     """Return all vacations that has pending status and related to user"""
     return Vacation.objects.filter(applying_user=user).order_by("created_at")
-
-
-def send_vacation_to_calendar(vacation: Vacation) -> Dict[str, Any]:
-    from cshr.services.landing_page import (
-        LandingPageClassNameEnum,
-        LandingPageTypeEnum,
-    )
-
-    """
-    Takes the standerd vacation, then update it with calendar values.
-        calendar pattern:
-            - {
-                "title": str(Vacation),
-                "date": date(from_date),
-                "len": int(len(end_date - from_date)),
-                "className": str(--task-warning),
-                "eventName": str(Vacation)
-            }
-    """
-    response: Dict(str, Any) = {}
-    response["title"] = LandingPageTypeEnum.VACATION.value
-    response["className"] = LandingPageClassNameEnum.VACATION.value
-    response["eventName"] = LandingPageTypeEnum.VACATION.value
-    response["vacation"] = [LandingPageVacationsSerializer(vacation).data]
-    response["len"] = (vacation.end_date - vacation.from_date).days + 1
-    response["date"] = vacation.from_date
-    return response
diff --git a/server/cshr/utils/wrappers.py b/server/cshr/utils/wrappers.py
new file mode 100644
index 000000000..8bfa261b9
--- /dev/null
+++ b/server/cshr/utils/wrappers.py
@@ -0,0 +1,63 @@
+import datetime
+from cshr.models.users import User
+from cshr.models.vacations import Vacation, PublicHoliday
+from cshr.models.meetings import Meetings
+from cshr.models.event import Event
+from cshr.serializers.event import EventSerializer
+from cshr.serializers.public_holidays import PublicHolidaySerializer
+from cshr.serializers.users import BaseUserSerializer
+from cshr.serializers.vacations import LandingPageVacationsSerializer
+from cshr.serializers.meetings import MeetingsSerializer
+from enum import Enum
+
+
+class LandingPageTypeEnum(Enum):
+  VACATION = "vacation"
+  PUBLIC_HOLIDAY = "holiday"
+  BIRTHDAY = "birthday"
+  MEETING = "meeting"
+  EVENT = "event"
+
+
+"""
+Wrap the vacation request with [type: string] field, to be ready to be sent to the calendar as the `type` field is required there.
+"""
+def wrap_vacation_request(vacation: Vacation) -> LandingPageVacationsSerializer : # type: ignore
+  vacation_data = LandingPageVacationsSerializer(vacation).data
+  vacation_data["type"] = LandingPageTypeEnum.VACATION.value
+  vacation_data["applying_user_full_name"] = vacation.applying_user.full_name
+  return vacation_data
+
+"""
+Wrap the meeting request with [type: string] field, to be ready to be sent to the calendar as the `type` field is required there.
+"""
+def wrap_meeting_request(meeting: Meetings) -> MeetingsSerializer : # type: ignore
+  meeting_data = MeetingsSerializer(meeting).data
+  meeting_data["type"] = LandingPageTypeEnum.MEETING.value
+  return meeting_data
+
+"""
+Wrap the event request with [type: string] field, to be ready to be sent to the calendar as the `type` field is required there.
+"""
+def wrap_event_request(event: Event) -> EventSerializer : # type: ignore
+  event_data = EventSerializer(event).data
+  event_data["type"] = LandingPageTypeEnum.EVENT.value
+  return event_data
+
+"""
+Wrap the event request with [type: string] field, to be ready to be sent to the calendar as the `type` field is required there.
+"""
+def wrap_holiday_request(holiday: PublicHoliday) -> PublicHolidaySerializer : # type: ignore
+  holiday_data = PublicHolidaySerializer(holiday).data
+  holiday_data["type"] = LandingPageTypeEnum.PUBLIC_HOLIDAY.value
+  return holiday_data
+
+"""
+Wrap the birthday request with [type: string] field, to be ready to be sent to the calendar as the `type` field is required there.
+"""
+def wrap_birthday_event(birthday: User) -> BaseUserSerializer : # type: ignore
+  today = datetime.datetime.now()
+  birthday_data = BaseUserSerializer(birthday).data
+  birthday_data["type"] = LandingPageTypeEnum.BIRTHDAY.value
+  birthday_data["date"] = f"{today.year}-{birthday.birthday.month}-{birthday.birthday.day}"
+  return birthday_data
diff --git a/server/cshr/views/event.py b/server/cshr/views/event.py
index a3eeba810..2fbfeb598 100644
--- a/server/cshr/views/event.py
+++ b/server/cshr/views/event.py
@@ -6,12 +6,12 @@
     filter_events_by_day,
     get_all_events,
     get_event_by_id,
-    send_event_to_calendar,
 )
 from rest_framework.generics import GenericAPIView, ListAPIView
 from rest_framework.request import Request
 from rest_framework.response import Response
 from cshr.api.response import CustomResponse
+from cshr.utils.wrappers import wrap_event_request
 
 
 class BaseEventsAPIView(ListAPIView, GenericAPIView):
@@ -23,7 +23,7 @@ def post(self, request: Request) -> Response:
         serializer = self.get_serializer(data=request.data)
         if serializer.is_valid():
             saved = serializer.save()
-            response_date: Dict = send_event_to_calendar(saved)
+            response_date: Dict = wrap_event_request(saved)
             return CustomResponse.success(
                 data=response_date,
                 message="event is created successfully",
diff --git a/server/cshr/views/meetings.py b/server/cshr/views/meetings.py
index 770bfcff2..1f439e4db 100644
--- a/server/cshr/views/meetings.py
+++ b/server/cshr/views/meetings.py
@@ -7,12 +7,12 @@
     filter_meetings_by_day,
     get_all_meetings,
     get_meeting_by_id,
-    send_meeting_to_calendar,
 )
 from rest_framework.generics import GenericAPIView, ListAPIView
 from rest_framework.request import Request
 from rest_framework.response import Response
 from cshr.api.response import CustomResponse
+from cshr.utils.wrappers import wrap_meeting_request
 
 
 class BaseMeetingsApiView(ListAPIView, GenericAPIView):
@@ -31,8 +31,10 @@ def post(self, request: Request) -> Response:
                 return CustomResponse.bad_request(
                     message='Ensure that the "host_user" field is included in the payload.'
                 )
-            saved = serializer.save(host_user=current_user, invited_users=[])
-            response_date: Dict = send_meeting_to_calendar(saved)
+
+            event = serializer.save(host_user=current_user, invited_users=[])
+
+            response_date: Dict = wrap_meeting_request(event)
             return CustomResponse.success(
                 data=response_date,
                 message="meeting is created successfully",
diff --git a/server/cshr/views/vacations.py b/server/cshr/views/vacations.py
index 3b55882ee..72b41b0a7 100644
--- a/server/cshr/views/vacations.py
+++ b/server/cshr/views/vacations.py
@@ -30,7 +30,6 @@
     filter_balances_by_users,
     get_vacation_by_id,
     get_all_vacations,
-    send_vacation_to_calendar,
 )
 from rest_framework.generics import GenericAPIView, ListAPIView
 from rest_framework.request import Request
@@ -61,6 +60,7 @@
     set_notification_request_redis,
     set_notification_reply_redis,
 )
+from cshr.utils.wrappers import wrap_vacation_request
 
 
 class GetAdminVacationBalanceApiView(GenericAPIView):
@@ -250,55 +250,55 @@ def post(self, request: Request) -> Response:
                         ],
                     },
                 )
+            else:
+                curr_balance = getattr(user_reason_balance, reason)
 
-            curr_balance = getattr(user_reason_balance, reason)
+                pending_vacations = Vacation.objects.filter(
+                    status=STATUS_CHOICES.PENDING,
+                    applying_user=applying_user,
+                    reason=reason,
+                ).values_list("actual_days", flat=True)
 
-            pending_vacations = Vacation.objects.filter(
-                status=STATUS_CHOICES.PENDING,
-                applying_user=applying_user,
-                reason=reason,
-            ).values_list("actual_days", flat=True)
+                chcked_balance = curr_balance - sum(pending_vacations)
 
-            chcked_balance = curr_balance - sum(pending_vacations)
+                if curr_balance < vacation_days:
+                    return CustomResponse.bad_request(
+                        message=f"You only have {curr_balance} days left of reason '{reason.capitalize().replace('_', ' ')}'"
+                    )
 
-            if curr_balance < vacation_days:
-                return CustomResponse.bad_request(
-                    message=f"You only have {curr_balance} days left of reason '{reason.capitalize().replace('_', ' ')}'"
-                )
+                if chcked_balance < vacation_days:
+                    return CustomResponse.bad_request(
+                        message=f"You have an additional pending request that deducts {sum(pending_vacations)} days from your balance even though the current balance for the '{reason.capitalize().replace('_', ' ')}' category is only {curr_balance} days."
+                    )
 
-            if chcked_balance < vacation_days:
-                return CustomResponse.bad_request(
-                    message=f"You have an additional pending request that deducts {sum(pending_vacations)} days from your balance even though the current balance for the '{reason.capitalize().replace('_', ' ')}' category is only {curr_balance} days."
+                vacation = serializer.save(
+                    type=TYPE_CHOICES.VACATIONS,
+                    status=STATUS_CHOICES.PENDING,
+                    applying_user=applying_user,
+                    actual_days=vacation_days,
                 )
 
-            saved = serializer.save(
-                type=TYPE_CHOICES.VACATIONS,
-                status=STATUS_CHOICES.PENDING,
-                applying_user=applying_user,
-                actual_days=vacation_days,
-            )
-
-            # msg = get_vacation_request_email_template(
-            #     request.user, serializer.data, saved.id
-            # )
+                # msg = get_vacation_request_email_template(
+                #     request.user, serializer.data, vacation.id
+                # )
 
-            try:
-                ping_redis()
-            except:
-                return http_ensure_redis_error()
+                try:
+                    ping_redis()
+                except:
+                    return http_ensure_redis_error()
 
-            set_notification_request_redis(serializer.data)
+                set_notification_request_redis(serializer.data)
 
-            # sent = send_email_for_request(request.user.id, msg, "Vacation request")
-            # if not sent:
-            #     return CustomResponse.bad_request(message="Error in sending email, can not sent email with this request.")
+                # sent = send_email_for_request(request.user.id, msg, "Vacation request")
+                # if not sent:
+                #     return CustomResponse.bad_request(message="Error in sending email, can not sent email with this request.")
 
-            response_data: Dict = send_vacation_to_calendar(saved)
-            return CustomResponse.success(
-                status_code=201,
-                message="The vacation has been posted successfully.",
-                data=response_data,
-            )
+                vacation_data: Dict = wrap_vacation_request(vacation)
+                return CustomResponse.success(
+                    status_code=201,
+                    message="The vacation has been posted successfully.",
+                    data=vacation_data,
+                )
         return CustomResponse.bad_request(error=serializer.errors)
 
     def get_queryset(self) -> Response:
@@ -330,8 +330,8 @@ def delete(self, request: Request, id, format=None) -> Response:
         vacation = get_vacation_by_id(id=id)
         if vacation is not None:
             vacation.delete()
-            return CustomResponse.success(message="Hr Letter deleted", status_code=204)
-        return CustomResponse.not_found(message="Hr Letter not found", status_code=404)
+            return CustomResponse.success(message="The vacation has been deleted successfully.", status_code=204)
+        return CustomResponse.not_found(message="The vacation is not found.", status_code=404)
 
 
 class VacationUserApiView(ListAPIView, GenericAPIView):
@@ -879,6 +879,6 @@ def post(self, request: Request, user_id: str) -> Response:
             saved_vacation.save()
 
             # set_notification_request_redis(serializer.data)
-            response_data: Dict = send_vacation_to_calendar(saved_vacation)
+            response_data: Dict = wrap_vacation_request(saved_vacation)
             return CustomResponse.success(message=message, data=response_data)
         return CustomResponse.bad_request(message="Please make sure that you entered a valid data.", error=serializer.errors)
\ No newline at end of file