diff --git a/src/api/leave/api.leave.ts b/src/api/leave/api.leave.ts
new file mode 100644
index 0000000..ad050cf
--- /dev/null
+++ b/src/api/leave/api.leave.ts
@@ -0,0 +1,10 @@
+import env from "../index"
+
+const retirementResign = `${env.API_URI}/retirement`
+
+
+export default {
+    listUser: () => `${retirementResign}/resign/user`,
+}
+
+
diff --git a/src/api/test/api.test.ts b/src/api/test/api.test.ts
index 66e6b63..f822ccd 100644
--- a/src/api/test/api.test.ts
+++ b/src/api/test/api.test.ts
@@ -5,7 +5,9 @@ import env from "../index"
 
 const tttt = `${env.API_URI}/test`
 
+
 export default {
 	gettttt: `${tttt}`,
 	puttttt: (id: string) => `${tttt}/${id}`,
+
 }
diff --git a/src/app.config.ts b/src/app.config.ts
index 801594d..86820c7 100644
--- a/src/app.config.ts
+++ b/src/app.config.ts
@@ -2,9 +2,11 @@
 
 /** API Metadata */
 import testtest from "./api/test/api.test"
+import retirementResign from "./api/leave/api.leave"
 
 const API = {
 	...testtest,
+	...retirementResign
 }
 
 export default {
diff --git a/src/modules/03_leave/views/Main.vue b/src/modules/03_leave/views/Main.vue
index f0959f4..f7bc450 100644
--- a/src/modules/03_leave/views/Main.vue
+++ b/src/modules/03_leave/views/Main.vue
@@ -1,122 +1,173 @@
 <script setup lang="ts">
-import type { QTableProps } from "quasar"
-import { ref } from "vue"
-import { useQuasar } from "quasar"
-import { useRouter } from "vue-router"
+import type { QTableProps } from "quasar";
+import { ref, onMounted } from "vue";
+import { useQuasar } from "quasar";
+import { useRouter } from "vue-router";
+import http from "@/plugins/http";
+import config from "@/app.config";
 
-const router = useRouter()
-const $q = useQuasar()
+import Table from "@/components/Table.vue";
 
-import Table from "@/components/Table.vue"
-
-const filter = ref<string>("")
-const rows = ref<any>([
-	{ placeLeave: "สํานักงานกรุงเทพมหานคร ", dateStartLeave: "02/02/2566", dateLeave: "10/03/2565", status: "รอดำเนินการ" },
-	{ placeLeave: "สํานักงานกรุงเทพมหานคร ", dateStartLeave: "02/02/2566", dateLeave: "10/03/2565", status: "เสร็จสิ้น" },
-	{ placeLeave: "สํานักงานกรุงเทพมหานคร ", dateStartLeave: "02/02/2566", dateLeave: "10/03/2565", status: "เสร็จสิ้น" },
-])
-const initialPagination = ref({
-	rowsPerPage: 0,
-})
-const visibleColumns = ref<String[]>(["no", "placeLeave", "dateStartLeave", "dateLeave", "status"])
+const router = useRouter();
+const $q = useQuasar();
 
+const filter = ref<string>("");
+const visibleColumns = ref<String[]>([
+  "no",
+  "placeLeave",
+  "dateStartLeave",
+  "dateLeave",
+  "status",
+]);
 const columns = ref<QTableProps["columns"]>([
-	{
-		name: "no",
-		align: "left",
-		label: "ลำดับ",
-		sortable: true,
-		field: "no",
-		headerStyle: "font-size: 14px",
-		style: "font-size: 14px; width:5px;",
-	},
-	{
-		name: "placeLeave",
-		align: "left",
-		label: "สถานที่ยื่นขอลาออกจากราชการ",
-		sortable: true,
-		field: "placeLeave",
-		headerStyle: "font-size: 14px",
-		style: "font-size: 14px; width:15%;",
-	},
-	{
-		name: "dateStartLeave",
-		align: "left",
-		label: "วันที่ยื่นขอลาออกจากราชการ",
-		sortable: true,
-		field: "dateStartLeave",
-		headerStyle: "font-size: 14px",
-		style: "font-size: 14px; width:15%;",
-	},
-	{
-		name: "dateLeave",
-		align: "left",
-		label: "วันที่ขอลาออกจากราชการ",
-		sortable: true,
-		field: "dateLeave",
-		headerStyle: "font-size: 14px",
-		style: "font-size: 14px",
-	},
-	{
-		name: "status",
-		align: "left",
-		label: "สถานะ",
-		sortable: true,
-		field: "status",
-		headerStyle: "font-size: 14px",
-		style: "font-size: 14px; width:10%;",
-	},
-])
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    sortable: true,
+    field: "no",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px; width:5px;",
+  },
+  {
+    name: "placeLeave",
+    align: "left",
+    label: "สถานที่ยื่นขอลาออกจากราชการ",
+    sortable: true,
+    field: "placeLeave",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px; width:15%;",
+  },
+  {
+    name: "dateStartLeave",
+    align: "left",
+    label: "วันที่ยื่นขอลาออกจากราชการ",
+    sortable: true,
+    field: "dateStartLeave",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px; width:15%;",
+  },
+  {
+    name: "dateLeave",
+    align: "left",
+    label: "วันที่ขอลาออกจากราชการ",
+    sortable: true,
+    field: "dateLeave",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "status",
+    align: "left",
+    label: "สถานะ",
+    sortable: true,
+    field: "status",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px; width:10%;",
+  },
+]);
+const rows = ref<any>([
+  {
+    placeLeave: "สํานักงานกรุงเทพมหานคร ",
+    dateStartLeave: "02/02/2566",
+    dateLeave: "10/03/2565",
+    status: "รอดำเนินการ",
+  },
+  {
+    placeLeave: "สํานักงานกรุงเทพมหานคร ",
+    dateStartLeave: "02/02/2566",
+    dateLeave: "10/03/2565",
+    status: "เสร็จสิ้น",
+  },
+  {
+    placeLeave: "สํานักงานกรุงเทพมหานคร ",
+    dateStartLeave: "02/02/2566",
+    dateLeave: "10/03/2565",
+    status: "เสร็จสิ้น",
+  },
+]);
+const initialPagination = ref({
+  rowsPerPage: 0,
+});
+
+onMounted(() => {
+  fectListleave();
+});
+
+const fectListleave = async () => {
+  console.log(config.API.listUser());
+
+  await http.get(config.API.listUser());
+};
+
 const clickAdd = async () => {
-	router.push(`/leave/add`)
-}
+  router.push(`/leave/add`);
+};
 </script>
 <template>
-	<div class="col-12 row justify-center">
-		<div class="col-xs-12 col-sm-12 col-md-11">
-			<div class="toptitle text-white col-12 row items-center">
-				<q-btn icon="mdi-arrow-left" unelevated round dense flat color="primary" class="q-mr-sm" @click="router.go(-1)" />
-				ลาออก
-			</div>
-			<div class="col-12">
-				<q-card bordered class="q-pa-md">
-					<Table
-						style="max-height: 80vh"
-						:rows="rows"
-						:columns="columns"
-						:filter="filter"
-						:visible-columns="visibleColumns"
-						v-model:inputfilter="filter"
-						v-model:inputvisible="visibleColumns"
-						:pagination="initialPagination"
-						:inputShow="false"
-						:add="clickAdd"
-						:titleText="''"
-					>
-						<template #columns="props">
-							<q-tr :props="props" class="cursor-pointer" @click="router.push(`/leave/1`)">
-								<q-td v-for="col in props.cols" :key="col.name" :props="props">
-									<div v-if="col.name == 'no'">
-										{{ props.rowIndex + 1 }}
-									</div>
-									<div v-else-if="col.name == 'status'">
-										<q-icon size="20px" v-if="props.row.status == 'รอดำเนินการ'" name="mdi-timer-sand" color="deep-orange">
-											<q-tooltip>รอดำเนินการ</q-tooltip>
-										</q-icon>
-										<q-icon size="20px" v-else name="mdi-check" color="teal">
-											<q-tooltip>เสร็จสิ้น</q-tooltip>
-										</q-icon>
-									</div>
-									<div v-else>
-										{{ col.value }}
-									</div>
-								</q-td>
-							</q-tr>
-						</template>
-					</Table>
-				</q-card>
-			</div>
-		</div>
-	</div>
+  <div class="col-12 row justify-center">
+    <div class="col-xs-12 col-sm-12 col-md-11">
+      <div class="toptitle text-white col-12 row items-center">
+        <q-btn
+          icon="mdi-arrow-left"
+          unelevated
+          round
+          dense
+          flat
+          color="primary"
+          class="q-mr-sm"
+          @click="router.go(-1)"
+        />
+        ลาออก
+      </div>
+      <div class="col-12">
+        <q-card bordered class="q-pa-md">
+          <Table
+            style="max-height: 80vh"
+            :rows="rows"
+            :columns="columns"
+            :filter="filter"
+            :visible-columns="visibleColumns"
+            v-model:inputfilter="filter"
+            v-model:inputvisible="visibleColumns"
+            :pagination="initialPagination"
+            :inputShow="false"
+            :add="clickAdd"
+            :titleText="''"
+          >
+            <template #columns="props">
+              <q-tr
+                :props="props"
+                class="cursor-pointer"
+                @click="router.push(`/leave/1`)"
+              >
+                <q-td v-for="col in props.cols" :key="col.name" :props="props">
+                  <div v-if="col.name == 'no'">
+                    {{ props.rowIndex + 1 }}
+                  </div>
+                  <div v-else-if="col.name == 'status'">
+                    <q-icon
+                      size="20px"
+                      v-if="props.row.status == 'รอดำเนินการ'"
+                      name="mdi-timer-sand"
+                      color="deep-orange"
+                    >
+                      <q-tooltip>รอดำเนินการ</q-tooltip>
+                    </q-icon>
+                    <q-icon size="20px" v-else name="mdi-check" color="teal">
+                      <q-tooltip>เสร็จสิ้น</q-tooltip>
+                    </q-icon>
+                  </div>
+                  <div v-else>
+                    {{ col.value }}
+                  </div>
+                </q-td>
+              </q-tr>
+            </template>
+          </Table>
+        </q-card>
+      </div>
+    </div>
+  </div>
 </template>
 <style></style>