diff --git a/src/components/TableView.vue b/src/components/TableView.vue
index 5db35ea6..8270dc60 100644
--- a/src/components/TableView.vue
+++ b/src/components/TableView.vue
@@ -7,7 +7,7 @@
         flat
         round
         :disabled="editvisible == true"
-        :color="editvisible == true ? 'grey-7' : 'primary'"
+        :color="editvisible == true ? 'grey-7' : 'edit'"
         @click="edit"
         icon="mdi-pencil-outline"
       >
diff --git a/src/components/TableView1.vue b/src/components/TableView1.vue
index d8b43c61..a6dc4310 100644
--- a/src/components/TableView1.vue
+++ b/src/components/TableView1.vue
@@ -8,7 +8,7 @@
           :outline="editvisible"
           dense
           :disabled="editvisible == true"
-          :color="editvisible == true ? 'grey-7' : 'primary'"
+          :color="editvisible == true ? 'grey-7' : 'edit'"
           label="แก้ไข"
           @click="edit"
           icon="mdi-pencil-outline"
diff --git a/src/components/information/DialogFooter.vue b/src/components/information/DialogFooter.vue
index c7b6623b..cccbac98 100644
--- a/src/components/information/DialogFooter.vue
+++ b/src/components/information/DialogFooter.vue
@@ -34,7 +34,7 @@
       flat
       round
       :disabled="editvisible"
-      :color="editvisible ? 'grey-7' : 'primary'"
+      :color="editvisible ? 'grey-7' : 'edit'"
       @click="edit"
       icon="mdi-pencil-outline"
     >
diff --git a/src/components/information/top.vue b/src/components/information/top.vue
index 416a8f04..4043ef92 100644
--- a/src/components/information/top.vue
+++ b/src/components/information/top.vue
@@ -17,7 +17,6 @@
     </div>
     <div class="q-gutter-sm q-mx-sm" v-if="addData == false">
       <q-btn
-        size="12px"
         v-if="!edit"
         flat
         round
diff --git a/src/modules/01_metadata/components/calendar/Calendar.vue b/src/modules/01_metadata/components/calendar/Calendar.vue
index a00ee70b..d5da10d4 100644
--- a/src/modules/01_metadata/components/calendar/Calendar.vue
+++ b/src/modules/01_metadata/components/calendar/Calendar.vue
@@ -147,7 +147,7 @@
           <q-btn
             v-if="!edit"
             outline
-            color="primary"
+            color="edit"
             @click="editClick"
             label="แก้ไขข้อมูล"
           >
diff --git a/src/modules/01_metadata/components/calendar/CalendarList.vue b/src/modules/01_metadata/components/calendar/CalendarList.vue
index 694e83c4..4f9ee8ae 100644
--- a/src/modules/01_metadata/components/calendar/CalendarList.vue
+++ b/src/modules/01_metadata/components/calendar/CalendarList.vue
@@ -1,3 +1,323 @@
+<script setup lang="ts">
+import { onMounted, ref, watch } from "vue";
+import { useQuasar } from "quasar";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+import type {
+  RequestItemsObject,
+  DataDateRowObject,
+  DataDateAddObject,
+  DataDateListsObject,
+  TabsObject,
+} from "@/modules/01_metadata/interface/index/Calendar";
+
+import { useCounterMixin } from "@/stores/mixin";
+
+const props = defineProps({
+  dateYear: {
+    //filter ปี วันหยุด
+    type: Number,
+    required: true,
+  },
+  refreshData: {
+    //หน้า main มีการอัพเดทค่าให้ refresh data
+    type: Boolean,
+    required: true,
+  },
+  fetchDataSummaryCalendar: {
+    //ฟังก์ชันอัพเดทสรุปวันหยุด
+    type: Function,
+    default: () => console.log("not function"),
+  },
+});
+
+const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
+const {
+  success,
+  dateToISO,
+  dateMonth2Thai,
+  weekThai,
+  messageError,
+  showLoader,
+  hideLoader,
+  dialogRemove,
+} = mixin;
+const $q = useQuasar(); //ใช้ noti quasar
+const calendarData = ref<DataDateListsObject[]>([]); //data วันหยุด
+const modalAdd = ref<boolean>(false); //modal เพิ่มวันหยุด
+const name = ref<string>(""); //ชื่อวันหยุด
+const isSpecial = ref<boolean>(true); //เช็ควันหยุด
+const dateAdd = ref<[Date, Date]>([new Date(), new Date()]); //วันที่ ที่เพิ่มเป็นวันหยุด
+const rowData = ref<DataDateListsObject>(); //data ที่ถูกเลือกใน row นั้น
+const formDate = ref<any>(); //ref เพิ่ม แก้ไข วันหยุดสำหรับ validate
+
+const currentTab = ref<string>("normal"); //เลือก tab ประเภทวันหยุด
+const tabs = ref<TabsObject[]>([
+  { label: "ทำงานจันทร์-ศุกร์ (5 วัน)", value: "normal" },
+  { label: "ทำงานจันทร์-เสาร์ (6 วัน)", value: "6day" },
+]); //tab ประเภทวันหยุดทั้งหมด
+
+//columns รายการวันหยุด
+const columns = ref<any>([
+  {
+    name: "week",
+    align: "left",
+    label: "-",
+    sortable: true,
+    field: "week",
+    style: "font-size: 15px",
+  },
+  {
+    name: "holidayDate",
+    align: "left",
+    label: "-",
+    sortable: true,
+    field: "holidayDate",
+    style: "font-size: 15px",
+  },
+  {
+    name: "detail",
+    align: "left",
+    label: "-",
+    sortable: true,
+    field: "detail",
+    style: "font-size: 15px",
+  },
+]);
+
+/**
+ * เรียกฟังก์ชันทั้งหมดตอนเรียกใช้ไฟล์นี้
+ */
+onMounted(async () => {
+  await fetchData();
+});
+
+/**
+ * ค่า props(วันปีที่เลือก และเพิ่มหรือแก้ไข) ตอนอัพเดท ค่าฏิทินให้อัพเดทใหม่
+ */
+watch(props, async (count, prevCount) => {
+  await fetchData();
+});
+
+/**
+ * กดปุ่มแก้ไขวันหยุด
+ * @param val data วันหยุดทั้ง row
+ */
+const editCalendar = async (val: DataDateListsObject) => {
+  rowData.value = val;
+  dateAdd.value = [val.dateRange[0], val.dateRange[1]];
+  name.value = val.detail;
+  isSpecial.value = true;
+  modalAdd.value = true;
+};
+
+/**
+ * กดปุ่มลบวันหยุด
+ * @param val data วันหยุดทั้ง row
+ */
+const deleteClick = async (val: DataDateListsObject) => {
+  rowData.value = val;
+  dialogRemove($q, async () => deleteConfirm());
+};
+
+/**
+ * fetch วันหยุดในรายการ
+ */
+const fetchData = async () => {
+  calendarData.value = [];
+  showLoader();
+  await http
+    .get(config.API.listHolidayHistoryYear(props.dateYear))
+    .then((res) => {
+      let data = res.data.result.normal;
+      if (currentTab.value == "6day") {
+        data = res.data.result.sixDays;
+      }
+      const dateStart = ref<Date | null>();
+      const firstEvent = ref<boolean>(true);
+      const dateRow = ref<DataDateRowObject[]>([]);
+      data.map((e: RequestItemsObject, index: number) => {
+        dateRow.value.push({
+          holidayDate: new Date(e.holidayDate),
+          name: e.name,
+          isSpecial: true,
+          id: e.id,
+        });
+        if (
+          index == data.length - 1 ||
+          data[index + 1].name != e.name ||
+          (data[index + 1].name == e.name &&
+            dateToISO(new Date(data[index + 1].holidayDate)) !=
+              dateToISO(
+                new Date(
+                  new Date(e.holidayDate).setDate(
+                    new Date(e.holidayDate).getDate() + 1
+                  )
+                )
+              ))
+        ) {
+          firstEvent.value = true;
+          calendarData.value.push({
+            id: e.id,
+            dateRange: [
+              dateStart.value ? dateStart.value : new Date(e.holidayDate),
+              new Date(e.holidayDate),
+            ],
+            dataRangeRow: dateRow.value,
+            detail:
+              dateToISO(new Date(e.holidayDate)) ==
+              dateToISO(new Date(e.originalDate))
+                ? e.name
+                : `ชดเชย ${e.name}`,
+            isSpecial: true,
+          });
+          dateStart.value = null;
+          dateRow.value = [];
+        } else if (firstEvent.value == true) {
+          firstEvent.value = false;
+          dateStart.value = new Date(e.holidayDate);
+        }
+      });
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      await props.fetchDataSummaryCalendar();
+    });
+};
+
+/**
+ * ลบข้อมูลวันหยุด
+ */
+const deleteConfirm = async () => {
+  const dataDelete = ref<DataDateAddObject[]>([]);
+  if (rowData.value != null) {
+    await rowData.value.dataRangeRow.map((e: DataDateRowObject) => {
+      dataDelete.value.push({
+        year: new Date(e.holidayDate).getFullYear(),
+        holidayDate: dateToISO(e.holidayDate),
+        name: e.name,
+        isSpecial: true,
+      });
+    });
+  } else {
+    return;
+  }
+  showLoader();
+  await http
+    .post(
+      config.API.listHolidayHistoryDelete(currentTab.value),
+      dataDelete.value
+    )
+    .then((res) => {
+      success($q, "ลบข้อมูลสำเร็จ");
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      await fetchData();
+    });
+};
+
+/**
+ * บันทึกแก้ไขวันหยุด
+ */
+const editData = async () => {
+  await formDate.value.validate().then(async (result: boolean) => {
+    if (result) {
+      const dataEdit = ref<DataDateAddObject[]>([]);
+      let i = 0;
+      const dateStart = ref<Date>(dateAdd.value[0]);
+      do {
+        i = i + 1;
+        dataEdit.value.push({
+          year: new Date(dateStart.value).getFullYear(),
+          holidayDate: dateToISO(new Date(dateStart.value)),
+          name: name.value,
+          isSpecial: true,
+        });
+        dateStart.value = new Date(
+          new Date(dateStart.value).setDate(
+            new Date(dateStart.value).getDate() + 1
+          )
+        );
+      } while (new Date(dateStart.value) <= new Date(dateAdd.value[1]));
+      const _dataHistory = ref<DataDateAddObject[]>([]);
+      if (rowData.value != null) {
+        rowData.value.dataRangeRow.map(
+          (e: DataDateRowObject, index: number) => {
+            _dataHistory.value.push({
+              year: new Date(e.holidayDate).getFullYear(),
+              holidayDate: dateToISO(e.holidayDate),
+              name: e.name,
+              isSpecial: true,
+            });
+          }
+        );
+      }
+      showLoader();
+      await http
+        .post(config.API.listHolidayHistoryEdit(currentTab.value), {
+          history: _dataHistory.value,
+          updated: dataEdit.value,
+        })
+        .then((res) => {
+          modalAdd.value = false;
+          success($q, "แก้ไขข้อมูลสำเร็จ");
+        })
+        .catch((e) => {
+          messageError($q, e);
+        })
+        .finally(async () => {
+          await fetchData();
+        });
+    } else {
+    }
+  });
+};
+
+/**
+ * เปลี่ยน tab ดูวันหยุดตามประเภท
+ * @param tab tab ประเภทวันหยุดที่เลือก
+ */
+const changeTab = async (tab: string) => {
+  currentTab.value = tab;
+  await fetchData();
+};
+
+/**
+ * แปลงช่วงวันที่ถ้า2ค่าเป็นวันเดียวกันจะโชววันเดียวแต่ถ้าไม่เท่ากันจะแสดงเป็นช่วง
+ * @param val ช่วงวันที่
+ */
+const dateThaiRange = (val: [Date, Date]) => {
+  if (val === null) {
+    return "";
+  } else if (dateMonth2Thai(val[0], true) === dateMonth2Thai(val[1], true)) {
+    return `${dateMonth2Thai(val[0], true)}`;
+  } else {
+    return `${dateMonth2Thai(val[0], true)} - ${dateMonth2Thai(val[1], true)}`;
+  }
+};
+
+/**
+ * แปลงช่วงวันที่ถ้า2ค่าเป็นวันเดียวกันจะโชววันเดียวแต่ถ้าไม่เท่ากันจะแสดงเป็นช่วง(เช่นวันจันทร์ -วันศุกร์)
+ * @param val ช่วงวันที่
+ */
+const dayThaiRange = (val: [Date, Date]) => {
+  if (val === null) {
+  } else if (dateToISO(val[0]) == dateToISO(val[1])) {
+    return `${weekThai(new Date(val[0]).getDay())}`;
+  } else {
+    return `${weekThai(new Date(val[0]).getDay())} - ${weekThai(
+      new Date(val[1]).getDay()
+    )}`;
+  }
+};
+</script>
+
 <!-- tab รายการ หน้าปฏิทินวันหยุด -->
 <template>
   <q-card class="q-mt-md" flat bordered>
@@ -37,14 +357,7 @@
           <template v-slot:body="props">
             <q-tr :props="props">
               <q-td auto-width>
-                <q-btn
-                  flat
-                  round
-                  color="grey"
-                  @click.stop
-                  size="10px"
-                  icon="more_vert"
-                >
+                <q-btn flat round color="grey" @click.stop icon="more_vert">
                   <q-menu>
                     <q-list>
                       <q-item
@@ -53,7 +366,10 @@
                         @click="editCalendar(props.row)"
                       >
                         <q-item-section>
-                          <q-item-label>แก้ไขวันหยุด</q-item-label>
+                          <div class="row items-center">
+                            <q-icon color="edit" name="edit" size="xs" />
+                            <div class="q-pl-md">แก้ไขวันหยุด</div>
+                          </div>
                         </q-item-section>
                       </q-item>
                       <q-item
@@ -62,7 +378,10 @@
                         @click="deleteClick(props.row)"
                       >
                         <q-item-section>
-                          <q-item-label>ลบวันหยุด</q-item-label>
+                          <div class="row items-center">
+                            <q-icon color="red" name="mdi-delete" size="xs" />
+                            <div class="q-pl-md">ลบวันหยุด</div>
+                          </div>
                         </q-item-section>
                       </q-item>
                     </q-list>
@@ -233,364 +552,7 @@
       </q-form>
     </q-card>
   </q-dialog>
-
-  <!-- modal ลบวันหยุด -->
-  <q-dialog v-model="modalDelete" persistent>
-    <q-card style="min-width: 550px">
-      <q-card-section class="row items-center q-pb-xs">
-        <div class="text-bold">ต้องการลบข้อมูลนี้หรือไม่?</div>
-        <q-space />
-        <q-btn
-          icon="close"
-          unelevated
-          round
-          dense
-          v-close-popup
-          style="color: #ff8080; background-color: #ffdede"
-        />
-      </q-card-section>
-      <q-separator />
-      <q-card-section class="row items-center">
-        <div class="q-pr-md">
-          <q-avatar
-            icon="mdi-trash-can-outline"
-            font-size="25px"
-            size="lg"
-            color="red-1"
-            text-color="red"
-          />
-        </div>
-        <div class="col text-dark">
-          <span>ข้อมูลที่กำลังถูกลบนี้จะมีผลใช้งานทันที</span>
-        </div>
-      </q-card-section>
-      <q-separator />
-      <q-card-actions align="right" class="bg-white text-teal">
-        <q-btn label="ตกลง" color="primary" @click="deleteConfirm" />
-      </q-card-actions>
-    </q-card>
-  </q-dialog>
 </template>
-<script setup lang="ts">
-import { onMounted, ref, watch } from "vue";
-import { useQuasar } from "quasar";
-import http from "@/plugins/http";
-import config from "@/app.config";
-
-import type {
-  RequestItemsObject,
-  DataDateRowObject,
-  DataDateAddObject,
-  DataDateListsObject,
-  TabsObject,
-} from "@/modules/01_metadata/interface/index/Calendar";
-
-import { useCounterMixin } from "@/stores/mixin";
-
-const props = defineProps({
-  dateYear: {
-    //filter ปี วันหยุด
-    type: Number,
-    required: true,
-  },
-  refreshData: {
-    //หน้า main มีการอัพเดทค่าให้ refresh data
-    type: Boolean,
-    required: true,
-  },
-  fetchDataSummaryCalendar: {
-    //ฟังก์ชันอัพเดทสรุปวันหยุด
-    type: Function,
-    default: () => console.log("not function"),
-  },
-});
-
-const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
-const {
-  success,
-  dateToISO,
-  dateMonth2Thai,
-  weekThai,
-  messageError,
-  showLoader,
-  hideLoader,
-} = mixin;
-const $q = useQuasar(); //ใช้ noti quasar
-const calendarData = ref<DataDateListsObject[]>([]); //data วันหยุด
-const modalAdd = ref<boolean>(false); //modal เพิ่มวันหยุด
-const modalDelete = ref<boolean>(false); //modal ลบวันหยุด
-const name = ref<string>(""); //ชื่อวันหยุด
-const isSpecial = ref<boolean>(true); //เช็ควันหยุด
-const dateAdd = ref<[Date, Date]>([new Date(), new Date()]); //วันที่ ที่เพิ่มเป็นวันหยุด
-const rowData = ref<DataDateListsObject>(); //data ที่ถูกเลือกใน row นั้น
-const formDate = ref<any>(); //ref เพิ่ม แก้ไข วันหยุดสำหรับ validate
-
-const currentTab = ref<string>("normal"); //เลือก tab ประเภทวันหยุด
-const tabs = ref<TabsObject[]>([
-  { label: "ทำงานจันทร์-ศุกร์ (5 วัน)", value: "normal" },
-  { label: "ทำงานจันทร์-เสาร์ (6 วัน)", value: "6day" },
-]); //tab ประเภทวันหยุดทั้งหมด
-
-//columns รายการวันหยุด
-const columns = ref<any>([
-  {
-    name: "week",
-    align: "left",
-    label: "-",
-    sortable: true,
-    field: "week",
-    style: "font-size: 15px",
-  },
-  {
-    name: "holidayDate",
-    align: "left",
-    label: "-",
-    sortable: true,
-    field: "holidayDate",
-    style: "font-size: 15px",
-  },
-  {
-    name: "detail",
-    align: "left",
-    label: "-",
-    sortable: true,
-    field: "detail",
-    style: "font-size: 15px",
-  },
-]);
-
-/**
- * เรียกฟังก์ชันทั้งหมดตอนเรียกใช้ไฟล์นี้
- */
-onMounted(async () => {
-  await fetchData();
-});
-
-/**
- * ค่า props(วันปีที่เลือก และเพิ่มหรือแก้ไข) ตอนอัพเดท ค่าฏิทินให้อัพเดทใหม่
- */
-watch(props, async (count, prevCount) => {
-  await fetchData();
-});
-
-/**
- * กดปุ่มแก้ไขวันหยุด
- * @param val data วันหยุดทั้ง row
- */
-const editCalendar = async (val: DataDateListsObject) => {
-  rowData.value = val;
-  dateAdd.value = [val.dateRange[0], val.dateRange[1]];
-  name.value = val.detail;
-  isSpecial.value = true;
-  modalAdd.value = true;
-};
-
-/**
- * กดปุ่มลบวันหยุด
- * @param val data วันหยุดทั้ง row
- */
-const deleteClick = async (val: DataDateListsObject) => {
-  rowData.value = val;
-  modalDelete.value = true;
-};
-
-/**
- * fetch วันหยุดในรายการ
- */
-const fetchData = async () => {
-  calendarData.value = [];
-  showLoader();
-  await http
-    .get(config.API.listHolidayHistoryYear(props.dateYear))
-    .then((res) => {
-      let data = res.data.result.normal;
-      if (currentTab.value == "6day") {
-        data = res.data.result.sixDays;
-      }
-      const dateStart = ref<Date | null>();
-      const firstEvent = ref<boolean>(true);
-      const dateRow = ref<DataDateRowObject[]>([]);
-      data.map((e: RequestItemsObject, index: number) => {
-        dateRow.value.push({
-          holidayDate: new Date(e.holidayDate),
-          name: e.name,
-          isSpecial: true,
-          id: e.id,
-        });
-        if (
-          index == data.length - 1 ||
-          data[index + 1].name != e.name ||
-          (data[index + 1].name == e.name &&
-            dateToISO(new Date(data[index + 1].holidayDate)) !=
-              dateToISO(
-                new Date(
-                  new Date(e.holidayDate).setDate(
-                    new Date(e.holidayDate).getDate() + 1
-                  )
-                )
-              ))
-        ) {
-          firstEvent.value = true;
-          calendarData.value.push({
-            id: e.id,
-            dateRange: [
-              dateStart.value ? dateStart.value : new Date(e.holidayDate),
-              new Date(e.holidayDate),
-            ],
-            dataRangeRow: dateRow.value,
-            detail:
-              dateToISO(new Date(e.holidayDate)) ==
-              dateToISO(new Date(e.originalDate))
-                ? e.name
-                : `ชดเชย ${e.name}`,
-            isSpecial: true,
-          });
-          dateStart.value = null;
-          dateRow.value = [];
-        } else if (firstEvent.value == true) {
-          firstEvent.value = false;
-          dateStart.value = new Date(e.holidayDate);
-        }
-      });
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(async () => {
-      await props.fetchDataSummaryCalendar();
-    });
-};
-
-/**
- * ลบข้อมูลวันหยุด
- */
-const deleteConfirm = async () => {
-  modalDelete.value = false;
-  const dataDelete = ref<DataDateAddObject[]>([]);
-  if (rowData.value != null) {
-    await rowData.value.dataRangeRow.map((e: DataDateRowObject) => {
-      dataDelete.value.push({
-        year: new Date(e.holidayDate).getFullYear(),
-        holidayDate: dateToISO(e.holidayDate),
-        name: e.name,
-        isSpecial: true,
-      });
-    });
-  } else {
-    return;
-  }
-  showLoader();
-  await http
-    .post(
-      config.API.listHolidayHistoryDelete(currentTab.value),
-      dataDelete.value
-    )
-    .then((res) => {
-      success($q, "ลบข้อมูลสำเร็จ");
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(async () => {
-      await fetchData();
-    });
-};
-
-/**
- * บันทึกแก้ไขวันหยุด
- */
-const editData = async () => {
-  await formDate.value.validate().then(async (result: boolean) => {
-    if (result) {
-      const dataEdit = ref<DataDateAddObject[]>([]);
-      let i = 0;
-      const dateStart = ref<Date>(dateAdd.value[0]);
-      do {
-        i = i + 1;
-        dataEdit.value.push({
-          year: new Date(dateStart.value).getFullYear(),
-          holidayDate: dateToISO(new Date(dateStart.value)),
-          name: name.value,
-          isSpecial: true,
-        });
-        dateStart.value = new Date(
-          new Date(dateStart.value).setDate(
-            new Date(dateStart.value).getDate() + 1
-          )
-        );
-      } while (new Date(dateStart.value) <= new Date(dateAdd.value[1]));
-      const _dataHistory = ref<DataDateAddObject[]>([]);
-      if (rowData.value != null) {
-        rowData.value.dataRangeRow.map(
-          (e: DataDateRowObject, index: number) => {
-            _dataHistory.value.push({
-              year: new Date(e.holidayDate).getFullYear(),
-              holidayDate: dateToISO(e.holidayDate),
-              name: e.name,
-              isSpecial: true,
-            });
-          }
-        );
-      }
-      showLoader();
-      await http
-        .post(config.API.listHolidayHistoryEdit(currentTab.value), {
-          history: _dataHistory.value,
-          updated: dataEdit.value,
-        })
-        .then((res) => {
-          modalAdd.value = false;
-          success($q, "แก้ไขข้อมูลสำเร็จ");
-        })
-        .catch((e) => {
-          messageError($q, e);
-        })
-        .finally(async () => {
-          await fetchData();
-        });
-    } else {
-    }
-  });
-};
-
-/**
- * เปลี่ยน tab ดูวันหยุดตามประเภท
- * @param tab tab ประเภทวันหยุดที่เลือก
- */
-const changeTab = async (tab: string) => {
-  currentTab.value = tab;
-  await fetchData();
-};
-
-/**
- * แปลงช่วงวันที่ถ้า2ค่าเป็นวันเดียวกันจะโชววันเดียวแต่ถ้าไม่เท่ากันจะแสดงเป็นช่วง
- * @param val ช่วงวันที่
- */
-const dateThaiRange = (val: [Date, Date]) => {
-  if (val === null) {
-    return "";
-  } else if (dateMonth2Thai(val[0], true) === dateMonth2Thai(val[1], true)) {
-    return `${dateMonth2Thai(val[0], true)}`;
-  } else {
-    return `${dateMonth2Thai(val[0], true)} - ${dateMonth2Thai(val[1], true)}`;
-  }
-};
-
-/**
- * แปลงช่วงวันที่ถ้า2ค่าเป็นวันเดียวกันจะโชววันเดียวแต่ถ้าไม่เท่ากันจะแสดงเป็นช่วง(เช่นวันจันทร์ -วันศุกร์)
- * @param val ช่วงวันที่
- */
-const dayThaiRange = (val: [Date, Date]) => {
-  if (val === null) {
-  } else if (dateToISO(val[0]) == dateToISO(val[1])) {
-    return `${weekThai(new Date(val[0]).getDay())}`;
-  } else {
-    return `${weekThai(new Date(val[0]).getDay())} - ${weekThai(
-      new Date(val[1]).getDay()
-    )}`;
-  }
-};
-</script>
 
 <style lang="scss" scope>
 .custom-header-table {
diff --git a/src/modules/01_metadata/components/competency/01ListCompetency.vue b/src/modules/01_metadata/components/competency/01ListCompetency.vue
index da5098b3..7fd05d14 100644
--- a/src/modules/01_metadata/components/competency/01ListCompetency.vue
+++ b/src/modules/01_metadata/components/competency/01ListCompetency.vue
@@ -242,7 +242,6 @@ onMounted(() => {
             flat
             dense
             round
-            size="12px"
             icon="mdi-delete"
             clickable
             @click.stop="deleteData(props.row.id)"
diff --git a/src/modules/01_metadata/components/competency/02ListLinkPosition.vue b/src/modules/01_metadata/components/competency/02ListLinkPosition.vue
index 86d8a93b..badd8a20 100644
--- a/src/modules/01_metadata/components/competency/02ListLinkPosition.vue
+++ b/src/modules/01_metadata/components/competency/02ListLinkPosition.vue
@@ -276,7 +276,6 @@ onMounted(async () => {
             dense
             round
             class="q-mr-xs"
-            size="12px"
             icon="edit"
             clickable
             @click="onEdit(props.row)"
@@ -288,7 +287,6 @@ onMounted(async () => {
             flat
             dense
             round
-            size="12px"
             icon="mdi-delete"
             clickable
             @click.stop="
diff --git a/src/modules/01_metadata/components/competency/03ListLinkGroup.vue b/src/modules/01_metadata/components/competency/03ListLinkGroup.vue
index 7fda160a..c5f9b161 100644
--- a/src/modules/01_metadata/components/competency/03ListLinkGroup.vue
+++ b/src/modules/01_metadata/components/competency/03ListLinkGroup.vue
@@ -434,7 +434,6 @@ onMounted(async () => {
             dense
             round
             class="q-mr-xs"
-            size="12px"
             icon="edit"
             clickable
             @click="onEdit(props.row.id)"
@@ -446,7 +445,6 @@ onMounted(async () => {
             flat
             dense
             round
-            size="12px"
             icon="mdi-delete"
             clickable
             @click.stop="
diff --git a/src/modules/01_metadata/components/insignia/InsigniaList.vue b/src/modules/01_metadata/components/insignia/InsigniaList.vue
index 2cdd6e45..bf6a4697 100644
--- a/src/modules/01_metadata/components/insignia/InsigniaList.vue
+++ b/src/modules/01_metadata/components/insignia/InsigniaList.vue
@@ -347,7 +347,6 @@ const dialogOrder = ref<boolean>(false);
               dense
               round
               class="q-mr-xs"
-              size="12px"
               icon="edit"
               clickable
               @click.stop="
@@ -369,7 +368,6 @@ const dialogOrder = ref<boolean>(false);
               flat
               dense
               round
-              size="12px"
               icon="mdi-delete"
               clickable
               @click.stop="
@@ -402,7 +400,6 @@ const dialogOrder = ref<boolean>(false);
               {{ col.value }}
             </div>
           </q-td>
-
         </q-tr>
       </template>
     </d-table>
diff --git a/src/modules/01_metadata/components/insignia/InsigniaType.vue b/src/modules/01_metadata/components/insignia/InsigniaType.vue
index 90700c5a..5c9c2ce9 100644
--- a/src/modules/01_metadata/components/insignia/InsigniaType.vue
+++ b/src/modules/01_metadata/components/insignia/InsigniaType.vue
@@ -261,14 +261,13 @@ async function onSubmit() {
           class="cursor-pointer"
           @click.stop="onclickDetail(props.row.id)"
         >
-        <q-td auto-width>
+          <q-td auto-width>
             <q-btn
               color="edit"
               flat
               dense
               round
               class="q-mr-xs"
-              size="12px"
               icon="edit"
               clickable
               @click.stop="
@@ -288,7 +287,6 @@ async function onSubmit() {
             flat
             dense
             round
-            size="12px"
             icon="mdi-delete"
             clickable
             @click.stop="
@@ -318,7 +316,6 @@ async function onSubmit() {
               {{ col.value }}
             </div>
           </q-td>
-
         </q-tr>
       </template>
     </d-table>
diff --git a/src/modules/01_metadata/components/personal/01ListPrefix.vue b/src/modules/01_metadata/components/personal/01ListPrefix.vue
index 330e8d55..5313b8fc 100644
--- a/src/modules/01_metadata/components/personal/01ListPrefix.vue
+++ b/src/modules/01_metadata/components/personal/01ListPrefix.vue
@@ -215,7 +215,6 @@ onMounted(async () => {
             dense
             round
             class="q-mr-xs"
-            size="12px"
             icon="edit"
             clickable
             @click.stop="
@@ -234,7 +233,6 @@ onMounted(async () => {
             flat
             dense
             round
-            size="12px"
             icon="mdi-delete"
             clickable
             @click.stop="
diff --git a/src/modules/01_metadata/components/personal/02ListRank.vue b/src/modules/01_metadata/components/personal/02ListRank.vue
index a81a3bb8..8bb41893 100644
--- a/src/modules/01_metadata/components/personal/02ListRank.vue
+++ b/src/modules/01_metadata/components/personal/02ListRank.vue
@@ -211,7 +211,6 @@ onMounted(async () => {
             dense
             round
             class="q-mr-xs"
-            size="12px"
             icon="edit"
             clickable
             @click.stop="
@@ -230,7 +229,6 @@ onMounted(async () => {
             flat
             dense
             round
-            size="12px"
             icon="mdi-delete"
             clickable
             @click.stop="
diff --git a/src/modules/01_metadata/components/personal/03ListBloodGroup.vue b/src/modules/01_metadata/components/personal/03ListBloodGroup.vue
index d60f2c0c..b615657a 100644
--- a/src/modules/01_metadata/components/personal/03ListBloodGroup.vue
+++ b/src/modules/01_metadata/components/personal/03ListBloodGroup.vue
@@ -211,7 +211,6 @@ onMounted(async () => {
             dense
             round
             class="q-mr-xs"
-            size="12px"
             icon="edit"
             clickable
             @click.stop="
@@ -230,7 +229,6 @@ onMounted(async () => {
             flat
             dense
             round
-            size="12px"
             icon="mdi-delete"
             clickable
             @click.stop="
diff --git a/src/modules/01_metadata/components/personal/04ListGender.vue b/src/modules/01_metadata/components/personal/04ListGender.vue
index 241c842d..73aed95b 100644
--- a/src/modules/01_metadata/components/personal/04ListGender.vue
+++ b/src/modules/01_metadata/components/personal/04ListGender.vue
@@ -211,7 +211,6 @@ onMounted(async () => {
             dense
             round
             class="q-mr-xs"
-            size="12px"
             icon="edit"
             clickable
             @click.stop="
@@ -230,7 +229,6 @@ onMounted(async () => {
             flat
             dense
             round
-            size="12px"
             icon="mdi-delete"
             clickable
             @click.stop="
diff --git a/src/modules/01_metadata/components/personal/05ListReligion.vue b/src/modules/01_metadata/components/personal/05ListReligion.vue
index 6fa6c229..29714a9f 100644
--- a/src/modules/01_metadata/components/personal/05ListReligion.vue
+++ b/src/modules/01_metadata/components/personal/05ListReligion.vue
@@ -211,7 +211,6 @@ onMounted(async () => {
             dense
             round
             class="q-mr-xs"
-            size="12px"
             icon="edit"
             clickable
             @click.stop="
@@ -230,7 +229,6 @@ onMounted(async () => {
             flat
             dense
             round
-            size="12px"
             icon="mdi-delete"
             clickable
             @click.stop="
diff --git a/src/modules/01_metadata/components/personal/06ListRelationship.vue b/src/modules/01_metadata/components/personal/06ListRelationship.vue
index 54441dfc..97a95f81 100644
--- a/src/modules/01_metadata/components/personal/06ListRelationship.vue
+++ b/src/modules/01_metadata/components/personal/06ListRelationship.vue
@@ -239,7 +239,6 @@ onMounted(async () => {
             dense
             round
             class="q-mr-xs"
-            size="12px"
             icon="edit"
             clickable
             @click.stop="
@@ -258,7 +257,6 @@ onMounted(async () => {
             flat
             dense
             round
-            size="12px"
             icon="mdi-delete"
             clickable
             @click.stop="
diff --git a/src/modules/01_metadata/components/personal/07ListEducationLevel.vue b/src/modules/01_metadata/components/personal/07ListEducationLevel.vue
index c6eb310c..0296b761 100644
--- a/src/modules/01_metadata/components/personal/07ListEducationLevel.vue
+++ b/src/modules/01_metadata/components/personal/07ListEducationLevel.vue
@@ -225,7 +225,6 @@ onMounted(async () => {
             dense
             round
             class="q-mr-xs"
-            size="12px"
             icon="edit"
             clickable
             @click.stop="
@@ -245,7 +244,6 @@ onMounted(async () => {
             flat
             dense
             round
-            size="12px"
             icon="mdi-delete"
             clickable
             @click.stop="
diff --git a/src/modules/01_metadata/components/personal/08ListProvince.vue b/src/modules/01_metadata/components/personal/08ListProvince.vue
index 9aeb2dfe..28c5419a 100644
--- a/src/modules/01_metadata/components/personal/08ListProvince.vue
+++ b/src/modules/01_metadata/components/personal/08ListProvince.vue
@@ -215,7 +215,6 @@ onMounted(async () => {
             dense
             round
             class="q-mr-xs"
-            size="12px"
             icon="edit"
             clickable
             @click.stop="
@@ -234,7 +233,6 @@ onMounted(async () => {
             flat
             dense
             round
-            size="12px"
             icon="mdi-delete"
             clickable
             @click.stop="
diff --git a/src/modules/01_metadata/components/personal/province/01_District.vue b/src/modules/01_metadata/components/personal/province/01_District.vue
index 6e458460..d0813e7a 100644
--- a/src/modules/01_metadata/components/personal/province/01_District.vue
+++ b/src/modules/01_metadata/components/personal/province/01_District.vue
@@ -255,7 +255,6 @@ onMounted(async () => {
                 dense
                 round
                 class="q-mr-xs"
-                size="12px"
                 icon="edit"
                 clickable
                 @click.stop="
@@ -274,7 +273,6 @@ onMounted(async () => {
                 flat
                 dense
                 round
-                size="12px"
                 icon="mdi-delete"
                 clickable
                 @click.stop="
diff --git a/src/modules/01_metadata/components/personal/province/02_SubDistrict.vue b/src/modules/01_metadata/components/personal/province/02_SubDistrict.vue
index 78aada20..f86e640c 100644
--- a/src/modules/01_metadata/components/personal/province/02_SubDistrict.vue
+++ b/src/modules/01_metadata/components/personal/province/02_SubDistrict.vue
@@ -268,7 +268,6 @@ onMounted(async () => {
                 dense
                 round
                 class="q-mr-xs"
-                size="12px"
                 icon="edit"
                 clickable
                 @click.stop="
@@ -288,7 +287,6 @@ onMounted(async () => {
                 flat
                 dense
                 round
-                size="12px"
                 icon="mdi-delete"
                 clickable
                 @click.stop="
diff --git a/src/modules/01_metadata/components/position-employee/01ListPosition.vue b/src/modules/01_metadata/components/position-employee/01ListPosition.vue
index 58f65a35..c3c742a6 100644
--- a/src/modules/01_metadata/components/position-employee/01ListPosition.vue
+++ b/src/modules/01_metadata/components/position-employee/01ListPosition.vue
@@ -352,7 +352,6 @@ onMounted(() => {
               dense
               round
               class="q-mr-xs"
-              size="12px"
               icon="mdi-content-copy"
               clickable
               @click.stop="
@@ -368,7 +367,6 @@ onMounted(() => {
               flat
               dense
               round
-              size="12px"
               icon="mdi-pencil"
               clickable
               @click.stop="onClickOpenDialog(true, props.row)"
@@ -381,7 +379,6 @@ onMounted(() => {
               flat
               dense
               round
-              size="12px"
               icon="mdi-delete"
               clickable
               @click.stop="deletePos(props.row.id)"
@@ -399,7 +396,6 @@ onMounted(() => {
               {{ col.value ? col.value : "-" }}
             </div>
           </q-td>
-
         </q-tr>
       </template>
     </d-table>
diff --git a/src/modules/01_metadata/components/position-employee/02ListType.vue b/src/modules/01_metadata/components/position-employee/02ListType.vue
index c3d20935..5236af84 100644
--- a/src/modules/01_metadata/components/position-employee/02ListType.vue
+++ b/src/modules/01_metadata/components/position-employee/02ListType.vue
@@ -263,7 +263,6 @@ onMounted(() => {
             dense
             round
             class="q-mr-xs"
-            size="12px"
             icon="edit"
             @click.stop="onClickOpenDialogEdit(props.row)"
           >
@@ -274,7 +273,6 @@ onMounted(() => {
             flat
             dense
             round
-            size="12px"
             icon="mdi-delete"
             clickable
             @click.stop="onClickDelete(props.row.id)"
diff --git a/src/modules/01_metadata/components/position-employee/03ListLevel.vue b/src/modules/01_metadata/components/position-employee/03ListLevel.vue
index 39655a27..c0808c06 100644
--- a/src/modules/01_metadata/components/position-employee/03ListLevel.vue
+++ b/src/modules/01_metadata/components/position-employee/03ListLevel.vue
@@ -290,7 +290,6 @@ onMounted(() => {
                 dense
                 round
                 class="q-mr-xs"
-                size="12px"
                 icon="edit"
                 @click.stop.pervent="onClickOpenDialog(true, props.row)"
               >
@@ -301,7 +300,6 @@ onMounted(() => {
                 flat
                 dense
                 round
-                size="12px"
                 icon="mdi-delete"
                 @click="onClickDelete(props.row.id)"
               >
@@ -319,7 +317,6 @@ onMounted(() => {
                 {{ col.value }}
               </div>
             </q-td>
-
           </q-tr>
         </template>
       </d-table>
diff --git a/src/modules/01_metadata/components/position/01ListPosition.vue b/src/modules/01_metadata/components/position/01ListPosition.vue
index 3bd4f919..0fc9ba9c 100644
--- a/src/modules/01_metadata/components/position/01ListPosition.vue
+++ b/src/modules/01_metadata/components/position/01ListPosition.vue
@@ -353,7 +353,6 @@ onMounted(() => {
               dense
               round
               class="q-mr-xs"
-              size="12px"
               icon="mdi-content-copy"
               clickable
               @click.stop="
@@ -369,7 +368,6 @@ onMounted(() => {
               flat
               dense
               round
-              size="12px"
               icon="mdi-pencil"
               clickable
               @click.stop="editDetiail(props.row)"
@@ -382,7 +380,6 @@ onMounted(() => {
               flat
               dense
               round
-              size="12px"
               icon="mdi-delete"
               clickable
               @click.stop="deletePos(props.row.id)"
diff --git a/src/modules/01_metadata/components/position/02ListType.vue b/src/modules/01_metadata/components/position/02ListType.vue
index a17cb369..dd68b3bb 100644
--- a/src/modules/01_metadata/components/position/02ListType.vue
+++ b/src/modules/01_metadata/components/position/02ListType.vue
@@ -263,7 +263,6 @@ async function onSubmit() {
             dense
             round
             class="q-mr-xs"
-            size="12px"
             icon="edit"
             clickable
             @click.stop="
@@ -283,7 +282,6 @@ async function onSubmit() {
             flat
             dense
             round
-            size="12px"
             icon="mdi-delete"
             clickable
             @click.stop="
diff --git a/src/modules/01_metadata/components/position/04ListExecutive.vue b/src/modules/01_metadata/components/position/04ListExecutive.vue
index 38e506de..e98f32ad 100644
--- a/src/modules/01_metadata/components/position/04ListExecutive.vue
+++ b/src/modules/01_metadata/components/position/04ListExecutive.vue
@@ -195,7 +195,6 @@ onMounted(() => {
               dense
               round
               class="q-mr-xs"
-              size="12px"
               icon="edit"
               clickable
               @click.stop="
@@ -211,7 +210,6 @@ onMounted(() => {
               flat
               dense
               round
-              size="12px"
               icon="mdi-delete"
               clickable
               @click.stop="deletePos(props.row.id)"
diff --git a/src/modules/01_metadata/components/position/05ListLevelDetail.vue b/src/modules/01_metadata/components/position/05ListLevelDetail.vue
index 38d2218e..4b56583b 100644
--- a/src/modules/01_metadata/components/position/05ListLevelDetail.vue
+++ b/src/modules/01_metadata/components/position/05ListLevelDetail.vue
@@ -321,7 +321,6 @@ onMounted(async () => {
               dense
               round
               class="q-mr-xs"
-              size="12px"
               icon="edit"
               clickable
               @click.stop="
@@ -349,7 +348,6 @@ onMounted(async () => {
               flat
               dense
               round
-              size="12px"
               icon="mdi-delete"
               clickable
               @click.stop="
diff --git a/src/modules/01_metadata/views/Assignment.vue b/src/modules/01_metadata/views/Assignment.vue
index 1d766656..102e582e 100644
--- a/src/modules/01_metadata/views/Assignment.vue
+++ b/src/modules/01_metadata/views/Assignment.vue
@@ -284,7 +284,6 @@ onMounted(() => {
                 flat
                 round
                 color="red"
-                size="14px"
                 icon="mdi-delete "
                 @click.pervent="onClickDelete(props.row.id)"
               >
diff --git a/src/modules/01_metadata/views/indicatorByPlan.vue b/src/modules/01_metadata/views/indicatorByPlan.vue
index 1c812e17..31da8c0d 100644
--- a/src/modules/01_metadata/views/indicatorByPlan.vue
+++ b/src/modules/01_metadata/views/indicatorByPlan.vue
@@ -416,14 +416,7 @@ onMounted(async () => {
                   </div>
                 </q-td>
                 <q-td auto-width>
-                  <q-btn
-                    flat
-                    round
-                    color="grey"
-                    @click.stop
-                    size="14px"
-                    icon="more_vert"
-                  >
+                  <q-btn flat round color="grey" @click.stop icon="more_vert">
                     <q-menu>
                       <q-list style="min-width: 180px">
                         <q-item
@@ -438,7 +431,7 @@ onMounted(async () => {
                           >
                             <q-tooltip>แก้ไขข้อมูล</q-tooltip>
                             <q-icon
-                              color="primary"
+                              color="edit"
                               size="xs"
                               name="mdi-pencil-outline"
                             />
diff --git a/src/modules/01_metadata/views/indicatorByRole.vue b/src/modules/01_metadata/views/indicatorByRole.vue
index 047b6d46..a8c57be1 100644
--- a/src/modules/01_metadata/views/indicatorByRole.vue
+++ b/src/modules/01_metadata/views/indicatorByRole.vue
@@ -451,14 +451,7 @@ onMounted(async () => {
               </div>
             </q-td>
             <q-td auto-width>
-              <q-btn
-                flat
-                round
-                color="grey"
-                @click.stop
-                size="14px"
-                icon="more_vert"
-              >
+              <q-btn flat round color="grey" @click.stop icon="more_vert">
                 <q-menu>
                   <q-list style="min-width: 180px">
                     <q-item
@@ -473,7 +466,7 @@ onMounted(async () => {
                       >
                         <q-tooltip>แก้ไขข้อมูล</q-tooltip>
                         <q-icon
-                          color="primary"
+                          color="edit"
                           size="xs"
                           name="mdi-pencil-outline"
                         />
diff --git a/src/modules/04_system/components/cardAutoBackup.vue b/src/modules/04_system/components/cardAutoBackup.vue
index 22edb17a..0f133d1d 100644
--- a/src/modules/04_system/components/cardAutoBackup.vue
+++ b/src/modules/04_system/components/cardAutoBackup.vue
@@ -467,8 +467,7 @@ watch(tab, () => {
               flat
               round
               icon="edit"
-              color="primary"
-              size="12px"
+              color="edit"
               @click.petvent="
                 () => {
                   typeOnSubmit = 'edit';
@@ -477,7 +476,7 @@ watch(tab, () => {
                 }
               "
             >
-              <q-tooltip>ลบข้อมูลสำรอง </q-tooltip>
+              <q-tooltip>แก้ไขการสำรองข้อมูล</q-tooltip>
             </q-btn>
 
             <q-btn
@@ -487,10 +486,9 @@ watch(tab, () => {
               :disable="restoreRunTotal !== 0"
               icon="delete"
               color="red"
-              size="12px"
               @click.petvent="onDelete(props.row.id)"
             >
-              <q-tooltip>คืนค่า </q-tooltip>
+              <q-tooltip>ลบรายการสำรองข้อมูล</q-tooltip>
             </q-btn>
           </q-td>
         </q-tr>
diff --git a/src/modules/04_system/components/cardBackupRestore.vue b/src/modules/04_system/components/cardBackupRestore.vue
index af94403a..b47d0a1b 100644
--- a/src/modules/04_system/components/cardBackupRestore.vue
+++ b/src/modules/04_system/components/cardBackupRestore.vue
@@ -237,10 +237,9 @@ function onRestore(name: string) {
               round
               icon="delete"
               color="red"
-              size="12px"
               @click.petvent="onDelete(props.row.name)"
             >
-              <q-tooltip>ลบข้อมูลสำรอง </q-tooltip>
+              <q-tooltip>ลบข้อมูลสำรอง</q-tooltip>
             </q-btn>
 
             <q-btn
@@ -250,11 +249,10 @@ function onRestore(name: string) {
               round
               :disable="restoreRunTotal !== 0"
               icon="restore"
-              color="primary"
-              size="12px"
+              color="blue"
               @click.petvent="onRestore(props.row.name)"
             >
-              <q-tooltip>คืนค่า </q-tooltip>
+              <q-tooltip>คืนค่า</q-tooltip>
             </q-btn>
           </q-td>
         </q-tr>