diff --git a/src/components/Dialogs/PopupPersonal.vue b/src/components/Dialogs/PopupPersonal.vue
deleted file mode 100644
index 007c5b1cd..000000000
--- a/src/components/Dialogs/PopupPersonal.vue
+++ /dev/null
@@ -1,406 +0,0 @@
-<script setup lang="ts">
-import { ref, reactive, watch } from "vue";
-import { useQuasar } from "quasar";
-import http from "@/plugins/http";
-import config from "@/app.config";
-
-/** importType*/
-import type { PersonalImformation } from "@/components/information/interface/response/Information";
-import type { Goverment } from "@/components/information/interface/response/Government";
-import type { Avatar } from "@/components/information/interface/response/avatar";
-
-/** importStore*/
-import { useCounterMixin } from "@/stores/mixin";
-
-/** use*/
-const mixin = useCounterMixin();
-const $q = useQuasar();
-
-const { showLoader, hideLoader, messageError, date2Thai } = mixin;
-
-/** props*/
-const props = defineProps({
-  id: {
-    type: String,
-    requier: true,
-  },
-  modal: {
-    type: Boolean,
-    requier: true,
-  },
-});
-
-/** emit*/
-const emit = defineEmits(["update:modal"]);
-
-/** interface*/
-interface StatusLoad {
-  val: boolean;
-  val2: boolean;
-  val3: boolean;
-}
-
-/** ตัวแปร*/
-const modal = ref<boolean>(false);
-const statusLoad = ref<StatusLoad>({ val: false, val2: false, val3: false }); // เช็คสถานะการโหลด
-const avatar = reactive<Avatar>({
-  avatar: "",
-  fullname: "",
-  position: "",
-});
-const imformation = reactive<PersonalImformation>({
-  prefix: "",
-  citizenId: "",
-  firstName: "",
-  lastName: "",
-  birthDate: "",
-  age: "",
-  gender: "",
-});
-const goverment = reactive<Goverment>({
-  oc: "",
-  posNo: "",
-  position: "",
-  positionPathSide: "",
-  positionLine: "",
-  positionType: "",
-  positionLevel: "",
-  positionExecutive: "",
-  positionExecutiveSide: "",
-});
-
-/**
- * function เรียกข้อมูลรูปภาพ
- * @param id profileID
- */
-async function fetchAvatar(id: string) {
-  showLoader();
-  await http
-    .get(config.API.profileAvatarId(id))
-    .then((res) => {
-      const data = res.data.result;
-      avatar.avatar = data.avatar;
-      avatar.fullname = data.fullname;
-      avatar.position = data.position ?? "-";
-    })
-    .catch((err) => {
-      messageError($q, err);
-    })
-    .finally(() => {
-      statusLoad.value.val = true;
-      loaderFunction();
-    });
-}
-
-/**
- * function เรียกข้อมูลส่วนตัว
- * @param id profileID
- */
-async function fetchInformation(id: string) {
-  showLoader();
-  await http
-    .get(config.API.profileInforId(id))
-    .then((res) => {
-      const data = res.data.result;
-      imformation.prefix = data.prefix;
-      imformation.citizenId = data.citizenId;
-      imformation.firstName = data.firstName;
-      imformation.lastName = data.lastName;
-      imformation.birthDate = data.birthDate ? date2Thai(data.birthDate) : "";
-      imformation.age = data.age;
-      imformation.gender = data.gender;
-    })
-    .catch((err) => {
-      messageError($q, err);
-    })
-    .finally(() => {
-      statusLoad.value.val2 = true;
-      loaderFunction();
-    });
-}
-
-/**
- * function เรียกข้อมูลข้อมูลราชการ
- * @param id profileID
- */
-async function fetchProfileGov(id: string) {
-  showLoader();
-  await http
-    .get(config.API.profileGovId(id))
-    .then((res) => {
-      const data = res.data.result;
-      goverment.oc = data.oc ?? "-";
-      goverment.posNo = data.posNo ?? "-";
-      goverment.position = data.position ?? "-";
-      goverment.positionPathSide = data.positionPathSide ?? "-";
-      goverment.positionLine = data.positionLine ?? "-";
-      goverment.positionType = data.positionType ?? "-";
-      goverment.positionLevel = data.positionLevel ?? "-";
-      goverment.positionExecutive = data.positionExecutive ?? "-";
-      goverment.positionExecutiveSide = data.positionExecutiveSide ?? "-";
-    })
-    .catch((err) => {
-      messageError($q, err);
-    })
-    .finally(() => {
-      statusLoad.value.val3 = true;
-      loaderFunction();
-    });
-}
-
-/** functoion เช็คการโหลดของข้อมูล*/
-function loaderFunction() {
-  const allTrue = Object.values(statusLoad.value).every((val) => val);
-  allTrue && hideLoader();
-}
-
-function redirecToRegistry() {
-  window.open(`/registry/${props.id}`, "_blank");
-  modal.value = false;
-}
-
-watch(
-  () => props.modal,
-  async () => {
-    modal.value = props.modal ? props.modal : false;
-    modal.value &&
-      props.id &&
-      (await fetchAvatar(props.id),
-      await fetchInformation(props.id),
-      await fetchProfileGov(props.id));
-  }
-);
-
-watch(modal, (newValue) => {
-  if (!newValue) {
-    emit("update:modal", false);
-  }
-});
-</script>
-
-<template>
-  <q-dialog v-model="modal" position="right" :maximized="true" persistent>
-    <q-card style="width: 420px; overflow: visible">
-      <q-toolbar>
-        <q-toolbar-title class="text-subtitle1 text-bold"
-          >ทะเบียนประวัติ</q-toolbar-title
-        >
-        <q-btn
-          icon="close"
-          unelevated
-          round
-          dense
-          @click="emit('update:modal', false)"
-          style="color: red; background-color: #ffdede"
-        />
-      </q-toolbar>
-      <!-- <q-card-section>
-        <div class="text-bold text-h6 text-center">ข้อมูลทะเบียนประวัติ</div>
-        <q-space />
-
-      </q-card-section> -->
-
-      <q-card-section class="col q-pt-none bg-grey-12">
-        <div class="q-gutter-md">
-          <q-card bordered class="text-center bg-grey-12">
-            <div>
-              <q-avatar size="120px" color="grey-4">
-                <img
-                  v-if="avatar.avatar"
-                  :src="avatar.avatar"
-                  class="bg-grey-3"
-                  style="object-fit: cover"
-                />
-                <img
-                  v-else
-                  src="@/assets/avatar_user.jpg"
-                  class="bg-grey-3"
-                  style="object-fit: cover"
-                />
-              </q-avatar>
-            </div>
-            <div
-              class="q-mt-md text-subtitle2 text-bold"
-              style="font-size: 18px"
-            >
-              {{ avatar.fullname }}
-            </div>
-            <div
-              v-if="avatar.position != '-'"
-              class="q-mb-xs text-center text-grey"
-            >
-              {{ avatar.position }}
-            </div>
-            <div class="q-mt-md">
-              <q-btn
-                class="bg-white"
-                outline
-                rounded
-                label="ดูรายละเอียดเพิ่มเติมทั้งหมด"
-                color="secondary"
-                @click.prevent="redirecToRegistry"
-              />
-            </div>
-          </q-card>
-
-          <q-scroll-area style="height: 65vh; max-width: 100%">
-            <div class="q-gutter-md q-pa-sm">
-              <q-card bordered style="border: 1px solid #d6dee1">
-                <div class="q-pa-md">
-                  <div class="text-weight-bold row items-center">
-                    <q-icon name="mdi-account" color="grey-7" />
-                    <span class="q-ml-md">ข้อมูลส่วนตัว </span>
-                  </div>
-                  <div class="row q-pa-sm">
-                    <div class="col-xs-6 col-md-6">
-                      <q-input
-                        borderless
-                        readonly
-                        :model-value="imformation.citizenId"
-                        label="เลขประจำตัวประชาชน"
-                      ></q-input>
-                    </div>
-                    <div class="col-xs-6 col-md-6">
-                      <q-input
-                        borderless
-                        readonly
-                        :model-value="imformation.prefix"
-                        label="คำนำหน้าชื่อ"
-                      />
-                    </div>
-                    <div class="col-xs-6 col-md-6">
-                      <q-input
-                        borderless
-                        readonly
-                        :model-value="imformation.firstName"
-                        label="ชื่่อ"
-                      />
-                    </div>
-                    <div class="col-xs-6 col-md-6">
-                      <q-input
-                        borderless
-                        readonly
-                        :model-value="imformation.lastName"
-                        label="นามสกุล"
-                      />
-                    </div>
-                    <div class="col-xs-6 col-md-6">
-                      <q-input
-                        borderless
-                        readonly
-                        :model-value="imformation.birthDate"
-                        label="วัน/เดือน/ปีเกิด"
-                      />
-                    </div>
-                    <div class="col-xs-6 col-md-6">
-                      <q-input
-                        borderless
-                        readonly
-                        :model-value="imformation.gender"
-                        label="เพศ"
-                      />
-                    </div>
-                    <div class="col-xs-6 col-md-6">
-                      <q-input
-                        borderless
-                        readonly
-                        :model-value="imformation.age"
-                        label="อายุ"
-                      />
-                    </div>
-                  </div>
-                </div>
-              </q-card>
-
-              <q-card bordered style="border: 1px solid #d6dee1">
-                <div class="q-pa-md">
-                  <div class="text-weight-bold row items-center">
-                    <q-icon name="mdi-account-tie" color="grey-7" />
-                    <span class="q-ml-md">ข้อมูลราชการ </span>
-                  </div>
-                  <div class="row q-pa-sm">
-                    <div class="col-xs-12 col-md-12">
-                      <q-input
-                        borderless
-                        readonly
-                        :model-value="goverment.oc === '' ? '-' : goverment.oc"
-                        label="สังกัด"
-                        autogrow
-                      ></q-input>
-                    </div>
-                    <div class="col-xs-6 col-md-6">
-                      <q-input
-                        borderless
-                        readonly
-                        :model-value="goverment.posNo"
-                        label="ตำแหน่งเลขที่"
-                      />
-                    </div>
-                    <div class="col-xs-6 col-md-6">
-                      <q-input
-                        borderless
-                        readonly
-                        :model-value="goverment.position"
-                        label="ตำแหน่ง"
-                      />
-                    </div>
-                    <div class="col-xs-6 col-md-6">
-                      <q-input
-                        borderless
-                        readonly
-                        :model-value="goverment.positionPathSide"
-                        label="ด้าน/สาขา"
-                      />
-                    </div>
-                    <div class="col-xs-6 col-md-6">
-                      <q-input
-                        borderless
-                        readonly
-                        :model-value="goverment.positionLine"
-                        label="สายงาน"
-                      />
-                    </div>
-                    <div class="col-xs-6 col-md-6">
-                      <q-input
-                        borderless
-                        readonly
-                        :model-value="goverment.positionType"
-                        label="ประเภทตำแหน่ง"
-                      />
-                    </div>
-                    <div class="col-xs-6 col-md-6">
-                      <q-input
-                        borderless
-                        readonly
-                        :model-value="goverment.positionLevel"
-                        label="ระดับตำแหน่ง"
-                      />
-                    </div>
-                    <div class="col-xs-6 col-md-6">
-                      <q-input
-                        borderless
-                        readonly
-                        :model-value="goverment.positionExecutive"
-                        label="ตำแหน่งทางการบริหาร"
-                      />
-                    </div>
-                    <div class="col-xs-6 col-md-6">
-                      <q-input
-                        borderless
-                        readonly
-                        :model-value="goverment.positionExecutiveSide"
-                        label="ด้านตำแหน่งทางการบริหาร"
-                      />
-                    </div>
-                  </div>
-                </div>
-              </q-card>
-            </div>
-          </q-scroll-area>
-        </div>
-      </q-card-section>
-    </q-card>
-  </q-dialog>
-</template>
-
-<style scoped></style>
diff --git a/src/components/Dialogs/PopupPersonalNew.vue b/src/components/Dialogs/PopupPersonalNew.vue
index 6449b5f48..4ef7825b6 100644
--- a/src/components/Dialogs/PopupPersonalNew.vue
+++ b/src/components/Dialogs/PopupPersonalNew.vue
@@ -55,6 +55,7 @@ const emit = defineEmits(["update:modal"]);
 
 /** ตัวแปร*/
 const modal = ref<boolean>(false);
+const isLoading = ref<boolean>(true);
 const employeeClass = ref<string>("");
 const avatar = reactive<Avatar>({
   avatar: "",
@@ -128,7 +129,7 @@ function calculateAge(birthDate: Date | null) {
  * @param id profileID
  */
 async function fetchInformation(id: string) {
-  showLoader();
+  isLoading.value = true;
   await http
     .get(
       config.API.orgProfileById(
@@ -182,7 +183,7 @@ async function fetchInformation(id: string) {
       messageError($q, err);
     })
     .finally(() => {
-      hideLoader();
+      isLoading.value = false;
     });
 }
 
@@ -309,7 +310,12 @@ watch(modal, (newValue) => {
   <q-dialog v-model="modal" position="right" :maximized="true" persistent>
     <q-card style="width: 420px; overflow: visible">
       <q-toolbar>
-        <q-toolbar-title :class="isLeave? 'text-subtitle1 text-bold text-red':'text-subtitle1 text-bold'"
+        <q-toolbar-title
+          :class="
+            isLeave
+              ? 'text-subtitle1 text-bold text-red'
+              : 'text-subtitle1 text-bold'
+          "
           >ทะเบียนประวัติ{{ isLeave ? "ผู้พ้นจากราชการ" : "" }}
         </q-toolbar-title>
         <q-btn
@@ -324,7 +330,33 @@ watch(modal, (newValue) => {
 
       <q-card-section class="col q-pt-none bg-grey-12">
         <div class="q-gutter-md">
-          <q-card bordered class="text-center bg-grey-12">
+          <div v-if="isLoading">
+            <q-skeleton
+              type="QAvatar"
+              size="120px"
+              style="background: #e3e3e3"
+              class="q-mx-auto q-mt-md"
+            />
+            <q-skeleton
+              type="text"
+              width="150px"
+              style="background: #e3e3e3"
+              class="q-mx-auto q-mt-md"
+            />
+            <q-skeleton
+              type="text"
+              width="100px"
+              style="background: #e3e3e3"
+              class="q-mx-auto q-mt-sm"
+            />
+            <q-skeleton
+              type="QBtn"
+              width="150px"
+              style="background: #e3e3e3"
+              class="q-mx-auto q-mt-sm"
+            />
+          </div>
+          <q-card v-else bordered class="text-center bg-grey-12">
             <div>
               <q-avatar size="120px" color="grey-4">
                 <img
@@ -341,6 +373,7 @@ watch(modal, (newValue) => {
                 />
               </q-avatar>
             </div>
+
             <div
               class="q-mt-md text-subtitle2 text-bold"
               style="font-size: 18px"
@@ -378,7 +411,16 @@ watch(modal, (newValue) => {
                     <q-icon name="mdi-account" color="grey-7" />
                     <span class="q-ml-md">ข้อมูลส่วนตัว </span>
                   </div>
-                  <div class="row q-pa-sm">
+                  <div v-if="isLoading" class="row q-pa-sm">
+                    <div
+                      v-for="n in 6"
+                      :key="n"
+                      class="col-xs-6 col-md-6 q-pa-sm"
+                    >
+                      <q-skeleton type="QInput" height="40px" />
+                    </div>
+                  </div>
+                  <div v-else class="row q-pa-sm">
                     <div class="col-xs-6 col-md-6">
                       <q-input
                         borderless
@@ -460,294 +502,316 @@ watch(modal, (newValue) => {
                       }}
                     </span>
                   </div>
-                  <div v-if="isLeave" class="row q-col-gutter-sm q-pa-sm">
-                    <div class="col-xs-6 col-md-6 is-red">
-                      <q-input
-                        borderless
-                        readonly
-                        :model-value="dateLeave ? dateLeave : '-'"
-                        label="วันเดือนปีที่พ้นจากราชการ"
-                      />
-                    </div>
-                    <div class="col-xs-6 col-md-6 is-red">
-                      <q-input
-                        borderless
-                        readonly
-                        :model-value="leaveType ? leaveType : '-'"
-                        label="ประเภทการพ้นจากราชการ"
-                      />
-                    </div>
-                    <div class="col-xs-6 col-md-6 is-red">
-                      <q-input
-                        borderless
-                        readonly
-                        :model-value="leaveCommandNo ? leaveCommandNo : '-'"
-                        label="คำสั่ง/เอกสารอ้างอิง"
-                      />
-                    </div>
-                    <div class="col-xs-12 col-md-12 is-red">
-                      <q-input
-                        borderless
-                        readonly
-                        :model-value="leaveReason ? leaveReason : '-'"
-                        label="สาเหตุ/เหตุผล"
-                      />
-                    </div>
-                  </div>
-                  <q-separator v-if="isLeave" />
-                  <div class="row q-pa-sm" v-if="employeeClass !== 'TEMP'">
-                    <div class="col-xs-12 col-md-12 text-html">
-                      <q-input
-                        borderless
-                        readonly
-                        :model-value="goverment.oc ? goverment.oc : '-'"
-                        label="สังกัด"
-                        autogrow
-                      ></q-input>
-                    </div>
-                    <div class="col-xs-6 col-md-6">
-                      <q-input
-                        borderless
-                        readonly
-                        :model-value="goverment.posNo ? goverment.posNo : '-'"
-                        :label="
-                          props.type.toLocaleLowerCase() == 'employee'
-                            ? 'ตำแหน่งเลขที่'
-                            : 'เลขที่ตำแหน่ง'
-                        "
-                      />
-                    </div>
-                    <div class="col-xs-6 col-md-6">
-                      <q-input
-                        borderless
-                        readonly
-                        :model-value="
-                          goverment.position ? goverment.position : '-'
-                        "
-                        :label="
-                          props.type.toLocaleLowerCase() == 'employee'
-                            ? 'ตำแหน่ง'
-                            : 'ตำแหน่งในสายงาน'
-                        "
-                      />
-                    </div>
-                    <div class="col-xs-6 col-md-6">
-                      <q-input
-                        borderless
-                        readonly
-                        autogrow
-                        :model-value="
-                          goverment.positionPathSide
-                            ? goverment.positionPathSide
-                            : '-'
-                        "
-                        label="ด้าน/สาขา"
-                      />
-                    </div>
-                    <div class="col-xs-6 col-md-6">
-                      <q-input
-                        borderless
-                        readonly
-                        :model-value="
-                          goverment.positionLine ? goverment.positionLine : '-'
-                        "
-                        label="สายงาน"
-                      />
-                    </div>
-                    <div class="col-xs-6 col-md-6">
-                      <q-input
-                        borderless
-                        readonly
-                        :model-value="
-                          goverment.positionType ? goverment.positionType : '-'
-                        "
-                        :label="
-                          props.type.toLocaleLowerCase() == 'employee'
-                            ? 'กลุ่มงาน'
-                            : 'ตำแหน่งประเภท'
-                        "
-                      />
-                    </div>
-                    <div class="col-xs-6 col-md-6">
-                      <q-input
-                        borderless
-                        readonly
-                        :model-value="
-                          goverment.positionLevel
-                            ? goverment.positionLevel
-                            : '-'
-                        "
-                        :label="
-                          props.type.toLocaleLowerCase() == 'employee'
-                            ? 'ระดับชั้นงาน'
-                            : 'ระดับตำแหน่ง'
-                        "
-                      />
-                    </div>
+
+                  <div v-if="isLoading" class="row q-pa-sm">
                     <div
-                      class="col-xs-6 col-md-6"
-                      v-if="props.type.toLocaleLowerCase() !== 'employee'"
+                      v-for="n in 9"
+                      :key="n"
+                      :class="
+                        n !== 1
+                          ? 'col-xs-6 col-md-6 q-pa-sm'
+                          : 'col-xs-12 col-md-12 q-pa-sm'
+                      "
                     >
-                      <q-input
-                        borderless
-                        readonly
-                        autogrow
-                        :model-value="
-                          goverment.positionExecutive
-                            ? goverment.positionExecutive
-                            : '-'
-                        "
-                        label="ตำแหน่งทางการบริหาร"
-                      />
-                    </div>
-                    <div
-                      class="col-xs-6 col-md-6"
-                      v-if="props.type.toLocaleLowerCase() !== 'employee'"
-                    >
-                      <q-input
-                        borderless
-                        readonly
-                        :model-value="
-                          goverment.positionExecutiveSide
-                            ? goverment.positionExecutiveSide
-                            : '-'
-                        "
-                        autogrow
-                        label="ด้านทางการบริหาร"
-                      />
+                      <q-skeleton type="QInput" height="40px" />
                     </div>
                   </div>
 
-                  <div class="row q-pa-sm" v-else>
-                    <div class="col-xs-12 col-md-12 text-html">
-                      <q-input
-                        borderless
-                        readonly
-                        :model-value="
-                          govermentTemp.employeeOc
-                            ? govermentTemp.employeeOc
-                            : '-'
-                        "
-                        label="สังกัด"
-                        autogrow
-                      ></q-input>
+                  <div v-else>
+                    <div v-if="isLeave" class="row q-col-gutter-sm q-pa-sm">
+                      <div class="col-xs-6 col-md-6">
+                        <q-input
+                          borderless
+                          readonly
+                          :model-value="dateLeave ? dateLeave : '-'"
+                          label="วันเดือนปีที่พ้นจากราชการ"
+                        />
+                      </div>
+                      <div class="col-xs-6 col-md-6">
+                        <q-input
+                          borderless
+                          readonly
+                          :model-value="leaveType ? leaveType : '-'"
+                          label="ประเภทการพ้นจากราชการ"
+                        />
+                      </div>
+                      <div class="col-xs-6 col-md-6">
+                        <q-input
+                          borderless
+                          readonly
+                          :model-value="leaveCommandNo ? leaveCommandNo : '-'"
+                          label="คำสั่ง/เอกสารอ้างอิง"
+                        />
+                      </div>
+                      <div class="col-xs-12 col-md-12">
+                        <q-input
+                          borderless
+                          readonly
+                          :model-value="leaveReason ? leaveReason : '-'"
+                          label="สาเหตุ/เหตุผล"
+                        />
+                      </div>
                     </div>
 
-                    <div class="col-xs-6 col-md-6">
-                      <q-input
-                        borderless
-                        readonly
-                        :model-value="
-                          govermentTemp.positionEmployeeGroupId
-                            ? govermentTemp.positionEmployeeGroupId
-                            : '-'
-                        "
-                        label="กลุ่มงาน"
-                      />
+                    <q-separator v-if="isLeave" />
+                    <div class="row q-pa-sm" v-if="employeeClass !== 'TEMP'">
+                      <div class="col-xs-12 col-md-12 text-html">
+                        <q-input
+                          borderless
+                          readonly
+                          :model-value="goverment.oc ? goverment.oc : '-'"
+                          label="สังกัด"
+                          autogrow
+                        ></q-input>
+                      </div>
+                      <div class="col-xs-6 col-md-6">
+                        <q-input
+                          borderless
+                          readonly
+                          :model-value="goverment.posNo ? goverment.posNo : '-'"
+                          :label="
+                            props.type.toLocaleLowerCase() == 'employee'
+                              ? 'ตำแหน่งเลขที่'
+                              : 'เลขที่ตำแหน่ง'
+                          "
+                        />
+                      </div>
+                      <div class="col-xs-6 col-md-6">
+                        <q-input
+                          borderless
+                          readonly
+                          :model-value="
+                            goverment.position ? goverment.position : '-'
+                          "
+                          :label="
+                            props.type.toLocaleLowerCase() == 'employee'
+                              ? 'ตำแหน่ง'
+                              : 'ตำแหน่งในสายงาน'
+                          "
+                        />
+                      </div>
+                      <div class="col-xs-6 col-md-6">
+                        <q-input
+                          borderless
+                          readonly
+                          autogrow
+                          :model-value="
+                            goverment.positionPathSide
+                              ? goverment.positionPathSide
+                              : '-'
+                          "
+                          label="ด้าน/สาขา"
+                        />
+                      </div>
+                      <div class="col-xs-6 col-md-6">
+                        <q-input
+                          borderless
+                          readonly
+                          :model-value="
+                            goverment.positionLine
+                              ? goverment.positionLine
+                              : '-'
+                          "
+                          label="สายงาน"
+                        />
+                      </div>
+                      <div class="col-xs-6 col-md-6">
+                        <q-input
+                          borderless
+                          readonly
+                          :model-value="
+                            goverment.positionType
+                              ? goverment.positionType
+                              : '-'
+                          "
+                          :label="
+                            props.type.toLocaleLowerCase() == 'employee'
+                              ? 'กลุ่มงาน'
+                              : 'ตำแหน่งประเภท'
+                          "
+                        />
+                      </div>
+                      <div class="col-xs-6 col-md-6">
+                        <q-input
+                          borderless
+                          readonly
+                          :model-value="
+                            goverment.positionLevel
+                              ? goverment.positionLevel
+                              : '-'
+                          "
+                          :label="
+                            props.type.toLocaleLowerCase() == 'employee'
+                              ? 'ระดับชั้นงาน'
+                              : 'ระดับตำแหน่ง'
+                          "
+                        />
+                      </div>
+                      <div
+                        class="col-xs-6 col-md-6"
+                        v-if="props.type.toLocaleLowerCase() !== 'employee'"
+                      >
+                        <q-input
+                          borderless
+                          readonly
+                          autogrow
+                          :model-value="
+                            goverment.positionExecutive
+                              ? goverment.positionExecutive
+                              : '-'
+                          "
+                          label="ตำแหน่งทางการบริหาร"
+                        />
+                      </div>
+                      <div
+                        class="col-xs-6 col-md-6"
+                        v-if="props.type.toLocaleLowerCase() !== 'employee'"
+                      >
+                        <q-input
+                          borderless
+                          readonly
+                          :model-value="
+                            goverment.positionExecutiveSide
+                              ? goverment.positionExecutiveSide
+                              : '-'
+                          "
+                          autogrow
+                          label="ด้านทางการบริหาร"
+                        />
+                      </div>
                     </div>
 
-                    <div class="col-xs-6 col-md-6">
-                      <q-input
-                        borderless
-                        readonly
-                        :model-value="
-                          govermentTemp.positionEmployeeLineId
-                            ? govermentTemp.positionEmployeeLineId
-                            : '-'
-                        "
-                        label="สายงาน"
-                      />
-                    </div>
+                    <div class="row q-pa-sm" v-else>
+                      <div class="col-xs-12 col-md-12 text-html">
+                        <q-input
+                          borderless
+                          readonly
+                          :model-value="
+                            govermentTemp.employeeOc
+                              ? govermentTemp.employeeOc
+                              : '-'
+                          "
+                          label="สังกัด"
+                          autogrow
+                        ></q-input>
+                      </div>
 
-                    <div class="col-xs-6 col-md-6">
-                      <q-input
-                        borderless
-                        readonly
-                        :model-value="
-                          govermentTemp.positionEmployeePositionId
-                            ? govermentTemp.positionEmployeePositionId
-                            : '-'
-                        "
-                        label="ตำแหน่ง"
-                      />
-                    </div>
+                      <div class="col-xs-6 col-md-6">
+                        <q-input
+                          borderless
+                          readonly
+                          :model-value="
+                            govermentTemp.positionEmployeeGroupId
+                              ? govermentTemp.positionEmployeeGroupId
+                              : '-'
+                          "
+                          label="กลุ่มงาน"
+                        />
+                      </div>
 
-                    <div class="col-xs-6 col-md-6">
-                      <q-input
-                        borderless
-                        readonly
-                        :model-value="
-                          govermentTemp.employeeTypeIndividual
-                            ? govermentTemp.employeeTypeIndividual
-                            : '-'
-                        "
-                        label="ประเภทบุคคล"
-                      />
-                    </div>
+                      <div class="col-xs-6 col-md-6">
+                        <q-input
+                          borderless
+                          readonly
+                          :model-value="
+                            govermentTemp.positionEmployeeLineId
+                              ? govermentTemp.positionEmployeeLineId
+                              : '-'
+                          "
+                          label="สายงาน"
+                        />
+                      </div>
 
-                    <div class="col-xs-6 col-md-6">
-                      <q-input
-                        borderless
-                        readonly
-                        :model-value="
-                          govermentTemp.employeeWage
-                            ? govermentTemp.employeeWage
-                            : '-'
-                        "
-                        label="ค่าจ้าง"
-                      />
-                    </div>
+                      <div class="col-xs-6 col-md-6">
+                        <q-input
+                          borderless
+                          readonly
+                          :model-value="
+                            govermentTemp.positionEmployeePositionId
+                              ? govermentTemp.positionEmployeePositionId
+                              : '-'
+                          "
+                          label="ตำแหน่ง"
+                        />
+                      </div>
 
-                    <div class="col-xs-6 col-md-6">
-                      <q-input
-                        borderless
-                        readonly
-                        :model-value="
-                          govermentTemp.employeeMoneyIncrease
-                            ? govermentTemp.employeeMoneyIncrease
-                            : '-'
-                        "
-                        label="เงินเพิ่มการครองชีพชั่วคราว"
-                      />
-                    </div>
+                      <div class="col-xs-6 col-md-6">
+                        <q-input
+                          borderless
+                          readonly
+                          :model-value="
+                            govermentTemp.employeeTypeIndividual
+                              ? govermentTemp.employeeTypeIndividual
+                              : '-'
+                          "
+                          label="ประเภทบุคคล"
+                        />
+                      </div>
 
-                    <div class="col-xs-6 col-md-6">
-                      <q-input
-                        borderless
-                        readonly
-                        :model-value="
-                          govermentTemp.employeeMoneyAllowance
-                            ? govermentTemp.employeeMoneyAllowance
-                            : '-'
-                        "
-                        label="เงินช่วยเหลือการครองชีพชั่วคราว"
-                      />
-                    </div>
+                      <div class="col-xs-6 col-md-6">
+                        <q-input
+                          borderless
+                          readonly
+                          :model-value="
+                            govermentTemp.employeeWage
+                              ? govermentTemp.employeeWage
+                              : '-'
+                          "
+                          label="ค่าจ้าง"
+                        />
+                      </div>
 
-                    <div class="col-xs-6 col-md-6">
-                      <q-input
-                        borderless
-                        readonly
-                        :model-value="
-                          govermentTemp.employeeMoneyEmployee
-                            ? govermentTemp.employeeMoneyEmployee
-                            : '-'
-                        "
-                        label="เงินสมทบประกันสังคม (ลูกจ้าง)"
-                      />
-                    </div>
+                      <div class="col-xs-6 col-md-6">
+                        <q-input
+                          borderless
+                          readonly
+                          :model-value="
+                            govermentTemp.employeeMoneyIncrease
+                              ? govermentTemp.employeeMoneyIncrease
+                              : '-'
+                          "
+                          label="เงินเพิ่มการครองชีพชั่วคราว"
+                        />
+                      </div>
 
-                    <div class="col-xs-6 col-md-6">
-                      <q-input
-                        borderless
-                        readonly
-                        :model-value="
-                          govermentTemp.employeeMoneyEmployer
-                            ? govermentTemp.employeeMoneyEmployer
-                            : '-'
-                        "
-                        label="เงินสมทบประกันสังคม (นายจ้าง)"
-                      />
+                      <div class="col-xs-6 col-md-6">
+                        <q-input
+                          borderless
+                          readonly
+                          :model-value="
+                            govermentTemp.employeeMoneyAllowance
+                              ? govermentTemp.employeeMoneyAllowance
+                              : '-'
+                          "
+                          label="เงินช่วยเหลือการครองชีพชั่วคราว"
+                        />
+                      </div>
+
+                      <div class="col-xs-6 col-md-6">
+                        <q-input
+                          borderless
+                          readonly
+                          :model-value="
+                            govermentTemp.employeeMoneyEmployee
+                              ? govermentTemp.employeeMoneyEmployee
+                              : '-'
+                          "
+                          label="เงินสมทบประกันสังคม (ลูกจ้าง)"
+                        />
+                      </div>
+
+                      <div class="col-xs-6 col-md-6">
+                        <q-input
+                          borderless
+                          readonly
+                          :model-value="
+                            govermentTemp.employeeMoneyEmployer
+                              ? govermentTemp.employeeMoneyEmployer
+                              : '-'
+                          "
+                          label="เงินสมทบประกันสังคม (นายจ้าง)"
+                        />
+                      </div>
                     </div>
                   </div>
                 </div>
@@ -770,8 +834,4 @@ watch(modal, (newValue) => {
   </q-dialog>
 </template>
 
-<style scoped>
-:deep(.is-red input) {
-  color: red;
-}
-</style>
+<style scoped></style>
diff --git a/src/modules/04_registryPerson/components/detail/Achievement/03_Insignia.vue b/src/modules/04_registryPerson/components/detail/Achievement/03_Insignia.vue
index 8930247e3..e0e465e7d 100644
--- a/src/modules/04_registryPerson/components/detail/Achievement/03_Insignia.vue
+++ b/src/modules/04_registryPerson/components/detail/Achievement/03_Insignia.vue
@@ -1311,6 +1311,7 @@ onMounted(async () => {
     :title="`ประวัติแก้ไขเครื่องราชอิสริยาภรณ์`"
     :columns="columnsHistory"
     :fetch-data="fetchDataHistory"
+    :type="'insignia'"
   />
 </template>
 
diff --git a/src/modules/04_registryPerson/components/detail/DialogHistory.vue b/src/modules/04_registryPerson/components/detail/DialogHistory.vue
index 9da53b81a..ceab6ee49 100644
--- a/src/modules/04_registryPerson/components/detail/DialogHistory.vue
+++ b/src/modules/04_registryPerson/components/detail/DialogHistory.vue
@@ -17,6 +17,7 @@ const columns = defineModel<QTableColumn[]>("columns", {
 const visibleColumnsMain = defineModel<string[]>("visibleColumns", {
   required: true,
 });
+const type = defineModel<string>("type", { default: "" });
 
 const props = defineProps({
   fetchData: { type: Function, required: true },
@@ -114,7 +115,7 @@ watch(
           <template v-slot:body="props">
             <q-tr :props="props">
               <q-td v-for="col in props.cols" :key="col.id">
-                <div v-if="col.name === 'no'">
+                <div v-if="col.name === 'no' && type !== 'insignia'">
                   {{ props.rowIndex + 1 }}
                 </div>
                 <div v-else-if="col.name == 'organization'" class="text-html">
diff --git a/src/modules/06_retirement/components/02_resign/ResignByid.vue b/src/modules/06_retirement/components/02_resign/ResignByid.vue
index a33f25fcf..835bb256a 100644
--- a/src/modules/06_retirement/components/02_resign/ResignByid.vue
+++ b/src/modules/06_retirement/components/02_resign/ResignByid.vue
@@ -23,7 +23,7 @@ import type {
 import type { QTableProps } from "quasar";
 import type { DataProfile } from "@/modules/05_placement/interface/index/Main";
 
-import PopupPersonal from "@/components/Dialogs/PopupPersonal.vue";
+import PopupPersonal from "@/components/Dialogs/PopupPersonalNew.vue";
 import CardProfile from "@/components/CardProfile.vue";
 import DialogAddCommander from "@/modules/06_retirement/components/DialogAddCommander.vue";
 
diff --git a/src/modules/06_retirement/components/03_resignEmp/ResignByid.vue b/src/modules/06_retirement/components/03_resignEmp/ResignByid.vue
index ec11f42b2..e32532c16 100644
--- a/src/modules/06_retirement/components/03_resignEmp/ResignByid.vue
+++ b/src/modules/06_retirement/components/03_resignEmp/ResignByid.vue
@@ -25,7 +25,7 @@ import type {
 } from "@/modules/06_retirement/interface/response/Main";
 
 import DialogHeader from "@/components/DialogHeader.vue";
-import PopupPersonal from "@/components/Dialogs/PopupPersonal.vue";
+import PopupPersonal from "@/components/Dialogs/PopupPersonalNew.vue";
 import CardProfile from "@/components/CardProfile.vue";
 import DialogAddCommander from "@/modules/06_retirement/components/DialogAddCommander.vue";
 
diff --git a/src/modules/21_report/components/CardPosition.vue b/src/modules/21_report/components/CardPosition.vue
index 956639272..3c7b12214 100644
--- a/src/modules/21_report/components/CardPosition.vue
+++ b/src/modules/21_report/components/CardPosition.vue
@@ -35,9 +35,11 @@ const cardData = ref<DataCardPos[]>([
     data: [],
   },
 ]);
+const isLoading = ref(true);
 
 async function fetchDataTenure() {
   if (props?.id) {
+    isLoading.value = true;
     await http
       .get(
         config.API.salaryTenurePosition(
@@ -73,6 +75,9 @@ async function fetchDataTenure() {
       })
       .catch((err) => {
         messageError($q, err);
+      })
+      .finally(() => {
+        isLoading.value = false;
       });
   }
 }
@@ -88,7 +93,12 @@ onMounted(() => {
       <q-icon name="mdi-account-tie" color="grey-7" />
       <span class="q-ml-md">ข้อมูลตำแหน่ง </span>
     </div>
-    <div class="row q-pa-sm">
+    <div v-if="isLoading" class="row q-pa-sm">
+      <q-skeleton class="col-12 q-mt-sm" height="140px" square />
+      <q-skeleton class="col-12 q-mt-sm" height="140px" square />
+      <q-skeleton class="col-12 q-mt-sm" height="140px" square />
+    </div>
+    <div v-else class="row q-pa-sm">
       <q-list flat bordered class="col-12" style="border-radius: 5px">
         <q-card flat v-for="(item, index) in cardData" :key="index">
           <q-item>