diff --git a/src/modules/04_registryPerson/components/DialogHistory.vue b/src/modules/04_registryPerson/components/DialogHistory.vue
index a7d3f4d95..15d41a880 100644
--- a/src/modules/04_registryPerson/components/DialogHistory.vue
+++ b/src/modules/04_registryPerson/components/DialogHistory.vue
@@ -33,10 +33,7 @@ const employeeClass = ref<string>(
 const typeKeyword = ref<string>("");
 const Keyword = ref<string>("");
 const positionKeyword = ref<string>("");
-const employeeClassOps = ref<DataOption[]>([
-  { id: "officer", name: "ข้าราชการ กทม.สามัญ" },
-  { id: "perm", name: "ลูกจ้างประจำ" },
-]);
+
 //ตัวเลือกประเภทการค้นหา
 const typeKeywordOps = ref<DataOption[]>([
   { id: "no", name: "ตำแหน่งเลขที่" },
@@ -97,14 +94,6 @@ const columns = ref<QTableProps["columns"]>([
 ]);
 const rows = ref<HistoryPos[]>([]);
 
-/** function เปลี่ยนประเภท*/
-function changeEmployeeClass() {
-  typeKeyword.value = "";
-  Keyword.value = "";
-  positionKeyword.value = "";
-  rows.value = [];
-}
-
 /**
  * function ค้นหาประวัติถือครองตำแหน่ง
  * @param type ประเภทข่าราชการ
@@ -186,27 +175,6 @@ function closeDialog() {
         <q-form ref="myForm">
           <div class="bg-grey-2 q-pa-sm">
             <div class="row q-col-gutter-sm full-width">
-              <!-- <div class="col-3">
-                <q-select
-                  hide-bottom-space
-                  :rules="[(val:string) => !!val || `${'กรุณาเลือก ประเภท'}`]"
-                  outlined
-                  dense
-                  lazy-rules
-                  bg-color="white"
-                  v-model="employeeClass"
-                  emit-value
-                  map-options
-                  :options="employeeClassOps"
-                  option-label="name"
-                  option-value="id"
-                  :label="`${'ประเภท'}`"
-                  use-input
-                  input-debounce="0"
-                  @update:model-value="changeEmployeeClass"
-                />
-              </div> -->
-
               <div class="col-3">
                 <q-select
                   hide-bottom-space
diff --git a/src/modules/04_registryPerson/components/detail/DialogHistory.vue b/src/modules/04_registryPerson/components/detail/DialogHistory.vue
new file mode 100644
index 000000000..231b9beab
--- /dev/null
+++ b/src/modules/04_registryPerson/components/detail/DialogHistory.vue
@@ -0,0 +1,128 @@
+<script setup lang="ts">
+import { ref, watch } from "vue";
+import { useCounterMixin } from "@/stores/mixin";
+
+import type { QTableColumn, QTableProps } from "quasar";
+
+import DialogHeader from "@/components/DialogHeader.vue";
+
+const { onSearchDataTable } = useCounterMixin();
+
+const modal = defineModel<boolean>("modal", { required: true });
+const title = defineModel<string>("title", { required: true });
+const columns = defineModel<QTableColumn[]>("columns", {
+  required: true,
+});
+const visibleColumnsMain = defineModel<string[]>("visibleColumns", {
+  required: true,
+});
+
+const props = defineProps({
+  fetchData: { type: Function, required: true },
+});
+
+const filter = ref<string>("");
+const rows = ref<any[]>([]);
+const dataMain = ref<any[]>([]);
+const visibleColumns = ref<string[]>([]);
+const pagination = ref({
+  sortBy: "lastUpdatedAt",
+});
+
+async function fetchDataTable() {
+  visibleColumns.value = visibleColumnsMain.value;
+  const data = await props?.fetchData?.();
+  dataMain.value = data;
+  rows.value = data;
+}
+
+/** ฟังก์ค้นหาข้อมูลรายการประวัติแก้ไขข้อมูลส่วนตัว */
+function serchDataTable() {
+  rows.value = onSearchDataTable(filter.value, dataMain.value, columns.value);
+}
+
+watch(
+  () => modal.value,
+  () => {
+    if (modal.value) {
+      fetchDataTable();
+    } else {
+      filter.value = "";
+      dataMain.value = [];
+      rows.value = [];
+      pagination.value.sortBy = "lastUpdatedAt";
+    }
+  }
+);
+</script>
+
+<template>
+  <q-dialog v-model="modal" persistent>
+    <q-card style="min-width: 80%">
+      <DialogHeader :tittle="title" :close="() => (modal = false)" />
+
+      <q-separator />
+      <q-card-section style="max-height: 50vh" class="scroll">
+        <div class="row q-gutter-sm q-mb-sm">
+          <q-space />
+          <q-input
+            dense
+            v-model="filter"
+            outlined
+            placeholder="ค้นหา"
+            @keydown.enter.pervent="serchDataTable"
+          >
+            <template v-slot:append>
+              <q-icon name="search" />
+            </template>
+          </q-input>
+          <q-select
+            v-model="visibleColumns"
+            multiple
+            outlined
+            dense
+            options-dense
+            :display-value="$q.lang.table.columns"
+            emit-value
+            map-options
+            :options="columns"
+            option-value="name"
+            style="min-width: 140px"
+          />
+        </div>
+
+        <d-table
+          ref="table"
+          flat
+          bordered
+          dense
+          :columns="columns"
+          :rows="rows"
+          class="custom-header-table"
+          :visible-columns="visibleColumns"
+          v-model:pagination="pagination"
+        >
+          >
+          <template v-slot:header="props">
+            <q-tr :props="props">
+              <q-th v-for="col in props.cols" :key="col.name" :props="props">
+                <span class="text-weight-medium">{{ col.label }}</span>
+              </q-th>
+            </q-tr>
+          </template>
+          <template v-slot:body="props">
+            <q-tr :props="props">
+              <q-td v-for="col in props.cols" :key="col.id">
+                <div>
+                  {{ col.value ? col.value : "-" }}
+                </div>
+              </q-td>
+            </q-tr>
+          </template>
+        </d-table>
+      </q-card-section>
+    </q-card>
+  </q-dialog>
+</template>
+
+<style lang="scss" scoped></style>
diff --git a/src/modules/04_registryPerson/components/detail/PersonalInformation/01_Profile.vue b/src/modules/04_registryPerson/components/detail/PersonalInformation/01_Profile.vue
index 9915ecf7b..ac0565fcf 100644
--- a/src/modules/04_registryPerson/components/detail/PersonalInformation/01_Profile.vue
+++ b/src/modules/04_registryPerson/components/detail/PersonalInformation/01_Profile.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onMounted, watch, ref, reactive } from "vue";
+import { onMounted, watch, ref, reactive, defineAsyncComponent } from "vue";
 import { useQuasar } from "quasar";
 
 import { checkPermission } from "@/utils/permissions";
@@ -16,6 +16,7 @@ import type { ResponseObject } from "@/modules/04_registryPerson/interface/respo
 
 /** importComponents*/
 import DialogHeader from "@/components/DialogHeader.vue";
+import DialogHistory from "@/modules/04_registryPerson/components/detail/DialogHistory.vue";
 
 /** use*/
 const $q = useQuasar();
@@ -30,7 +31,7 @@ const {
   messageError,
   dialogConfirm,
   dialogMessageNotify,
-  onSearchDataTable,
+  convertDateToAPI,
 } = useCounterMixin();
 
 /** props*/
@@ -55,9 +56,6 @@ const empType = ref<string>(
 const id = ref<string>("");
 const modal = ref<boolean>(false); // แสดงฟอร์มแก้ไขประวัติส่วนตัว
 const informaData = ref<ResponseObject>(); // ข้อมูลส่วนคัว
-const rowsHistory = ref<ResponseObject[]>([]); // ช้อมูลรายการประวัติการแก้ไข
-const rowsHistoryMain = ref<ResponseObject[]>([]); // ช้อมูลรายการประวัติการแก้ไข
-const filterHistory = ref<string>(""); //คำค้นหาช้อมูลรายการประวัติการแก้ไข
 const modalHistory = ref<boolean>(false); // แสดงช้อมูลรายการประวัติการแก้ไข
 const age = ref<string | null>(""); //อายุ
 const formData = reactive<RequestObject>(store.defaultProfile); //ฟอร์มข้อมูลการแก่้ไข
@@ -255,7 +253,7 @@ const columnsHistory = ref<QTableColumn[]>([
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
 ]);
-const visibleColumnsHistory = ref<String[]>([
+const visibleColumnsHistory = ref<string[]>([
   "citizenId",
   "prefix",
   "rank",
@@ -272,9 +270,6 @@ const visibleColumnsHistory = ref<String[]>([
   "lastUpdateFullName",
   "lastUpdatedAt",
 ]);
-const pagination = ref({
-  sortBy: "lastUpdatedAt",
-});
 
 /** function เรียกข้อมูลข้อมูลส่วนตัว*/
 async function getData() {
@@ -331,6 +326,7 @@ function onSubmit() {
           ...formData,
           employeeClass:
             route.name === "registry-employeeId" ? "TEMP" : undefined,
+          birthDate: convertDateToAPI(formData.birthDate),
         })
         .then(async () => {
           await props.fetchDataPersonal?.();
@@ -352,21 +348,22 @@ function onSubmit() {
 
 /** function ดูข้อมูลประวัติแก้ไขข้อมูลส่วนตัว*/
 async function clickHistory() {
-  showLoader();
   modalHistory.value = true;
-  filterHistory.value = "";
-  await http
-    .get(config.API.profileNewProfileHisById(id.value, empType.value))
-    .then(async (res) => {
-      rowsHistory.value = await res.data.result;
-      rowsHistoryMain.value = await res.data.result;
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(() => {
-      hideLoader();
-    });
+}
+
+async function fetchDataHistory() {
+  showLoader();
+  try {
+    const res = await http.get(
+      config.API.profileNewProfileHisById(id.value, empType.value)
+    );
+    const data = await res.data.result;
+    return data;
+  } catch (e) {
+    messageError($q, e);
+  } finally {
+    hideLoader();
+  }
 }
 
 /**
@@ -396,7 +393,6 @@ function changeCardID(citizenId: string | number | null) {
 function calculateMaxDate() {
   const today = new Date();
   today.setFullYear(today.getFullYear() - 18);
-
   return today;
 }
 
@@ -417,15 +413,6 @@ watch(
   }
 );
 
-/** ฟังก์ค้นหาข้อมูลรายการประวัติแก้ไขข้อมูลส่วนตัว */
-function serchDataTable() {
-  rowsHistory.value = onSearchDataTable(
-    filterHistory.value,
-    rowsHistoryMain.value,
-    columnsHistory.value
-  );
-}
-
 /** ทำงานเมื่อ Components ถูกเรียกใช้งาน*/
 onMounted(() => {
   const promises = [];
@@ -863,81 +850,13 @@ onMounted(() => {
     </q-card>
   </q-dialog>
 
-  <!-- ประวัติแก้ไขข้อมูลส่วนตัว -->
-  <q-dialog v-model="modalHistory" persistent>
-    <q-card style="min-width: 80%">
-      <DialogHeader
-        tittle="ประวัติแก้ไขข้อมูลส่วนตัว"
-        :close="
-          () => (
-            (modalHistory = false), ((rowsHistory = []), (filterHistory = ''))
-          )
-        "
-      />
-      <q-separator />
-
-      <q-card-section style="max-height: 50vh" class="scroll">
-        <div class="row q-gutter-sm q-mb-sm">
-          <q-space />
-          <q-input
-            dense
-            v-model="filterHistory"
-            ref="filterRef"
-            outlined
-            placeholder="ค้นหา"
-            @keydown.enter.pervent="serchDataTable"
-          >
-            <template v-slot:append>
-              <q-icon name="search" />
-            </template>
-          </q-input>
-          <q-select
-            v-model="visibleColumnsHistory"
-            multiple
-            outlined
-            dense
-            options-dense
-            :display-value="$q.lang.table.columns"
-            emit-value
-            map-options
-            :options="columnsHistory"
-            option-value="name"
-            style="min-width: 140px"
-          />
-        </div>
-
-        <d-table
-          ref="table"
-          flat
-          bordered
-          dense
-          :columns="columnsHistory"
-          :rows="rowsHistory"
-          class="custom-header-table"
-          :visible-columns="visibleColumnsHistory"
-          v-model:pagination="pagination"
-        >
-          >
-          <template v-slot:header="props">
-            <q-tr :props="props">
-              <q-th v-for="col in props.cols" :key="col.name" :props="props">
-                <span class="text-weight-medium">{{ col.label }}</span>
-              </q-th>
-            </q-tr>
-          </template>
-          <template v-slot:body="props">
-            <q-tr :props="props">
-              <q-td v-for="col in props.cols" :key="col.id">
-                <div>
-                  {{ col.value ? col.value : "-" }}
-                </div>
-              </q-td>
-            </q-tr>
-          </template>
-        </d-table>
-      </q-card-section>
-    </q-card>
-  </q-dialog>
+  <DialogHistory
+    v-model:modal="modalHistory"
+    :visible-columns="visibleColumnsHistory"
+    :title="`ประวัติแก้ไขข้อมูลส่วนตัว`"
+    :columns="columnsHistory"
+    :fetch-data="fetchDataHistory"
+  />
 </template>
 
 <style lang="scss">
diff --git a/src/modules/04_registryPerson/components/detail/PersonalInformation/02_NameChangeHistory.vue b/src/modules/04_registryPerson/components/detail/PersonalInformation/02_NameChangeHistory.vue
index 54fc1443b..c70426561 100644
--- a/src/modules/04_registryPerson/components/detail/PersonalInformation/02_NameChangeHistory.vue
+++ b/src/modules/04_registryPerson/components/detail/PersonalInformation/02_NameChangeHistory.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onMounted, ref, useAttrs, reactive, watch } from "vue";
+import { onMounted, ref, reactive, watch } from "vue";
 import { useQuasar } from "quasar";
 import axios from "axios";
 
@@ -12,6 +12,7 @@ import config from "@/app.config";
 
 /** importType*/
 import type { QTableProps } from "quasar";
+import type { DataOption } from "@/modules/04_registryPerson/interface/index/Main";
 import type { ResponseObject } from "@/components/information/interface/response/OldName";
 import type { DataProfile } from "@/modules/04_registryPerson/interface/response/Main";
 import type { FormChangeName } from "@/modules/04_registryPerson/interface/request/Main";
@@ -23,7 +24,7 @@ import DialogHeader from "@/components/DialogHeader.vue";
 const $q = useQuasar();
 const route = useRoute();
 const store = useProfileDataStore();
-const attrs = ref<any>(useAttrs());
+
 const { fetchPerson } = store;
 const {
   date2Thai,
@@ -165,11 +166,10 @@ const pagination = ref({
 
 const uploadUrl = ref<string>("");
 const subId = ref<string>("");
-const fileUpload = ref<File>();
+const fileUpload = ref<File | undefined>(undefined);
 
 /** ฟังก์ชันดึงข้อมูลส่วนตัว*/
 async function fetchDataPersonal() {
-  showLoader();
   await http
     .get(config.API.registryNewByProfileId(profileId.value, empType.value))
     .then(async (res) => {
@@ -178,9 +178,6 @@ async function fetchDataPersonal() {
     })
     .catch((err) => {
       messageError($q, err);
-    })
-    .finally(() => {
-      hideLoader();
     });
 }
 
@@ -189,7 +186,6 @@ async function fetchDataPersonal() {
  * @param id id profile
  */
 async function fetchData(id: string) {
-  showLoader();
   await http
     .get(config.API.profileNewChangeNameByProfileId(id, empType.value))
     .then(async (res) => {
@@ -198,19 +194,46 @@ async function fetchData(id: string) {
     })
     .catch((err) => {
       messageError($q, err);
-    })
-    .finally(() => {
-      hideLoader();
     });
 }
 
 /** ฟังก์ชันยืนยันการบันทึกข้อมูล*/
 function onSubmit() {
-  if (!!fileUpload.value || dialogStatus.value === "edit") {
+  if (!!fileUpload.value) {
     dialogConfirm(
       $q,
-      () => {
-        dialogStatus.value === "create" ? addData() : editData(editId.value);
+      async () => {
+        showLoader();
+        await http
+          .post(config.API.profileNewChangeName(empType.value), {
+            profileId: empType.value === "" ? profileId.value : undefined,
+            profileEmployeeId:
+              empType.value !== "" ? profileId.value : undefined,
+            prefixId: changeNameData.prefixId,
+            prefix: changeNameData.prefix,
+            firstName: changeNameData.firstName,
+            lastName: changeNameData.lastName,
+            status: changeNameData.status,
+            documentId: changeNameData.documentId,
+          })
+          .then(async (res) => {
+            subId.value = await res.data.result;
+            await Promise.all([
+              uploadProfile(res.data.result),
+              fetchData(profileId.value),
+              props?.fetchDataPersonal?.(),
+              fetchDataPersonal(),
+            ]);
+
+            closeDialog();
+            success($q, "บันทึกข้อมูลสำเร็จ");
+          })
+          .catch((err) => {
+            messageError($q, err);
+          })
+          .finally(() => {
+            hideLoader();
+          });
       },
       "ยืนยันการบันทึกข้อมูล",
       "ต้องการยืนยันการบันทึกข้อมูลนี้หรือไม่ ?"
@@ -242,7 +265,7 @@ async function uploadProfile(id: string) {
     )
     .then(async (res) => {
       uploadUrl.value = res.data["เอกสารหลักฐาน"].uploadUrl;
-      await uploadFileURL(uploadUrl.value, fileUpload.value);
+      await uploadFileURL(uploadUrl.value, fileUpload.value as File);
     })
     .catch((err) => {
       messageError($q, err);
@@ -254,7 +277,7 @@ async function uploadProfile(id: string) {
  * @param uploadUrl Path อัปโหลดไฟล์
  * @param file ไฟล์เอกสาร
  */
-async function uploadFileURL(uploadUrl: string, file: any) {
+async function uploadFileURL(uploadUrl: string, file: File) {
   await axios
     .put(uploadUrl, file, {
       headers: {
@@ -298,65 +321,7 @@ async function onDownloadFile(id: string) {
 }
 
 /** ฟังกชันเพิ่มการเปลี่ยนชื่อ - นามสกุล */
-async function addData() {
-  showLoader();
-  await http
-    .post(config.API.profileNewChangeName(empType.value), {
-      profileId: empType.value === "" ? profileId.value : undefined,
-      profileEmployeeId: empType.value !== "" ? profileId.value : undefined,
-      prefixId: changeNameData.prefixId,
-      prefix: changeNameData.prefix,
-      firstName: changeNameData.firstName,
-      lastName: changeNameData.lastName,
-      status: changeNameData.status,
-      documentId: changeNameData.documentId,
-    })
-    .then(async (res) => {
-      subId.value = await res.data.result;
-      await uploadProfile(res.data.result);
-      await fetchData(profileId.value);
-      await props?.fetchDataPersonal?.();
-      await fetchDataPersonal();
-      success($q, "บันทึกข้อมูลสำเร็จ");
-      closeDialog();
-    })
-    .catch((err) => {
-      messageError($q, err);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-}
-
-/**
- * ฟังกชันแก้ไขการเปลี่ยนชื่อ - นามสกุล
- * @param idData  id ที่ต้องการแก้ไช
- */
-function editData(idData: string) {
-  showLoader();
-  http
-    .patch(
-      config.API.profileNewChangeNameByChangeNameId(idData, empType.value),
-      {
-        ...changeNameData,
-        profileId: undefined,
-      }
-    )
-    .then(async () => {
-      await uploadProfile(subId.value);
-      success($q, "บันทึกข้อมูลสำเร็จ");
-      await fetchData(profileId.value);
-      await props.fetchDataPersonal?.();
-      await fetchDataPersonal();
-      closeDialog();
-    })
-    .catch((err) => {
-      messageError($q, err);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-}
+async function addData() {}
 
 /**
  * ฟังกชันค้นหาข้อมูลใน select
@@ -376,7 +341,7 @@ function filterSelector(val: string, update: Function, refData: string) {
     case "prefixOps":
       update(() => {
         store.Ops.prefixOps = store.OpsFilter.prefixOps.filter(
-          (v: any) => v.name.indexOf(val) > -1
+          (v: DataOption) => v.name.indexOf(val) > -1
         );
       });
       break;
@@ -433,6 +398,7 @@ watch(
 /** ทำงานเมื่อ Components ถูกเรียกใช้งาน*/
 onMounted(async () => {
   // เช็ค ตัวเลือก ถ้าไม่มีให้ ดึงข้อมูลใหท่
+  showLoader();
   if (
     store.Ops.prefixOps.length === 0 ||
     store.Ops.genderOps.length === 0 ||
@@ -442,8 +408,11 @@ onMounted(async () => {
   ) {
     await fetchPerson();
   }
-
-  await Promise.all([fetchData(profileId.value), fetchDataPersonal()]);
+  try {
+    await Promise.all([fetchData(profileId.value), fetchDataPersonal()]);
+  } finally {
+    hideLoader();
+  }
 });
 </script>
 
@@ -509,7 +478,6 @@ onMounted(async () => {
     bordered
     virtual-scroll
     ref="table"
-    v-bind="attrs"
     :rows="rows"
     :columns="columns"
     :visible-columns="visibleColumns"
diff --git a/src/modules/04_registryPerson/components/detail/PersonalInformation/03_Address.vue b/src/modules/04_registryPerson/components/detail/PersonalInformation/03_Address.vue
index 4aa8531f5..ec28446c5 100644
--- a/src/modules/04_registryPerson/components/detail/PersonalInformation/03_Address.vue
+++ b/src/modules/04_registryPerson/components/detail/PersonalInformation/03_Address.vue
@@ -9,13 +9,13 @@ import { useAddressDataStore } from "@/modules/04_registryPerson/stores/Address"
 import http from "@/plugins/http";
 import config from "@/app.config";
 
-import type { QTableProps } from "quasar";
+import type { QTableColumn } from "quasar";
 import type { DataOption } from "@/modules/04_registryPerson/interface/index/Main";
 import type { ResponseObject } from "@/modules/04_registryPerson/interface/response/Address";
 import type { RequestObject } from "@/modules/04_registryPerson/interface/request/Address";
 
 import DialogHeader from "@/components/DialogHeader.vue";
-
+import DialogHistory from "@/modules/04_registryPerson/components/detail/DialogHistory.vue";
 
 const $q = useQuasar();
 const store = useAddressDataStore();
@@ -36,7 +36,6 @@ const {
   hideLoader,
   dialogConfirm,
   pathRegistryEmp,
-  onSearchDataTable,
 } = mixin;
 
 /**
@@ -81,10 +80,7 @@ const dataLabel = {
 };
 
 const modalHistory = ref<boolean>(false); //แสดง Popup ประวัติแก้ไขข้อมูลที่อยู่
-const rowsHistory = ref<ResponseObject[]>([]); //ข้อมูลรายการประวัติแก้ไขข้อมูลที่อยู่
-const rowsHistoryMain = ref<ResponseObject[]>([]); //ข้อมูลรายการประวัติแก้ไขข้อมูลที่อยู่
-const filterHistory = ref<string>(""); //คำค้นหา
-const visibleColumnsHistory = ref<String[]>([
+const visibleColumnsHistory = ref<string[]>([
   "currentAddress",
   "currentDistrict",
   "currentSubDistrict",
@@ -99,7 +95,7 @@ const visibleColumnsHistory = ref<String[]>([
   "lastUpdateFullName",
   "lastUpdatedAt",
 ]);
-const columnsHistory = ref<QTableProps["columns"]>([
+const columnsHistory = ref<QTableColumn[]>([
   {
     name: "registrationAddress",
     align: "left",
@@ -252,9 +248,6 @@ const columnsHistory = ref<QTableProps["columns"]>([
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
 ]);
-const pagination = ref({
-  sortBy: "lastUpdatedAt",
-});
 
 /**
  * ฟังก์ชันดึงข้อมูลที่อยู่
@@ -470,26 +463,23 @@ function clickClose() {
   modal.value = false;
 }
 
-/**
- * ฟังก์ชันเปิด popup ประวัติแก้ไขข้อมูลที่อยู่
- * และดึงข้อมูลรายการประวัติแก้ไขข้อมูลที่อยู่
- */
+/** ฟังก์ชันเปิด popup ประวัติแก้ไขข้อมูลที่อยู่*/
 async function clickHistory() {
-  showLoader();
   modalHistory.value = true;
-  filterHistory.value = "";
-  await http
-    .get(config.API.profileNewAddressHisById(profileId.value, empType.value))
-    .then(async (res) => {
-      rowsHistory.value = await res.data.result;
-      rowsHistoryMain.value = await res.data.result;
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(() => {
-      hideLoader();
-    });
+}
+
+async function fetchDataHistory() {
+  showLoader();
+  try {
+    const res = await http.get(
+      config.API.profileNewAddressHisById(profileId.value, empType.value)
+    );
+    const data = res.data.result;
+    return data;
+  } catch (err) {
+  } finally {
+    hideLoader();
+  }
 }
 
 /**
@@ -508,15 +498,6 @@ function sameAddressToggle(v: string) {
   }
 }
 
-/** ฟังก์ค้นหาข้อมูลรายการประวัติแก้ไขข้อมูลที่อยู่ */
-function serchDataTable() {
-  rowsHistory.value = onSearchDataTable(
-    filterHistory.value,
-    rowsHistoryMain.value,
-    columnsHistory.value ? columnsHistory.value : []
-  );
-}
-
 /** ดูการเปลี่ยนแปลงที่อยู่ปัจจุบันตรงกับที่อยู่ตามทะเบียนบ้า*/
 watch(
   () => sameAddress.value,
@@ -904,74 +885,13 @@ onMounted(async () => {
   </q-dialog>
 
   <!-- ประวัติแก้ไขข้อมูลที่อยู่ -->
-  <q-dialog v-model="modalHistory" persistent>
-    <q-card style="min-width: 80%">
-      <DialogHeader
-        tittle="ประวัติแก้ไขข้อมูลที่อยู่"
-        :close="() => ((modalHistory = false), (rowsHistory = []))"
-      />
-      <q-separator color="grey-4" />
-
-      <q-card-section style="max-height: 50vh" class="scroll">
-        <div class="row q-gutter-sm q-mb-sm">
-          <q-space />
-          <q-input
-            dense
-            v-model="filterHistory"
-            ref="filterRef"
-            outlined
-            placeholder="ค้นหา"
-            @keydown.enter.pervent="serchDataTable"
-          >
-            <template v-slot:append>
-              <q-icon name="search" />
-            </template>
-          </q-input>
-          <q-select
-            v-model="visibleColumnsHistory"
-            multiple
-            outlined
-            dense
-            options-dense
-            :display-value="$q.lang.table.columns"
-            emit-value
-            map-options
-            :options="columnsHistory"
-            option-value="name"
-            style="min-width: 140px"
-          />
-        </div>
-        <d-table
-          ref="table"
-          flat
-          bordered
-          dense
-          :columns="columnsHistory"
-          :rows="rowsHistory"
-          :visible-columns="visibleColumnsHistory"
-          v-model:pagination="pagination"
-        >
-          >
-          <template v-slot:header="props">
-            <q-tr :props="props">
-              <q-th v-for="col in props.cols" :key="col.name" :props="props">
-                <span class="text-weight-medium">{{ col.label }}</span>
-              </q-th>
-            </q-tr>
-          </template>
-          <template v-slot:body="props">
-            <q-tr :props="props">
-              <q-td v-for="col in props.cols" :key="col.id">
-                <div>
-                  {{ col.value ? col.value : "-" }}
-                </div>
-              </q-td>
-            </q-tr>
-          </template>
-        </d-table>
-      </q-card-section>
-    </q-card>
-  </q-dialog>
+  <DialogHistory
+    v-model:modal="modalHistory"
+    :title="`ประวัติแก้ไขข้อมูลที่อยู่`"
+    :columns="columnsHistory"
+    :visible-columns="visibleColumnsHistory"
+    :fetch-data="fetchDataHistory"
+  />
 </template>
 
 <style scoped></style>
diff --git a/src/modules/04_registryPerson/components/detail/PersonalInformation/04_FamilyNew.vue b/src/modules/04_registryPerson/components/detail/PersonalInformation/04_FamilyNew.vue
index efed70aa5..6305f3d9c 100644
--- a/src/modules/04_registryPerson/components/detail/PersonalInformation/04_FamilyNew.vue
+++ b/src/modules/04_registryPerson/components/detail/PersonalInformation/04_FamilyNew.vue
@@ -9,7 +9,7 @@ import { useCounterMixin } from "@/stores/mixin";
 import http from "@/plugins/http";
 import config from "@/app.config";
 
-import type { QTableProps } from "quasar";
+import type { QTableColumn } from "quasar";
 import type { DataOption } from "@/modules/04_registryPerson/interface/index/Main";
 import type {
   FormPerson,
@@ -17,6 +17,7 @@ import type {
 } from "@/modules/04_registryPerson/interface/index/family";
 
 import DialogHeader from "@/components/DialogHeader.vue";
+import DialogHistory from "@/modules/04_registryPerson/components/detail/DialogHistory.vue";
 
 const $q = useQuasar();
 const route = useRoute();
@@ -30,7 +31,6 @@ const {
   messageError,
   success,
   pathRegistryEmp,
-  onSearchDataTable,
 } = useCounterMixin();
 
 /** props*/
@@ -43,9 +43,7 @@ const profileId = ref<string>(
 const empType = ref<string>(pathRegistryEmp(route.name?.toString() ?? ""));
 
 /** TableHisoty*/
-const rows = ref<any[]>([]);
-const rowsMain = ref<any[]>([]);
-const visibleColumns = ref<String[]>([
+const visibleColumns = ref<string[]>([
   "statusMarital",
   "citizenId",
   "prefix",
@@ -57,7 +55,7 @@ const visibleColumns = ref<String[]>([
   "lastUpdateFullName",
   "lastUpdatedAt",
 ]);
-const columns = ref<QTableProps["columns"]>([
+const columns = ref<QTableColumn[]>([
   {
     name: "statusMarital",
     align: "left",
@@ -151,9 +149,6 @@ const columns = ref<QTableProps["columns"]>([
     format: (val) => date2Thai(val, false, true),
   },
 ]);
-const pagination = ref({
-  sortBy: "lastUpdatedAt",
-});
 
 /** ข้อมูล*/
 const fatherData = reactive<FormPerson>({
@@ -190,6 +185,7 @@ const modalHistory = ref<boolean>(false);
 const filterHistory = ref<string>("");
 const titleForm = ref<string>("");
 const typeForm = ref<string>("");
+const historyId = ref<string>("");
 const isEdit = ref<boolean>(false);
 const childernId = ref<string>("");
 
@@ -353,7 +349,6 @@ function closeDialog() {
   fromData.job = "";
   fromData.lastNameOld = "";
   fromData.statusMarital = "";
-  rows.value = [];
   filterHistory.value = "";
 }
 
@@ -418,10 +413,9 @@ function onOpenDialogForm(
  * @param id
  */
 async function onOpenDialogHistory(type: string, id: string = "") {
-  modalHistory.value = true;
   typeForm.value = type;
-  const historyId = type === "children" ? id : profileId.value;
-  await fetchHistory(historyId, type);
+  historyId.value = type === "children" ? id : profileId.value;
+  modalHistory.value = true;
 }
 
 /** function fetch ข้อมูลความสัมพันธ์ */
@@ -453,59 +447,41 @@ function filterSelectorRelation(val: string, update: Function) {
   });
 }
 
-/**
- * function fetch ข้อมูลประวัติการแก้ไขข้อมูล
- * @param id
- * @param type
- */
-async function fetchHistory(id: string, type: string) {
+async function fetchDataHistory() {
   showLoader();
-  await http
-    .get(config.API.profileFamilyHistory(id, empType.value, type))
-    .then(async (res) => {
-      const data = await res.data.result;
-      rows.value = await data.map((e: any) => ({
-        citizenId: e[`${type}CitizenId`],
-        prefix: e[`${type}Prefix`],
-        firstName: e[`${type}FirstName`],
-        lastName: e[`${type}LastName`],
-        job: e[`${type}Career`],
-        isLive: e[`${type}Live`],
-        lastNameOld:
-          type === "couple"
-            ? e.coupleLastNameOld
-            : type === "mother"
-            ? e.motherLastNameOld
-            : undefined,
-        lastUpdateFullName: e.lastUpdateFullName,
-        lastUpdatedAt: e.lastUpdatedAt,
-        statusMarital: type === "couple" ? e.relationship : undefined,
-      }));
-      rowsMain.value = rows.value;
-    })
-    .catch((err) => {
-      messageError($q, err);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-}
+  try {
+    const res = await http.get(
+      config.API.profileFamilyHistory(
+        historyId.value,
+        empType.value,
+        typeForm.value
+      )
+    );
 
-/** ฟังก์ค้นหาข้อมูลรายการประวัติแก้ไขข้อมูล */
-function serchDataTable() {
-  const baseColumns =
-    typeForm.value === "couple"
-      ? columns.value
-      : typeForm.value === "mother"
-      ? columns.value?.filter((e) => e.name !== "statusMarital")
-      : columns.value?.filter(
-          (e) => e.name !== "lastNameOld" && e.name !== "statusMarital"
-        );
-  rows.value = onSearchDataTable(
-    filterHistory.value,
-    rowsMain.value,
-    baseColumns ? baseColumns : []
-  );
+    const data = await res.data.result.map((e: any) => ({
+      citizenId: e[`${typeForm.value}CitizenId`],
+      prefix: e[`${typeForm.value}Prefix`],
+      firstName: e[`${typeForm.value}FirstName`],
+      lastName: e[`${typeForm.value}LastName`],
+      job: e[`${typeForm.value}Career`],
+      isLive: e[`${typeForm.value}Live`],
+      lastNameOld:
+        typeForm.value === "couple"
+          ? e.coupleLastNameOld
+          : typeForm.value === "mother"
+          ? e.motherLastNameOld
+          : undefined,
+      lastUpdateFullName: e.lastUpdateFullName,
+      lastUpdatedAt: e.lastUpdatedAt,
+      statusMarital: typeForm.value === "couple" ? e.relationship : undefined,
+    }));
+
+    return data;
+  } catch (err) {
+    messageError($q, err);
+  } finally {
+    hideLoader();
+  }
 }
 
 /** ทำงานเมื่อ Components ถูกเรียกใช้งาน*/
@@ -1073,100 +1049,29 @@ onMounted(async () => {
     </q-card>
   </q-dialog>
 
-  <!-- ประวัติการแก้ไขข้อมูล -->
-  <q-dialog v-model="modalHistory" class="dialog" persistent>
-    <q-card style="min-width: 80%">
-      <DialogHeader
-        :tittle="`ประวัติการแก้ไขข้อมูล${
-          typeForm === 'father'
-            ? 'บิดา'
-            : typeForm === 'mother'
-            ? 'มารดา'
-            : typeForm === 'couple'
-            ? 'คู่สมรส'
-            : 'บุตร'
-        }`"
-        :close="closeDialog"
-      />
-      <q-separator />
-      <q-card-section>
-        <div class="row q-gutter-sm q-mb-sm">
-          <q-space />
-          <q-input
-            dense
-            v-model="filterHistory"
-            ref="filterRef"
-            outlined
-            placeholder="ค้นหา"
-            @keydown.enter.pervent="serchDataTable"
-          >
-            <template v-slot:append>
-              <q-icon name="search" />
-            </template>
-          </q-input>
-          <q-select
-            v-model="visibleColumns"
-            multiple
-            outlined
-            dense
-            options-dense
-            :display-value="$q.lang.table.columns"
-            emit-value
-            map-options
-            :options="
-              typeForm === 'couple'
-                ? columns
-                : typeForm === 'mother'
-                ? columns?.filter((e) => e.name !== 'statusMarital')
-                : columns?.filter(
-                    (e) =>
-                      e.name !== 'lastNameOld' && e.name !== 'statusMarital'
-                  )
-            "
-            option-value="name"
-            style="min-width: 140px"
-          />
-        </div>
-
-        <d-table
-          ref="table"
-          flat
-          bordered
-          dense
-          :columns="
-            typeForm === 'couple'
-              ? columns
-              : typeForm === 'mother'
-              ? columns?.filter((e) => e.name !== 'statusMarital')
-              : columns?.filter(
-                  (e) => e.name !== 'lastNameOld' && e.name !== 'statusMarital'
-                )
-          "
-          :rows="rows"
-          :visible-columns="visibleColumns"
-          v-model:pagination="pagination"
-        >
-          >
-          <template v-slot:header="props">
-            <q-tr :props="props">
-              <q-th v-for="col in props.cols" :key="col.name" :props="props">
-                <span class="text-weight-medium">{{ col.label }}</span>
-              </q-th>
-            </q-tr>
-          </template>
-          <template v-slot:body="props">
-            <q-tr :props="props">
-              <q-td v-for="col in props.cols" :key="col.id">
-                <div>
-                  {{ col.value ? col.value : "-" }}
-                </div>
-              </q-td>
-            </q-tr>
-          </template>
-        </d-table>
-      </q-card-section>
-    </q-card>
-  </q-dialog>
+  <DialogHistory
+    v-model:modal="modalHistory"
+    :title="`ประวัติการแก้ไขข้อมูล${
+      typeForm === 'father'
+        ? 'บิดา'
+        : typeForm === 'mother'
+        ? 'มารดา'
+        : typeForm === 'couple'
+        ? 'คู่สมรส'
+        : 'บุตร'
+    }`"
+    :columns="
+      typeForm === 'couple'
+        ? columns
+        : typeForm === 'mother'
+        ? columns?.filter((e) => e.name !== 'statusMarital')
+        : columns?.filter(
+            (e) => e.name !== 'lastNameOld' && e.name !== 'statusMarital'
+          )
+    "
+    :visible-columns="visibleColumns"
+    :fetch-data="fetchDataHistory"
+  />
 </template>
 
 <style scoped></style>
diff --git a/src/modules/04_registryPerson/components/detail/PersonalInformation/05_Education.vue b/src/modules/04_registryPerson/components/detail/PersonalInformation/05_Education.vue
index 0dc06d5c4..222fa2033 100644
--- a/src/modules/04_registryPerson/components/detail/PersonalInformation/05_Education.vue
+++ b/src/modules/04_registryPerson/components/detail/PersonalInformation/05_Education.vue
@@ -1,4 +1,3 @@
-div
 <script setup lang="ts">
 import { ref, reactive, onMounted } from "vue";
 import { QForm, useQuasar } from "quasar";
@@ -9,7 +8,7 @@ import { useRoute } from "vue-router";
 import http from "@/plugins/http";
 import config from "@/app.config";
 
-import type { QTableProps } from "quasar";
+import type { QTableColumn } from "quasar";
 import type {
   DataOptionEducation,
   DataOptionEducationLevel,
@@ -22,6 +21,7 @@ import type {
 
 import DialogHeader from "@/components/DialogHeader.vue";
 import DialogSortEducation from "@/modules/04_registryPerson/components/detail/PersonalInformation/DialogSortEducation.vue";
+import DialogHistory from "@/modules/04_registryPerson/components/detail/DialogHistory.vue";
 
 const $q = useQuasar();
 const route = useRoute();
@@ -48,11 +48,7 @@ const mode = ref<string>("table"); //การแสดงของ Table card
 const isLeave = defineModel<boolean>("isLeave", {
   required: true,
 });
-/** Table*/
-const keyword = ref<string>("");
-const rows = ref<ResponseObject[]>([]);
-const rowsMain = ref<ResponseObject[]>([]);
-const columns = ref<QTableProps["columns"]>([
+const baseColumns = ref<QTableColumn[]>([
   {
     name: "educationLevel",
     align: "left",
@@ -84,7 +80,7 @@ const columns = ref<QTableProps["columns"]>([
     format(val, row) {
       return row.isDate
         ? date2Thai(row.startDate)
-        : new Date(row.startDate).getFullYear() + 543;
+        : (new Date(row.startDate).getFullYear() + 543).toString();
     },
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
@@ -97,11 +93,10 @@ const columns = ref<QTableProps["columns"]>([
     label: "ถึง",
     sortable: true,
     field: "endDate",
-
     format(val, row) {
       return row.isDate
         ? date2Thai(row.endDate)
-        : new Date(row.endDate).getFullYear() + 543;
+        : (new Date(row.endDate).getFullYear() + 543).toString();
     },
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
@@ -249,238 +244,6 @@ const columns = ref<QTableProps["columns"]>([
     sort: (a: string, b: string) =>
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
-  {
-    name: "lastUpdatedAt",
-    align: "left",
-    label: "วันที่แก้ไข",
-    sortable: true,
-    field: "lastUpdatedAt",
-    format: (v) => date2Thai(v, false, true),
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-]);
-const visibleColumns = ref<string[]>([
-  "educationLevel",
-  "institute",
-  "degree",
-  "field",
-  "gpa",
-  "country",
-  "duration",
-  "durationYear",
-  "other",
-  "fundName",
-  "isEducation",
-  "isHigh",
-  "endDate",
-  "startDate",
-  "finishDate",
-  "note",
-  "lastUpdatedAt",
-]);
-const pagination = ref({
-  sortBy: "",
-});
-
-/** Table ประวัติแก้ไขประวัติการศึกษา*/
-const historyKeyword = ref<string>("");
-const historyRows = ref<ResponseObject[]>([]);
-const historyRowsMain = ref<ResponseObject[]>([]);
-const historyColumns = ref<QTableProps["columns"]>([
-  {
-    name: "educationLevel",
-    align: "left",
-    label: "ระดับการศึกษา",
-    sortable: true,
-    field: "educationLevel",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "institute",
-    align: "left",
-    label: "สถานศึกษา",
-    sortable: true,
-    field: "institute",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "startDate",
-    align: "left",
-    label: "ตั้งแต่",
-    sortable: true,
-    field: "startDate",
-    format(val, row) {
-      return row.isDate
-        ? date2Thai(row.startDate)
-        : new Date(row.startDate).getFullYear() + 543;
-    },
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "endDate",
-    align: "left",
-    label: "ถึง",
-    sortable: true,
-    field: "endDate",
-    format(val, row) {
-      return row.isDate
-        ? date2Thai(row.endDate)
-        : new Date(row.endDate).getFullYear() + 543;
-    },
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "finishDate",
-    align: "left",
-    label: "วันที่สำเร็จการศึกษา",
-    sortable: true,
-    field: "finishDate",
-    format: (v) => date2Thai(v),
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "isEducation",
-    align: "left",
-    label: "เป็นวุฒิการศึกษาในตำแหน่ง",
-    sortable: true,
-    field: "isEducation",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    format: (v) => (v === true ? "ใช่" : "ไม่ใช่"),
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "isHigh",
-    align: "left",
-    label: "วุฒิการศึกษาสูงสุด",
-    sortable: true,
-    field: "isHigh",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    format: (v) => (v === true ? "ใช่" : v === false ? "ไม่ใช่" : "-"),
-    sort: (a: string, b: string) =>
-      a
-        .toString()
-        .localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "degree",
-    align: "left",
-    label: "วุฒิการศึกษา",
-    sortable: true,
-    field: "degree",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "field",
-    align: "left",
-    label: "สาขาวิชา/ทาง",
-    sortable: true,
-    field: "field",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "fundName",
-    align: "left",
-    label: "ทุน",
-    sortable: true,
-    field: "fundName",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "gpa",
-    align: "left",
-    label: "เกรดเฉลี่ย",
-    sortable: true,
-    field: "gpa",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "country",
-    align: "left",
-    label: "ประเทศ",
-    sortable: true,
-    field: "country",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "other",
-    align: "left",
-    label: "ข้อมูลการติดต่อ",
-    sortable: true,
-    field: "other",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "duration",
-    align: "left",
-    label: "ระยะเวลา",
-    sortable: true,
-    field: "duration",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "durationYear",
-    align: "left",
-    label: "ระยะเวลาหลักสูตร (ปี)",
-    sortable: true,
-    field: "durationYear",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "note",
-    align: "left",
-    label: "หมายเหตุ",
-    sortable: true,
-    field: "note",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
   {
     name: "lastUpdateFullName",
     align: "left",
@@ -505,7 +268,7 @@ const historyColumns = ref<QTableProps["columns"]>([
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
 ]);
-const historyVisibleColumns = ref<string[]>([
+const baseVisibleColumns = ref<string[]>([
   "educationLevel",
   "institute",
   "degree",
@@ -525,10 +288,25 @@ const historyVisibleColumns = ref<string[]>([
   "lastUpdateFullName",
   "lastUpdatedAt",
 ]);
-const paginationHistory = ref({
-  sortBy: "lastUpdatedAt",
+
+/** Table*/
+const keyword = ref<string>("");
+const rows = ref<ResponseObject[]>([]);
+const rowsMain = ref<ResponseObject[]>([]);
+const columns = ref<QTableColumn[]>(
+  baseColumns.value.filter((e: QTableColumn) => e.name !== "lastUpdateFullName")
+);
+const visibleColumns = ref<string[]>(
+  baseVisibleColumns.value.filter((e: string) => e !== "lastUpdateFullName")
+);
+const pagination = ref({
+  sortBy: "",
 });
 
+/** Table ประวัติแก้ไขประวัติการศึกษา*/
+const historyColumns = ref<QTableColumn[]>(baseColumns.value);
+const historyVisibleColumns = ref<string[]>(baseVisibleColumns.value);
+
 const editId = ref<string>(""); //id ที่ต้องการแก้ไข
 const isDate = ref<string>("false");
 
@@ -578,8 +356,55 @@ const dataSort = ref<ResponseObject[]>([]);
 function onSubmit() {
   dialogConfirm(
     $q,
-    () => {
-      dialogStatus.value === "create" ? addData() : editData(editId.value);
+    async () => {
+      showLoader();
+      const isEdit = dialogStatus.value === "create" ? false : true;
+      const url = isEdit
+        ? config.API.profileNewEducationByEducationId(
+            editId.value,
+            empType.value
+          )
+        : config.API.profileNewEducation(empType.value);
+
+      const method = isEdit ? http.patch : http.post;
+
+      const body = {
+        ...educationData,
+        startYear: undefined,
+        endYear: undefined,
+        isDate: isDate.value === "false" ? false : true,
+        profileId: isEdit
+          ? undefined
+          : empType.value === ""
+          ? id.value
+          : undefined,
+        profileEmployeeId: isEdit
+          ? undefined
+          : empType.value !== ""
+          ? id.value
+          : undefined,
+        durationYear: isEdit
+          ? educationData.durationYear === ""
+            ? null
+            : educationData.durationYear
+          : undefined,
+        finishDate: convertDateToAPI(educationData.finishDate),
+        startDate: convertDateToAPI(educationData.startDate),
+        endDate: convertDateToAPI(educationData.endDate),
+      };
+
+      await method(url, body)
+        .then(async () => {
+          await fetchData(id.value);
+          success($q, "บันทึกข้อมูลสำเร็จ");
+          closeDialog();
+        })
+        .catch((err) => {
+          messageError($q, err);
+        })
+        .finally(() => {
+          hideLoader();
+        });
     },
     "ยืนยันการบันทึกข้อมูล",
     "ต้องการยืนยันการบันทึกข้อมูลนี้หรือไม่ ?"
@@ -678,13 +503,6 @@ function closeDialog() {
   dialog.value = false;
 }
 
-/** funcitob ปิด popup ประวัติการศึกษา*/
-function closeHistoryDialog() {
-  historyDialog.value = false;
-  historyKeyword.value = "";
-  historyRows.value = [];
-}
-
 /**
  * function fetch ข้อมูลประวัตืการศึกษา
  * @param id บุคคล
@@ -724,84 +542,32 @@ function fetchEducationLevel() {
     });
 }
 
+const historyId = ref<string>("");
 /**
  * function fetch ประวัติการแก้ไขประวัติการศึกษา
  * @param id  ประวัติการศึกษา
  */
-function fetchHistoryData(id: string) {
-  showLoader();
-  http
-    .get(config.API.profileNewEducationHisByEducationId(id, empType.value))
-    .then(async (res) => {
-      historyRows.value = await res.data.result;
-      historyRowsMain.value = await res.data.result;
-    })
-    .catch((err) => {
-      messageError($q, err);
-    })
-    .finally(() => {
-      hideLoader();
-    });
+function onOpenHistoryData(id: string) {
+  historyId.value = id;
+  historyDialog.value = true;
 }
 
-/** function เพิ่มข้อมูลประวัติการศึกษา*/
-function addData() {
+async function fetchDataHistory() {
   showLoader();
-  http
-    .post(config.API.profileNewEducation(empType.value), {
-      ...educationData,
-      startYear: undefined,
-      endYear: undefined,
-      isDate: isDate.value === "false" ? false : true,
-      profileId: empType.value === "" ? id.value : undefined,
-      profileEmployeeId: empType.value !== "" ? id.value : undefined,
-      finishDate: convertDateToAPI(educationData.finishDate),
-      startDate: convertDateToAPI(educationData.startDate),
-      endDate: convertDateToAPI(educationData.endDate),
-    })
-    .then(async () => {
-      await fetchData(id.value);
-      await success($q, "บันทึกข้อมูลสำเร็จ");
-      closeDialog();
-    })
-    .catch((err) => {
-      messageError($q, err);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-}
-
-/**
- * function บันทึกการแก้ไขข้อมูล
- * @param idData  ประวัติการศึกษา
- */
-function editData(idData: string) {
-  showLoader();
-  http
-    .patch(config.API.profileNewEducationByEducationId(idData, empType.value), {
-      ...educationData,
-      profileId: undefined,
-      startYear: undefined,
-      endYear: undefined,
-      isDate: isDate.value === "false" ? false : true,
-      durationYear:
-        educationData.durationYear === "" ? null : educationData.durationYear,
-      finishDate: convertDateToAPI(educationData.finishDate),
-      startDate: convertDateToAPI(educationData.startDate),
-      endDate: convertDateToAPI(educationData.endDate),
-    })
-    .then(async () => {
-      await fetchData(id.value);
-      await success($q, "บันทึกข้อมูลสำเร็จ");
-      closeDialog();
-    })
-    .catch((err) => {
-      messageError($q, err);
-    })
-    .finally(() => {
-      hideLoader();
-    });
+  try {
+    const res = await http.get(
+      config.API.profileNewEducationHisByEducationId(
+        historyId.value,
+        empType.value
+      )
+    );
+    const data = res.data.result;
+    return data;
+  } catch (err) {
+    messageError($q, err);
+  } finally {
+    hideLoader();
+  }
 }
 
 /** ฟังก์ค้นหาข้อมูลรายการประวัติการศึกษา */
@@ -813,15 +579,6 @@ function serchDataTable() {
   );
 }
 
-/** ฟังก์ค้นหาข้อมูลรายการประวัติการศึกษา */
-function serchDataTableHistory() {
-  historyRows.value = onSearchDataTable(
-    historyKeyword.value,
-    historyRowsMain.value,
-    historyColumns.value ? historyColumns.value : []
-  );
-}
-
 /** ทำงานเมื่อ Components ถูกเรียกใช้งาน*/
 onMounted(async () => {
   await fetchData(id.value);
@@ -955,9 +712,7 @@ onMounted(async () => {
             dense
             round
             icon="mdi-history"
-            @click="
-              () => (fetchHistoryData(props.row.id), (historyDialog = true))
-            "
+            @click="() => onOpenHistoryData(props.row.id)"
           >
             <q-tooltip>ประวัติแก้ไขประวัติการศึกษา</q-tooltip>
           </q-btn>
@@ -996,9 +751,7 @@ onMounted(async () => {
               round
               color="deep-purple"
               icon="mdi-history"
-              @click="
-                () => (fetchHistoryData(props.row.id), (historyDialog = true))
-              "
+              @click="() => onOpenHistoryData(props.row.id)"
             >
               <q-tooltip>ประวัติแก้ไขประวัติการศึกษา</q-tooltip>
             </q-btn>
@@ -1543,81 +1296,13 @@ onMounted(async () => {
   </q-dialog>
 
   <!-- ประวัติแก้ไขประวัติการศึกษา -->
-  <q-dialog v-model="historyDialog" class="dialog" persistent>
-    <q-card style="min-width: 80%">
-      <DialogHeader
-        tittle="ประวัติแก้ไขประวัติการศึกษา"
-        :close="closeHistoryDialog"
-      />
-      <q-separator />
-
-      <q-card-section style="max-height: 50vh" class="scroll">
-        <q-toolbar style="padding: 0px" class="text-primary q-mb-sm">
-          <q-space />
-          <q-input
-            dense
-            outlined
-            bg-color="white"
-            v-model="historyKeyword"
-            label="ค้นหา"
-            class="q-mr-sm"
-            @keydown.enter.pervent="serchDataTableHistory"
-          >
-            <template v-slot:append>
-              <q-icon name="search" />
-            </template>
-          </q-input>
-
-          <q-select
-            v-model="historyVisibleColumns"
-            multiple
-            outlined
-            dense
-            bg-color="white"
-            options-dense
-            :display-value="$q.lang.table.columns"
-            emit-value
-            map-options
-            :options="historyColumns"
-            option-value="name"
-            style="min-width: 140px"
-          />
-        </q-toolbar>
-        <d-table
-          ref="table"
-          :columns="historyColumns"
-          :rows="historyRows"
-          row-key="name"
-          flat
-          bordered
-          :paging="true"
-          dense
-          class="custom-header-table"
-          :visible-columns="historyVisibleColumns"
-          v-model:pagination="paginationHistory"
-        >
-          <template v-slot:header="props">
-            <q-tr :props="props">
-              <q-th v-for="col in props.cols" :key="col.name" :props="props">
-                <span class="text-weight-medium">{{ col.label }}</span>
-              </q-th>
-              <q-th auto-width />
-            </q-tr>
-          </template>
-          <template v-slot:body="props">
-            <q-tr :props="props">
-              <q-td v-for="col in props.cols" :key="col.id">
-                <div>
-                  {{ col.value === "" ? "-" : col.value }}
-                </div>
-              </q-td>
-              <q-td auto-width> </q-td>
-            </q-tr>
-          </template>
-        </d-table>
-      </q-card-section>
-    </q-card>
-  </q-dialog>
+  <DialogHistory
+    v-model:modal="historyDialog"
+    :columns="historyColumns"
+    :visible-columns="historyVisibleColumns"
+    :title="`ประวัติแก้ไขประวัติการศึกษา`"
+    :fetch-data="fetchDataHistory"
+  />
 
   <DialogSortEducation
     v-model:modal="modalSort"
diff --git a/src/modules/04_registryPerson/components/detail/PersonalInformation/06_SpecialSkill.vue b/src/modules/04_registryPerson/components/detail/PersonalInformation/06_SpecialSkill.vue
index fee415c54..fac548aee 100644
--- a/src/modules/04_registryPerson/components/detail/PersonalInformation/06_SpecialSkill.vue
+++ b/src/modules/04_registryPerson/components/detail/PersonalInformation/06_SpecialSkill.vue
@@ -10,12 +10,13 @@ import { checkPermission } from "@/utils/permissions";
 import { QForm, useQuasar } from "quasar";
 import { useCounterMixin } from "@/stores/mixin";
 
-import type { QTableProps } from "quasar";
+import type { QTableColumn } from "quasar";
 import type { RequestItemsObject } from "@/modules/04_registryPerson/interface/request/SpecialSkill";
 import type { ResponseObject } from "@/modules/04_registryPerson/interface/response/SpecialSkill";
 import type { ResFileData } from "@/modules/04_registryPerson/interface/index/Main";
 
 import dialogHeader from "@/components/DialogHeader.vue";
+import DialogHistory from "@/modules/04_registryPerson/components/detail/DialogHistory.vue";
 
 const $q = useQuasar();
 const route = useRoute();
@@ -49,88 +50,8 @@ const mode = ref<string>("table"); //การแสดงของ Table card
 const isLeave = defineModel<boolean>("isLeave", {
   required: true,
 });
-//Table
-const keyword = ref<string>(""); //คำต้นหา
-const rows = ref<ResponseObject[]>([]); //รายการความสามารถ
-const rowsMain = ref<ResponseObject[]>([]); //รายการความสามารถ
-const columns = ref<QTableProps["columns"]>([
-  {
-    name: "field",
-    align: "left",
-    label: "ด้าน",
-    sortable: true,
-    field: "field",
-    headerStyle: "font-size: 14px; width: 50px;",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "detail",
-    align: "left",
-    label: "รายละเอียด",
-    sortable: true,
-    field: "detail",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "remark",
-    align: "left",
-    label: "หมายเหตุ",
-    sortable: true,
-    field: "remark",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "reference",
-    align: "left",
-    label: "เอกสารอ้างอิง",
-    sortable: true,
-    field: "reference",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "lastUpdatedAt",
-    align: "left",
-    label: "วันที่แก้ไข",
-    sortable: true,
-    field: "lastUpdatedAt",
-    format: (v) => date2Thai(v, false, true),
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-]);
-const visibleColumns = ref<string[]>([
-  "field",
-  "detail",
-  "remark",
-  "reference",
-  "lastUpdatedAt",
-]);
-const pagination = ref({
-  sortBy: "lastUpdatedAt",
-});
 
-const dialog = ref<boolean>(false); //แสดง popup ข้อมูลความสามารถพิเศษ
-const dialogStatus = ref<string>("create"); ////สถานะข้อมูลความสามารถพิเศษ
-const editId = ref<string>(""); //idที่ต้องการแก้ไข
-
-const historyDialog = ref<boolean>(false); //แสดง popup รายการประวัติ
-const historyRows = ref<ResponseObject[]>([]); //รายการประวัติ
-const historyRowsMain = ref<ResponseObject[]>([]); //รายการประวัติ
-const historyKeyword = ref<string>(""); //คำต้นหาประวัติ
-const historyColumns = ref<QTableProps["columns"]>([
+const baseColumns = ref<QTableColumn[]>([
   {
     name: "field",
     align: "left",
@@ -199,7 +120,7 @@ const historyColumns = ref<QTableProps["columns"]>([
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
 ]);
-const historyVisibleColumns = ref<string[]>([
+const baseVisibleColumns = ref<string[]>([
   "field",
   "detail",
   "remark",
@@ -207,10 +128,30 @@ const historyVisibleColumns = ref<string[]>([
   "lastUpdateFullName",
   "lastUpdatedAt",
 ]);
-const historyPagination = ref({
+
+//Table
+const keyword = ref<string>(""); //คำต้นหา
+const rows = ref<ResponseObject[]>([]); //รายการความสามารถ
+const rowsMain = ref<ResponseObject[]>([]); //รายการความสามารถ
+const columns = ref<QTableColumn[]>(
+  baseColumns.value.filter((e: QTableColumn) => e.name !== "lastUpdateFullName")
+);
+const visibleColumns = ref<string[]>(
+  baseVisibleColumns.value.filter((e: string) => e !== "lastUpdateFullName")
+);
+const pagination = ref({
   sortBy: "lastUpdatedAt",
 });
 
+const dialog = ref<boolean>(false); //แสดง popup ข้อมูลความสามารถพิเศษ
+const dialogStatus = ref<string>("create"); ////สถานะข้อมูลความสามารถพิเศษ
+const editId = ref<string>(""); //idที่ต้องการแก้ไข
+const historyId = ref<string>("");
+
+const historyDialog = ref<boolean>(false); //แสดง popup รายการประวัติ
+const historyColumns = ref<QTableColumn[]>(baseColumns.value);
+const historyVisibleColumns = ref<string[]>(baseVisibleColumns.value);
+
 //ฟอร์มข้อมูลความสามารถพิเศษ
 const specialSkill = reactive<RequestItemsObject>({
   field: "", //ด้าน
@@ -218,16 +159,53 @@ const specialSkill = reactive<RequestItemsObject>({
   remark: "", //หมายเหตุ
   reference: "", //เอกสารอ้างอิง
   profileId: id.value,
-  dateStart: null,
-  dateEnd: null,
 });
 
 /** function ยืนยันการบันทึกข้อมูล*/
 function onSubmit() {
   dialogConfirm(
     $q,
-    () => {
-      dialogStatus.value === "create" ? addData() : editData(editId.value);
+    async () => {
+      showLoader();
+
+      const url = isEdit.value
+        ? config.API.profileNewAbilityByAbilityId(editId.value, empType.value)
+        : config.API.profileNewAbility(empType.value);
+
+      const method = isEdit.value ? http.patch : http.post;
+
+      const body = {
+        ...specialSkill,
+        dateEnd: null,
+        dateStart: null,
+        profileId: isEdit.value
+          ? undefined
+          : empType.value === ""
+          ? id.value
+          : undefined,
+        profileEmployeeId: isEdit.value
+          ? undefined
+          : empType.value !== ""
+          ? id.value
+          : undefined,
+
+        isUpload: !isEdit.value ? undefined : isUpload.value,
+      };
+      await method(url, body)
+        .then(async (res) => {
+          if (fileUpload.value && res.data.result) {
+            await uploadProfile(res.data.result);
+          }
+          await fetchData(id.value);
+          success($q, "บันทึกข้อมูลสำเร็จ");
+          closeDialog();
+        })
+        .catch((err) => {
+          messageError($q, err);
+        })
+        .finally(() => {
+          hideLoader();
+        });
     },
     "ยืนยันการบันทึกข้อมูล",
     "ต้องการยืนยันการบันทึกข้อมูลนี้หรือไม่ ?"
@@ -285,80 +263,29 @@ async function fetchData(id: string) {
 }
 
 /**
- * function fetch ประวัติการแก้ไขความสามรรถพิเศษ
+ * function ดู ระวัติการแก้ไขความสามรรถพิเศษ
  * @param id  ความสามรรถพิเศษ
  */
-async function fetchHistoryData(id: string) {
-  showLoader();
-  await http
-    .get(config.API.profileNewAbilityHisByAbilityId(id, empType.value))
-    .then(async (res) => {
-      historyRows.value = await res.data.result;
-      historyRowsMain.value = await res.data.result;
-    })
-    .catch((err) => {
-      messageError($q, err);
-    })
-    .finally(() => {
-      hideLoader();
-    });
+async function onOpenHistoryData(id: string) {
+  historyId.value = id;
+  historyDialog.value = true;
 }
 
-/** function เพิ่มข้อมูลความสามรรถพิเศษ*/
-async function addData() {
+/** function fetch ประวัติการแก้ไขความสามรรถพิเศษ*/
+async function fetchDataHistory() {
   showLoader();
-  await http
-    .post(config.API.profileNewAbility(empType.value), {
-      ...specialSkill,
-      dateStart: null,
-      dateEnd: null,
-      profileId: empType.value === "" ? id.value : undefined,
-      profileEmployeeId: empType.value !== "" ? id.value : undefined,
-    })
-    .then(async (res) => {
-      if (fileUpload.value && res.data.result) {
-        await uploadProfile(res.data.result);
-      }
-      await fetchData(id.value);
-      await success($q, "บันทึกข้อมูลสำเร็จ");
-      closeDialog();
-    })
-    .catch((err) => {
-      messageError($q, err);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-}
+  try {
+    const res = await http.get(
+      config.API.profileNewAbilityHisByAbilityId(historyId.value, empType.value)
+    );
 
-/**
- * function บันทึกการแก้ไขข้อมูล
- * @param idData ความสามรรถพิเศษ
- */
-async function editData(idData: string) {
-  showLoader();
-  await http
-    .patch(config.API.profileNewAbilityByAbilityId(idData, empType.value), {
-      ...specialSkill,
-      dateStart: null,
-      dateEnd: null,
-      profileId: undefined,
-      isUpload: !isEdit.value ? undefined : isUpload.value,
-    })
-    .then(async (res) => {
-      if (fileUpload.value && idData) {
-        await uploadProfile(idData);
-      }
-      await fetchData(id.value);
-      await success($q, "บันทึกข้อมูลสำเร็จ");
-      closeDialog();
-    })
-    .catch((err) => {
-      messageError($q, err);
-    })
-    .finally(() => {
-      hideLoader();
-    });
+    const data = res.data.result;
+    return data;
+  } catch (err) {
+    messageError($q, err);
+  } finally {
+    hideLoader();
+  }
 }
 
 /**
@@ -420,8 +347,7 @@ async function isUploadFn(id: string) {
     .patch(config.API.profileNewAbilityByAbilityId(id, empType.value), {
       isUpload: fileUpload.value ? true : false,
     })
-    .then(async (res) => {})
-
+    .then(async () => {})
     .catch((e) => {
       messageError($q, e);
     })
@@ -467,13 +393,6 @@ function closeDialog() {
   clearForm();
 }
 
-/** function ปิด popup  รายการประวัติ*/
-function closeHistoryDialog() {
-  historyDialog.value = false;
-  historyKeyword.value = "";
-  historyRows.value = [];
-}
-
 /** ฟังก์ค้นหาข้อมูลรายการความสามาพิเศษ */
 function serchDataTable() {
   rows.value = onSearchDataTable(
@@ -483,15 +402,6 @@ function serchDataTable() {
   );
 }
 
-/** ฟังก์ค้นหาข้อมูลรายการประวัติแก้ไขความสามารถพิเศษ */
-function serchDataTableHistory() {
-  historyRows.value = onSearchDataTable(
-    historyKeyword.value,
-    historyRowsMain.value,
-    historyColumns.value ? historyColumns.value : []
-  );
-}
-
 /** ทำงานเมื่อ Components ถูกเรียกใช้งาน*/
 onMounted(() => {
   fetchData(id.value);
@@ -600,10 +510,7 @@ onMounted(() => {
             round
             color="deep-purple"
             icon="mdi-history"
-            @click="
-              fetchHistoryData(props.row.id);
-              historyDialog = true;
-            "
+            @click="onOpenHistoryData(props.row.id)"
           >
             <q-tooltip>ประวัติแก้ไขความสามารถพิเศษ</q-tooltip>
           </q-btn>
@@ -634,7 +541,7 @@ onMounted(() => {
             dense
             round
             icon="mdi-file-document-outline"
-            @click="onDownloadFile(props.row.profileId)"
+            @click="onDownloadFile(props.row.id)"
           >
             <q-tooltip>ดาวน์โหลด</q-tooltip>
           </q-btn>
@@ -653,10 +560,7 @@ onMounted(() => {
               round
               color="deep-purple"
               icon="mdi-history"
-              @click="
-                fetchHistoryData(props.row.id);
-                historyDialog = true;
-              "
+              @click="onOpenHistoryData(props.row.id)"
             >
               <q-tooltip>ประวัติแก้ไขความสามารถพิเศษ</q-tooltip>
             </q-btn>
@@ -841,7 +745,7 @@ onMounted(() => {
                           round
                           color="primary"
                           icon="mdi-download"
-                          @click="onDownloadFile(id)"
+                          @click="onDownloadFile(editId)"
                         />
 
                         <q-btn
@@ -872,75 +776,13 @@ onMounted(() => {
   </q-dialog>
 
   <!-- ประวัติแก้ไขความสามารถพิเศษ -->
-  <q-dialog v-model="historyDialog" persistent>
-    <q-card style="width: 900px; max-width: 80vw">
-      <dialog-header
-        tittle="ประวัติแก้ไขความสามารถพิเศษ"
-        :close="closeHistoryDialog"
-      />
-      <q-separator />
-      <q-card-section>
-        <q-toolbar style="padding: 0px" class="text-primary q-mb-sm">
-          <q-space />
-          <q-input
-            dense
-            outlined
-            bg-color="white"
-            v-model="historyKeyword"
-            label="ค้นหา"
-            class="q-mr-sm"
-            @keydown.enter.pervent="serchDataTableHistory"
-          >
-            <template v-slot:append>
-              <q-icon name="search" />
-            </template>
-          </q-input>
-
-          <q-select
-            v-model="historyVisibleColumns"
-            multiple
-            outlined
-            dense
-            bg-color="white"
-            options-dense
-            :display-value="$q.lang.table.columns"
-            emit-value
-            map-options
-            :options="historyColumns"
-            option-value="name"
-            style="min-width: 140px"
-          />
-        </q-toolbar>
-        <d-table
-          ref="table"
-          :columns="historyColumns"
-          :rows="historyRows"
-          row-key="name"
-          flat
-          bordered
-          dense
-          class="custom-header-table"
-          :visible-columns="historyVisibleColumns"
-          v-model:pagination="historyPagination"
-        >
-          <template v-slot:header="props">
-            <q-tr :props="props">
-              <q-th v-for="col in props.cols" :key="col.name" :props="props">
-                <span class="text-weight-medium">{{ col.label }}</span>
-              </q-th>
-            </q-tr>
-          </template>
-          <template v-slot:body="props" v-if="mode === 'table'">
-            <q-tr :props="props">
-              <q-td v-for="col in props.cols" :key="col.id">
-                <div>{{ col.value ? col.value : "-" }}</div>
-              </q-td>
-            </q-tr>
-          </template>
-        </d-table>
-      </q-card-section>
-    </q-card>
-  </q-dialog>
+  <DialogHistory
+    v-model:modal="historyDialog"
+    :columns="historyColumns"
+    :visible-columns="historyVisibleColumns"
+    :title="`ประวัติแก้ไขความสามารถพิเศษ`"
+    :fetch-data="fetchDataHistory"
+  />
 </template>
 
 <style scoped>
diff --git a/src/modules/04_registryPerson/components/requestEdit/01_TabInformation.vue b/src/modules/04_registryPerson/components/requestEdit/01_TabInformation.vue
index f5e48277c..ebd41c777 100644
--- a/src/modules/04_registryPerson/components/requestEdit/01_TabInformation.vue
+++ b/src/modules/04_registryPerson/components/requestEdit/01_TabInformation.vue
@@ -70,15 +70,6 @@ const columns = ref<QTableProps["columns"]>([
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
-  // {
-  //   name: "document",
-  //   align: "center",
-  //   label: "หลักฐานอ้างอิง",
-  //   sortable: false,
-  //   field: "document",
-  //   headerStyle: "font-size: 14px",
-  //   style: "font-size: 14px",
-  // },
   {
     name: "status",
     align: "left",
@@ -105,7 +96,6 @@ const visibleColumns = ref<string[]>([
   "fullname",
   "topic",
   "detail",
-  // "document",
   "status",
   "remark",
 ]);
@@ -117,9 +107,9 @@ const statusOption = ref<DataOption[]>(store.optionStatus); //รายการ
 const requestId = ref<string>(""); //id รายการแก้ไข
 
 /** function fetch รายการคำร้องขอแก้ไขทะเบียนประวัติ*/
-function fetchListRequset() {
+async function fetchListRequset() {
   showLoader();
-  http
+  await http
     .get(
       config.API.requestEditByType(
         routerName.value == "registryNewRequestEditEMP" ? "-employee" : ""
@@ -167,7 +157,6 @@ function clearStatus() {
  */
 function filterOption(val: string, update: Function) {
   update(() => {
-    status.value = val ? "" : status.value;
     statusOption.value = store.optionStatus.filter(
       (v: DataOption) => v.name.indexOf(val) > -1
     );
@@ -309,21 +298,7 @@ onMounted(() => {
               </q-btn>
             </q-td>
             <q-td v-for="col in props.cols" :key="col.name" :props="props">
-              <!-- <div v-if="col.name === 'document'">
-                <q-btn
-                  icon="mdi-download"
-                  round
-                  dense
-                  flat
-                  color="primary"
-                  @click.pervent="onDownloadFile(props.row.id)"
-                >
-                  <q-tooltip>ดาวน์โหลดเอกสารหลักฐาน</q-tooltip>
-                </q-btn>
-              </div> -->
-              <!-- <div v-else class="table_ellipsis2"> -->
               {{ col.value ? col.value : "-" }}
-              <!-- </div> -->
             </q-td>
           </q-tr>
         </template>
diff --git a/src/modules/04_registryPerson/components/requestEdit/02_TabIDP.vue b/src/modules/04_registryPerson/components/requestEdit/02_TabIDP.vue
index 716ebd786..b9e87fb87 100644
--- a/src/modules/04_registryPerson/components/requestEdit/02_TabIDP.vue
+++ b/src/modules/04_registryPerson/components/requestEdit/02_TabIDP.vue
@@ -192,7 +192,6 @@ function clearStatus() {
  */
 function filterOption(val: string, update: Function) {
   update(() => {
-    status.value = val ? "" : status.value;
     statusOption.value = store.optionStatusIDP.filter(
       (v: DataOption) => v.name.indexOf(val) > -1
     );
@@ -284,6 +283,7 @@ watch(
   }
 );
 
+/**  HooK lifecycle ทำงานเมื่อมีการเรียกใช้งาน Componenets */
 onMounted(() => {
   props.isIdp && fetchData();
 });
diff --git a/src/modules/04_registryPerson/components/requestEdit/Page02_DetailIDP.vue b/src/modules/04_registryPerson/components/requestEdit/Page02_DetailIDP.vue
index 056d116ac..89bc1289b 100644
--- a/src/modules/04_registryPerson/components/requestEdit/Page02_DetailIDP.vue
+++ b/src/modules/04_registryPerson/components/requestEdit/Page02_DetailIDP.vue
@@ -203,7 +203,6 @@ onMounted(() => {
       <q-card-section>
         <div class="row q-col-gutter-sm">
           <!-- สถานะ -->
-          <!-- v-if="isDone == 'PENDING'" -->
           <q-form
             class="col-12"
             greedy
diff --git a/src/modules/04_registryPerson/interface/request/SpecialSkill.ts b/src/modules/04_registryPerson/interface/request/SpecialSkill.ts
index 09f335de8..ccf4d61f9 100644
--- a/src/modules/04_registryPerson/interface/request/SpecialSkill.ts
+++ b/src/modules/04_registryPerson/interface/request/SpecialSkill.ts
@@ -3,8 +3,6 @@ interface RequestItemsObject {
   detail: string;
   remark: string;
   reference: string;
-  dateStart: Date | null;
-  dateEnd: Date | null;
   profileId: string;
 }
 
diff --git a/src/modules/04_registryPerson/views/requestEditView.vue b/src/modules/04_registryPerson/views/requestEditView.vue
index bece2c089..0ed23e4ac 100644
--- a/src/modules/04_registryPerson/views/requestEditView.vue
+++ b/src/modules/04_registryPerson/views/requestEditView.vue
@@ -2,7 +2,6 @@
 import { onBeforeMount, onMounted, ref } from "vue";
 
 import { useRoute, useRouter } from "vue-router";
-
 import { useRegistryNewDataStore } from "@/modules/04_registryPerson/store";
 
 import TabInformation from "@/modules/04_registryPerson/components/requestEdit/01_TabInformation.vue";
@@ -18,9 +17,8 @@ const isEmployee = ref<boolean>(
 );
 
 onBeforeMount(async () => {
-  isIDP.value = await (route.name?.toString() == "registryNewRequestEditEMP"
-    ? false
-    : true);
+  isIDP.value =
+    route.name?.toString() == "registryNewRequestEditEMP" ? false : true;
 });
 
 onMounted(() => {