diff --git a/src/modules/05_leave/componenst/Calendar.vue b/src/modules/05_leave/componenst/Calendar.vue
index b26e7e3..51d7aab 100644
--- a/src/modules/05_leave/componenst/Calendar.vue
+++ b/src/modules/05_leave/componenst/Calendar.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref,  onMounted, watch } from "vue";
+import { ref, onMounted, watch } from "vue";
 import { useQuasar } from "quasar";
 import keycloak from "@/plugins/keycloak";
 import http from "@/plugins/http";
@@ -19,7 +19,6 @@ import type { DataDateMonthObject } from "@/modules/05_leave/interface/request/C
 import type {
   DataCalendar,
   LeaveType,
-  FilterList,
 } from "@/modules/05_leave/interface/response/leave";
 
 /** import componest*/
@@ -39,6 +38,10 @@ const emit = defineEmits(["update:dateYear"]);
 const fullName = ref<string>("");
 const mainData = ref<DataCalendar[]>([]);
 
+const keycloakId = ref<string>(
+  keycloak.tokenParsed ? keycloak.tokenParsed.sub!.toString() : ""
+);
+
 /**
  * Option ของปฏิทิน
  */
@@ -85,22 +88,22 @@ async function fetchDataCalendar() {
       mainData.value = res.data.result;
 
       const double_name = [
-        ...new Set(mainData.value.map((item: DataCalendar) => item.fullName)),
+        ...new Set(mainData.value.map((item: DataCalendar) => item.keycloakId)),
       ];
-
+      filterLists.value = [];
       for (let i = 1; i <= double_name.length; i++) {
-        filterLists.value = [];
         const name = double_name[i - 1];
         const filterName = {
           id: name,
-          name: name,
-          color: name === "นางสาวสาวิตรี ศรีสมัย" ? "green" : "grey",
+          name: convertKeycloakId(name),
+          color: name === keycloakId.value ? "green" : "grey",
         };
+
         filterLists.value.push(filterName);
       }
 
       const data = mainData.value.filter(
-        (e: any) => e.fullName === "นางสาวสาวิตรี ศรีสมัย"
+        (e: any) => e.keycloakId === keycloakId.value
       );
 
       const event = data.map((e: DataCalendar) => ({
@@ -109,6 +112,8 @@ async function fetchDataCalendar() {
         start: e.leaveStartDate,
         end: e.leaveEndDate,
         allDay: true,
+        color: e.keycloakId === keycloakId.value ? "#DCEDC8" : "#CFD8DC",
+        textColor: "black",
       }));
       calendarOptions.value.events = event;
     })
@@ -121,6 +126,11 @@ async function fetchDataCalendar() {
     });
 }
 
+function convertKeycloakId(id: any) {
+  const filterName = mainData.value.find((e: any) => e.keycloakId === id);
+  return filterName?.fullName;
+}
+
 const leaveType = ref<LeaveType[]>([]);
 /** function เรียกประเภทการลา */
 async function fectOptionType() {
@@ -169,31 +179,33 @@ async function onClickClose() {
 }
 
 /** filter calendar left */
-const filterLists = ref<FilterList[]>([]);
-const filterVal = ref(["นางสาวสาวิตรี ศรีสมัย"]);
+const filterLists = ref<any>([]);
+const filterVal = ref<any>([]);
 
 watch(
   () => filterVal.value,
   () => {
     const eventData = filterVal.value.map((item: any) => {
       return mainData.value
-        .filter((e: DataCalendar) => e.fullName === item)
+        .filter((e: DataCalendar) => e.keycloakId === item)
         .map((e) => ({
           id: e.id,
           title: `${e.fullName} (${e.leaveTypeName})`,
           start: e.leaveStartDate,
           end: e.leaveEndDate,
           allDay: true,
+          color: e.keycloakId === keycloakId.value ? "#DCEDC8" : "#CFD8DC",
+          textColor: "black",
         }));
     });
-    calendarOptions.value.events = eventData[0];
+    const allEventData = [].concat(...eventData);
+    calendarOptions.value.events = allEventData;
   }
 );
 
 onMounted(async () => {
-  if (keycloak.tokenParsed != null) {
-    fullName.value = keycloak.tokenParsed.name;
-  }
+  filterVal.value.push(keycloakId.value);
+
   await fetchDataCalendar();
   await fectOptionType();
 });
diff --git a/src/modules/05_leave/interface/response/leave.ts b/src/modules/05_leave/interface/response/leave.ts
index 6fe3624..0ba5f01 100644
--- a/src/modules/05_leave/interface/response/leave.ts
+++ b/src/modules/05_leave/interface/response/leave.ts
@@ -99,6 +99,7 @@ interface DataCalendar {
   leaveTypeId: string;
   leaveTypeName: string;
   status: string;
+  keycloakId: string;
 }
 
 interface LeaveType {
@@ -116,7 +117,7 @@ interface LeaveType {
 
 interface FilterList {
   id: string;
-  name: string;
+  name: string | null;
   color: string;
 }