diff --git a/src/modules/05_leave/components/ListCalendar.vue b/src/modules/05_leave/components/ListCalendar.vue
deleted file mode 100644
index 96aded9..0000000
--- a/src/modules/05_leave/components/ListCalendar.vue
+++ /dev/null
@@ -1,203 +0,0 @@
-<script setup lang="ts">
-import { ref, onMounted } from "vue"
-import { useQuasar } from "quasar"
-import http from "@/plugins/http"
-import config from "@/app.config"
-import { useRouter, useRoute } from "vue-router"
-
-/** import type*/
-import type { LeaveType } from "@/modules/05_leave/interface/response/leave"
-
-/** import componest*/
-import DialogDetail from "@/modules/05_leave/components/DialogDetail.vue"
-import Table from "@/modules/05_leave/components/Table.vue"
-
-/** import stort*/
-import { useCounterMixin } from "@/stores/mixin"
-import { useLeaveStore } from "@/modules/05_leave/store"
-
-const mixin = useCounterMixin()
-const { showLoader, hideLoader, messageError, date2Thai, monthYear2Thai } = mixin
-const LeaveData = useLeaveStore()
-const router = useRouter()
-const route = useRoute()
-const $q = useQuasar()
-
-/** filter */
-const year = ref<number>(new Date().getFullYear())
-const type = ref<string>("00000000-0000-0000-0000-000000000000")
-const status = ref<string>("ALL")
-const filter = ref<string>("")
-
-/** pagination*/
-const maxPage = ref<number>(1)
-const page = ref<number>(1)
-const pageSize = ref<number>(10)
-
-/** function เรียกข้อมูลการลา*/
-async function fetchDataTable() {
-	showLoader()
-	const body = {
-		year: year.value, //*ปีในการยื่นขอใบลา(ใช้เป็น คศ.)
-		type: type.value, //*Id ประเภทการลา
-		status: status.value, //*สถานะการของลา
-		page: page.value.toString(), //*หน้า
-		pageSize: pageSize.value.toString(), //*จำนวนแถวต่อหน้า
-		keyword: filter.value, //keyword ค้นหา
-	}
-	await http
-		.post(config.API.leaveTableList(), body)
-		.then(res => {
-			const data = res.data.result.data
-			LeaveData.fetchListLeave(data)
-			maxPage.value = Math.ceil(res.data.result.total / pageSize.value)
-		})
-		.catch(err => {
-			messageError($q, err)
-		})
-		.finally(() => {
-			hideLoader()
-		})
-}
-
-const leaveType = ref<LeaveType[]>()
-/** function เรียกประเภทการลา */
-async function fectOptionType() {
-	await http
-		.get(config.API.leaveType())
-		.then(async res => {
-			leaveType.value = res.data.result
-			LeaveData.fetchLeaveType(res.data.result)
-		})
-		.catch(err => {
-			messageError($q, err)
-		})
-}
-
-const modal = ref<boolean>(false)
-const leaveId = ref<string>("")
-const leaveStatus = ref<string>("")
-
-/**
- * function openPopupDateail
- * @param id การลา
- * @param status การลา
- */
-const onClickView = async (id: string, status: string) => {
-	modal.value = true
-	leaveId.value = id
-	leaveStatus.value = status
-}
-
-const onClickEdit = async (id: string, status: string) => {
-	router.push(`/leave/edit/${id}`)
-}
-
-/** function closePopup*/
-async function onClickClose() {
-	modal.value = false
-}
-
-/**
- * function updateFilter
- * @param y ปีงบประมาณ
- * @param t ประเภทการลา
- * @param s สภานะ
- * @param k คำค้นหา
- */
-async function updateFilterTable(y: number, t: string, s: string, k: string) {
-	if (t && s) {
-		year.value = await y
-		type.value = await t
-		status.value = await s
-		filter.value = await k
-		await fetchDataTable()
-	}
-}
-
-/**
- * function updatePagination
- * @param p หน้า
- * @param ps แถวต่อหน้า
- */
-async function updatePagination(p: number, ps: number) {
-	;(page.value = await p), (pageSize.value = await ps)
-	await fetchDataTable()
-}
-
-/**
- * เรียกฟังก์ชันทั้งหมดตอนเรียกใช้ไฟล์นี้
- */
-onMounted(async () => {
-	await fetchDataTable()
-	await fectOptionType()
-})
-</script>
-<template>
-	<Table
-		:rows="LeaveData.rows"
-		:columns="LeaveData.columns"
-		:visible-columns="LeaveData.visibleColumns"
-		v-model:inputfilter="filter"
-		v-model:inputvisible="LeaveData.visibleColumns"
-		:inputShow="true"
-		:grid="$q.screen.gt.xs ? false : true"
-		@update:filter="updateFilterTable"
-		@update:Pagination="updatePagination"
-		:maxPage="maxPage"
-		:pageSize="pageSize"
-		:leaveType="leaveType"
-	>
-		<template #columns="props">
-			<q-tr :props="props" class="cursor-pointer">
-				<q-td key="no" :props="props" @click="onClickView(props.row.id, props.row.status)">
-					{{ (page - 1) * pageSize + props.rowIndex + 1 }}
-				</q-td>
-				<q-td key="leaveTypeName" :props="props" @click="onClickView(props.row.id, props.row.status)">
-					{{ props.row.leaveTypeName }}
-				</q-td>
-				<q-td key="dateSendLeave" :props="props" @click="onClickView(props.row.id, props.row.status)">
-					{{ props.row.dateSendLeave }}
-				</q-td>
-
-				<q-td key="status" :props="props">
-					<div class="col-12 row items-center">
-						<div @click="onClickView(props.row.id, props.row.status)">
-							<q-icon v-if="props.row.status == 'APPROVE'" size="10px" color="light-green" name="mdi-circle" class="q-mr-sm" />
-							<q-icon v-else-if="props.row.status == 'REJECT'" size="10px" color="red-6" name="mdi-circle" class="q-mr-sm" />
-							<q-icon v-else-if="props.row.status == 'PENDING'" size="10px" color="light-blue-14" name="mdi-circle" class="q-mr-sm" />
-							<q-icon v-else-if="props.row.status == 'NEW'" size="10px" color="orange" name="mdi-circle" class="q-mr-sm" />
-							<q-icon v-if="props.row.status == 'DELETE'" size="10px" color="grey-10" name="mdi-circle" class="q-mr-sm" />
-
-							<span class="q-pr-md">{{ props.row.statusConvert }}</span>
-						</div>
-						<q-space />
-						<q-btn
-							v-if="props.row.status != 'DELETE' && props.row.status != 'REJECT' && props.row.status != 'CANCEL'"
-							label="ขอยกเลิก"
-							@click="onClickView(props.row.id, 'CANCEL')"
-							size="13px"
-							class="q-px-sm"
-							outline
-							dense
-							color="orange"
-						/>
-						<q-space />
-						<q-btn
-							v-if="props.row.status != 'DELETE' && props.row.status != 'REJECT' && props.row.status != 'CANCEL'"
-							label="ขอยืนยันการลา"
-							@click="onClickEdit(props.row.id, 'CANCEL')"
-							size="13px"
-							class="q-px-sm"
-							outline
-							dense
-							color="primary"
-						/>
-					</div>
-				</q-td>
-			</q-tr>
-		</template>
-	</Table>
-
-	<DialogDetail :modal="modal" :leaveId="leaveId" :leaveStatus="leaveStatus" :onClickClose="onClickClose" :leaveType="leaveType" :fetchDataTable="fetchDataTable" />
-</template>
diff --git a/src/modules/05_leave/components/ListView.vue b/src/modules/05_leave/components/ListView.vue
new file mode 100644
index 0000000..0ca26b1
--- /dev/null
+++ b/src/modules/05_leave/components/ListView.vue
@@ -0,0 +1,298 @@
+<script setup lang="ts">
+import { ref, onMounted } from "vue";
+import { useQuasar } from "quasar";
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { useRouter, useRoute } from "vue-router";
+
+/** import type*/
+import type { LeaveType } from "@/modules/05_leave/interface/response/leave";
+
+/** import componest*/
+import DialogDetail from "@/modules/05_leave/components/DialogDetail.vue";
+import Table from "@/modules/05_leave/components/Table.vue";
+
+/** import stort*/
+import { useCounterMixin } from "@/stores/mixin";
+import { useLeaveStore } from "@/modules/05_leave/store";
+
+const mixin = useCounterMixin();
+const { showLoader, hideLoader, messageError, date2Thai, monthYear2Thai } =
+  mixin;
+const LeaveData = useLeaveStore();
+const router = useRouter();
+const route = useRoute();
+const $q = useQuasar();
+
+/** filter */
+const year = ref<number>(new Date().getFullYear());
+const type = ref<string>("00000000-0000-0000-0000-000000000000");
+const status = ref<string>("ALL");
+const filter = ref<string>("");
+
+/** pagination*/
+const maxPage = ref<number>(1);
+const page = ref<number>(1);
+const pageSize = ref<number>(10);
+
+/** function เรียกข้อมูลการลา*/
+async function fetchDataTable() {
+  showLoader();
+  const body = {
+    year: year.value, //*ปีในการยื่นขอใบลา(ใช้เป็น คศ.)
+    type: type.value, //*Id ประเภทการลา
+    status: status.value, //*สถานะการของลา
+    page: page.value.toString(), //*หน้า
+    pageSize: pageSize.value.toString(), //*จำนวนแถวต่อหน้า
+    keyword: filter.value, //keyword ค้นหา
+  };
+  await http
+    .post(config.API.leaveTableList(), body)
+    .then((res) => {
+      const data = res.data.result.data;
+      LeaveData.fetchListLeave(data);
+      maxPage.value = Math.ceil(res.data.result.total / pageSize.value);
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+const leaveType = ref<LeaveType[]>();
+/** function เรียกประเภทการลา */
+async function fectOptionType() {
+  await http
+    .get(config.API.leaveType())
+    .then(async (res) => {
+      leaveType.value = res.data.result;
+      LeaveData.fetchLeaveType(res.data.result);
+    })
+    .catch((err) => {
+      messageError($q, err);
+    });
+}
+
+const modal = ref<boolean>(false);
+const leaveId = ref<string>("");
+const leaveStatus = ref<string>("");
+
+/**
+ * function openPopupDateail
+ * @param id การลา
+ * @param status การลา
+ */
+const onClickView = async (id: string, status: string) => {
+  modal.value = true;
+  leaveId.value = id;
+  leaveStatus.value = status;
+};
+
+const onClickEdit = async (id: string) => {
+  router.push(`/leave/edit/${id}`);
+};
+
+/** function closePopup*/
+async function onClickClose() {
+  modal.value = false;
+}
+
+/**
+ * function updateFilter
+ * @param y ปีงบประมาณ
+ * @param t ประเภทการลา
+ * @param s สภานะ
+ * @param k คำค้นหา
+ */
+async function updateFilterTable(y: number, t: string, s: string, k: string) {
+  if (t && s) {
+    year.value = await y;
+    type.value = await t;
+    status.value = await s;
+    filter.value = await k;
+    await fetchDataTable();
+  }
+}
+
+/**
+ * function updatePagination
+ * @param p หน้า
+ * @param ps แถวต่อหน้า
+ */
+async function updatePagination(p: number, ps: number) {
+  (page.value = await p), (pageSize.value = await ps);
+  await fetchDataTable();
+}
+
+/**
+ * เรียกฟังก์ชันทั้งหมดตอนเรียกใช้ไฟล์นี้
+ */
+onMounted(async () => {
+  await fetchDataTable();
+  await fectOptionType();
+});
+</script>
+<template>
+  <Table
+    :rows="LeaveData.rows"
+    :columns="LeaveData.columns"
+    :visible-columns="LeaveData.visibleColumns"
+    v-model:inputfilter="filter"
+    v-model:inputvisible="LeaveData.visibleColumns"
+    :inputShow="true"
+    :grid="$q.screen.gt.xs ? false : true"
+    @update:filter="updateFilterTable"
+    @update:Pagination="updatePagination"
+    :maxPage="maxPage"
+    :pageSize="pageSize"
+    :leaveType="leaveType"
+  >
+    <template #columns="props">
+      <q-tr :props="props" class="cursor-pointer">
+        <q-td
+          key="no"
+          :props="props"
+          @click="onClickView(props.row.id, props.row.status)"
+        >
+          {{ (page - 1) * pageSize + props.rowIndex + 1 }}
+        </q-td>
+        <q-td
+          key="leaveTypeName"
+          :props="props"
+          @click="onClickView(props.row.id, props.row.status)"
+        >
+          {{ props.row.leaveTypeName }}
+        </q-td>
+        <q-td
+          key="dateSendLeave"
+          :props="props"
+          @click="onClickView(props.row.id, props.row.status)"
+        >
+          {{ props.row.dateSendLeave }}
+        </q-td>
+
+        <q-td key="status" :props="props">
+          <div class="col-12 row items-center">
+            <div @click="onClickView(props.row.id, props.row.status)">
+              <q-icon
+                v-if="props.row.status == 'APPROVE'"
+                size="10px"
+                color="light-green"
+                name="mdi-circle"
+                class="q-mr-sm"
+              />
+              <q-icon
+                v-else-if="props.row.status == 'REJECT'"
+                size="10px"
+                color="red-6"
+                name="mdi-circle"
+                class="q-mr-sm"
+              />
+              <q-icon
+                v-else-if="props.row.status == 'PENDING'"
+                size="10px"
+                color="light-blue-14"
+                name="mdi-circle"
+                class="q-mr-sm"
+              />
+              <q-icon
+                v-else-if="props.row.status == 'NEW'"
+                size="10px"
+                color="orange"
+                name="mdi-circle"
+                class="q-mr-sm"
+              />
+              <q-icon
+                v-if="props.row.status == 'DELETE'"
+                size="10px"
+                color="grey-10"
+                name="mdi-circle"
+                class="q-mr-sm"
+              />
+
+              <span class="q-pr-md">{{ props.row.statusConvert }}</span>
+            </div>
+            <q-space />
+
+            <q-btn
+              flat
+              icon="mdi-dots-vertical"
+              color="grey-8"
+              for="#cancel"
+              dense
+              round
+              unelevated
+            >
+              <q-menu>
+                <q-list>
+                  <q-item
+                    v-if="
+                      props.row.status != 'DELETE' &&
+                      props.row.status != 'REJECT' &&
+                      props.row.status != 'CANCEL' 
+                    "
+                    clickable
+                    v-close-popup
+                    @click="onClickView(props.row.id, 'CANCEL')"
+                  >
+                    <q-item-section>
+                      <q-item-label>ขอยกเลิก</q-item-label>
+                    </q-item-section>
+                  </q-item>
+                  <q-item
+                    v-if="
+                      props.row.status != 'DELETE' &&
+                      props.row.status != 'REJECT' &&
+                      props.row.status != 'CANCEL' &&
+                      props.row.status == 'NEW'
+                    "
+                    clickable
+                    v-close-popup
+                    @click="onClickEdit(props.row.id)"
+                  >
+                    <q-item-section>
+                      <q-item-label>แก้ไข</q-item-label>
+                    </q-item-section>
+                  </q-item>
+                </q-list>
+              </q-menu>
+            </q-btn>
+
+            <!-- <q-btn
+							v-if="props.row.status != 'DELETE' && props.row.status != 'REJECT' && props.row.status != 'CANCEL'"
+							label="ขอยกเลิก"
+							@click="onClickView(props.row.id, 'CANCEL')"
+							size="13px"
+							class="q-px-sm"
+							outline
+							dense
+							color="orange"
+						/>
+						<q-space />
+						<q-btn
+							v-if="props.row.status != 'DELETE' && props.row.status != 'REJECT' && props.row.status != 'CANCEL'"
+							label="ขอยืนยันการลา"
+							@click="onClickEdit(props.row.id, 'CANCEL')"
+							size="13px"
+							class="q-px-sm"
+							outline
+							dense
+							color="primary"
+						/> -->
+          </div>
+        </q-td>
+      </q-tr>
+    </template>
+  </Table>
+
+  <DialogDetail
+    :modal="modal"
+    :leaveId="leaveId"
+    :leaveStatus="leaveStatus"
+    :onClickClose="onClickClose"
+    :leaveType="leaveType"
+    :fetchDataTable="fetchDataTable"
+  />
+</template>
diff --git a/src/modules/05_leave/views/Main.vue b/src/modules/05_leave/views/Main.vue
index 9f99079..714be82 100644
--- a/src/modules/05_leave/views/Main.vue
+++ b/src/modules/05_leave/views/Main.vue
@@ -8,7 +8,7 @@ import type { LeaveItem } from "@/modules/05_leave/interface/index/main"
 import type { QTableProps } from "quasar"
 
 import CalendarView from "@/modules/05_leave/components/Calendar.vue"
-import ListView from "@/modules/05_leave/components/ListCalendar.vue"
+import ListView from "@/modules/05_leave/components/ListView.vue"
 
 import { useCounterMixin } from "@/stores/mixin"
 import { useLeaveStore } from "@/modules/05_leave/store"