From 93ba88540689a3f23862e7129ea57545cba78502 Mon Sep 17 00:00:00 2001
From: Tanyalak <tanyalak@frappet.com>
Date: Tue, 23 Apr 2024 17:56:51 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B8=9B=E0=B8=A3=E0=B8=B1=E0=B8=9A=20css=20?=
 =?UTF-8?q?=E0=B8=A3=E0=B8=B0=E0=B8=9A=E0=B8=9A=E0=B8=97=E0=B8=B0=E0=B9=80?=
 =?UTF-8?q?=E0=B8=9A=E0=B8=B5=E0=B8=A2=E0=B8=99=E0=B8=9B=E0=B8=A3=E0=B8=B0?=
 =?UTF-8?q?=E0=B8=A7=E0=B8=B1=E0=B8=95=E0=B8=B4=20=E0=B9=81=E0=B8=97?=
 =?UTF-8?q?=E0=B9=87=E0=B8=9A=E0=B8=82=E0=B9=89=E0=B8=AD=E0=B8=A1=E0=B8=B9?=
 =?UTF-8?q?=E0=B8=A5=E0=B8=AA=E0=B9=88=E0=B8=A7=E0=B8=99=E0=B8=95=E0=B8=B1?=
 =?UTF-8?q?=E0=B8=A7,=E0=B8=82=E0=B9=89=E0=B8=AD=E0=B8=A1=E0=B8=B9?=
 =?UTF-8?q?=E0=B8=A5=E0=B8=A3=E0=B8=B2=E0=B8=8A=E0=B8=81=E0=B8=B2=E0=B8=A3?=
 =?UTF-8?q?=20=E0=B9=80=E0=B8=AA=E0=B8=A3=E0=B9=87=E0=B8=88=E0=B9=81?=
 =?UTF-8?q?=E0=B8=A5=E0=B9=89=E0=B8=A7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/detail/Achievement/Main.vue    |   23 +-
 .../detail/GovernmentInformation/01_Info.vue  |  412 +++---
 .../GovernmentInformation/02_Discipline.vue   |  335 +++--
 .../02_DisciplineHistory.vue                  |  181 ++-
 .../detail/GovernmentInformation/03_Leave.vue |   62 +-
 .../GovernmentInformation/03_LeaveHistory.vue |  204 ++-
 .../04_PerformSpecialWork.vue                 |  401 +++---
 .../04_PerformSpecialWorkHistory.vue          |  181 ++-
 .../detail/GovernmentInformation/Main.vue     |   17 +-
 .../components/detail/Other/Main.vue          |   17 +-
 .../detail/PersonalInformation/01_Profile.vue |    5 +-
 .../02_NameChangeHistory.vue                  |    5 +-
 .../detail/PersonalInformation/03_Address.vue |  223 ++-
 .../detail/PersonalInformation/04_Family.vue  | 1250 ++++++++---------
 .../PersonalInformation/05_Education.vue      |  851 ++++++-----
 .../PersonalInformation/06_SpecialSkill.vue   |  171 ++-
 .../detail/PersonalInformation/Main.vue       |    2 +-
 .../components/detail/Salary/Main.vue         |   17 +-
 .../04_registryNew/views/detailView.vue       |    4 +-
 19 files changed, 2091 insertions(+), 2270 deletions(-)

diff --git a/src/modules/04_registryNew/components/detail/Achievement/Main.vue b/src/modules/04_registryNew/components/detail/Achievement/Main.vue
index 6f893ebb7..60a6b5d97 100644
--- a/src/modules/04_registryNew/components/detail/Achievement/Main.vue
+++ b/src/modules/04_registryNew/components/detail/Achievement/Main.vue
@@ -11,22 +11,23 @@ import ResultsPerformance from "@/modules/04_registryNew/components/detail/Achie
 const tab = ref<string>("1");
 </script>
 <template>
-  <div class="row items-center q-mb-md">
-    <div class="text-dark row items-center text-weight-bold">
-      <q-icon name="mdi-medal" class="q-mr-md" size="sm" />
-      <h3 class="resigtry-tab-title">ข้อมูลผลงานและเครื่องราชฯ</h3>
+  <div class="row items-center q-my-md">
+    <div class="text-dark row items-center q-px-md">
+      <q-icon name="mdi-account" class="q-mr-md" size="22px" />
+      <div class="text-subtitle1 text-weight-bold">ข้อมูลผลงานและเครื่องราชฯ</div>
     </div>
   </div>
 
   <q-separator />
   <q-tabs
-    v-model="tab"
-    class="text-grey"
-    active-color="blue"
-    indicator-color="white"
-    align="left"
-    narrow-indicator
-    bordered
+      v-model="tab"
+      active-color="blue-8"
+      align="left"
+      bordered
+      narrow-indicator
+      indicator-color="transparent"
+      dense
+      class="text-grey q-pl-sm"
   >
     <q-tab name="1" label="ใบอนุญาตประกอบวิชาชีพ" />
     <q-tab name="2" label="การฝึกอบรม/ดูงาน" />
diff --git a/src/modules/04_registryNew/components/detail/GovernmentInformation/01_Info.vue b/src/modules/04_registryNew/components/detail/GovernmentInformation/01_Info.vue
index 7d4c2685d..b4c2b5857 100644
--- a/src/modules/04_registryNew/components/detail/GovernmentInformation/01_Info.vue
+++ b/src/modules/04_registryNew/components/detail/GovernmentInformation/01_Info.vue
@@ -475,6 +475,7 @@ onMounted(() => {
         color="primary"
         icon="mdi-pencil-outline"
         flat
+        dense
         round
         @click="openDialogEdit()"
         ><q-tooltip>แก้ไขข้อมูล</q-tooltip></q-btn
@@ -483,6 +484,7 @@ onMounted(() => {
         color="info"
         icon="mdi-history"
         flat
+        dense
         round
         @click="openDialogHistory()"
         ><q-tooltip>ประวิติข้อมูลราชการ</q-tooltip></q-btn
@@ -490,7 +492,7 @@ onMounted(() => {
     </div>
   </div>
 
-  <q-card bordered class="bg-grey-1 q-pa-md">
+  <q-card bordered class="bg-grey-1 q-pa-md q-mt-sm">
     <div class="row q-col-gutter-md">
       <div class="col-12 col-sm-6 col-md-6 q-gutter-y-sm">
         <div
@@ -525,7 +527,7 @@ onMounted(() => {
         </div>
       </div>
     </div>
-    <q-separator inset color="grey-5" class="q-my-md" />
+    <q-separator color="grey-4" class="q-my-md" />
     <div class="row q-col-gutter-md">
       <div class="col-12 col-sm-6 col-md-6 q-gutter-y-sm">
         <div class="col-12 col-sm-6 col-md-6">
@@ -633,129 +635,117 @@ onMounted(() => {
 
   <!-- dialog edit -->
   <q-dialog v-model="modalEdit" persistent>
-    <q-layout
-      view="lHh lpr lFf"
-      container
-      style="height: 300px"
-      class="bg-white"
-    >
+    <q-card>
       <form @submit.prevent="validateForm">
-        <q-header>
-          <q-toolbar>
-            <DialogHeader tittle="แก้ไขข้อมูลราชการ" :close="closeDialog" />
-          </q-toolbar>
-          <q-separator color="grey-4" />
-        </q-header>
+        <DialogHeader tittle="แก้ไขข้อมูลราชการ" :close="closeDialog" />
+        <q-separator color="grey-4" />
 
-        <q-page-container>
-          <q-page class="q-pa-md">
-            <div class="row q-col-gutter-sm">
-              <div class="col-6">
-                <datepicker
-                  v-model="containDate"
-                  :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
-                      ref="containDateRef"
-                      class="full-width inputgreen cursor-pointer"
-                      hide-bottom-space
-                      dense
-                      outlined
-                      :model-value="containDate !== null
-            ? date2Thai(containDate as Date)
-            : null
-          "
-                      :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 class="col-6">
-                <datepicker
-                  v-model="workDate"
-                  :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
-                      ref="workDateRef"
-                      class="full-width inputgreen cursor-pointer"
-                      hide-bottom-space
-                      dense
-                      outlined
-                      :model-value="workDate !== null
-            ? date2Thai(workDate as Date)
-            : null
-          "
-                      :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
-                class="col-12"
-                v-if="containDate && workDate ? dateToISO(containDate as Date) !== dateToISO(workDate as Date) : false"
+        <q-card-section style="max-height: 50vh" class="scroll">
+          <div class="row q-col-gutter-sm">
+            <div class="col-6">
+              <datepicker
+                v-model="containDate"
+                :locale="'th'"
+                autoApply
+                :enableTimePicker="false"
+                week-start="0"
               >
-                <q-input
-                  ref="reasonSameDateRef"
-                  class="full-width inputgreen cursor-pointer"
-                  label="เหตุผลกรณีไม่ตรงกัน"
-                  type="textarea"
-                  outlined
-                  dense
-                  :rules="[(val) => !!val || 'กรุณากรอก เหตุผลกรณีไม่ตรงกัน']"
-                  v-model="reasonSameDate"
-                />
-              </div>
+                <template #year="{ year }">
+                  {{ year + 543 }}
+                </template>
+                <template #year-overlay-value="{ value }">
+                  {{ parseInt(value + 543) }}
+                </template>
+                <template #trigger>
+                  <q-input
+                    ref="containDateRef"
+                    class="full-width inputgreen cursor-pointer"
+                    hide-bottom-space
+                    dense
+                    outlined
+                    :model-value="containDate !== null
+          ? date2Thai(containDate as Date)
+          : null
+        "
+                    :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>
-          </q-page>
-        </q-page-container>
+            <div class="col-6">
+              <datepicker
+                v-model="workDate"
+                :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
+                    ref="workDateRef"
+                    class="full-width inputgreen cursor-pointer"
+                    hide-bottom-space
+                    dense
+                    outlined
+                    :model-value="workDate !== null
+                      ? date2Thai(workDate as Date)
+                      : null
+                    "
+                    :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
+              class="col-12"
+              v-if="containDate && workDate ? dateToISO(containDate as Date) !== dateToISO(workDate as Date) : false"
+            >
+              <q-input
+                ref="reasonSameDateRef"
+                class="full-width inputgreen cursor-pointer"
+                label="เหตุผลกรณีไม่ตรงกัน"
+                type="textarea"
+                outlined
+                dense
+                hide-bottom-space
+                :rules="[(val) => !!val || 'กรุณากรอก เหตุผลกรณีไม่ตรงกัน']"
+                v-model="reasonSameDate"
+              />
+            </div>
+          </div>
+        </q-card-section>
         <q-separator />
-        <q-footer>
-          <q-separator color="grey-4" />
-          <q-toolbar class="fit row wrap justify-end items-start content-start">
+        <q-card-actions align="right">
             <q-btn
               dense
               unelevated
@@ -767,112 +757,100 @@ onMounted(() => {
             >
               <q-tooltip>บันทึกข้อมูล</q-tooltip>
             </q-btn>
-          </q-toolbar>
-        </q-footer>
+          </q-card-actions>
       </form>
-    </q-layout>
+    </q-card>
   </q-dialog>
 
   <!-- dialog History -->
   <q-dialog v-model="modalHistory" persistent>
-    <q-layout
-      view="lHh lpr lFf"
-      container
-      style="height: 500px; min-width: 80%"
-      class="bg-white"
-    >
-      <q-header>
-        <q-toolbar>
-          <DialogHeader
-            tittle="ประวัติแก้ไขข้อมูลราชการ"
-            :close="() => (modalHistory = !modalHistory)"
-          />
-        </q-toolbar>
-        <q-separator color="grey-4" />
-      </q-header>
+    <q-card style="min-width: 80%">
+      <DialogHeader
+        tittle="ประวัติแก้ไขข้อมูลราชการ"
+        :close="() => (modalHistory = !modalHistory)"
+      />
+      <q-separator color="grey-4" />
 
-      <q-page-container>
-        <q-page class="q-pa-md">
-          <div class="row q-pb-sm q-gutter-x-sm">
-            <q-space />
-            <q-input
-              standout
-              dense
-              v-model="filterKeyword"
-              ref="filterRef"
-              outlined
-              placeholder="ค้นหา"
-              class="col-2"
-              debounce="300"
-            >
-              <template v-slot:append>
-                <q-icon
-                  v-if="filterKeyword == ''"
-                  name="search"
-                  @click.stop.prevent="filterKeyword = ''"
-                  class="cursor-pointer"
-                />
-                <q-icon
-                  v-if="filterKeyword"
-                  name="cancel"
-                  @click.stop.prevent="filterKeyword = ''"
-                  class="cursor-pointer"
-                />
-              </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"
-              options-cover
-              style="min-width: 150px"
-            />
-          </div>
-          <d-table
-            ref="table"
-            :columns="columnsHistory"
-            :rows="rowsHistory"
-            flat
-            bordered
-            :paging="true"
+      <q-card-section style="max-height: 50vh" class="scroll">
+        <div class="row q-pb-sm q-gutter-x-sm">
+          <q-space />
+          <q-input
+            standout
             dense
-            class="custom-header-table"
-            :filter="filterKeyword"
-            :visible-columns="visibleColumnsHistory"
+            v-model="filterKeyword"
+            ref="filterRef"
+            outlined
+            placeholder="ค้นหา"
+            class="col-2"
+            debounce="300"
           >
-            <template v-slot:header="props">
-              <q-tr :props="props">
-                <q-th
-                  v-for="col in props.cols"
-                  :key="col.name"
-                  :props="props"
-                  style="color: #000000; font-weight: 500"
-                >
-                  <span class="text-weight-medium">{{ col.label }}</span>
-                </q-th>
-                <q-th auto-width></q-th>
-              </q-tr>
+            <template v-slot:append>
+              <q-icon
+                v-if="filterKeyword == ''"
+                name="search"
+                @click.stop.prevent="filterKeyword = ''"
+                class="cursor-pointer"
+              />
+              <q-icon
+                v-if="filterKeyword"
+                name="cancel"
+                @click.stop.prevent="filterKeyword = ''"
+                class="cursor-pointer"
+              />
             </template>
-            <template v-slot:body="props">
-              <q-tr :props="props" class="cursor-pointer">
-                <q-td v-for="col in props.cols" :key="col.name" :props="props">
-                  <div>
-                    {{ col.value ? col.value : "-" }}
-                  </div>
-                </q-td>
-              </q-tr>
-            </template>
-          </d-table>
-        </q-page>
-      </q-page-container>
-    </q-layout>
+          </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"
+            options-cover
+            style="min-width: 150px"
+          />
+        </div>
+        <d-table
+          ref="table"
+          :columns="columnsHistory"
+          :rows="rowsHistory"
+          flat
+          bordered
+          :paging="true"
+          dense
+          class="custom-header-table"
+          :filter="filterKeyword"
+          :visible-columns="visibleColumnsHistory"
+        >
+          <template v-slot:header="props">
+            <q-tr :props="props">
+              <q-th
+                v-for="col in props.cols"
+                :key="col.name"
+                :props="props"
+                style="color: #000000; font-weight: 500"
+              >
+                <span class="text-weight-medium">{{ col.label }}</span>
+              </q-th>
+              <q-th auto-width></q-th>
+            </q-tr>
+          </template>
+          <template v-slot:body="props">
+            <q-tr :props="props" class="cursor-pointer">
+              <q-td v-for="col in props.cols" :key="col.name" :props="props">
+                <div>
+                  {{ col.value ? col.value : "-" }}
+                </div>
+              </q-td>
+            </q-tr>
+          </template>
+        </d-table>
+      </q-card-section>
+    </q-card>
   </q-dialog>
 </template>
 
diff --git a/src/modules/04_registryNew/components/detail/GovernmentInformation/02_Discipline.vue b/src/modules/04_registryNew/components/detail/GovernmentInformation/02_Discipline.vue
index 874a7ba80..0e6d862e4 100644
--- a/src/modules/04_registryNew/components/detail/GovernmentInformation/02_Discipline.vue
+++ b/src/modules/04_registryNew/components/detail/GovernmentInformation/02_Discipline.vue
@@ -334,8 +334,8 @@ onMounted(async () => {
 });
 </script>
 <template>
-  <div class="row items-center q-gutter-x-sm q-py-sm">
-    <q-btn color="primary" icon="add" flat round @click="openDialogAdd()"
+  <div class="row items-center q-gutter-x-sm q-pb-sm">
+    <q-btn dense color="primary" icon="add" flat round @click="openDialogAdd()"
       ><q-tooltip>เพิ่มข้อมูล</q-tooltip></q-btn
     >
 
@@ -572,183 +572,168 @@ onMounted(async () => {
 
   <!-- dialog add edit -->
   <q-dialog v-model="modal" persistent>
-    <q-layout
-      view="lHh lpr lFf"
-      container
-      style="height: 300px"
-      class="bg-white"
-    >
+    <q-card>
       <q-form @submit.prevent greedy @validation-success="onSubmit()">
-        <q-header>
-          <q-toolbar>
-            <DialogHeader
-              :tittle="edit ? 'แก้ไขข้อมูลวินัย' : 'เพิ่มข้อมูลวินัย'"
-              :close="closeDialog"
-            />
-          </q-toolbar>
-          <q-separator color="grey-4" />
-        </q-header>
-
-        <q-page-container>
-          <q-page class="q-pa-md">
-            <div class="row col-12 q-col-gutter-x-xs q-col-gutter-y-xs">
-              <div class="col-xs-6 col-sm-6 col-md-6">
-                <datepicker
-                  menu-class-name="modalfix"
-                  v-model="disciplineData.date"
-                  :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
-                      ref="dateRef"
-                      class="full-width inputgreen cursor-pointer"
-                      outlined
-                      dense
-                      :model-value="date2Thai(disciplineData.date)"
-                      :rules="[(val:string) => !!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>
-              <div class="col-xs-6 col-sm-6 col-md-6">
-                <q-input
-                  ref="detailRef"
-                  class="full-width inputgreen cursor-pointer"
-                  outlined
-                  dense
-                  lazy-rules
-                  v-model="disciplineData.detail"
-                  :rules="[(val:string) => !!val || `${'กรุณากรอกรายละเอียด'}`]"
-                  hide-bottom-space
-                  :label="`${'รายละเอียด'}`"
-                />
-              </div>
-              <div class="col-xs-6 col-sm-6 col-md-6">
-                <selector
-                  class="full-width inputgreen cursor-pointer"
-                  outlined
-                  dense
-                  lazy-rules
-                  v-model="disciplineData.level"
-                  :label="`${'ระดับการลงโทษทางวินัย'}`"
-                  emit-value
-                  map-options
-                  option-label="name"
-                  :options="Ops.levelOptions"
-                  option-value="id"
-                  use-input
-                  clearable
-                  hide-bottom-space
-                  input-debounce="0"
-                  @filter="(inputValue:string,
-                      doneFn:Function) => filterSelector(inputValue, doneFn,'levelOptions'
-                      ) "
-                />
-              </div>
-              <div class="col-xs-6 col-sm-6 col-md-6">
-                <q-input
-                  class="full-width inputgreen cursor-pointer"
-                  outlined
-                  dense
-                  v-model="disciplineData.unStigma"
-                  hide-bottom-space
-                  :label="`${'ล้างมลทิน'}`"
-                />
-              </div>
-              <div class="col-xs-6 col-sm-6 col-md-6">
-                <q-input
-                  ref="refCommandNoRef"
-                  class="full-width inputgreen cursor-pointer"
-                  outlined
-                  dense
-                  lazy-rules
-                  v-model="disciplineData.refCommandNo"
-                  hide-bottom-space
-                  :label="`${'เลขที่คำสั่ง'}`"
-                  :rules="[(val:string) => !!val || `${'กรุณากรอกเลขที่คำสั่ง'}`]"
-                >
-                  <template v-slot:append>
-                    <q-icon name="mdi-file" class="cursor-pointer" />
-                  </template>
-                </q-input>
-              </div>
-              <div class="col-xs-6 col-sm-6 col-md-6">
-                <datepicker
-                  menu-class-name="modalfix"
-                  v-model="disciplineData.refCommandDate"
-                  :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
-                      ref="dateRef"
-                      class="full-width inputgreen cursor-pointer"
-                      outlined
-                      clearable
-                      dense
-                      :model-value="date2Thai(disciplineData.refCommandDate)"
-                      hide-bottom-space
-                      :label="`${'เอกสารอ้างอิง (ลงวันที่)'}`"
-                      @clear="disciplineData.refCommandDate = null"
-                    >
-                      <template v-slot:prepend>
-                        <q-icon
-                          name="event"
-                          class="cursor-pointer"
-                          color="primary"
-                        >
-                        </q-icon>
-                      </template>
-                    </q-input>
-                  </template>
-                </datepicker>
-              </div>
+        <DialogHeader
+          :tittle="edit ? 'แก้ไขข้อมูลวินัย' : 'เพิ่มข้อมูลวินัย'"
+          :close="closeDialog"
+        />
+        <q-separator color="grey-4" />
+        <q-card-section style="max-height: 50vh" class="scroll">
+          <div class="row col-12 q-col-gutter-x-xs q-col-gutter-y-xs">
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <datepicker
+                menu-class-name="modalfix"
+                v-model="disciplineData.date"
+                :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
+                    ref="dateRef"
+                    class="full-width inputgreen cursor-pointer"
+                    outlined
+                    dense
+                    :model-value="date2Thai(disciplineData.date)"
+                    :rules="[(val:string) => !!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-page>
-        </q-page-container>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <q-input
+                ref="detailRef"
+                class="full-width inputgreen cursor-pointer"
+                outlined
+                dense
+                lazy-rules
+                v-model="disciplineData.detail"
+                :rules="[(val:string) => !!val || `${'กรุณากรอกรายละเอียด'}`]"
+                hide-bottom-space
+                :label="`${'รายละเอียด'}`"
+              />
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <selector
+                class="full-width inputgreen cursor-pointer"
+                outlined
+                dense
+                lazy-rules
+                v-model="disciplineData.level"
+                :label="`${'ระดับการลงโทษทางวินัย'}`"
+                emit-value
+                map-options
+                option-label="name"
+                :options="Ops.levelOptions"
+                option-value="id"
+                use-input
+                clearable
+                hide-bottom-space
+                input-debounce="0"
+                @filter="(inputValue:string,
+                    doneFn:Function) => filterSelector(inputValue, doneFn,'levelOptions'
+                    ) "
+              />
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <q-input
+                class="full-width inputgreen cursor-pointer"
+                outlined
+                dense
+                v-model="disciplineData.unStigma"
+                hide-bottom-space
+                :label="`${'ล้างมลทิน'}`"
+              />
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <q-input
+                ref="refCommandNoRef"
+                class="full-width inputgreen cursor-pointer"
+                outlined
+                dense
+                lazy-rules
+                v-model="disciplineData.refCommandNo"
+                hide-bottom-space
+                :label="`${'เลขที่คำสั่ง'}`"
+                :rules="[(val:string) => !!val || `${'กรุณากรอกเลขที่คำสั่ง'}`]"
+              >
+                <template v-slot:append>
+                  <q-icon name="mdi-file" class="cursor-pointer" />
+                </template>
+              </q-input>
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <datepicker
+                menu-class-name="modalfix"
+                v-model="disciplineData.refCommandDate"
+                :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
+                    ref="dateRef"
+                    class="full-width inputgreen cursor-pointer"
+                    outlined
+                    clearable
+                    dense
+                    :model-value="date2Thai(disciplineData.refCommandDate)"
+                    hide-bottom-space
+                    :label="`${'เอกสารอ้างอิง (ลงวันที่)'}`"
+                    @clear="disciplineData.refCommandDate = null"
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        color="primary"
+                      >
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
+          </div>
+        </q-card-section>
         <q-separator />
-        <q-footer>
-          <q-separator color="grey-4" />
-          <q-toolbar class="fit row wrap justify-end items-start content-start">
-            <q-btn
-              dense
-              unelevated
-              label="บันทึก"
-              id="onSubmit"
-              type="submit"
-              color="public"
-              class="q-px-md"
-            >
-              <q-tooltip>บันทึกข้อมูล</q-tooltip>
-            </q-btn>
-          </q-toolbar>
-        </q-footer>
+        <q-card-actions align="right">
+          <q-btn
+            dense
+            unelevated
+            label="บันทึก"
+            id="onSubmit"
+            type="submit"
+            color="public"
+            class="q-px-md"
+          >
+            <q-tooltip>บันทึกข้อมูล</q-tooltip>
+          </q-btn>
+        </q-card-actions>
       </q-form>
-    </q-layout>
+    </q-card>
   </q-dialog>
 
   <DialogHistory v-model:modal="modalHistory" v-model:id="id" />
diff --git a/src/modules/04_registryNew/components/detail/GovernmentInformation/02_DisciplineHistory.vue b/src/modules/04_registryNew/components/detail/GovernmentInformation/02_DisciplineHistory.vue
index afb02e7f3..1e14e2fc6 100644
--- a/src/modules/04_registryNew/components/detail/GovernmentInformation/02_DisciplineHistory.vue
+++ b/src/modules/04_registryNew/components/detail/GovernmentInformation/02_DisciplineHistory.vue
@@ -184,105 +184,94 @@ watch(modal, (status) => {
 
 <template>
   <q-dialog v-model="modal" persistent>
-    <q-layout
-      view="lHh lpr lFf"
-      container
-      style="height: 500px; min-width: 80%"
-      class="bg-white"
-    >
-      <q-header>
-        <q-toolbar>
-          <DialogHeader
-            tittle="ประวัติแก้ไขวินัย"
-            :close="() => (modal = false)"
-          />
-        </q-toolbar>
-        <q-separator color="grey-4" />
-      </q-header>
+    <q-card style="min-width: 80%">
+      <DialogHeader
+        tittle="ประวัติแก้ไขวินัย"
+        :close="() => (modal = false)"
+      />
+      <q-separator color="grey-4" />
 
-      <q-page-container>
-        <q-page class="q-pa-md">
-          <div class="row q-gutter-sm q-mb-sm">
-            <q-space />
-            <q-input
-              standout
-              dense
-              v-model="filterKeyword"
-              ref="filterRef"
-              outlined
-              placeholder="ค้นหา"
-              debounce="300"
-            >
-              <template v-slot:append>
-                <q-icon
-                  v-if="filterKeyword == ''"
-                  name="search"
-                  @click.stop.prevent="filterKeyword = ''"
-                  class="cursor-pointer"
-                />
-                <q-icon
-                  v-if="filterKeyword"
-                  name="cancel"
-                  @click.stop.prevent="filterKeyword = ''"
-                  class="cursor-pointer"
-                />
-              </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"
-              options-cover
-              style="min-width: 150px"
-            />
-          </div>
-          <d-table
-            ref="table"
-            flat
-            bordered
+      <q-card-section style="max-height: 50vh" class="scroll">
+        <div class="row q-gutter-sm q-mb-sm">
+          <q-space />
+          <q-input
+            standout
             dense
-            :columns="columns"
-            :rows="rows"
-            :paging="true"
-            :rows-per-page-options="[10, 25, 50, 100]"
-            :visible-columns="visibleColumns"
-            v-model:pagination="historyPagination"
-            :filter="filterKeyword"
+            v-model="filterKeyword"
+            ref="filterRef"
+            outlined
+            placeholder="ค้นหา"
+            debounce="300"
           >
-            >
-            <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 v-slot:append>
+              <q-icon
+                v-if="filterKeyword == ''"
+                name="search"
+                @click.stop.prevent="filterKeyword = ''"
+                class="cursor-pointer"
+              />
+              <q-icon
+                v-if="filterKeyword"
+                name="cancel"
+                @click.stop.prevent="filterKeyword = ''"
+                class="cursor-pointer"
+              />
             </template>
-            <template v-slot:body="props">
-              <q-tr :props="props" class="cursor-pointer">
-                <q-td v-for="col in props.cols" :key="col.id">
-                  <div v-if="col.name === 'no'">
-                    {{
-                      (formFilter.page - 1) * formFilter.pageSize +
-                      props.rowIndex +
-                      1
-                    }}
-                  </div>
-                  <div v-else>
-                    {{ col.value ? col.value : "-" }}
-                  </div>
-                </q-td>
-              </q-tr>
-            </template>
-          </d-table>
-        </q-page>
-      </q-page-container>
-    </q-layout>
+          </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"
+            options-cover
+            style="min-width: 150px"
+          />
+        </div>
+        <d-table
+          ref="table"
+          flat
+          bordered
+          dense
+          :columns="columns"
+          :rows="rows"
+          :paging="true"
+          :rows-per-page-options="[10, 25, 50, 100]"
+          :visible-columns="visibleColumns"
+          v-model:pagination="historyPagination"
+          :filter="filterKeyword"
+        >
+          >
+          <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" class="cursor-pointer">
+              <q-td v-for="col in props.cols" :key="col.id">
+                <div v-if="col.name === 'no'">
+                  {{
+                    (formFilter.page - 1) * formFilter.pageSize +
+                    props.rowIndex +
+                    1
+                  }}
+                </div>
+                <div v-else>
+                  {{ col.value ? col.value : "-" }}
+                </div>
+              </q-td>
+            </q-tr>
+          </template>
+        </d-table>
+      </q-card-section>
+    </q-card>
   </q-dialog>
 </template>
diff --git a/src/modules/04_registryNew/components/detail/GovernmentInformation/03_Leave.vue b/src/modules/04_registryNew/components/detail/GovernmentInformation/03_Leave.vue
index e601c0072..32e4ca22d 100644
--- a/src/modules/04_registryNew/components/detail/GovernmentInformation/03_Leave.vue
+++ b/src/modules/04_registryNew/components/detail/GovernmentInformation/03_Leave.vue
@@ -452,8 +452,8 @@ onMounted(() => {
 });
 </script>
 <template>
-  <div class="row items-center q-gutter-x-sm q-py-sm">
-    <q-btn color="primary" icon="add" flat round @click="openDialogAdd()"
+  <div class="row items-center q-gutter-x-sm q-pb-sm">
+    <q-btn dense color="primary" icon="add" flat round @click="openDialogAdd()"
       ><q-tooltip>เพิ่มข้อมูล</q-tooltip></q-btn
     >
 
@@ -670,25 +670,15 @@ onMounted(() => {
 
   <!-- dialog add edit -->
   <q-dialog v-model="modal" persistent>
-    <q-layout
-      view="lHh lpr lFf"
-      container
-      style="height: 400px"
-      class="bg-white"
-    >
+    <q-card>
       <form @submit.prevent="validateForm">
-        <q-header>
-          <q-toolbar>
-            <DialogHeader
-              :tittle="edit ? 'แก้ไขข้อมูลการลา' : 'เพิ่มข้อมูลการลา'"
-              :close="closeDialog"
-            />
-          </q-toolbar>
-          <q-separator color="grey-4" />
-        </q-header>
+        <DialogHeader
+          :tittle="edit ? 'แก้ไขข้อมูลการลา' : 'เพิ่มข้อมูลการลา'"
+          :close="closeDialog"
+        />
+        <q-separator color="grey-4" />
 
-        <q-page-container>
-          <q-page class="q-pa-md">
+        <q-card-section style="max-height: 50vh" class="scroll">
             <div class="row col-12 q-col-gutter-x-xs q-col-gutter-y-xs">
               <div class="col-xs-6 col-sm-6 col-md-6">
                 <q-select
@@ -804,27 +794,23 @@ onMounted(() => {
                 />
               </div>
             </div>
-          </q-page>
-        </q-page-container>
+        </q-card-section>
         <q-separator />
-        <q-footer>
-          <q-separator color="grey-4" />
-          <q-toolbar class="fit row wrap justify-end items-start content-start">
-            <q-btn
-              dense
-              unelevated
-              label="บันทึก"
-              id="onSubmit"
-              type="submit"
-              color="public"
-              class="q-px-md"
-            >
-              <q-tooltip>บันทึกข้อมูล</q-tooltip>
-            </q-btn>
-          </q-toolbar>
-        </q-footer>
+        <q-card-actions align="right">
+          <q-btn
+            dense
+            unelevated
+            label="บันทึก"
+            id="onSubmit"
+            type="submit"
+            color="public"
+            class="q-px-md"
+          >
+            <q-tooltip>บันทึกข้อมูล</q-tooltip>
+          </q-btn>
+        </q-card-actions>
       </form>
-    </q-layout>
+    </q-card>
   </q-dialog>
 
   <DialogHistory v-model:modal="modalHistory" v-model:id="id" />
diff --git a/src/modules/04_registryNew/components/detail/GovernmentInformation/03_LeaveHistory.vue b/src/modules/04_registryNew/components/detail/GovernmentInformation/03_LeaveHistory.vue
index e3a075eef..37a17d15c 100644
--- a/src/modules/04_registryNew/components/detail/GovernmentInformation/03_LeaveHistory.vue
+++ b/src/modules/04_registryNew/components/detail/GovernmentInformation/03_LeaveHistory.vue
@@ -214,116 +214,104 @@ watch(modal, (status) => {
 
 <template>
   <q-dialog v-model="modal" persistent>
-    <q-layout
-      view="lHh lpr lFf"
-      container
-      style="height: 500px; min-width: 80%"
-      class="bg-white"
-    >
-      <q-header>
-        <q-toolbar>
-          <DialogHeader
-            tittle="ประวัติแก้ไขการลา"
-            :close="() => (modal = false)"
-          />
-        </q-toolbar>
-        <q-separator color="grey-4" />
-      </q-header>
-
-      <q-page-container>
-        <q-page class="q-pa-md">
-          <div class="row q-gutter-sm q-mb-sm">
-            <q-space />
-            <q-input
-              standout
-              dense
-              v-model="filterKeyword"
-              ref="filterRef"
-              outlined
-              placeholder="ค้นหา"
-              debounce="300"
-            >
-              <template v-slot:append>
-                <q-icon
-                  v-if="filterKeyword == ''"
-                  name="search"
-                  @click.stop.prevent="filterKeyword = ''"
-                  class="cursor-pointer"
-                />
-                <q-icon
-                  v-if="filterKeyword"
-                  name="cancel"
-                  @click.stop.prevent="filterKeyword = ''"
-                  class="cursor-pointer"
-                />
-              </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"
-              options-cover
-              style="min-width: 150px"
-            />
-          </div>
-          <d-table
-            ref="table"
-            flat
-            bordered
+    <q-card style="min-width: 80%">
+      <DialogHeader
+        tittle="ประวัติแก้ไขการลา"
+        :close="() => (modal = false)"
+      />
+      <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
+            standout
             dense
-            :columns="columns"
-            :rows="rows"
-            :paging="true"
-            v-model:pagination="historyPagination"
-            :rows-per-page-options="[10, 25, 50, 100]"
-            :visible-columns="visibleColumns"
-            :filter="filterKeyword"
+            v-model="filterKeyword"
+            ref="filterRef"
+            outlined
+            placeholder="ค้นหา"
+            debounce="300"
           >
-            >
-            <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 v-slot:append>
+              <q-icon
+                v-if="filterKeyword == ''"
+                name="search"
+                @click.stop.prevent="filterKeyword = ''"
+                class="cursor-pointer"
+              />
+              <q-icon
+                v-if="filterKeyword"
+                name="cancel"
+                @click.stop.prevent="filterKeyword = ''"
+                class="cursor-pointer"
+              />
             </template>
-            <template v-slot:body="props">
-              <q-tr :props="props" class="cursor-pointer">
-                <q-td v-for="col in props.cols" :key="col.id">
-                  <div v-if="col.name === 'no'">
-                    {{
-                      (formFilter.page - 1) * formFilter.pageSize +
-                      props.rowIndex +
-                      1
-                    }}
-                  </div>
-                  <div v-else-if="col.name == 'dateLeave'">
-                    {{
-                      dateThaiRange([
-                        props.row.dateStartLeave,
-                        props.row.dateEndLeave,
-                      ])
-                    }}
-                  </div>
-                  <div v-else-if="col.name == 'status'">
-                    {{ statusLeave(col.value) }}
-                  </div>
-                  <div v-else>
-                    {{ col.value ? col.value : "-" }}
-                  </div>
-                </q-td>
-              </q-tr>
-            </template>
-          </d-table>
-        </q-page>
-      </q-page-container>
-    </q-layout>
+          </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"
+            options-cover
+            style="min-width: 150px"
+          />
+        </div>
+        <d-table
+          ref="table"
+          flat
+          bordered
+          dense
+          :columns="columns"
+          :rows="rows"
+          :paging="true"
+          v-model:pagination="historyPagination"
+          :rows-per-page-options="[10, 25, 50, 100]"
+          :visible-columns="visibleColumns"
+          :filter="filterKeyword"
+        >
+          >
+          <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" class="cursor-pointer">
+              <q-td v-for="col in props.cols" :key="col.id">
+                <div v-if="col.name === 'no'">
+                  {{
+                    (formFilter.page - 1) * formFilter.pageSize +
+                    props.rowIndex +
+                    1
+                  }}
+                </div>
+                <div v-else-if="col.name == 'dateLeave'">
+                  {{
+                    dateThaiRange([
+                      props.row.dateStartLeave,
+                      props.row.dateEndLeave,
+                    ])
+                  }}
+                </div>
+                <div v-else-if="col.name == 'status'">
+                  {{ statusLeave(col.value) }}
+                </div>
+                <div v-else>
+                  {{ col.value ? col.value : "-" }}
+                </div>
+              </q-td>
+            </q-tr>
+          </template>
+        </d-table>
+      </q-card-section>
+    </q-card>
   </q-dialog>
 </template>
diff --git a/src/modules/04_registryNew/components/detail/GovernmentInformation/04_PerformSpecialWork.vue b/src/modules/04_registryNew/components/detail/GovernmentInformation/04_PerformSpecialWork.vue
index c705a7c7a..c89d2974f 100644
--- a/src/modules/04_registryNew/components/detail/GovernmentInformation/04_PerformSpecialWork.vue
+++ b/src/modules/04_registryNew/components/detail/GovernmentInformation/04_PerformSpecialWork.vue
@@ -287,8 +287,8 @@ onMounted(async () => {
 });
 </script>
 <template>
-  <div class="row items-center q-gutter-x-sm q-py-sm">
-    <q-btn color="primary" icon="add" flat round @click="openDialogAdd()"
+  <div class="row items-center q-gutter-x-sm q-pb-sm">
+    <q-btn dense color="primary" icon="add" flat round @click="openDialogAdd()"
       ><q-tooltip>เพิ่มข้อมูล</q-tooltip></q-btn
     >
 
@@ -518,217 +518,202 @@ onMounted(async () => {
   </d-table>
 
   <q-dialog v-model="modal" persistent>
-    <q-layout
-      view="lHh lpr lFf"
-      container
-      style="height: 350px"
-      class="bg-white"
-    >
+    <q-card>
       <q-form @submit.prevent greedy @validation-success="onSubmit()">
-        <q-header>
-          <q-toolbar>
-            <DialogHeader
-              :tittle="
-                edit
-                  ? 'แก้ไขข้อมูลปฏิบัติราชการพิเศษ'
-                  : 'เพิ่มข้อมูลปฏิบัติราชการพิเศษ'
-              "
-              :close="closeDialog"
-            />
-          </q-toolbar>
-          <q-separator color="grey-4" />
-        </q-header>
-
-        <q-page-container>
-          <q-page class="q-pa-md">
-            <div class="row col-12 q-col-gutter-x-xs q-col-gutter-y-xs">
-              <div class="col-xs-6 col-sm-6 col-md-6">
-                <datepicker
-                  menu-class-name="modalfix"
-                  v-model="dutyData.dateStart"
-                  :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
-                      ref="dateStartRef"
-                      class="full-width inputgreen cursor-pointer"
-                      outlined
-                      dense
-                      :model-value="date2Thai(dutyData.dateStart)"
-                      :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>
-              <div class="col-xs-6 col-sm-6 col-md-6">
-                <datepicker
-                  menu-class-name="modalfix"
-                  v-model="dutyData.dateEnd"
-                  :locale="'th'"
-                  autoApply
-                  :enableTimePicker="false"
-                  :min-date="dutyData.dateStart"
-                  :readonly="!dutyData.dateStart"
-                  week-start="0"
-                >
-                  <template #year="{ year }">{{ year + 543 }}</template>
-                  <template #year-overlay-value="{ value }">{{
-                    parseInt(value + 543)
-                  }}</template>
-                  <template #trigger>
-                    <q-input
-                      ref="dateEndRef"
-                      :readonly="!dutyData.dateStart"
-                      class="full-width inputgreen cursor-pointer"
-                      dense
-                      outlined
-                      :model-value="date2Thai(dutyData.dateEnd)"
-                      :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>
-              <div class="col-12">
-                <q-input
-                  ref="referenceRef"
-                  class="full-width inputgreen cursor-pointer"
-                  outlined
-                  dense
-                  lazy-rules
-                  autogrow
-                  v-model="dutyData.reference"
-                  :rules="[(val) => !!val || `${'กรุณากรอกเอกสารอ้างอิง'}`]"
-                  hide-bottom-space
-                  :label="`${'เอกสารอ้างอิง'}`"
-                />
-              </div>
-              <div class="col-12">
-                <q-input
-                  ref="detailRef"
-                  class="full-width inputgreen cursor-pointer"
-                  outlined
-                  dense
-                  lazy-rules
-                  autogrow
-                  v-model="dutyData.detail"
-                  :rules="[(val) => !!val || `${'กรุณากรอกรายละเอียด'}`]"
-                  hide-bottom-space
-                  :label="`${'รายละเอียด'}`"
-                />
-              </div>
-              <div class="col-xs-6 col-sm-6 col-md-6">
-                <q-input
-                  class="full-width inputgreen cursor-pointer"
-                  outlined
-                  dense
-                  v-model="dutyData.refCommandNo"
-                  :label="`${'เลขที่คำสั่ง'}`"
-                >
-                  <template v-slot:append>
-                    <q-icon name="mdi-file" class="cursor-pointer" />
-                  </template>
-                </q-input>
-              </div>
-              <div class="col-xs-6 col-sm-6 col-md-6">
-                <datepicker
-                  menu-class-name="modalfix"
-                  v-model="dutyData.refCommandDate"
-                  :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
-                      class="full-width inputgreen cursor-pointer"
-                      outlined
-                      dense
-                      lazy-rules
-                      :borderless="!edit"
-                      :model-value="
-                      dutyData.refCommandDate == null ? null : date2Thai(dutyData.refCommandDate as Date)
-                    "
-                      hide-bottom-space
-                      :label="`${'เอกสารอ้างอิง (ลงวันที่)'}`"
-                      clearable
-                      @clear="dutyData.refCommandDate = null"
-                    >
-                      <template v-slot:prepend>
-                        <q-icon
-                          name="event"
-                          class="cursor-pointer"
-                          color="primary"
-                        >
-                        </q-icon>
-                      </template>
-                      <template
-                        v-if="dutyData.refCommandDate && edit"
-                        v-slot:append
+        <DialogHeader
+          :tittle="
+            edit
+              ? 'แก้ไขข้อมูลปฏิบัติราชการพิเศษ'
+              : 'เพิ่มข้อมูลปฏิบัติราชการพิเศษ'
+          "
+          :close="closeDialog"
+        />
+        <q-separator color="grey-4" />
+        <q-card-section style="max-height: 50vh" class="scroll">
+          <div class="row col-12 q-col-gutter-x-xs q-col-gutter-y-xs">
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <datepicker
+                menu-class-name="modalfix"
+                v-model="dutyData.dateStart"
+                :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
+                    ref="dateStartRef"
+                    class="full-width inputgreen cursor-pointer"
+                    outlined
+                    dense
+                    :model-value="date2Thai(dutyData.dateStart)"
+                    :rules="[
+                      (val) => !!val || `${'กรุณาเลือกวันที่เริ่มต้น'}`,
+                    ]"
+                    hide-bottom-space
+                    :label="`${'วันที่เริ่มต้น'}`"
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        color="primary"
                       >
-                      </template>
-                    </q-input>
-                  </template>
-                </datepicker>
-              </div>
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
             </div>
-          </q-page>
-        </q-page-container>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <datepicker
+                menu-class-name="modalfix"
+                v-model="dutyData.dateEnd"
+                :locale="'th'"
+                autoApply
+                :enableTimePicker="false"
+                :min-date="dutyData.dateStart"
+                :readonly="!dutyData.dateStart"
+                week-start="0"
+              >
+                <template #year="{ year }">{{ year + 543 }}</template>
+                <template #year-overlay-value="{ value }">{{
+                  parseInt(value + 543)
+                }}</template>
+                <template #trigger>
+                  <q-input
+                    ref="dateEndRef"
+                    :readonly="!dutyData.dateStart"
+                    class="full-width inputgreen cursor-pointer"
+                    dense
+                    outlined
+                    :model-value="date2Thai(dutyData.dateEnd)"
+                    :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>
+            <div class="col-12">
+              <q-input
+                ref="referenceRef"
+                class="full-width inputgreen cursor-pointer"
+                outlined
+                dense
+                lazy-rules
+                autogrow
+                v-model="dutyData.reference"
+                :rules="[(val) => !!val || `${'กรุณากรอกเอกสารอ้างอิง'}`]"
+                hide-bottom-space
+                :label="`${'เอกสารอ้างอิง'}`"
+              />
+            </div>
+            <div class="col-12">
+              <q-input
+                ref="detailRef"
+                class="full-width inputgreen cursor-pointer"
+                outlined
+                dense
+                lazy-rules
+                autogrow
+                v-model="dutyData.detail"
+                :rules="[(val) => !!val || `${'กรุณากรอกรายละเอียด'}`]"
+                hide-bottom-space
+                :label="`${'รายละเอียด'}`"
+              />
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <q-input
+                class="full-width inputgreen cursor-pointer"
+                outlined
+                dense
+                v-model="dutyData.refCommandNo"
+                :label="`${'เลขที่คำสั่ง'}`"
+              >
+                <template v-slot:append>
+                  <q-icon name="mdi-file" class="cursor-pointer" />
+                </template>
+              </q-input>
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <datepicker
+                menu-class-name="modalfix"
+                v-model="dutyData.refCommandDate"
+                :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
+                    class="full-width inputgreen cursor-pointer"
+                    outlined
+                    dense
+                    lazy-rules
+                    :borderless="!edit"
+                    :model-value="
+                    dutyData.refCommandDate == null ? null : date2Thai(dutyData.refCommandDate as Date)
+                  "
+                    hide-bottom-space
+                    :label="`${'เอกสารอ้างอิง (ลงวันที่)'}`"
+                    clearable
+                    @clear="dutyData.refCommandDate = null"
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        color="primary"
+                      >
+                      </q-icon>
+                    </template>
+                    <template
+                      v-if="dutyData.refCommandDate && edit"
+                      v-slot:append
+                    >
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
+          </div>
+        </q-card-section>
         <q-separator />
-        <q-footer>
-          <q-separator color="grey-4" />
-          <q-toolbar class="fit row wrap justify-end items-start content-start">
-            <q-btn
-              dense
-              unelevated
-              label="บันทึก"
-              id="onSubmit"
-              type="submit"
-              color="public"
-              class="q-px-md"
-            >
-              <q-tooltip>บันทึกข้อมูล</q-tooltip>
-            </q-btn>
-          </q-toolbar>
-        </q-footer>
+        <q-card-actions align="right">
+          <q-btn
+            dense
+            unelevated
+            label="บันทึก"
+            id="onSubmit"
+            type="submit"
+            color="public"
+            class="q-px-md"
+          >
+            <q-tooltip>บันทึกข้อมูล</q-tooltip>
+          </q-btn>
+        </q-card-actions>
       </q-form>
-    </q-layout>
+    </q-card>
   </q-dialog>
 
   <DialogHistory v-model:modal="modalHistory" v-model:id="id" />
diff --git a/src/modules/04_registryNew/components/detail/GovernmentInformation/04_PerformSpecialWorkHistory.vue b/src/modules/04_registryNew/components/detail/GovernmentInformation/04_PerformSpecialWorkHistory.vue
index 19b332723..2e876fb3e 100644
--- a/src/modules/04_registryNew/components/detail/GovernmentInformation/04_PerformSpecialWorkHistory.vue
+++ b/src/modules/04_registryNew/components/detail/GovernmentInformation/04_PerformSpecialWorkHistory.vue
@@ -188,105 +188,92 @@ watch(modal, (status) => {
 
 <template>
   <q-dialog v-model="modal" persistent>
-    <q-layout
-      view="lHh lpr lFf"
-      container
-      style="height: 500px; min-width: 80%"
-      class="bg-white"
-    >
-      <q-header>
-        <q-toolbar>
-          <DialogHeader
-            tittle="ประวัติแก้ไขปฏิบัติราชการพิเศษ"
-            :close="() => (modal = false)"
-          />
-        </q-toolbar>
-        <q-separator color="grey-4" />
-      </q-header>
-
-      <q-page-container>
-        <q-page class="q-pa-md">
-          <div class="row q-gutter-sm q-mb-sm">
-            <q-space />
-            <q-input
-              standout
-              dense
-              v-model="filterKeyword"
-              ref="filterRef"
-              outlined
-              placeholder="ค้นหา"
-              debounce="300"
-            >
-              <template v-slot:append>
-                <q-icon
-                  v-if="filterKeyword == ''"
-                  name="search"
-                  @click.stop.prevent="filterKeyword = ''"
-                  class="cursor-pointer"
-                />
-                <q-icon
-                  v-if="filterKeyword"
-                  name="cancel"
-                  @click.stop.prevent="filterKeyword = ''"
-                  class="cursor-pointer"
-                />
-              </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"
-              options-cover
-              style="min-width: 150px"
-            />
-          </div>
-          <d-table
-            ref="table"
-            flat
-            bordered
+    <q-card style="min-width: 80%">
+      <DialogHeader
+        tittle="ประวัติแก้ไขปฏิบัติราชการพิเศษ"
+        :close="() => (modal = false)"
+      />
+      <q-card-section style="max-height: 50vh" class="scroll">
+        <div class="row q-gutter-sm q-mb-sm">
+          <q-space />
+          <q-input
+            standout
             dense
-            :columns="columns"
-            :rows="rows"
-            :paging="true"
-            v-model:pagination="historyPagination"
-            :rows-per-page-options="[10, 25, 50, 100]"
-            :visible-columns="visibleColumns"
-            :filter="filterKeyword"
+            v-model="filterKeyword"
+            ref="filterRef"
+            outlined
+            placeholder="ค้นหา"
+            debounce="300"
           >
-            >
-            <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 v-slot:append>
+              <q-icon
+                v-if="filterKeyword == ''"
+                name="search"
+                @click.stop.prevent="filterKeyword = ''"
+                class="cursor-pointer"
+              />
+              <q-icon
+                v-if="filterKeyword"
+                name="cancel"
+                @click.stop.prevent="filterKeyword = ''"
+                class="cursor-pointer"
+              />
             </template>
-            <template v-slot:body="props">
-              <q-tr :props="props" class="cursor-pointer">
-                <q-td v-for="col in props.cols" :key="col.id">
-                  <div v-if="col.name === 'no'">
-                    {{
-                      (formFilter.page - 1) * formFilter.pageSize +
-                      props.rowIndex +
-                      1
-                    }}
-                  </div>
-                  <div v-else class="table_ellipsis">
-                    {{ col.value ? col.value : "-" }}
-                  </div>
-                </q-td>
-              </q-tr>
-            </template>
-          </d-table>
-        </q-page>
-      </q-page-container>
-    </q-layout>
+          </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"
+            options-cover
+            style="min-width: 150px"
+          />
+        </div>
+        <d-table
+          ref="table"
+          flat
+          bordered
+          dense
+          :columns="columns"
+          :rows="rows"
+          :paging="true"
+          v-model:pagination="historyPagination"
+          :rows-per-page-options="[10, 25, 50, 100]"
+          :visible-columns="visibleColumns"
+          :filter="filterKeyword"
+        >
+          >
+          <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" class="cursor-pointer">
+              <q-td v-for="col in props.cols" :key="col.id">
+                <div v-if="col.name === 'no'">
+                  {{
+                    (formFilter.page - 1) * formFilter.pageSize +
+                    props.rowIndex +
+                    1
+                  }}
+                </div>
+                <div v-else class="table_ellipsis">
+                  {{ col.value ? col.value : "-" }}
+                </div>
+              </q-td>
+            </q-tr>
+          </template>
+        </d-table>
+      </q-card-section>
+    </q-card>
   </q-dialog>
 </template>
diff --git a/src/modules/04_registryNew/components/detail/GovernmentInformation/Main.vue b/src/modules/04_registryNew/components/detail/GovernmentInformation/Main.vue
index f9be3a062..880fc7fab 100644
--- a/src/modules/04_registryNew/components/detail/GovernmentInformation/Main.vue
+++ b/src/modules/04_registryNew/components/detail/GovernmentInformation/Main.vue
@@ -10,22 +10,23 @@ import PerformSpecialWork from "@/modules/04_registryNew/components/detail/Gover
 const tab = ref<string>("1");
 </script>
 <template>
-  <div class="row items-center q-mb-md">
-    <div class="text-dark row items-center text-weight-bold">
-      <q-icon name="mdi-account-tie" class="q-mr-md" size="sm" />
-      <h3 class="resigtry-tab-title">ข้อมูลราชการ</h3>
+  <div class="row items-center q-my-md">
+    <div class="text-dark row items-center q-px-md">
+      <q-icon name="mdi-account" class="q-mr-md" size="22px" />
+      <div class="text-subtitle1 text-weight-bold">ข้อมูลราชการ</div>
     </div>
   </div>
 
   <q-separator />
   <q-tabs
     v-model="tab"
-    class="text-grey"
-    active-color="blue"
-    indicator-color="white"
+    active-color="blue-8"
     align="left"
-    narrow-indicator
     bordered
+    narrow-indicator
+    indicator-color="transparent"
+    dense
+    class="text-grey q-pl-sm"
   >
     <q-tab name="1" label="ข้อมูลราชการ" />
     <q-tab name="2" label="วินัย" />
diff --git a/src/modules/04_registryNew/components/detail/Other/Main.vue b/src/modules/04_registryNew/components/detail/Other/Main.vue
index 767f96360..056106c15 100644
--- a/src/modules/04_registryNew/components/detail/Other/Main.vue
+++ b/src/modules/04_registryNew/components/detail/Other/Main.vue
@@ -8,22 +8,23 @@ import Documentipline from "@/modules/04_registryNew/components/detail/Other/02_
 const tab = ref<string>("1");
 </script>
 <template>
-  <div class="row items-center q-mb-md">
-    <div class="text-dark row items-center text-weight-bold">
-      <q-icon name="mdi-bookmark" class="q-mr-md" size="sm" />
-      <h3 class="resigtry-tab-title">เอกสารหลักฐานและอื่นๆ</h3>
+  <div class="row items-center q-my-md">
+    <div class="text-dark row items-center q-px-md">
+      <q-icon name="mdi-account" class="q-mr-md" size="22px" />
+      <div class="text-subtitle1 text-weight-bold">เอกสารหลักฐานและอื่นๆ</div>
     </div>
   </div>
 
   <q-separator />
   <q-tabs
     v-model="tab"
-    class="text-grey"
-    active-color="blue"
-    indicator-color="white"
+    active-color="blue-8"
     align="left"
-    narrow-indicator
     bordered
+    narrow-indicator
+    indicator-color="transparent"
+    dense
+    class="text-grey q-pl-sm"
   >
     <q-tab name="1" label="ข้อมูลอื่นๆ" />
     <q-tab name="2" label="เอกสารหลักฐาน" />
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 8db4e48ff..dc2cc1d55 100644
--- a/src/modules/04_registryNew/components/detail/PersonalInformation/01_Profile.vue
+++ b/src/modules/04_registryNew/components/detail/PersonalInformation/01_Profile.vue
@@ -372,17 +372,18 @@ onMounted(async () => {
 </script>
 <template>
   <div class="row q-gutter-sm items-center">
-    <div class="toptitle col text-right">
+    <div class="toptitle col text-right q-gutter-x-sm">
       <q-btn
         flat
         round
+        dense
         icon="mdi-pencil-outline"
         color="primary"
         @click="onClickOpenDialog"
       >
         <q-tooltip>แก้ไขข้อมูล</q-tooltip>
       </q-btn>
-      <q-btn flat round icon="mdi-history" color="info" @click="clickHistory">
+      <q-btn dense flat round icon="mdi-history" color="info" @click="clickHistory">
         <q-tooltip>ประวัติแก้ไขข้อมูลส่วนตัว</q-tooltip>
       </q-btn>
     </div>
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 3490935db..f13ac6e3a 100644
--- a/src/modules/04_registryNew/components/detail/PersonalInformation/02_NameChangeHistory.vue
+++ b/src/modules/04_registryNew/components/detail/PersonalInformation/02_NameChangeHistory.vue
@@ -538,11 +538,12 @@ watch(
 </script>
 
 <template>
-  <q-toolbar style="padding: 0px" class="text-primary row justify-end q-mb-xs">
+  <div class="text-primary row q-mb-sm">
     <q-btn
       round
       flat
       color="primary"
+      dense
       icon="add"
       @click="
         () => {
@@ -589,7 +590,7 @@ watch(
       :options="columns"
       :display-value="$q.lang.table.columns"
     />
-  </q-toolbar>
+  </div>
 
   <d-table
     flat
diff --git a/src/modules/04_registryNew/components/detail/PersonalInformation/03_Address.vue b/src/modules/04_registryNew/components/detail/PersonalInformation/03_Address.vue
index 210880872..4cee5d5e8 100644
--- a/src/modules/04_registryNew/components/detail/PersonalInformation/03_Address.vue
+++ b/src/modules/04_registryNew/components/detail/PersonalInformation/03_Address.vue
@@ -478,17 +478,18 @@ onMounted(async () => {
 </script>
 <template>
   <div class="row q-gutter-sm items-center">
-    <div class="toptitle col text-right">
+    <div class="toptitle col text-right q-gutter-x-sm">
       <q-btn
         flat
         round
+        dense=""
         icon="mdi-pencil-outline"
         color="primary"
         @click="onClickOpenDialog"
       >
         <q-tooltip>แก้ไขข้อมูล</q-tooltip>
       </q-btn>
-      <q-btn flat round icon="mdi-history" color="info" @click="clickHistory">
+      <q-btn dense flat round icon="mdi-history" color="info" @click="clickHistory">
         <q-tooltip>ประวัติข้อมูลที่อยู่</q-tooltip>
       </q-btn>
     </div>
@@ -566,22 +567,11 @@ onMounted(async () => {
 
   <!-- Edit Dialog -->
   <q-dialog v-model="modal" persistent>
-    <q-layout
-      view="lHh lpr lFf"
-      container
-      style="height: 600px"
-      class="bg-white"
-    >
+    <q-card>
       <q-form greedy @submit.prevent @validation-success="onSubmit">
-        <q-header>
-          <q-toolbar>
-            <DialogHeader tittle="แก้ไขข้อมูลที่อยู่" :close="clickClose" />
-          </q-toolbar>
-          <q-separator color="grey-4" />
-        </q-header>
-
-        <q-page-container>
-          <q-page class="q-pa-md">
+        <DialogHeader tittle="แก้ไขข้อมูลที่อยู่" :close="clickClose" />
+        <q-separator color="grey-4" />
+        <q-card-section style="max-height: 60vh" class="scroll">
             <div class="col-12 q-pb-xs">
               <q-input
                 dense
@@ -799,122 +789,107 @@ onMounted(async () => {
                 </div>
               </div>
             </div>
-          </q-page>
-        </q-page-container>
+        </q-card-section>
         <q-separator />
-        <q-footer>
-          <q-separator color="grey-4" />
-          <q-toolbar class="fit row wrap justify-end items-start content-start">
-            <q-btn
-              dense
-              unelevated
-              label="บันทึก"
-              id="onSubmit"
-              type="submit"
-              color="public"
-              class="q-px-md"
-            >
-              <q-tooltip>บันทึกข้อมูล</q-tooltip>
-            </q-btn>
-          </q-toolbar>
-        </q-footer>
+        <q-card-actions align="right">
+          <q-btn
+            dense
+            unelevated
+            label="บันทึก"
+            id="onSubmit"
+            type="submit"
+            color="public"
+            class="q-px-md"
+          >
+            <q-tooltip>บันทึกข้อมูล</q-tooltip>
+          </q-btn>
+        </q-card-actions>
       </q-form>
-    </q-layout>
+    </q-card>
   </q-dialog>
 
   <q-dialog v-model="modalHistory" persistent>
-    <q-layout
-      view="lHh lpr lFf"
-      container
-      style="height: 500px; min-width: 80%"
-      class="bg-white"
-    >
-      <q-header>
-        <q-toolbar>
-          <DialogHeader
-            tittle="ประวัติแก้ไขข้อมูลที่อยู่"
-            :close="() => (modalHistory = false)"
-          />
-        </q-toolbar>
-        <q-separator color="grey-4" />
-      </q-header>
+    <q-card style="min-width: 80%">
+      <DialogHeader
+        tittle="ประวัติแก้ไขข้อมูลที่อยู่"
+        :close="() => (modalHistory = false)"
+      />
+      <q-separator color="grey-4" />
 
-      <q-page-container>
-        <q-page class="q-pa-md">
-          <div class="row q-gutter-sm q-mb-sm">
-            <q-space />
-            <q-input
-              standout
-              dense
-              v-model="filterHistory"
-              ref="filterRef"
-              outlined
-              placeholder="ค้นหา"
-              debounce="300"
-            >
-              <template v-slot:append>
-                <q-icon
-                  v-if="filterHistory == ''"
-                  name="search"
-                  @click.stop.prevent="filterHistory = ''"
-                  class="cursor-pointer"
-                />
-                <q-icon
-                  v-if="filterHistory"
-                  name="cancel"
-                  @click.stop.prevent="filterHistory = ''"
-                  class="cursor-pointer"
-                />
-              </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"
-              options-cover
-              style="min-width: 150px"
-            />
-          </div>
-          <d-table
-            ref="table"
-            flat
-            bordered
+      <q-card-section style="max-height: 50vh" class="scroll">
+        <div class="row q-gutter-sm q-mb-sm">
+          <q-space />
+          <q-input
+            standout
             dense
-            :columns="columnsHistory"
-            :rows="rowsHistory"
-            :paging="true"
-            :rows-per-page-options="[10, 25, 50, 100]"
-            :visible-columns="visibleColumnsHistory"
-            :filter="filterHistory"
+            v-model="filterHistory"
+            ref="filterRef"
+            outlined
+            placeholder="ค้นหา"
+            debounce="300"
           >
-            >
-            <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 v-slot:append>
+              <q-icon
+                v-if="filterHistory == ''"
+                name="search"
+                @click.stop.prevent="filterHistory = ''"
+                class="cursor-pointer"
+              />
+              <q-icon
+                v-if="filterHistory"
+                name="cancel"
+                @click.stop.prevent="filterHistory = ''"
+                class="cursor-pointer"
+              />
             </template>
-            <template v-slot:body="props">
-              <q-tr :props="props" class="cursor-pointer">
-                <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-page>
-      </q-page-container>
-    </q-layout>
+          </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"
+            options-cover
+            style="min-width: 150px"
+          />
+        </div>
+        <d-table
+          ref="table"
+          flat
+          bordered
+          dense
+          :columns="columnsHistory"
+          :rows="rowsHistory"
+          :paging="true"
+          :rows-per-page-options="[10, 25, 50, 100]"
+          :visible-columns="visibleColumnsHistory"
+          :filter="filterHistory"
+        >
+          >
+          <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" class="cursor-pointer">
+              <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>
 
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 db6fc1b32..80280a579 100644
--- a/src/modules/04_registryNew/components/detail/PersonalInformation/04_Family.vue
+++ b/src/modules/04_registryNew/components/detail/PersonalInformation/04_Family.vue
@@ -307,14 +307,14 @@ onMounted(async () => {
 
 <template>
   <div>
-    <div class="flex justify-end">
-      <div>
+    <div class="flex justify-end q-gutter-x-sm">
         <q-btn
           round
           flat
           color="primary"
           icon="mdi-pencil-outline"
           size="14px"
+          dense
           @click="
             () => {
               editForm(rows);
@@ -327,6 +327,7 @@ onMounted(async () => {
         <q-btn
           round
           flat
+          dense
           color="info"
           icon="mdi-history"
           size="14px"
@@ -338,7 +339,6 @@ onMounted(async () => {
         >
           <q-tooltip>ประวัติการแก้ไขข้อมูลครอบครัว</q-tooltip></q-btn
         >
-      </div>
     </div>
     <div v-if="fatherData.firstName !== null">
       <div class="col-12 row q-pb-sm">
@@ -348,7 +348,7 @@ onMounted(async () => {
       </div>
       <q-card bordered class="bg-grey-1 q-gutter-md q-ma-none q-pb-md">
         <div class="row items-center">
-          <div class="col-2">
+          <div class="col-2 text-grey-6 text-weight-medium">
             <div>เลขบัตรประจำตัวประชาชน</div>
           </div>
           <div class="col">
@@ -356,7 +356,7 @@ onMounted(async () => {
           </div>
         </div>
         <div class="row items-center">
-          <div class="col-2">ชื่อ-นามสกุล</div>
+          <div class="col-2 text-grey-6 text-weight-medium">ชื่อ-นามสกุล</div>
           <div class="col-6">
             {{
               fatherData.prefix
@@ -367,13 +367,13 @@ onMounted(async () => {
                 : "-"
             }}
           </div>
-          <div class="col-1">อาชีพ</div>
+          <div class="col-1 text-grey-6 text-weight-medium">อาชีพ</div>
           <div class="col">
             {{ fatherData.job ? fatherData.job : "-" }}
           </div>
         </div>
         <div class="row items-center">
-          <div class="col-2">สถานภาพการมีชีวิต</div>
+          <div class="col-2 text-grey-6 text-weight-medium">สถานภาพการมีชีวิต</div>
           <div class="col-10">
             <div v-if="fatherData.isLive">มีชีวิตอยู่</div>
             <div v-else>ถึงแก่กรรม</div>
@@ -381,15 +381,16 @@ onMounted(async () => {
         </div>
       </q-card>
     </div>
+    <q-separator  class="q-my-lg" />
     <div v-if="motherData.firstName !== null">
-      <div class="col-12 row q-pb-sm q-pt-md">
+      <div class="col-12 row q-pb-sm">
         <div class="q-mr-md text-weight-bold text-primary text-subtitle1">
           • มารดา
         </div>
       </div>
       <q-card bordered class="bg-grey-1 q-gutter-md q-ma-none q-pb-md">
         <div class="row items-center">
-          <div class="col-2">
+          <div class="col-2 text-grey-6 text-weight-medium">
             <div>เลขบัตรประจำตัวประชาชน</div>
           </div>
           <div class="col">
@@ -397,7 +398,7 @@ onMounted(async () => {
           </div>
         </div>
         <div class="row items-center">
-          <div class="col-2">ชื่อ-นามสกุล</div>
+          <div class="col-2 text-grey-6 text-weight-medium">ชื่อ-นามสกุล</div>
           <div class="col-6">
             {{
               motherData.prefix
@@ -408,13 +409,13 @@ onMounted(async () => {
                 : "-"
             }}
           </div>
-          <div class="col-1">อาชีพ</div>
+          <div class="col-1 text-grey-6 text-weight-medium">อาชีพ</div>
           <div class="col">
             {{ motherData.job ? motherData.job : "-" }}
           </div>
         </div>
         <div class="row items-center">
-          <div class="col-2">สถานภาพการมีชีวิต</div>
+          <div class="col-2 text-grey-6 text-weight-medium">สถานภาพการมีชีวิต</div>
           <div class="col">
             <div v-if="motherData.isLive">มีชีวิตอยู่</div>
             <div v-else>ถึงแก่กรรม</div>
@@ -422,15 +423,16 @@ onMounted(async () => {
         </div>
       </q-card>
     </div>
+    <q-separator  class="q-my-lg" />
     <div v-if="spouseData.firstName !== null">
-      <div class="col-12 row q-pb-sm q-pt-md">
+      <div class="col-12 row q-pb-sm">
         <div class="q-mr-md text-weight-bold text-primary text-subtitle1">
           • คู่สมรส
         </div>
       </div>
       <q-card bordered class="bg-grey-1 q-gutter-md q-ma-none q-pb-md">
         <div class="row items-center">
-          <div class="col-2">
+          <div class="col-2 text-grey-6 text-weight-medium">
             <div>เลขบัตรประจำตัวประชาชน</div>
           </div>
           <div class="col">
@@ -438,7 +440,7 @@ onMounted(async () => {
           </div>
         </div>
         <div class="row items-center">
-          <div class="col-2">ชื่อ-นามสกุล</div>
+          <div class="col-2 text-grey-6 text-weight-medium">ชื่อ-นามสกุล</div>
           <div class="col-6">
             {{
               spouseData.prefix
@@ -449,13 +451,13 @@ onMounted(async () => {
                 : "-"
             }}
           </div>
-          <div class="col-1">อาชีพ</div>
+          <div class="col-1 text-grey-6 text-weight-medium">อาชีพ</div>
           <div class="col">
             {{ spouseData.job ? spouseData.job : "-" }}
           </div>
         </div>
         <div class="row items-center">
-          <div class="col-2">สถานภาพการมีชีวิต</div>
+          <div class="col-2 text-grey-6 text-weight-medium">สถานภาพการมีชีวิต</div>
           <div class="col">
             <div v-if="spouseData.isLive">มีชีวิตอยู่</div>
             <div v-else>ถึงแก่กรรม</div>
@@ -463,47 +465,53 @@ onMounted(async () => {
         </div>
       </q-card>
     </div>
+    <q-separator  class="q-my-lg" />
     <div v-if="childrenData.childrens[0] !== undefined">
-      <div class="col-12 row q-pb-sm q-pt-md">
+      <div class="col-12 row q-pb-sm">
         <div class="q-mr-md text-weight-bold text-primary text-subtitle1">
           • บุตร
         </div>
       </div>
       <div v-for="(children, index) in childrenData.childrens" :key="index">
-        <div class="col-12 row q-gutter-sm q-pb-xs q-mt-xs">
-          <div class="text-medium">บุตรคนที่ : {{ index + 1 }}</div>
-        </div>
-        <q-card bordered class="bg-grey-1 q-gutter-md q-ma-none q-pb-md">
-          <div class="row items-center">
-            <div class="col-2">
-              <div>เลขบัตรประจำตัวประชาชน</div>
-            </div>
-            <div class="col-10">
-              {{ children.childrenCitizenId }}
+        <q-card bordered class="bg-grey-1  q-pb-md">
+          <div class="col-12 row q-py-sm q-px-md bg-grey-2 items-center ">
+            <div class=" text-weight-medium q-pr-md">
+              บุตรคนที่ : {{ index + 1 }}
             </div>
           </div>
-          <div class="row items-center">
-            <div class="col-2">ชื่อ-นามสกุล</div>
-            <div class="col-6">
-              {{
-                children.childrenPrefix
-                  ? children.childrenPrefix +
-                    children.childrenFirstName +
-                    " " +
-                    children.childrenLastName
-                  : "-"
-              }}
+          <q-separator/>
+          <div class="col-12 q-pa-md q-col-gutter-md">
+            <div class="row items-center ">
+              <div class="col-2 text-grey-6 text-weight-medium">
+                <div>เลขบัตรประจำตัวประชาชน</div>
+              </div>
+              <div class="col-10">
+                {{ children.childrenCitizenId }}
+              </div>
             </div>
-            <div class="col-1">อาชีพ</div>
-            <div class="col">
-              {{ children.childrenCareer }}
+            <div class="row items-center">
+              <div class="col-2 text-grey-6 text-weight-medium">ชื่อ-นามสกุล</div>
+              <div class="col-6">
+                {{
+                  children.childrenPrefix
+                    ? children.childrenPrefix +
+                      children.childrenFirstName +
+                      " " +
+                      children.childrenLastName
+                    : "-"
+                }}
+              </div>
+              <div class="col-1 text-grey-6 text-weight-medium">อาชีพ</div>
+              <div class="col">
+                {{ children.childrenCareer }}
+              </div>
             </div>
-          </div>
-          <div class="row items-center">
-            <div class="col-2">สถานภาพการมีชีวิต</div>
-            <div class="col">
-              <div v-if="children.childrenLive">มีชีวิตอยู่</div>
-              <div v-else>ถึงแก่กรรม</div>
+            <div class="row items-center">
+              <div class="col-2 text-grey-6 text-weight-medium">สถานภาพการมีชีวิต</div>
+              <div class="col">
+                <div v-if="children.childrenLive">มีชีวิตอยู่</div>
+                <div v-else>ถึงแก่กรรม</div>
+              </div>
             </div>
           </div>
         </q-card>
@@ -512,470 +520,477 @@ onMounted(async () => {
   </div>
 
   <q-dialog v-model="dialog" class="dialog" persistent>
-    <q-layout
-      view="lHh lpr lFf"
-      container
-      style="height: 90vh; min-width: 80%"
-      class="bg-white"
-    >
+    <q-card style="min-width: 80%">
       <q-form @submit.prevent greedy @validation-success="onSubmit()">
-        <q-header>
-          <q-toolbar>
-            <dialog-header tittle="แก้ไขข้อมูลครอบครัว" :close="closeDialog" />
-          </q-toolbar>
-          <q-separator color="grey-4" />
-        </q-header>
-
-        <q-page-container>
-          <q-page class="q-pa-md">
-            <div class="col-12 row q-pb-sm q-pt-md">
-              <div
-                class="q-mr-md q-pl-md text-weight-bold text-primary text-subtitle1"
-              >
-                • บิดา
-              </div>
-              <div class="flex q-gutter-sm">
-                <q-radio
-                  v-model="fatherDataEdit.isHaveInfo"
-                  checked-icon="task_alt"
-                  unchecked-icon="panorama_fish_eye"
-                  :val="1"
-                  label="มีข้อมูล"
-                  dense
-                  color="primary"
-                />
-                <q-radio
-                  v-model="fatherDataEdit.isHaveInfo"
-                  checked-icon="task_alt"
-                  unchecked-icon="panorama_fish_eye"
-                  :val="0"
-                  color="red"
-                  label="ไม่มีข้อมูล"
-                  dense
-                />
-              </div>
-            </div>
-            <q-card
-              v-if="fatherDataEdit.isHaveInfo"
-              bordered
-              class="bg-grey-1 q-pa-md"
-            >
-              <div class="row q-col-gutter-md">
-                <div class="col">
-                  <q-input
-                    :disable="!fatherDataEdit.isHaveInfo"
-                    outlined
-                    hide-bottom-space
-                    bg-color="white"
-                    dense
-                    v-model="fatherDataEdit.citizenId"
-                    :label="`${'เลขประจำตัวประชาชน'}`"
-                    maxlength="13"
-                    :rules="[
-                      (val) => val.length === 13 || 'กรุณากรอกเลขบัตรประชาชน',
-                    ]"
-                    class="inputgreen"
-                    mask="#############"
-                  />
-                </div>
-                <div class="col">
-                  <q-select
-                    :disable="!fatherDataEdit.isHaveInfo"
-                    outlined
-                    bg-color="white"
-                    lazy-rules
-                    hidden-space
-                    dense
-                    class="inputgreen"
-                    :rules="[(val) => !!val || 'กรุณาเลือกคำนำหน้าชื่อ']"
-                    label="คำนำหน้าชื่อ"
-                    v-model="fatherDataEdit.prefix"
-                    use-input
-                    input-debounce="0"
-                    emit-value
-                    map-options
-                    :options="store.Ops.prefixOps"
-                    option-label="name"
-                    option-value="name"
-                    @filter="(inputValue:string,
-                      doneFn:Function) => filterSelector(inputValue, doneFn,'prefixOps'
-                      ) "
-                  />
-                </div>
-                <div class="col">
-                  <q-input
-                    :disable="!fatherDataEdit.isHaveInfo"
-                    outlined
-                    dense
-                    bg-color="white"
-                    class="inputgreen"
-                    lazy-rules
-                    v-model="fatherDataEdit.firstName"
-                    :rules="[(val) => !!val || 'กรุณากรอกชื่อ']"
-                    label="ชื่อ"
-                    hidden-space
-                  />
-                </div>
-                <div class="col">
-                  <q-input
-                    :disable="!fatherDataEdit.isHaveInfo"
-                    outlined
-                    dense
-                    class="inputgreen"
-                    bg-color="white"
-                    lazy-rules
-                    v-model="fatherDataEdit.lastName"
-                    :rules="[(val) => !!val || 'กรุณากรอกนามสกุล']"
-                    label="นามสกุล"
-                  />
-                </div>
-                <div class="col">
-                  <q-input
-                    :disable="!fatherDataEdit.isHaveInfo"
-                    outlined
-                    dense
-                    class="inputgreen"
-                    bg-color="white"
-                    v-model="fatherDataEdit.job"
-                    label="อาชีพ"
-                  />
-                </div>
-              </div>
-              <div class="row">
-                <div class="q-mr-sm">สถานภาพการมีชีวิต</div>
-                <div>
-                  <q-radio
-                    :disable="!fatherDataEdit.isHaveInfo"
-                    class="q-mr-sm"
-                    v-model="fatherDataEdit.isLive"
-                    checked-icon="task_alt"
-                    unchecked-icon="panorama_fish_eye"
-                    :val="1"
-                    label="ยังมีชีวิตอยู่"
-                    dense
-                    :color="!fatherDataEdit.isHaveInfo ? 'grey' : 'primary'"
-                  />
-                  <q-radio
-                    :disable="!fatherDataEdit.isHaveInfo"
-                    v-model="fatherDataEdit.isLive"
-                    checked-icon="task_alt"
-                    unchecked-icon="panorama_fish_eye"
-                    :val="0"
-                    :color="!fatherDataEdit.isHaveInfo ? 'grey' : 'red'"
-                    label="ถึงแก่กรรม"
-                    dense
-                  />
-                </div>
-              </div>
-            </q-card>
-            <div class="col-12 row q-pb-sm q-pt-md q-mt-md">
-              <div
-                class="q-mr-md q-pl-md text-weight-bold text-primary text-subtitle1"
-              >
-                • มารดา
-              </div>
-              <div class="flex q-gutter-sm">
-                <q-radio
-                  v-model="motherDataEdit.isHaveInfo"
-                  checked-icon="task_alt"
-                  unchecked-icon="panorama_fish_eye"
-                  :val="1"
-                  label="มีข้อมูล"
-                  dense
-                  color="primary"
-                />
-                <q-radio
-                  v-model="motherDataEdit.isHaveInfo"
-                  checked-icon="task_alt"
-                  unchecked-icon="panorama_fish_eye"
-                  :val="0"
-                  color="red"
-                  label="ไม่มีข้อมูล"
-                  dense
-                />
-              </div>
-            </div>
-            <q-card
-              v-if="motherDataEdit.isHaveInfo"
-              bordered
-              class="bg-grey-1 q-pa-md"
-            >
-              <div class="row q-col-gutter-md">
-                <div class="col">
-                  <q-input
-                    :disable="!motherDataEdit.isHaveInfo"
-                    outlined
-                    hide-bottom-space
-                    bg-color="white"
-                    dense
-                    v-model="motherDataEdit.citizenId"
-                    :label="`${'เลขประจำตัวประชาชน'}`"
-                    maxlength="13"
-                    :rules="[
-                      (val) => val.length === 13 || 'กรุณากรอกเลขบัตรประชาชน',
-                    ]"
-                    class="inputgreen"
-                    mask="#############"
-                  />
-                </div>
-                <div class="col">
-                  <q-select
-                    :disable="!motherDataEdit.isHaveInfo"
-                    outlined
-                    bg-color="white"
-                    lazy-rules
-                    dense
-                    v-model="motherDataEdit.prefix"
-                    :rules="[(val) => !!val || 'กรุณาเลือกคำนำหน้าชื่อ']"
-                    label="คำนำหน้าชื่อ"
-                    hidden-space
-                    class="inputgreen"
-                    use-input
-                    input-debounce="0"
-                    emit-value
-                    map-options
-                    :options="store.Ops.prefixOps"
-                    option-label="name"
-                    option-value="name"
-                    @filter="(inputValue:string,
-                      doneFn:Function) => filterSelector(inputValue, doneFn,'prefixOps'
-                      ) "
-                  />
-                </div>
-                <div class="col">
-                  <q-input
-                    :disable="!motherDataEdit.isHaveInfo"
-                    outlined
-                    dense
-                    class="inputgreen"
-                    bg-color="white"
-                    lazy-rules
-                    v-model="motherDataEdit.firstName"
-                    :rules="[(val) => !!val || 'กรุณากรอกชื่อ']"
-                    label="ชื่อ"
-                    hidden-space
-                  />
-                </div>
-                <div class="col">
-                  <q-input
-                    :disable="!motherDataEdit.isHaveInfo"
-                    outlined
-                    class="inputgreen"
-                    dense
-                    bg-color="white"
-                    lazy-rules
-                    v-model="motherDataEdit.lastName"
-                    :rules="[(val) => !!val || 'กรุณากรอกนามสกุล']"
-                    label="นามสกุล"
-                  />
-                </div>
-                <div class="col">
-                  <q-input
-                    :disable="!motherDataEdit.isHaveInfo"
-                    outlined
-                    class="inputgreen"
-                    dense
-                    bg-color="white"
-                    v-model="motherDataEdit.job"
-                    label="อาชีพ"
-                  />
-                </div>
-              </div>
-              <div class="row">
-                <div class="q-mr-sm">สถานภาพการมีชีวิต</div>
-                <div>
-                  <q-radio
-                    :disable="!motherDataEdit.isHaveInfo"
-                    class="q-mr-sm"
-                    v-model="motherDataEdit.isLive"
-                    checked-icon="task_alt"
-                    unchecked-icon="panorama_fish_eye"
-                    :val="1"
-                    label="ยังมีชีวิตอยู่"
-                    dense
-                    :color="!motherDataEdit.isHaveInfo ? 'grey' : 'primary'"
-                  />
-                  <q-radio
-                    :disable="!motherDataEdit.isHaveInfo"
-                    v-model="motherDataEdit.isLive"
-                    checked-icon="task_alt"
-                    unchecked-icon="panorama_fish_eye"
-                    :val="0"
-                    :color="!motherDataEdit.isHaveInfo ? 'grey' : 'red'"
-                    label="ถึงแก่กรรม"
-                    dense
-                  />
-                </div>
-              </div>
-            </q-card>
-            <div class="col-12 row q-pb-sm q-pt-md q-mt-md">
-              <div
-                class="q-mr-md q-pl-md text-weight-bold text-primary text-subtitle1"
-              >
-                • คู่สมรส
-              </div>
-              <div class="flex q-gutter-sm">
-                <q-radio
-                  v-model="spouseDataEdit.isHave"
-                  checked-icon="task_alt"
-                  unchecked-icon="panorama_fish_eye"
-                  :val="1"
-                  label="มี"
-                  dense
-                  color="primary"
-                />
-                <q-radio
-                  v-model="spouseDataEdit.isHave"
-                  checked-icon="task_alt"
-                  unchecked-icon="panorama_fish_eye"
-                  :val="0"
-                  color="red"
-                  label="ไม่มี"
-                  dense
-                />
-              </div>
-            </div>
-            <q-card
-              v-if="spouseDataEdit.isHave"
-              bordered
-              class="bg-grey-1 q-pa-md"
-            >
-              <div class="row q-col-gutter-md">
-                <div class="col">
-                  <q-input
-                    :disable="!spouseDataEdit.isHave"
-                    outlined
-                    hide-bottom-space
-                    bg-color="white"
-                    dense
-                    class="inputgreen"
-                    v-model="spouseDataEdit.citizenId"
-                    :label="`${'เลขประจำตัวประชาชน'}`"
-                    maxlength="13"
-                    :rules="[
-                      (val) => val.length === 13 || 'กรุณากรอกเลขบัตรประชาชน',
-                    ]"
-                    mask="#############"
-                  />
-                </div>
-                <div class="col">
-                  <q-select
-                    :disable="!spouseDataEdit.isHave"
-                    outlined
-                    class="inputgreen"
-                    bg-color="white"
-                    lazy-rules
-                    dense
-                    v-model="spouseDataEdit.prefix"
-                    :rules="[(val) => !!val || 'กรุณาเลือกคำนำหน้าชื่อ']"
-                    label="คำนำหน้าชื่อ"
-                    hidden-space
-                    use-input
-                    input-debounce="0"
-                    emit-value
-                    map-options
-                    :options="store.Ops.prefixOps"
-                    option-label="name"
-                    option-value="name"
-                    @filter="(inputValue: any,
-              doneFn: Function) => filterSelector(inputValue, doneFn, 'prefixOps'
-              )"
-                  />
-                </div>
-                <div class="col">
-                  <q-input
-                    :disable="!spouseDataEdit.isHave"
-                    outlined
-                    class="inputgreen"
-                    dense
-                    bg-color="white"
-                    lazy-rules
-                    v-model="spouseDataEdit.firstName"
-                    :rules="[(val) => !!val || 'กรุณากรอกชื่อ']"
-                    label="ชื่อ"
-                    hidden-space
-                  />
-                </div>
-                <div class="col">
-                  <q-input
-                    :disable="!spouseDataEdit.isHave"
-                    outlined
-                    dense
-                    class="inputgreen"
-                    bg-color="white"
-                    lazy-rules
-                    v-model="spouseDataEdit.lastName"
-                    :rules="[(val) => !!val || 'กรุณากรอกนามสกุล']"
-                    label="นามสกุล"
-                  />
-                </div>
-                <div class="col">
-                  <q-input
-                    :disable="!spouseDataEdit.isHave"
-                    outlined
-                    dense
-                    class="inputgreen"
-                    bg-color="white"
-                    v-model="spouseDataEdit.job"
-                    label="อาชีพ"
-                  />
-                </div>
-              </div>
-              <div class="row">
-                <div class="q-mr-sm">สถานภาพการมีชีวิต</div>
-                <div>
-                  <q-radio
-                    :disable="!spouseDataEdit.isHave"
-                    class="q-mr-sm"
-                    v-model="spouseDataEdit.isLive"
-                    checked-icon="task_alt"
-                    unchecked-icon="panorama_fish_eye"
-                    :val="1"
-                    label="ยังมีชีวิตอยู่"
-                    dense
-                    :color="!spouseDataEdit.isHave ? 'grey' : 'primary'"
-                  />
-                  <q-radio
-                    :disable="!spouseDataEdit.isHave"
-                    v-model="spouseDataEdit.isLive"
-                    checked-icon="task_alt"
-                    unchecked-icon="panorama_fish_eye"
-                    :val="0"
-                    :color="!motherData.isHaveInfo ? 'grey' : 'red'"
-                    label="ถึงแก่กรรม"
-                    dense
-                  />
-                </div>
-              </div>
-            </q-card>
-            <div class="col-12 row q-pb-sm q-pt-md items-center">
-              <div
-                class="q-mr-md q-pl-md text-weight-bold text-primary text-subtitle1"
-              >
-                • บุตร
-              </div>
-              <q-btn
-                flat
-                round
-                color="primary"
-                icon="add"
-                size="14px"
-                @click="addChildren"
-              >
-                <q-tooltip> เพิ่มข้อมูล </q-tooltip>
-              </q-btn>
-            </div>
+        <dialog-header tittle="แก้ไขข้อมูลครอบครัว" :close="closeDialog" />
+        <q-separator color="grey-4" />
+        <q-card-section style="max-height: 70vh" class="scroll">
+          <div class="col-12 row q-pb-sm">
             <div
-              v-for="(items, index) in childrenDataEdit.childrens"
-              :key="index"
+              class="q-mr-md q-pl-md text-weight-bold text-primary text-subtitle1"
             >
-              <div class="col-12 row q-gutter-sm q-pb-xs q-mt-xs">
-                <div class="text-medium q-pl-md">
-                  บุตรคนที่ : {{ index + 1 }}
-                </div>
+              • บิดา
+            </div>
+            <div class="flex q-gutter-sm">
+              <q-radio
+                v-model="fatherDataEdit.isHaveInfo"
+                checked-icon="task_alt"
+                unchecked-icon="panorama_fish_eye"
+                :val="1"
+                label="มีข้อมูล"
+                dense
+                color="primary"
+              />
+              <q-radio
+                v-model="fatherDataEdit.isHaveInfo"
+                checked-icon="task_alt"
+                unchecked-icon="panorama_fish_eye"
+                :val="0"
+                color="red"
+                label="ไม่มีข้อมูล"
+                dense
+              />
+            </div>
+          </div>
+          <q-card
+            v-if="fatherDataEdit.isHaveInfo"
+            bordered
+            class="bg-grey-1 q-pa-md"
+          >
+            <div class="row q-col-gutter-md">
+              <div class="col">
+                <q-input
+                  :disable="!fatherDataEdit.isHaveInfo"
+                  outlined
+                  hide-bottom-space
+                  bg-color="white"
+                  dense
+                  v-model="fatherDataEdit.citizenId"
+                  :label="`${'เลขประจำตัวประชาชน'}`"
+                  maxlength="13"
+                  :rules="[
+                    (val) => val.length === 13 || 'กรุณากรอกเลขบัตรประชาชน',
+                  ]"
+                  class="inputgreen"
+                  mask="#############"
+                />
               </div>
-              <div class="row items-center">
-                <q-card bordered class="bg-grey-1 q-pa-md col-11 q-mb-lg">
+              <div class="col">
+                <q-select
+                  :disable="!fatherDataEdit.isHaveInfo"
+                  outlined
+                  bg-color="white"
+                  lazy-rules
+                  hidden-space
+                  dense
+                  class="inputgreen"
+                  :rules="[(val) => !!val || 'กรุณาเลือกคำนำหน้าชื่อ']"
+                  label="คำนำหน้าชื่อ"
+                  v-model="fatherDataEdit.prefix"
+                  use-input
+                  input-debounce="0"
+                  emit-value
+                  map-options
+                  :options="store.Ops.prefixOps"
+                  option-label="name"
+                  option-value="name"
+                  @filter="(inputValue:string,
+                    doneFn:Function) => filterSelector(inputValue, doneFn,'prefixOps'
+                    ) "
+                />
+              </div>
+              <div class="col">
+                <q-input
+                  :disable="!fatherDataEdit.isHaveInfo"
+                  outlined
+                  dense
+                  bg-color="white"
+                  class="inputgreen"
+                  lazy-rules
+                  v-model="fatherDataEdit.firstName"
+                  :rules="[(val) => !!val || 'กรุณากรอกชื่อ']"
+                  label="ชื่อ"
+                  hidden-space
+                />
+              </div>
+              <div class="col">
+                <q-input
+                  :disable="!fatherDataEdit.isHaveInfo"
+                  outlined
+                  dense
+                  class="inputgreen"
+                  bg-color="white"
+                  lazy-rules
+                  v-model="fatherDataEdit.lastName"
+                  :rules="[(val) => !!val || 'กรุณากรอกนามสกุล']"
+                  label="นามสกุล"
+                />
+              </div>
+              <div class="col">
+                <q-input
+                  :disable="!fatherDataEdit.isHaveInfo"
+                  outlined
+                  dense
+                  class="inputgreen"
+                  bg-color="white"
+                  v-model="fatherDataEdit.job"
+                  label="อาชีพ"
+                />
+              </div>
+            </div>
+            <div class="row">
+              <div class="q-mr-sm">สถานภาพการมีชีวิต</div>
+              <div>
+                <q-radio
+                  :disable="!fatherDataEdit.isHaveInfo"
+                  class="q-mr-sm"
+                  v-model="fatherDataEdit.isLive"
+                  checked-icon="task_alt"
+                  unchecked-icon="panorama_fish_eye"
+                  :val="1"
+                  label="ยังมีชีวิตอยู่"
+                  dense
+                  :color="!fatherDataEdit.isHaveInfo ? 'grey' : 'primary'"
+                />
+                <q-radio
+                  :disable="!fatherDataEdit.isHaveInfo"
+                  v-model="fatherDataEdit.isLive"
+                  checked-icon="task_alt"
+                  unchecked-icon="panorama_fish_eye"
+                  :val="0"
+                  :color="!fatherDataEdit.isHaveInfo ? 'grey' : 'red'"
+                  label="ถึงแก่กรรม"
+                  dense
+                />
+              </div>
+            </div>
+          </q-card>
+          <q-separator  class="q-my-lg" />
+          <div class="col-12 row q-pb-sm">
+            <div
+              class="q-mr-md q-pl-md text-weight-bold text-primary text-subtitle1"
+            >
+              • มารดา
+            </div>
+            <div class="flex q-gutter-sm">
+              <q-radio
+                v-model="motherDataEdit.isHaveInfo"
+                checked-icon="task_alt"
+                unchecked-icon="panorama_fish_eye"
+                :val="1"
+                label="มีข้อมูล"
+                dense
+                color="primary"
+              />
+              <q-radio
+                v-model="motherDataEdit.isHaveInfo"
+                checked-icon="task_alt"
+                unchecked-icon="panorama_fish_eye"
+                :val="0"
+                color="red"
+                label="ไม่มีข้อมูล"
+                dense
+              />
+            </div>
+          </div>
+          <q-card
+            v-if="motherDataEdit.isHaveInfo"
+            bordered
+            class="bg-grey-1 q-pa-md"
+          >
+            <div class="row q-col-gutter-md">
+              <div class="col">
+                <q-input
+                  :disable="!motherDataEdit.isHaveInfo"
+                  outlined
+                  hide-bottom-space
+                  bg-color="white"
+                  dense
+                  v-model="motherDataEdit.citizenId"
+                  :label="`${'เลขประจำตัวประชาชน'}`"
+                  maxlength="13"
+                  :rules="[
+                    (val) => val.length === 13 || 'กรุณากรอกเลขบัตรประชาชน',
+                  ]"
+                  class="inputgreen"
+                  mask="#############"
+                />
+              </div>
+              <div class="col">
+                <q-select
+                  :disable="!motherDataEdit.isHaveInfo"
+                  outlined
+                  bg-color="white"
+                  lazy-rules
+                  dense
+                  v-model="motherDataEdit.prefix"
+                  :rules="[(val) => !!val || 'กรุณาเลือกคำนำหน้าชื่อ']"
+                  label="คำนำหน้าชื่อ"
+                  hidden-space
+                  class="inputgreen"
+                  use-input
+                  input-debounce="0"
+                  emit-value
+                  map-options
+                  :options="store.Ops.prefixOps"
+                  option-label="name"
+                  option-value="name"
+                  @filter="(inputValue:string,
+                    doneFn:Function) => filterSelector(inputValue, doneFn,'prefixOps'
+                    ) "
+                />
+              </div>
+              <div class="col">
+                <q-input
+                  :disable="!motherDataEdit.isHaveInfo"
+                  outlined
+                  dense
+                  class="inputgreen"
+                  bg-color="white"
+                  lazy-rules
+                  v-model="motherDataEdit.firstName"
+                  :rules="[(val) => !!val || 'กรุณากรอกชื่อ']"
+                  label="ชื่อ"
+                  hidden-space
+                />
+              </div>
+              <div class="col">
+                <q-input
+                  :disable="!motherDataEdit.isHaveInfo"
+                  outlined
+                  class="inputgreen"
+                  dense
+                  bg-color="white"
+                  lazy-rules
+                  v-model="motherDataEdit.lastName"
+                  :rules="[(val) => !!val || 'กรุณากรอกนามสกุล']"
+                  label="นามสกุล"
+                />
+              </div>
+              <div class="col">
+                <q-input
+                  :disable="!motherDataEdit.isHaveInfo"
+                  outlined
+                  class="inputgreen"
+                  dense
+                  bg-color="white"
+                  v-model="motherDataEdit.job"
+                  label="อาชีพ"
+                />
+              </div>
+            </div>
+            <div class="row">
+              <div class="q-mr-sm">สถานภาพการมีชีวิต</div>
+              <div>
+                <q-radio
+                  :disable="!motherDataEdit.isHaveInfo"
+                  class="q-mr-sm"
+                  v-model="motherDataEdit.isLive"
+                  checked-icon="task_alt"
+                  unchecked-icon="panorama_fish_eye"
+                  :val="1"
+                  label="ยังมีชีวิตอยู่"
+                  dense
+                  :color="!motherDataEdit.isHaveInfo ? 'grey' : 'primary'"
+                />
+                <q-radio
+                  :disable="!motherDataEdit.isHaveInfo"
+                  v-model="motherDataEdit.isLive"
+                  checked-icon="task_alt"
+                  unchecked-icon="panorama_fish_eye"
+                  :val="0"
+                  :color="!motherDataEdit.isHaveInfo ? 'grey' : 'red'"
+                  label="ถึงแก่กรรม"
+                  dense
+                />
+              </div>
+            </div>
+          </q-card>
+          <q-separator  class="q-my-lg" />
+          <div class="col-12 row q-pb-sm">
+            <div
+              class="q-mr-md q-pl-md text-weight-bold text-primary text-subtitle1"
+            >
+              • คู่สมรส
+            </div>
+            <div class="flex q-gutter-sm">
+              <q-radio
+                v-model="spouseDataEdit.isHave"
+                checked-icon="task_alt"
+                unchecked-icon="panorama_fish_eye"
+                :val="1"
+                label="มี"
+                dense
+                color="primary"
+              />
+              <q-radio
+                v-model="spouseDataEdit.isHave"
+                checked-icon="task_alt"
+                unchecked-icon="panorama_fish_eye"
+                :val="0"
+                color="red"
+                label="ไม่มี"
+                dense
+              />
+            </div>
+          </div>
+          <q-card
+            v-if="spouseDataEdit.isHave"
+            bordered
+            class="bg-grey-1 q-pa-md"
+          >
+            <div class="row q-col-gutter-md">
+              <div class="col">
+                <q-input
+                  :disable="!spouseDataEdit.isHave"
+                  outlined
+                  hide-bottom-space
+                  bg-color="white"
+                  dense
+                  class="inputgreen"
+                  v-model="spouseDataEdit.citizenId"
+                  :label="`${'เลขประจำตัวประชาชน'}`"
+                  maxlength="13"
+                  :rules="[
+                    (val) => val.length === 13 || 'กรุณากรอกเลขบัตรประชาชน',
+                  ]"
+                  mask="#############"
+                />
+              </div>
+              <div class="col">
+                <q-select
+                  :disable="!spouseDataEdit.isHave"
+                  outlined
+                  class="inputgreen"
+                  bg-color="white"
+                  lazy-rules
+                  dense
+                  v-model="spouseDataEdit.prefix"
+                  :rules="[(val) => !!val || 'กรุณาเลือกคำนำหน้าชื่อ']"
+                  label="คำนำหน้าชื่อ"
+                  hidden-space
+                  use-input
+                  input-debounce="0"
+                  emit-value
+                  map-options
+                  :options="store.Ops.prefixOps"
+                  option-label="name"
+                  option-value="name"
+                  @filter="(inputValue: any,
+            doneFn: Function) => filterSelector(inputValue, doneFn, 'prefixOps'
+            )"
+                />
+              </div>
+              <div class="col">
+                <q-input
+                  :disable="!spouseDataEdit.isHave"
+                  outlined
+                  class="inputgreen"
+                  dense
+                  bg-color="white"
+                  lazy-rules
+                  v-model="spouseDataEdit.firstName"
+                  :rules="[(val) => !!val || 'กรุณากรอกชื่อ']"
+                  label="ชื่อ"
+                  hidden-space
+                />
+              </div>
+              <div class="col">
+                <q-input
+                  :disable="!spouseDataEdit.isHave"
+                  outlined
+                  dense
+                  class="inputgreen"
+                  bg-color="white"
+                  lazy-rules
+                  v-model="spouseDataEdit.lastName"
+                  :rules="[(val) => !!val || 'กรุณากรอกนามสกุล']"
+                  label="นามสกุล"
+                />
+              </div>
+              <div class="col">
+                <q-input
+                  :disable="!spouseDataEdit.isHave"
+                  outlined
+                  dense
+                  class="inputgreen"
+                  bg-color="white"
+                  v-model="spouseDataEdit.job"
+                  label="อาชีพ"
+                />
+              </div>
+            </div>
+            <div class="row">
+              <div class="q-mr-sm">สถานภาพการมีชีวิต</div>
+              <div>
+                <q-radio
+                  :disable="!spouseDataEdit.isHave"
+                  class="q-mr-sm"
+                  v-model="spouseDataEdit.isLive"
+                  checked-icon="task_alt"
+                  unchecked-icon="panorama_fish_eye"
+                  :val="1"
+                  label="ยังมีชีวิตอยู่"
+                  dense
+                  :color="!spouseDataEdit.isHave ? 'grey' : 'primary'"
+                />
+                <q-radio
+                  :disable="!spouseDataEdit.isHave"
+                  v-model="spouseDataEdit.isLive"
+                  checked-icon="task_alt"
+                  unchecked-icon="panorama_fish_eye"
+                  :val="0"
+                  :color="!motherData.isHaveInfo ? 'grey' : 'red'"
+                  label="ถึงแก่กรรม"
+                  dense
+                />
+              </div>
+            </div>
+          </q-card>
+          <q-separator  class="q-mt-lg q-mb-md" />
+          <div class="col-12 row items-center q-pb-sm">
+            <div
+              class="q-mr-md q-pl-md text-weight-bold text-primary text-subtitle1"
+            >
+              • บุตร
+            </div>
+            <q-btn
+              flat
+              round
+              color="primary"
+              icon="add"
+              size="14px"
+              dense
+              @click="addChildren"
+            >
+              <q-tooltip> เพิ่มข้อมูล </q-tooltip>
+            </q-btn>
+          </div>
+          <div
+            v-for="(items, index) in childrenDataEdit.childrens"
+            :key="index"
+          >
+            
+            <div class="row items-center">
+              <q-card bordered class="bg-grey-1 col-12 q-mb-lg">
+                <div class="col-12 row q-py-sm q-px-md bg-grey-2 items-center ">
+                  <div class=" text-weight-medium q-pr-md">
+                    บุตรคนที่ : {{ index + 1 }}
+                  </div>
+                  <q-btn
+                    flat
+                    dense
+                    size="12px"
+                    round
+                    color="red"
+                    @click="deleteChildren(items)"
+                    icon="mdi-delete"
+                  >
+                    <q-tooltip>ลบข้อมูลบุตรคนที่ {{ index + 1 }}</q-tooltip>
+                  </q-btn>
+                </div>
+                <q-separator/>
+                <div class="q-pa-md col-12">
                   <div class="row q-col-gutter-md">
                     <div class="col">
                       <q-input
@@ -1075,78 +1090,45 @@ onMounted(async () => {
                       />
                     </div>
                   </div>
-                </q-card>
-                <div class="col-1">
-                  <div class="row justify-center">
-                    <q-btn
-                      flat
-                      dense
-                      size="12px"
-                      round
-                      color="red"
-                      @click="deleteChildren(items)"
-                      icon="mdi-delete"
-                    >
-                      <q-tooltip>ลบข้อมูลบุตรคนที่ {{ index + 1 }}</q-tooltip>
-                    </q-btn>
-                  </div>
                 </div>
-              </div>
+              </q-card>
             </div>
-          </q-page>
-        </q-page-container>
-
-        <q-footer>
-          <q-separator color="grey-4" />
-          <q-toolbar class="fit row wrap justify-end items-start content-start">
-            <q-btn
-              dense
-              unelevated
-              label="บันทึก"
-              id="onSubmit"
-              type="submit"
-              color="public"
-              class="q-px-md"
-            >
-              <q-tooltip>บันทึกข้อมูล</q-tooltip>
-            </q-btn>
-          </q-toolbar>
-        </q-footer>
+          </div>
+        </q-card-section>
+        <q-separator />
+        <q-card-actions align="right">
+          <q-btn
+            dense
+            unelevated
+            label="บันทึก"
+            id="onSubmit"
+            type="submit"
+            color="public"
+            class="q-px-md"
+          >
+            <q-tooltip>บันทึกข้อมูล</q-tooltip>
+          </q-btn>
+        </q-card-actions>
       </q-form>
-    </q-layout>
+    </q-card>
   </q-dialog>
 
   <q-dialog v-model="historyDialog" class="dialog" persistent>
-    <q-layout
-      view="lHh lpr lFf"
-      container
-      style="height: 90vh; min-width: 80%"
-      class="bg-white"
-    >
-      <q-header>
-        <q-toolbar>
-          <dialog-header
-            tittle="ประวัติแก้ไขข้อมูลครอบครัว"
-            :close="closeHistoryDialog"
-          />
-        </q-toolbar>
-        <q-separator color="grey-4" />
-      </q-header>
-
-      <q-page-container>
-        <q-page class="q-pa-md">
-          <div v-if="historyRows.length === 0">ไม่พบข้อมูล</div>
-          <div v-else class="scroll q-pa-md">
-            <div>
-              <div class="row text-right">
-                <div class="col-12">
-                  แก้ไขโดย {{ historyRows[index - 1].lastUpdateFullName }}
-                </div>
-                <div class="col-12">
-                  วันที่แก้ไข
-                  {{ date2Thai(historyRows[index - 1].lastUpdatedAt) }}
-                </div>
-              </div>
+    <q-card style="min-width: 60%">
+      <dialog-header
+        tittle="ประวัติแก้ไขข้อมูลครอบครัว"
+        :close="closeHistoryDialog"
+      />
+      <q-separator color="grey-4" />
+      <q-card-section style="max-height: 60vh" class="scroll q-pa-none">
+        <div v-if="historyRows.length === 0">ไม่พบข้อมูล</div>
+        <div v-else class="scroll">
+            <div class="row col-12 bg-teal-1 q-py-sm q-px-md">
+                ลำดับที่ <strong class="q-pl-sm q-pr-md">{{ index }}</strong> <span class="q-pr-md">: </span>
+                แก้ไขโดย <strong class="q-pl-sm q-pr-md">{{ historyRows[index - 1].lastUpdateFullName }}</strong>
+                วันที่แก้ไข <strong class="q-pl-sm q-pr-md">{{ date2Thai(historyRows[index - 1].lastUpdatedAt) }}</strong>
+            </div>
+            <div class="q-pa-md">
               <div class="col-12 row q-pb-sm">
                 <div
                   class="q-mr-md text-weight-bold text-primary text-subtitle1"
@@ -1154,9 +1136,9 @@ onMounted(async () => {
                   • บิดา
                 </div>
               </div>
-              <q-card bordered class="bg-grey-1 q-gutter-md q-ma-none q-pb-md">
+              <q-card bordered class="bg-grey-1 q-gutter-md q-ma-none q-pb-md" >
                 <div class="row items-center">
-                  <div class="col-2">
+                  <div class="col-2 text-grey-6 text-weight-medium">
                     <div>เลขบัตรประจำตัวประชาชน</div>
                   </div>
                   <div class="col">
@@ -1164,7 +1146,7 @@ onMounted(async () => {
                   </div>
                 </div>
                 <div class="row items-center">
-                  <div class="col-2">ชื่อ-นามสกุล</div>
+                  <div class="col-2 text-grey-6 text-weight-medium">ชื่อ-นามสกุล</div>
                   <div class="col-6">
                     {{
                       historyRows[index - 1].fatherPrefix +
@@ -1173,13 +1155,13 @@ onMounted(async () => {
                       historyRows[index - 1].fatherLastName
                     }}
                   </div>
-                  <div class="col-1">อาชีพ</div>
+                  <div class="col-1 text-grey-6 text-weight-medium">อาชีพ</div>
                   <div class="col">
                     {{ historyRows[index - 1].fatherCareer }}
                   </div>
                 </div>
                 <div class="row items-center">
-                  <div class="col-2">สถานภาพการมีชีวิต</div>
+                  <div class="col-2 text-grey-6 text-weight-medium">สถานภาพการมีชีวิต</div>
                   <div class="col-10">
                     <div v-if="historyRows[index - 1].fatherLive">
                       มีชีวิตอยู่
@@ -1188,9 +1170,9 @@ onMounted(async () => {
                   </div>
                 </div>
               </q-card>
-            </div>
-            <div>
-              <div class="col-12 row q-pb-sm q-pt-md">
+
+
+              <div class="col-12 row q-pb-sm q-mt-lg" >
                 <div
                   class="q-mr-md text-weight-bold text-primary text-subtitle1"
                 >
@@ -1199,7 +1181,7 @@ onMounted(async () => {
               </div>
               <q-card bordered class="bg-grey-1 q-gutter-md q-ma-none q-pb-md">
                 <div class="row items-center">
-                  <div class="col-2">
+                  <div class="col-2 text-grey-6 text-weight-medium">
                     <div>เลขบัตรประจำตัวประชาชน</div>
                   </div>
                   <div class="col">
@@ -1207,7 +1189,7 @@ onMounted(async () => {
                   </div>
                 </div>
                 <div class="row items-center">
-                  <div class="col-2">ชื่อ-นามสกุล</div>
+                  <div class="col-2 text-grey-6 text-weight-medium">ชื่อ-นามสกุล</div>
                   <div class="col-6">
                     {{
                       historyRows[index - 1].motherPrefix +
@@ -1216,13 +1198,13 @@ onMounted(async () => {
                       historyRows[index - 1].motherLastName
                     }}
                   </div>
-                  <div class="col-1">อาชีพ</div>
+                  <div class="col-1 text-grey-6 text-weight-medium">อาชีพ</div>
                   <div class="col">
                     {{ historyRows[index - 1].motherCareer }}
                   </div>
                 </div>
                 <div class="row items-center">
-                  <div class="col-2">สถานภาพการมีชีวิต</div>
+                  <div class="col-2 text-grey-6 text-weight-medium">สถานภาพการมีชีวิต</div>
                   <div class="col">
                     <div v-if="historyRows[index - 1].motherLive">
                       มีชีวิตอยู่
@@ -1231,11 +1213,10 @@ onMounted(async () => {
                   </div>
                 </div>
               </q-card>
-            </div>
-            <div>
+
               <div
                 v-if="historyRows[index - 1].couple"
-                class="col-12 row q-pb-sm q-pt-md"
+                class="col-12 row q-pb-sm q-mt-lg"
               >
                 <div
                   class="q-mr-md text-weight-bold text-primary text-subtitle1"
@@ -1249,7 +1230,7 @@ onMounted(async () => {
                 class="bg-grey-1 q-gutter-md q-ma-none q-pb-md"
               >
                 <div class="row items-center">
-                  <div class="col-2">
+                  <div class="col-2 text-grey-6 text-weight-medium">
                     <div>เลขบัตรประจำตัวประชาชน</div>
                   </div>
                   <div class="col">
@@ -1257,7 +1238,7 @@ onMounted(async () => {
                   </div>
                 </div>
                 <div class="row items-center">
-                  <div class="col-2">ชื่อ-นามสกุล</div>
+                  <div class="col-2 text-grey-6 text-weight-medium">ชื่อ-นามสกุล</div>
                   <div class="col-6">
                     {{
                       historyRows[index - 1].couplePrefix +
@@ -1266,13 +1247,13 @@ onMounted(async () => {
                       historyRows[index - 1].coupleLastName
                     }}
                   </div>
-                  <div class="col-1">อาชีพ</div>
+                  <div class="col-1 text-grey-6 text-weight-medium">อาชีพ</div>
                   <div class="col">
                     {{ historyRows[index - 1].coupleCareer }}
                   </div>
                 </div>
                 <div class="row items-center">
-                  <div class="col-2">สถานภาพการมีชีวิต</div>
+                  <div class="col-2 text-grey-6 text-weight-medium">สถานภาพการมีชีวิต</div>
                   <div class="col">
                     <div v-if="historyRows[index - 1].coupleLive">
                       มีชีวิตอยู่
@@ -1281,11 +1262,10 @@ onMounted(async () => {
                   </div>
                 </div>
               </q-card>
-            </div>
-            <div>
+          
               <div
                 v-if="historyRows[index - 1].children[0] !== undefined"
-                class="col-12 row q-pb-sm q-pt-md"
+                class="col-12 row q-pb-sm q-mt-lg"
               >
                 <div
                   class="q-mr-md text-weight-bold text-primary text-subtitle1"
@@ -1297,57 +1277,57 @@ onMounted(async () => {
                 v-for="children in historyRows[index - 1].children"
                 :key="index"
               >
-                <div class="col-12 row q-gutter-sm q-pb-xs q-mt-xs">
-                  <div class="text-medium">บุตรคนที่ : {{ index }}</div>
-                </div>
-                <q-card
-                  bordered
-                  class="bg-grey-1 q-gutter-md q-ma-none q-pb-md"
-                >
-                  <div class="row items-center">
-                    <div class="col-2">
-                      <div>เลขบัตรประจำตัวประชาชน</div>
-                    </div>
-                    <div class="col-10">
-                      {{ children.childrenCitizenId }}
+                <q-card bordered class="bg-grey-1  q-pb-md">
+                  <div class="col-12 row q-py-sm q-px-md bg-grey-2 items-center ">
+                    <div class=" text-weight-medium q-pr-md">
+                      บุตรคนที่ : {{ index + 1 }}
                     </div>
                   </div>
-                  <div class="row items-center">
-                    <div class="col-2">ชื่อ-นามสกุล</div>
-                    <div class="col-6">
-                      {{
-                        children.childrenPrefix +
-                        children.childrenFirstName +
-                        " " +
-                        children.childrenLastName
-                      }}
+                  <q-separator/>
+                  <div class="col-12 q-pa-md q-col-gutter-md">
+                    <div class="row items-center">
+                      <div class="col-2 text-grey-6 text-weight-medium">
+                        <div>เลขบัตรประจำตัวประชาชน</div>
+                      </div>
+                      <div class="col-10">
+                        {{ children.childrenCitizenId }}
+                      </div>
                     </div>
-                    <div class="col-1">อาชีพ</div>
-                    <div class="col">
-                      {{ children.childrenCareer }}
+                    <div class="row items-center">
+                      <div class="col-2 text-grey-6 text-weight-medium">ชื่อ-นามสกุล</div>
+                      <div class="col-6">
+                        {{
+                          children.childrenPrefix +
+                          children.childrenFirstName +
+                          " " +
+                          children.childrenLastName
+                        }}
+                      </div>
+                      <div class="col-1 text-grey-6 text-weight-medium">อาชีพ</div>
+                      <div class="col">
+                        {{ children.childrenCareer }}
+                      </div>
                     </div>
-                  </div>
-                  <div class="row items-center">
-                    <div class="col-2">สถานภาพการมีชีวิต</div>
-                    <div class="col">
-                      <div v-if="children.childrenLive">มีชีวิตอยู่</div>
-                      <div v-else>ถึงแก่กรรม</div>
+                    <div class="row items-center">
+                      <div class="col-2 text-grey-6 text-weight-medium">สถานภาพการมีชีวิต</div>
+                      <div class="col">
+                        <div v-if="children.childrenLive">มีชีวิตอยู่</div>
+                        <div v-else>ถึงแก่กรรม</div>
+                      </div>
                     </div>
                   </div>
                 </q-card>
               </div>
             </div>
-          </div>
-        </q-page>
-      </q-page-container>
-
-      <q-footer>
-        <q-separator color="grey-4" />
+        </div>
+      </q-card-section>
+      <q-separator color="grey-4" />
+      <q-card-actions align="center">
         <div class="q-pa-sm flex flex-center">
           <q-pagination v-model="index" :max="historyRows.length" input />
         </div>
-      </q-footer>
-    </q-layout>
+      </q-card-actions>
+    </q-card>
   </q-dialog>
 </template>
 
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 07895317d..1a494efde 100644
--- a/src/modules/04_registryNew/components/detail/PersonalInformation/05_Education.vue
+++ b/src/modules/04_registryNew/components/detail/PersonalInformation/05_Education.vue
@@ -692,10 +692,11 @@ onMounted(async () => {
 </script>
 
 <template>
-  <q-toolbar style="padding: 0px" class="q-mb-xs">
+  <div class="row items-center q-gutter-x-sm q-pb-sm">
     <q-btn
       round
       flat
+      dense
       color="primary"
       icon="add"
       @click="
@@ -710,7 +711,7 @@ onMounted(async () => {
     >
 
     <q-space />
-    <q-input dense outlined v-model="keyword" label="ค้นหา" class="q-mr-sm">
+    <q-input dense outlined v-model="keyword" label="ค้นหา">
       <template v-slot:append>
         <q-icon name="search" />
       </template>
@@ -729,7 +730,6 @@ onMounted(async () => {
       option-value="name"
       options-cover
       style="min-width: 150px"
-      class="q-mr-sm"
     />
 
     <q-btn-toggle
@@ -762,7 +762,7 @@ onMounted(async () => {
         />
       </template>
     </q-btn-toggle>
-  </q-toolbar>
+  </div>
 
   <d-table
     :grid="mode === 'card'"
@@ -955,280 +955,183 @@ onMounted(async () => {
   </d-table>
 
   <q-dialog v-model="dialog" class="dialog" persistent>
-    <q-layout
-      view="lHh lpr lFf"
-      container
-      style="height: 80vh"
-      class="bg-white"
-    >
+    <q-card>
       <q-form @submit.prevent greedy @validation-success="onSubmit()">
-        <q-header>
-          <q-toolbar>
-            <dialog-header
-              :tittle="
-                dialogStatus == 'edit'
-                  ? 'แก้ไขข้อมูลประวัติการศึกษา'
-                  : 'เพิ่มข้อมูลประวัติการศึกษา'
-              "
-              :close="closeDialog"
-            />
-          </q-toolbar>
-          <q-separator color="grey-4" />
-        </q-header>
-
-        <q-page-container>
-          <q-page class="q-pb-md">
-            <div class="row q-pa-md q-col-gutter-sm">
-              <div class="col-6">
-                <q-select
-                  outlined
-                  dense
-                  emit-value
-                  option-value="label"
-                  option-label="label"
-                  map-options
-                  bg-color="white"
-                  v-model="educationData.educationLevel"
-                  :options="educationLevelOption"
-                  input-debounce="0"
-                  use-input
-                  @filter="(inputValue:string,
-                      doneFn:Function) => filterSelector(inputValue, doneFn,'educationLevelOption'
-                      ) "
-                  :rules="[(val) => !!val || `${'กรุณาเลือกระดับการศึกษา'}`]"
-                  label="ระดับการศึกษา"
-                  class="inputgreen"
-                  hide-bottom-space
-                />
-              </div>
-              <div class="col-6">
-                <q-input
-                  outlined
-                  v-model="educationData.institute"
-                  label="สถานศึกษา"
-                  bg-color="white"
-                  dense
-                  class="inputgreen"
-                  :rules="[(val) => !!val || `${'กรุณากรอกสถานศึกษา'}`]"
-                  hide-bottom-space
-                />
-              </div>
+        <dialog-header
+          :tittle="
+            dialogStatus == 'edit'
+              ? 'แก้ไขข้อมูลประวัติการศึกษา'
+              : 'เพิ่มข้อมูลประวัติการศึกษา'
+          "
+          :close="closeDialog"
+        />
+        <q-separator />
+        <q-card-section style="max-height: 60vh" class="scroll">
+          <div class="row q-col-gutter-sm">
+            <div class="col-6">
+              <q-select
+                outlined
+                dense
+                emit-value
+                option-value="label"
+                option-label="label"
+                map-options
+                bg-color="white"
+                v-model="educationData.educationLevel"
+                :options="educationLevelOption"
+                input-debounce="0"
+                use-input
+                @filter="(inputValue:string,
+                    doneFn:Function) => filterSelector(inputValue, doneFn,'educationLevelOption'
+                    ) "
+                :rules="[(val) => !!val || `${'กรุณาเลือกระดับการศึกษา'}`]"
+                label="ระดับการศึกษา"
+                class="inputgreen"
+                hide-bottom-space
+              />
             </div>
-            <q-card
-              flat
-              bordered
-              class="q-mx-md q-px-md q-pb-md q-mb-md 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="ปี"
-                  class="inputgreen"
-                  dense
-                />
-                <q-radio
-                  v-model="isDate"
-                  checked-icon="task_alt"
-                  unchecked-icon="panorama_fish_eye"
-                  val="true"
-                  class="inputgreen"
-                  label="วัน/เดือน/ปี"
-                  dense
-                />
-              </div>
-              <div v-if="isDate === 'false'" class="row q-col-gutter-sm">
-                <div class="col">
-                  <datepicker
-                    menu-class-name="modalfix"
-                    v-model="educationData.startYear"
-                    :locale="'th'"
-                    autoApply
-                    year-picker
-                    :enableTimePicker="false"
-                    @update:modelValue="
-                    (v:number) =>
-                      (educationData.startDate = new Date(
-                        `${v}-01-01T00:00:02.010+07:00`
-                      ))
-                  "
-                  >
-                    <template #year="{ year }">{{ year + 543 }}</template>
-                    <template #year-overlay-value="{ value }">{{
-                      parseInt(value + 543)
-                    }}</template>
-                    <template #trigger>
-                      <q-input
-                        dense
-                        outlined
-                        class="inputgreen"
-                        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>
-                </div>
-                <div class="col">
-                  <datepicker
-                    menu-class-name="modalfix"
-                    v-model="educationData.endYear"
-                    :locale="'th'"
-                    autoApply
-                    year-picker
-                    :enableTimePicker="false"
-                    @update:modelValue="
-                    (v:number) =>
-                      (educationData.endDate = new Date(
-                        `${v}-01-01T00:00:02.010+07:00`
-                      ))
-                  "
-                  >
-                    <template #year="{ year }">{{ year + 543 }}</template>
-                    <template #year-overlay-value="{ value }">{{
-                      parseInt(value + 543)
-                    }}</template>
-                    <template #trigger>
-                      <q-input
-                        dense
-                        class="inputgreen"
-                        lazy-rules
-                        outlined
-                        hide-bottom-space
-                        :model-value="educationData.endYear + 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>
-              <div v-if="isDate === 'true'" class="row q-col-gutter-sm">
-                <div class="col">
-                  <datepicker
-                    menu-class-name="modalfix"
-                    v-model="educationData.startDate"
-                    :locale="'th'"
-                    autoApply
-                    :enableTimePicker="false"
-                    week-start="0"
-                    @update:modelValue="
-                    (v: Date) =>
-                      (educationData.startYear = parseInt(
-                        v.toString().slice(11, 15)
-                      ))
-                  "
-                  >
-                    <template #year="{ year }">{{ year + 543 }}</template>
-                    <template #year-overlay-value="{ value }">{{
-                      parseInt(value + 543)
-                    }}</template>
-                    <template #trigger>
-                      <q-input
-                        outlined
-                        class="inputgreen"
-                        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>
-                </div>
-                <div class="col">
-                  <datepicker
-                    menu-class-name="modalfix"
-                    v-model="educationData.endDate"
-                    :locale="'th'"
-                    autoApply
-                    :enableTimePicker="false"
-                    week-start="0"
-                    @update:modelValue="
-                    (v: Date)  =>
-                      (educationData.endYear = parseInt(
-                        v.toString().slice(11, 15)
-                      ))
-                  "
-                  >
-                    <template #year="{ year }">{{ year + 543 }}</template>
-                    <template #year-overlay-value="{ value }">{{
-                      parseInt(value + 543)
-                    }}</template>
-                    <template #trigger>
-                      <q-input
-                        outlined
-                        dense
-                        class="inputgreen"
-                        lazy-rules
-                        :model-value="date2Thai(educationData.endDate)"
-                        :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>
-              </div>
-            </q-card>
-            <div class="row q-col-gutter-sm q-px-md">
-              <div class="col-6">
+            <div class="col-6">
+              <q-input
+                outlined
+                v-model="educationData.institute"
+                label="สถานศึกษา"
+                bg-color="white"
+                dense
+                class="inputgreen"
+                :rules="[(val) => !!val || `${'กรุณากรอกสถานศึกษา'}`]"
+                hide-bottom-space
+              />
+            </div>
+          </div>
+          <q-card
+            flat
+            bordered
+            class="q-px-md q-pb-md q-my-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="ปี"
+                class="inputgreen"
+                dense
+              />
+              <q-radio
+                v-model="isDate"
+                checked-icon="task_alt"
+                unchecked-icon="panorama_fish_eye"
+                val="true"
+                class="inputgreen"
+                label="วัน/เดือน/ปี"
+                dense
+              />
+            </div>
+            <div v-if="isDate === 'false'" class="row q-col-gutter-sm">
+              <div class="col">
                 <datepicker
                   menu-class-name="modalfix"
-                  v-model="educationData.finishDate"
+                  v-model="educationData.startYear"
+                  :locale="'th'"
+                  autoApply
+                  year-picker
+                  :enableTimePicker="false"
+                  @update:modelValue="
+                  (v:number) =>
+                    (educationData.startDate = new Date(
+                      `${v}-01-01T00:00:02.010+07:00`
+                    ))
+                "
+                >
+                  <template #year="{ year }">{{ year + 543 }}</template>
+                  <template #year-overlay-value="{ value }">{{
+                    parseInt(value + 543)
+                  }}</template>
+                  <template #trigger>
+                    <q-input
+                      dense
+                      outlined
+                      class="inputgreen"
+                      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>
+              </div>
+              <div class="col">
+                <datepicker
+                  menu-class-name="modalfix"
+                  v-model="educationData.endYear"
+                  :locale="'th'"
+                  autoApply
+                  year-picker
+                  :enableTimePicker="false"
+                  @update:modelValue="
+                  (v:number) =>
+                    (educationData.endDate = new Date(
+                      `${v}-01-01T00:00:02.010+07:00`
+                    ))
+                "
+                >
+                  <template #year="{ year }">{{ year + 543 }}</template>
+                  <template #year-overlay-value="{ value }">{{
+                    parseInt(value + 543)
+                  }}</template>
+                  <template #trigger>
+                    <q-input
+                      dense
+                      class="inputgreen"
+                      lazy-rules
+                      outlined
+                      hide-bottom-space
+                      :model-value="educationData.endYear + 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>
+            <div v-if="isDate === 'true'" class="row q-col-gutter-sm">
+              <div class="col">
+                <datepicker
+                  menu-class-name="modalfix"
+                  v-model="educationData.startDate"
                   :locale="'th'"
                   autoApply
                   :enableTimePicker="false"
                   week-start="0"
+                  @update:modelValue="
+                  (v: Date) =>
+                    (educationData.startYear = parseInt(
+                      v.toString().slice(11, 15)
+                    ))
+                "
                 >
                   <template #year="{ year }">{{ year + 543 }}</template>
                   <template #year-overlay-value="{ value }">{{
@@ -1237,16 +1140,16 @@ onMounted(async () => {
                   <template #trigger>
                     <q-input
                       outlined
-                      bg-color="white"
-                      dense
                       class="inputgreen"
+                      dense
                       lazy-rules
-                      :model-value="date2Thai(educationData.finishDate)"
+                      :model-value="date2Thai(educationData.startDate)"
                       :rules="[
-                        (val) => !!val || `${'กรุณาเลือกวันที่สำเร็จการศึกษา'}`,
+                        (val) =>
+                          !!val || `${'กรุณาเลือกวันที่เริ่มต้นศึกษา'}`,
                       ]"
                       hide-bottom-space
-                      :label="`${'วันที่สำเร็จการศึกษา'}`"
+                      :label="`${'วันที่เริ่มต้นศึกษา'}`"
                     >
                       <template v-slot:prepend>
                         <q-icon
@@ -1260,149 +1163,233 @@ onMounted(async () => {
                   </template>
                 </datepicker>
               </div>
-              <div class="col-6">
-                <q-select
-                  outlined
-                  dense
-                  emit-value
-                  map-options
-                  bg-color="white"
-                  v-model="educationData.isEducation"
-                  :options="educationOption"
-                  option-value="value"
-                  class="inputgreen"
-                  option-label="label"
-                  input-debounce="0"
-                  use-input
-                  @filter="(inputValue:string,
-                      doneFn:Function) => filterSelector(inputValue, doneFn,'educationOption'
-                      ) "
-                  :rules="[
-                    (val) =>
-                      val !== null || `${'กรุณาเลือกวุฒิการศึกษาในตำแหน่ง'}`,
-                  ]"
-                  label="เป็นวุฒิการศึกษาในตำแหน่ง"
-                  hide-bottom-space
-                />
-              </div>
-
-              <div class="col-6">
-                <q-input
-                  outlined
-                  v-model="educationData.degree"
-                  label="วุฒิการศึกษา"
-                  class="inputgreen"
-                  bg-color="white"
-                  dense
-                  :rules="[(val) => !!val || `${'กรุณากรอกวุฒิการศึกษา'}`]"
-                  hide-bottom-space
-                />
-              </div>
-              <div class="col-6">
-                <q-input
-                  outlined
-                  class="inputgreen"
-                  v-model="educationData.field"
-                  label="สาขาวิชา/ทาง"
-                  bg-color="white"
-                  dense
-                  hide-bottom-space
-                />
-              </div>
-
-              <div class="col-6">
-                <q-input
-                  outlined
-                  v-model="educationData.fundName"
-                  label="ทุน"
-                  class="inputgreen"
-                  bg-color="white"
-                  dense
-                  hide-bottom-space
-                />
-              </div>
-              <div class="col-6">
-                <q-input
-                  outlined
-                  class="inputgreen"
-                  v-model="educationData.gpa"
-                  label="เกรดเฉลี่ย"
-                  bg-color="white"
-                  dense
-                  mask="#.##"
-                  hide-bottom-space
-                />
-              </div>
-
-              <div class="col-6">
-                <q-input
-                  outlined
-                  class="inputgreen"
-                  v-model="educationData.country"
-                  label="ประเทศ"
-                  bg-color="white"
-                  dense
-                  hide-bottom-space
-                />
-              </div>
-              <div class="col-6">
-                <q-input
-                  outlined
-                  class="inputgreen"
-                  v-model="educationData.other"
-                  label="ข้อมูลติดต่อ"
-                  bg-color="white"
-                  dense
-                  hide-bottom-space
-                />
-              </div>
-
-              <div class="col-6">
-                <q-input
-                  outlined
-                  class="inputgreen"
-                  v-model="educationData.duration"
-                  label="ระยะเวลา"
-                  :rules="[(val) => !!val || `${'กรุณากรอกระยะเวลา'}`]"
-                  bg-color="white"
-                  dense
-                  hide-bottom-space
-                />
-              </div>
-              <div class="col-6">
-                <q-input
-                  outlined
-                  class="inputgreen"
-                  v-model="educationData.durationYear"
-                  label="ระยะเวลาหลักสูตร (ปี)"
-                  :rules="[
-                    (val) => !!val || `${'กรุณากรอกระยะเวลาหลักสูตร (ปี)'}`,
-                  ]"
-                  bg-color="white"
-                  type="number"
-                  dense
-                  hide-bottom-space
-                />
-              </div>
-
-              <div class="col-12">
-                <q-input
-                  outlined
-                  class="inputgreen"
-                  v-model="educationData.note"
-                  label="หมายเหตุ"
-                  bg-color="white"
-                  dense
-                  type="textarea"
-                />
+              <div class="col">
+                <datepicker
+                  menu-class-name="modalfix"
+                  v-model="educationData.endDate"
+                  :locale="'th'"
+                  autoApply
+                  :enableTimePicker="false"
+                  week-start="0"
+                  @update:modelValue="
+                  (v: Date)  =>
+                    (educationData.endYear = parseInt(
+                      v.toString().slice(11, 15)
+                    ))
+                "
+                >
+                  <template #year="{ year }">{{ year + 543 }}</template>
+                  <template #year-overlay-value="{ value }">{{
+                    parseInt(value + 543)
+                  }}</template>
+                  <template #trigger>
+                    <q-input
+                      outlined
+                      dense
+                      class="inputgreen"
+                      lazy-rules
+                      :model-value="date2Thai(educationData.endDate)"
+                      :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>
             </div>
-          </q-page>
-        </q-page-container>
+          </q-card>
+          <div class="row q-col-gutter-sm">
+            <div class="col-6">
+              <datepicker
+                menu-class-name="modalfix"
+                v-model="educationData.finishDate"
+                :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
+                    bg-color="white"
+                    dense
+                    class="inputgreen"
+                    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>
+            <div class="col-6">
+              <q-select
+                outlined
+                dense
+                emit-value
+                map-options
+                bg-color="white"
+                v-model="educationData.isEducation"
+                :options="educationOption"
+                option-value="value"
+                class="inputgreen"
+                option-label="label"
+                input-debounce="0"
+                use-input
+                @filter="(inputValue:string,
+                    doneFn:Function) => filterSelector(inputValue, doneFn,'educationOption'
+                    ) "
+                :rules="[
+                  (val) =>
+                    val !== null || `${'กรุณาเลือกวุฒิการศึกษาในตำแหน่ง'}`,
+                ]"
+                label="เป็นวุฒิการศึกษาในตำแหน่ง"
+                hide-bottom-space
+              />
+            </div>
 
-        <q-footer>
-          <q-separator color="grey-4" />
-          <q-toolbar class="fit row wrap justify-end items-start content-start">
+            <div class="col-6">
+              <q-input
+                outlined
+                v-model="educationData.degree"
+                label="วุฒิการศึกษา"
+                class="inputgreen"
+                bg-color="white"
+                dense
+                :rules="[(val) => !!val || `${'กรุณากรอกวุฒิการศึกษา'}`]"
+                hide-bottom-space
+              />
+            </div>
+            <div class="col-6">
+              <q-input
+                outlined
+                class="inputgreen"
+                v-model="educationData.field"
+                label="สาขาวิชา/ทาง"
+                bg-color="white"
+                dense
+                hide-bottom-space
+              />
+            </div>
+
+            <div class="col-6">
+              <q-input
+                outlined
+                v-model="educationData.fundName"
+                label="ทุน"
+                class="inputgreen"
+                bg-color="white"
+                dense
+                hide-bottom-space
+              />
+            </div>
+            <div class="col-6">
+              <q-input
+                outlined
+                class="inputgreen"
+                v-model="educationData.gpa"
+                label="เกรดเฉลี่ย"
+                bg-color="white"
+                dense
+                mask="#.##"
+                hide-bottom-space
+              />
+            </div>
+
+            <div class="col-6">
+              <q-input
+                outlined
+                class="inputgreen"
+                v-model="educationData.country"
+                label="ประเทศ"
+                bg-color="white"
+                dense
+                hide-bottom-space
+              />
+            </div>
+            <div class="col-6">
+              <q-input
+                outlined
+                class="inputgreen"
+                v-model="educationData.other"
+                label="ข้อมูลติดต่อ"
+                bg-color="white"
+                dense
+                hide-bottom-space
+              />
+            </div>
+
+            <div class="col-6">
+              <q-input
+                outlined
+                class="inputgreen"
+                v-model="educationData.duration"
+                label="ระยะเวลา"
+                :rules="[(val) => !!val || `${'กรุณากรอกระยะเวลา'}`]"
+                bg-color="white"
+                dense
+                hide-bottom-space
+              />
+            </div>
+            <div class="col-6">
+              <q-input
+                outlined
+                class="inputgreen"
+                v-model="educationData.durationYear"
+                label="ระยะเวลาหลักสูตร (ปี)"
+                :rules="[
+                  (val) => !!val || `${'กรุณากรอกระยะเวลาหลักสูตร (ปี)'}`,
+                ]"
+                bg-color="white"
+                type="number"
+                dense
+                hide-bottom-space
+              />
+            </div>
+
+            <div class="col-12">
+              <q-input
+                outlined
+                class="inputgreen"
+                v-model="educationData.note"
+                label="หมายเหตุ"
+                bg-color="white"
+                dense
+                type="textarea"
+              />
+            </div>
+          </div>
+        </q-card-section>
+        <q-separator />
+
+        <q-card-actions align="right">      
             <q-btn
               id="onSubmit"
               type="submit"
@@ -1414,31 +1401,20 @@ onMounted(async () => {
             >
               <q-tooltip>บันทึกข้อมูล</q-tooltip>
             </q-btn>
-          </q-toolbar>
-        </q-footer>
+         </q-card-actions>
       </q-form>
-    </q-layout>
+    </q-card>
   </q-dialog>
 
   <q-dialog v-model="historyDialog" class="dialog" persistent>
-    <q-layout
-      view="lHh lpr lFf"
-      container
-      style="height: 500px; min-width: 80%"
-      class="bg-white"
-    >
-      <q-header>
-        <q-toolbar>
-          <dialog-header
-            tittle="ประวัติแก้ไขประวัติการศึกษา"
-            :close="closeHistoryDialog"
-          />
-        </q-toolbar>
-        <q-separator color="grey-4" />
-      </q-header>
+    <q-card style="min-width: 80%">
+      <dialog-header
+        tittle="ประวัติแก้ไขประวัติการศึกษา"
+        :close="closeHistoryDialog"
+      />
+      <q-separator />
 
-      <q-page-container>
-        <q-page class="q-pa-md">
+      <q-card-section style="max-height: 50vh" class="scroll">
           <q-toolbar style="padding: 0px" class="text-primary q-mb-sm">
             <q-space />
             <q-input
@@ -1504,9 +1480,8 @@ onMounted(async () => {
               </q-tr>
             </template>
           </d-table>
-        </q-page>
-      </q-page-container>
-    </q-layout>
+      </q-card-section>
+    </q-card>
   </q-dialog>
 </template>
 
diff --git a/src/modules/04_registryNew/components/detail/PersonalInformation/06_SpecialSkill.vue b/src/modules/04_registryNew/components/detail/PersonalInformation/06_SpecialSkill.vue
index ae4f395b1..8bd9e0134 100644
--- a/src/modules/04_registryNew/components/detail/PersonalInformation/06_SpecialSkill.vue
+++ b/src/modules/04_registryNew/components/detail/PersonalInformation/06_SpecialSkill.vue
@@ -313,10 +313,11 @@ onMounted(async () => {
 });
 </script>
 <template>
-  <q-toolbar style="padding: 0px" class="text-primary q-mb-xs">
+  <div class="row items-center q-gutter-x-sm q-pb-sm">
     <q-btn
       flat
       round
+      color="primary"
       dense
       icon="add"
       @click="() => ((dialogStatus = 'create'), clearForm(), (dialog = true))"
@@ -324,7 +325,7 @@ onMounted(async () => {
       <q-tooltip>เพิ่มข้อมูล</q-tooltip>
     </q-btn>
     <q-space />
-    <q-input dense outlined v-model="keyword" label="ค้นหา" class="q-mr-sm">
+    <q-input dense outlined v-model="keyword" label="ค้นหา">
       <template v-slot:append>
         <q-icon name="search" />
       </template>
@@ -344,7 +345,6 @@ onMounted(async () => {
       option-value="name"
       options-cover
       style="min-width: 150px"
-      class="q-mr-sm"
     />
     <q-btn-toggle
       v-model="mode"
@@ -376,7 +376,7 @@ onMounted(async () => {
         />
       </template>
     </q-btn-toggle>
-  </q-toolbar>
+  </div>
 
   <d-table
     :grid="mode === 'card'"
@@ -495,98 +495,85 @@ onMounted(async () => {
   </d-table>
 
   <q-dialog v-model="dialog" class="dialog" persistent>
-    <q-layout
-      view="lHh lpr lFf"
-      container
-      style="height: 300px"
-      class="bg-white"
-    >
+    <q-card>
       <q-form @submit.prevent greedy @validation-success="onSubmit()">
-        <q-header>
-          <q-toolbar>
-            <dialog-header
-              :tittle="
-                dialogStatus == 'edit'
-                  ? 'แก้ไขข้อมูลความสามารถพิเศษ'
-                  : 'เพิ่มข้อมูลความสามารถพิเศษ'
-              "
-              :close="closeDialog"
-            />
-          </q-toolbar>
-          <q-separator color="grey-4" />
-        </q-header>
-
-        <q-page-container>
-          <q-page class="q-pa-md">
-            <div class="row col-12 q-col-gutter-x-xs q-col-gutter-y-xs">
-              <div class="col-xs-6 col-sm-6 col-md-6">
-                <q-input
-                  outlined
-                  class="inputgreen"
-                  dense
-                  bg-color="white"
-                  v-model="specialSkill.field"
-                  label="ด้าน"
-                  hide-bottom-space
-                  :rules="[
-                    (val) => !!val || `${'กรุณากรอกด้านความสามารถพิเศษ'}`,
-                  ]"
-                />
-              </div>
-              <div class="col-xs-6 col-sm-6 col-md-6">
-                <q-input
-                  outlined
-                  dense
-                  class="inputgreen"
-                  bg-color="white"
-                  v-model="specialSkill.detail"
-                  label="รายละเอียด"
-                  hide-bottom-space
-                  :rules="[(val) => !!val || `${'กรุณากรอกรายละเอียด'}`]"
-                />
-              </div>
-              <div class="col-xs-12 col-sm-12 col-md-12">
-                <q-input
-                  class="inputgreen"
-                  outlined
-                  dense
-                  bg-color="white"
-                  v-model="specialSkill.remark"
-                  label="หมายเหตุ"
-                />
-              </div>
-              <div class="col-xs-12 col-sm-12 col-md-12">
-                <q-input
-                  class="inputgreen"
-                  outlined
-                  dense
-                  bg-color="white"
-                  v-model="specialSkill.reference"
-                  label="เอกสารอ้างอิง"
-                />
-              </div>
+        <dialog-header
+          :tittle="
+            dialogStatus == 'edit'
+              ? 'แก้ไขข้อมูลความสามารถพิเศษ'
+              : 'เพิ่มข้อมูลความสามารถพิเศษ'
+          "
+          :close="closeDialog"
+        />
+        <q-separator color="grey-4" />
+        <q-card-section style="max-height: 50vh" class="scroll">
+          <div class="row col-12 q-col-gutter-x-xs q-col-gutter-y-xs">
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <q-input
+                outlined
+                class="inputgreen"
+                dense
+                bg-color="white"
+                v-model="specialSkill.field"
+                label="ด้าน"
+                hide-bottom-space
+                :rules="[
+                  (val) => !!val || `${'กรุณากรอกด้านความสามารถพิเศษ'}`,
+                ]"
+              />
             </div>
-          </q-page>
-        </q-page-container>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <q-input
+                outlined
+                dense
+                class="inputgreen"
+                bg-color="white"
+                v-model="specialSkill.detail"
+                label="รายละเอียด"
+                hide-bottom-space
+                :rules="[(val) => !!val || `${'กรุณากรอกรายละเอียด'}`]"
+              />
+            </div>
+            <div class="col-xs-12 col-sm-12 col-md-12">
+              <q-input
+                class="inputgreen"
+                outlined
+                dense
+                bg-color="white"
+                v-model="specialSkill.remark"
+                label="หมายเหตุ"
+              />
+            </div>
+            <div class="col-xs-12 col-sm-12 col-md-12">
+              <q-input
+                class="inputgreen"
+                outlined
+                dense
+                bg-color="white"
+                v-model="specialSkill.reference"
+                label="เอกสารอ้างอิง"
+              />
+            </div>
+          </div>
+        </q-card-section>
 
-        <q-footer>
-          <q-separator color="grey-4" />
-          <q-toolbar class="fit row wrap justify-end items-start content-start">
-            <q-btn
-              dense
-              unelevated
-              label="บันทึก"
-              id="onSubmit"
-              type="submit"
-              color="public"
-              class="q-px-md"
-            >
-              <q-tooltip>บันทึกข้อมูล</q-tooltip>
-            </q-btn>
-          </q-toolbar>
-        </q-footer>
+        <q-separator />
+
+        <q-card-actions align="right">
+          <q-btn
+            dense
+            unelevated
+            label="บันทึก"
+            id="onSubmit"
+            type="submit"
+            color="public"
+            class="q-px-md"
+          >
+            <q-tooltip>บันทึกข้อมูล</q-tooltip>
+          </q-btn>
+        </q-card-actions>   
       </q-form>
-    </q-layout>
+    </q-card>
   </q-dialog>
 
   <q-dialog v-model="historyDialog" class="dialog" persistent>
diff --git a/src/modules/04_registryNew/components/detail/PersonalInformation/Main.vue b/src/modules/04_registryNew/components/detail/PersonalInformation/Main.vue
index 852b5c649..6f09713ab 100644
--- a/src/modules/04_registryNew/components/detail/PersonalInformation/Main.vue
+++ b/src/modules/04_registryNew/components/detail/PersonalInformation/Main.vue
@@ -23,13 +23,13 @@ const tab = ref<string>("1");
   <q-card>
     <q-tabs
       v-model="tab"
-      class="text-grey q-pl-sm"
       active-color="blue-8"
       align="left"
       bordered
       narrow-indicator
       indicator-color="transparent"
       dense
+      class="text-grey q-pl-sm"
       >
         <q-tab name="1" label="ประวัติส่วนตัว" />
         <q-tab name="2" label="ประวัติการเปลี่ยนชื่อ-นามสกุล" />
diff --git a/src/modules/04_registryNew/components/detail/Salary/Main.vue b/src/modules/04_registryNew/components/detail/Salary/Main.vue
index 1d01bc502..a709e8fb4 100644
--- a/src/modules/04_registryNew/components/detail/Salary/Main.vue
+++ b/src/modules/04_registryNew/components/detail/Salary/Main.vue
@@ -8,22 +8,23 @@ import NotReceiveSalary from "@/modules/04_registryNew/components/detail/Salary/
 const tab = ref<string>("1");
 </script>
 <template>
-  <div class="row items-center q-mb-md">
-    <div class="text-dark row items-center text-weight-bold">
-      <q-icon name="mdi-cash" class="q-mr-md" size="sm" />
-      <h3 class="resigtry-tab-title">ข้อมูลเงินเดือน/ค่าจ้าง</h3>
+  <div class="row items-center q-my-md">
+    <div class="text-dark row items-center q-px-md">
+      <q-icon name="mdi-account" class="q-mr-md" size="22px" />
+      <div class="text-subtitle1 text-weight-bold">ข้อมูลเงินเดือน/ค่าจ้าง</div>
     </div>
   </div>
 
   <q-separator />
   <q-tabs
     v-model="tab"
-    class="text-grey"
-    active-color="blue"
-    indicator-color="white"
+    active-color="blue-8"
     align="left"
-    narrow-indicator
     bordered
+    narrow-indicator
+    indicator-color="transparent"
+    dense
+    class="text-grey q-pl-sm"
   >
     <q-tab name="1" label="ตำแหน่ง/เงินเดือน" />
     <q-tab name="2" label="บันทึกวันที่ไม่ได้รับเงินเดือนฯ" />
diff --git a/src/modules/04_registryNew/views/detailView.vue b/src/modules/04_registryNew/views/detailView.vue
index 6dfb20dcc..538b0f3b3 100644
--- a/src/modules/04_registryNew/views/detailView.vue
+++ b/src/modules/04_registryNew/views/detailView.vue
@@ -402,8 +402,8 @@ onMounted(async () => {
       </div>
 
       <div class="absolute-center-left q-ml-lg">
-        <q-avatar size="90px">
-          <img :src="profilePicture" />
+        <q-avatar size="90px" class="bg-grey-2" >
+          <q-img :src="profilePicture"/>
         </q-avatar>
         <q-btn
           round