diff --git a/src/modules/09_leave/components/05_Leave/Calendar.vue b/src/modules/09_leave/components/05_Leave/Calendar.vue
index 14665b235..eff336884 100644
--- a/src/modules/09_leave/components/05_Leave/Calendar.vue
+++ b/src/modules/09_leave/components/05_Leave/Calendar.vue
@@ -228,8 +228,12 @@ onMounted(async () => {
 <template>
   <div class="q-mt-sm">
     <div class="row q-gutter-sm">
-      <div class="col-3">
-        <q-list bordered class="rounded-borders">
+      <div class="col-3 scrollable-list">
+        <q-list
+          bordered
+          class="rounded-borders"
+          style="max-height: 80vh; overflow-y: auto"
+        >
           <q-item
             v-for="(item, i) in filterLists"
             :key="i"
diff --git a/src/modules/09_leave/components/05_Leave/TableList.vue b/src/modules/09_leave/components/05_Leave/TableList.vue
index 65a8a2c3c..ea81a2688 100644
--- a/src/modules/09_leave/components/05_Leave/TableList.vue
+++ b/src/modules/09_leave/components/05_Leave/TableList.vue
@@ -248,6 +248,22 @@ function updatePagination(newPagination: any) {
   pagination.value.rowsPerPage = newPagination.rowsPerPage;
 }
 
+/**
+ * ฟังก์ชันสำหรับดึงชื่อ CSS Class ตามสถานะ
+ * @param statusText สถานะของรายการ
+ */
+function getStatusColor(statusText: string) {
+  const statusMap: Record<string, string> = {
+    APPROVE: "text-green-6",
+    REJECT: "text-red",
+    NEW: "text-blue",
+    PENDING: "text-warning",
+    // DELETE  DELETING
+  };
+
+  return statusMap[statusText.toUpperCase()] ?? "";
+}
+
 /** Hook*/
 onMounted(() => {
   if (leaveStore.tabMenu === "1") {
@@ -302,18 +318,7 @@ onMounted(() => {
           v-for="col in props.cols"
           :key="col.name"
           :props="props"
-          :class="
-            props.row.statusText == 'REJECT'
-              ? 'text-red'
-              : props.row.statusText == 'NEW'
-              ? 'text-blue'
-              : props.row.statusText == 'PENDING'
-              ? 'text-warning'
-              : props.row.statusText == 'DELETE' ||
-                props.row.statusText == 'DELETING'
-              ? 'text-orange'
-              : ''
-          "
+          :class="getStatusColor(props.row.statusText)"
         >
           <div v-if="col.name == 'no'">
             {{