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 850de1dfe..95d384ffe 100644
--- a/src/modules/04_registryNew/components/detail/PersonalInformation/01_Profile.vue
+++ b/src/modules/04_registryNew/components/detail/PersonalInformation/01_Profile.vue
@@ -456,398 +456,428 @@ onMounted(async () => {
 
   <!-- Edit Dialog -->
   <q-dialog v-model="modal" persistent>
-    <q-card style="width: 600px">
+    <q-layout
+      view="lHh lpr lFf"
+      container
+      style="height: 80vh"
+      class="bg-white"
+    >
       <q-form greedy @submit.prevent @validation-success="onSubmit">
-        <DialogHeader
-          tittle="แก้ไขประวัติส่วนตัว"
-          :close="() => (modal = false)"
-        />
-        <q-separator />
-        <q-card-section class="q-p-sm">
-          <div class="row col-12 q-col-gutter-x-xs q-col-gutter-y-xs">
-            <div class="col-xs-6 col-sm-6 col-md-6">
-              <q-input
-                dense
-                outlined
-                lazy-rules
-                hide-bottom-space
-                maxlength="13"
-                mask="#############"
-                v-model="formData.citizenId"
-                class="inputgreen"
-                :label="dataLabel.citizenId"
-                :rules="[
+        <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 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
+                  dense
+                  outlined
+                  lazy-rules
+                  hide-bottom-space
+                  maxlength="13"
+                  mask="#############"
+                  v-model="formData.citizenId"
+                  class="inputgreen"
+                  :label="dataLabel.citizenId"
+                  :rules="[
                 (val: string) => !!val || `${'กรุณากรอก เลขประจำตัวประชาชน'}`,
                 (val: string) =>
                   val.length >= 13 ||
                   `${'กรุณากรอกเลขประจำตัวประชาชนให้ครบ'}`,
               ]"
-              />
-            </div>
-            <div class="col-xs-6 col-sm-6 col-md-6">
-              <q-select
-                dense
-                outlined
-                use-input
-                lazy-rules
-                emit-value
-                map-options
-                hide-bottom-space
-                input-debounce="0"
-                option-label="name"
-                option-value="name"
-                v-model="formData.prefix"
-                class="inputgreen"
-                :options="store.Ops.prefixOps"
-                :label="dataLabel.prefix"
-                :rules="[(val: string) => !!val || `${'กรุณาเลือก คำนำหน้าชื่อ'}`]"
-                @filter="(inputValue: any,
+                />
+              </div>
+              <div class="col-xs-6 col-sm-6 col-md-6">
+                <q-select
+                  dense
+                  outlined
+                  use-input
+                  lazy-rules
+                  emit-value
+                  map-options
+                  hide-bottom-space
+                  input-debounce="0"
+                  option-label="name"
+                  option-value="name"
+                  v-model="formData.prefix"
+                  class="inputgreen"
+                  :options="store.Ops.prefixOps"
+                  :label="dataLabel.prefix"
+                  :rules="[(val: string) => !!val || `${'กรุณาเลือก คำนำหน้าชื่อ'}`]"
+                  @filter="(inputValue: any,
               doneFn: Function) => filterSelector(inputValue, doneFn, 'prefixOps'
               )"
-              />
-            </div>
-            <div class="col-xs-6 col-sm-6 col-md-6">
-              <q-select
-                dense
-                outlined
-                clearable
-                use-input
-                lazy-rules
-                emit-value
-                map-options
-                hide-bottom-space
-                input-debounce="0"
-                option-label="name"
-                option-value="name"
-                v-model="formData.rank"
-                class="inputgreen"
-                :options="store.Ops.rankOps"
-                :label="dataLabel.rank"
-                @filter="(inputValue: any,
+                />
+              </div>
+              <div class="col-xs-6 col-sm-6 col-md-6">
+                <q-select
+                  dense
+                  outlined
+                  clearable
+                  use-input
+                  lazy-rules
+                  emit-value
+                  map-options
+                  hide-bottom-space
+                  input-debounce="0"
+                  option-label="name"
+                  option-value="name"
+                  v-model="formData.rank"
+                  class="inputgreen"
+                  :options="store.Ops.rankOps"
+                  :label="dataLabel.rank"
+                  @filter="(inputValue: any,
               doneFn: Function) => filterSelector(inputValue, doneFn, 'rankOps'
               )"
-              />
-            </div>
-            <div class="col-xs-6 col-sm-6 col-md-6">
-              <q-input
-                dense
-                outlined
-                lazy-rules
-                hide-bottom-space
-                v-model="formData.firstName"
-                class="inputgreen"
-                :label="dataLabel.firstName"
-                :rules="[(val: string) => !!val || `${'กรุณากรอก ชื่อ'}`]"
-              />
-            </div>
-            <div class="col-xs-6 col-sm-6 col-md-6">
-              <q-input
-                dense
-                outlined
-                lazy-rules
-                hide-bottom-space
-                v-model="formData.lastName"
-                class="inputgreen"
-                :label="dataLabel.lastName"
-                :rules="[(val: string) => !!val || `${'กรุณากรอก นามสกุล'}`]"
-              />
-            </div>
-            <div class="col-xs-6 col-sm-6 col-md-6">
-              <datepicker
-                autoApply
-                :max-date="calculateMaxDate()"
-                borderless
-                :enableTimePicker="false"
-                week-start="0"
-                menu-class-name="modalfix"
-                v-model="formData.birthDate"
-                :locale="'th'"
-              >
-                <template #year="{ year }">
-                  {{ year + 543 }}
-                </template>
-                <template #year-overlay-value="{ value }">
-                  {{ parseInt(value + 543) }}
-                </template>
-                <template #trigger>
-                  <q-input
-                    for="inputDatereceive"
-                    ref="dateReceivedRef"
-                    outlined
-                    dense
-                    hide-bottom-space
-                    class="inputgreen"
-                    :model-value="
-                      formData.birthDate != null
-                        ? date2Thai(formData.birthDate)
-                        : null
-                    "
-                    :label="dataLabel.birthDate"
-                    :rules="[
-                      (val) => !!val || `${'กรุณาเลือก วัน/เดือน/ปี เกิด'}`,
-                    ]"
-                  >
-                    <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
-                dense
-                outlined
-                lazy-rules
-                hide-bottom-space
-                readonly
-                v-model="age"
-                :label="dataLabel.age"
-              />
-            </div>
-            <div class="col-xs-6 col-sm-6 col-md-6">
-              <q-select
-                dense
-                outlined
-                use-input
-                clearable
-                lazy-rules
-                emit-value
-                map-options
-                hide-bottom-space
-                input-debounce="0"
-                option-label="name"
-                option-value="name"
-                v-model="formData.gender"
-                class="inputgreen"
-                :options="store.Ops.genderOps"
-                :label="dataLabel.gender"
-                @filter="(inputValue: any,
+                />
+              </div>
+              <div class="col-xs-6 col-sm-6 col-md-6">
+                <q-input
+                  dense
+                  outlined
+                  lazy-rules
+                  hide-bottom-space
+                  v-model="formData.firstName"
+                  class="inputgreen"
+                  :label="dataLabel.firstName"
+                  :rules="[(val: string) => !!val || `${'กรุณากรอก ชื่อ'}`]"
+                />
+              </div>
+              <div class="col-xs-6 col-sm-6 col-md-6">
+                <q-input
+                  dense
+                  outlined
+                  lazy-rules
+                  hide-bottom-space
+                  v-model="formData.lastName"
+                  class="inputgreen"
+                  :label="dataLabel.lastName"
+                  :rules="[(val: string) => !!val || `${'กรุณากรอก นามสกุล'}`]"
+                />
+              </div>
+              <div class="col-xs-6 col-sm-6 col-md-6">
+                <datepicker
+                  autoApply
+                  :max-date="calculateMaxDate()"
+                  borderless
+                  :enableTimePicker="false"
+                  week-start="0"
+                  menu-class-name="modalfix"
+                  v-model="formData.birthDate"
+                  :locale="'th'"
+                >
+                  <template #year="{ year }">
+                    {{ year + 543 }}
+                  </template>
+                  <template #year-overlay-value="{ value }">
+                    {{ parseInt(value + 543) }}
+                  </template>
+                  <template #trigger>
+                    <q-input
+                      for="inputDatereceive"
+                      ref="dateReceivedRef"
+                      outlined
+                      dense
+                      hide-bottom-space
+                      class="inputgreen"
+                      :model-value="
+                        formData.birthDate != null
+                          ? date2Thai(formData.birthDate)
+                          : null
+                      "
+                      :label="dataLabel.birthDate"
+                      :rules="[
+                        (val) => !!val || `${'กรุณาเลือก วัน/เดือน/ปี เกิด'}`,
+                      ]"
+                    >
+                      <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
+                  dense
+                  outlined
+                  lazy-rules
+                  hide-bottom-space
+                  readonly
+                  v-model="age"
+                  :label="dataLabel.age"
+                />
+              </div>
+              <div class="col-xs-6 col-sm-6 col-md-6">
+                <q-select
+                  dense
+                  outlined
+                  use-input
+                  clearable
+                  lazy-rules
+                  emit-value
+                  map-options
+                  hide-bottom-space
+                  input-debounce="0"
+                  option-label="name"
+                  option-value="name"
+                  v-model="formData.gender"
+                  class="inputgreen"
+                  :options="store.Ops.genderOps"
+                  :label="dataLabel.gender"
+                  @filter="(inputValue: any,
               doneFn: Function) => filterSelector(inputValue, doneFn, 'genderOps'
               )"
-              />
-            </div>
-            <div class="col-xs-6 col-sm-6 col-md-6">
-              <q-select
-                dense
-                outlined
-                use-input
-                clearable
-                lazy-rules
-                emit-value
-                map-options
-                hide-bottom-space
-                option-value="name"
-                option-label="name"
-                input-debounce="0"
-                class="inputgreen"
-                v-model="formData.relationship"
-                :options="store.Ops.statusOps"
-                :label="dataLabel.relationship"
-                @filter="(inputValue: any,
+                />
+              </div>
+              <div class="col-xs-6 col-sm-6 col-md-6">
+                <q-select
+                  dense
+                  outlined
+                  use-input
+                  clearable
+                  lazy-rules
+                  emit-value
+                  map-options
+                  hide-bottom-space
+                  option-value="name"
+                  option-label="name"
+                  input-debounce="0"
+                  class="inputgreen"
+                  v-model="formData.relationship"
+                  :options="store.Ops.statusOps"
+                  :label="dataLabel.relationship"
+                  @filter="(inputValue: any,
               doneFn: Function) => filterSelector(inputValue, doneFn, 'statusOps'
               )"
-              />
-            </div>
-            <div class="col-xs-6 col-sm-6 col-md-6">
-              <q-input
-                dense
-                outlined
-                lazy-rules
-                hide-bottom-space
-                class="inputgreen"
-                v-model="formData.nationality"
-                :label="dataLabel.nationality"
-              />
-            </div>
-            <div class="col-xs-6 col-sm-6 col-md-6">
-              <q-input
-                dense
-                outlined
-                lazy-rules
-                hide-bottom-space
-                class="inputgreen"
-                v-model="formData.ethnicity"
-                :label="dataLabel.ethnicity"
-              />
-            </div>
-            <div class="col-xs-6 col-sm-6 col-md-6">
-              <q-select
-                dense
-                outlined
-                use-input
-                clearable
-                lazy-rules
-                emit-value
-                map-options
-                hide-bottom-space
-                option-value="name"
-                option-label="name"
-                input-debounce="0"
-                v-model="formData.religion"
-                class="inputgreen"
-                :options="store.Ops.religionOps"
-                :label="dataLabel.religion"
-                @filter="(inputValue: any,
+                />
+              </div>
+              <div class="col-xs-6 col-sm-6 col-md-6">
+                <q-input
+                  dense
+                  outlined
+                  lazy-rules
+                  hide-bottom-space
+                  class="inputgreen"
+                  v-model="formData.nationality"
+                  :label="dataLabel.nationality"
+                />
+              </div>
+              <div class="col-xs-6 col-sm-6 col-md-6">
+                <q-input
+                  dense
+                  outlined
+                  lazy-rules
+                  hide-bottom-space
+                  class="inputgreen"
+                  v-model="formData.ethnicity"
+                  :label="dataLabel.ethnicity"
+                />
+              </div>
+              <div class="col-xs-6 col-sm-6 col-md-6">
+                <q-select
+                  dense
+                  outlined
+                  use-input
+                  clearable
+                  lazy-rules
+                  emit-value
+                  map-options
+                  hide-bottom-space
+                  option-value="name"
+                  option-label="name"
+                  input-debounce="0"
+                  v-model="formData.religion"
+                  class="inputgreen"
+                  :options="store.Ops.religionOps"
+                  :label="dataLabel.religion"
+                  @filter="(inputValue: any,
               doneFn: Function) => filterSelector(inputValue, doneFn, 'religionOps'
               )"
-              />
-            </div>
-            <div class="col-xs-6 col-sm-6 col-md-6">
-              <q-select
-                dense
-                outlined
-                use-input
-                clearable
-                lazy-rules
-                emit-value
-                map-options
-                hide-bottom-space
-                option-value="name"
-                option-label="name"
-                input-debounce="0"
-                v-model="formData.bloodGroup"
-                class="inputgreen"
-                :options="store.Ops.bloodOps"
-                :label="dataLabel.bloodGroup"
-                @filter="(inputValue: any,
+                />
+              </div>
+              <div class="col-xs-6 col-sm-6 col-md-6">
+                <q-select
+                  dense
+                  outlined
+                  use-input
+                  clearable
+                  lazy-rules
+                  emit-value
+                  map-options
+                  hide-bottom-space
+                  option-value="name"
+                  option-label="name"
+                  input-debounce="0"
+                  v-model="formData.bloodGroup"
+                  class="inputgreen"
+                  :options="store.Ops.bloodOps"
+                  :label="dataLabel.bloodGroup"
+                  @filter="(inputValue: any,
               doneFn: Function) => filterSelector(inputValue, doneFn, 'bloodOps'
               )"
-              />
+                />
+              </div>
+              <div class="col-xs-6 col-sm-6 col-md-6">
+                <q-input
+                  dense
+                  outlined
+                  lazy-rules
+                  hide-bottom-space
+                  mask="##########"
+                  class="inputgreen"
+                  v-model="formData.phone"
+                  :label="dataLabel.phone"
+                />
+              </div>
             </div>
-            <div class="col-xs-6 col-sm-6 col-md-6">
-              <q-input
-                dense
-                outlined
-                lazy-rules
-                hide-bottom-space
-                mask="##########"
-                class="inputgreen"
-                v-model="formData.phone"
-                :label="dataLabel.phone"
-              />
-            </div>
-          </div>
-        </q-card-section>
-        <q-separator />
-        <div class="text-right q-pa-sm">
-          <q-btn
-            dense
-            unelevated
-            label="บันทึก"
-            id="onSubmit"
-            type="submit"
-            color="public"
-            class="q-px-md"
-          >
-            <q-tooltip>บันทึกข้อมูล</q-tooltip>
-          </q-btn>
-        </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>
       </q-form>
-    </q-card>
+    </q-layout>
   </q-dialog>
 
   <q-dialog v-model="modalHistory" persistent>
-    <q-card style="min-width: 80%">
-      <q-card-section class="flex justify-between" style="padding: 0">
-        <DialogHeader
-          tittle="ประวัติแก้ไขข้อมูลส่วนตัว"
-          :close="() => (modalHistory = false)"
-        />
-      </q-card-section>
+    <q-layout
+      view="lHh lpr lFf"
+      container
+      style="height: 80vh; min-width: 80%"
+      class="bg-white"
+    >
+      <q-form @submit.prevent greedy @validation-success="onSubmit()">
+        <q-header>
+          <q-toolbar>
+            <DialogHeader
+              tittle="ประวัติแก้ไขข้อมูลส่วนตัว"
+              :close="() => (modalHistory = false)"
+            />
+          </q-toolbar>
+          <q-separator color="grey-4" />
+        </q-header>
 
-      <q-separator />
-      <q-card-section class="q-p-sm">
-        <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-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"
               />
-              <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
-          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>
+            </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>
 
-          <template v-slot:pagination="scope">
-            <q-pagination
-              v-model="currentPage"
-              active-color="primary"
-              color="dark"
-              :max="Number(maxPage)"
-              size="sm"
-              boundary-links
-              direction-links
-            ></q-pagination>
-          </template>
-        </d-table>
-      </q-card-section>
-    </q-card>
+              <template v-slot:pagination="scope">
+                <q-pagination
+                  v-model="currentPage"
+                  active-color="primary"
+                  color="dark"
+                  :max="Number(maxPage)"
+                  size="sm"
+                  boundary-links
+                  direction-links
+                ></q-pagination>
+              </template>
+            </d-table>
+          </q-page>
+        </q-page-container>
+      </q-form>
+    </q-layout>
   </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 e9687418f..fd0234685 100644
--- a/src/modules/04_registryNew/components/detail/PersonalInformation/05_Education.vue
+++ b/src/modules/04_registryNew/components/detail/PersonalInformation/05_Education.vue
@@ -951,7 +951,7 @@ onMounted(async () => {
     <q-layout
       view="lHh lpr lFf"
       container
-      style="height: 85vh"
+      style="height: 80vh"
       class="bg-white"
     >
       <q-form @submit.prevent greedy @validation-success="onSubmit()">