diff --git a/client/src/components/cards/holidayCard.vue b/client/src/components/cards/holidayCard.vue
index 0e589ec6..b67a90c4 100644
--- a/client/src/components/cards/holidayCard.vue
+++ b/client/src/components/cards/holidayCard.vue
@@ -7,7 +7,6 @@
         </v-icon>
       </div>
     </v-card-title>
-    <div class="d-flex expired" v-if="holiday.expired">Expired</div>
     <v-container class="pa-4">
       <v-card elevation="0" class="mt-2">
         <v-row class="pa-2 text-center">
diff --git a/client/src/components/cards/vacationCard.vue b/client/src/components/cards/vacationCard.vue
index 7885f1e2..58c0a912 100644
--- a/client/src/components/cards/vacationCard.vue
+++ b/client/src/components/cards/vacationCard.vue
@@ -1,121 +1,93 @@
 <template>
-  <v-card elevation="0">
+  <v-card elevation="0" >
+
     <v-card-title class="bg-graytitle">
       <div class="d-flex flex-row-reverse">
-        <v-icon class="me-2" size="small" @click.stop="$emit('close-dialog', false)">
+        <v-icon size="small" class="me-2" @click.stop="$emit('close-dialog', false)">
           mdi-close
         </v-icon>
       </div>
     </v-card-title>
-    <v-container class="pa-6">
-      <p class="text-subtitle-1 text-center">
-        From <b>{{ vacation.from_date }} </b> to
-        <b color="primary">{{ vacation.end_date }} </b> vacation
+    <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-form ref="form" @submit.prevent="updateVacation()" class="pa-4">
+      <v-row class="d-flex flex-row-reverse" v-if="couldUpdate">
+        <v-btn color="primary" class="ma-4" type="submit" :disabled="!form?.isValid || disabled">Update</v-btn>
+        <v-btn color="red" class="ma-4" @click="handleDelete">Delete</v-btn>
+      </v-row>
+      <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-row class="d-flex justify-center my-2" v-if="couldUpdate">
-          <v-btn color="primary" class="mx-1 my-2" @click="readOnly = false">Update</v-btn>
-          <v-btn color="error" class="mx-1 my-2" @click="handleDelete">Delete</v-btn>
         </v-row>
-      </p>
-      <v-divider class="my-2"></v-divider>
-      <v-form ref="form" @submit.prevent="updateVacation()">
-        <v-card elevation="0" class="pa-4">
-          <v-row class="py-2">
-            <v-col cols="6" class="d-flex">
-              <v-icon class="mr-2">mdi-account</v-icon>
-              <p>
-                Applying User :
-                <span color="warning" class="mx-2">{{ vacation.user.full_name }}</span>
-              </p>
-            </v-col>
-            <v-col cols="6" class="d-flex">
-              <v-icon class="mr-2">mdi-account</v-icon>
 
-              <p>
-                Approval User :
-                <span class="mx-2" v-if="vacation.isUpdated">{{
-                  vacation.approval_user ? vacation.approval_user : 'Under approving'
-                }}</span>
-                <span class="mx-2" v-else>{{
-                  vacation.approval_user.email ? vacation.approval_user.email : 'Under approving'
-                }}</span>
-              </p>
-            </v-col>
-          </v-row>
+        <v-row>
+          <v-col cols="2">
+            <v-icon>mdi-calendar</v-icon>
 
-          <v-row>
-            <v-col cols="6">
-              <v-text-field
-                color="info"
-                item-color="info"
-                base-color="info"
-                variant="outlined"
-                hide-details="auto"
-                label="From"
-                v-model="startDate"
-                :readonly="readOnly"
-                type="date"
-              >
-              </v-text-field>
-            </v-col>
-            <v-col cols="6">
-              <v-text-field
-                color="info"
-                item-color="info"
-                base-color="info"
-                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="6">
-              <v-autocomplete
-                color="info"
-                item-color="info"
-                base-color="info"
-                variant="outlined"
-                v-model="leaveReason"
-                :items="leaveReasons"
-                label="Reason"
-                return-object
-                item-title="name"
-                :readonly="readOnly"
-              >
-              </v-autocomplete>
-            </v-col>
-            <v-col cols="6" class="d-flex items-center">
-              <p>
-                Status :
-                {{ vacation.status }}
-              </p>
-            </v-col>
-          </v-row>
-          <v-row class="d-flex justify-center" v-if="!readOnly">
-            <v-btn color="primary" class="my-2 mx-1" type="submit" :disabled="!form?.isValid">
-              Submit
-            </v-btn>
-            <v-btn color="info" class="my-2 mx-1" @click="readOnly = true">Cancel</v-btn>
-          </v-row>
-        </v-card>
-      </v-form>
-      <v-divider class="my-2"></v-divider>
-      <v-row class="d-flex justify-end mt-3" v-if="couldApprove && vacation.status == 'pending'">
-        <v-btn color="primary" class="ma-1" @click="handleApprove">Approve</v-btn>
-        <v-btn color="error" class="ma-1" @click="handleReject">Reject</v-btn>
-      </v-row>
-    </v-container>
+            <b> From</b>
+          </v-col>
+          <v-col cols="4">
+            <v-text-field color="primary'" item-color="primary" base-color="primary" variant="outlined" hide-details="auto"
+              label="From" v-model="startDate" :readonly="!couldUpdate" 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="primary'" item-color="primary" base-color="primary" variant="outlined" hide-details="auto"
+              label="To" v-model="endDate" :readonly="!couldUpdate" 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="!couldUpdate">
+            </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-card>
+    </v-form>
+
+    <v-row v-if="couldApprove && vacation.status == 'pending'" class="pa-4">
+      <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 type { Api } from '@/types';
+import { computed, ref, watch } from 'vue';
 
 import { useApi } from '@/hooks'
 import { useAsyncState } from '@vueuse/core'
@@ -141,34 +113,34 @@ export default {
       reason: props.vacation.reason
     })
     const form = ref()
+    const disabled = ref<boolean>(true)
     const user = ApiClientBase.user
-    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 leaveReasons = ref<Api.LeaveReason[]>([ ])
+
+    const balance = useAsyncState($api.vacations.getVacationBalance({ "user_ids": user.value?.fullUser.id }), null, {
+      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",
+        },]
+
       }
-    ])
+    })
     const couldUpdate = computed(() => {
       if (user.value) {
         if (props.vacation.status == 'pending') {
@@ -206,7 +178,16 @@ export default {
         }
       }
       return false
-    })
+    });
+
+    watch([leaveReason, startDate, endDate], ([newLeaveReason, newStartDate, newEndDate], [oldLeaveReason, oldStartDate, oldEndDate]) => {
+      if (newLeaveReason.name !== oldLeaveReason.name || newStartDate !== oldStartDate || newEndDate !== oldEndDate) {
+        disabled.value = false;
+        return
+      }
+      disabled.value = true;
+
+    });
 
     function validateEndDate(value: any) {
       if (startDate.value && value <= startDate.value) {
@@ -273,10 +254,10 @@ export default {
 
     return {
       startDate,
+      disabled,
       endDate,
       leaveReason,
       leaveReasons,
-      readOnly,
       form,
       couldApprove,
       couldUpdate,
diff --git a/client/src/components/requests/eventRequest.vue b/client/src/components/requests/eventRequest.vue
index 7c31f1cd..efb56234 100644
--- a/client/src/components/requests/eventRequest.vue
+++ b/client/src/components/requests/eventRequest.vue
@@ -111,9 +111,11 @@ export default {
   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 endDate = ref<any>(new Date(props.dates.endStr))
+    endDate.value.setDate(endDate.value.getDate() - 1);
+    endDate.value = endDate.value.toISOString().split('T')[0];    
+    const name = ref<string>("")
+    const description = ref<string>("")
     const form = ref()
     const eventStart = ref()
     const eventEnd = ref()
diff --git a/client/src/components/requests/leaveRequest.vue b/client/src/components/requests/leaveRequest.vue
index 5dee4afd..0a9dc6b7 100644
--- a/client/src/components/requests/leaveRequest.vue
+++ b/client/src/components/requests/leaveRequest.vue
@@ -1,5 +1,9 @@
 <template>
   <v-form ref="form" @submit.prevent="createLeave()">
+    <v-alert 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" }}
+    </v-alert>
+
     <div class="mt-3">
       <v-text-field
         color="info"
@@ -49,15 +53,16 @@
       </v-autocomplete>
     </div>
     <v-row class="pa-4 d-flex justify-end">
-      <v-btn color="primary" type="Submit" :disabled="!form?.isValid || !isValid"> Submit </v-btn>
+      <v-btn color="primary" type="Submit" :disabled="!form?.isValid || !isValid || actualDays.state.value === 0"> Submit </v-btn>
     </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'
+import type { Api } from '@/types';
+import { useAsyncState } from '@vueuse/core';
+import { computed, ref } from 'vue';
+import { ApiClientBase } from '@/clients/api/base';
 
 export default {
   name: 'leaveRequest',
@@ -69,53 +74,51 @@ export default {
     const $api = useApi()
     const form = ref()
     const startDate = ref<Date>(props.dates.startStr)
-    const endDate = ref<Date>(props.dates.endStr)
+    const endDate = ref<any>(new Date(props.dates.endStr))
+    endDate.value.setDate(endDate.value.getDate() - 1);
+    endDate.value = endDate.value.toISOString().split('T')[0];
+    const user = ApiClientBase.user
     const leaveReason = ref<Api.LeaveReason>()
+    const actualDays = useAsyncState($api.vacations.calculate.list({
+      start_date: startDate.value,
+      end_date: endDate.value,
+    }), [])
 
     const isValid = computed(() => {
-      let val = leaveReason.value ? true : false
-      return val
-    })
+      let val = leaveReason.value ? true : false;
+      return val;
+    });
+    const leaveReasons = ref<Api.LeaveReason[]>([])
 
-    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'
-      }
-    ])
+    const balance = useAsyncState($api.vacations.getVacationBalance({ "user_ids": user.value?.fullUser.id }), null, {
+      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",
+        },]
 
-    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({
+        useAsyncState($api.vacations.create(
+          {
             reason: leaveReason.value.reason,
             from_date: startDate.value,
             end_date: endDate.value
@@ -137,8 +140,10 @@ export default {
       leaveReason,
       form,
       isValid,
-      createLeave
-    }
-  }
-}
+      actualDays,
+      user,
+      createLeave,
+    };
+  },
+};
 </script>