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>
 
diff --git a/src/modules/04_registryNew/components/detail/PersonalInformation/04_Family.vue b/src/modules/04_registryNew/components/detail/PersonalInformation/04_Family.vue
index 1c6623747..de10f5f84 100644
--- a/src/modules/04_registryNew/components/detail/PersonalInformation/04_Family.vue
+++ b/src/modules/04_registryNew/components/detail/PersonalInformation/04_Family.vue
@@ -6,7 +6,7 @@ import { QForm, useQuasar } from "quasar";
 
 const mixin = useCounterMixin();
 const $q = useQuasar();
-const { dialogConfirm, success, messageError, showLoader, hideLoader } = mixin;
+const { dialogConfirm } = mixin;
 
 const formRef = ref<QForm | null>(null);
 
@@ -16,7 +16,7 @@ const fatherPrefixRef = ref<any>(null);
 const fatherFirstNameRef = ref<any>(null);
 const fatherLastNameRef = ref<any>(null);
 const fatherData = reactive({
-  isHaveInfo: "0",
+  isHaveInfo: 0,
   isDead: false,
   citizenId: null,
   prefix: null,
@@ -26,7 +26,7 @@ const fatherData = reactive({
   job: null,
 });
 const motherData = reactive({
-  isHaveInfo: "0",
+  isHaveInfo: 0,
   isDead: false,
   citizenId: null,
   prefix: null,
@@ -36,7 +36,7 @@ const motherData = reactive({
   job: null,
 });
 const spouseData = reactive({
-  isHave: "0",
+  isHave: 0,
   isDead: false,
   citizenId: null,
   prefix: null,
@@ -69,7 +69,6 @@ function closeHistoryDialog() {
 }
 
 function validateForm() {
-  console.log("test");
   onSubmit();
 }
 
@@ -105,8 +104,8 @@ function deleteChildren(items: any) {
 
 <template>
   <div>
-    <div class="flex justify-between text-center">
-      <div class="text-h6 text-center">ข้อมูลครอบครัว</div>
+    <div class="flex justify-between">
+      <div class="toptitle col text-dark">ข้อมูลครอบครัว</div>
       <div>
         <q-btn
           round
@@ -217,7 +216,7 @@ function deleteChildren(items: any) {
           v-model="motherData.isHaveInfo"
           checked-icon="task_alt"
           unchecked-icon="panorama_fish_eye"
-          val="1"
+          :val="1"
           :disable="true"
           label="มีข้อมูล"
           dense
@@ -227,7 +226,7 @@ function deleteChildren(items: any) {
           v-model="motherData.isHaveInfo"
           checked-icon="task_alt"
           unchecked-icon="panorama_fish_eye"
-          val="0"
+          :val="0"
           :disable="true"
           color="red"
           label="ไม่มีข้อมูล"
@@ -465,7 +464,7 @@ function deleteChildren(items: any) {
                 v-model="fatherData.isHaveInfo"
                 checked-icon="task_alt"
                 unchecked-icon="panorama_fish_eye"
-                val="1"
+                :val="1"
                 label="มีข้อมูล"
                 dense
                 color="primary"
@@ -474,14 +473,14 @@ function deleteChildren(items: any) {
                 v-model="fatherData.isHaveInfo"
                 checked-icon="task_alt"
                 unchecked-icon="panorama_fish_eye"
-                val="0"
+                :val="0"
                 color="red"
                 label="ไม่มีข้อมูล"
                 dense
               />
               <q-separator color="grey-4" vertical />
               <q-checkbox
-                :disable="fatherData.isHaveInfo === '0' ? true : false"
+                :disable="!fatherData.isHaveInfo"
                 outline
                 v-model="fatherData.isDead"
                 label="เสียชีวิตแล้ว"
@@ -492,7 +491,7 @@ function deleteChildren(items: any) {
           </div>
           <div class="flex q-gutter-sm">
             <q-input
-              :disable="fatherData.isHaveInfo === '0' ? true : false"
+              :disable="!fatherData.isHaveInfo"
               class="col"
               outlined
               hide-bottom-space
@@ -503,7 +502,7 @@ function deleteChildren(items: any) {
               mask="#############"
             />
             <q-select
-              :disable="fatherData.isHaveInfo === '0' ? true : false"
+              :disable="!fatherData.isHaveInfo"
               class="col"
               outlined
               lazy-rules
@@ -512,9 +511,10 @@ function deleteChildren(items: any) {
               :options="fatherData.optionPrefix"
               :rules="[(val) => !!val || 'กรุณาเลือกคำนำหน้าชื่อ']"
               label="คำนำหน้าชื่อ"
+              hidden-space
             />
             <q-input
-              :disable="fatherData.isHaveInfo === '0' ? true : false"
+              :disable="!fatherData.isHaveInfo"
               class="col"
               outlined
               dense
@@ -522,9 +522,10 @@ function deleteChildren(items: any) {
               v-model="fatherData.firstName"
               :rules="[(val) => !!val || 'กรุณากรอกชื่อ']"
               label="ชื่อ"
+              hidden-space
             />
             <q-input
-              :disable="fatherData.isHaveInfo === '0' ? true : false"
+              :disable="!fatherData.isHaveInfo"
               class="col"
               outlined
               dense
@@ -534,7 +535,7 @@ function deleteChildren(items: any) {
               label="นามสกุล"
             />
             <q-input
-              :disable="fatherData.isHaveInfo === '0' ? true : false"
+              :disable="!fatherData.isHaveInfo"
               class="col"
               outlined
               dense
@@ -549,7 +550,7 @@ function deleteChildren(items: any) {
                 v-model="motherData.isHaveInfo"
                 checked-icon="task_alt"
                 unchecked-icon="panorama_fish_eye"
-                val="1"
+                :val="1"
                 label="มีข้อมูล"
                 dense
                 color="primary"
@@ -558,14 +559,14 @@ function deleteChildren(items: any) {
                 v-model="motherData.isHaveInfo"
                 checked-icon="task_alt"
                 unchecked-icon="panorama_fish_eye"
-                val="0"
+                :val="0"
                 color="red"
                 label="ไม่มีข้อมูล"
                 dense
               />
               <q-separator color="grey-4" vertical />
               <q-checkbox
-                :disable="motherData.isHaveInfo === '0' ? true : false"
+                :disable="!motherData.isHaveInfo"
                 outline
                 v-model="motherData.isDead"
                 label="เสียชีวิตแล้ว"
@@ -576,7 +577,7 @@ function deleteChildren(items: any) {
           </div>
           <div class="flex q-gutter-sm">
             <q-input
-              :disable="motherData.isHaveInfo === '0' ? true : false"
+              :disable="!motherData.isHaveInfo"
               class="col"
               outlined
               hide-bottom-space
@@ -587,7 +588,7 @@ function deleteChildren(items: any) {
               mask="#############"
             />
             <q-select
-              :disable="motherData.isHaveInfo === '0' ? true : false"
+              :disable="!motherData.isHaveInfo"
               class="col"
               outlined
               dense
@@ -598,7 +599,7 @@ function deleteChildren(items: any) {
               label="คำนำหน้าชื่อ"
             />
             <q-input
-              :disable="motherData.isHaveInfo === '0' ? true : false"
+              :disable="!motherData.isHaveInfo"
               class="col"
               outlined
               :rules="[(val) => !!val || 'กรุณากรอกชื่อ']"
@@ -608,7 +609,7 @@ function deleteChildren(items: any) {
               label="ชื่อ"
             />
             <q-input
-              :disable="motherData.isHaveInfo === '0' ? true : false"
+              :disable="!motherData.isHaveInfo"
               :rules="[(val) => !!val || 'กรุณากรอกนามสกุล']"
               class="col"
               outlined
@@ -618,7 +619,7 @@ function deleteChildren(items: any) {
               label="นามสกุล"
             />
             <q-input
-              :disable="motherData.isHaveInfo === '0' ? true : false"
+              :disable="!motherData.isHaveInfo"
               class="col"
               outlined
               dense
@@ -633,7 +634,7 @@ function deleteChildren(items: any) {
                 v-model="spouseData.isHave"
                 checked-icon="task_alt"
                 unchecked-icon="panorama_fish_eye"
-                val="1"
+                :val="1"
                 label="มี"
                 dense
                 color="primary"
@@ -642,14 +643,14 @@ function deleteChildren(items: any) {
                 v-model="spouseData.isHave"
                 checked-icon="task_alt"
                 unchecked-icon="panorama_fish_eye"
-                val="0"
+                :val="0"
                 color="red"
                 label="ไม่มี"
                 dense
               />
               <q-separator color="grey-4" vertical />
               <q-checkbox
-                :disable="spouseData.isHave === '0' ? true : false"
+                :disable="!spouseData.isHave"
                 outline
                 v-model="spouseData.isDead"
                 label="เสียชีวิตแล้ว"
@@ -661,7 +662,7 @@ function deleteChildren(items: any) {
           <div class="flex q-gutter-sm">
             <q-input
               class="col"
-              :disable="spouseData.isHave === '0' ? true : false"
+              :disable="!spouseData.isHave"
               outlined
               hide-bottom-space
               dense
@@ -672,7 +673,7 @@ function deleteChildren(items: any) {
             />
             <q-select
               class="col"
-              :disable="spouseData.isHave === '0' ? true : false"
+              :disable="!spouseData.isHave"
               outlined
               dense
               v-model="spouseData.prefix"
@@ -682,7 +683,7 @@ function deleteChildren(items: any) {
             />
             <q-input
               class="col"
-              :disable="spouseData.isHave === '0' ? true : false"
+              :disable="!spouseData.isHave"
               outlined
               dense
               :rules="[(val) => !!val || 'กรุณากรอกชื่อ']"
@@ -692,7 +693,7 @@ function deleteChildren(items: any) {
             <q-input
               class="col"
               :rules="[(val) => !!val || 'กรุณากรอกนามสกุล']"
-              :disable="spouseData.isHave === '0' ? true : false"
+              :disable="!spouseData.isHave"
               outlined
               dense
               v-model="spouseData.lastName"
@@ -700,7 +701,7 @@ function deleteChildren(items: any) {
             />
             <q-input
               class="col"
-              :disable="spouseData.isHave === '0' ? true : false"
+              :disable="!spouseData.isHave"
               outlined
               dense
               v-model="spouseData.job"
diff --git a/src/modules/04_registryNew/components/detail/PersonalInformation/05_Education.vue b/src/modules/04_registryNew/components/detail/PersonalInformation/05_Education.vue
index 884511056..b1ff80fe4 100644
--- a/src/modules/04_registryNew/components/detail/PersonalInformation/05_Education.vue
+++ b/src/modules/04_registryNew/components/detail/PersonalInformation/05_Education.vue
@@ -1,6 +1,817 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { ref, reactive, watch } from "vue";
+import moment from "moment";
+import dialogHeader from "@/components/DialogHeader.vue";
+import type { QTableProps } from "quasar";
+import { useCounterMixin } from "@/stores/mixin";
+import { QForm, useQuasar } from "quasar";
+
+const mixin = useCounterMixin();
+const $q = useQuasar();
+const { dialogConfirm, date2Thai } = mixin;
+
+const addDataDialog = ref<boolean>(false);
+const mode = ref<string>("table");
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "level",
+    align: "left",
+    label: "ระดับศึกษา",
+    sortable: true,
+    field: "level",
+    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",
+    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",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "graduateDate",
+    align: "left",
+    label: "วันที่สำเร็จการศึกษา",
+    sortable: true,
+    field: "graduateDate",
+    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",
+    sort: (a: string, b: string) =>
+      a.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" }),
+  },
+]);
+const isDate = ref<string>("false");
+const educationOption = ["ใช่", "ไม่ใช่"];
+
+const educationData = reactive({
+  level: "",
+  institute: "",
+  startYear: new Date().getFullYear(),
+  finishYear: new Date().getFullYear(),
+  graduateDate: new Date(),
+  startDate: new Date(),
+  finishDate: new Date(),
+  isEducation: "",
+  degree: "",
+  field: "",
+  fundName: "",
+  gpa: null,
+  country: "",
+  other: "",
+  duration: "",
+  durationYear: "",
+  note: "",
+});
+
+const row = [
+  {
+    level: "ประกาศนียบัตรบัณฑิต",
+    institute: "เชียงใหม่วิทย์",
+    degree: "ปริญญาตรี",
+    field: "วิศวะคอม",
+    gpa: "",
+    country: "อังกฤษ",
+    duration: "3 ปี",
+    durationYear: "4 ปี",
+    other: "อบต เชียงใหม่",
+    fundName: "ทุนรัฐบาล",
+    isEducation: "ปริญญาตรี",
+    finishDate: new Date(),
+    startDate: new Date(),
+    graduateDate: new Date(),
+  },
+  {
+    level: "ประกาศนียบัตรบัณฑิต",
+    institute: "โปลิวิทยาคม",
+    degree: "ปริญญาตรี",
+    field: "วิศวะคอม",
+    gpa: "3.8",
+    country: "อังกฤษ",
+    duration: "3 ปี",
+    durationYear: "4 ปี",
+    other: "อบต เชียงใหม่",
+    fundName: "ทุนรัฐบาล",
+    isEducation: "ปริญญาตรี",
+    finishDate: new Date(),
+    startDate: new Date(),
+    graduateDate: new Date(),
+  },
+  {
+    level: "ประกาศนียบัตรบัณฑิต",
+    institute: "โรงเรียนวัฒโน",
+    degree: "ปริญญาตรี",
+    field: "วิศวะคอม",
+    gpa: "3.8",
+    country: "อังกฤษ",
+    duration: "3 ปี",
+    durationYear: "4 ปี",
+    other: "อบต เชียงใหม่",
+    fundName: "ทุนรัฐบาล",
+    isEducation: "ปริญญาตรี",
+    finishDate: new Date(),
+    startDate: new Date(),
+    graduateDate: new Date(),
+  },
+  {
+    level: "ประกาศนียบัตรบัณฑิต",
+    institute: "โรงเรียนวัฒโน",
+    degree: "ปริญญาตรี",
+    field: "วิศวะคอม",
+    gpa: "3.8",
+    country: "อังกฤษ",
+    duration: "3 ปี",
+    durationYear: "4 ปี",
+    other: "อบต เชียงใหม่",
+    fundName: "ทุนรัฐบาล",
+    isEducation: "ปริญญาตรี",
+    finishDate: new Date(),
+    startDate: new Date(),
+    graduateDate: new Date(),
+  },
+];
+
+const visibleColumns = ref<string[]>([
+  "level",
+  "institute",
+  "degree",
+  "field",
+  "gpa",
+  "country",
+  "duration",
+  "durationYear",
+  "other",
+  "fundName",
+  "isEducation",
+  "finishDate",
+  "startDate",
+  "graduateDate",
+]);
+
+function validateForm() {
+  onSubmit();
+}
+
+async function onSubmit() {
+  dialogConfirm(
+    $q,
+    async () => {
+      closeDialog();
+    },
+    "ยืนยันการบันทึกข้อมูล",
+    "ต้องการยืนยันการบันทึกข้อมูลนี้หรือไม่ ?"
+  );
+}
+
+function closeDialog() {
+  addDataDialog.value = false;
+}
+
+watch(
+  () => isDate.value,
+  () => {
+    if (isDate.value === "true") {
+      educationData.startDate = new Date(`${educationData.startYear}`);
+      educationData.finishDate = new Date(`${educationData.finishYear}`);
+    } else {
+      educationData.startYear = parseInt(
+        moment(educationData.startDate).format("YYYY")
+      );
+      educationData.finishYear = parseInt(
+        moment(educationData.finishDate).format("YYYY")
+      );
+    }
+  }
+);
+</script>
+
 <template>
-  <div>5</div>
+  <div class="toptitle col text-dark">ประวัติการศึกษา</div>
+  <q-toolbar style="padding: 0px">
+    <q-btn
+      round
+      flat
+      color="primary"
+      icon="add"
+      size="16px"
+      @click="addDataDialog = true"
+    >
+      <q-tooltip>เพิ่มข้อมูล</q-tooltip></q-btn
+    >
+
+    <q-space />
+    <q-select
+      v-if="mode === 'table'"
+      v-model="visibleColumns"
+      multiple
+      outlined
+      dense
+      options-dense
+      :display-value="$q.lang.table.columns"
+      emit-value
+      map-options
+      :options="columns"
+      option-value="name"
+      options-cover
+      style="min-width: 150px"
+      class="q-mr-sm"
+    />
+
+    <q-btn-toggle
+      v-model="mode"
+      dense
+      class="no-shadow"
+      toggle-color="grey-4"
+      :options="[
+        { value: 'table', slot: 'table' },
+        { value: 'card', slot: 'card' },
+      ]"
+    >
+      <template v-slot:table>
+        <q-icon
+          name="format_list_bulleted"
+          size="24px"
+          :style="{
+            color: mode === 'table' ? '#787B7C' : '#C9D3DB',
+          }"
+        />
+      </template>
+
+      <template v-slot:card>
+        <q-icon
+          name="mdi-view-grid-outline"
+          size="24px"
+          :style="{
+            color: mode === 'card' ? '#787B7C' : '#C9D3DB',
+          }"
+        />
+      </template>
+    </q-btn-toggle>
+  </q-toolbar>
+
+  <d-table
+    :grid="mode === 'card'"
+    ref="table"
+    :columns="columns"
+    :rows="row"
+    row-key="name"
+    flat
+    bordered
+    :paging="true"
+    dense
+    :rows-per-page-options="[20, 50, 100]"
+    class="custom-header-table"
+    :visible-columns="visibleColumns"
+  >
+    <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" v-if="mode === 'table'">
+      <q-tr :props="props" class="cursor-pointer">
+        <q-td v-for="col in props.cols" :key="col.id">
+          <div
+            v-if="
+              col.name === 'startDate' ||
+              col.name === 'finishDate' ||
+              col.name === 'graduateDate'
+            "
+          >
+            {{ col.value ? date2Thai(col.value) : "-" }}
+          </div>
+          <div v-else>
+            {{ col.value }}
+          </div>
+        </q-td>
+        <q-td auto-width>
+          <q-btn color="info" flat dense round size="14px" icon="mdi-history" />
+        </q-td>
+      </q-tr>
+    </template>
+    <template v-slot:item="props" v-else>
+      <div
+        class="q-pa-xs col-xs-12 col-sm-6 col-md-4 col-lg-3 grid-style-transition"
+      >
+        <q-card bordered>
+          <q-card-actions align="right">
+            <q-btn flat round color="primary" icon="edit">
+              <q-tooltip>แก่ไขข้อมุล</q-tooltip>
+            </q-btn>
+            <q-btn flat round color="blue" icon="history">
+              <q-tooltip>ประวัติบันทึกวันที่ไม่ได้รับเงินเดือนฯ</q-tooltip>
+            </q-btn>
+          </q-card-actions>
+          <q-separator />
+          <q-list>
+            <q-item
+              v-for="col in props.cols.filter((col) => col.name !== 'desc')"
+              :key="col.name"
+            >
+              <q-item-section>
+                <q-item-label>{{ col.label }}</q-item-label>
+              </q-item-section>
+              <q-item-section side>
+                <q-item-label
+                  caption
+                  v-if="
+                    col.name === 'startDate' ||
+                    col.name === 'finishDate' ||
+                    col.name === 'graduateDate'
+                  "
+                >
+                  {{ col.value ? date2Thai(col.value) : "-" }}
+                </q-item-label>
+
+                <q-item-label caption v-else>{{ col.value }}</q-item-label>
+              </q-item-section>
+            </q-item>
+          </q-list>
+        </q-card>
+      </div>
+    </template>
+  </d-table>
+
+  <q-dialog v-model="addDataDialog" class="dialog" persistent>
+    <q-card style="min-width: 40%" class="bg-grey-11">
+      <q-form @submit.prevent greedy @validation-success="validateForm">
+        <q-card-section class="flex justify-between" style="padding: 0">
+          <dialog-header tittle="เพิ่มประวัติการศึกษา" :close="closeDialog" />
+        </q-card-section>
+        <q-separator color="grey-4" />
+        <div class="col">
+          <q-card-section class="row q-gutter-sm">
+            <q-input
+              outlined
+              v-model="educationData.level"
+              label="ระดับการศึกษา"
+              bg-color="white"
+              class="col"
+              dense
+              :rules="[(val) => !!val || `${'กรุณากรอกระดับการศึกษา'}`]"
+              hide-bottom-space
+            />
+            <q-input
+              outlined
+              v-model="educationData.institute"
+              label="สถานศึกษา"
+              bg-color="white"
+              class="col"
+              dense
+              :rules="[(val) => !!val || `${'กรุณากรอกสถานศึกษา'}`]"
+              hide-bottom-space
+            />
+          </q-card-section>
+          <q-card flat bordered class="q-px-sm q-mx-md q-mb q-pb-sm borderCard">
+            <div class="row col-12 q-gutter-md q-py-sm text-grey-7">
+              <q-radio
+                v-model="isDate"
+                checked-icon="task_alt"
+                unchecked-icon="panorama_fish_eye"
+                val="false"
+                label="ปี"
+                dense
+              />
+              <q-radio
+                v-model="isDate"
+                checked-icon="task_alt"
+                unchecked-icon="panorama_fish_eye"
+                val="true"
+                label="วัน/เดือน/ปี"
+                dense
+              />
+            </div>
+            <div v-if="isDate === 'false'" class="row q-gutter-sm">
+              <datepicker
+                menu-class-name="modalfix"
+                v-model="educationData.startYear"
+                :locale="'th'"
+                autoApply
+                class="col"
+                year-picker
+                :enableTimePicker="false"
+                @update:modelValue="educationData.startYear"
+              >
+                <template #year="{ year }">{{ year + 543 }}</template>
+                <template #year-overlay-value="{ value }">{{
+                  parseInt(value + 543)
+                }}</template>
+                <template #trigger>
+                  <q-input
+                    dense
+                    lazy-rules
+                    outlined
+                    hide-bottom-space
+                    :model-value="educationData.startYear + 543"
+                    :rules="[
+                      (val) => !!val || `${'กรุณาเลือกปีที่เริ่มต้นศึกษา'}`,
+                    ]"
+                    :label="`${'ปีที่เริ่มต้นศึกษา'}`"
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        style="color: var(--q-primary)"
+                      >
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+              <datepicker
+                menu-class-name="modalfix"
+                v-model="educationData.finishYear"
+                :locale="'th'"
+                autoApply
+                class="col"
+                year-picker
+                :enableTimePicker="false"
+                @update:modelValue="educationData.finishYear"
+              >
+                <template #year="{ year }">{{ year + 543 }}</template>
+                <template #year-overlay-value="{ value }">{{
+                  parseInt(value + 543)
+                }}</template>
+                <template #trigger>
+                  <q-input
+                    dense
+                    lazy-rules
+                    outlined
+                    hide-bottom-space
+                    :model-value="educationData.finishYear + 543"
+                    :rules="[
+                      (val) => !!val || `${'กรุณาเลือกปีที่จบการศึกษา'}`,
+                    ]"
+                    :label="`${'ปีที่จบการศึกษา'}`"
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        style="color: var(--q-primary)"
+                      >
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
+            <div v-if="isDate === 'true'" class="row q-gutter-sm">
+              <datepicker
+                class="col"
+                menu-class-name="modalfix"
+                v-model="educationData.startDate"
+                :locale="'th'"
+                autoApply
+                :enableTimePicker="false"
+                week-start="0"
+              >
+                <template #year="{ year }">{{ year + 543 }}</template>
+                <template #year-overlay-value="{ value }">{{
+                  parseInt(value + 543)
+                }}</template>
+                <template #trigger>
+                  <q-input
+                    outlined
+                    dense
+                    lazy-rules
+                    :model-value="date2Thai(educationData.startDate)"
+                    :rules="[
+                      (val) => !!val || `${'กรุณาเลือกวันที่เริ่มต้นศึกษา'}`,
+                    ]"
+                    hide-bottom-space
+                    :label="`${'วัน/เดือน/ปี ที่เริ่มต้นศึกษา'}`"
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        color="primary"
+                      >
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+              <datepicker
+                menu-class-name="modalfix"
+                v-model="educationData.finishDate"
+                :locale="'th'"
+                class="col"
+                autoApply
+                :enableTimePicker="false"
+                week-start="0"
+              >
+                <template #year="{ year }">{{ year + 543 }}</template>
+                <template #year-overlay-value="{ value }">{{
+                  parseInt(value + 543)
+                }}</template>
+                <template #trigger>
+                  <q-input
+                    outlined
+                    dense
+                    lazy-rules
+                    :model-value="date2Thai(educationData.finishDate)"
+                    :rules="[
+                      (val) => !!val || `${'กรุณาเลือกวันที่จบการศึกษา'}`,
+                    ]"
+                    hide-bottom-space
+                    :label="`${'วัน/เดือน/ปี ที่จบการศึกษา'}`"
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        color="primary"
+                      >
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
+          </q-card>
+          <q-card-section class="row q-gutter-sm q-pt-sm">
+            <datepicker
+              menu-class-name="modalfix"
+              v-model="educationData.graduateDate"
+              :locale="'th'"
+              class="col"
+              autoApply
+              :enableTimePicker="false"
+              week-start="0"
+            >
+              <template #year="{ year }">{{ year + 543 }}</template>
+              <template #year-overlay-value="{ value }">{{
+                parseInt(value + 543)
+              }}</template>
+              <template #trigger>
+                <q-input
+                  outlined
+                  bg-color="white"
+                  dense
+                  lazy-rules
+                  :model-value="date2Thai(educationData.graduateDate)"
+                  :rules="[(val) => !!val || `${'กรุณาเลือกวันที่ได้รับ'}`]"
+                  hide-bottom-space
+                  :label="`${'วันที่ได้รับ'}`"
+                >
+                  <template v-slot:prepend>
+                    <q-icon name="event" class="cursor-pointer" color="primary">
+                    </q-icon>
+                  </template>
+                </q-input>
+              </template>
+            </datepicker>
+            <q-select
+              outlined
+              dense
+              bg-color="white"
+              class="col"
+              v-model="educationData.isEducation"
+              :options="educationOption"
+              label="เป็นวุฒิการศึกษาในตำแหน่ง"
+            />
+          </q-card-section>
+          <q-card-section class="row q-gutter-sm q-py-none">
+            <q-input
+              outlined
+              v-model="educationData.degree"
+              label="วุฒิการศึกษา"
+              bg-color="white"
+              class="col"
+              dense
+              :rules="[(val) => !!val || `${'กรุณากรอกวุฒิการศึกษา'}`]"
+              hide-bottom-space
+            />
+            <q-input
+              outlined
+              v-model="educationData.field"
+              label="สาขาวิชา/ทาง"
+              bg-color="white"
+              class="col"
+              dense
+            />
+          </q-card-section>
+          <q-card-section class="row q-gutter-sm q-pt-sm q-pb-none">
+            <q-input
+              outlined
+              v-model="educationData.fundName"
+              label="ทุน"
+              bg-color="white"
+              class="col"
+              dense
+            />
+            <q-input
+              outlined
+              v-model="educationData.gpa"
+              label="เกรดเฉลี่ย"
+              bg-color="white"
+              class="col"
+              dense
+              mask="#.##"
+            />
+          </q-card-section>
+          <q-card-section class="row q-gutter-sm q-pt-sm q-pb-none">
+            <q-input
+              outlined
+              v-model="educationData.country"
+              label="ประเทศ"
+              bg-color="white"
+              class="col"
+              dense
+            />
+            <q-input
+              outlined
+              v-model="educationData.other"
+              label="ข้อมูลติดต่อ"
+              bg-color="white"
+              class="col"
+              dense
+            />
+          </q-card-section>
+          <q-card-section class="row q-gutter-sm q-pt-sm q-pb-none">
+            <q-input
+              outlined
+              v-model="educationData.duration"
+              label="ระยะเวลา"
+              bg-color="white"
+              class="col"
+              dense
+            />
+            <q-input
+              outlined
+              v-model="educationData.durationYear"
+              label="ระยะเวลาหลักสูตร"
+              bg-color="white"
+              class="col"
+              type="number"
+              dense
+            />
+          </q-card-section>
+          <q-card-section class="row q-gutter-sm q-pt-sm">
+            <q-input
+              outlined
+              v-model="educationData.note"
+              label="หมายเหตุ"
+              bg-color="white"
+              class="col"
+              dense
+              type="textarea"
+            />
+          </q-card-section>
+        </div>
+        <q-card-actions align="right">
+          <q-btn
+            id="onSubmit"
+            type="submit"
+            dense
+            unelevated
+            label="บันทึก"
+            color="public"
+            class="q-px-md"
+          >
+            <q-tooltip>บันทึกข้อมูล</q-tooltip>
+          </q-btn>
+        </q-card-actions>
+      </q-form>
+    </q-card>
+  </q-dialog>
 </template>
 
-<style scoped></style>
+<style scoped>
+.borderCard {
+  border: 1px solid #d0d0d0;
+}
+</style>