diff --git a/src/interface/request/main/main.ts b/src/interface/request/main/main.ts
index 2aa5d3752..2bee16193 100644
--- a/src/interface/request/main/main.ts
+++ b/src/interface/request/main/main.ts
@@ -354,6 +354,12 @@ const menuList = readonly<any[]>([
         path: "insigniaAllocate",
         role: "insignia",
       },
+      {
+        key: 8.6,
+        label: "ยืม-คืนเครื่องราชฯ",
+        path: "insigniaBorrow",
+        role: "insignia",
+      },
       {
         key: 8.5,
         label: "รายงาน",
diff --git a/src/modules/07_insignia/components/5_Borrow/Main.vue b/src/modules/07_insignia/components/5_Borrow/Main.vue
new file mode 100644
index 000000000..876a0b4fd
--- /dev/null
+++ b/src/modules/07_insignia/components/5_Borrow/Main.vue
@@ -0,0 +1,831 @@
+<script setup lang="ts">
+import { ref, onMounted, watch } from "vue";
+// import { useRouter } from "vue-router";
+import { useCounterMixin } from "@/stores/mixin";
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { useResultDataStore } from "@/modules/07_insignia/storeResult";
+
+import DialogForm from "@/modules/07_insignia/components/3_result/DialogForm.vue";
+import fileUploadview from "@/modules/07_insignia/components/3_result/fileUpload.vue";
+
+import type { OptionData } from "@/modules/07_insignia/interface/index/Main";
+import type { QTableProps, QInput } from "quasar";
+import { useQuasar } from "quasar";
+
+// const router = useRouter();
+const DataStore = useResultDataStore();
+const mixin = useCounterMixin();
+const {
+  date2Thai,
+  dialogConfirm,
+  showLoader,
+  hideLoader,
+  messageError,
+  success,
+} = mixin;
+const $q = useQuasar();
+const tab = ref<string>("");
+
+const selectRound = ref<string>();
+const selectRoundOption = ref<OptionData[]>([]);
+const modal = ref<boolean>(false);
+const action = ref<string>("");
+const personId = ref<string>();
+const profileType = ref<string>("");
+const fileResult = ref<any>(null);
+const fileinvoice = ref<any>(null);
+onMounted(async () => {
+  await fecthRound();
+  await fecthInsignia();
+  await fecthInsigniaType();
+});
+const fecthRound = async () => {
+  await http
+    .get(config.API.noteround())
+    .then((res) => {
+      let data = res.data.result;
+      selectRoundOption.value = data;
+      selectRound.value = data[0].id;
+      // console.log(selectRound.value);
+    })
+    .catch((err) => {
+      console.log(err);
+    });
+};
+const fecthInsignia = async () => {
+  await http
+    .get(config.API.insignia)
+    .then((res) => {
+      // console.log(res);
+      let data = res.data.result;
+      DataStore.fetchDatainsignia(data);
+    })
+    .catch((err) => {
+      console.log(err);
+    });
+};
+const fecthInsigniaType = async () => {
+  await http(config.API.insigniaType)
+    .then((res) => {
+      // console.log(res);
+      let data = res.data.result;
+      DataStore.fetchDatainsigniaType(data);
+      tab.value = DataStore.insigniaType[0].name;
+    })
+    .catch((err) => {
+      console.log(err);
+    });
+};
+const visibleColumns = ref<String[]>([
+  "no",
+  "status",
+  "name",
+  "type",
+  "employeeType",
+  "page",
+  "number",
+  "vatnumber",
+  "datepay",
+  "typepay",
+  "address",
+  "action",
+]);
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    field: "no",
+    sortable: true,
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "status",
+    align: "left",
+    label: "สถานะ",
+    field: "status",
+    sortable: true,
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "name",
+    align: "left",
+    label: "ชื่อ - สกุล",
+    field: "name",
+    sortable: true,
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "type",
+    align: "left",
+    label: "ประเภทเครื่องราชฯ",
+    field: "type",
+    sortable: true,
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "employeeType",
+    align: "left",
+    label: "สถานภาพ",
+    field: "employeeType",
+    sortable: true,
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "page",
+    align: "left",
+    label: "หน้าในราชกิจนุเบกษา",
+    field: "page",
+    sortable: true,
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "number",
+    align: "left",
+    label: "ลำดับที่ในราชกิจจานุเบกษา",
+    field: "number",
+    sortable: true,
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "vatnumber",
+    align: "left",
+    label: "หมายเลขใบกำกับ",
+    field: "vatnumber",
+    sortable: true,
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "datepay",
+    align: "left",
+    label: "วันที่จ่ายใบกำกับฯ",
+    field: "datepay",
+    sortable: true,
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "typepay",
+    align: "left",
+    label: "รูปแบบการจ่าย",
+    field: "typepay",
+    sortable: true,
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "address",
+    align: "left",
+    label: "ที่อยู่ที่จ่าย",
+    field: "address",
+    sortable: true,
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "action",
+    align: "left",
+    label: "",
+    field: "",
+  },
+]);
+const rows = ref<any>([
+  // {
+  //   no: "1",
+  //   status: "รอบันทึกข้อมูล",
+  //   name: "นางสาวรัชภรณ์ ภักดี",
+  //   type: "ทั้งหมด",
+  //   page: "8",
+  //   number: "11",
+  //   vatnumber: "5647833",
+  //   datepay: null,
+  //   typepay: null,
+  //   address: "เลขที่ 2/3 หมู่ที่ 14 ถนนบ...",
+  // },
+]);
+watch(tab, () => {
+  if (tab.value !== "doc") {
+    fecthlistInsignia();
+  }
+});
+watch(modal, () => {
+  if (modal.value == false) {
+    fecthlistInsignia();
+  }
+});
+const selectorInsignia = () => {
+  fecthlistInsignia();
+};
+const selectorRound = (round: string) => {
+  selectRound.value = round;
+};
+const fecthlistInsignia = async () => {
+  showLoader();
+  let data = {
+    insigniaTypeId: tab.value,
+    insigniaNoteId: selectRound.value,
+    insigniaId: DataStore.insignia,
+  };
+  await http
+    .post(config.API.noteSearch(), data)
+    .then((res) => {
+      let data = res.data.result;
+      rows.value = [];
+      rows.value = data.map((e: any) => ({
+        id: e.id,
+        citizenId: e.citizenId,
+        prefix: e.prefix,
+        position: e.position,
+        status: DataStore.status(e.status),
+        name: e.fullName,
+        type: e.requestInsignia,
+        employeeType: DataStore.profileType(e.profileType),
+        profileType: e.profileType,
+        page: e.page,
+        number: e.no,
+        vatnumber: e.number,
+        datepay: date2Thai(e.datePayment),
+        typepay: e.typePayment,
+        address: e.address,
+      }));
+    })
+    .catch((err) => {
+      console.log(err);
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+};
+const uploadFile = async (event: any, action: string) => {
+  console.log(selectRound.value);
+  if (selectRound.value !== undefined) {
+    let id = selectRound.value.toString();
+    if (action === "result") {
+      const formdata = new FormData();
+      formdata.append("file", event);
+      await http
+        .put(config.API.uploadfilereceice(id), formdata)
+        .then(() => {
+          success($q, "อัพโหลดไฟล์สำเร็จ");
+        })
+        .catch((err) => {
+          console.log(err);
+        })
+        .finally(async () => {
+          await fecthlistInsignia();
+          fileResult.value = null;
+        });
+    } else if (action === "invoice") {
+      const formdata = new FormData();
+      formdata.append("file", event);
+      await http
+        .put(config.API.uploadfileinvoice(id), formdata)
+        .then(() => {
+          success($q, "อัพโหลดไฟล์สำเร็จ");
+        })
+        .catch((err) => {
+          console.log(err);
+        })
+        .finally(async () => {
+          await fecthlistInsignia();
+          fileinvoice.value = null;
+        });
+    }
+  }
+};
+
+const filterRef = ref<QInput>();
+const filter = ref<string>("");
+
+const close = () => {
+  modal.value = false;
+};
+
+const addData = () => {
+  modal.value = true;
+  action.value = "addData";
+};
+
+const editData = (data: any) => {
+  personId.value = data.id;
+  profileType.value = data.profileType;
+  action.value = "editData";
+  modal.value = true;
+};
+
+const save = () => {
+  console.log("save function");
+};
+
+const resetFilter = () => {
+  // reset ค่าที่ค้นหาเมื่อกดปุ่ม X ในกล่องค้นหา
+  filter.value = "";
+  filterRef.value!.focus();
+};
+</script>
+
+<template>
+  <div class="toptitle text-dark col-12 row items-center">
+    บันทึกผลการได้รับพระราชทานเครื่องราชย์อิสริยสภรณ์/การจ่ายใบกำกับ
+  </div>
+  <q-card flat bordered class="col-12 q-my-md q-mt-sm rounded-borders">
+    <div class="bg-grey-1 col-12 row items-center">
+      <div class="q-pl-md q-pr-sm text-weight-medium text-grey-7">รอบ</div>
+      <div>
+        <selector
+          hide-bottom-space
+          borderless
+          dense
+          lazy-rules
+          emit-value
+          map-options
+          options-dense
+          option-label="name"
+          option-value="id"
+          v-model="selectRound"
+          :options="selectRoundOption"
+          use-input
+          input-debounce="0"
+          input-class="text-bold text-grey"
+          @update:emit-value="selectorRound"
+        >
+        </selector>
+      </div>
+    </div>
+    <q-separator />
+    <q-tabs
+      dense
+      v-model="tab"
+      align="left"
+      class="bg-white text-grey"
+      active-color="primary"
+      indicator-color="primary"
+    >
+      <div v-for="item in DataStore.insigniaType">
+        <q-tab :name="item.name" :label="item.label" />
+      </div>
+      <!-- <q-tab name="hight" label="ขั้นสายสะพาน" />
+      <q-tab name="low" label="ขั้นต่ำกว่าสายสะพาน" />
+      <q-tab name="medal" label="เหรียญตรา" /> -->
+
+
+    </q-tabs>
+
+    <q-separator />
+
+    <div>
+      <div v-for="item in DataStore.insigniaType">
+        <div v-if="tab == item.name" class="q-pa-md">
+          <div class="row col-12 q-pb-sm q-col-gutter-x-xs">
+            <div>
+              <q-select
+                v-model="DataStore.insignia"
+                dense
+                outlined
+                lazy-rules
+                hide-bottom-space
+                :label="`${'เครื่องราชฯ'}`"
+                emit-value
+                map-options
+                option-label="name"
+                :options="DataStore.insigniaOp"
+                option-value="id"
+                :readonly="false"
+                :borderless="false"
+                style="min-width: 150px"
+                @update:model-value="selectorInsignia"
+              />
+            </div>
+
+            <div>
+              <q-btn
+                @click="addData()"
+                size="12px"
+                flat
+                round
+                color="add"
+                icon="mdi-plus"
+              >
+                <q-tooltip>เพิ่ม</q-tooltip>
+              </q-btn>
+            </div>
+            <div>
+
+
+              <!-- <q-btn flat round color="light-blue" icon="upload">
+                <q-menu>
+                  <q-list style="min-width: 150px">
+                    <q-item clickable v-close-popup>
+                      <q-item-section avatar
+                        ><q-icon color="green-7" name="mdi-file-excel"
+                      /></q-item-section>
+                      <q-item-section
+                        >บันทึกผลการได้รับพระราชทานเครื่องราชย์อิสริยสภรณ์</q-item-section
+                      >
+                    </q-item>
+                    <q-item clickable v-close-popup>
+                      <q-item-section avatar
+                        ><q-icon color="green-7" name="mdi-file-excel"
+                      /></q-item-section>
+                      <q-item-section>บันทึกผลการจ่ายใบกำกับ</q-item-section>
+                    </q-item>
+                  </q-list>
+                </q-menu>
+              </q-btn> -->
+            </div>
+
+
+            <q-space />
+
+            <div class="items-center" style="display: flex">
+              <!-- ค้นหาข้อความใน table -->
+              <q-input
+                standout
+                dense
+                v-model="filter"
+                ref="filterRef"
+                outlined
+                debounce="300"
+                placeholder="ค้นหา"
+                style="max-width: 200px"
+                class="q-ml-sm"
+              >
+                <template v-slot:append>
+                  <q-icon v-if="filter == ''" name="search" />
+                  <q-icon
+                    v-if="filter !== ''"
+                    name="clear"
+                    class="cursor-pointer"
+                    @click="resetFilter"
+                  />
+                </template>
+              </q-input>
+              <!-- แสดงคอลัมน์ใน table -->
+              <q-select
+                v-model="visibleColumns"
+                :display-value="$q.lang.table.columns"
+                multiple
+                outlined
+                dense
+                :options="columns"
+                options-dense
+                option-value="name"
+                map-options
+                emit-value
+                style="min-width: 150px"
+                class="gt-xs q-ml-sm"
+              />
+            </div>
+          </div>
+
+          <d-table
+            :rows="rows"
+            :columns="columns"
+            :visible-columns="visibleColumns"
+            :filter="filter"
+            row-key="name"
+          >
+            <template v-slot:body-cell="props">
+              <q-td :props="props">
+                <div v-if="props.col.name == 'no'">
+                  {{ props.rowIndex + 1 }}
+                </div>
+
+                <div v-else-if="props.col.name == 'action'">
+                  <q-btn
+                    dense
+                    size="12px"
+                    flat
+                    round
+                    color="primary"
+                    @click.stop="editData(props.row)"
+                    icon="mdi-pencil-outline"
+                  >
+                    <q-tooltip>แก้ไขข้อมูล</q-tooltip>
+                  </q-btn>
+                </div>
+
+                <div v-else>
+                  {{ props.value }}
+                </div>
+              </q-td>
+            </template>
+          </d-table>
+        </div>
+
+        <div v-else-if="tab == item.name" class="q-pa-md">
+          <div class="row col-12 q-pb-sm q-col-gutter-x-xs">
+            <selector
+              outlined
+              dense
+              lazy-rules
+              v-model="DataStore.insignia"
+              hide-bottom-space
+              :label="`${'เครื่องราชฯ'}`"
+              emit-value
+              map-options
+              option-label="name"
+              :options="DataStore.insigniaOp"
+              option-value="id"
+              use-input
+              input-debounce="0"
+              style="min-width: 150px"
+            />
+            <div>
+              <q-btn
+                @click="addData()"
+                size="12px"
+                flat
+                round
+                color="add"
+                icon="mdi-plus"
+              >
+                <q-tooltip>เพิ่ม</q-tooltip>
+              </q-btn>
+            </div>
+            <div>
+              <q-btn flat round color="light-blue" icon="upload">
+                <!-- <q-tooltip>อัพโหลดไฟล์</q-tooltip> -->
+                <q-menu>
+                  <q-list style="min-width: 150px">
+                    <q-item clickable v-close-popup>
+                      <q-item-section avatar
+                        ><q-icon color="green-7" name="mdi-file-excel"
+                      /></q-item-section>
+                      <q-item-section
+                        >บันทึกผลการได้รับพระราชทานเครื่องราชย์อิสริยสภรณ์</q-item-section
+                      >
+                    </q-item>
+                    <q-item clickable v-close-popup>
+                      <q-item-section avatar
+                        ><q-icon color="green-7" name="mdi-file-excel"
+                      /></q-item-section>
+                      <q-item-section>บันทึกผลการจ่ายใบกำกับ</q-item-section>
+                    </q-item>
+                  </q-list>
+                </q-menu>
+              </q-btn>
+            </div>
+
+            <q-space />
+
+            <div class="items-center" style="display: flex">
+              <!-- ค้นหาข้อความใน table -->
+              <q-input
+                standout
+                dense
+                v-model="filter"
+                ref="filterRef"
+                outlined
+                debounce="300"
+                placeholder="ค้นหา"
+                style="max-width: 200px"
+                class="q-ml-sm"
+              >
+                <template v-slot:append>
+                  <q-icon v-if="filter == ''" name="search" />
+                  <q-icon
+                    v-if="filter !== ''"
+                    name="clear"
+                    class="cursor-pointer"
+                    @click="resetFilter"
+                  />
+                </template>
+              </q-input>
+              <!-- แสดงคอลัมน์ใน table -->
+              <q-select
+                v-model="visibleColumns"
+                :display-value="$q.lang.table.columns"
+                multiple
+                outlined
+                dense
+                :options="columns"
+                options-dense
+                option-value="name"
+                map-options
+                emit-value
+                style="min-width: 150px"
+                class="gt-xs q-ml-sm"
+              />
+            </div>
+          </div>
+
+          <d-table
+            :rows="rows"
+            :columns="columns"
+            :visible-columns="visibleColumns"
+            :filter="filter"
+            row-key="name"
+          >
+            <template v-slot:body-cell="props">
+              <q-td :props="props">
+                <div v-if="props.col.name == 'no'">
+                  {{ props.rowIndex + 1 }}
+                </div>
+
+                <div v-else-if="props.col.name == 'action'">
+                  <q-btn
+                    dense
+                    size="12px"
+                    flat
+                    round
+                    color="primary"
+                    @click="editData(props.row)"
+                    icon="mdi-pencil-outline"
+                  >
+                    <q-tooltip>แก้ไขข้อมูล</q-tooltip>
+                  </q-btn>
+                </div>
+
+                <div v-else>
+                  {{ props.value }}
+                </div>
+              </q-td>
+            </template>
+          </d-table>
+        </div>
+
+        <div v-else-if="tab == item.name" class="q-pa-md">
+          <div class="row col-12 q-pb-sm q-col-gutter-x-xs">
+            <selector
+              outlined
+              dense
+              lazy-rules
+              v-model="DataStore.insignia"
+              hide-bottom-space
+              :label="`${'เครื่องราชฯ'}`"
+              emit-value
+              map-options
+              option-label="name"
+              :options="DataStore.insigniaOp"
+              option-value="id"
+              use-input
+              input-debounce="0"
+              style="min-width: 150px"
+            />
+            <div>
+              <q-btn
+                @click="addData()"
+                size="12px"
+                flat
+                round
+                color="add"
+                icon="mdi-plus"
+              >
+                <q-tooltip>เพิ่ม</q-tooltip>
+              </q-btn>
+            </div>
+            <div>
+              <q-btn flat round color="light-blue" icon="upload">
+                <!-- <q-tooltip>อัพโหลดไฟล์</q-tooltip> -->
+                <q-menu>
+                  <q-list style="min-width: 150px">
+                    <q-item clickable v-close-popup>
+                      <q-item-section avatar
+                        ><q-icon color="green-7" name="mdi-file-excel"
+                      /></q-item-section>
+                      <q-item-section
+                        >บันทึกผลการได้รับพระราชทานเครื่องราชย์อิสริยสภรณ์</q-item-section
+                      >
+                    </q-item>
+                    <q-item clickable v-close-popup>
+                      <q-item-section avatar
+                        ><q-icon color="green-7" name="mdi-file-excel"
+                      /></q-item-section>
+                      <q-item-section>บันทึกผลการจ่ายใบกำกับ</q-item-section>
+                    </q-item>
+                  </q-list>
+                </q-menu>
+              </q-btn>
+            </div>
+            <q-space />
+
+            <div class="items-center" style="display: flex">
+              <!-- ค้นหาข้อความใน table -->
+              <q-input
+                standout
+                dense
+                v-model="filter"
+                ref="filterRef"
+                outlined
+                debounce="300"
+                placeholder="ค้นหา"
+                style="max-width: 200px"
+                class="q-ml-sm"
+              >
+                <template v-slot:append>
+                  <q-icon v-if="filter == ''" name="search" />
+                  <q-icon
+                    v-if="filter !== ''"
+                    name="clear"
+                    class="cursor-pointer"
+                    @click="resetFilter"
+                  />
+                </template>
+              </q-input>
+              <!-- แสดงคอลัมน์ใน table -->
+              <q-select
+                v-model="visibleColumns"
+                :display-value="$q.lang.table.columns"
+                multiple
+                outlined
+                dense
+                :options="columns"
+                options-dense
+                option-value="name"
+                map-options
+                emit-value
+                style="min-width: 150px"
+                class="gt-xs q-ml-sm"
+              />
+            </div>
+          </div>
+
+          <d-table
+            :rows="rows"
+            :columns="columns"
+            :visible-columns="visibleColumns"
+            :filter="filter"
+            row-key="name"
+          >
+            <template v-slot:body-cell="props">
+              <q-td :props="props">
+                <div v-if="props.col.name == 'no'">
+                  {{ props.rowIndex + 1 }}
+                </div>
+
+                <div v-else-if="props.col.name == 'action'">
+                  <q-btn
+                    dense
+                    size="12px"
+                    flat
+                    round
+                    color="primary"
+                    @click="editData(props.row)"
+                    icon="mdi-pencil-outline"
+                  >
+                    <q-tooltip>แก้ไขข้อมูล</q-tooltip>
+                  </q-btn>
+                </div>
+
+                <div v-else>
+                  {{ props.value }}
+                </div>
+              </q-td>
+            </template>
+          </d-table>
+        </div>
+      </div>
+
+    </div>
+
+    <DialogForm
+      :modal="modal"
+      :save="save"
+      :close="close"
+      :roundId="selectRound"
+      :action="action"
+      :personId="personId"
+      :profileType="profileType"
+    />
+  </q-card>
+</template>
+<style lang="scss" scoped>
+.arrow {
+  transition: transform 0.5s;
+}
+
+.arrow-active {
+  transition: transform 0.5s;
+  transform: rotate(-90deg);
+}
+
+.bg-base {
+  background-color: #f3f3f398;
+}
+
+.v-enter-active,
+.v-leave-active {
+  transition: opacity 0.5s ease;
+}
+
+.v-enter-from,
+.v-leave-to {
+  opacity: 0;
+}
+
+.flexsave {
+  display: flex;
+  justify-content: flex-end;
+}
+</style>
diff --git a/src/modules/07_insignia/router.ts b/src/modules/07_insignia/router.ts
index 092877968..ccbbcff19 100644
--- a/src/modules/07_insignia/router.ts
+++ b/src/modules/07_insignia/router.ts
@@ -26,6 +26,8 @@ const allocateDetailAdd = () =>
   import("@/modules/07_insignia/components/4_Allocate/addDetail.vue");
 const VatInsignia = () =>
   import("@/modules/07_insignia/components/VatInsignia.vue");
+const insigniaBorrow = () =>
+  import("@/modules/07_insignia/components/5_Borrow/Main.vue");
 export default [
   {
     path: "/insignia",
@@ -168,4 +170,14 @@ export default [
       Role: "insignia",
     },
   },
+  {
+    path: "/insignia/borrow",
+    name: "insigniaBorrow",
+    component: insigniaBorrow,
+    meta: {
+      Auth: true,
+      Key: [8.9],
+      Role: "insignia",
+    },
+  },
 ];