diff --git a/src/modules/01_metadataNew/components/insignia/InsigniaList.vue b/src/modules/01_metadataNew/components/insignia/InsigniaList.vue
index 8ff7e51b4..909c98e87 100644
--- a/src/modules/01_metadataNew/components/insignia/InsigniaList.vue
+++ b/src/modules/01_metadataNew/components/insignia/InsigniaList.vue
@@ -13,18 +13,18 @@ const store = useInsigniaDataStore();
 const router = useRouter();
 const mixin = useCounterMixin();
 
-// const props = defineProps({
-//   fetchData: {
-//     type: Function,
-//     default: () => "",
-//   },
-// });
 const insigniaTypeName = defineModel<string>("insigniaTypeName", {
   required: true,
 });
 
-const { dialogRemove, dialogConfirm, showLoader, hideLoader, messageError } =
-  mixin;
+const {
+  dialogRemove,
+  dialogConfirm,
+  showLoader,
+  hideLoader,
+  messageError,
+  success,
+} = mixin;
 const $q = useQuasar();
 const columns = ref<QTableProps["columns"]>([
   {
@@ -216,26 +216,49 @@ async function addData() {
     })
     .then(() => {
       fetchData(id.value);
+      success($q, "บันทึกข้อมูลสำเร็จ");
     })
     .catch((err) => {
       messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
     });
 }
 
 async function editData(idData: string) {
-  await http.put(config.API.insigniaNewIdOrg(idData), {
-    name: name.value,
-    isActive: isActive.value,
-    shortName: shortName.value,
-    note: note.value == "" ? "-" : note.value,
-    insigniaTypeId: id.value,
-  });
-  fetchData(id.value);
+  await http
+    .put(config.API.insigniaNewIdOrg(idData), {
+      name: name.value,
+      isActive: isActive.value,
+      shortName: shortName.value,
+      note: note.value == "" ? "-" : note.value,
+      insigniaTypeId: id.value,
+    })
+    .then(() => {
+      fetchData(id.value);
+      success($q, "บันทึกข้อมูลสำเร็จ");
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
 }
 
 async function deleteData(idData: string) {
-  await http.delete(config.API.insigniaNewIdOrg(idData));
-  fetchData(id.value);
+  await http
+    .delete(config.API.insigniaNewIdOrg(idData))
+    .then(() => {
+      fetchData(id.value);
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
 }
 
 import { defineEmits } from "vue";
@@ -382,7 +405,7 @@ const dialogOrder = ref<boolean>(false);
     </d-table>
 
     <q-dialog v-model="dialog" class="dialog" persistent>
-      <q-card style="min-width: 350px" class="bg-grey-11">
+      <q-card style="min-width: 350px">
         <form @submit.prevent="validateForm">
           <q-card-section class="flex justify-between" style="padding: 0">
             <dialog-header
@@ -393,55 +416,59 @@ const dialogOrder = ref<boolean>(false);
 
           <q-separator color="grey-4" />
           <q-card-section class="q-pa-none">
-            <q-input
-              outlined
-              :model-value="insigniaTypeId"
-              label="ลำดับชั้นเครื่องราชฯ"
-              dense
-              lazy-rules
-              borderless
-              class="col-12 bg-white q-ma-md"
-              hide-bottom-space
-              readonly
-            />
-            <q-input
-              ref="nameRef"
-              outlined
-              v-model="name"
-              label="ชื่อเครื่องราชฯ"
-              dense
-              lazy-rules
-              borderless
-              class="col-12 bg-white q-ma-md"
-              :rules="[
-                (val) => val.length > 0 || 'กรุณากรอกลำดับชั้นเครื่องราชฯ',
-              ]"
-              hide-bottom-space
-            />
-            <q-input
-              ref="shortNameRef"
-              outlined
-              v-model="shortName"
-              label="ชื่อย่อ"
-              dense
-              lazy-rules
-              borderless
-              class="col-12 bg-white q-ma-md"
-              :rules="[
-                (val) => val.length > 0 || 'กรุณากรอกลำดับชั้นเครื่องราชฯ',
-              ]"
-              hide-bottom-space
-            />
-            <q-input
-              outlined
-              v-model="note"
-              label="หมายเหตุ"
-              dense
-              type="textarea"
-              borderless
-              class="col-12 bg-white q-ma-md"
-              hide-bottom-space
-            />
+            <div class="col-12 q-ma-md">
+              <q-input
+                outlined
+                :model-value="insigniaTypeId"
+                label="ลำดับชั้นเครื่องราชฯ"
+                dense
+                lazy-rules
+                borderless
+                hide-bottom-space
+                readonly
+              />
+            </div>
+            <div class="col-12 q-ma-md">
+              <q-input
+                ref="nameRef"
+                outlined
+                v-model="name"
+                label="ชื่อเครื่องราชฯ"
+                dense
+                lazy-rules
+                borderless
+                :rules="[
+                  (val) => val.length > 0 || 'กรุณากรอกลำดับชั้นเครื่องราชฯ',
+                ]"
+                hide-bottom-space
+              />
+            </div>
+            <div class="col-12 q-ma-md">
+              <q-input
+                ref="shortNameRef"
+                outlined
+                v-model="shortName"
+                label="ชื่อย่อ"
+                dense
+                lazy-rules
+                borderless
+                :rules="[
+                  (val) => val.length > 0 || 'กรุณากรอกลำดับชั้นเครื่องราชฯ',
+                ]"
+                hide-bottom-space
+              />
+            </div>
+            <div class="col-12 q-ma-md">
+              <q-input
+                outlined
+                v-model="note"
+                label="หมายเหตุ"
+                dense
+                type="textarea"
+                borderless
+                hide-bottom-space
+              />
+            </div>
             <div
               class="col q-ma-md q-pa-sm bg-white border_custom text-weight-medium"
             >
@@ -463,7 +490,6 @@ const dialogOrder = ref<boolean>(false);
               unelevated
               label="บันทึก"
               color="public"
-              class="q-px-md"
             >
               <q-tooltip>บันทึกข้อมูล</q-tooltip>
             </q-btn>
diff --git a/src/modules/01_metadataNew/components/insignia/InsigniaType.vue b/src/modules/01_metadataNew/components/insignia/InsigniaType.vue
index 9353c4022..216586c40 100644
--- a/src/modules/01_metadataNew/components/insignia/InsigniaType.vue
+++ b/src/modules/01_metadataNew/components/insignia/InsigniaType.vue
@@ -95,8 +95,6 @@ const visibleColumns = ref<string[]>([
   "isActive",
 ]);
 
-// const row = ref([]);
-
 async function fetchData() {
   showLoader();
   await http
@@ -125,24 +123,53 @@ function onclickDetail(id: string) {
 }
 
 async function addData() {
-  await http.post(config.API.insigniaTypeOrg, {
-    name: name.value,
-    isActive: isActive.value,
-  });
-  fetchData();
+  await http
+    .post(config.API.insigniaTypeOrg, {
+      name: name.value,
+      isActive: isActive.value,
+    })
+    .then(() => {
+      fetchData();
+      success($q, "บันทึกข้อมูลสำเร็จ");
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
 }
 
 async function editData(id: string) {
-  await http.put(config.API.insigniaTypeNewIdOrg(id), {
-    name: name.value,
-    isActive: isActive.value,
-  });
-  fetchData();
+  await http
+    .put(config.API.insigniaTypeNewIdOrg(id), {
+      name: name.value,
+      isActive: isActive.value,
+    })
+    .then(() => {
+      fetchData();
+      success($q, "บันทึกข้อมูลสำเร็จ");
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
 }
 
 async function deleteData(id: string) {
-  await http.delete(config.API.insigniaTypeNewIdOrg(id));
-  fetchData();
+  await http
+    .delete(config.API.insigniaTypeNewIdOrg(id))
+    .then(() => {
+      fetchData();
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
 }
 
 function validateForm() {
@@ -287,7 +314,7 @@ async function onSubmit() {
   </d-table>
 
   <q-dialog v-model="dialog" class="dialog" persistent>
-    <q-card style="min-width: 350px" class="bg-grey-11">
+    <q-card style="min-width: 350px">
       <form @submit.prevent="validateForm">
         <q-card-section class="flex justify-between" style="padding: 0">
           <dialog-header
@@ -298,20 +325,21 @@ async function onSubmit() {
 
         <q-separator color="grey-4" />
         <q-card-section class="q-pa-none">
-          <q-input
-            ref="nameRef"
-            outlined
-            v-model="name"
-            label="ลำดับชั้นเครื่องราชฯ"
-            dense
-            lazy-rules
-            borderless
-            class="col-12 bg-white q-ma-md"
-            :rules="[
-              (val) => val.length > 0 || 'กรุณากรอกลำดับชั้นเครื่องราชฯ',
-            ]"
-            hide-bottom-space
-          />
+          <div class="col-12 q-ma-md">
+            <q-input
+              ref="nameRef"
+              outlined
+              v-model="name"
+              label="ลำดับชั้นเครื่องราชฯ"
+              dense
+              lazy-rules
+              borderless
+              :rules="[
+                (val) => val.length > 0 || 'กรุณากรอกลำดับชั้นเครื่องราชฯ',
+              ]"
+              hide-bottom-space
+            />
+          </div>
           <div
             class="col q-ma-md q-pa-sm bg-white border_custom text-weight-medium"
           >
@@ -333,7 +361,6 @@ async function onSubmit() {
             unelevated
             label="บันทึก"
             color="public"
-            class="q-px-md"
           >
             <q-tooltip>บันทึกข้อมูล</q-tooltip>
           </q-btn>