diff --git a/src/api/manage/api.insignia.ts b/src/api/manage/api.insignia.ts
index cabf1a9a6..1084b38c9 100644
--- a/src/api/manage/api.insignia.ts
+++ b/src/api/manage/api.insignia.ts
@@ -32,4 +32,7 @@ export default {
   //   listInsigniaHistoryId: (id: string) => `${insignia}history/${id}`,
   //   listInsigniaPublished: `${insignia}history/published`,
   //   listInsigniaPublishedHistory: `${insignia}history/published-history`,
+  insigniaTypeNew: `${insigniaType}draft`,
+  insigniaTypeNewId: (id: string) => `${insigniaType}${id}`,
+  insigniaNewId: (id: string) => `${insignia}${id}`,
 };
diff --git a/src/modules/01_metadataNew/components/insignia/InsigniaDetail.vue b/src/modules/01_metadataNew/components/insignia/InsigniaDetail.vue
index 075bf3125..db71f6c5e 100644
--- a/src/modules/01_metadataNew/components/insignia/InsigniaDetail.vue
+++ b/src/modules/01_metadataNew/components/insignia/InsigniaDetail.vue
@@ -2,118 +2,45 @@
 import { ref, onMounted } from "vue";
 import { useRouter, useRoute } from "vue-router";
 import InsigniaList from "@/modules/01_metadataNew/components/insignia/InsigniaList.vue";
-const router = useRouter();
-const route = useRoute();
-const nameType = ref<string>("");
 import { useCounterMixin } from "@/stores/mixin";
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { useQuasar } from "quasar";
+import { useInsigniaDataStore } from "@/modules/01_metadataNew/stores/InsigniaStore";
 import type {
   DetailResponse,
   DetailRow,
 } from "@/modules/01_metadataNew/interface/response/insignia/Insignia";
 
+const nameType = ref<string>("");
+const router = useRouter();
+const route = useRoute();
+const $q = useQuasar();
+const store = useInsigniaDataStore();
 const row = ref<DetailRow[]>();
 const mixin = useCounterMixin();
-const { date2Thai } = mixin;
+const { date2Thai, messageError, hideLoader, showLoader } = mixin;
 const id = ref<string>(route.params.id.toString());
-function fetchName(name: string) {
-  nameType.value = name;
+const insigniaTypeId = ref<string>("");
+
+async function fetchData(id: string) {
+  showLoader();
+  await http
+    .get(config.API.insigniaTypeNewId(id))
+    .then(async (res) => {
+      insigniaTypeId.value = res.data.result.name;
+      store.fetchData(res.data.result.insignias, res.data.result.name);
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
 }
 
-const data = ref<DetailResponse[]>([
-  {
-    id: "1",
-    level: 1,
-    shortName: "จ.ม.",
-    insigniaType: "ชั้นต่ำกว่าสายสะพาย",
-    insigniaTypeId: "1",
-    note: "-",
-    name: "จัตุรถาภรณ์มงกุฎไทย",
-    createdAt: new Date(),
-    lastUpdatedAt: new Date(),
-    lastUpdateFullName: "System Administrator",
-    isActive: true,
-  },
-  {
-    id: "2",
-    level: 1,
-    shortName: "จ.ช.",
-    insigniaType: "ชั้นต่ำกว่าสายสะพาย",
-    insigniaTypeId: "1",
-    note: "-",
-    name: "จัตุรถาภรณ์ช้างเผือก",
-    createdAt: new Date(),
-    lastUpdatedAt: new Date(),
-    lastUpdateFullName: "คณะกรรมการ ตรวจรับ",
-    isActive: false,
-  },
-  {
-    id: "1",
-    level: 1,
-    shortName: "บ.ม.",
-    insigniaType: "ชั้นสายสะพาย",
-    insigniaTypeId: "2",
-    note: "-",
-    name: "เบญจมาภรณ์มงกุฎไทย",
-    createdAt: new Date(),
-    lastUpdatedAt: new Date(),
-    lastUpdateFullName: "คณะกรรมการ ตรวจรับ",
-    isActive: true,
-  },
-  {
-    id: "2",
-    level: 1,
-    shortName: "ท.ม.",
-    insigniaType: "ชั้นสายสะพาย",
-    insigniaTypeId: "2",
-    note: "-",
-    name: "ทวีติยาภรณ์มงกุฎไทย",
-    createdAt: new Date(),
-    lastUpdatedAt: new Date(),
-    lastUpdateFullName: "คณะกรรมการ ตรวจรับ",
-    isActive: true,
-  },
-  {
-    id: "1",
-    level: 1,
-    shortName: "บ.ช.",
-    insigniaType: "เหรียญบำเหน็จในราชการ",
-    insigniaTypeId: "3",
-    note: "-",
-    name: "เบญจมาภรณ์ช้างเผือก",
-    createdAt: new Date(),
-    lastUpdatedAt: new Date(),
-    lastUpdateFullName: "สาวิตรี ศรีสมัย",
-    isActive: true,
-  },
-  {
-    id: "2",
-    level: 1,
-    shortName: "ท.ม.",
-    insigniaType: "เหรียญบำเหน็จในราชการ",
-    insigniaTypeId: "3",
-    note: "-",
-    name: "ทวีติยาภรณ์มงกุฎไทย",
-    createdAt: new Date(),
-    lastUpdatedAt: new Date(),
-    lastUpdateFullName: "System Administrator",
-    isActive: true,
-  },
-]);
-
-function fetchData() {
-  const datafilter = data.value.find((e) => e.insigniaTypeId === id.value);
-  console.log(datafilter);
-  datafilter && fetchName(datafilter.insigniaType);
-  const list = data.value.map((e) => ({
-    ...e,
-    createdAt: e.createdAt ? date2Thai(e.createdAt) : "",
-    lastUpdatedAt: e.lastUpdatedAt ? date2Thai(e.lastUpdatedAt) : "",
-  }));
-  row.value = list.filter((e) => e.insigniaTypeId === id.value);
-}
-
-onMounted(() => {
-  fetchData();
+onMounted(async () => {
+  fetchData(id.value);
 });
 </script>
 <template>
@@ -128,15 +55,11 @@ onMounted(() => {
       class="q-mr-sm"
       @click="router.go(-1)"
     />
-    รายละเอียดข้อมูลเครื่องราชอิสริยาภรณ์ {{ nameType }}
+    รายการข้อมูลเครื่องราชอิสริยาภรณ์ {{ insigniaTypeId }}
   </div>
 
   <q-card flat bordered>
-    <InsigniaList
-      :data="row"
-      @update:fetchName="fetchName"
-      :nameType="nameType"
-    />
+    <InsigniaList :data="row" />
   </q-card>
 </template>
 
diff --git a/src/modules/01_metadataNew/components/insignia/InsigniaList.vue b/src/modules/01_metadataNew/components/insignia/InsigniaList.vue
index 846725371..a77a1fe19 100644
--- a/src/modules/01_metadataNew/components/insignia/InsigniaList.vue
+++ b/src/modules/01_metadataNew/components/insignia/InsigniaList.vue
@@ -2,13 +2,23 @@
 import { ref, onMounted } from "vue";
 import type { QTableProps } from "quasar";
 import { useCounterMixin } from "@/stores/mixin";
-import { useRouter } from "vue-router";
+import { useRouter, useRoute } from "vue-router";
+import { useInsigniaDataStore } from "@/modules/01_metadataNew/stores/InsigniaStore";
 import dialogHeader from "@/components/DialogHeader.vue";
 import { useQuasar } from "quasar";
-
+import http from "@/plugins/http";
+import config from "@/app.config";
+const store = useInsigniaDataStore();
 const router = useRouter();
 const mixin = useCounterMixin();
-const { date2Thai, dialogRemove, dialogConfirm } = mixin;
+const {
+  date2Thai,
+  dialogRemove,
+  dialogConfirm,
+  showLoader,
+  hideLoader,
+  messageError,
+} = mixin;
 const $q = useQuasar();
 const columns = ref<QTableProps["columns"]>([
   {
@@ -119,7 +129,8 @@ const columns = ref<QTableProps["columns"]>([
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
 ]);
-
+const route = useRoute();
+const id = ref<string>(route.params.id.toString());
 const filterKeyword = ref<string>("");
 const dialog = ref<boolean>(false);
 const isActive = ref<boolean>(false);
@@ -130,6 +141,7 @@ const insigniaTypeId = ref<string>("");
 const nameRef = ref<any>(null);
 const shortNameRef = ref<any>(null);
 const dialogStatus = ref<string>("");
+const editId = ref<string>("");
 const visibleColumns = ref<string[]>([
   "level",
   "name",
@@ -142,11 +154,6 @@ const visibleColumns = ref<string[]>([
   "note",
 ]);
 
-const props = defineProps({
-  data: { type: Object },
-  nameType: { type: String },
-});
-
 function closeDialog() {
   dialog.value = false;
 }
@@ -157,21 +164,78 @@ function validateForm() {
   onSubmit();
 }
 
+async function fetchData(id: string) {
+  showLoader();
+  await http
+    .get(config.API.insigniaTypeNewId(id))
+    .then(async (res) => {
+      insigniaTypeId.value = res.data.result.name;
+      store.fetchData(res.data.result.insignias, res.data.result.name);
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+onMounted(async () => {
+  fetchData(id.value);
+  console.log(id.value);
+});
+
 async function onSubmit() {
   if (name.value.length > 0 && shortName.value.length > 0) {
     dialogConfirm(
       $q,
       async () => {
-        console.log("สำเร็จ");
+        dialogStatus.value === "create" ? addData() : editData(editId.value);
         closeDialog();
         name.value = "";
         shortName.value = "";
+        isActive.value = false;
+        note.value = "";
       },
       "ยืนยันการบันทึกข้อมูล",
       "ต้องการยืนยันการบันทึกข้อมูลนี้หรือไม่ ?"
     );
   }
 }
+
+async function addData() {
+  await http.post(config.API.insignia, {
+    name: name.value,
+    isActive: isActive.value,
+    shortName: shortName.value,
+    note: note.value == "" ? "-" : "",
+    insigniaTypeId: id.value,
+  });
+  fetchData(id.value);
+}
+
+async function editData(idData: string) {
+  await http.put(config.API.insigniaNewId(idData), {
+    name: name.value,
+    isActive: isActive.value,
+    shortName: shortName.value,
+    note: note.value == "" ? "-" : "",
+    insigniaTypeId: id.value,
+  });
+  fetchData(id.value);
+}
+
+async function deleteData(idData: string) {
+  await http.delete(config.API.insigniaNewId(idData));
+  fetchData(id.value);
+}
+
+import { defineEmits } from "vue";
+
+const emit = defineEmits(["nameType"]);
+
+const nameType = () => {
+  emit("nameType", insigniaTypeId.value);
+};
 </script>
 
 <template>
@@ -214,7 +278,7 @@ async function onSubmit() {
     <d-table
       ref="table"
       :columns="columns"
-      :rows="props.data"
+      :rows="store.row"
       :filter="filterKeyword"
       row-key="name"
       flat
@@ -272,6 +336,11 @@ async function onSubmit() {
                       () => {
                         dialogStatus = 'edit';
                         dialog = true;
+                        editId = props.row.id;
+                        name = props.row.name;
+                        shortName = props.row.shortName;
+                        note = props.row.note;
+                        isActive = props.row.isActive;
                       }
                     "
                   >
@@ -284,7 +353,12 @@ async function onSubmit() {
                   </q-item>
                   <q-item clickable>
                     <q-item-section
-                      @click="dialogRemove($q, async () => {})"
+                      @click="
+                        dialogRemove(
+                          $q,
+                          async () => await deleteData(props.row.id)
+                        )
+                      "
                       v-close-popup
                     >
                       <div class="row items-center white">
@@ -315,7 +389,7 @@ async function onSubmit() {
           <q-card-section class="q-pa-none">
             <q-input
               outlined
-              :model-value="nameType"
+              :model-value="insigniaTypeId"
               label="ลำดับชั้นเครื่องราชฯ"
               dense
               lazy-rules
@@ -328,7 +402,7 @@ async function onSubmit() {
               ref="nameRef"
               outlined
               v-model="name"
-              label="ชื่อเครื่องราช"
+              label="ชื่อเครื่องราชฯ"
               dense
               lazy-rules
               borderless
diff --git a/src/modules/01_metadataNew/components/insignia/InsigniaType.vue b/src/modules/01_metadataNew/components/insignia/InsigniaType.vue
index 00b0f97b9..684fe5740 100644
--- a/src/modules/01_metadataNew/components/insignia/InsigniaType.vue
+++ b/src/modules/01_metadataNew/components/insignia/InsigniaType.vue
@@ -6,11 +6,20 @@ import { useRouter } from "vue-router";
 import { useInsigniaDataStore } from "@/modules/01_metadataNew/stores/InsigniaStore";
 import dialogHeader from "@/components/DialogHeader.vue";
 import { useQuasar } from "quasar";
+import http from "@/plugins/http";
+import config from "@/app.config";
 
 const store = useInsigniaDataStore();
 const router = useRouter();
 const mixin = useCounterMixin();
-const { dialogRemove, dialogConfirm } = mixin;
+const {
+  dialogRemove,
+  dialogConfirm,
+  success,
+  messageError,
+  showLoader,
+  hideLoader,
+} = mixin;
 const columns = ref<QTableProps["columns"]>([
   {
     name: "name",
@@ -71,6 +80,7 @@ const columns = ref<QTableProps["columns"]>([
 
 const $q = useQuasar();
 
+const editId = ref<string>("");
 const filterKeyword = ref<string>("");
 const dialog = ref<boolean>(false);
 const isActive = ref<boolean>(false);
@@ -87,34 +97,20 @@ const visibleColumns = ref<string[]>([
 
 // const row = ref([]);
 
-function fetchData() {
-  const data = [
-    {
-      id: "1",
-      name: "ชั้นต่ำกว่าสายสะพาย",
-      createdAt: new Date(),
-      lastUpdatedAt: new Date(),
-      lastUpdateFullName: "สาวิตรี ศรีสมัย",
-      isActive: true,
-    },
-    {
-      id: "2",
-      name: "ชั้นสายสะพาย",
-      createdAt: new Date(),
-      lastUpdatedAt: new Date(),
-      lastUpdateFullName: "System Administrator",
-      isActive: false,
-    },
-    {
-      id: "3",
-      name: "เหรียญบำเหน็จในราชการ",
-      createdAt: new Date(),
-      lastUpdatedAt: new Date(),
-      lastUpdateFullName: "คณะกรรมการ ตรวจรับ",
-      isActive: false,
-    },
-  ];
-  store.fetchData(data);
+async function fetchData() {
+  showLoader();
+  await http
+    .get(config.API.insigniaTypeNew)
+    .then(async (res) => {
+      console.log(res.data.result);
+      store.fetchData(res.data.result);
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
 }
 
 onMounted(async () => {
@@ -129,6 +125,27 @@ function onclickDetail(id: string) {
   router.push(`/master-data/insignia/detail/${id}`);
 }
 
+async function addData() {
+  await http.post(config.API.insigniaType, {
+    name: name.value,
+    isActive: isActive.value,
+  });
+  fetchData();
+}
+
+async function editData(id: string) {
+  await http.put(config.API.insigniaTypeNewId(id), {
+    name: name.value,
+    isActive: isActive.value,
+  });
+  fetchData();
+}
+
+async function deleteData(id: string) {
+  await http.delete(config.API.insigniaTypeNewId(id));
+  fetchData();
+}
+
 function validateForm() {
   nameRef.value.validate();
   onSubmit();
@@ -139,9 +156,10 @@ async function onSubmit() {
     dialogConfirm(
       $q,
       async () => {
-        console.log("สำเร็จ");
+        dialogStatus.value === "create" ? addData() : editData(editId.value);
         closeDialog();
         name.value = "";
+        isActive.value = false;
       },
       "ยืนยันการบันทึกข้อมูล",
       "ต้องการยืนยันการบันทึกข้อมูลนี้หรือไม่ ?"
@@ -246,6 +264,9 @@ async function onSubmit() {
                     () => {
                       dialogStatus = 'edit';
                       dialog = true;
+                      editId = props.row.id;
+                      name = props.row.name;
+                      isActive = props.row.isActive;
                     }
                   "
                 >
@@ -258,7 +279,12 @@ async function onSubmit() {
                 </q-item>
                 <q-item clickable>
                   <q-item-section
-                    @click="dialogRemove($q, async () => {})"
+                    @click="
+                      dialogRemove(
+                        $q,
+                        async () => await deleteData(props.row.id)
+                      )
+                    "
                     v-close-popup
                   >
                     <div class="row items-center white">
@@ -280,7 +306,7 @@ async function onSubmit() {
       <form @submit.prevent="validateForm">
         <q-card-section class="flex justify-between" style="padding: 0">
           <dialog-header
-            :tittle="dialogStatus == 'edit' ? 'แก้ไขข้อมูล' : 'เพิ่มข้อมูล'"
+            :tittle="dialogStatus === 'edit' ? 'แก้ไขข้อมูล' : 'เพิ่มข้อมูล'"
             :close="closeDialog"
           />
         </q-card-section>
diff --git a/src/modules/01_metadataNew/stores/InsigniaStore.ts b/src/modules/01_metadataNew/stores/InsigniaStore.ts
index 55ca005ed..b5b7873bd 100644
--- a/src/modules/01_metadataNew/stores/InsigniaStore.ts
+++ b/src/modules/01_metadataNew/stores/InsigniaStore.ts
@@ -10,14 +10,15 @@ const { date2Thai } = useCounterMixin();
 
 export const useInsigniaDataStore = defineStore("insigniaData", () => {
   const row = ref<DataRow[]>();
-  function fetchData(data: DataResponse[]) {
-    console.log(data);
+  const name1 = ref<string>("");
+  function fetchData(data: DataResponse[], insigniaType?: string) {
     const list = data.map((e) => ({
       ...e,
+      insigniaType: insigniaType,
       createdAt: e.createdAt ? date2Thai(e.createdAt) : "",
       lastUpdatedAt: e.lastUpdatedAt ? date2Thai(e.lastUpdatedAt) : "",
     }));
-    console.log(list);
+    console.log("test");
     row.value = list;
   }