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 e24c62a13..624cd5b60 100644
--- a/src/modules/04_registryNew/components/detail/PersonalInformation/02_NameChangeHistory.vue
+++ b/src/modules/04_registryNew/components/detail/PersonalInformation/02_NameChangeHistory.vue
@@ -1,6 +1,432 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { onMounted, ref, useAttrs } from "vue";
+import { useRoute } from "vue-router";
+import { useQuasar } from "quasar";
+import type { QTableProps } from "quasar";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+import { useCounterMixin } from "@/stores/mixin";
+import type { Pagination } from "@/modules/04_registry/interface/index/Main";
+import HistoryTable from "@/components/TableHistory.vue";
+import type { ResponseObject } from "@/components/information/interface/response/OldName";
+import type {
+  RequestItemsObject,
+  DataProps,
+} from "@/components/information/interface/request/OldName";
+
+const $q = useQuasar();
+const route = useRoute();
+const mixin = useCounterMixin();
+const attrs = ref<any>(useAttrs());
+const {
+  date2Thai,
+  success,
+  dateToISO,
+  messageError,
+  typeChangeName,
+  dialogMessage,
+  showLoader,
+  hideLoader,
+} = mixin;
+const profileId = ref<string>(route.params.id.toString());
+
+const filterSearch = ref("");
+const filterHistory = ref<string>("");
+const modalHistory = ref<boolean>(false);
+const rowsHistory = ref<RequestItemsObject[]>([]);
+const tittleHistory = ref<string>("ประวัติแก้ไขประวัติการเปลี่ยนชื่อ-นามสกุล");
+const visibleColumns = ref<string[]>([
+  "prefix",
+  "firstName",
+  "lastName",
+  "status",
+]);
+const visibleColumnsHistory = ref<String[]>([
+  "prefix",
+  "firstName",
+  "lastName",
+  "status",
+  "createdFullName",
+  "createdAt",
+]);
+
+// mock data
+const rows = ref<RequestItemsObject[]>([
+  {
+    id: "08dc2c65-c0e9-4692-8494-ab39e09aec24",
+    prefix: "นางสาว",
+    prefixId: "71ed89df-8257-43e8-8fba-0b42fb2c55e0",
+    firstName: "อรัญญาวินัย",
+    lastName: "พรไชยะสาร",
+    status: "all",
+    file: null,
+    createdFullName: "",
+    createdAt: new Date("2024-02-13T14:31:11.959404"),
+  },
+  {
+    id: "08dc2c65-c0e9-4692-8494-ab39e09aec24",
+    prefix: "นางสาว",
+    prefixId: "71ed89df-8257-43e8-8fba-0b42fb2c55e0",
+    firstName: "อรัญญาวินัย",
+    lastName: "พรไชยะสาร",
+    status: "lastName",
+    file: null,
+    createdFullName: "",
+    createdAt: new Date("2024-02-13T14:30:34.660735"),
+  },
+  {
+    id: "08dc2c65-c0e9-4692-8494-ab39e09aec24",
+    prefix: "นางสาว",
+    prefixId: "71ed89df-8257-43e8-8fba-0b42fb2c55e0",
+    firstName: "อรัญญาวินัย",
+    lastName: "พรไชยะสาร",
+    status: "lastName",
+    file: null,
+    createdFullName: "",
+    createdAt: new Date("2024-02-13T14:30:14.562741"),
+  },
+]);
+const columns = ref<QTableProps["columns"]>([
+  {
+    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: "status",
+    align: "left",
+    label: "สถานะการเปลี่ยนชื่อ",
+    sortable: true,
+    field: "status",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
+const columnsHistory = ref<QTableProps["columns"]>([
+  {
+    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: "status",
+    align: "left",
+    label: "สถานะการเปลี่ยนชื่อ",
+    sortable: true,
+    field: "status",
+    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 initialPagination = ref<Pagination>({
+  rowsPerPage: 0,
+});
+
+const paginationLabel = (start: string, end: string, total: string) => {
+  return start + "-" + end + " ใน " + total;
+};
+
+const openFile = async (val: string | null) => {
+  if (val != null) window.open(val);
+};
+
+const clickHistory = async (row: RequestItemsObject) => {
+  modalHistory.value = true;
+  // showLoader();
+  // await http
+  //   .get(config.API.profileChangeNameHisId(row.id))
+  //   .then((res) => {
+  //     let data = res.data.result;
+  //     rowsHistory.value = [];
+  //     data.map((e: ResponseObject) => {
+  //       rowsHistory.value.push({
+  //         id: e.id,
+  //         prefix: e.prefix,
+  //         prefixId: e.prefixId,
+  //         firstName: e.firstName,
+  //         lastName: e.lastName,
+  //         status: e.status,
+  //         file: e.file,
+  //         createdFullName: e.createdFullName,
+  //         createdAt: new Date(e.createdAt),
+  //       });
+  //     });
+  //   })
+  //   .catch((e) => {
+  //     messageError($q, e);
+  //   })
+  //   .finally(() => {
+  //     hideLoader();
+  //   });
+};
+
+const fetchData = async () => {
+  showLoader();
+  await http
+    .get(config.API.profileChangeNameId(profileId.value))
+    .then((res) => {
+      let data = res.data.result;
+      rows.value = [];
+      data.map((e: ResponseObject) => {
+        rows.value.push({
+          id: e.id,
+          prefix: e.prefix,
+          prefixId: e.prefixId,
+          firstName: e.firstName,
+          lastName: e.lastName,
+          status: e.status,
+          file: e.file,
+          createdFullName: e.createdFullName,
+          createdAt: new Date(e.createdAt),
+        });
+      });
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+};
+
+onMounted(async () => {
+  // await fetchData();
+});
+</script>
 <template>
-  <div>2</div>
+  <div class="row q-gutter-sm items-center">
+    <div class="toptitle col text-dark">
+      ประวัติการเปลี่ยนชื่อ-นามสกุล
+    </div>
+  
+    <div class="toptitle row ">
+      <q-input
+        dense
+        outlined
+        debounce="300"
+        class="q-ml-sm"
+        ref="filterRef"
+        v-model="filterSearch"
+        placeholder="ค้นหา"
+        style="max-width: 150px"
+      >
+        <template v-slot:append>
+          <q-icon name="search" v-if="filterSearch == ''" />
+          <q-icon
+            name="clear"
+            v-if="filterSearch !== ''"
+            @click="filterSearch = ''"
+            class="cursor-pointer"
+          />
+        </template>
+      </q-input>
+      <q-select
+        dense
+        multiple
+        outlined
+        emit-value
+        map-options
+        options-dense
+        option-value="name"
+        v-model="visibleColumns"
+        :options="columns"
+        class="gt-xs q-ml-sm"
+        style="min-width: 150px"
+        :display-value="$q.lang.table.columns"
+      />
+    </div>
+  </div>
+
+  <div>
+    <q-table
+      flat
+      dense
+      bordered
+      virtual-scroll
+      ref="table"
+      v-bind="attrs"
+      class="custom-header-table"
+      :rows="rows"
+      :columns="columns"
+      :filter="filterSearch"
+      :rows-per-page-options="[0]"
+      :pagination="initialPagination"
+      :visible-columns="visibleColumns"
+      :pagination-label="paginationLabel"
+      :virtual-scroll-sticky-size-start="48"
+    >
+      <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" class="cursor-pointer">
+          <q-td v-for="(col, index) in props.cols" :key="col.name">
+            <div v-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-btn
+              color="info"
+              flat
+              dense
+              round
+              size="14px"
+              icon="mdi-history"
+              @click="clickHistory(props.row)"
+            />
+          </q-td>
+        </q-tr>
+      </template>
+    </q-table>
+  </div>
+
+  <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"
+    :history="true"
+  >
+  </history-table>
 </template>
 
-<style scoped></style>
+<style scoped>
+.custom-header-table {
+  max-height: 64vh;
+
+  .q-table tr:nth-child(odd) td {
+    background: white;
+  }
+
+  .q-table tr:nth-child(even) td {
+    background: #f8f8f8;
+  }
+
+  .q-table thead tr {
+    background: #ecebeb;
+  }
+
+  .q-table thead tr th {
+    position: sticky;
+    z-index: 1;
+  }
+
+  /* this will be the loading indicator */
+  .q-table thead tr:last-child th {
+    /* height of all previous header rows */
+    top: 48px;
+  }
+
+  .q-table thead tr:first-child th {
+    top: 0;
+  }
+}
+</style>