diff --git a/src/modules/04_registryNew/components/detail/GovernmentInformation/01_Info.vue b/src/modules/04_registryNew/components/detail/GovernmentInformation/01_Info.vue
index bcb0df7ac..695e07dca 100644
--- a/src/modules/04_registryNew/components/detail/GovernmentInformation/01_Info.vue
+++ b/src/modules/04_registryNew/components/detail/GovernmentInformation/01_Info.vue
@@ -102,8 +102,8 @@ const visibleColumnsHistory = ref<String[]>([
   "govAgeAbsent",
   "govAgePlus",
   "reasonSameDate",
-  "createdFullName",
-  "createdAt",
+  "lastUpdateFullName",
+  "lastUpdatedAt",
 ]);
 
 const columnsHistory = ref<QTableProps["columns"]>([
@@ -212,6 +212,7 @@ const columnsHistory = ref<QTableProps["columns"]>([
     label: "วันที่บรรจุ",
     sortable: true,
     field: "dateAppoint",
+    format: (v) => date2Thai(v),
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     sort: (a: string, b: string) =>
@@ -223,6 +224,7 @@ const columnsHistory = ref<QTableProps["columns"]>([
     label: "เริ่มปฎิบัติราชการ",
     sortable: true,
     field: "dateStart",
+    format: (v) => date2Thai(v),
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     sort: (a: string, b: string) =>
@@ -234,6 +236,7 @@ const columnsHistory = ref<QTableProps["columns"]>([
     label: "วันเกษียณอายุ",
     sortable: true,
     field: "retireDate",
+    format: (v) => date2Thai(v),
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     sort: (a: string, b: string) =>
@@ -284,22 +287,23 @@ const columnsHistory = ref<QTableProps["columns"]>([
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
-    name: "createdFullName",
+    name: "lastUpdateFullName",
     align: "left",
     label: "ผู้ดำเนินการ",
     sortable: true,
-    field: "createdFullName",
+    field: "lastUpdateFullName",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     sort: (a: string, b: string) =>
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
-    name: "createdAt",
+    name: "lastUpdatedAt",
     align: "left",
     label: "วันที่แก้ไข",
     sortable: true,
-    field: "createdAt",
+    field: "lastUpdatedAt",
+    format: (v) => date2Thai(v),
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     sort: (a: string, b: string) =>
@@ -311,9 +315,11 @@ const columnsHistory = ref<QTableProps["columns"]>([
 function openDialogEdit() {
   modalEdit.value = true;
 
-  containDate.value = formMain.containDate ?formMain.containDate:null 
-  workDate.value = formMain.workDate ?formMain.workDate:null 
-  reasonSameDate.value = formMain.reasonSameDate ?formMain.reasonSameDate:null 
+  containDate.value = formMain.containDate ? formMain.containDate : null;
+  workDate.value = formMain.workDate ? formMain.workDate : null;
+  reasonSameDate.value = formMain.reasonSameDate
+    ? formMain.reasonSameDate
+    : null;
 }
 
 function openDialogHistory() {
@@ -352,7 +358,11 @@ function onSubmit() {
       .patch(config.API.profileNewGovernmentById(profileId.value), {
         dateAppoint: containDate.value,
         dateStart: workDate.value,
-        reasonSameDate: reasonSameDate.value,
+        reasonSameDate:
+          dateToISO(containDate.value as Date) ===
+          dateToISO(workDate.value as Date)
+            ? ""
+            : reasonSameDate.value,
       })
       .then((res) => {
         closeDialog();
@@ -375,7 +385,6 @@ function getData() {
   http
     .get(config.API.profileNewGovernmentById(profileId.value))
     .then((res) => {
-      console.log(res.data.result);
       const data = res.data.result;
       formMain.ocId = data.org; //สังกัด
       formMain.positionId = data.position; //ตำแหน่ง
@@ -431,6 +440,8 @@ function getDataHistory() {
           reasonSameDate: e.reasonSameDate,
           createdFullName: e.createdFullName,
           createdAt: new Date(e.createdAt),
+          lastUpdatedAt: e.lastUpdatedAt,
+          lastUpdateFullName: e.lastUpdateFullName,
         });
       });
     })
@@ -622,236 +633,246 @@ onMounted(() => {
 
   <!-- dialog edit -->
   <q-dialog v-model="modalEdit" persistent>
-    <q-card style="min-width: 600px">
+    <q-layout
+      view="lHh lpr lFf"
+      container
+      style="height: 80vh"
+      class="bg-white"
+    >
       <form @submit.prevent="validateForm">
-        <q-card-section class="flex justify-between" style="padding: 0">
-          <DialogHeader tittle="แก้ไขข้อมูล" :close="closeDialog" />
-        </q-card-section>
+        <q-header>
+          <q-toolbar>
+            <DialogHeader tittle="แก้ไขข้อมูลราชการ" :close="closeDialog" />
+          </q-toolbar>
+          <q-separator color="grey-4" />
+        </q-header>
 
-        <q-separator />
-        <q-card-section class="q-pa-md">
-          <div class="row q-col-gutter-sm">
-            <div class="col-6">
-              <datepicker
-                v-model="containDate"
-                :locale="'th'"
-                autoApply
-                :enableTimePicker="false"
-                week-start="0"
-              >
-                <template #year="{ year }">
-                  {{ year + 543 }}
-                </template>
-                <template #year-overlay-value="{ value }">
-                  {{ parseInt(value + 543) }}
-                </template>
-                <template #trigger>
-                  <q-input
-                    ref="containDateRef"
-                    class="full-width inputgreen cursor-pointer"
-                    hide-bottom-space
-                    dense
-                    outlined
-                    :model-value="containDate !== null
+        <q-page-container>
+          <q-page class="q-pa-md">
+            <div class="row q-col-gutter-sm">
+              <div class="col-6">
+                <datepicker
+                  v-model="containDate"
+                  :locale="'th'"
+                  autoApply
+                  :enableTimePicker="false"
+                  week-start="0"
+                >
+                  <template #year="{ year }">
+                    {{ year + 543 }}
+                  </template>
+                  <template #year-overlay-value="{ value }">
+                    {{ parseInt(value + 543) }}
+                  </template>
+                  <template #trigger>
+                    <q-input
+                      ref="containDateRef"
+                      class="full-width inputgreen cursor-pointer"
+                      hide-bottom-space
+                      dense
+                      outlined
+                      :model-value="containDate !== null
             ? date2Thai(containDate as Date)
             : null
           "
-                    :rules="[
-                      (val) => !!val || 'กรุณาเลือก วัน/เดือน/ปี ที่บรรจุ',
-                    ]"
-                    label="วัน/เดือน/ปี ที่บรรจุ"
-                  >
-                    <template v-slot:prepend>
-                      <q-icon
-                        name="event"
-                        class="cursor-pointer"
-                        :style="'color: var(--q-primary)'"
-                      >
-                      </q-icon>
-                    </template>
-                  </q-input>
-                </template>
-              </datepicker>
-            </div>
-            <div class="col-6">
-              <datepicker
-                v-model="workDate"
-                :locale="'th'"
-                autoApply
-                :enableTimePicker="false"
-                week-start="0"
-              >
-                <template #year="{ year }">
-                  {{ year + 543 }}
-                </template>
-                <template #year-overlay-value="{ value }">
-                  {{ parseInt(value + 543) }}
-                </template>
-                <template #trigger>
-                  <q-input
-                    ref="workDateRef"
-                    class="full-width inputgreen cursor-pointer"
-                    hide-bottom-space
-                    dense
-                    outlined
-                    :model-value="workDate !== null
+                      :rules="[
+                        (val) => !!val || 'กรุณาเลือก วัน/เดือน/ปี ที่บรรจุ',
+                      ]"
+                      label="วัน/เดือน/ปี ที่บรรจุ"
+                    >
+                      <template v-slot:prepend>
+                        <q-icon
+                          name="event"
+                          class="cursor-pointer"
+                          :style="'color: var(--q-primary)'"
+                        >
+                        </q-icon>
+                      </template>
+                    </q-input>
+                  </template>
+                </datepicker>
+              </div>
+              <div class="col-6">
+                <datepicker
+                  v-model="workDate"
+                  :locale="'th'"
+                  autoApply
+                  :enableTimePicker="false"
+                  week-start="0"
+                >
+                  <template #year="{ year }">
+                    {{ year + 543 }}
+                  </template>
+                  <template #year-overlay-value="{ value }">
+                    {{ parseInt(value + 543) }}
+                  </template>
+                  <template #trigger>
+                    <q-input
+                      ref="workDateRef"
+                      class="full-width inputgreen cursor-pointer"
+                      hide-bottom-space
+                      dense
+                      outlined
+                      :model-value="workDate !== null
             ? date2Thai(workDate as Date)
             : null
           "
-                    :rules="[(val) => !!val || 'กรุณาเลือกเริ่มปฎิบัติราชการ']"
-                    label="วัน/เดือน/ปี เริ่มปฎิบัติราชการ"
-                  >
-                    <template v-slot:prepend>
-                      <q-icon
-                        name="event"
-                        class="cursor-pointer"
-                        :style="'color: var(--q-primary)'"
-                      >
-                      </q-icon>
-                    </template>
-                  </q-input>
-                </template>
-              </datepicker>
+                      :rules="[
+                        (val) => !!val || 'กรุณาเลือกเริ่มปฎิบัติราชการ',
+                      ]"
+                      label="วัน/เดือน/ปี เริ่มปฎิบัติราชการ"
+                    >
+                      <template v-slot:prepend>
+                        <q-icon
+                          name="event"
+                          class="cursor-pointer"
+                          :style="'color: var(--q-primary)'"
+                        >
+                        </q-icon>
+                      </template>
+                    </q-input>
+                  </template>
+                </datepicker>
+              </div>
+              <div
+                class="col-12"
+                v-if="containDate && workDate ? dateToISO(containDate as Date) !== dateToISO(workDate as Date) : false"
+              >
+                <q-input
+                  ref="reasonSameDateRef"
+                  class="full-width inputgreen cursor-pointer"
+                  label="เหตุผลกรณีไม่ตรงกัน"
+                  type="textarea"
+                  outlined
+                  dense
+                  :rules="[(val) => !!val || 'กรุณากรอก เหตุผลกรณีไม่ตรงกัน']"
+                  v-model="reasonSameDate"
+                />
+              </div>
             </div>
-            <div
-              class="col-12"
-              v-if="containDate && workDate ? dateToISO(containDate as Date) !== dateToISO(workDate as Date) : false"
-            >
-              <q-input
-                ref="reasonSameDateRef"
-                class="full-width inputgreen cursor-pointer"
-                label="เหตุผลกรณีไม่ตรงกัน"
-                type="textarea"
-                outlined
-                dense
-                :rules="[(val) => !!val || 'กรุณากรอก เหตุผลกรณีไม่ตรงกัน']"
-                v-model="reasonSameDate"
-              />
-            </div>
-          </div>
-        </q-card-section>
-
+          </q-page>
+        </q-page-container>
         <q-separator />
-        <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-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>
       </form>
-    </q-card>
+    </q-layout>
   </q-dialog>
 
   <!-- dialog History -->
   <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 = !modalHistory)"
-        />
-      </q-card-section>
-
-      <q-separator />
-
-      <q-card-section class="q-pa-sm">
-        <div class="row q-pb-sm q-gutter-x-sm">
-          <q-space />
-          <q-input
-            standout
-            dense
-            v-model="filterKeyword"
-            ref="filterRef"
-            outlined
-            placeholder="ค้นหา"
-            class="col-2"
-            debounce="300"
-          >
-            <template v-slot:append>
-              <q-icon
-                v-if="filterKeyword == ''"
-                name="search"
-                @click.stop.prevent="filterKeyword = ''"
-                class="cursor-pointer"
-              />
-              <q-icon
-                v-if="filterKeyword"
-                name="cancel"
-                @click.stop.prevent="filterKeyword = ''"
-                class="cursor-pointer"
-              />
-            </template>
-          </q-input>
-          <q-select
-            v-model="visibleColumnsHistory"
-            multiple
-            outlined
-            dense
-            options-dense
-            :display-value="$q.lang.table.columns"
-            emit-value
-            map-options
-            :options="columnsHistory"
-            option-value="name"
-            options-cover
-            style="min-width: 150px"
+    <q-layout
+      view="lHh lpr lFf"
+      container
+      style="height: 80vh; min-width: 80%"
+      class="bg-white"
+    >
+      <q-header>
+        <q-toolbar>
+          <DialogHeader
+            tittle="ประวัติแก้ไขข้อมูลราชการ"
+            :close="() => (modalHistory = !modalHistory)"
           />
-        </div>
-        <d-table
-          ref="table"
-          :columns="columnsHistory"
-          :rows="rowsHistory"
-          flat
-          bordered
-          :paging="true"
-          dense
-          class="custom-header-table"
-          :filter="filterKeyword"
-          :visible-columns="visibleColumnsHistory"
-        >
-          <template v-slot:header="props">
-            <q-tr :props="props">
-              <q-th
-                v-for="col in props.cols"
-                :key="col.name"
-                :props="props"
-                style="color: #000000; font-weight: 500"
-              >
-                <span class="text-weight-medium">{{ col.label }}</span>
-              </q-th>
-              <q-th auto-width></q-th>
-            </q-tr>
-          </template>
-          <template v-slot:body="props">
-            <q-tr :props="props" class="cursor-pointer">
-              <q-td v-for="col in props.cols" :key="col.name" :props="props">
-                <div
-                  v-if="
-                    col.name == 'dateStart' ||
-                    col.name == 'dateAppoint' ||
-                    col.name == 'createdAt' ||
-                    col.name == 'retireDate'
-                  "
-                  class="table_ellipsis"
+        </q-toolbar>
+        <q-separator color="grey-4" />
+      </q-header>
+
+      <q-page-container>
+        <q-page class="q-pa-md">
+          <div class="row q-pb-sm q-gutter-x-sm">
+            <q-space />
+            <q-input
+              standout
+              dense
+              v-model="filterKeyword"
+              ref="filterRef"
+              outlined
+              placeholder="ค้นหา"
+              class="col-2"
+              debounce="300"
+            >
+              <template v-slot:append>
+                <q-icon
+                  v-if="filterKeyword == ''"
+                  name="search"
+                  @click.stop.prevent="filterKeyword = ''"
+                  class="cursor-pointer"
+                />
+                <q-icon
+                  v-if="filterKeyword"
+                  name="cancel"
+                  @click.stop.prevent="filterKeyword = ''"
+                  class="cursor-pointer"
+                />
+              </template>
+            </q-input>
+            <q-select
+              v-model="visibleColumnsHistory"
+              multiple
+              outlined
+              dense
+              options-dense
+              :display-value="$q.lang.table.columns"
+              emit-value
+              map-options
+              :options="columnsHistory"
+              option-value="name"
+              options-cover
+              style="min-width: 150px"
+            />
+          </div>
+          <d-table
+            ref="table"
+            :columns="columnsHistory"
+            :rows="rowsHistory"
+            flat
+            bordered
+            :paging="true"
+            dense
+            class="custom-header-table"
+            :filter="filterKeyword"
+            :visible-columns="visibleColumnsHistory"
+          >
+            <template v-slot:header="props">
+              <q-tr :props="props">
+                <q-th
+                  v-for="col in props.cols"
+                  :key="col.name"
+                  :props="props"
+                  style="color: #000000; font-weight: 500"
                 >
-                  {{ date2Thai(col.value) }}
-                </div>
-                <div v-else>
-                  {{ col.value ? col.value : "-" }}
-                </div>
-              </q-td>
-            </q-tr>
-          </template>
-        </d-table>
-      </q-card-section>
-    </q-card>
+                  <span class="text-weight-medium">{{ col.label }}</span>
+                </q-th>
+                <q-th auto-width></q-th>
+              </q-tr>
+            </template>
+            <template v-slot:body="props">
+              <q-tr :props="props" class="cursor-pointer">
+                <q-td v-for="col in props.cols" :key="col.name" :props="props">
+                  <div>
+                    {{ col.value ? col.value : "-" }}
+                  </div>
+                </q-td>
+              </q-tr>
+            </template>
+          </d-table>
+        </q-page>
+      </q-page-container>
+    </q-layout>
   </q-dialog>
 </template>
 
diff --git a/src/modules/04_registryNew/components/detail/GovernmentInformation/02_Discipline.vue b/src/modules/04_registryNew/components/detail/GovernmentInformation/02_Discipline.vue
index cc2a6e99e..cc9a3603f 100644
--- a/src/modules/04_registryNew/components/detail/GovernmentInformation/02_Discipline.vue
+++ b/src/modules/04_registryNew/components/detail/GovernmentInformation/02_Discipline.vue
@@ -58,6 +58,10 @@ const formFilter = reactive<FormFilter>({
 
 const currentPage = ref<number>(1);
 const maxPage = ref<number>(1);
+const pagination = ref({
+  page: 1,
+  rowsPerPage: 10,
+});
 
 const visibleColumns = ref<String[]>([
   "level",
@@ -408,18 +412,20 @@ onMounted(async () => {
   </div>
 
   <d-table
+    :card-container-class="mode === 'card' ? 'q-col-gutter-md' : ''"
+    :grid="mode === 'card'"
     ref="table"
+    row-key="id"
     flat
     bordered
     dense
-    :card-container-class="mode === 'card' ? 'q-col-gutter-md' : ''"
     :columns="columns"
     :rows="rows"
-    :grid="mode === 'card'"
     :paging="true"
+    :filter="filterKeyword"
+    v-model:pagination="pagination"
     :rows-per-page-options="[10, 25, 50, 100]"
     :visible-columns="visibleColumns"
-    :filter="filterKeyword"
   >
     >
     <template v-slot:header="props">
@@ -562,191 +568,187 @@ onMounted(async () => {
         </q-card>
       </div>
     </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>
 
   <!-- dialog add edit -->
   <q-dialog v-model="modal" persistent>
-    <q-card style="min-width: 600px">
+    <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">
-          <DialogHeader tittle="วินัย" :close="closeDialog" />
-        </q-card-section>
+        <q-header>
+          <q-toolbar>
+            <DialogHeader
+              :tittle="edit ? 'แก้ไขข้อมูลวินัย' : 'เพิ่มข้อมูลวินัย'"
+              :close="closeDialog"
+            />
+          </q-toolbar>
+          <q-separator color="grey-4" />
+        </q-header>
 
-        <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">
-              <datepicker
-                menu-class-name="modalfix"
-                v-model="disciplineData.date"
-                :locale="'th'"
-                autoApply
-                :enableTimePicker="false"
-                week-start="0"
-              >
-                <template #year="{ year }">{{ year + 543 }}</template>
-                <template #year-overlay-value="{ value }">{{
-                  parseInt(value + 543)
-                }}</template>
-                <template #trigger>
-                  <q-input
-                    ref="dateRef"
-                    class="full-width inputgreen cursor-pointer"
-                    outlined
-                    dense
-                    :model-value="date2Thai(disciplineData.date)"
-                    :rules="[(val:string) => !!val || `${'กรุณาเลือก วัน/เดือน/ปี'}`]"
-                    hide-bottom-space
-                    :label="`${'วัน/เดือน/ปี'}`"
-                  >
-                    <template v-slot:prepend>
-                      <q-icon
-                        name="event"
-                        class="cursor-pointer"
-                        :style="
-                          edit
-                            ? 'color: var(--q-primary)'
-                            : 'color: var(--q-grey)'
-                        "
-                      >
-                      </q-icon>
-                    </template>
-                  </q-input>
-                </template>
-              </datepicker>
-            </div>
-            <div class="col-xs-6 col-sm-6 col-md-6">
-              <q-input
-                ref="detailRef"
-                class="full-width inputgreen cursor-pointer"
-                outlined
-                dense
-                lazy-rules
-                v-model="disciplineData.detail"
-                :rules="[(val:string) => !!val || `${'กรุณากรอกรายละเอียด'}`]"
-                hide-bottom-space
-                :label="`${'รายละเอียด'}`"
-              />
-            </div>
-            <div class="col-xs-6 col-sm-6 col-md-6">
-              <selector
-                class="full-width inputgreen cursor-pointer"
-                outlined
-                dense
-                lazy-rules
-                v-model="disciplineData.level"
-                :label="`${'ระดับการลงโทษทางวินัย'}`"
-                emit-value
-                map-options
-                option-label="name"
-                :options="Ops.levelOptions"
-                option-value="id"
-                use-input
-                clearable
-                input-debounce="0"
-                @filter="(inputValue:string,
+        <q-page-container>
+          <q-page class="q-pa-md">
+            <div class="row col-12 q-col-gutter-x-xs q-col-gutter-y-xs">
+              <div class="col-xs-6 col-sm-6 col-md-6">
+                <datepicker
+                  menu-class-name="modalfix"
+                  v-model="disciplineData.date"
+                  :locale="'th'"
+                  autoApply
+                  :enableTimePicker="false"
+                  week-start="0"
+                >
+                  <template #year="{ year }">{{ year + 543 }}</template>
+                  <template #year-overlay-value="{ value }">{{
+                    parseInt(value + 543)
+                  }}</template>
+                  <template #trigger>
+                    <q-input
+                      ref="dateRef"
+                      class="full-width inputgreen cursor-pointer"
+                      outlined
+                      dense
+                      :model-value="date2Thai(disciplineData.date)"
+                      :rules="[(val:string) => !!val || `${'กรุณาเลือก วัน/เดือน/ปี'}`]"
+                      hide-bottom-space
+                      :label="`${'วัน/เดือน/ปี'}`"
+                    >
+                      <template v-slot:prepend>
+                        <q-icon
+                          name="event"
+                          class="cursor-pointer"
+                          color="primary"
+                        >
+                        </q-icon>
+                      </template>
+                    </q-input>
+                  </template>
+                </datepicker>
+              </div>
+              <div class="col-xs-6 col-sm-6 col-md-6">
+                <q-input
+                  ref="detailRef"
+                  class="full-width inputgreen cursor-pointer"
+                  outlined
+                  dense
+                  lazy-rules
+                  v-model="disciplineData.detail"
+                  :rules="[(val:string) => !!val || `${'กรุณากรอกรายละเอียด'}`]"
+                  hide-bottom-space
+                  :label="`${'รายละเอียด'}`"
+                />
+              </div>
+              <div class="col-xs-6 col-sm-6 col-md-6">
+                <selector
+                  class="full-width inputgreen cursor-pointer"
+                  outlined
+                  dense
+                  lazy-rules
+                  v-model="disciplineData.level"
+                  :label="`${'ระดับการลงโทษทางวินัย'}`"
+                  emit-value
+                  map-options
+                  option-label="name"
+                  :options="Ops.levelOptions"
+                  option-value="id"
+                  use-input
+                  clearable
+                  hide-bottom-space
+                  input-debounce="0"
+                  @filter="(inputValue:string,
                       doneFn:Function) => filterSelector(inputValue, doneFn,'levelOptions'
                       ) "
-              />
+                />
+              </div>
+              <div class="col-xs-6 col-sm-6 col-md-6">
+                <q-input
+                  class="full-width inputgreen cursor-pointer"
+                  outlined
+                  dense
+                  v-model="disciplineData.unStigma"
+                  hide-bottom-space
+                  :label="`${'ล้างมลทิน'}`"
+                />
+              </div>
+              <div class="col-xs-6 col-sm-6 col-md-6">
+                <q-input
+                  ref="refCommandNoRef"
+                  class="full-width inputgreen cursor-pointer"
+                  outlined
+                  dense
+                  lazy-rules
+                  v-model="disciplineData.refCommandNo"
+                  hide-bottom-space
+                  :label="`${'เลขที่คำสั่ง'}`"
+                  :rules="[(val:string) => !!val || `${'กรุณากรอกเลขที่คำสั่ง'}`]"
+                >
+                  <template v-slot:append>
+                    <q-icon name="mdi-file" class="cursor-pointer" />
+                  </template>
+                </q-input>
+              </div>
+              <div class="col-xs-6 col-sm-6 col-md-6">
+                <datepicker
+                  menu-class-name="modalfix"
+                  v-model="disciplineData.refCommandDate"
+                  :locale="'th'"
+                  autoApply
+                  :enableTimePicker="false"
+                  week-start="0"
+                >
+                  <template #year="{ year }">{{ year + 543 }}</template>
+                  <template #year-overlay-value="{ value }">{{
+                    parseInt(value + 543)
+                  }}</template>
+                  <template #trigger>
+                    <q-input
+                      ref="dateRef"
+                      class="full-width inputgreen cursor-pointer"
+                      outlined
+                      clearable
+                      dense
+                      :model-value="date2Thai(disciplineData.refCommandDate)"
+                      hide-bottom-space
+                      :label="`${'เอกสารอ้างอิง (ลงวันที่)'}`"
+                      @clear="disciplineData.refCommandDate = null"
+                    >
+                      <template v-slot:prepend>
+                        <q-icon
+                          name="event"
+                          class="cursor-pointer"
+                          color="primary"
+                        >
+                        </q-icon>
+                      </template>
+                    </q-input>
+                  </template>
+                </datepicker>
+              </div>
             </div>
-            <div class="col-xs-6 col-sm-6 col-md-6">
-              <q-input
-                class="full-width inputgreen cursor-pointer"
-                outlined
-                dense
-                v-model="disciplineData.unStigma"
-                hide-bottom-space
-                :label="`${'ล้างมลทิน'}`"
-              />
-            </div>
-            <div class="col-xs-6 col-sm-6 col-md-6">
-              <q-input
-                ref="refCommandNoRef"
-                class="full-width inputgreen cursor-pointer"
-                outlined
-                dense
-                lazy-rules
-                v-model="disciplineData.refCommandNo"
-                hide-bottom-space
-                :label="`${'เลขที่คำสั่ง'}`"
-                :rules="[(val:string) => !!val || `${'กรุณากรอกเลขที่คำสั่ง'}`]"
-              >
-                <template v-slot:append>
-                  <q-icon name="mdi-file" class="cursor-pointer" />
-                </template>
-              </q-input>
-            </div>
-            <div class="col-xs-6 col-sm-6 col-md-6">
-              <datepicker
-                menu-class-name="modalfix"
-                v-model="disciplineData.refCommandDate"
-                :locale="'th'"
-                autoApply
-                :enableTimePicker="false"
-                week-start="0"
-              >
-                <template #year="{ year }">{{ year + 543 }}</template>
-                <template #year-overlay-value="{ value }">{{
-                  parseInt(value + 543)
-                }}</template>
-                <template #trigger>
-                  <q-input
-                    ref="dateRef"
-                    class="full-width inputgreen cursor-pointer"
-                    outlined
-                    clearable
-                    dense
-                    :model-value="date2Thai(disciplineData.refCommandDate)"
-                    hide-bottom-space
-                    :label="`${'เอกสารอ้างอิง (ลงวันที่)'}`"
-                    @clear="disciplineData.refCommandDate = null"
-                  >
-                    <template v-slot:prepend>
-                      <q-icon
-                        name="event"
-                        class="cursor-pointer"
-                        :style="
-                          edit
-                            ? 'color: var(--q-primary)'
-                            : 'color: var(--q-grey)'
-                        "
-                      >
-                      </q-icon>
-                    </template>
-                  </q-input>
-                </template>
-              </datepicker>
-            </div>
-          </div>
-        </q-card-section>
-
+          </q-page>
+        </q-page-container>
         <q-separator />
-        <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-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>
 
   <DialogHistory v-model:modal="modalHistory" v-model:id="id" />
diff --git a/src/modules/04_registryNew/components/detail/GovernmentInformation/02_DisciplineHistory.vue b/src/modules/04_registryNew/components/detail/GovernmentInformation/02_DisciplineHistory.vue
index 5ba868aa4..fa760dacd 100644
--- a/src/modules/04_registryNew/components/detail/GovernmentInformation/02_DisciplineHistory.vue
+++ b/src/modules/04_registryNew/components/detail/GovernmentInformation/02_DisciplineHistory.vue
@@ -35,7 +35,10 @@ const formFilter = reactive<FormFilter>({
   isShowRetire: false,
   isProbation: false,
 });
-
+const historyPagination = ref({
+  page: 1,
+  rowsPerPage: 10,
+});
 const visibleColumns = ref<String[]>([
   "level",
   "detail",
@@ -181,107 +184,105 @@ watch(modal, (status) => {
 
 <template>
   <q-dialog v-model="modal" persistent>
-    <q-card style="min-width: 80%">
-      <q-card-section class="flex justify-between" style="padding: 0">
-        <DialogHeader
-          tittle="ประวัติแก้ไขวินัย"
-          :close="() => (modal = 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="filterKeyword"
-            ref="filterRef"
-            outlined
-            placeholder="ค้นหา"
-            debounce="300"
-          >
-            <template v-slot:append>
-              <q-icon
-                v-if="filterKeyword == ''"
-                name="search"
-                @click.stop.prevent="filterKeyword = ''"
-                class="cursor-pointer"
-              />
-              <q-icon
-                v-if="filterKeyword"
-                name="cancel"
-                @click.stop.prevent="filterKeyword = ''"
-                class="cursor-pointer"
-              />
-            </template>
-          </q-input>
-          <q-select
-            v-model="visibleColumns"
-            multiple
-            outlined
-            dense
-            options-dense
-            :display-value="$q.lang.table.columns"
-            emit-value
-            map-options
-            :options="columns"
-            option-value="name"
-            options-cover
-            style="min-width: 150px"
+    <q-layout
+      view="lHh lpr lFf"
+      container
+      style="height: 80vh; min-width: 80%"
+      class="bg-white"
+    >
+      <q-header>
+        <q-toolbar>
+          <DialogHeader
+            tittle="ประวัติแก้ไขวินัย"
+            :close="() => (modal = false)"
           />
-        </div>
-        <d-table
-          ref="table"
-          flat
-          bordered
-          dense
-          :columns="columns"
-          :rows="rows"
-          :paging="true"
-          :rows-per-page-options="[10, 25, 50, 100]"
-          :visible-columns="visibleColumns"
-          :filter="filterKeyword"
-        >
-          >
-          <template v-slot:header="props">
-            <q-tr :props="props">
-              <q-th v-for="col in props.cols" :key="col.name" :props="props">
-                <span class="text-weight-medium">{{ col.label }}</span>
-              </q-th>
-            </q-tr>
-          </template>
-          <template v-slot:body="props">
-            <q-tr :props="props" class="cursor-pointer">
-              <q-td v-for="col in props.cols" :key="col.id">
-                <div v-if="col.name === 'no'">
-                  {{
-                    (formFilter.page - 1) * formFilter.pageSize +
-                    props.rowIndex +
-                    1
-                  }}
-                </div>
-                <div v-else>
-                  {{ col.value ? col.value : "-" }}
-                </div>
-              </q-td>
-            </q-tr>
-          </template>
+        </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="filterKeyword"
+              ref="filterRef"
+              outlined
+              placeholder="ค้นหา"
+              debounce="300"
+            >
+              <template v-slot:append>
+                <q-icon
+                  v-if="filterKeyword == ''"
+                  name="search"
+                  @click.stop.prevent="filterKeyword = ''"
+                  class="cursor-pointer"
+                />
+                <q-icon
+                  v-if="filterKeyword"
+                  name="cancel"
+                  @click.stop.prevent="filterKeyword = ''"
+                  class="cursor-pointer"
+                />
+              </template>
+            </q-input>
+            <q-select
+              v-model="visibleColumns"
+              multiple
+              outlined
+              dense
+              options-dense
+              :display-value="$q.lang.table.columns"
+              emit-value
+              map-options
+              :options="columns"
+              option-value="name"
+              options-cover
+              style="min-width: 150px"
+            />
+          </div>
+          <d-table
+            ref="table"
+            flat
+            bordered
+            dense
+            :columns="columns"
+            :rows="rows"
+            :paging="true"
+            :rows-per-page-options="[10, 25, 50, 100]"
+            :visible-columns="visibleColumns"
+            v-model:pagination="historyPagination"
+            :filter="filterKeyword"
+          >
+            >
+            <template v-slot:header="props">
+              <q-tr :props="props">
+                <q-th v-for="col in props.cols" :key="col.name" :props="props">
+                  <span class="text-weight-medium">{{ col.label }}</span>
+                </q-th>
+              </q-tr>
+            </template>
+            <template v-slot:body="props">
+              <q-tr :props="props" class="cursor-pointer">
+                <q-td v-for="col in props.cols" :key="col.id">
+                  <div v-if="col.name === 'no'">
+                    {{
+                      (formFilter.page - 1) * formFilter.pageSize +
+                      props.rowIndex +
+                      1
+                    }}
+                  </div>
+                  <div v-else>
+                    {{ col.value ? col.value : "-" }}
+                  </div>
+                </q-td>
+              </q-tr>
+            </template>
+          </d-table>
+        </q-page>
+      </q-page-container>
+    </q-layout>
   </q-dialog>
 </template>
diff --git a/src/modules/04_registryNew/components/detail/GovernmentInformation/03_Leave.vue b/src/modules/04_registryNew/components/detail/GovernmentInformation/03_Leave.vue
index f372923bd..ce17ca0af 100644
--- a/src/modules/04_registryNew/components/detail/GovernmentInformation/03_Leave.vue
+++ b/src/modules/04_registryNew/components/detail/GovernmentInformation/03_Leave.vue
@@ -37,6 +37,10 @@ const {
   dateToISO,
 } = mixin;
 
+const pagination = ref({
+  page: 1,
+  rowsPerPage: 10,
+});
 const mode = ref<string>("table");
 const filterKeyword = ref<string>("");
 const currentPage = ref<number>(1);
@@ -203,7 +207,6 @@ function openDialogAdd() {
   http
     .get(config.API.profileNewLeaveType())
     .then((res) => {
-      console.log(res.data.result);
       const dataOp = res.data.result.map((item: any) => ({
         id: item.id,
         name: item.name,
@@ -350,11 +353,13 @@ function validateForm() {
     }
   }
   if (hasError.every((result) => result === true)) {
-    if (edit.value == false) {
-      saveData();
-    } else {
-      editData();
-    }
+    dialogConfirm($q, async () => {
+      if (edit.value == false) {
+        saveData();
+      } else {
+        editData();
+      }
+    });
   }
 }
 
@@ -533,6 +538,7 @@ onMounted(() => {
     :rows="rows"
     :grid="mode === 'card'"
     :paging="true"
+    v-model:pagination="pagination"
     :rows-per-page-options="[10, 25, 50, 100]"
     :visible-columns="visibleColumns"
     :filter="filterKeyword"
@@ -660,166 +666,165 @@ onMounted(() => {
         </q-card>
       </div>
     </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>
 
   <!-- dialog add edit -->
   <q-dialog v-model="modal" persistent>
-    <q-card style="min-width: 600px">
+    <q-layout
+      view="lHh lpr lFf"
+      container
+      style="height: 80vh"
+      class="bg-white"
+    >
       <form @submit.prevent="validateForm">
-        <q-card-section class="flex justify-between" style="padding: 0">
-          <DialogHeader tittle="การลา" :close="closeDialog" />
-        </q-card-section>
+        <q-header>
+          <q-toolbar>
+            <DialogHeader
+              :tittle="edit ? 'แก้ไขข้อมูลการลา' : 'เพิ่มข้อมูลการลา'"
+              :close="closeDialog"
+            />
+          </q-toolbar>
+          <q-separator color="grey-4" />
+        </q-header>
 
-        <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-select
-                ref="typeLeaveRef"
-                class="full-width inputgreen cursor-pointer"
-                outlined
-                dense
-                lazy-rules
-                v-model="typeLeave"
-                :rules="[(val:string) => !!val || `${'กรุณาเลือกประเภทการลา'}`]"
-                hide-bottom-space
-                :label="`${'ประเภทการลา'}`"
-                @update:modelValue="clickEditRowType"
-                map-options
-                option-label="name"
-                :options="typeLeaveOption"
-                option-value="id"
-                use-input
-                input-debounce="0"
-                @filter="(inputValue:string,
+        <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-select
+                  ref="typeLeaveRef"
+                  class="full-width inputgreen cursor-pointer"
+                  outlined
+                  dense
+                  lazy-rules
+                  v-model="typeLeave"
+                  :rules="[(val:string) => !!val || `${'กรุณาเลือกประเภทการลา'}`]"
+                  hide-bottom-space
+                  :label="`${'ประเภทการลา'}`"
+                  @update:modelValue="clickEditRowType"
+                  map-options
+                  option-label="name"
+                  :options="typeLeaveOption"
+                  option-value="id"
+                  use-input
+                  input-debounce="0"
+                  @filter="(inputValue:string,
                       doneFn:Function) => filterSelector(inputValue, doneFn,'typeLeaveOption'
                       ) "
-              />
-            </div>
-            <div class="col-xs-6 col-sm-6 col-md-6">
-              <datepicker
-                :readonly="!typeLeave"
-                menu-class-name="modalfix"
-                v-model="dateRange"
-                :locale="'th'"
-                autoApply
-                :enableTimePicker="false"
-                week-start="0"
-                range
-              >
-                <template #year="{ year }">{{ year + 543 }}</template>
-                <template #year-overlay-value="{ value }">{{
-                  parseInt(value + 543)
-                }}</template>
-                <template #trigger>
-                  <q-input
-                    :readonly="!typeLeave"
-                    class="full-width inputgreen cursor-pointer"
-                    outlined
-                    dense
-                    ref="dateRangeRef"
-                    :model-value="dateThaiRange(dateRange)"
-                    :rules="[(val:string) => !!val || `${'กรุณาเลือกวัน เดือน ปีที่ลา'}`]"
-                    hide-bottom-space
-                    :label="`${'วัน เดือน ปีที่ลา'}`"
-                  >
-                    <template v-slot:prepend>
-                      <q-icon
-                        name="event"
-                        class="cursor-pointer"
-                        :style="
-                          edit
-                            ? 'color: var(--q-primary)'
-                            : 'color: var(--q-grey)'
-                        "
-                      >
-                      </q-icon>
-                    </template>
-                  </q-input>
-                </template>
-              </datepicker>
-            </div>
-            <div class="col-xs-6 col-sm-6 col-md-6">
-              <q-input
-                ref="numLeaveRef"
-                class="full-width inputgreen cursor-pointer"
-                outlined
-                dense
-                lazy-rules
-                v-model="numLeave"
-                type="number"
-                :rules="[(val:string) => !!val || `${'กรุณากรอกจำนวนวันที่ลา'}`]"
-                hide-bottom-space
-                :label="`${'จำนวนวันที่ลา'}`"
-              />
-            </div>
-            <div class="col-xs-6 col-sm-6 col-md-6">
-              <q-select
-                ref="statLeaveRef"
-                class="full-width inputgreen cursor-pointer"
-                outlined
-                dense
-                lazy-rules
-                v-model="statLeave"
-                :rules="[(val:string) => !!val || `${'กรุณาเลือกสถานะการลา'}`]"
-                hide-bottom-space
-                :label="`${'สถานะการลา'}`"
-                emit-value
-                map-options
-                option-label="name"
-                :options="statLeaveOption"
-                option-value="id"
-                use-input
-                input-debounce="0"
-                @filter="(inputValue:string,
+                />
+              </div>
+              <div class="col-xs-6 col-sm-6 col-md-6">
+                <datepicker
+                  :readonly="!typeLeave"
+                  menu-class-name="modalfix"
+                  v-model="dateRange"
+                  :locale="'th'"
+                  autoApply
+                  :enableTimePicker="false"
+                  week-start="0"
+                  range
+                >
+                  <template #year="{ year }">{{ year + 543 }}</template>
+                  <template #year-overlay-value="{ value }">{{
+                    parseInt(value + 543)
+                  }}</template>
+                  <template #trigger>
+                    <q-input
+                      :readonly="!typeLeave"
+                      class="full-width inputgreen cursor-pointer"
+                      outlined
+                      dense
+                      ref="dateRangeRef"
+                      :model-value="dateThaiRange(dateRange)"
+                      :rules="[(val:string) => !!val || `${'กรุณาเลือกวัน เดือน ปีที่ลา'}`]"
+                      hide-bottom-space
+                      :label="`${'วัน เดือน ปีที่ลา'}`"
+                    >
+                      <template v-slot:prepend>
+                        <q-icon
+                          name="event"
+                          class="cursor-pointer"
+                          color="primary"
+                        >
+                        </q-icon>
+                      </template>
+                    </q-input>
+                  </template>
+                </datepicker>
+              </div>
+              <div class="col-xs-6 col-sm-6 col-md-6">
+                <q-input
+                  ref="numLeaveRef"
+                  class="full-width inputgreen cursor-pointer"
+                  outlined
+                  dense
+                  lazy-rules
+                  v-model="numLeave"
+                  type="number"
+                  :rules="[(val:string) => !!val || `${'กรุณากรอกจำนวนวันที่ลา'}`]"
+                  hide-bottom-space
+                  :label="`${'จำนวนวันที่ลา'}`"
+                />
+              </div>
+              <div class="col-xs-6 col-sm-6 col-md-6">
+                <q-select
+                  ref="statLeaveRef"
+                  class="full-width inputgreen cursor-pointer"
+                  outlined
+                  dense
+                  lazy-rules
+                  v-model="statLeave"
+                  :rules="[(val:string) => !!val || `${'กรุณาเลือกสถานะการลา'}`]"
+                  hide-bottom-space
+                  :label="`${'สถานะการลา'}`"
+                  emit-value
+                  map-options
+                  option-label="name"
+                  :options="statLeaveOption"
+                  option-value="id"
+                  use-input
+                  input-debounce="0"
+                  @filter="(inputValue:string,
                       doneFn:Function) => filterSelector(inputValue, doneFn,'statLeaveOption'
                       ) "
-              />
+                />
+              </div>
+              <div class="col-xs-12 col-sm-12 col-md-12">
+                <q-input
+                  ref="reasonRef"
+                  class="full-width inputgreen cursor-pointer"
+                  outlined
+                  dense
+                  lazy-rules
+                  v-model="reason"
+                  type="textarea"
+                  :rules="[(val:string) => !!val || `${'กรุณากรอกเหตุผล'}`]"
+                  hide-bottom-space
+                  :label="`${'เหตุผล'}`"
+                />
+              </div>
             </div>
-            <div class="col-xs-12 col-sm-12 col-md-12">
-              <q-input
-                ref="reasonRef"
-                class="full-width inputgreen cursor-pointer"
-                outlined
-                dense
-                lazy-rules
-                v-model="reason"
-                type="textarea"
-                :rules="[(val:string) => !!val || `${'กรุณากรอกเหตุผล'}`]"
-                hide-bottom-space
-                :label="`${'เหตุผล'}`"
-              />
-            </div>
-          </div>
-        </q-card-section>
-
+          </q-page>
+        </q-page-container>
         <q-separator />
-        <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-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>
       </form>
-    </q-card>
+    </q-layout>
   </q-dialog>
 
   <DialogHistory v-model:modal="modalHistory" v-model:id="id" />
diff --git a/src/modules/04_registryNew/components/detail/GovernmentInformation/03_LeaveHistory.vue b/src/modules/04_registryNew/components/detail/GovernmentInformation/03_LeaveHistory.vue
index 6d0df53d4..582fdbc03 100644
--- a/src/modules/04_registryNew/components/detail/GovernmentInformation/03_LeaveHistory.vue
+++ b/src/modules/04_registryNew/components/detail/GovernmentInformation/03_LeaveHistory.vue
@@ -19,8 +19,6 @@ const $q = useQuasar();
 const mixin = useCounterMixin();
 const { showLoader, hideLoader, messageError, date2Thai } = mixin;
 
-const currentPage = ref<number>(1);
-const maxPage = ref<number>(1);
 const filterKeyword = ref<string>("");
 const rows = ref<DetailData[]>([]); //select data history
 const formFilter = reactive<FormFilter>({
@@ -36,6 +34,10 @@ const formFilter = reactive<FormFilter>({
   isProbation: false,
 });
 
+const historyPagination = ref({
+  page: 1,
+  rowsPerPage: 10,
+});
 const visibleColumns = ref<String[]>([
   "no",
   "typeLeave",
@@ -212,118 +214,116 @@ watch(modal, (status) => {
 
 <template>
   <q-dialog v-model="modal" persistent>
-    <q-card style="min-width: 80%">
-      <q-card-section class="flex justify-between" style="padding: 0">
-        <DialogHeader
-          tittle="ประวัติแก้ไขการลา"
-          :close="() => (modal = 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="filterKeyword"
-            ref="filterRef"
-            outlined
-            placeholder="ค้นหา"
-            debounce="300"
-          >
-            <template v-slot:append>
-              <q-icon
-                v-if="filterKeyword == ''"
-                name="search"
-                @click.stop.prevent="filterKeyword = ''"
-                class="cursor-pointer"
-              />
-              <q-icon
-                v-if="filterKeyword"
-                name="cancel"
-                @click.stop.prevent="filterKeyword = ''"
-                class="cursor-pointer"
-              />
-            </template>
-          </q-input>
-          <q-select
-            v-model="visibleColumns"
-            multiple
-            outlined
-            dense
-            options-dense
-            :display-value="$q.lang.table.columns"
-            emit-value
-            map-options
-            :options="columns"
-            option-value="name"
-            options-cover
-            style="min-width: 150px"
+    <q-layout
+      view="lHh lpr lFf"
+      container
+      style="height: 80vh; min-width: 80%"
+      class="bg-white"
+    >
+      <q-header>
+        <q-toolbar>
+          <DialogHeader
+            tittle="ประวัติแก้ไขการลา"
+            :close="() => (modal = false)"
           />
-        </div>
-        <d-table
-          ref="table"
-          flat
-          bordered
-          dense
-          :columns="columns"
-          :rows="rows"
-          :paging="true"
-          :rows-per-page-options="[10, 25, 50, 100]"
-          :visible-columns="visibleColumns"
-          :filter="filterKeyword"
-        >
-          >
-          <template v-slot:header="props">
-            <q-tr :props="props">
-              <q-th v-for="col in props.cols" :key="col.name" :props="props">
-                <span class="text-weight-medium">{{ col.label }}</span>
-              </q-th>
-            </q-tr>
-          </template>
-          <template v-slot:body="props">
-            <q-tr :props="props" class="cursor-pointer">
-              <q-td v-for="col in props.cols" :key="col.id">
-                <div v-if="col.name === 'no'">
-                  {{
-                    (formFilter.page - 1) * formFilter.pageSize +
-                    props.rowIndex +
-                    1
-                  }}
-                </div>
-                <div v-else-if="col.name == 'dateLeave'">
-                  {{
-                    dateThaiRange([
-                      props.row.dateStartLeave,
-                      props.row.dateEndLeave,
-                    ])
-                  }}
-                </div>
-                <div v-else-if="col.name == 'status'">
-                  {{ statusLeave(col.value) }}
-                </div>
-                <div v-else>
-                  {{ col.value ? col.value : "-" }}
-                </div>
-              </q-td>
-            </q-tr>
-          </template>
+        </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="filterKeyword"
+              ref="filterRef"
+              outlined
+              placeholder="ค้นหา"
+              debounce="300"
+            >
+              <template v-slot:append>
+                <q-icon
+                  v-if="filterKeyword == ''"
+                  name="search"
+                  @click.stop.prevent="filterKeyword = ''"
+                  class="cursor-pointer"
+                />
+                <q-icon
+                  v-if="filterKeyword"
+                  name="cancel"
+                  @click.stop.prevent="filterKeyword = ''"
+                  class="cursor-pointer"
+                />
+              </template>
+            </q-input>
+            <q-select
+              v-model="visibleColumns"
+              multiple
+              outlined
+              dense
+              options-dense
+              :display-value="$q.lang.table.columns"
+              emit-value
+              map-options
+              :options="columns"
+              option-value="name"
+              options-cover
+              style="min-width: 150px"
+            />
+          </div>
+          <d-table
+            ref="table"
+            flat
+            bordered
+            dense
+            :columns="columns"
+            :rows="rows"
+            :paging="true"
+            v-model:pagination="historyPagination"
+            :rows-per-page-options="[10, 25, 50, 100]"
+            :visible-columns="visibleColumns"
+            :filter="filterKeyword"
+          >
+            >
+            <template v-slot:header="props">
+              <q-tr :props="props">
+                <q-th v-for="col in props.cols" :key="col.name" :props="props">
+                  <span class="text-weight-medium">{{ col.label }}</span>
+                </q-th>
+              </q-tr>
+            </template>
+            <template v-slot:body="props">
+              <q-tr :props="props" class="cursor-pointer">
+                <q-td v-for="col in props.cols" :key="col.id">
+                  <div v-if="col.name === 'no'">
+                    {{
+                      (formFilter.page - 1) * formFilter.pageSize +
+                      props.rowIndex +
+                      1
+                    }}
+                  </div>
+                  <div v-else-if="col.name == 'dateLeave'">
+                    {{
+                      dateThaiRange([
+                        props.row.dateStartLeave,
+                        props.row.dateEndLeave,
+                      ])
+                    }}
+                  </div>
+                  <div v-else-if="col.name == 'status'">
+                    {{ statusLeave(col.value) }}
+                  </div>
+                  <div v-else>
+                    {{ col.value ? col.value : "-" }}
+                  </div>
+                </q-td>
+              </q-tr>
+            </template>
+          </d-table>
+        </q-page>
+      </q-page-container>
+    </q-layout>
   </q-dialog>
 </template>
diff --git a/src/modules/04_registryNew/components/detail/GovernmentInformation/04_PerformSpecialWork.vue b/src/modules/04_registryNew/components/detail/GovernmentInformation/04_PerformSpecialWork.vue
index 93f037156..dc2371b1a 100644
--- a/src/modules/04_registryNew/components/detail/GovernmentInformation/04_PerformSpecialWork.vue
+++ b/src/modules/04_registryNew/components/detail/GovernmentInformation/04_PerformSpecialWork.vue
@@ -52,6 +52,10 @@ const dutyData = reactive<RequestItemsObject>({
   refCommandDate: null,
 });
 
+const pagination = ref({
+  page: 1,
+  rowsPerPage: 10,
+});
 const rows = ref<RequestItemsObject[]>([]);
 const filterKeyword = ref<string>("");
 const mode = ref<string>("table");
@@ -373,6 +377,7 @@ onMounted(async () => {
     :rows-per-page-options="[10, 25, 50, 100]"
     :visible-columns="visibleColumns"
     :filter="filterKeyword"
+    v-model:pagination="pagination"
   >
     >
     <template v-slot:header="props">
@@ -510,226 +515,220 @@ onMounted(async () => {
         </q-card>
       </div>
     </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-dialog v-model="modal" persistent>
-    <q-card style="min-width: 600px">
+    <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">
-          <DialogHeader tittle="ปฏิบัติราชการพิเศษ" :close="closeDialog" />
-        </q-card-section>
+        <q-header>
+          <q-toolbar>
+            <DialogHeader
+              :tittle="
+                edit
+                  ? 'แก้ไขข้อมูลปฏิบัติราชการพิเศษ'
+                  : 'เพิ่มข้อมูลปฏิบัติราชการพิเศษ'
+              "
+              :close="closeDialog"
+            />
+          </q-toolbar>
+          <q-separator color="grey-4" />
+        </q-header>
 
-        <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">
-              <datepicker
-                menu-class-name="modalfix"
-                v-model="dutyData.dateStart"
-                :locale="'th'"
-                autoApply
-                :enableTimePicker="false"
-                week-start="0"
-              >
-                <template #year="{ year }">{{ year + 543 }}</template>
-                <template #year-overlay-value="{ value }">{{
-                  parseInt(value + 543)
-                }}</template>
-                <template #trigger>
-                  <q-input
-                    ref="dateStartRef"
-                    class="full-width inputgreen cursor-pointer"
-                    outlined
-                    dense
-                    :model-value="date2Thai(dutyData.dateStart)"
-                    :rules="[(val) => !!val || `${'กรุณาเลือกวันที่เริ่มต้น'}`]"
-                    hide-bottom-space
-                    :label="`${'วันที่เริ่มต้น'}`"
-                  >
-                    <template v-slot:prepend>
-                      <q-icon
-                        name="event"
-                        class="cursor-pointer"
-                        :style="
-                          edit
-                            ? 'color: var(--q-primary)'
-                            : 'color: var(--q-grey)'
-                        "
-                      >
-                      </q-icon>
-                    </template>
-                  </q-input>
-                </template>
-              </datepicker>
-            </div>
-            <div class="col-xs-6 col-sm-6 col-md-6">
-              <datepicker
-                menu-class-name="modalfix"
-                v-model="dutyData.dateEnd"
-                :locale="'th'"
-                autoApply
-                :enableTimePicker="false"
-                :min-date="dutyData.dateStart"
-                :readonly="!dutyData.dateStart"
-                week-start="0"
-              >
-                <template #year="{ year }">{{ year + 543 }}</template>
-                <template #year-overlay-value="{ value }">{{
-                  parseInt(value + 543)
-                }}</template>
-                <template #trigger>
-                  <q-input
-                    ref="dateEndRef"
-                    :readonly="!dutyData.dateStart"
-                    class="full-width inputgreen cursor-pointer"
-                    dense
-                    outlined
-                    :model-value="date2Thai(dutyData.dateEnd)"
-                    :rules="[(val) => !!val || `${'กรุณาเลือกวันที่สิ้นสุด'}`]"
-                    hide-bottom-space
-                    :label="`${'วันที่สิ้นสุด'}`"
-                  >
-                    <template v-slot:prepend>
-                      <q-icon
-                        name="event"
-                        class="cursor-pointer"
-                        :style="
-                          edit
-                            ? 'color: var(--q-primary)'
-                            : 'color: var(--q-grey)'
-                        "
-                      >
-                      </q-icon>
-                    </template>
-                  </q-input>
-                </template>
-              </datepicker>
-            </div>
-            <div class="col-12">
-              <q-input
-                ref="referenceRef"
-                class="full-width inputgreen cursor-pointer"
-                outlined
-                dense
-                lazy-rules
-                autogrow
-                v-model="dutyData.reference"
-                :rules="[(val) => !!val || `${'กรุณากรอกเอกสารอ้างอิง'}`]"
-                hide-bottom-space
-                :label="`${'เอกสารอ้างอิง'}`"
-              />
-            </div>
-            <div class="col-12">
-              <q-input
-                ref="detailRef"
-                class="full-width inputgreen cursor-pointer"
-                outlined
-                dense
-                lazy-rules
-                autogrow
-                v-model="dutyData.detail"
-                :rules="[(val) => !!val || `${'กรุณากรอกรายละเอียด'}`]"
-                hide-bottom-space
-                :label="`${'รายละเอียด'}`"
-              />
-            </div>
-            <div class="col-xs-6 col-sm-6 col-md-6">
-              <q-input
-                class="full-width inputgreen cursor-pointer"
-                outlined
-                dense
-                v-model="dutyData.refCommandNo"
-                :label="`${'เลขที่คำสั่ง'}`"
-              >
-                <template v-slot:append>
-                  <q-icon name="mdi-file" class="cursor-pointer" />
-                </template>
-              </q-input>
-            </div>
-            <div class="col-xs-6 col-sm-6 col-md-6">
-              <datepicker
-                menu-class-name="modalfix"
-                v-model="dutyData.refCommandDate"
-                :locale="'th'"
-                autoApply
-                :enableTimePicker="false"
-                week-start="0"
-              >
-                <template #year="{ year }">{{ year + 543 }}</template>
-                <template #year-overlay-value="{ value }">{{
-                  parseInt(value + 543)
-                }}</template>
-                <template #trigger>
-                  <q-input
-                    class="full-width inputgreen cursor-pointer"
-                    outlined
-                    dense
-                    lazy-rules
-                    :borderless="!edit"
-                    :model-value="
+        <q-page-container>
+          <q-page class="q-pa-md">
+            <div class="row col-12 q-col-gutter-x-xs q-col-gutter-y-xs">
+              <div class="col-xs-6 col-sm-6 col-md-6">
+                <datepicker
+                  menu-class-name="modalfix"
+                  v-model="dutyData.dateStart"
+                  :locale="'th'"
+                  autoApply
+                  :enableTimePicker="false"
+                  week-start="0"
+                >
+                  <template #year="{ year }">{{ year + 543 }}</template>
+                  <template #year-overlay-value="{ value }">{{
+                    parseInt(value + 543)
+                  }}</template>
+                  <template #trigger>
+                    <q-input
+                      ref="dateStartRef"
+                      class="full-width inputgreen cursor-pointer"
+                      outlined
+                      dense
+                      :model-value="date2Thai(dutyData.dateStart)"
+                      :rules="[
+                        (val) => !!val || `${'กรุณาเลือกวันที่เริ่มต้น'}`,
+                      ]"
+                      hide-bottom-space
+                      :label="`${'วันที่เริ่มต้น'}`"
+                    >
+                      <template v-slot:prepend>
+                        <q-icon
+                          name="event"
+                          class="cursor-pointer"
+                          color="primary"
+                        >
+                        </q-icon>
+                      </template>
+                    </q-input>
+                  </template>
+                </datepicker>
+              </div>
+              <div class="col-xs-6 col-sm-6 col-md-6">
+                <datepicker
+                  menu-class-name="modalfix"
+                  v-model="dutyData.dateEnd"
+                  :locale="'th'"
+                  autoApply
+                  :enableTimePicker="false"
+                  :min-date="dutyData.dateStart"
+                  :readonly="!dutyData.dateStart"
+                  week-start="0"
+                >
+                  <template #year="{ year }">{{ year + 543 }}</template>
+                  <template #year-overlay-value="{ value }">{{
+                    parseInt(value + 543)
+                  }}</template>
+                  <template #trigger>
+                    <q-input
+                      ref="dateEndRef"
+                      :readonly="!dutyData.dateStart"
+                      class="full-width inputgreen cursor-pointer"
+                      dense
+                      outlined
+                      :model-value="date2Thai(dutyData.dateEnd)"
+                      :rules="[
+                        (val) => !!val || `${'กรุณาเลือกวันที่สิ้นสุด'}`,
+                      ]"
+                      hide-bottom-space
+                      :label="`${'วันที่สิ้นสุด'}`"
+                    >
+                      <template v-slot:prepend>
+                        <q-icon
+                          name="event"
+                          class="cursor-pointer"
+                          color="primary"
+                        >
+                        </q-icon>
+                      </template>
+                    </q-input>
+                  </template>
+                </datepicker>
+              </div>
+              <div class="col-12">
+                <q-input
+                  ref="referenceRef"
+                  class="full-width inputgreen cursor-pointer"
+                  outlined
+                  dense
+                  lazy-rules
+                  autogrow
+                  v-model="dutyData.reference"
+                  :rules="[(val) => !!val || `${'กรุณากรอกเอกสารอ้างอิง'}`]"
+                  hide-bottom-space
+                  :label="`${'เอกสารอ้างอิง'}`"
+                />
+              </div>
+              <div class="col-12">
+                <q-input
+                  ref="detailRef"
+                  class="full-width inputgreen cursor-pointer"
+                  outlined
+                  dense
+                  lazy-rules
+                  autogrow
+                  v-model="dutyData.detail"
+                  :rules="[(val) => !!val || `${'กรุณากรอกรายละเอียด'}`]"
+                  hide-bottom-space
+                  :label="`${'รายละเอียด'}`"
+                />
+              </div>
+              <div class="col-xs-6 col-sm-6 col-md-6">
+                <q-input
+                  class="full-width inputgreen cursor-pointer"
+                  outlined
+                  dense
+                  v-model="dutyData.refCommandNo"
+                  :label="`${'เลขที่คำสั่ง'}`"
+                >
+                  <template v-slot:append>
+                    <q-icon name="mdi-file" class="cursor-pointer" />
+                  </template>
+                </q-input>
+              </div>
+              <div class="col-xs-6 col-sm-6 col-md-6">
+                <datepicker
+                  menu-class-name="modalfix"
+                  v-model="dutyData.refCommandDate"
+                  :locale="'th'"
+                  autoApply
+                  :enableTimePicker="false"
+                  week-start="0"
+                >
+                  <template #year="{ year }">{{ year + 543 }}</template>
+                  <template #year-overlay-value="{ value }">{{
+                    parseInt(value + 543)
+                  }}</template>
+                  <template #trigger>
+                    <q-input
+                      class="full-width inputgreen cursor-pointer"
+                      outlined
+                      dense
+                      lazy-rules
+                      :borderless="!edit"
+                      :model-value="
                       dutyData.refCommandDate == null ? null : date2Thai(dutyData.refCommandDate as Date)
                     "
-                    hide-bottom-space
-                    :label="`${'เอกสารอ้างอิง (ลงวันที่)'}`"
-                    clearable
-                    @clear="dutyData.refCommandDate = null"
-                  >
-                    <template v-slot:prepend>
-                      <q-icon
-                        name="event"
-                        class="cursor-pointer"
-                        :style="
-                          edit
-                            ? 'color: var(--q-primary)'
-                            : 'color: var(--q-grey)'
-                        "
-                      >
-                      </q-icon>
-                    </template>
-                    <template
-                      v-if="dutyData.refCommandDate && edit"
-                      v-slot:append
+                      hide-bottom-space
+                      :label="`${'เอกสารอ้างอิง (ลงวันที่)'}`"
+                      clearable
+                      @clear="dutyData.refCommandDate = null"
                     >
-                      <q-icon
-                        name="cancel"
-                        @click.stop.prevent="dutyData.refCommandDate = null"
-                        class="cursor-pointer"
-                      />
-                    </template>
-                  </q-input>
-                </template>
-              </datepicker>
+                      <template v-slot:prepend>
+                        <q-icon
+                          name="event"
+                          class="cursor-pointer"
+                          color="primary"
+                        >
+                        </q-icon>
+                      </template>
+                      <template
+                        v-if="dutyData.refCommandDate && edit"
+                        v-slot:append
+                      >
+                      </template>
+                    </q-input>
+                  </template>
+                </datepicker>
+              </div>
             </div>
-          </div>
-        </q-card-section>
-
+          </q-page>
+        </q-page-container>
         <q-separator />
-        <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-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>
 
   <DialogHistory v-model:modal="modalHistory" v-model:id="id" />
diff --git a/src/modules/04_registryNew/components/detail/GovernmentInformation/04_PerformSpecialWorkHistory.vue b/src/modules/04_registryNew/components/detail/GovernmentInformation/04_PerformSpecialWorkHistory.vue
index 53cd2d0df..5ba2bb390 100644
--- a/src/modules/04_registryNew/components/detail/GovernmentInformation/04_PerformSpecialWorkHistory.vue
+++ b/src/modules/04_registryNew/components/detail/GovernmentInformation/04_PerformSpecialWorkHistory.vue
@@ -36,6 +36,10 @@ const formFilter = reactive<FormFilter>({
   isProbation: false,
 });
 
+const historyPagination = ref({
+  page: 1,
+  rowsPerPage: 10,
+});
 const visibleColumns = ref<String[]>([
   "dateStart",
   "dateEnd",
@@ -43,8 +47,8 @@ const visibleColumns = ref<String[]>([
   "reference",
   "refCommandNo",
   "refCommandDate",
-  "createdFullName",
-  "createdAt",
+  "lastUpdateFullName",
+  "lastUpdatedAt",
 ]);
 const columns = ref<QTableProps["columns"]>([
   {
@@ -117,22 +121,22 @@ const columns = ref<QTableProps["columns"]>([
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
-    name: "createdFullName",
+    name: "lastUpdateFullName",
     align: "left",
     label: "ผู้ดำเนินการ",
     sortable: true,
-    field: "createdFullName",
+    field: "lastUpdateFullName",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     sort: (a: string, b: string) =>
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
-    name: "createdAt",
+    name: "lastUpdatedAt",
     align: "left",
     label: "วันที่แก้ไข",
     sortable: true,
-    field: "createdAt",
+    field: "lastUpdatedAt",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     format: (v) => date2Thai(v),
@@ -159,6 +163,8 @@ function getHistory() {
             e.refCommandDate == null ? null : new Date(e.refCommandDate),
           createdFullName: e.createdFullName,
           createdAt: new Date(e.createdAt),
+          lastUpdateFullName: e.lastUpdateFullName,
+          lastUpdatedAt: e.lastUpdatedAt,
         });
       });
     })
@@ -182,107 +188,105 @@ watch(modal, (status) => {
 
 <template>
   <q-dialog v-model="modal" persistent>
-    <q-card style="min-width: 80%">
-      <q-card-section class="flex justify-between" style="padding: 0">
-        <DialogHeader
-          tittle="ประวัติแก้ไขปฏิบัติราชการพิเศษ"
-          :close="() => (modal = 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="filterKeyword"
-            ref="filterRef"
-            outlined
-            placeholder="ค้นหา"
-            debounce="300"
-          >
-            <template v-slot:append>
-              <q-icon
-                v-if="filterKeyword == ''"
-                name="search"
-                @click.stop.prevent="filterKeyword = ''"
-                class="cursor-pointer"
-              />
-              <q-icon
-                v-if="filterKeyword"
-                name="cancel"
-                @click.stop.prevent="filterKeyword = ''"
-                class="cursor-pointer"
-              />
-            </template>
-          </q-input>
-          <q-select
-            v-model="visibleColumns"
-            multiple
-            outlined
-            dense
-            options-dense
-            :display-value="$q.lang.table.columns"
-            emit-value
-            map-options
-            :options="columns"
-            option-value="name"
-            options-cover
-            style="min-width: 150px"
+    <q-layout
+      view="lHh lpr lFf"
+      container
+      style="height: 80vh; min-width: 80%"
+      class="bg-white"
+    >
+      <q-header>
+        <q-toolbar>
+          <DialogHeader
+            tittle="ประวัติแก้ไขปฏิบัติราชการพิเศษ"
+            :close="() => (modal = false)"
           />
-        </div>
-        <d-table
-          ref="table"
-          flat
-          bordered
-          dense
-          :columns="columns"
-          :rows="rows"
-          :paging="true"
-          :rows-per-page-options="[10, 25, 50, 100]"
-          :visible-columns="visibleColumns"
-          :filter="filterKeyword"
-        >
-          >
-          <template v-slot:header="props">
-            <q-tr :props="props">
-              <q-th v-for="col in props.cols" :key="col.name" :props="props">
-                <span class="text-weight-medium">{{ col.label }}</span>
-              </q-th>
-            </q-tr>
-          </template>
-          <template v-slot:body="props">
-            <q-tr :props="props" class="cursor-pointer">
-              <q-td v-for="col in props.cols" :key="col.id">
-                <div v-if="col.name === 'no'">
-                  {{
-                    (formFilter.page - 1) * formFilter.pageSize +
-                    props.rowIndex +
-                    1
-                  }}
-                </div>
-                <div v-else class="table_ellipsis">
-                  {{ col.value ? col.value : "-" }}
-                </div>
-              </q-td>
-            </q-tr>
-          </template>
+        </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="filterKeyword"
+              ref="filterRef"
+              outlined
+              placeholder="ค้นหา"
+              debounce="300"
+            >
+              <template v-slot:append>
+                <q-icon
+                  v-if="filterKeyword == ''"
+                  name="search"
+                  @click.stop.prevent="filterKeyword = ''"
+                  class="cursor-pointer"
+                />
+                <q-icon
+                  v-if="filterKeyword"
+                  name="cancel"
+                  @click.stop.prevent="filterKeyword = ''"
+                  class="cursor-pointer"
+                />
+              </template>
+            </q-input>
+            <q-select
+              v-model="visibleColumns"
+              multiple
+              outlined
+              dense
+              options-dense
+              :display-value="$q.lang.table.columns"
+              emit-value
+              map-options
+              :options="columns"
+              option-value="name"
+              options-cover
+              style="min-width: 150px"
+            />
+          </div>
+          <d-table
+            ref="table"
+            flat
+            bordered
+            dense
+            :columns="columns"
+            :rows="rows"
+            :paging="true"
+            v-model:pagination="historyPagination"
+            :rows-per-page-options="[10, 25, 50, 100]"
+            :visible-columns="visibleColumns"
+            :filter="filterKeyword"
+          >
+            >
+            <template v-slot:header="props">
+              <q-tr :props="props">
+                <q-th v-for="col in props.cols" :key="col.name" :props="props">
+                  <span class="text-weight-medium">{{ col.label }}</span>
+                </q-th>
+              </q-tr>
+            </template>
+            <template v-slot:body="props">
+              <q-tr :props="props" class="cursor-pointer">
+                <q-td v-for="col in props.cols" :key="col.id">
+                  <div v-if="col.name === 'no'">
+                    {{
+                      (formFilter.page - 1) * formFilter.pageSize +
+                      props.rowIndex +
+                      1
+                    }}
+                  </div>
+                  <div v-else class="table_ellipsis">
+                    {{ col.value ? col.value : "-" }}
+                  </div>
+                </q-td>
+              </q-tr>
+            </template>
+          </d-table>
+        </q-page>
+      </q-page-container>
+    </q-layout>
   </q-dialog>
 </template>
diff --git a/src/modules/04_registryNew/components/detail/PersonalInformation/02_NameChangeHistory.vue b/src/modules/04_registryNew/components/detail/PersonalInformation/02_NameChangeHistory.vue
index 9f9e937d6..7b6e90a87 100644
--- a/src/modules/04_registryNew/components/detail/PersonalInformation/02_NameChangeHistory.vue
+++ b/src/modules/04_registryNew/components/detail/PersonalInformation/02_NameChangeHistory.vue
@@ -602,7 +602,7 @@ watch(
     :rows="rows"
     :columns="columns"
     :filter="filterSearch"
-    :rows-per-page-options="[0]"
+    :rows-per-page-options="[10, 25, 50, 100]"
     :visible-columns="visibleColumns"
     :virtual-scroll-sticky-size-start="48"
   >
diff --git a/src/modules/04_registryNew/components/detail/PersonalInformation/03_Address.vue b/src/modules/04_registryNew/components/detail/PersonalInformation/03_Address.vue
index 8038a4515..10200e328 100644
--- a/src/modules/04_registryNew/components/detail/PersonalInformation/03_Address.vue
+++ b/src/modules/04_registryNew/components/detail/PersonalInformation/03_Address.vue
@@ -87,8 +87,8 @@ const visibleColumnsHistory = ref<String[]>([
   "registrationSame",
   "registrationSubDistrict",
   "registrationZipCode",
-  "createdFullName",
-  "createdAt",
+  "lastUpdateFullName",
+  "lastUpdatedAt",
 ]);
 
 const columnsHistory = ref<QTableProps["columns"]>([
@@ -224,22 +224,22 @@ const columnsHistory = ref<QTableProps["columns"]>([
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
-    name: "createdFullName",
+    name: "lastUpdateFullName",
     align: "left",
     label: "ผู้ดำเนินการ",
     sortable: true,
-    field: "createdFullName",
+    field: "lastUpdateFullName",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     sort: (a: string, b: string) =>
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
-    name: "createdAt",
+    name: "lastUpdatedAt",
     align: "left",
     label: "วันที่แก้ไข",
     sortable: true,
-    field: "createdAt",
+    field: "lastUpdatedAt",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     format: (v) => date2Thai(v),
diff --git a/src/modules/04_registryNew/interface/index/government.ts b/src/modules/04_registryNew/interface/index/government.ts
index 8569a5983..305accb4a 100644
--- a/src/modules/04_registryNew/interface/index/government.ts
+++ b/src/modules/04_registryNew/interface/index/government.ts
@@ -32,6 +32,8 @@ interface MyObjectRef {
 }
 
 interface RequestItemsHistoryObject {
+  lastUpdatedAt: Date,
+  lastUpdateFullName: string,
   oc: string | null;
   position: string | null;
   positionPathSide: string | null;
diff --git a/src/modules/04_registryNew/interface/index/performSpecialWork.ts b/src/modules/04_registryNew/interface/index/performSpecialWork.ts
index fcef79e5d..a880350af 100644
--- a/src/modules/04_registryNew/interface/index/performSpecialWork.ts
+++ b/src/modules/04_registryNew/interface/index/performSpecialWork.ts
@@ -32,6 +32,8 @@ interface MyObjectRef {
   }
 
   interface ResponseObject {
+    lastUpdateFullName: string,
+    lastUpdatedAt: Date,
     id: string;
     dateStart: Date;
     dateEnd: Date;