diff --git a/client/.env b/client/.env
index 7d7b7b0a..c41e9942 100644
--- a/client/.env
+++ b/client/.env
@@ -1,5 +1,5 @@
 # Client Related
-VITE_TITLE="CSHR"
+VITE_TITLE="Codescalers HR management system"
 VITE_FAVICON="https://placehold.co/32/steelblue/white?text=CS"
 VITE_LOGO="https://placehold.co/128/steelblue/white?text=CS"
 
diff --git a/client/package.json b/client/package.json
index e7c8c681..aafe65df 100644
--- a/client/package.json
+++ b/client/package.json
@@ -14,10 +14,17 @@
     "format": "prettier --write src/"
   },
   "dependencies": {
+    "@fullcalendar/core": "^6.1.9",
+    "@fullcalendar/daygrid": "^6.1.9",
+    "@fullcalendar/interaction": "^6.1.9",
+    "@fullcalendar/list": "^6.1.9",
+    "@fullcalendar/timegrid": "^6.1.9",
+    "@fullcalendar/vue3": "^6.1.9",
     "@mdi/font": "^7.4.47",
     "@vueuse/core": "^10.7.1",
     "@vueuse/router": "^10.7.1",
     "axios": "^1.6.3",
+    "calendar_options": "link:@fullcalendar/core/calendar_options",
     "moment": "^2.30.1",
     "pinia": "^2.1.7",
     "vue": "^3.3.11",
diff --git a/client/pnpm-lock.yaml b/client/pnpm-lock.yaml
index 1523484b..8a343eca 100644
--- a/client/pnpm-lock.yaml
+++ b/client/pnpm-lock.yaml
@@ -5,6 +5,24 @@ settings:
   excludeLinksFromLockfile: false
 
 dependencies:
+  '@fullcalendar/core':
+    specifier: ^6.1.9
+    version: 6.1.10
+  '@fullcalendar/daygrid':
+    specifier: ^6.1.9
+    version: 6.1.10(@fullcalendar/core@6.1.10)
+  '@fullcalendar/interaction':
+    specifier: ^6.1.9
+    version: 6.1.10(@fullcalendar/core@6.1.10)
+  '@fullcalendar/list':
+    specifier: ^6.1.9
+    version: 6.1.10(@fullcalendar/core@6.1.10)
+  '@fullcalendar/timegrid':
+    specifier: ^6.1.9
+    version: 6.1.10(@fullcalendar/core@6.1.10)
+  '@fullcalendar/vue3':
+    specifier: ^6.1.9
+    version: 6.1.10(@fullcalendar/core@6.1.10)(vue@3.4.3)
   '@mdi/font':
     specifier: ^7.4.47
     version: 7.4.47
@@ -17,6 +35,9 @@ dependencies:
   axios:
     specifier: ^1.6.3
     version: 1.6.3
+  calendar_options:
+    specifier: link:@fullcalendar/core/calendar_options
+    version: link:@fullcalendar/core/calendar_options
   moment:
     specifier: ^2.30.1
     version: 2.30.1
@@ -374,6 +395,55 @@ packages:
     engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0, npm: '>=6.14.13'}
     dev: true
 
+  /@fullcalendar/core@6.1.10:
+    resolution: {integrity: sha512-oTXGJSAGpCf1oY+CKp5qYjMHkJCPBkJ3SHitl63n8Q6xKeiwQ4EF6Au451euUovREwJpLmD1AyZrCnWmtB9AVg==}
+    dependencies:
+      preact: 10.12.1
+    dev: false
+
+  /@fullcalendar/daygrid@6.1.10(@fullcalendar/core@6.1.10):
+    resolution: {integrity: sha512-Z4GRm1IyHKgxXFTWGcEI0nTsvYOIkpE0aMt3/o3ER2SZkF+hfwcDFhtj0c9+WhMjXFIWYeoTnA9rUOY7Zl/nxA==}
+    peerDependencies:
+      '@fullcalendar/core': ~6.1.10
+    dependencies:
+      '@fullcalendar/core': 6.1.10
+    dev: false
+
+  /@fullcalendar/interaction@6.1.10(@fullcalendar/core@6.1.10):
+    resolution: {integrity: sha512-aZRlwCpmDasq2RNeWV0ub20Uevare9Cb6iMlxCacx0fhOC14H28G9d1FsduJIecInL84SPGwt5ItqAYMsWv7zw==}
+    peerDependencies:
+      '@fullcalendar/core': ~6.1.10
+    dependencies:
+      '@fullcalendar/core': 6.1.10
+    dev: false
+
+  /@fullcalendar/list@6.1.10(@fullcalendar/core@6.1.10):
+    resolution: {integrity: sha512-WE4vuSUCzol4tJd0ZP0cNxeyRPaZcsVVYs2I3qdf3OZQkXwDCdSyWEz0Hluf+XZWcZXt21aEYKlxRjwUpQcf4Q==}
+    peerDependencies:
+      '@fullcalendar/core': ~6.1.10
+    dependencies:
+      '@fullcalendar/core': 6.1.10
+    dev: false
+
+  /@fullcalendar/timegrid@6.1.10(@fullcalendar/core@6.1.10):
+    resolution: {integrity: sha512-hFKyQXJaPbNyq1reZmvkCmM64O99krHoIcJAbDS+dntCm3FzZUcDtAcRKIbMiantHrezCG/1MEYk3m9e3aKvIQ==}
+    peerDependencies:
+      '@fullcalendar/core': ~6.1.10
+    dependencies:
+      '@fullcalendar/core': 6.1.10
+      '@fullcalendar/daygrid': 6.1.10(@fullcalendar/core@6.1.10)
+    dev: false
+
+  /@fullcalendar/vue3@6.1.10(@fullcalendar/core@6.1.10)(vue@3.4.3):
+    resolution: {integrity: sha512-YMYBQx0TlWNuN4G6ra2dkf5cCF5aVi/2zDLGLvLqe2Nk2o7uNbTkrCSG40061OepWQlJv+hYqm1JukLRmyqi4Q==}
+    peerDependencies:
+      '@fullcalendar/core': ~6.1.10
+      vue: ^3.0.11
+    dependencies:
+      '@fullcalendar/core': 6.1.10
+      vue: 3.4.3(typescript@5.3.3)
+    dev: false
+
   /@humanwhocodes/config-array@0.11.13:
     resolution: {integrity: sha512-JSBDMiDKSzQVngfRjOdFXgFfklaXI4K9nLF49Auh21lmBWRLIK3+xTErTWD4KU54pb6coM6ESE7Awz/FNU3zgQ==}
     engines: {node: '>=10.10.0'}
@@ -2361,6 +2431,10 @@ packages:
       picocolors: 1.0.0
       source-map-js: 1.0.2
 
+  /preact@10.12.1:
+    resolution: {integrity: sha512-l8386ixSsBdbreOAkqtrwqHwdvR35ID8c3rKPa8lCWuO86dBi32QWHV4vfsZK1utLLFMvw+Z5Ad4XLkZzchscg==}
+    dev: false
+
   /prelude-ls@1.2.1:
     resolution: {integrity: sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==}
     engines: {node: '>= 0.8.0'}
diff --git a/client/src/clients/api/base.ts b/client/src/clients/api/base.ts
index 545ed7a7..05926723 100644
--- a/client/src/clients/api/base.ts
+++ b/client/src/clients/api/base.ts
@@ -90,11 +90,25 @@ export abstract class ApiClientBase {
     if (access_token && refresh_token && !isValidToken(access_token) && isValidToken(refresh_token)) {
       await ApiClientBase.$api.auth.refresh({ refresh: refresh_token })
     }
+    if (err && !ApiClientBase.USER && access_token !== null && refresh_token !== null) {
+      const user = await ApiClientBase.$api.myprofile.getUser();
+      ApiClientBase.USER = {...user, access_token, refresh_token}
+    }
+
+    if (err) {
+      
+      options.disableNotify !== true && ApiClientBase.$notifier?.notify({
+        type: 'error',
+        description: options.normalizeError?.(err, res) ?? ApiClientBase.normalizeError(err) ?? err
+      })
+
+      panic(err)
+    }
 
     if (
       (res.config.method === 'post' || res.config.method === 'put') &&
       typeof res.data === 'object' &&
-      'message' in (res.data || {})
+      'message' in (res.data || {}) && options.disableNotify !== true 
     ) {
       ApiClientBase.$notifier?.notify({
         type: 'success',
diff --git a/client/src/clients/api/event.ts b/client/src/clients/api/event.ts
index 99c933be..3a757a1c 100644
--- a/client/src/clients/api/event.ts
+++ b/client/src/clients/api/event.ts
@@ -12,9 +12,22 @@ export class EventApi extends ApiClientBase {
     this.exact = new EventExactApi(options, this.path)
   }
 
-  async list() {}
+ async list(query?: any) {
+    return this.unwrap(this.$http.get<Api.Returns.List<Api.Inputs.Event>>(this.getUrl('', query)), {
+      transform: (d) => d.results
+    })
+  }
+
+  async create(input: Api.Inputs.Event) {
+    ApiClientBase.assertUser()
+    const event = await this.unwrap(
+      this.$http.post<Api.Returns.Event>(this.getUrl(''), input),
+      { transform: (d) => d.results }
+    )
+
+    return event
+  }
 
-  async create() {}
 
   async read(id: number) {}
 
diff --git a/client/src/clients/api/home.ts b/client/src/clients/api/home.ts
index 7c3ff26a..90afdfac 100644
--- a/client/src/clients/api/home.ts
+++ b/client/src/clients/api/home.ts
@@ -1,7 +1,14 @@
+import type { Api } from '@/types'
 import { ApiClientBase } from './base'
 
 export class HomeApi extends ApiClientBase {
   protected readonly path = '/home'
 
-  async list() {}
+  async list(query?: any) {
+    return this.unwrap(this.$http.get<Api.Returns.List<Api.Home>>(this.getUrl('', query)), {
+      transform: (d) => d.results
+    })
+  }
+
+ 
 }
diff --git a/client/src/clients/api/meeting.ts b/client/src/clients/api/meeting.ts
index d6593ae2..595b9432 100644
--- a/client/src/clients/api/meeting.ts
+++ b/client/src/clients/api/meeting.ts
@@ -12,9 +12,20 @@ export class MeetingApi extends ApiClientBase {
     this.exact = new MeetingExactApi(options)
   }
 
-  async list() {}
-
-  async create() {}
+  list(query?: any) {
+    return this.unwrap(this.$http.get<Api.Returns.List<Api.Meetings>>(this.getUrl('', query)), {
+      transform: (d) => d.results
+    })
+  }
+  async create(input: Api.Inputs.Meeting) {
+    ApiClientBase.assertUser()
+    const event = await this.unwrap(
+      this.$http.post<Api.Returns.Meeting>(this.getUrl(''),input),
+      { transform: (d) => d.results }
+    )
+
+    return event
+  }
 
   async read(id: number) {}
 
diff --git a/client/src/clients/api/users.ts b/client/src/clients/api/users.ts
index c2b9d7a5..5294c121 100644
--- a/client/src/clients/api/users.ts
+++ b/client/src/clients/api/users.ts
@@ -33,7 +33,6 @@ export class UsersApi extends ApiClientBase {
       ...options
     })
   }
-
   read(id: number) {
     return this.unwrap(this.$http.get<Api.Returns.MsgRes<Api.User>>(this.getUrl(`/${id}`)), {
       transform: (d) => d.results
diff --git a/client/src/clients/api/vacations.ts b/client/src/clients/api/vacations.ts
index 382f6f6a..9c96d4a5 100644
--- a/client/src/clients/api/vacations.ts
+++ b/client/src/clients/api/vacations.ts
@@ -36,27 +36,52 @@ export class VacationsApi extends ApiClientBase {
     )
     return userBalance
   }
-  async list() {}
+  async list(query?: any) {
+    return this.unwrap(this.$http.get<Api.Returns.List<Api.Vacation>>(this.getUrl('', query)), {
+      transform: (d) => d.results
+    })
+  }
+  // async list() {}
 
-  async create() {}
+  async create(input: Api.Inputs.Leave) {
+    ApiClientBase.assertUser()
+    const vacation = await this.unwrap(
+      this.$http.post<Api.Returns.LeaveRequest>(this.getUrl(''), input),
+      { transform: (d) => d.results }
+    )
 
+    return vacation
+  }
   async read(id: number) {}
 
-  async delete(id: number) {}
+ 
+  async delete(id: number) {
+    return this.unwrap(this.$http.delete<any>(this.getUrl(`/${id}`)), {
+      transform: (d) => d.results
+    })
+  }
 }
 
 class VacationsApproveApi extends ApiClientBase {
   protected readonly path = '/approve'
 
-  async update(id: number) {}
-}
+  async update(id: any) {
+    return this.unwrap(this.$http.put<any>(this.getUrl(`/${id}`)), {
+      transform: (d) => d.results
+    })
+  }}
 
 class VacationsRejectApi extends ApiClientBase {
   protected readonly path = '/reject'
 
   async read(id: number) {}
+  
 
-  async update(id: number) {}
+  async update(id: number) {
+    return this.unwrap(this.$http.put<any>(this.getUrl(`/${id}`)), {
+      transform: (d) => d.results
+    })
+  }
 }
 
 class VacationsBalanceApi extends ApiClientBase {
@@ -95,7 +120,16 @@ class VacationsBalanceAdjustmentApi extends ApiClientBase {
 class VacationsCalculateApi extends ApiClientBase {
   protected readonly path = '/calculate'
 
-  async list() {}
+
+
+  async list(query: Api.Inputs.ActualDays) {
+    ApiClientBase.assertUser()
+    const calculation = await this.unwrap(
+      this.$http.get<any>(this.getUrl('', query)),
+      { transform: (d) => d.results }
+    )
+    return calculation
+  }
 }
 
 class VacationsCommentApi extends ApiClientBase {
@@ -109,7 +143,16 @@ class VacationsEditApi extends ApiClientBase {
 
   async read(id: number) {}
 
-  async update(id: number) {}
+  async update(id: number, input: Api.Inputs.Leave) {
+    ApiClientBase.assertUser()
+    const vacation = await this.unwrap(
+      this.$http.put<Api.Returns.LeaveRequest>(this.getUrl(`/${id}`), input),
+      { transform: (d) => d.results }
+    )
+
+    return vacation
+  }
+  // async update(id: number) {}
 }
 
 class VacationsGetAdminBalanceApi extends ApiClientBase {
@@ -140,5 +183,10 @@ class VacationsPostAdminBalanceApi extends ApiClientBase {
 class VacationsUserApi extends ApiClientBase {
   protected readonly path = '/user'
 
-  async list() {}
+  async list(query?: any) {
+    return this.unwrap(this.$http.get<Api.Returns.List<Api.Vacation>>(this.getUrl('', query)), {
+      transform: (d) => d.results
+    })
+  }
+
 }
diff --git a/client/src/components/CshrToolbar.vue b/client/src/components/CshrToolbar.vue
index de981177..cf32cdaa 100644
--- a/client/src/components/CshrToolbar.vue
+++ b/client/src/components/CshrToolbar.vue
@@ -45,16 +45,7 @@
       <template #activator="{ props }">
         <div class="d-flex justify-center align-center mx-2">
           <VProgressCircular indeterminate v-if="user.isLoading.value" />
-          <VAvatar
-            v-else-if="user.state.value"
-            v-ripple
-            v-bind="props"
-            color="primary"
-            class="border"
-            :style="{ cursor: 'pointer' }"
-          >
-            <span class="text-h5 text-uppercase" v-text="user.state.value?.full_name[0] ?? '?'" />
-          </VAvatar>
+          <profileImage v-else-if="user.state.value" :with-link="true" :user="user.state.value" v-bind="props" />
         </div>
       </template>
 
@@ -79,10 +70,11 @@ import { useApi } from '@/hooks'
 import { getStatusColor } from '@/utils'
 import type { Api } from '@/types'
 import NotificationDetailsDialog from './NotificationDetailsDialog.vue'
+import profileImage from './profileImage.vue'
 
 export default {
   name: 'CshrToolbar',
-  components: { NotificationDetailsDialog },
+  components: { NotificationDetailsDialog, profileImage },
   setup() {
     const $api = useApi()
     const user = useAsyncState(() => $api.myprofile.getUser(), null)
diff --git a/client/src/components/calender.vue b/client/src/components/calender.vue
new file mode 100644
index 00000000..c507dda9
--- /dev/null
+++ b/client/src/components/calender.vue
@@ -0,0 +1,400 @@
+<!-- eslint-disable vue/no-async-in-computed-properties -->
+<template>
+  <v-row>
+    <v-col cols="2">
+      <v-checkbox v-model="selected.meetings" label="Meetings" />
+    </v-col>
+    <v-col cols="2">
+      <v-checkbox v-model="selected.events" label="Events" />
+    </v-col>
+    <v-col cols="2">
+      <v-checkbox v-model="selected.vacations" label="Vacations" />
+    </v-col>
+    <v-col cols="2">
+      <v-checkbox v-model="selected.holidays" label="Holidays" />
+    </v-col>
+    <v-col cols="2">
+      <v-checkbox v-model="selected.birthdays" label="Birthdays" />
+    </v-col>
+  </v-row>
+  <div class="ma-7 pa-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,
+  CalendarOptions
+} from '@fullcalendar/core/index.js'
+import { useAsyncState } from '@vueuse/core'
+import {
+  normalizeEvent,
+  normalizeVacation,
+  normalizeMeeting,
+  normalizeHoliday,
+  normalizedBirthday
+} from '@/utils'
+
+export default {
+  name: 'calenderCshr',
+  components: {
+    FullCalendar,
+    calenderRequest,
+    meetingCard,
+    eventCard,
+    vacationCard,
+    holidayCard,
+    birthdayCard
+  },
+
+  setup() {
+    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[]>([])
+
+    function filteHome(data: any) {
+      data.forEach((home: Api.Home) => {
+        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') {
+          home.vacation.forEach(async (vacation: Api.Vacation) => {
+            let v: Api.Vacation
+            v = vacation
+            const user = await $api.users.getuser(vacation.applying_user.id, {
+              disableNotify: true
+            })
+            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
+        const user = await $api.users.getuser(vacation.applying_user.id, { disableNotify: true })
+        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
+      const user = await $api.users.getuser(data.applying_user, { disableNotify: true })
+      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>
diff --git a/client/src/components/calenderRequest.vue b/client/src/components/calenderRequest.vue
new file mode 100644
index 00000000..834ede66
--- /dev/null
+++ b/client/src/components/calenderRequest.vue
@@ -0,0 +1,79 @@
+
+<template>
+  <v-card elevation="0" variant="outlined" color="primary" class="pa-4">
+    <div class="d-flex flex-row-reverse">
+      <v-icon class="me-2" @click.stop="$emit('close-dialog', false)"> mdi-close </v-icon>
+    </div>
+    <div class="d-flex justify-center">
+      <v-tabs v-model="tab" color="primary">
+        <v-tab v-for="tab in tabs" :key="tab" :value="tab"> {{ tab }}</v-tab>
+      </v-tabs>
+    </div>
+
+
+    <v-window v-model="tab">
+      <v-window-item value="Leave">
+        <leaveRequest :dates="dates" @create-event="createLeave($event)"></leaveRequest>
+      </v-window-item>
+
+      <v-window-item value="Meeting">
+        <meetingRequest :dates="dates" @create-event="createMeeting($event)" />
+      </v-window-item>
+
+      <v-window-item value="Event">
+        <eventRequest :dates="dates" @create-event="createEvent($event)" />
+      </v-window-item>
+    </v-window>
+
+
+  </v-card>
+</template>
+<script lang="ts">
+import { ref } from 'vue';
+import leaveRequest from '@/components/requests/leaveRequest.vue';
+import eventRequest from './requests/eventRequest.vue';
+import meetingRequest from './requests/meetingRequest.vue';
+
+
+export default {
+  name: "calenderRequest",
+  props: ["dates"],
+  components: {
+    leaveRequest,
+    eventRequest,
+    meetingRequest,
+  },
+  emits: {
+    'close-dialog': (item: Boolean) => item,
+    'create-vacation': (item: any) => item,
+    'create-meeting': (item: any) => item,
+    'create-event': (item: any) => item,
+  },
+  setup(props, ctx) {
+    const tabs = ["Leave", "Meeting", "Event"];
+    const tab = ref<String>("")
+    async function createLeave(data: any) {
+      ctx.emit("create-vacation", data)
+    }
+
+
+    async function createMeeting(data: any) {
+      ctx.emit("create-meeting", data)
+    }
+    async function createEvent(data: any) {
+      ctx.emit("create-event", data)
+    }
+
+    return {
+      tab,
+      tabs,
+      leaveRequest,
+      eventRequest,
+      meetingRequest,
+      createEvent,
+      createLeave,
+      createMeeting,
+    };
+  },
+};
+</script>
diff --git a/client/src/components/cards/birthdayCard.vue b/client/src/components/cards/birthdayCard.vue
new file mode 100644
index 00000000..989556c5
--- /dev/null
+++ b/client/src/components/cards/birthdayCard.vue
@@ -0,0 +1,73 @@
+<template>
+  <v-card elevation="0" variant="outlined" color="white" class="pa-4 bg-balloons">
+    <div class="d-flex flex-row-reverse">
+      <v-icon class="me-2" @click.stop="$emit('close-dialog', false)"> mdi-close </v-icon>
+    </div>
+    <v-card-title class="text-center my-2 mb-5">
+      <h3>
+        <strong class="text-info">{{ firstname }}'s</strong>
+        Birthday Today! 🎉🎂
+      </h3>
+      <!-- Wish a happy birthday to </h3> -->
+    </v-card-title>
+
+    <profileImage :with-link="true" v-show="birthday" :user="birthday" class="my-2" />
+
+    <div class="w-100 text-center mt-6">
+      Let's make sure to spread the birthday cheer and show {{ firstname }} how much
+      {{ birthday.gender === 'Female' ? 'she' : 'he' }} means to us.
+      <br />
+      <strong class="text-warning">🎉🎂 Happy Birthday, {{ firstname }}!🎂🎉</strong>
+    </div>
+
+    <v-card elevation="0" variant="outlined" class="pa-4 mt-5">
+      <v-row class="text-center">
+        <v-col cols="6">
+          <b>Name</b>
+        </v-col>
+        <v-col cols="6">
+          {{ birthday.full_name }}
+        </v-col>
+      </v-row>
+      <v-row class="text-center">
+        <v-col cols="6">
+          <b>Team</b>
+        </v-col>
+        <v-col cols="6">
+          {{ birthday.team ? birthday.team : '--' }}
+        </v-col>
+      </v-row>
+      <v-row class="text-center">
+        <v-col cols="6">
+          <b>Email</b>
+        </v-col>
+        <v-col cols="6">
+          {{ birthday.email }}
+        </v-col>
+      </v-row>
+    </v-card>
+  </v-card>
+</template>
+<script lang="ts">
+import profileImage from '@/components/profileImage.vue'
+
+export default {
+  name: 'birthdayCard',
+  props: ['birthday'],
+  emits: {
+    'close-dialog': (item: Boolean) => item
+  },
+
+  components: {
+    profileImage
+  },
+
+  setup(props) {
+    const firstname = props.birthday.full_name.split(' ')[0]
+    return {
+      profileImage,
+      firstname
+    }
+  }
+}
+</script>
diff --git a/client/src/components/cards/eventCard.vue b/client/src/components/cards/eventCard.vue
new file mode 100644
index 00000000..2ddcf094
--- /dev/null
+++ b/client/src/components/cards/eventCard.vue
@@ -0,0 +1,76 @@
+<template>
+  <v-card elevation="0" variant="outlined" color="white" class="pa-4">
+    <div class="d-flex flex-row-reverse">
+      <v-icon class="me-2" @click.stop="$emit('close-dialog', false)"> mdi-close </v-icon>
+    </div>
+    <v-card-title class="text-center my-2">
+      <b>{{ event.name }}</b>
+    </v-card-title>
+    <v-card elevation="1" variant="text" class="pa-4 mb-3">
+      <v-row class="pa-2">
+        <b>Description</b>
+      </v-row>
+      <v-row class="pa-2">
+        {{ event.description ? event.description : '--' }}
+      </v-row>
+    </v-card>
+    <!-- <v-card elevation="0" variant="outlined" color="white" class="px-4"> -->
+    <v-row class="text-center mx-2 mt-2">
+      <v-col cols="3" class="mt-2 border" v-for="header in Headers" :key="header">
+        {{ header }}
+      </v-col>
+    </v-row>
+
+    <v-row class="text-center mx-2 mb-2">
+      <v-col cols="3" class="border">
+        {{ fromDate }}
+      </v-col>
+
+      <v-col cols="3" class="border">
+        {{ toDate }}
+      </v-col>
+
+      <v-col cols="3" class="border">
+        {{ fromTime }}
+      </v-col>
+
+      <v-col cols="3" class="border">
+        {{ toTime }}
+      </v-col>
+    </v-row>
+
+    <!-- </v-card> -->
+  </v-card>
+</template>
+<script lang="ts">
+import { ref } from 'vue'
+
+export default {
+  name: 'eventCard',
+  props: ['event'],
+  emits: {
+    'close-dialog': (item: Boolean) => item
+  },
+
+  setup(props) {
+    const fromDateTime = new Date(props.event.from_date)
+    const Headers = ref(['From Date', 'To Date', 'From Time', 'To Time'])
+
+    const fromDate = ref<string>(fromDateTime.toISOString().split('T')[0])
+    const fromTime = ref<string>(fromDateTime.toISOString().split('T')[1].substring(0, 8))
+
+    const toDateTime = new Date(props.event.end_date)
+
+    const toDate = ref<string>(toDateTime.toISOString().split('T')[0])
+    const toTime = ref<string>(toDateTime.toISOString().split('T')[1].substring(0, 8))
+
+    return {
+      fromDate,
+      fromTime,
+      toDate,
+      toTime,
+      Headers
+    }
+  }
+}
+</script>
diff --git a/client/src/components/cards/holidayCard.vue b/client/src/components/cards/holidayCard.vue
new file mode 100644
index 00000000..89c3fe93
--- /dev/null
+++ b/client/src/components/cards/holidayCard.vue
@@ -0,0 +1,50 @@
+<template>
+  <v-card elevation="0" variant="outlined" color="white" class="pa-4">
+    <div class="d-flex flex-row-reverse">
+      <v-icon class="me-2" @click.stop="$emit('close-dialog', false)"> mdi-close </v-icon>
+    </div>
+    <div class="d-flex expired" v-if="holiday.expired">expired</div>
+    <v-card-title class="text-center mb-5 my-2">
+      <h1 :class="`${holiday.expired ? 'text-error' : ''}`">{{ holiday.location.country }}</h1>
+    </v-card-title>
+    <hr class="mb-2" />
+    <v-card elevation="0" variant="outlined" class="pa-4 mt-2">
+      <v-row class="pa-2">
+        <p class="pa-5">
+          <b>{{ holiday.holiday_date }}</b> is a public holiday in
+          <b>{{ holiday.location.country }}</b
+          >, We hope you and your family have a peaceful and enjoyable holiday. Please be aware that
+          our office in <b>{{ holiday.location.country }}</b
+          >, will be closed on this date. Thank you!
+        </p>
+      </v-row>
+    </v-card>
+  </v-card>
+</template>
+<script lang="ts">
+export default {
+  name: 'holidayCard',
+  props: ['holiday'],
+  emits: {
+    'close-dialog': (item: Boolean) => item
+  }
+}
+</script>
+
+<style scoped>
+.expired {
+  position: absolute;
+  top: 15px;
+  left: -40px;
+  transform: rotate(-35deg);
+  background: brown;
+  padding: 4px;
+  width: 142px;
+  text-align: center;
+  margin: 0 auto;
+  justify-content: center;
+  align-items: center;
+  font-weight: 700;
+  color: black;
+}
+</style>
diff --git a/client/src/components/cards/meetingCard.vue b/client/src/components/cards/meetingCard.vue
new file mode 100644
index 00000000..56119b30
--- /dev/null
+++ b/client/src/components/cards/meetingCard.vue
@@ -0,0 +1,74 @@
+<template>
+  <v-card elevation="0" variant="outlined" color="white" class="pa-4">
+    <div class="d-flex flex-row-reverse">
+      <v-icon class="me-2" @click.stop="$emit('close-dialog', false)"> mdi-close </v-icon>
+    </div>
+    <v-card-title class="text-center my-2">
+      Meeting Created by
+      <br />
+      <b>{{ meeting.host_user.full_name }}</b>
+    </v-card-title>
+
+    <v-card elevation="0" variant="text" class="pa-4 mb-0">
+      <v-row class="text-center">
+        <v-col cols="6">
+          <b>Team</b>
+        </v-col>
+        <v-col cols="6">
+          {{ meeting.host_user.team ? meeting.host_user.team : '--' }}
+        </v-col>
+      </v-row>
+
+      <v-row class="text-center">
+        <v-col cols="6">
+          <b>Meeting Link</b>
+        </v-col>
+        <v-col cols="6">
+          <a :href="meeting.meeting_link" target="_blank"
+            ><v-icon class="me-2"> mdi-link </v-icon>Meeting Link</a
+          >
+        </v-col>
+      </v-row>
+    </v-card>
+    <v-row class="text-center mx-2 mt-2">
+      <v-col cols="6" class="mt-2 border" v-for="header in Headers" :key="header">
+        {{ header }}
+      </v-col>
+    </v-row>
+
+    <v-row class="text-center mx-2 mb-2">
+      <v-col cols="6" class="border">
+        {{ date }}
+      </v-col>
+
+      <v-col cols="6" class="border">
+        {{ time }}
+      </v-col>
+    </v-row>
+  </v-card>
+</template>
+<script lang="ts">
+import { ref } from 'vue'
+
+export default {
+  name: 'meetingCard',
+  props: ['meeting'],
+  emits: {
+    'close-dialog': (item: Boolean) => item
+  },
+
+  setup(props) {
+    const dateTime = new Date(props.meeting.date)
+    const Headers = ref(['Date', 'Time'])
+
+    const date = ref<string>(dateTime.toISOString().split('T')[0])
+    const time = ref<string>(dateTime.toISOString().split('T')[1].substring(0, 8))
+
+    return {
+      date,
+      time,
+      Headers
+    }
+  }
+}
+</script>
diff --git a/client/src/components/cards/vacationCard.vue b/client/src/components/cards/vacationCard.vue
new file mode 100644
index 00000000..ebb576e1
--- /dev/null
+++ b/client/src/components/cards/vacationCard.vue
@@ -0,0 +1,279 @@
+
+<template>
+  <v-card elevation="0" variant="outlined" color="white" class="pa-4">
+    <div class="d-flex flex-row-reverse">
+      <v-icon class="me-2" @click.stop="$emit('close-dialog', false)"> mdi-close </v-icon>
+    </div>
+
+    <v-card-title class="text-center"> From <b color="primary">{{ vacation.from_date }} </b> to <b color="primary">{{
+      vacation.end_date }} </b> vacation</v-card-title>
+    <br>
+
+    <v-row class="d-flex flex-row-reverse" v-if="couldUpdate">
+      <v-btn color="primary" class="ma-4" @click="readOnly = false">Update</v-btn>
+      <v-btn color="red" class="ma-4" @click="handleDelete">Delete</v-btn>
+    </v-row>
+
+    <v-form ref="form" @submit.prevent="updateVacation()">
+      <v-card elevation="0" class="pa-8">
+        <v-row class="py-5">
+          <v-col cols="3">
+            <v-icon>mdi-account</v-icon>
+
+            <b> Applying User</b>
+
+          </v-col>
+          <v-col cols="3" class="text-right">
+            {{ vacation.user.full_name }}
+
+          </v-col>
+
+          <v-col cols="3">
+            <v-icon>mdi-account</v-icon>
+
+            <b> Approval User </b>
+
+          </v-col>
+          <v-col cols="3" class="text-right" v-if="vacation.isUpdated">
+            {{ vacation.approval_user ? vacation.approval_user : "Under approving" }}
+          </v-col>
+          <v-col cols="3" class="text-right" v-else>
+            {{ vacation.approval_user.email ? vacation.approval_user.email : "Under approving" }}
+          </v-col>
+        </v-row>
+
+        <v-row>
+          <v-col cols="2">
+            <v-icon>mdi-calendar</v-icon>
+
+            <b> From</b>
+
+          </v-col>
+          <v-col cols="4">
+            <v-text-field color="primar'" item-color="primary" base-color="primary" variant="outlined" hide-details="auto"
+              label="From" v-model="startDate" :readonly="readOnly" type="date">
+            </v-text-field>
+          </v-col>
+
+          <v-col cols="2">
+            <v-icon>mdi-calendar</v-icon>
+
+            <b> To</b>
+
+          </v-col>
+          <v-col cols="4">
+            <v-text-field color="primar'" item-color="primary" base-color="primary" variant="outlined" hide-details="auto"
+              label="To" v-model="endDate" :readonly="readOnly" type="date" :rules="[validateEndDate]">
+            </v-text-field>
+          </v-col>
+        </v-row>
+
+        <v-row>
+          <v-col cols="2">
+            <v-icon>mdi-navigation</v-icon>
+
+            <b> Reason</b>
+
+          </v-col>
+          <v-col cols="4">
+            <v-autocomplete color="primary" item-color="primary" base-color="primary" variant="outlined"
+              v-model="leaveReason" :items="leaveReasons" label="Reason" return-object item-title="name"
+              :readonly="readOnly">
+            </v-autocomplete>
+
+          </v-col>
+          <v-col cols="3">
+            <v-icon>mdi-calendar</v-icon>
+            <b> Status</b>
+          </v-col>
+          <v-col cols="3" class="text-right">
+            {{ vacation.status }}
+
+          </v-col>
+        </v-row>
+        <v-row class="d-flex flex-row-reverse" v-if="!readOnly">
+          <v-btn color="" class="ma-4" @click="readOnly = true">Cancel</v-btn>
+          <v-btn color="primary" class="ma-4" type="submit" :disabled="!form?.isValid">
+            Submit
+          </v-btn>
+
+        </v-row>
+      </v-card>
+    </v-form>
+
+    <v-row v-if="couldApprove && vacation.status == 'pending'">
+      <v-btn color="primary" class="ma-4" @click="handleApprove">Approve</v-btn>
+      <v-btn color="red" class="ma-4" @click="handleReject">Reject</v-btn>
+
+    </v-row>
+
+  </v-card>
+</template>
+<script lang="ts">
+import type { Api } from '@/types';
+import { computed, ref } from 'vue';
+
+import { useState } from '@/store'
+import { useApi } from '@/hooks'
+import { useAsyncState } from '@vueuse/core';
+
+
+export default {
+  name: "vacationCard",
+  props: ["vacation"],
+  emits: {
+    'close-dialog': (item: Boolean) => item,
+    'update-vacation': (item: any) => item,
+    'delete-vacation': () => true,
+    'status-vacation': (item: string) => item,
+  },
+
+  setup(props, ctx) {
+    const $api = useApi()
+
+    const startDate = ref<Date>(props.vacation.from_date)
+    const endDate = ref<Date>(props.vacation.end_date)
+    const leaveReason = ref<Api.LeaveReason>({ name: transformString(props.vacation.reason), reason: props.vacation.reason })
+    const form = ref()
+    const state = useState()
+    const readOnly = ref<boolean>(true)
+    const leaveReasons = ref<Api.LeaveReason[]>([{
+      name: "Public Holidays",
+      reason: "public_holiday"
+    }, {
+      name: "Emergency Leaves",
+      reason: "emergency_leaves",
+    }, {
+      name: "Sick Leaves",
+      reason: "sick_leaves",
+    },
+    {
+      name: "Annual Leaves",
+      reason: "annual_leaves",
+    },
+    {
+      name: "Unpaid",
+      reason: "unpaid",
+    },
+    {
+      name: "Compensation",
+      reason: "compensation",
+    },
+    ])
+    const couldUpdate = computed(() => {
+      if (state.user.value) {
+
+        if (props.vacation.status == 'pending') {
+          if (props.vacation.isUpdated && state.user.value.value.id == props.vacation.applying_user) {
+            return true;
+          }
+          if (!props.vacation.isUpdated && state.user.value.value.id == props.vacation.applying_user.id) {
+            return true;
+          }
+          return false
+        }
+      }
+      return false
+    });
+
+    const couldApprove = computed(() => {
+      if (state.user.value) {
+        if (state.user.value.value.user_type === 'Admin'
+          || state.user.value.value.user_type === 'Supervisor'
+        ) {
+          if (props.vacation.user.id == state.user.value.value.id) {
+            return true;
+
+          }
+          if (props.vacation.user.reporting_to.includes(state.user.value.value.id)
+            && props.vacation.user.location.name === state.user.value.value.location.name) {
+            return true;
+          }
+          return false
+        }
+      }
+      return false
+    });
+
+
+    function validateEndDate(value: any) {
+      if (startDate.value && value <= startDate.value) {
+        return 'To date must be after From date';
+      }
+      return true;
+    }
+    async function handleDelete() {
+      return useAsyncState($api.vacations.delete(props.vacation.id), [], {
+        onSuccess() {
+          ctx.emit("delete-vacation")
+        }
+      })
+    }
+    async function handleApprove() {
+      return useAsyncState($api.vacations.approve.update(props.vacation.id), [], {
+        onSuccess() {
+          ctx.emit("status-vacation", "Approve")
+        }
+      })
+    }
+    async function handleReject() {
+      return useAsyncState($api.vacations.reject.update(props.vacation.id), [], {
+        onSuccess() {
+          ctx.emit("status-vacation", "Reject")
+        }
+      })
+    }
+
+    async function calculateActualDays() {
+      return useAsyncState($api.vacations.calculate.list({
+        start_date: startDate.value,
+        end_date: endDate.value,
+      }
+      ), [])
+    }
+    function transformString(inputString: string): string {
+      const words = inputString.split('_');
+      const capitalizedWords = words.map(word => word.charAt(0).toUpperCase() + word.slice(1));
+      const resultString = capitalizedWords.join(' ');
+      return resultString;
+    }
+
+
+    async function updateVacation() {
+      const actualDays = await calculateActualDays()
+
+      useAsyncState($api.vacations.edit.update(props.vacation.id,
+        {
+          reason: leaveReason.value.reason,
+          from_date: startDate.value,
+          end_date: endDate.value,
+          actual_days: actualDays.state.value
+        },
+      ), null, {
+        onSuccess(data) {
+          ctx.emit("update-vacation", data)
+        }
+      })
+
+    }
+
+
+    return {
+      startDate,
+      endDate,
+      leaveReason,
+      leaveReasons,
+      readOnly,
+      form,
+      state,
+      couldApprove,
+      couldUpdate,
+      validateEndDate,
+      updateVacation,
+      handleApprove,
+      handleReject,
+      handleDelete,
+    };
+  },
+};
+</script>
diff --git a/client/src/components/profileImage.vue b/client/src/components/profileImage.vue
index dcb0c983..3b7db86f 100644
--- a/client/src/components/profileImage.vue
+++ b/client/src/components/profileImage.vue
@@ -1,13 +1,28 @@
 <template>
-  <div v-if="user.image?.includes('profile_image')" class="d-flex justify-center mb-5">
-    <img :src="imageSrc + user.image" class="user-profile-image rounded-circle"
-      style="width:70px; height:70px;" />
-  </div>
+  <router-link v-if="withLink" :to="`/profile?id=${user.id}`" style="text-decoration: none;">
+    <div v-if="user.image?.includes('profile_image')" class="d-flex justify-center">
+      <img :src="imageSrc + user.image" class="user-profile-image rounded-circle"
+        style="width:70px; height:70px;" />
+    </div>
+  
+    <div v-else>
+      <v-avatar :color="user.image" size="50" class="d-flex mx-auto user-profile-logo">
+        <span class="text-h5 text-uppercase">{{ avatar }}</span>
+      </v-avatar>
+    </div>
+  </router-link>
 
   <div v-else>
-    <v-avatar :color="user.image" size="50" class="d-flex mx-auto mt-5 mb-3">
-      <span class="text-h5 text-uppercase">{{ avatar }}</span>
-    </v-avatar>
+    <div v-if="user.image?.includes('profile_image')" class="d-flex justify-center">
+      <img :src="imageSrc + user.image" class="user-profile-image rounded-circle"
+        style="width:70px; height:70px;" />
+    </div>
+  
+    <div v-else>
+      <v-avatar :color="user.image" size="50" class="d-flex mx-auto user-profile-logo">
+        <span class="text-h5 text-uppercase">{{ avatar }}</span>
+      </v-avatar>
+    </div>
   </div>
 </template>
 
@@ -17,7 +32,7 @@ import { computed } from 'vue';
 
 export default {
   name: 'profileImage',
-  props: ["user"],
+  props: ["user", "withLink"],
 
   setup(props) {
     const imageSrc = window.env.SERVER_DOMAIN_NAME_API.replace("api", "")
diff --git a/client/src/components/requests/eventRequest.vue b/client/src/components/requests/eventRequest.vue
new file mode 100644
index 00000000..ddc001c3
--- /dev/null
+++ b/client/src/components/requests/eventRequest.vue
@@ -0,0 +1,147 @@
+
+<template>
+  <v-form ref="form" @submit.prevent="createEvent()">
+
+
+    <div class="mt-3">
+      <v-text-field color="primar'" item-color="primary" base-color="primary" variant="outlined" hide-details="auto"
+        label="Start Date" v-model="startDate" :readonly="true">
+        <template v-slot:append>
+          <v-icon color="primary">mdi-calendar</v-icon>
+        </template>
+      </v-text-field>
+    </div>
+
+    <div class="mt-3">
+
+      <v-text-field color="primary" item-color="primary" base-color="primary" :readonly="true" variant="outlined"
+        v-model="endDate" hide-details="auto" label="End Date">
+        <template v-slot:append>
+          <v-icon color="primary">mdi-calendar</v-icon>
+        </template>
+      </v-text-field>
+    </div>
+
+
+    <div class="mt-3">
+
+      <v-text-field item-color="primary" base-color="primary" color="primary" variant="outlined" label="Event Name"
+        v-model="name" hide-details="auto" :rules="fieldRequired">
+      </v-text-field>
+
+    </div>
+    <div class="mt-3">
+
+      <v-text-field item-color="primary" base-color="primary" color="primary" variant="outlined" label="Description"
+        v-model="description" hide-details="auto" :rules="fieldRequired">
+      </v-text-field>
+    </div>
+
+
+    <div class="mt-3">
+
+
+
+      <v-text-field item-color="primary" base-color="primary" color="primary" variant="outlined" label="Event Start Time"
+        v-model="eventStart" hide-details="auto" :rules="fieldRequired" type="time">
+      </v-text-field>
+    </div>
+
+    <div class="mt-3">
+
+
+
+      <v-text-field item-color="primary" base-color="primary" color="primary" variant="outlined" label="Event End Time"
+        v-model="eventEnd" hide-details="auto" :rules="fieldRequired" type="time">
+      </v-text-field>
+    </div>
+
+
+
+
+    <v-row class="mt-3 d-flex flex-row-reverse">
+
+      <v-col cols="3">
+        <v-btn color="primary" type="submit" :disabled="!form?.isValid" width="100%">
+          Submit
+        </v-btn>
+      </v-col>
+    </v-row>
+  </v-form>
+</template>
+<script lang="ts">
+import { computed, ref } from 'vue';
+import { fieldRequired } from '@/utils';
+import { useApi } from '@/hooks'
+import { useAsyncState } from '@vueuse/core';
+
+
+export default {
+  name: "leaveRequest",
+  props: ["dates"],
+  emits: {
+    'create-event': (item: any) => item,
+  },
+  setup(props, ctx) {
+    const $api = useApi()
+    const startDate = ref<string>(props.dates.startStr)
+    const endDate = ref<string>(props.dates.endStr)
+    const name = ref<string>("")
+    const description = ref<string>("")
+    const form = ref()
+    const eventStart = ref()
+    const eventEnd = ref()
+
+    const from_date = computed(() => {
+      let val = new Date(startDate.value);
+      if (eventStart.value) {
+        const [hours, minutes] = eventStart.value.split(':').map(Number);
+        val.setHours(hours, minutes, 0, 0);
+      }
+
+      return val.toISOString();
+    });
+    const end_date = computed(() => {
+      let val = new Date(endDate.value);
+      if (eventEnd.value) {
+        const [hours, minutes] = eventEnd.value.split(':').map(Number);
+        val.setHours(hours, minutes, 0, 0);
+      }
+
+      return val.toISOString();
+    });
+
+
+
+    async function createEvent() {
+      useAsyncState($api.event.create(
+        {
+          name: name.value,
+          description: description.value,
+          from_date: from_date.value,
+          end_date: end_date.value,
+        },
+      ), undefined, {
+        onSuccess(data) {
+          ctx.emit("create-event", data)
+        }
+      })
+
+
+    }
+
+    return {
+      startDate,
+      endDate,
+      name,
+      description,
+      form,
+      fieldRequired,
+      eventStart,
+      eventEnd,
+
+      createEvent,
+    };
+  },
+};
+</script>
diff --git a/client/src/components/requests/leaveRequest.vue b/client/src/components/requests/leaveRequest.vue
new file mode 100644
index 00000000..d637abe9
--- /dev/null
+++ b/client/src/components/requests/leaveRequest.vue
@@ -0,0 +1,128 @@
+
+<template>
+  <v-form ref="form" @submit.prevent="createLeave()">
+    <div class="mt-3">
+      <v-text-field color="primar'" item-color="primary" base-color="primary" variant="outlined" hide-details="auto"
+        label="From" v-model="startDate" :readonly="true">
+        <template v-slot:append>
+          <v-icon color="primary">mdi-calendar</v-icon>
+        </template>
+      </v-text-field>
+    </div>
+
+    <div class="mt-3">
+
+      <v-text-field color="primary" item-color="primary" base-color="primary" :readonly="true" variant="outlined"
+        v-model="endDate" hide-details="auto" label="To">
+        <template v-slot:append>
+          <v-icon color="primary">mdi-calendar</v-icon>
+        </template>
+      </v-text-field>
+    </div>
+
+    <div class="mt-3">
+
+      <v-autocomplete color="primary" item-color="primary" base-color="primary" variant="outlined" v-model="leaveReason"
+        :items="leaveReasons" label="Reason" return-object item-title="name">
+      </v-autocomplete>
+
+    </div>
+
+    <v-row class="mt-3 d-flex flex-row-reverse">
+
+      <v-col cols="3">
+        <v-btn color="primary" type="submit" :disabled="!form?.isValid || !isValid" width="100%">
+          Submit
+        </v-btn>
+      </v-col>
+    </v-row>
+  </v-form>
+</template>
+<script lang="ts">
+import { useApi } from '@/hooks'
+import type { Api } from '@/types';
+import { useAsyncState } from '@vueuse/core';
+import { computed, ref } from 'vue';
+
+
+export default {
+  name: "leaveRequest",
+  props: ["dates"],
+  emits: {
+    'create-event': (item: any) => item,
+  },
+  setup(props, ctx) {
+    const $api = useApi()
+    const form = ref()
+    const startDate = ref<Date>(props.dates.startStr)
+    const endDate = ref<Date>(props.dates.endStr)
+    const leaveReason = ref<Api.LeaveReason>()
+
+    const isValid = computed(() => {
+      let val = leaveReason.value ? true : false;
+      return val;
+    });
+
+
+    const leaveReasons = ref<Api.LeaveReason[]>([{
+      name: "Public Holidays",
+      reason: "public_holidays"
+    }, {
+      name: "Emergency Leaves",
+      reason: "emergency_leaves",
+    }, {
+      name: "Sick Leaves",
+      reason: "sick_leaves",
+    },
+    {
+      name: "Annual Leaves",
+      reason: "annual_leaves",
+    },
+    {
+      name: "Unpaid",
+      reason: "unpaid",
+    },
+    {
+      name: "Compensation",
+      reason: "compensation",
+    },
+    ])
+
+    async function calculateActualDays() {
+      return await $api.vacations.calculate.list({
+        start_date: startDate.value,
+        end_date: endDate.value,
+      }
+      )
+    }
+
+    async function createLeave() {
+      if (leaveReason.value) {
+        calculateActualDays()
+        useAsyncState($api.vacations.create(
+          {
+            reason: leaveReason.value.reason,
+            from_date: startDate.value,
+            end_date: endDate.value,
+          },
+        ), undefined, {
+          onSuccess(data) {
+            ctx.emit("create-event", data)
+          }
+        })
+      }
+
+    }
+
+    return {
+      startDate,
+      endDate,
+      leaveReasons,
+      leaveReason,
+      form,
+      isValid,
+      createLeave,
+    };
+  },
+};
+</script>
diff --git a/client/src/components/requests/meetingRequest.vue b/client/src/components/requests/meetingRequest.vue
new file mode 100644
index 00000000..f560d80d
--- /dev/null
+++ b/client/src/components/requests/meetingRequest.vue
@@ -0,0 +1,108 @@
+
+<template>
+  <v-form ref="form" @submit.prevent="createMeeting()">
+
+
+
+    <div class="mt-3">
+      <v-text-field color="primar'" item-color="primary" base-color="primary" variant="outlined" hide-details="auto"
+        label="Start Date" v-model="startDate" :readonly="true">
+        <template v-slot:append>
+          <v-icon color="primary">mdi-calendar</v-icon>
+        </template>
+      </v-text-field>
+    </div>
+
+
+
+    <div class="mt-3">
+
+      <v-text-field item-color="primary" base-color="primary" color="primary" variant="outlined" label="Meeting Link"
+        v-model="meetingLink" hide-details="auto" :rules="fieldRequired">
+
+      </v-text-field>
+
+    </div>
+    <div class="mt-3">
+
+      <v-text-field item-color="primary" base-color="primary" color="primary" variant="outlined" label="Meeting Location"
+        v-model="location" hide-details="auto" :rules="fieldRequired">
+      </v-text-field>
+    </div>
+
+
+
+    <div class="mt-3">
+      <v-text-field item-color="primary" base-color="primary" color="primary" variant="outlined" label="Meeting Time"
+        v-model="meetingTime" hide-details="auto" :rules="fieldRequired" type="time">
+
+      </v-text-field>
+    </div>
+    <v-row class="mt-3 d-flex flex-row-reverse">
+
+      <v-col cols="3">
+        <v-btn color="primary" type="submit" :disabled="!form?.isValid" width="100%">
+          Submit
+        </v-btn>
+      </v-col>
+    </v-row>
+  </v-form>
+</template>
+<script lang="ts">
+import { computed, ref } from 'vue';
+import { fieldRequired } from '@/utils';
+import { useApi } from '@/hooks'
+import { useAsyncState } from '@vueuse/core';
+
+
+export default {
+  name: "leaveRequest",
+  props: ["dates"],
+  emits: {
+    'create-event': (item: any) => item,
+  },
+  setup(props, ctx) {
+    const $api = useApi()
+    const startDate = ref<any>(props.dates.startStr)
+    const meetingLink = ref<string>("")
+    const location = ref<string>("")
+    const form = ref()
+    const meetingTime = ref()
+
+    const meetingDateTime = computed(() => {
+      let val = new Date(startDate.value);
+      if (startDate.value) {
+        const [hours, minutes] = meetingTime.value.split(':').map(Number);
+        val.setHours(hours, minutes, 0, 0);
+      }
+
+      return val.toISOString();
+    });
+
+
+    async function createMeeting() {
+      useAsyncState($api.meeting.create(
+        {
+          date: meetingDateTime.value,
+          meeting_link: meetingLink.value,
+          location: location.value,
+        },
+      ), undefined, {
+        onSuccess(data) {
+          ctx.emit("create-event", data)
+        }
+      })
+    }
+
+    return {
+      startDate,
+      meetingLink,
+      location,
+      form,
+      meetingTime,
+      fieldRequired,
+      createMeeting,
+    };
+  },
+};
+</script>
diff --git a/client/src/types/api.ts b/client/src/types/api.ts
index e5fb225b..2d76f0e1 100644
--- a/client/src/types/api.ts
+++ b/client/src/types/api.ts
@@ -20,16 +20,56 @@ export module Api {
   export interface UnwrapOptions<T, R> {
     transform?: (data: T, res: AxiosResponse<T, any>) => R
     normalizeError?: (error: AxiosError<any>, res: AxiosResponse<T>) => string
+    disableNotify?: boolean
   }
 
   export interface Skill {
     name: string
   }
 
+  export interface Vacation {
+    id: number
+    created_at: any
+    modified_at: any
+    type: string
+    status: string
+    reason: string
+    from_date: any
+    end_date: any
+    change_log: any[]
+    actual_days: number
+    applying_user: number | any
+    approval_user: number
+    user?: Api.User
+    isUpdated? : boolean
+  }
+
+  export interface LeaveReason {
+    name: string
+    reason: string
+  }
+
   export interface Certificate {}
 
   export interface Salary {}
-
+  export interface Meetings {
+    id: number
+    invited_users: any[]
+    date: any
+    meeting_link: string
+    host_user: {
+      id: number
+      full_name: string
+      email: string
+      image: string
+      team: string
+      gender: string
+      skills: []
+      job_title: string
+      user_certificates: any[]
+    }
+    location: string
+  }
   export interface User {
     id: number
     first_name: string
@@ -98,8 +138,12 @@ export module Api {
       message: string
       results: T
     }
+    export type Event = MsgRes<Event>
+    export type Meeting = MsgRes<Meeting>
 
     export type Profile = MsgRes<User>
+    export type AllMeetings = MsgRes<Meetings>
+
     export type Login = MsgRes<{
       id: number
       email: string
@@ -110,6 +154,41 @@ export module Api {
       last_name: string
     }>
 
+    export type LeaveRequest = MsgRes<{
+      title: string
+      className: string
+      eventName: string
+      vacation: {
+        id: number
+        reason: string
+        from_date: any
+        end_date: any
+        status: string
+        applying_user: {
+          id: number
+          full_name: string
+          email: string
+          image: string
+          team: string
+          gender: string
+          skills: []
+          job_title: string
+          user_certificates: []
+        }
+        approval_user: {
+          email: string
+          team: string
+          gender: string
+          job_title: string
+        }
+        change_log: {}
+        type: string
+      }
+
+      len: number
+      date: any
+    }>
+
     export type Balance = MsgRes<BalanceVacation>
 
     export interface Register {
@@ -162,7 +241,57 @@ export module Api {
       }
     }
   }
+  export interface Holiday {
+    id: number
+    location: {
+      id: number
+      name: string
+      country: string
+      weekend: string
+    }
+    holiday_date: any
+    expired: boolean
+  }
+
+  export interface Home {
+    id: number
+    title: string
+    className: string
+    eventName: string
+    vacation?: any
+    meeting? :any
+    event?: any
+    holidays?: any
+    users?:any
+    date: any
+    len?: number
+  }
+
   export module Inputs {
+    export interface Event {
+      name: string
+      description: string
+      from_date: any
+      end_date: any
+    }
+
+    export interface Leave {
+      reason: string | undefined
+      from_date: any
+      end_date: any
+      actual_days?: number
+    }
+
+    export interface ActualDays {
+      start_date: any
+      end_date: any
+    }
+    export interface Meeting {
+      date: any
+      meeting_link: string
+      location: string
+    }
+
     export interface Login {
       email: string
       password: string
diff --git a/client/src/utils/helpers.ts b/client/src/utils/helpers.ts
index 51f5a2dd..fb801512 100644
--- a/client/src/utils/helpers.ts
+++ b/client/src/utils/helpers.ts
@@ -1,5 +1,6 @@
 import moment from 'moment'
 
+import type { Api } from "@/types"
 import type { JWTokenObject } from "@/types"
 
 export async function resolve<T>(promise: Promise<T>): Promise<[T, any]> {
@@ -30,6 +31,108 @@ export const DASHBOARD_ITEMS = [
 
 export const formatDate = (date: any) => moment(date).format('YYYY-MM-DD')
 
+export const fieldRequired = [(v: string) => !!v || 'Field is required.']
+
+export function handelDates(start: any, end: any): any {
+  const dates = {
+    start,
+    end,
+    add: true,
+    cut: null,
+    endStr: null as null | string | Date,
+    startStr: null as null | string | Date
+  }
+
+  const endDate = new Date(dates.end || '')
+  if (dates.cut) {
+    endDate.setDate(endDate.getDate() - 1)
+  } else if (dates.add) {
+    endDate.setDate(endDate.getDate() + 1)
+  }
+
+  dates.end = endDate
+  dates.start = new Date(dates.start)
+
+  const endStr = `${endDate.getFullYear()}-${endDate.getMonth() + 1}-${endDate.getDate()}`
+  const startStr = `${dates.start.getFullYear()}-${
+    dates.start.getMonth() + 1
+  }-${dates.start.getDate()}`
+
+  dates.endStr = endStr
+  dates.startStr = startStr
+  return dates
+}
+
+
+export function normalizeEvent(e: Api.Inputs.Event): any {
+  const dates = handelDates(e.from_date, e.end_date)
+
+  return {
+    title: 'Event',
+    classNames: ['cshr-event'],
+    color: 'primary',
+    start: dates.start,
+    end: dates.end,
+    backgroundColor: 'primary',
+    id: e.name,
+    allDay: true
+  }
+}
+export function normalizeVacation(v: Api.Vacation) {
+  const dates = handelDates(v.from_date, v.end_date)
+
+  return {
+    title: `${v.user!.full_name}'s Vacation`,
+    color: 'primary',
+    start: dates.start,
+    end: dates.end,
+    backgroundColor: 'gray',
+    id: v.id.toString(),
+    allDay: true
+  }
+}
+
+export function normalizeHoliday(h: Api.Holiday) {
+  const dates = handelDates(h.holiday_date, h.holiday_date)
+
+  return {
+    title: `Public Holiday`,
+    color: 'primary',
+    start: dates.start,
+    end: dates.end,
+    backgroundColor: 'gray',
+    id: h.id.toString(),
+    allDay: true
+  }
+}
+export function normalizedBirthday(u: Api.User) {
+  const dates = handelDates(u.birthday, u.birthday)
+
+  return {
+    title: `Birthday`,
+    color: 'primary',
+    start: dates.start,
+    end: dates.end,
+    backgroundColor: 'gray',
+    id: u.id.toString(),
+    allDay: true
+  }
+}
+
+
+export function normalizeMeeting(m: Api.Meetings): any {
+  const dates = handelDates(m.date, m.date)
+
+  return {
+    title: 'Meeting',
+    color: 'secondary',
+    start: dates.start,
+    end: dates.end,
+    backgroundColor: 'primary',
+    id: m.id,
+    allDay: true
+  }
+}
 export function getStatusColor(status: string) {
   switch (status) {
     case 'vacations':
diff --git a/client/src/views/CalendarView.vue b/client/src/views/CalendarView.vue
index 07e77a08..b03b8667 100644
--- a/client/src/views/CalendarView.vue
+++ b/client/src/views/CalendarView.vue
@@ -1,10 +1,21 @@
 <template>
-  <p>This is Calendar</p>
+  <calenderCshr />
 </template>
 
 <script lang="ts">
+import { $api } from "@/clients";
+import calenderCshr from "@/components/calender.vue"
+import type { Api } from "@/types";
+import { onMounted, ref } from "vue";
 export default {
   name: 'CalendarView',
-  setup() {}
+  components: {
+    calenderCshr,
+  },
+  setup() {
+    return {
+      calenderCshr,
+    }
+  }
 }
 </script>
diff --git a/client/src/views/ProfileView.vue b/client/src/views/ProfileView.vue
index 8db702b5..3fe0b462 100644
--- a/client/src/views/ProfileView.vue
+++ b/client/src/views/ProfileView.vue
@@ -3,19 +3,21 @@
     <v-row class="ma-5">
       <v-col cols="12" sm="12" md="3" class="pa-2 border rounded ma-2 align-self-start">
         <div class="pa-5">
-          <profileImage :user="user.state.value"/>
+          <div class="mb-5">
+            <profileImage :user="user.state.value"/>
+          </div>
           <div class=" text-center">
-            <h5 clas=" text-h5 font-weight-bold ">
+            <h4 clas=" text-h5 font-weight-bold mb-3">
               {{ user.state.value?.full_name }}
-            </h5>
-            <span>Working for {{ user.state.value?.location?.country }} office</span>
+            </h4>
+            <span class="text-grey-lighten-1">Working for {{ user.state.value?.location?.country }} office</span>
           </div>
         </div>
       </v-col>
       <v-col cols="12" sm="12" md="8" class="pa-2 border rounded position-relative ma-2">
         <div>
           <personalInformation :user="user.state.value" />
-          <vacationBalance :balance="balance.state.value" />
+          <vacationBalance :balance="balance.state.value" v-if="showBalance" />
         </div>
       </v-col>
     </v-row>
@@ -23,15 +25,15 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, ref } from 'vue'
+import { computed, defineComponent } from 'vue'
 import vacationBalance from '@/components/vacationBalance.vue'
 import personalInformation from '@/components/personalInformation.vue'
 import { $api } from '@/clients'
-import { onMounted } from 'vue'
-import type { Api } from '@/types'
 import { useRoute } from 'vue-router';
 import { useAsyncState } from '@vueuse/core';
 import profileImage from "@/components/profileImage.vue";
+import { useState } from '@/store'
+
 export default defineComponent({
   components: {
     vacationBalance,
@@ -41,6 +43,7 @@ export default defineComponent({
 
   setup() {
     const $route = useRoute();
+    const state = useState()
     const user = useAsyncState($route.query.id ? $api.users.getuser(Number($route.query.id)) : $api.myprofile.getUser(), [], {
       onSuccess(data) {
         balance.execute(undefined, data.id)
@@ -55,10 +58,29 @@ export default defineComponent({
       { immediate: false }
     )
 
+    const showBalance = computed(() => {
+      if (state.user.value) {
+        if (user.state.value.id === state.user.value.value.id) {
+          return true;
+        }
+        else if (state.user.value.value.user_type === 'Admin') {
+          if (user.state.value.reporting_to) {
+            if (user.state.value.reporting_to.includes(state.user.value.value.id)
+              && user.state.value.location.name === state.user.value.value.location.name) {
+              return true;
+            }
+          }
+          return false
+        }
+      }
+      return false
+    });
 
     return {
       user,
+      state,
       balance,
+      showBalance,
       vacationBalance,
       personalInformation,
       profileImage,
diff --git a/client/src/views/VacationView.vue b/client/src/views/VacationView.vue
new file mode 100644
index 00000000..e13c32fa
--- /dev/null
+++ b/client/src/views/VacationView.vue
@@ -0,0 +1,11 @@
+<template>
+    <p>This is vacation</p>
+  </template>
+  
+  <script lang="ts">
+  export default {
+    name: 'VacationView',
+    setup() {}
+  }
+  </script>
+  
\ No newline at end of file
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
new file mode 100644
index 00000000..2b9f1883
--- /dev/null
+++ b/pnpm-lock.yaml
@@ -0,0 +1,5 @@
+lockfileVersion: '6.0'
+
+settings:
+  autoInstallPeers: true
+  excludeLinksFromLockfile: false