diff --git a/src/components/Dialogs/PopupPersonalNew.vue b/src/components/Dialogs/PopupPersonalNew.vue
index 0f9c2c695..2daefc91c 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;
     });
 }
 
@@ -324,7 +325,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 +368,7 @@ watch(modal, (newValue) => {
                 />
               </q-avatar>
             </div>
+
             <div
               class="q-mt-md text-subtitle2 text-bold"
               style="font-size: 18px"
@@ -378,7 +406,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 +497,312 @@ 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">
-                      <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>
-                  <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 8"
+                      :key="n"
+                      class="col-xs-6 col-md-6 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>
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";