diff --git a/src/api/manage/api.insignia.ts b/src/api/manage/api.insignia.ts
index 1084b38c9..5fe13f047 100644
--- a/src/api/manage/api.insignia.ts
+++ b/src/api/manage/api.insignia.ts
@@ -35,4 +35,5 @@ export default {
   insigniaTypeNew: `${insigniaType}draft`,
   insigniaTypeNewId: (id: string) => `${insigniaType}${id}`,
   insigniaNewId: (id: string) => `${insignia}${id}`,
+  insigniaSort: (id: string) => `${insignia}sort/${id}`,
 };
diff --git a/src/modules/01_metadataNew/components/insignia/InsigniaDetail.vue b/src/modules/01_metadataNew/components/insignia/InsigniaDetail.vue
index e9d957565..3d4502326 100644
--- a/src/modules/01_metadataNew/components/insignia/InsigniaDetail.vue
+++ b/src/modules/01_metadataNew/components/insignia/InsigniaDetail.vue
@@ -1,46 +1,11 @@
 <script setup lang="ts">
-import { ref, onMounted } from "vue";
-import { useRouter, useRoute } from "vue-router";
+import { ref } from "vue";
+import { useRouter } from "vue-router";
 import InsigniaList from "@/modules/01_metadataNew/components/insignia/InsigniaList.vue";
-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 mixin = useCounterMixin();
-const { date2Thai, messageError, hideLoader, showLoader } = mixin;
-const id = ref<string>(route.params.id.toString());
-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();
-    });
-}
-
-onMounted(async () => {
-  await fetchData(id.value);
-});
+const nameId = ref<string>("");
 </script>
 
 <template>
@@ -55,11 +20,11 @@ onMounted(async () => {
       class="q-mr-sm"
       @click="router.go(-1)"
     />
-    รายการข้อมูลเครื่องราชอิสริยาภรณ์ {{ insigniaTypeId }}
+    รายการข้อมูลเครื่องราชอิสริยาภรณ์ {{ nameId }}
   </div>
 
   <q-card flat bordered>
-    <InsigniaList :fetchData="fetchData"/>
+    <InsigniaList v-model:insigniaTypeName="nameId" />
   </q-card>
 </template>
 
diff --git a/src/modules/01_metadataNew/components/insignia/InsigniaList.vue b/src/modules/01_metadataNew/components/insignia/InsigniaList.vue
index cf7090275..776016ea9 100644
--- a/src/modules/01_metadataNew/components/insignia/InsigniaList.vue
+++ b/src/modules/01_metadataNew/components/insignia/InsigniaList.vue
@@ -13,20 +13,18 @@ const store = useInsigniaDataStore();
 const router = useRouter();
 const mixin = useCounterMixin();
 
-const props = defineProps({
-  fetchData: {
-    type: Function,
-    default: ()=>"",
-  }
-})
-const {
-  date2Thai,
-  dialogRemove,
-  dialogConfirm,
-  showLoader,
-  hideLoader,
-  messageError,
-} = mixin;
+// const props = defineProps({
+//   fetchData: {
+//     type: Function,
+//     default: () => "",
+//   },
+// });
+const insigniaTypeName = defineModel<string>("insigniaTypeName", {
+  required: true,
+});
+
+const { dialogRemove, dialogConfirm, showLoader, hideLoader, messageError } =
+  mixin;
 const $q = useQuasar();
 const columns = ref<QTableProps["columns"]>([
   {
@@ -139,9 +137,9 @@ const id = ref<string>(route.params.id.toString());
 const filterKeyword = ref<string>("");
 const dialog = ref<boolean>(false);
 const isActive = ref<boolean>(false);
-const name = ref<string>("");
 const shortName = ref<string>("");
 const note = ref<string>("");
+const name = ref<string>("");
 const insigniaTypeId = ref<string>("");
 const nameRef = ref<any>(null);
 const shortNameRef = ref<any>(null);
@@ -169,24 +167,25 @@ 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);
-// });
+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);
+      insigniaTypeName.value = res.data.result.name;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+onMounted(async () => {
+  await fetchData(id.value);
+});
 
 async function onSubmit() {
   if (name.value.length > 0 && shortName.value.length > 0) {
@@ -214,7 +213,7 @@ async function addData() {
     note: note.value == "" ? "-" : note.value,
     insigniaTypeId: id.value,
   });
-  props.fetchData(id.value);
+  fetchData(id.value);
 }
 
 async function editData(idData: string) {
@@ -225,12 +224,12 @@ async function editData(idData: string) {
     note: note.value == "" ? "-" : note.value,
     insigniaTypeId: id.value,
   });
-  props.fetchData(id.value);
+  fetchData(id.value);
 }
 
 async function deleteData(idData: string) {
   await http.delete(config.API.insigniaNewId(idData));
-  props.fetchData(id.value);
+  fetchData(id.value);
 }
 
 import { defineEmits } from "vue";
@@ -265,7 +264,7 @@ const dialogOrder = ref<boolean>(false);
       >
         <q-tooltip> จัดลำดับการแสดงผล </q-tooltip>
       </q-btn>
-      <TableDraggable v-model:modal="dialogOrder" />
+      <TableDraggable v-model:modal="dialogOrder" :fetchData="fetchData" />
       <q-space />
       <div class="row q-gutter-sm">
         <q-input outlined dense v-model="filterKeyword" label="ค้นหา"></q-input>
diff --git a/src/modules/01_metadataNew/components/insignia/TableDraggable.vue b/src/modules/01_metadataNew/components/insignia/TableDraggable.vue
index 072e36723..8b2ddf837 100644
--- a/src/modules/01_metadataNew/components/insignia/TableDraggable.vue
+++ b/src/modules/01_metadataNew/components/insignia/TableDraggable.vue
@@ -42,6 +42,14 @@ const columns = ref<QTableProps["columns"]>([
     sortable: true,
   },
 ]);
+const id = ref<string>(route.params.id.toString());
+
+const props = defineProps({
+  fetchData: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+});
 
 function onDrop(from: any, to: any) {
   onDropRow(from, to);
@@ -53,24 +61,23 @@ function onDropRow(from: any, to: any) {
 }
 
 async function save() {
-  const dataPost = await rows.value.map((obj:any) => {
-  return obj.id;
-});
-  console.log("post data===>", dataPost);
-  modal.value = false
-  
-  // showLoader();
-  // await http
-  //   .put(config.API.insigniaTypeNewId(id), dataPost)
-  //   .then(async (res) => {
-  //   })
-  //   .catch((err) => {
-  //     messageError($q, err);
-  //   })
-  //   .finally(() => {
-  //     hideLoader();
-  store.row = rows.value
-  //   });
+  const dataPost = await rows.value.map((obj: any) => {
+    return obj.id;
+  });
+  console.log("post data===> ", dataPost);
+  modal.value = false;
+
+  showLoader();
+  await http
+    .put(config.API.insigniaSort(id.value), { id: dataPost })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+      store.row = rows.value;
+      props.fetchData(id.value);
+    });
 }
 
 async function onSubmit() {