diff --git a/src/modules/04_registryNew/components/detail/PersonalInformation/01_Profile.vue b/src/modules/04_registryNew/components/detail/PersonalInformation/01_Profile.vue
index 761a2305c..c3a48511d 100644
--- a/src/modules/04_registryNew/components/detail/PersonalInformation/01_Profile.vue
+++ b/src/modules/04_registryNew/components/detail/PersonalInformation/01_Profile.vue
@@ -1,19 +1,23 @@
 <script setup lang="ts">
 import { onMounted, ref } from "vue";
 import { useQuasar } from "quasar";
+import type { QTableColumn, QForm } from "quasar";
 import http from "@/plugins/http";
 import config from "@/app.config";
+
 import { useCounterMixin } from "@/stores/mixin";
 import { useProfileDataStore } from "@/modules/04_registry/store";
-
 import type { InformationOps } from "@/modules/04_registry/interface/index/Main";
+import DialogHeader from "@/modules/04_registry/components/DialogHeader.vue";
+import type {
+  RequestItemsHistoryObject,
+  Columns,
+} from "@/modules/04_registry/interface/request/Information";
 import type {
   Information,
   DataOption,
 } from "@/modules/04_registry/components/profileType";
-
-import DialogHeader from "@/modules/04_registry/components/DialogHeader.vue";
-import DialogFooter from "@/modules/04_registry/components/DialogFooter.vue";
+import HistoryTable from "@/components/TableHistory.vue";
 
 const $q = useQuasar();
 const mixin = useCounterMixin();
@@ -22,6 +26,10 @@ const { showLoader, hideLoader, date2Thai, messageError } = mixin;
 
 const modal = ref<boolean>(false);
 const myForm = ref<any>();
+const rowsHistory = ref<RequestItemsHistoryObject[]>([]);
+const tittleHistory = ref<string>("ประวัติแก้ไขข้อมูลส่วนตัว");
+const filterHistory = ref<string>("");
+const modalHistory = ref<boolean>(false);
 
 const Ops = ref<InformationOps>({
   prefixOps: [],
@@ -100,8 +108,206 @@ const dataLabel = {
   lastName: "นามสกุล",
 };
 
+const columnsHistory = ref<QTableColumn[]>([
+  {
+    name: "citizenId",
+    align: "left",
+    label: "เลขประจำตัวประชาชน",
+    sortable: true,
+    field: "citizenId",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "prefix",
+    align: "left",
+    label: "คำนำหน้าชื่อ",
+    sortable: true,
+    field: "prefix",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "firstName",
+    align: "left",
+    label: "ชื่อ",
+    sortable: true,
+    field: "firstName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "lastName",
+    align: "left",
+    label: "นามสกุล",
+    sortable: true,
+    field: "lastName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "birthDate",
+    align: "left",
+    label: "วัน/เดือน/ปี เกิด",
+    sortable: true,
+    field: "birthDate",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "gender",
+    align: "left",
+    label: "เพศ",
+    sortable: true,
+    field: "gender",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "relationship",
+    align: "left",
+    label: "สถานภาพ",
+    sortable: true,
+    field: "relationship",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "bloodGroup",
+    align: "left",
+    label: "หมู่เลือด",
+    sortable: true,
+    field: "bloodGroup",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "nationality",
+    align: "left",
+    label: "สัญชาติ",
+    sortable: true,
+    field: "nationality",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "race",
+    align: "left",
+    label: "เชื้อชาติ",
+    sortable: true,
+    field: "race",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "religion",
+    align: "left",
+    label: "ศาสนา",
+    sortable: true,
+    field: "religion",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "telephoneNumber",
+    align: "left",
+    label: "เบอร์โทร",
+    sortable: true,
+    field: "telephoneNumber",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "employeeType",
+    align: "left",
+    label: "ประเภทการจ้าง",
+    sortable: true,
+    field: "employeeType",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "employeeClass",
+    align: "left",
+    label: "ประเภทลูกจ้าง",
+    sortable: true,
+    field: "employeeClass",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "createdFullName",
+    align: "left",
+    label: "ผู้ดำเนินการ",
+    sortable: true,
+    field: "createdFullName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "createdAt",
+    align: "left",
+    label: "วันที่แก้ไข",
+    sortable: true,
+    field: "createdAt",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
+
+const visibleColumnsHistory = ref<String[]>([
+  "citizenId",
+  "prefix",
+  "firstName",
+  "lastName",
+  "birthDate",
+  "gender",
+  "relationship",
+  "bloodGroup",
+  "nationality",
+  "race",
+  "religion",
+  "telephoneNumber",
+  "employeeType",
+  "employeeClass",
+  "createdFullName",
+  "createdAt",
+]);
+
 // get person detail list
-const fetchPerson = async () => {
+async function fetchPerson() {
   // showLoader();
   await http
     .get(config.API.person)
@@ -162,9 +368,9 @@ const fetchPerson = async () => {
       // hideLoader();
       profileStore.isLoad++;
     });
-};
+}
 
-const filterSelector = (val: any, update: Function, refData: string) => {
+function filterSelector(val: any, update: Function, refData: string) {
   switch (refData) {
     case "prefixOps":
       update(() => {
@@ -219,7 +425,54 @@ const filterSelector = (val: any, update: Function, refData: string) => {
     default:
       break;
   }
-};
+}
+
+async function clickHistory() {
+  modalHistory.value = true;
+  // showLoader();
+  // await http
+  //   .get(config.API.profileInforHisId(route.params.id.toString()))
+  //   .then((res) => {
+  //     let data = res.data.result;
+  //     rowsHistory.value = [];
+  //     data.map((e: RequestItemsHistoryObject) => {
+  //       rowsHistory.value.push({
+  //         citizenId: e.citizenId,
+  //         prefix: e.prefix,
+  //         firstName: e.firstName,
+  //         lastName: e.lastName,
+  //         birthDate: new Date(e.birthDate),
+  //         gender: e.gender,
+  //         relationship: e.relationship,
+  //         bloodGroup: e.bloodGroup,
+  //         nationality: e.nationality,
+  //         race: e.race,
+  //         religion: e.religion,
+  //         telephoneNumber: e.telephoneNumber,
+  //         employeeType:
+  //           e.employeeType == "gov"
+  //             ? "งบประมาณเงินอุดหนุนรัฐบาล"
+  //             : e.employeeType == "bkk"
+  //             ? "งบประมาณกรุงเทพมหานคร"
+  //             : "-",
+  //         employeeClass:
+  //           e.employeeClass == "perm"
+  //             ? "ลูกจ้างประจำ"
+  //             : e.employeeClass == "temp"
+  //             ? "ลูกจ้างชั่วคราว"
+  //             : "-",
+  //         createdFullName: e.createdFullName,
+  //         createdAt: new Date(e.createdAt),
+  //       });
+  //     });
+  //   })
+  //   .catch((e) => {
+  //     messageError($q, e);
+  //   })
+  //   .finally(() => {
+  //     hideLoader();
+  //   });
+}
 
 function onSubmit() {
   myForm.value.validate().then(async (result: boolean) => {
@@ -236,11 +489,10 @@ onMounted(async () => {
 });
 </script>
 <template>
-  <div class="row q-pt-sm q-pb-lg justyfy-between items-center">
-    <span class="col text-subtitle1 text-weight-bold text-dark">
-      ประวัติส่วนตัว
-    </span>
-    <div class="col text-right">
+  <div class="row q-gutter-sm items-center">
+    <div class="toptitle col text-dark">ประวัติส่วนตัว</div>
+
+    <div class="toptitle col text-right">
       <q-btn
         flat
         round
@@ -250,7 +502,7 @@ onMounted(async () => {
       >
         <q-tooltip>แก้ไขข้อมูล</q-tooltip>
       </q-btn>
-      <q-btn flat round icon="mdi-history" color="info">
+      <q-btn flat round icon="mdi-history" color="info" @click="clickHistory">
         <q-tooltip>ประวัติข้อมูลส่วนตัว</q-tooltip>
       </q-btn>
     </div>
@@ -352,7 +604,10 @@ onMounted(async () => {
   <q-dialog v-model="modal" persistent>
     <q-card style="width: 600px">
       <q-form ref="myForm" @submit="onSubmit">
-        <DialogHeader tittle="แก้ไขประวัติส่วนตัว" :close="() => modal = false" />
+        <DialogHeader
+          tittle="แก้ไขประวัติส่วนตัว"
+          :close="() => (modal = false)"
+        />
         <q-separator />
         <q-card-section class="q-p-sm">
           <div class="row col-12 q-col-gutter-x-xs q-col-gutter-y-xs">
@@ -591,15 +846,46 @@ onMounted(async () => {
             flat
             round
             type="submit"
-            icon="mdi-pencil-outline"
-            color="primary"
+            icon="mdi-content-save-outline"
+            color="secondary"
           >
-            <q-tooltip>แก้ไขข้อมูล</q-tooltip>
+            <q-tooltip>บันทึก</q-tooltip>
           </q-btn>
         </div>
       </q-form>
     </q-card>
   </q-dialog>
+
+  <history-table
+    :rows="rowsHistory"
+    :columns="columnsHistory"
+    :filter="filterHistory"
+    :visible-columns="visibleColumnsHistory"
+    v-model:modal="modalHistory"
+    v-model:inputfilter="filterHistory"
+    v-model:inputvisible="visibleColumnsHistory"
+    v-model:tittle="tittleHistory"
+  >
+    <template #columns="props">
+      <q-tr :props="props">
+        <q-td v-for="col in props.cols" :key="col.name" :props="props">
+          <div
+            v-if="col.name == 'birthDate' || col.name == 'createdAt'"
+            class="table_ellipsis"
+          >
+            {{ date2Thai(col.value) }}
+          </div>
+          <div v-else class="table_ellipsis">
+            {{ col.value }}
+          </div>
+        </q-td>
+      </q-tr>
+    </template>
+  </history-table>
 </template>
 
-<style scoped></style>
+<style lang="scss">
+.modalfix {
+  position: fixed !important;
+}
+</style>
diff --git a/src/modules/04_registryNew/components/detail/PersonalInformation/02_NameChangeHistory.vue b/src/modules/04_registryNew/components/detail/PersonalInformation/02_NameChangeHistory.vue
index 624cd5b60..760c2c835 100644
--- a/src/modules/04_registryNew/components/detail/PersonalInformation/02_NameChangeHistory.vue
+++ b/src/modules/04_registryNew/components/detail/PersonalInformation/02_NameChangeHistory.vue
@@ -210,11 +210,11 @@ const paginationLabel = (start: string, end: string, total: string) => {
   return start + "-" + end + " ใน " + total;
 };
 
-const openFile = async (val: string | null) => {
+async function openFile(val: string | null) {
   if (val != null) window.open(val);
-};
+}
 
-const clickHistory = async (row: RequestItemsObject) => {
+async function clickHistory(row: RequestItemsObject) {
   modalHistory.value = true;
   // showLoader();
   // await http
@@ -242,9 +242,9 @@ const clickHistory = async (row: RequestItemsObject) => {
   //   .finally(() => {
   //     hideLoader();
   //   });
-};
+}
 
-const fetchData = async () => {
+async function fetchData() {
   showLoader();
   await http
     .get(config.API.profileChangeNameId(profileId.value))
@@ -271,7 +271,7 @@ const fetchData = async () => {
     .finally(() => {
       hideLoader();
     });
-};
+}
 
 onMounted(async () => {
   // await fetchData();
@@ -279,11 +279,9 @@ onMounted(async () => {
 </script>
 <template>
   <div class="row q-gutter-sm items-center">
-    <div class="toptitle col text-dark">
-      ประวัติการเปลี่ยนชื่อ-นามสกุล
-    </div>
-  
-    <div class="toptitle row ">
+    <div class="toptitle col text-dark">ประวัติการเปลี่ยนชื่อ-นามสกุล</div>
+
+    <div class="toptitle row">
       <q-input
         dense
         outlined
@@ -395,6 +393,33 @@ onMounted(async () => {
     v-model:tittle="tittleHistory"
     :history="true"
   >
+    <template #columns="props">
+      <q-tr :props="props">
+        <q-td v-for="col in props.cols" :key="col.name" :props="props">
+          <div v-if="col.name == 'createdAt'" class="table_ellipsis">
+            {{ date2Thai(col.value) }}
+          </div>
+          <div v-else-if="col.name == 'status'" class="table_ellipsis">
+            {{ typeChangeName(col.value) }}
+          </div>
+          <div v-else class="table_ellipsis">
+            {{ col.value }}
+          </div>
+        </q-td>
+        <q-td auto-width>
+          <q-btn
+            v-if="props.row.file != null"
+            color="green"
+            flat
+            dense
+            round
+            size="14px"
+            icon="mdi-file-document-outline"
+            @click="openFile(props.row.file)"
+          />
+        </q-td>
+      </q-tr>
+    </template>
   </history-table>
 </template>