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 996adf546..0e5439d72 100644
--- a/src/modules/04_registryNew/components/detail/PersonalInformation/01_Profile.vue
+++ b/src/modules/04_registryNew/components/detail/PersonalInformation/01_Profile.vue
@@ -41,6 +41,11 @@ const id = ref<string>("");
 const age = ref<string | null>("");
 const formData = reactive<RequestObject>(store.defaultProfile);
 
+const pagination = ref({
+  page: 1,
+  rowsPerPage: 10,
+});
+
 const dataLabel = {
   citizenId: "เลขบัตรประจำตัวประชาชน",
   name: "ชื่อ - สกุล",
@@ -378,7 +383,7 @@ onMounted(async () => {
         <q-tooltip>แก้ไขข้อมูล</q-tooltip>
       </q-btn>
       <q-btn flat round icon="mdi-history" color="info" @click="clickHistory">
-        <q-tooltip>ประวัติข้อมูลส่วนตัว</q-tooltip>
+        <q-tooltip>ประวัติแก้ไขข้อมูลส่วนตัว</q-tooltip>
       </q-btn>
     </div>
   </div>
@@ -456,398 +461,412 @@ 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-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-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-layout
+      view="lHh lpr lFf"
+      container
+      style="height: 80vh; min-width: 80%"
+      class="bg-white"
+    >
+      <q-header>
+        <q-toolbar>
+          <DialogHeader
+            tittle="ประวัติแก้ไขข้อมูลส่วนตัว"
+            :close="() => (modalHistory = false)"
           />
-        </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>
+        </q-toolbar>
+        <q-separator color="grey-4" />
+      </q-header>
 
-          <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>
+      <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
+            dense
+            :columns="columnsHistory"
+            :rows="rowsHistory"
+            class="custom-header-table"
+            v-model:pagination="pagination"
+            :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-page>
+      </q-page-container>
+    </q-layout>
   </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 96b2b6b48..e197f856e 100644
--- a/src/modules/04_registryNew/components/detail/PersonalInformation/04_Family.vue
+++ b/src/modules/04_registryNew/components/detail/PersonalInformation/04_Family.vue
@@ -36,32 +36,29 @@ const index = ref<number>(1);
 const fatherData = reactive({
   isHaveInfo: 1,
   isLive: 0,
-  citizenId: "123123213",
-  prefix: "นาย",
-  optionPrefix: ["นาย", "จ่าสิบเอก"],
-  firstName: "ณัฐพัฐ",
-  lastName: "ดิษยบุตร",
-  job: "ตำรวจ",
+  citizenId: "",
+  prefix: "",
+  firstName: "",
+  lastName: "",
+  job: "",
 });
 const motherData = reactive({
   isHaveInfo: 1,
   isLive: 0,
-  citizenId: "222222222",
-  prefix: "นาง",
-  optionPrefix: ["นาง", "นางสาว"],
-  firstName: "นางอริญกัญญา",
-  lastName: "ดิษยบุตร",
-  job: "พยาบาล",
+  citizenId: "",
+  prefix: "",
+  firstName: "",
+  lastName: "",
+  job: "",
 });
 const spouseData = reactive({
   isHave: 1,
   isLive: 0,
-  citizenId: "44444444",
-  prefix: "นาย",
-  optionPrefix: ["นาย", "นาง", "นางสาว"],
-  firstName: "กัญจาพล",
-  lastName: "ดิอุรุกษา",
-  job: "ค้าขาย",
+  citizenId: "",
+  prefix: "",
+  firstName: "",
+  lastName: "",
+  job: "",
 });
 
 const rows = ref<any>([]);
@@ -294,25 +291,25 @@ onMounted(async () => {
             <div>เลขบัตรประจำตัวประชาชน</div>
           </div>
           <div class="col">
-            {{ fatherData.citizenId }}
+            {{ fatherData.citizenId ? fatherData.citizenId : "-" }}
           </div>
         </div>
         <div class="row items-center">
           <div class="col-2">คำนำหน้าชื่อ</div>
           <div class="col-2">
-            {{ fatherData.prefix }}
+            {{ fatherData.prefix ? fatherData.prefix : "-" }}
           </div>
           <div class="col-1">ชื่อ</div>
           <div class="col-2">
-            {{ fatherData.firstName }}
+            {{ fatherData.firstName ? fatherData.firstName : "-" }}
           </div>
           <div class="col-1">นามสกุล</div>
           <div class="col-2">
-            {{ fatherData.lastName }}
+            {{ fatherData.lastName ? fatherData.lastName : "-" }}
           </div>
           <div class="col-1">อาชีพ</div>
           <div class="col">
-            {{ fatherData.job }}
+            {{ fatherData.job ? fatherData.job : "-" }}
           </div>
         </div>
         <div class="row items-center">
@@ -336,25 +333,25 @@ onMounted(async () => {
             <div>เลขบัตรประจำตัวประชาชน</div>
           </div>
           <div class="col">
-            {{ motherData.citizenId }}
+            {{ motherData.citizenId ? motherData.citizenId : "-" }}
           </div>
         </div>
         <div class="row items-center">
           <div class="col-2">คำนำหน้าชื่อ</div>
           <div class="col-2">
-            {{ motherData.prefix }}
+            {{ motherData.prefix ? motherData.prefix : "-" }}
           </div>
           <div class="col-1">ชื่อ</div>
           <div class="col-2">
-            {{ motherData.firstName }}
+            {{ motherData.firstName ? motherData.firstName : "-" }}
           </div>
           <div class="col-1">นามสกุล</div>
           <div class="col-2">
-            {{ motherData.lastName }}
+            {{ motherData.lastName ? motherData.lastName : "-" }}
           </div>
           <div class="col-1">อาชีพ</div>
           <div class="col">
-            {{ motherData.job }}
+            {{ motherData.job ? motherData.job : "-" }}
           </div>
         </div>
         <div class="row items-center">
@@ -378,25 +375,25 @@ onMounted(async () => {
             <div>เลขบัตรประจำตัวประชาชน</div>
           </div>
           <div class="col">
-            {{ spouseData.citizenId }}
+            {{ spouseData.citizenId ? spouseData.citizenId : "-" }}
           </div>
         </div>
         <div class="row items-center">
           <div class="col-2">คำนำหน้าชื่อ</div>
           <div class="col-2">
-            {{ spouseData.prefix }}
+            {{ spouseData.prefix ? spouseData.prefix : "-" }}
           </div>
           <div class="col-1">ชื่อ</div>
           <div class="col-2">
-            {{ spouseData.firstName }}
+            {{ spouseData.firstName ? spouseData.firstName : "-" }}
           </div>
           <div class="col-1">นามสกุล</div>
           <div class="col-2">
-            {{ spouseData.lastName }}
+            {{ spouseData.lastName ? spouseData.lastName : "-" }}
           </div>
           <div class="col-1">อาชีพ</div>
           <div class="col">
-            {{ spouseData.job }}
+            {{ spouseData.job ? spouseData.job : "-" }}
           </div>
         </div>
         <div class="row items-center">
@@ -1041,7 +1038,8 @@ onMounted(async () => {
         />
       </q-card-section>
       <q-separator color="grey-4" />
-      <div class="q-pa-md scroll" style="max-height: 70vh">
+      <div v-if="historyRows.length === 0" class="q-pa-md">ไม่พบข้อมูล</div>
+      <div v-else class="q-pa-md scroll" style="max-height: 70vh">
         <div>
           <div class="row text-right">
             <div class="col-12">
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 1238e5941..fd0234685 100644
--- a/src/modules/04_registryNew/components/detail/PersonalInformation/05_Education.vue
+++ b/src/modules/04_registryNew/components/detail/PersonalInformation/05_Education.vue
@@ -948,225 +948,276 @@ onMounted(async () => {
   </d-table>
 
   <q-dialog v-model="dialog" class="dialog" persistent>
-    <q-card style="min-width: 40%" class="bg-white">
+    <q-layout
+      view="lHh lpr lFf"
+      container
+      style="height: 80vh"
+      class="bg-white"
+    >
       <q-form @submit.prevent greedy @validation-success="onSubmit()">
-        <q-card-section class="flex justify-between" style="padding: 0">
-          <dialog-header
-            :tittle="dialogStatus == 'edit' ? 'แก้ไขข้อมูล' : 'เพิ่มข้อมูล'"
-            :close="closeDialog"
-          />
-        </q-card-section>
-        <q-separator color="grey-4" />
-        <div class="col">
-          <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,
+        <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"
-              />
+                  :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>
             </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>
-          </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-gutter-sm">
-              <div class="col">
-                <datepicker
-                  menu-class-name="modalfix"
-                  v-model="educationData.startYear"
-                  :locale="'th'"
-                  autoApply
-                  year-picker
-                  :enableTimePicker="false"
-                  @update:modelValue="
+            <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
-                      lazy-rules
-                      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="
+                  >
+                    <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>
+                  >
+                    <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>
-            <div v-if="isDate === 'true'" class="row q-gutter-sm">
-              <div class="col">
-                <datepicker
-                  menu-class-name="modalfix"
-                  v-model="educationData.startDate"
-                  :locale="'th'"
-                  autoApply
-                  :enableTimePicker="false"
-                  week-start="0"
-                  @update:modelValue="
+              <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="
+                  >
+                    <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">
+                <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 }">{{
@@ -1175,15 +1226,16 @@ onMounted(async () => {
                   <template #trigger>
                     <q-input
                       outlined
+                      bg-color="white"
                       dense
                       class="inputgreen"
                       lazy-rules
-                      :model-value="date2Thai(educationData.endDate)"
+                      :model-value="date2Thai(educationData.finishDate)"
                       :rules="[
-                        (val) => !!val || `${'กรุณาเลือกวันที่จบการศึกษา'}`,
+                        (val) => !!val || `${'กรุณาเลือกวันที่สำเร็จการศึกษา'}`,
                       ]"
                       hide-bottom-space
-                      :label="`${'วันที่จบการศึกษา'}`"
+                      :label="`${'วันที่สำเร็จการศึกษา'}`"
                     >
                       <template v-slot:prepend>
                         <q-icon
@@ -1197,198 +1249,164 @@ onMounted(async () => {
                   </template>
                 </datepicker>
               </div>
-            </div>
-          </q-card>
-          <div class="row q-gutter-sm q-px-md">
-            <div class="col">
-              <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">
-              <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,
+              <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="เป็นวุฒิการศึกษาในตำแหน่ง"
-              />
+                  :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>
             </div>
-          </div>
-          <div class="row q-gutter-sm q-px-md q-mb-sm">
-            <div class="col">
-              <q-input
-                outlined
-                v-model="educationData.degree"
-                label="วุฒิการศึกษา"
-                class="inputgreen"
-                bg-color="white"
-                dense
-                :rules="[(val) => !!val || `${'กรุณากรอกวุฒิการศึกษา'}`]"
-                hide-bottom-space
-              />
-            </div>
-            <div class="col">
-              <q-input
-                outlined
-                class="inputgreen"
-                v-model="educationData.field"
-                label="สาขาวิชา/ทาง"
-                bg-color="white"
-                dense
-              />
-            </div>
-          </div>
-          <div class="row q-gutter-sm q-px-md q-mb-sm">
-            <div class="col">
-              <q-input
-                outlined
-                v-model="educationData.fundName"
-                label="ทุน"
-                class="inputgreen"
-                bg-color="white"
-                dense
-              />
-            </div>
-            <div class="col">
-              <q-input
-                outlined
-                class="inputgreen"
-                v-model="educationData.gpa"
-                label="เกรดเฉลี่ย"
-                bg-color="white"
-                dense
-                mask="#.##"
-              />
-            </div>
-          </div>
-          <div class="row q-gutter-sm q-px-md q-mb-sm">
-            <div class="col">
-              <q-input
-                outlined
-                class="inputgreen"
-                v-model="educationData.country"
-                label="ประเทศ"
-                bg-color="white"
-                dense
-              />
-            </div>
-            <div class="col">
-              <q-input
-                outlined
-                class="inputgreen"
-                v-model="educationData.other"
-                label="ข้อมูลติดต่อ"
-                bg-color="white"
-                dense
-              />
-            </div>
-          </div>
-          <div class="row q-gutter-sm q-px-md">
-            <div class="col">
-              <q-input
-                outlined
-                class="inputgreen"
-                v-model="educationData.duration"
-                label="ระยะเวลา"
-                :rules="[(val) => !!val || `${'กรุณากรอกระยะเวลา'}`]"
-                bg-color="white"
-                dense
-              />
-            </div>
-            <div class="col">
-              <q-input
-                outlined
-                class="inputgreen"
-                v-model="educationData.durationYear"
-                label="ระยะเวลาหลักสูตร (ปี)"
-                :rules="[
-                  (val) => !!val || `${'กรุณากรอกระยะเวลาหลักสูตร (ปี)'}`,
-                ]"
-                bg-color="white"
-                type="number"
-                dense
-              />
-            </div>
-          </div>
-          <div class="row q-gutter-sm q-px-md">
-            <div class="col">
-              <q-input
-                outlined
-                class="inputgreen"
-                v-model="educationData.note"
-                label="หมายเหตุ"
-                bg-color="white"
-                dense
-                type="textarea"
-              />
-            </div>
-          </div>
-        </div>
-        <q-card-actions align="right">
-          <q-btn
-            id="onSubmit"
-            type="submit"
-            dense
-            unelevated
-            label="บันทึก"
-            color="public"
-            class="q-px-md"
-          >
-            <q-tooltip>บันทึกข้อมูล</q-tooltip>
-          </q-btn>
-        </q-card-actions>
+          </q-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
+              id="onSubmit"
+              type="submit"
+              dense
+              unelevated
+              label="บันทึก"
+              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="historyDialog" class="dialog" persistent>
diff --git a/src/modules/04_registryNew/components/detail/Salary/01_PositionSalary.vue b/src/modules/04_registryNew/components/detail/Salary/01_PositionSalary.vue
index ba19133c2..066dd2e15 100644
--- a/src/modules/04_registryNew/components/detail/Salary/01_PositionSalary.vue
+++ b/src/modules/04_registryNew/components/detail/Salary/01_PositionSalary.vue
@@ -575,7 +575,12 @@ onMounted(() => {
                       hide-bottom-space
                     >
                       <template v-slot:prepend>
-                        <q-icon name="event" class="cursor-pointer"> </q-icon>
+                        <q-icon
+                          name="event"
+                          color="primary"
+                          class="cursor-pointer"
+                        >
+                        </q-icon>
                       </template>
                     </q-input>
                   </template>
diff --git a/src/modules/15_development/components/BasicInfo.vue b/src/modules/15_development/components/BasicInfo.vue
index 90022418a..ab7f6ee68 100644
--- a/src/modules/15_development/components/BasicInfo.vue
+++ b/src/modules/15_development/components/BasicInfo.vue
@@ -4,6 +4,8 @@ import { useQuasar } from "quasar";
 
 import type { FormBasicinfo } from "@/modules/15_development/interface/request/Main";
 
+import DialogSelectAgency from "@/modules/15_development/components/DialogSelectAgency.vue";
+
 import { useCounterMixin } from "@/stores/mixin";
 
 const $q = useQuasar();
@@ -11,7 +13,7 @@ const { showLoader, hideLoader, dialogConfirm } = useCounterMixin();
 
 const formData = reactive<FormBasicinfo>({
   year: new Date().getFullYear(),
-  org: "สำนักงานคณะกรรมการข้าราชการกรุงเทพมหานครกองบริหารทั้วไป",
+  org: "",
   projectName: "",
   reason: "",
   objective: "",
@@ -25,6 +27,14 @@ function onSubmit() {
   dialogConfirm($q, () => {});
 }
 
+const modalDialogSelect = ref<boolean>(false);
+function selectAgency() {
+  modalDialogSelect.value = true;
+}
+function updateAgency(name: string) {
+  formData.org = name;
+}
+
 onMounted(() => {
   console.log("ข้อมูลเบื้องต้น");
 });
@@ -66,14 +76,14 @@ onMounted(() => {
         </datepicker>
       </div>
       <div class="col-xs-10 col-sm-10 col-md-10">
-        <q-select
+        <q-input
           dense
           outlined
           v-model="formData.org"
-          :options="options"
           label="ชื่อหน่วยงานที่รับผิดชอบ"
           hide-bottom-space
           lazy-rules
+          @click="selectAgency"
           :rules="[
             (val:string) =>
               !!val || `${'กรุณาเลือกหน่วยงานที่รับผิดชอบ'}`,
@@ -143,6 +153,11 @@ onMounted(() => {
       </q-btn>
     </div>
   </q-form>
+
+  <DialogSelectAgency
+    v-model:modal="modalDialogSelect"
+    @update:updateAgency="updateAgency"
+  />
 </template>
 
 <style scoped></style>
diff --git a/src/modules/15_development/components/DialogSelectAgency.vue b/src/modules/15_development/components/DialogSelectAgency.vue
new file mode 100644
index 000000000..516fc1855
--- /dev/null
+++ b/src/modules/15_development/components/DialogSelectAgency.vue
@@ -0,0 +1,151 @@
+<script setup lang="ts">
+import { computed, ref, reactive, watch } from "vue";
+import { useQuasar } from "quasar";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+import DialogHeader from "@/components/DialogHeader.vue";
+
+import { useCounterMixin } from "@/stores/mixin";
+
+const $q = useQuasar();
+const {
+  date2Thai,
+  dialogConfirm,
+  showLoader,
+  hideLoader,
+  messageError,
+  success,
+  dialogRemove,
+} = useCounterMixin();
+
+const modal = defineModel<boolean>("modal", { default: false });
+
+const emit = defineEmits(["update:updateAgency"]);
+const node = ref<any>([]);
+const expanded = ref<any>([]);
+const ticked = ref<any>([]);
+
+function closeDialog() {
+  modal.value = false;
+  ticked.value = [];
+  expanded.value = [];
+}
+function fetchActive() {
+  showLoader();
+  http
+    .get(config.API.activeOrganization)
+    .then((res) => {
+      const data = res.data.result;
+      fetchTree(data.activeId);
+    })
+    .catch((err) => {
+      messageError($q, err);
+      hideLoader();
+    });
+}
+
+async function fetchTree(id: string) {
+  showLoader();
+  http
+    .get(config.API.orgByid(id.toString()))
+    .then((res) => {
+      const data = res.data.result;
+      node.value = data;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+function updateTicked(val: any) {
+  console.log(expanded.value);
+
+  ticked.value = [];
+  ticked.value.push(val[val.length - 1]);
+}
+
+function onSubmit() {
+  dialogConfirm($q, () => {
+    emit("update:updateAgency", ticked.value[0]);
+    closeDialog();
+  });
+}
+
+function splitWords(sentence: string) {
+  // ใช้ฟังก์ชั่น split เพื่อแยกข้อความด้วยเครื่องหมาย '/'
+  const words = sentence.split("/");
+  console.log(words);
+
+  // ticked.value = sentence;
+  // expanded.value = words.reverse();
+}
+
+watch(
+  () => modal.value,
+  () => {
+    modal.value && fetchActive();
+    // splitWords("ฝ่ายบริหารทั่วไป/กองโครงสร้างและอัตรากำลัง/สำนักงาน ก.ก.");
+  }
+);
+</script>
+<template>
+  <q-dialog v-model="modal">
+    <q-card style="width: 600px; max-width: 80vw">
+      <DialogHeader
+        :tittle="'เลือกหน่วยงานที่รับผิดชอบ'"
+        :close="closeDialog"
+      />
+      <q-separator />
+
+      <q-card-section class="q-pt-none scroll" style="max-height: 65vh">
+        <q-tree
+          class="q-pa-sm q-gutter-sm"
+          dense
+          :nodes="node"
+          node-key="orgName"
+          label-key="labelName"
+          v-model:expanded="expanded"
+          tick-strategy="strict"
+          v-model:ticked="ticked"
+          @update:ticked="updateTicked"
+        >
+          <template v-slot:default-header="prop">
+            <q-item
+              clickable
+              active-class="my-list-link text-primary text-weight-medium"
+              class="row col-12 items-center text-dark q-py-xs q-pl-sm rounded-borders my-list"
+            >
+              <div>
+                <div class="text-weight-medium">
+                  {{ prop.node.orgTreeName }}
+                </div>
+                <div class="text-weight-light text-grey-8">
+                  {{ prop.node.orgCode == null ? null : prop.node.orgCode }}
+                  {{
+                    prop.node.orgTreeShortName == null
+                      ? null
+                      : prop.node.orgTreeShortName
+                  }}
+                </div>
+              </div>
+            </q-item>
+          </template>
+        </q-tree>
+      </q-card-section>
+
+      <q-separator />
+
+      <q-card-actions align="right" class="bg-white text-teal">
+        <q-btn dense unelevated label="บันทึก" color="public" @click="onSubmit">
+          <q-tooltip>บันทึกข้อมูล</q-tooltip>
+        </q-btn>
+      </q-card-actions>
+    </q-card>
+  </q-dialog>
+</template>
+
+<style scoped></style>
diff --git a/src/style/quasar-variables.sass b/src/style/quasar-variables.sass
index cfb2edf5b..070d6407e 100644
--- a/src/style/quasar-variables.sass
+++ b/src/style/quasar-variables.sass
@@ -155,3 +155,7 @@ h3.resigtry-tab-title
   font-weight: 600
   margin: 0 0
   padding: 0 0
+
+.q-dialog .q-layout__section--marginal 
+    background-color: #fff
+    color: #000
\ No newline at end of file