diff --git a/src/modules/01_metadataNew/components/insignia/InsigniaDetail.vue b/src/modules/01_metadataNew/components/insignia/InsigniaDetail.vue
index 7a82b6fab..e9d957565 100644
--- a/src/modules/01_metadataNew/components/insignia/InsigniaDetail.vue
+++ b/src/modules/01_metadataNew/components/insignia/InsigniaDetail.vue
@@ -17,7 +17,6 @@ const router = useRouter();
 const route = useRoute();
 const $q = useQuasar();
 const store = useInsigniaDataStore();
-const row = ref<DetailRow[]>();
 const mixin = useCounterMixin();
 const { date2Thai, messageError, hideLoader, showLoader } = mixin;
 const id = ref<string>(route.params.id.toString());
@@ -40,7 +39,7 @@ async function fetchData(id: string) {
 }
 
 onMounted(async () => {
-  fetchData(id.value);
+  await fetchData(id.value);
 });
 </script>
 
@@ -60,7 +59,7 @@ onMounted(async () => {
   </div>
 
   <q-card flat bordered>
-    <InsigniaList :data="row" />
+    <InsigniaList :fetchData="fetchData"/>
   </q-card>
 </template>
 
diff --git a/src/modules/01_metadataNew/components/insignia/InsigniaList.vue b/src/modules/01_metadataNew/components/insignia/InsigniaList.vue
index e00d6202c..cf7090275 100644
--- a/src/modules/01_metadataNew/components/insignia/InsigniaList.vue
+++ b/src/modules/01_metadataNew/components/insignia/InsigniaList.vue
@@ -12,6 +12,13 @@ import config from "@/app.config";
 const store = useInsigniaDataStore();
 const router = useRouter();
 const mixin = useCounterMixin();
+
+const props = defineProps({
+  fetchData: {
+    type: Function,
+    default: ()=>"",
+  }
+})
 const {
   date2Thai,
   dialogRemove,
@@ -23,17 +30,14 @@ const {
 const $q = useQuasar();
 const columns = ref<QTableProps["columns"]>([
   {
-    name: "level",
+    name: "no",
     align: "left",
     label: "ลำดับ",
-    sortable: true,
-    field: "level",
+    sortable: false,
+    field: "no",
     headerStyle: "font-size: 14px; width:0px",
     style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
-
   {
     name: "name",
     align: "left",
@@ -144,7 +148,7 @@ const shortNameRef = ref<any>(null);
 const dialogStatus = ref<string>("");
 const editId = ref<string>("");
 const visibleColumns = ref<string[]>([
-  "level",
+  "no",
   "name",
   "shortName",
   "insigniaType",
@@ -165,24 +169,24 @@ 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);
+//     })
+//     .catch((err) => {
+//       messageError($q, err);
+//     })
+//     .finally(() => {
+//       hideLoader();
+//     });
+// }
+// onMounted(async () => {
+//   fetchData(id.value);
+// });
 
 async function onSubmit() {
   if (name.value.length > 0 && shortName.value.length > 0) {
@@ -210,7 +214,7 @@ async function addData() {
     note: note.value == "" ? "-" : note.value,
     insigniaTypeId: id.value,
   });
-  fetchData(id.value);
+  props.fetchData(id.value);
 }
 
 async function editData(idData: string) {
@@ -221,12 +225,12 @@ async function editData(idData: string) {
     note: note.value == "" ? "-" : note.value,
     insigniaTypeId: id.value,
   });
-  fetchData(id.value);
+  props.fetchData(id.value);
 }
 
 async function deleteData(idData: string) {
   await http.delete(config.API.insigniaNewId(idData));
-  fetchData(id.value);
+  props.fetchData(id.value);
 }
 
 import { defineEmits } from "vue";
@@ -305,8 +309,11 @@ const dialogOrder = ref<boolean>(false);
       </template>
       <template v-slot:body="props">
         <q-tr :props="props" class="cursor-pointer">
-          <q-td v-for="col in props.cols" :key="col.id">
-            <div v-if="col.name == 'isActive'">
+          <q-td v-for="(col, index) in props.cols" :key="col.id">
+            <div v-if="col.name == 'no'">
+              {{ props.rowIndex + 1 }}
+            </div>
+            <div v-else-if="col.name == 'isActive'">
               <q-icon
                 v-if="col.value == false"
                 name="mdi-close"
diff --git a/src/modules/01_metadataNew/components/insignia/TableDraggable.vue b/src/modules/01_metadataNew/components/insignia/TableDraggable.vue
index 5f1d8bdc9..072e36723 100644
--- a/src/modules/01_metadataNew/components/insignia/TableDraggable.vue
+++ b/src/modules/01_metadataNew/components/insignia/TableDraggable.vue
@@ -58,6 +58,7 @@ async function save() {
 });
   console.log("post data===>", dataPost);
   modal.value = false
+  
   // showLoader();
   // await http
   //   .put(config.API.insigniaTypeNewId(id), dataPost)
@@ -68,6 +69,7 @@ async function save() {
   //   })
   //   .finally(() => {
   //     hideLoader();
+  store.row = rows.value
   //   });
 }
 
diff --git a/src/modules/01_metadataNew/stores/InsigniaStore.ts b/src/modules/01_metadataNew/stores/InsigniaStore.ts
index c1a101b40..dbcfb026d 100644
--- a/src/modules/01_metadataNew/stores/InsigniaStore.ts
+++ b/src/modules/01_metadataNew/stores/InsigniaStore.ts
@@ -11,9 +11,9 @@ const { date2Thai } = useCounterMixin();
 export const useInsigniaDataStore = defineStore("insigniaData", () => {
   const row = ref<DataRow[]>([]);
   function fetchData(data: DataResponse[], insigniaType?: string) {
-    data.forEach((row, index) => {
-      row.level = index + 1;
-    });
+    // data.forEach((row, index) => {
+    //   row.level = index + 1;
+    // });
     const list = data.map((e) => ({
       ...e,
       insigniaType: insigniaType,