diff --git a/src/api/registry/api.registry.ts b/src/api/registry/api.registry.ts
index faf2c11f4..659f9cf76 100644
--- a/src/api/registry/api.registry.ts
+++ b/src/api/registry/api.registry.ts
@@ -4,14 +4,22 @@ const registryNew = `${env.API_URI}/org/profile/`;
 
 export default {
   registryNew,
+  // เครื่องราชฯ
   profileNewInsign: `${registryNew}insignia`,
   profileNewInsignByProfileId: (profileId: string) =>
     `${registryNew}insignia/${profileId}`,
-  profileNewInsignByInsignId: (insignId: string) =>
-    `${registryNew}insignia/${insignId}`,
-  profileNewInsignHisByInsignId: (insignId: string) =>
-    `${registryNew}insignia/history/${insignId}`,
+  profileNewInsignById: (dataId: string) => `${registryNew}insignia/${dataId}`,
+  profileNewInsignHisById: (dataId: string) =>
+    `${registryNew}insignia/history/${dataId}`,
 
+  // ประกาศเกียรติคุณ
+  profileNewHonor: `${registryNew}honor`,
+  profileNewHonorByProfileId: (profileId: string) =>
+    `${registryNew}honor/${profileId}`,
+  profileNewHonorById: (dataId: string) => `${registryNew}honor/${dataId}`,
+  profileNewHonorHisById: (dataId: string) => `${registryNew}honor/${dataId}`,
+
+  // การฝึกอบรม
   profileNewTraining: `${registryNew}training`,
   profileNewTrainingByProfileId: (profileId: string) =>
     `${registryNew}training/${profileId}`,
diff --git a/src/modules/04_registryNew/components/detail/Achievement/03_Insignia.vue b/src/modules/04_registryNew/components/detail/Achievement/03_Insignia.vue
index 0f47b3505..26e68abab 100644
--- a/src/modules/04_registryNew/components/detail/Achievement/03_Insignia.vue
+++ b/src/modules/04_registryNew/components/detail/Achievement/03_Insignia.vue
@@ -1,28 +1,28 @@
 <script setup lang="ts">
-import { onMounted, ref, watch, useAttrs } from "vue";
+import { onMounted, ref, watch, reactive } from "vue";
+import { useRoute } from "vue-router";
 import { useQuasar } from "quasar";
-import type { QTableProps } from "quasar";
 import http from "@/plugins/http";
 import config from "@/app.config";
+import type { QTableProps } from "quasar";
 
 import { useCounterMixin } from "@/stores/mixin";
 import HistoryTable from "@/components/TableHistory.vue";
 import DialogHeader from "@/components/DialogHeader.vue";
-import type {
-  RequestItemsObject,
-  Columns,
-  DataProps,
-} from "@/modules/04_registryNew/interface/request/Insignia";
-
 import type {
   DataOption,
   DataOptionInsignia,
   InsigniaOps,
   Pagination,
 } from "@/modules/04_registryNew/interface/index/Main";
+import type {
+  RequestItemsObject,
+  Columns,
+  DataProps,
+} from "@/modules/04_registryNew/interface/request/Insignia";
 
 const $q = useQuasar();
-const attrs = ref<any>(useAttrs());
+const route = useRoute();
 const mixin = useCounterMixin();
 const {
   date2Thai,
@@ -34,27 +34,51 @@ const {
   showLoader,
   hideLoader,
 } = mixin;
+const profileId = ref<string>(
+  route.params.id ? route.params.id.toString() : ""
+);
 
-const year = ref<number | null>(0);
-const receiveDate = ref<Date | string | null>();
-const insigniaId = ref<string>("");
-const insigniaType = ref<string>();
-const no = ref<string>();
-const issue = ref<string>();
-const volumeNo = ref<string>();
-const volume = ref<string>();
-const section = ref<string>();
-const page = ref<string>();
-const dateAnnounce = ref<Date | null | string>(null);
-const refCommandNo = ref<string>();
-const refCommandDate = ref<Date | null | string>();
-const note = ref<string>();
+const insigniaData = reactive<{
+  id: string;
+  isActive: boolean;
+  year: number | null;
+  receiveDate: Date | string | null;
+  insigniaId: string;
+  insigniaType: string;
+  no: string;
+  issue: string;
+  volumeNo: string;
+  volume: string;
+  section: string;
+  page: string;
+  dateAnnounce: Date | null | string;
+  refCommandNo: string;
+  refCommandDate: Date | null | string;
+  note: string;
+}>({
+  id: "",
+  isActive: true,
+  year: 0,
+  receiveDate: null,
+  insigniaId: "",
+  insigniaType: "",
+  no: "",
+  issue: "",
+  volumeNo: "",
+  volume: "",
+  section: "",
+  page: "",
+  dateAnnounce: null,
+  refCommandNo: "",
+  refCommandDate: null,
+  note: "",
+});
 
 const editRow = ref<boolean>(false);
 const myForm = ref<any>();
-const edit = ref<boolean>(false);
+const isEdit = ref<boolean>(false);
 const modal = ref<boolean>(false);
-const modelView = ref<string>("table");
+const modeView = ref<string>("table");
 const filterSearch = ref("");
 const filterHistory = ref<string>("");
 const modalHistory = ref<boolean>(false);
@@ -68,90 +92,7 @@ const OpsFilter = ref<InsigniaOps>({
   insigniaOptions: [],
 });
 
-// mock data
-const rows = ref<any>([
-  {
-    id: "08dbc95b-7d2d-4a33-8c2c-426845b1d14e",
-    insignia: "จัตุรถาภรณ์ช้างเผือก",
-    insigniaId: "08db721b-c7f9-40c5-85f7-7c2c6d0eceb9",
-    insigniaType: "ชั้นต่ำกว่าสายสะพาย",
-    year: 2025,
-    no: "1",
-    issue: "1",
-    volumeNo: "1",
-    volume: null,
-    section: "1",
-    page: "1",
-    receiveDate: new Date("2023-10-10T00:00:00"),
-    dateAnnounce: new Date("2023-10-10T00:00:00"),
-    refCommandNo: "1",
-    refCommandDate: null,
-    createdFullName: "System Administrator",
-    createdAt: new Date("2023-10-10T13:38:18.177967"),
-    note: "1234dd",
-  },
-  {
-    id: "08dbc95b-7d2d-4a33-8c2c-426845b1d14e",
-    insignia: "จัตุรถาภรณ์ช้างเผือก",
-    insigniaId: "91a7322d-29f7-4d14-8aab-d98db9251ddc",
-    insigniaType: "ชั้นต่ำกว่าสายสะพาย",
-    year: 2024,
-    no: "",
-    issue: "",
-    volumeNo: "",
-    volume: "",
-    section: "",
-    page: "",
-    receiveDate: new Date("2024-02-07T00:00:00"),
-    dateAnnounce: null,
-    refCommandNo: null,
-    refCommandDate: null,
-    createdFullName: "User Key1",
-    createdAt: new Date("2024-02-07T18:14:50.918701"),
-    note: null,
-  },
-  {
-    id: "08dbc95b-7d2d-4a33-8c2c-426845b1d14e",
-    insignia: "จัตุรถาภรณ์มงกุฎไทย",
-    insigniaId: "91a7322d-29f7-4d14-8aab-d98db9251ddc",
-    insigniaType: "ชั้นต่ำกว่าสายสะพาย",
-    year: 2016,
-    no: "",
-    issue: "",
-    volumeNo: "",
-    volume: "",
-    section: "",
-    page: "",
-    receiveDate: new Date("2016-05-02T00:00:00"),
-    dateAnnounce: null,
-    refCommandNo: null,
-    refCommandDate: null,
-    createdFullName: "สาวิตรี ศรีสมัย",
-    createdAt: new Date("2024-02-13T18:06:44.941056"),
-    note: null,
-  },
-  {
-    id: "08dbc95b-7d2d-4a33-8c2c-426845b1d14e",
-    insignia: "ตริตาภรณ์ช้างเผือก",
-    insigniaId: "08db721b-c7fd-4ec7-886a-f883ae333a8d",
-    insigniaType: "ชั้นต่ำกว่าสายสะพาย",
-    year: 2018,
-    no: "",
-    issue: "",
-    volumeNo: "",
-    volume: "",
-    section: "",
-    page: "",
-    receiveDate: new Date("2024-02-13T00:00:00"),
-    dateAnnounce: null,
-    refCommandNo: "",
-    refCommandDate: null,
-    createdFullName: "สาวิตรี ศรีสมัย",
-    createdAt: new Date("2024-02-13T18:08:49.301201"),
-    note: "a",
-  },
-]);
-
+const rows = ref<any>([]);
 const columns = ref<QTableProps["columns"]>([
   {
     name: "year",
@@ -161,8 +102,6 @@ const columns = ref<QTableProps["columns"]>([
     field: "year",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "receiveDate",
@@ -180,7 +119,7 @@ const columns = ref<QTableProps["columns"]>([
     align: "left",
     label: "ชื่อเครื่องราชฯ",
     sortable: true,
-    field: "insignia",
+    field: "insigniaId",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     sort: (a: string, b: string) =>
@@ -308,7 +247,6 @@ const columns = ref<QTableProps["columns"]>([
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
 ]);
-
 const columnsHistory = ref<QTableProps["columns"]>([
   {
     name: "year",
@@ -476,7 +414,6 @@ const columnsHistory = ref<QTableProps["columns"]>([
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
 ]);
-
 const visibleColumns = ref<String[]>([
   "insignia",
   "insigniaType",
@@ -494,7 +431,6 @@ const visibleColumns = ref<String[]>([
   "note",
   "createdAt",
 ]);
-
 const visibleColumnsHistory = ref<String[]>([
   "insignia",
   "insigniaType",
@@ -513,19 +449,236 @@ const visibleColumnsHistory = ref<String[]>([
   "createdAt",
 ]);
 
-const initialPagination = ref<Pagination>({
-  rowsPerPage: 0,
+const formFilter = reactive({
+  page: 1,
+  pageSize: 10,
+  keyword: "",
 });
 
-const paginationLabel = (start: string, end: string, total: string) => {
-  return start + "-" + end + " ใน " + total;
-};
+const pagination = ref({
+  page: formFilter.page,
+  rowsPerPage: formFilter.pageSize,
+});
 
-function onClickOpenDialog(StatusEdit: boolean = false, data: any = []) {
-  modal.value = true;
+async function fetchData() {
+  if (profileId.value) {
+    showLoader();
+    await http
+      .get(config.API.profileNewInsignByProfileId(profileId.value))
+      .then((res) => {
+        let data = res.data.result;
+        rows.value = [];
+        data.map((e: any) => {
+          rows.value.push({
+            id: e.id,
+            insigniaId: e.insigniaId,
+            insigniaType: e.insigniaType,
+            year: e.year,
+            no: e.no,
+            issue: e.issue,
+            volumeNo: e.volumeNo,
+            volume: e.volume,
+            section: e.section,
+            page: e.page,
+            receiveDate: e.receiveDate,
+            dateAnnounce: e.dateAnnounce,
+            refCommandNo: e.refCommandNo,
+            refCommandDate: e.refCommandDate,
+            createdFullName: e.createdFullName,
+            createdAt: e.createdAt,
+            note: e.note,
+          });
+        });
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(() => {
+        hideLoader();
+        // store.isLoad++;
+      });
+  }
 }
 
-const clickClose = async () => {
+async function fetchInsignia() {
+  showLoader();
+  await http
+    .get(config.API.insignia)
+    .then((res) => {
+      const data = res.data.result;
+      let option: DataOptionInsignia[] = [];
+      data.map((r: any) => {
+        option.push({
+          id: r.id.toString(),
+          name: r.name.toString() + ` (${r.shortName})`,
+          typeName:
+            r.insigniaType == null ? null : r.insigniaType.name.toString(),
+        });
+      });
+      Ops.value.insigniaOptions = option;
+      OpsFilter.value.insigniaOptions = option;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+      // store.isLoad++;
+    });
+}
+
+async function saveData() {
+  if (profileId.value) {
+    showLoader();
+    await http
+      .post(config.API.profileNewInsign, {
+        profileId: profileId.value,
+        isActive: insigniaData.isActive,
+        year: insigniaData.year,
+        no: insigniaData.no,
+        volume: insigniaData.volume,
+        section: insigniaData.section,
+        page: insigniaData.page,
+        receiveDate: dateToISO(insigniaData.receiveDate as Date),
+        insigniaId: insigniaData.insigniaId,
+        insigniaType: insigniaData.insigniaType,
+        dateAnnounce: insigniaData.dateAnnounce
+          ? dateToISO(insigniaData.dateAnnounce as Date)
+          : null,
+        issue: insigniaData.issue,
+        volumeNo: insigniaData.volumeNo,
+        refCommandDate:
+          insigniaData.refCommandDate == null
+            ? null
+            : dateToISO(insigniaData.refCommandDate as Date),
+        refCommandNo: insigniaData.refCommandNo,
+        // note: note.value,
+      })
+      .then((res) => {
+        success($q, "บันทึกข้อมูลสำเร็จ");
+        modal.value = false;
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(async () => {
+        await fetchData();
+      });
+  }
+}
+
+async function editData() {
+  showLoader();
+  await http
+    .patch(config.API.profileNewInsignById(insigniaData.id), {
+      profileId: profileId.value,
+      isActive: insigniaData.isActive,
+      year: insigniaData.year,
+      no: insigniaData.no,
+      volume: insigniaData.volume,
+      section: insigniaData.section,
+      page: insigniaData.page,
+      receiveDate: dateToISO(insigniaData.receiveDate as Date),
+      insigniaId: insigniaData.insigniaId,
+      insigniaType: insigniaData.insigniaType,
+      dateAnnounce: insigniaData.dateAnnounce
+        ? dateToISO(insigniaData.dateAnnounce as Date)
+        : null,
+      issue: insigniaData.issue,
+      volumeNo: insigniaData.volumeNo,
+      refCommandDate:
+        insigniaData.refCommandDate == null
+          ? null
+          : dateToISO(insigniaData.refCommandDate as Date),
+      refCommandNo: insigniaData.refCommandNo,
+      // note: note.value,
+    })
+    .then((res) => {
+      success($q, "บันทึกข้อมูลสำเร็จ");
+      modal.value = false;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      await fetchData();
+    });
+}
+
+async function clickDelete(dataId: string) {
+  $q.dialog({
+    title: `ลบข้อมูล`,
+    message: `ต้องการทำการลบข้อมูลนี้ใช่หรือไม่?`,
+    cancel: "ยกเลิก",
+    ok: "ยืนยัน",
+    persistent: true,
+  })
+    .onOk(async () => {
+      showLoader();
+      await http
+        .delete(config.API.profileNewInsignById(dataId))
+        .then((res) => {
+          success($q, "ลบข้อมูลสำเร็จ");
+          modal.value = false;
+        })
+        .catch((e) => {
+          messageError($q, e);
+        })
+        .finally(async () => {
+          await fetchData();
+        });
+    })
+    .onCancel(async () => {
+      await fetchData();
+    });
+}
+
+function onClickOpenDialog(editStatus: boolean = false, props?: any) {
+  modal.value = true;
+  editRow.value = false;
+
+  if (editStatus && props) {
+    isEdit.value = editStatus;
+
+    insigniaData.id = props.row.id;
+    insigniaData.year = props.row.year == 0 ? 0 : props.row.year;
+    insigniaData.receiveDate = props.row.receiveDate;
+    insigniaData.insigniaId = props.row.insigniaId;
+    insigniaData.insigniaType = props.row.insigniaType;
+    insigniaData.no = props.row.no;
+    insigniaData.issue = props.row.issue;
+    insigniaData.volumeNo = props.row.volumeNo;
+    insigniaData.volume = props.row.volume;
+    insigniaData.section = props.row.section;
+    insigniaData.page = props.row.page;
+    insigniaData.dateAnnounce =
+      props.row.dateAnnounce == "-" ? "" : props.row.dateAnnounce;
+    insigniaData.refCommandNo = props.row.refCommandNo;
+    insigniaData.refCommandDate =
+      props.row.refCommandDate == "-" ? null : props.row.refCommandDate;
+    insigniaData.note = props.note;
+  } else {
+    isEdit.value = editStatus;
+
+    insigniaData.id = "";
+    insigniaData.year = 0;
+    insigniaData.receiveDate = "";
+    insigniaData.insigniaId = "";
+    insigniaData.insigniaType = "";
+    insigniaData.no = "";
+    insigniaData.issue = "";
+    insigniaData.volumeNo = "";
+    insigniaData.volume = "";
+    insigniaData.section = "";
+    insigniaData.page = "";
+    insigniaData.dateAnnounce = null;
+    insigniaData.refCommandNo = "";
+    insigniaData.refCommandDate = null;
+    insigniaData.note = "";
+  }
+}
+
+async function clickClose() {
   if (editRow.value == true) {
     $q.dialog({
       title: `ข้อมูลมีการแก้ไข`,
@@ -535,6 +688,7 @@ const clickClose = async () => {
       persistent: true,
     }).onOk(async () => {
       modal.value = false;
+      editRow.value = false;
       // next.value = false;
       // previous.value = false;
     });
@@ -543,33 +697,6 @@ const clickClose = async () => {
     // next.value = false;
     // previous.value = false;
   }
-};
-
-function onSubmit() {
-  myForm.value.validate().then(async (result: boolean) => {
-    if (result) {
-      // await saveData();
-      modal.value = false;
-    }
-  });
-}
-
-function selectData(props: any) {
-  modal.value = true;
-}
-
-function filterSelector(val: any, update: Function, refData: string) {
-  switch (refData) {
-    case "insigniaOptions":
-      update(() => {
-        Ops.value.insigniaOptions = OpsFilter.value.insigniaOptions.filter(
-          (v: DataOption) => v.name.indexOf(val) > -1
-        );
-      });
-      break;
-    default:
-      break;
-  }
 }
 
 async function clickHistory(row: RequestItemsObject) {
@@ -611,45 +738,44 @@ async function clickHistory(row: RequestItemsObject) {
   //   });
 }
 
-async function fetchInsignia() {
-  showLoader();
-  await http
-    .get(config.API.insignia)
-    .then((res) => {
-      const data = res.data.result;
-      let option: DataOptionInsignia[] = [];
-      data.map((r: any) => {
-        option.push({
-          id: r.id.toString(),
-          name: r.name.toString() + ` (${r.shortName})`,
-          typeName:
-            r.insigniaType == null ? null : r.insigniaType.name.toString(),
-        });
-      });
-      Ops.value.insigniaOptions = option;
-      OpsFilter.value.insigniaOptions = option;
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(() => {
-      hideLoader();
-      // store.isLoad++;
-    });
+function onSubmit() {
+  myForm.value.validate().then(async (result: boolean) => {
+    if (result) {
+      isEdit.value ? await editData() : await saveData();
+      modal.value = false;
+    }
+  });
 }
 
-watch(insigniaId, (count: string, prevCount: string) => {
-  const insigniaTypeFilter = Ops.value.insigniaOptions.filter(
-    (r: DataOptionInsignia) => r.id == insigniaId.value
-  );
-  if (insigniaTypeFilter[0] != null) {
-    insigniaType.value = insigniaTypeFilter[0].typeName;
+function filterSelector(val: any, update: Function, refData: string) {
+  switch (refData) {
+    case "insigniaOptions":
+      update(() => {
+        Ops.value.insigniaOptions = OpsFilter.value.insigniaOptions.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+    default:
+      break;
   }
-});
+}
+
+watch(
+  () => insigniaData.insigniaId,
+  (count: string, prevCount: string) => {
+    const insigniaTypeFilter = Ops.value.insigniaOptions.filter(
+      (r: DataOptionInsignia) => r.id === insigniaData.insigniaId
+    );
+    if (insigniaTypeFilter.length > 0) {
+      insigniaData.insigniaType = insigniaTypeFilter[0].typeName;
+    }
+  }
+);
 
 onMounted(async () => {
   await fetchInsignia();
-  // await fetchData();
+  await fetchData();
 });
 </script>
 
@@ -672,7 +798,7 @@ onMounted(async () => {
     </q-input>
 
     <q-select
-      v-if="modelView === 'table'"
+      v-if="modeView === 'table'"
       dense
       multiple
       outlined
@@ -690,7 +816,7 @@ onMounted(async () => {
 
     <q-btn-toggle
       dense
-      v-model="modelView"
+      v-model="modeView"
       toggle-color="grey-4"
       class="no-shadow toggle-borderd"
       :options="[
@@ -703,7 +829,7 @@ onMounted(async () => {
           name="format_list_bulleted"
           size="24px"
           :style="{
-            color: modelView === 'table' ? '#787B7C' : '#C9D3DB',
+            color: modeView === 'table' ? '#787B7C' : '#C9D3DB',
           }"
         />
       </template>
@@ -712,7 +838,7 @@ onMounted(async () => {
           name="mdi-view-grid-outline"
           size="24px"
           :style="{
-            color: modelView === 'card' ? '#787B7C' : '#C9D3DB',
+            color: modeView === 'card' ? '#787B7C' : '#C9D3DB',
           }"
         />
       </template>
@@ -723,16 +849,14 @@ onMounted(async () => {
     flat
     dense
     bordered
-    virtual-scroll
     ref="table"
-    v-bind="attrs"
+    class="custom-header-table"
     :rows="rows"
+    :paging="true"
     :columns="columns"
     :filter="filterSearch"
-    :grid="modelView === 'card'"
-    :pagination="initialPagination"
+    :grid="modeView === 'card'"
     :visible-columns="visibleColumns"
-    :pagination-label="paginationLabel"
     :rows-per-page-options="[20, 50, 100]"
   >
     <template v-slot:header="props">
@@ -744,14 +868,14 @@ onMounted(async () => {
       </q-tr>
     </template>
 
-    <template v-slot:body="props" v-if="modelView === 'table'">
+    <template v-slot:body="props" v-if="modeView === 'table'">
       <q-tr :props="props" class="cursor-pointer">
         <q-td
           v-for="col in props.cols"
           class="cursor-pointer"
           :key="col.name"
           :props="props"
-          @click="selectData(props)"
+          @click="onClickOpenDialog(true, props)"
         >
           <div
             v-if="
@@ -766,6 +890,14 @@ onMounted(async () => {
           <div v-else-if="col.name == 'year'" class="table_ellipsis">
             {{ col.value + 543 }}
           </div>
+          <div v-else-if="col.name == 'insignia'" class="table_ellipsis">
+            {{
+              col.value
+                ? (Ops.insigniaOptions.find((r) => r.id === col.value) || {})
+                    .name
+                : "-"
+            }}
+          </div>
           <div v-else class="table_ellipsis">
             {{ col.value ? col.value : "-" }}
           </div>
@@ -782,6 +914,17 @@ onMounted(async () => {
           >
             <q-tooltip>ประวัติแก้ไขเครื่องราชอิสริยาภรณ์</q-tooltip>
           </q-btn>
+          <q-btn
+            flat
+            dense
+            round
+            size="14px"
+            color="red"
+            icon="mdi-delete"
+            @click="clickDelete(props.row.id)"
+          >
+            <q-tooltip>ลบข้อมูล</q-tooltip>
+          </q-btn>
         </q-td>
       </q-tr>
     </template>
@@ -797,7 +940,7 @@ onMounted(async () => {
               round
               color="primary"
               icon="mdi-pencil-outline"
-              @click.stop.prevent="onClickOpenDialog()"
+              @click="onClickOpenDialog(true, props)"
             >
               <q-tooltip>แก่ไขข้อมุล</q-tooltip>
             </q-btn>
@@ -806,7 +949,7 @@ onMounted(async () => {
               round
               color="info"
               icon="mdi-history"
-              @click.stop.prevent="clickHistory(props.row)"
+              @click="clickHistory(props.row)"
             >
               <q-tooltip>ประวัติแก้ไขเครื่องราชอิสริยาภรณ์</q-tooltip>
             </q-btn>
@@ -837,6 +980,19 @@ onMounted(async () => {
                 <q-item-label v-else-if="col.name == 'year'">
                   {{ col.value + 543 }}
                 </q-item-label>
+                <q-item-label
+                  v-else-if="col.name == 'insignia'"
+                  class="table_ellipsis"
+                >
+                  {{
+                    col.value
+                      ? (
+                          Ops.insigniaOptions.find((r) => r.id === col.value) ||
+                          {}
+                        ).name
+                      : "-"
+                  }}
+                </q-item-label>
                 <q-item-label v-else>
                   {{ col.value ? col.value : "-" }}
                 </q-item-label>
@@ -859,7 +1015,7 @@ onMounted(async () => {
               <datepicker
                 autoApply
                 year-picker
-                v-model="year"
+                v-model="insigniaData.year"
                 week-start="0"
                 menu-class-name="modalfix"
                 :locale="'th'"
@@ -875,7 +1031,8 @@ onMounted(async () => {
                     outlined
                     lazy-rules
                     hide-bottom-space
-                    :model-value="year !== 0 ? (year as number) + 543:null"
+                    class="inputgreen"
+                    :model-value="insigniaData.year !== 0 ? (insigniaData.year as number) + 543 : null"
                     :rules="[
                       (val:string) =>
                         !!val ||
@@ -901,7 +1058,7 @@ onMounted(async () => {
                 borderless
                 week-start="0"
                 menu-class-name="modalfix"
-                v-model="receiveDate"
+                v-model="insigniaData.receiveDate"
                 :locale="'th'"
                 :enableTimePicker="false"
               >
@@ -915,18 +1072,17 @@ onMounted(async () => {
                   <q-input
                     dense
                     outlined
+                    hide-bottom-space
+                    class="inputgreen"
                     for="inputDatereceive"
                     ref="dateReceivedRef"
-                    hide-bottom-space
                     :model-value="
-                      receiveDate != null
-                        ? date2Thai(receiveDate as Date)
+                      insigniaData.receiveDate != null
+                        ? date2Thai(insigniaData.receiveDate as Date)
                         : null
                     "
                     :label="`${'วันที่ได้รับ'}`"
-                    :rules="[
-                      (val) => !!val || `${'กรุณาเลือกวันที่ได้รับ'}`,
-                    ]"
+                    :rules="[(val) => !!val || `${'กรุณาเลือกวันที่ได้รับ'}`]"
                     @update:modelValue="() => (editRow = true)"
                   >
                     <template v-slot:prepend>
@@ -952,7 +1108,8 @@ onMounted(async () => {
                 option-value="id"
                 input-debounce="0"
                 option-label="name"
-                v-model="insigniaId"
+                v-model="insigniaData.insigniaId"
+                class="inputgreen"
                 :label="`${'ชื่อเครื่องราชฯ'}`"
                 :options="Ops.insigniaOptions"
                 :rules="[(val:string) => !!val || `${'กรุณาเลือกชื่อเครื่องราชฯ'}`]"
@@ -969,7 +1126,7 @@ onMounted(async () => {
                 outlined
                 lazy-rules
                 hide-bottom-space
-                v-model="insigniaType"
+                v-model="insigniaData.insigniaType"
                 :label="`${'ลำดับชั้น'}`"
                 @update:modelValue="() => (editRow = true)"
               />
@@ -980,7 +1137,8 @@ onMounted(async () => {
                 outlined
                 lazy-rules
                 hide-bottom-space
-                v-model="no"
+                v-model="insigniaData.no"
+                class="inputgreen"
                 :label="`${'ลำดับที่'}`"
                 :rules="[(val:string) => !!val || `${'กรุณากรอกลำดับที่'}`]"
                 @update:modelValue="() => (editRow = true)"
@@ -992,7 +1150,8 @@ onMounted(async () => {
                 outlined
                 lazy-rules
                 hide-bottom-space
-                v-model="issue"
+                v-model="insigniaData.issue"
+                class="inputgreen"
                 :label="`${'ราชกิจจาฯ ฉบับที่'}`"
                 :rules="[(val:string) => !!val || `${'กรุณากรอกราชกิจจาฯ ฉบับที่'}`]"
                 @update:modelValue="() => (editRow = true)"
@@ -1004,7 +1163,8 @@ onMounted(async () => {
                 outlined
                 lazy-rules
                 hide-bottom-space
-                v-model="volumeNo"
+                v-model="insigniaData.volumeNo"
+                class="inputgreen"
                 :label="`${'เล่มที่'}`"
                 :rules="[(val:string) => !!val || `${'กรุณากรอกเล่มที่'}`]"
                 @update:modelValue="() => (editRow = true)"
@@ -1016,7 +1176,8 @@ onMounted(async () => {
                 outlined
                 lazy-rules
                 hide-bottom-space
-                v-model="volume"
+                v-model="insigniaData.volume"
+                class="inputgreen"
                 :label="`${'เล่ม'}`"
                 :rules="[(val:string) => !!val || `${'กรุณากรอกเล่ม'}`]"
                 @update:modelValue="() => (editRow = true)"
@@ -1027,8 +1188,9 @@ onMounted(async () => {
                 dense
                 outlined
                 lazy-rules
-                v-model="section"
                 hide-bottom-space
+                v-model="insigniaData.section"
+                class="inputgreen"
                 :label="`${'ตอน'}`"
                 :rules="[(val:string) => !!val || `${'กรุณากรอกตอน'}`]"
                 @update:modelValue="() => (editRow = true)"
@@ -1039,8 +1201,9 @@ onMounted(async () => {
                 dense
                 lazy-rules
                 outlined
-                v-model="page"
                 hide-bottom-space
+                v-model="insigniaData.page"
+                class="inputgreen"
                 :label="`${'หน้า'}`"
                 :rules="[(val:string) => !!val || `${'กรุณากรอกหน้า'}`]"
                 @update:modelValue="() => (editRow = true)"
@@ -1050,7 +1213,7 @@ onMounted(async () => {
               <datepicker
                 autoApply
                 week-start="0"
-                v-model="dateAnnounce"
+                v-model="insigniaData.dateAnnounce"
                 menu-class-name="modalfix"
                 :locale="'th'"
                 :enableTimePicker="false"
@@ -1065,7 +1228,8 @@ onMounted(async () => {
                     outlined
                     lazy-rules
                     hide-bottom-space
-                    :model-value="date2Thai(dateAnnounce as Date)"
+                    class="inputgreen"
+                    :model-value="date2Thai(insigniaData.dateAnnounce as Date)"
                     :label="`${'วันที่ประกาศในราชกิจจาฯ'}`"
                     :rules="[
                       (val:string) =>
@@ -1080,13 +1244,6 @@ onMounted(async () => {
                         color="primary"
                       />
                     </template>
-                    <template v-if="dateAnnounce && edit" v-slot:append>
-                      <q-icon
-                        name="cancel"
-                        @click.stop.prevent="dateAnnounce = null"
-                        class="cursor-pointer"
-                      />
-                    </template>
                   </q-input>
                 </template>
               </datepicker>
@@ -1097,7 +1254,8 @@ onMounted(async () => {
                 outlined
                 lazy-rules
                 hide-bottom-space
-                v-model="refCommandNo"
+                v-model="insigniaData.refCommandNo"
+                class="inputgreen"
                 :label="`${'เลขที่คำสั่ง'}`"
                 @update:modelValue="() => (editRow = true)"
               >
@@ -1110,7 +1268,7 @@ onMounted(async () => {
               <datepicker
                 autoApply
                 week-start="0"
-                v-model="refCommandDate"
+                v-model="insigniaData.refCommandDate"
                 menu-class-name="modalfix"
                 :locale="'th'"
                 :enableTimePicker="false"
@@ -1126,12 +1284,12 @@ onMounted(async () => {
                     clearable
                     lazy-rules
                     hide-bottom-space
-                    :borderless="!edit"
+                    class="inputgreen"
                     :label="`${'เอกสารอ้างอิง (ลง วัน/เดือน/ปี)'}`"
                     :model-value="
-                      date2Thai(refCommandDate as Date)
+                      date2Thai(insigniaData.refCommandDate as Date)
                     "
-                    @clear="refCommandDate = ''"
+                    @clear="insigniaData.refCommandDate = ''"
                     @update:modelValue="() => (editRow = true)"
                   >
                     <template v-slot:prepend>
@@ -1150,7 +1308,8 @@ onMounted(async () => {
                 dense
                 outlined
                 hide-bottom-space
-                v-model="note"
+                v-model="insigniaData.note"
+                class="inputgreen"
                 label="หมายเหตุ"
                 @update:modelValue="() => (editRow = true)"
               />