diff --git a/src/api/11_discipline/api.discipline.ts b/src/api/11_discipline/api.discipline.ts
index 4bb3f94a2..a1a0e2bc9 100644
--- a/src/api/11_discipline/api.discipline.ts
+++ b/src/api/11_discipline/api.discipline.ts
@@ -82,13 +82,8 @@ export default {
     `${discipline}/director/${disciplineId}/${id}`,
 
   /** ผู้ถูกพักราชการ */
-  suspendMain: (
-    page: number,
-    pageSize: number,
-    keyword: string,
-    type: string
-  ) =>
-    `${suspend}?page=${page}&pageSize=${pageSize}&keyword=${keyword}&profileType=${type}`,
+  suspendMain: suspend,
+
   suspendById: (id: string) => `${suspend}/${id}`,
 
   suspendReport: () => `${suspend}/report`,
diff --git a/src/modules/11_discipline/components/7_ListSuspend/ListsPage.vue b/src/modules/11_discipline/components/7_ListSuspend/ListsPage.vue
index bb391a6a0..bb73d2036 100644
--- a/src/modules/11_discipline/components/7_ListSuspend/ListsPage.vue
+++ b/src/modules/11_discipline/components/7_ListSuspend/ListsPage.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, onMounted, watch } from "vue";
+import { ref, onMounted } from "vue";
 import { useQuasar } from "quasar";
 import { useRouter } from "vue-router";
 
@@ -7,33 +7,28 @@ import http from "@/plugins/http";
 import config from "@/app.config";
 import { useCounterMixin } from "@/stores/mixin";
 import { useDisciplineSuspendStore } from "@/modules/11_discipline/store/SuspendStore";
-
-import type {
-  dataType,
-  DataOption,
-} from "@/modules/11_discipline/interface/response/suspend";
-import type { QTableProps } from "quasar";
-
-import DialogSendToCommand from "@/modules/11_discipline/components/7_ListSuspend/DialogSendToCommand.vue";
+import { usePagination } from "@/composables/usePagination";
 import {
   checkPermission,
   checkPermissionList,
   checkPermissionCreate,
 } from "@/utils/permissions";
 
+import type { QTableProps } from "quasar";
+import type {
+  dataType,
+  DataOption,
+} from "@/modules/11_discipline/interface/response/suspend";
+
+import DialogSendToCommand from "@/modules/11_discipline/components/7_ListSuspend/DialogSendToCommand.vue";
+
 /** use */
 const dataStore = useDisciplineSuspendStore();
 const $q = useQuasar();
 const router = useRouter();
-const mixin = useCounterMixin();
-const {
-  messageError,
-  showLoader,
-  hideLoader,
-  success,
-  date2Thai,
-  convertDateToAPI,
-} = mixin;
+const { messageError, showLoader, hideLoader, date2Thai, convertDateToAPI } =
+  useCounterMixin();
+const { pagination, params, onRequest } = usePagination("", getList);
 
 const date = ref<any>(null);
 const employeeClass = ref<string>("");
@@ -49,19 +44,18 @@ const visibleColumns = ref<string[]>([
   "no",
   "profileType",
   "title",
-  "name",
+  "firstName",
   "position",
   "positionType",
   "positionLevel",
   "organization",
-  "dateTotal",
+  "startDateSuspend",
   "descriptionSuspend",
   "status",
 ]);
 
 //ค้นหา คอลัมน์ คอลัมน์ที่แสดง
 const filterKeyword = ref<string>("");
-const filterRef = ref<any>(null);
 
 //ค้นหา คอลัมน์ คอลัมน์ที่แสดง
 const rows2 = ref<dataType[]>([]);
@@ -79,7 +73,7 @@ const columns = ref<QTableProps["columns"]>([
     name: "profileType",
     align: "left",
     label: "ประเภทตำแหน่ง",
-    sortable: true,
+    sortable: false,
     field: "profileType",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
@@ -94,7 +88,7 @@ const columns = ref<QTableProps["columns"]>([
     style: "font-size: 14px",
   },
   {
-    name: "name",
+    name: "firstName",
     align: "left",
     label: "ชื่อ - นามสกุล",
     sortable: true,
@@ -135,7 +129,7 @@ const columns = ref<QTableProps["columns"]>([
     style: "font-size: 14px",
   },
   {
-    name: "dateTotal",
+    name: "startDateSuspend",
     align: "left",
     label: "วันที่เริ่มต้น-สิ้นสุดคำสั่ง",
     sortable: true,
@@ -156,28 +150,15 @@ const columns = ref<QTableProps["columns"]>([
     name: "status",
     align: "left",
     label: "สถานะ",
-    sortable: true,
+    sortable: false,
     field: "status",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
 ]);
 
-const openModal = () => (modal.value = true);
-
-const total = ref<number>(0);
-const totalList = ref<number>(1);
-const pagination = ref({
-  sortBy: "createdAt",
-  descending: true,
-  page: 1,
-  rowsPerPage: 10,
-});
-
-function resetFilter() {
-  filterKeyword.value = "";
-  filterRef.value.focus();
-  getSearch();
+function openModal() {
+  modal.value = true;
 }
 
 /** เปิด popup ส่งไปออกคำสั่ง โดย PENDING*/
@@ -201,28 +182,22 @@ function openModalOrder() {
 /** ดึงข้อมูลหน้าหลัก */
 async function getList() {
   showLoader();
-  const params: Record<string, any> = {};
-  if (date.value && date.value.length === 2) {
-    params.startDate = convertDateToAPI(date.value[0]);
-    params.endDate = convertDateToAPI(date.value[1]);
-  }
+  const paramsNew = {
+    ...params.value,
+    keyword: filterKeyword.value.trim(),
+    profileType: employeeClass.value,
+    ...(date.value?.length === 2 && {
+      startDate: convertDateToAPI(date.value[0]),
+      endDate: convertDateToAPI(date.value[1]),
+    }),
+  };
+
   await http
-    .get(
-      config.API.suspendMain(
-        pagination.value.page,
-        pagination.value.rowsPerPage,
-        filterKeyword.value.trim(),
-        employeeClass.value
-      ),
-      { params }
-    )
+    .get(config.API.suspendMain, { params: paramsNew })
     .then(async (res) => {
-      const data = await res.data.result.data;
-      totalList.value = Math.ceil(
-        res.data.result.total / pagination.value.rowsPerPage
-      );
-      total.value = res.data.result.total;
-      await dataStore.getData(data);
+      const result = await res.data.result;
+      pagination.value.rowsNumber = result.total;
+      await dataStore.getData(result.data);
     })
     .catch((e) => {
       messageError($q, e);
@@ -232,27 +207,11 @@ async function getList() {
     });
 }
 
-function filterFn() {
-  getSearch();
-}
-
-function updatePagination(newPagination: any) {
-  pagination.value.page = 1;
-  pagination.value.rowsPerPage = newPagination.rowsPerPage;
-}
-
 function getSearch() {
   pagination.value.page = 1;
   getList();
 }
 
-watch(
-  () => pagination.value.rowsPerPage,
-  async () => {
-    getSearch();
-  }
-);
-
 function convertType(val: string) {
   const data = val?.toLocaleUpperCase();
   switch (data) {
@@ -275,221 +234,215 @@ onMounted(async () => {
   <div class="toptitle text-dark col-12 row items-center">
     รายชื่อผู้ถูกพักราชการ
   </div>
-  <q-card flat bordered class="col-12 q-mt-sm">
-    <q-separator />
-    <div class="row q-pa-md">
+  <q-card flat bordered>
+    <div class="row q-pa-md q-col-gutter-sm">
       <div class="col-12">
-        <div class="row col-12 q-col-gutter-sm items-center">
-          <div>
-            <q-select
-              v-model="employeeClass"
-              outlined
-              dense
-              options-dense
-              emit-value
-              map-options
-              :options="employeeClassOption"
-              option-value="id"
-              option-label="name"
-              label="ประเภทตำแหน่ง"
-              style="min-width: 200px"
-              @update:model-value="getList"
-            />
-          </div>
-          <div>
-            <datepicker
-              v-model="date"
-              :locale="'th'"
-              autoApply
-              range
-              :enableTimePicker="false"
-              @update:model-value="getList()"
-              style="min-width: 280px"
-            >
-              <template #year="{ year }">{{ year + 543 }}</template>
-              <template #year-overlay-value="{ value }">{{
-                parseInt(value + 543)
-              }}</template>
-              <template #trigger>
-                <q-input
-                  class="bg-white"
-                  dense
+        <div class="row q-col-gutter-sm">
+          <div class="col-xs-12 col-sm-7 col-md-6 col-lg-5">
+            <div class="row col-12 q-col-gutter-sm items-center">
+              <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
+                <q-select
+                  v-model="employeeClass"
                   outlined
-                  :label="`${'วันที่เริ่มต้น-สิ้นสุดคำสั่ง'}`"
-                  :model-value="
-                    date ? `${date2Thai(date[0])} - ${date2Thai(date[1])}` : ''
-                  "
+                  dense
+                  options-dense
+                  emit-value
+                  map-options
+                  :options="employeeClassOption"
+                  option-value="id"
+                  option-label="name"
+                  label="ประเภทตำแหน่ง"
+                  @update:model-value="getList"
+                />
+              </div>
+              <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
+                <datepicker
+                  v-model="date"
+                  :locale="'th'"
+                  autoApply
+                  range
+                  :enableTimePicker="false"
+                  @update:model-value="getList()"
                 >
-                  <template v-slot:prepend>
-                    <q-icon
-                      size="18px"
-                      name="event"
-                      class="cursor-pointer"
-                      color="primary"
-                    ></q-icon>
+                  <template #year="{ year }">{{ year + 543 }}</template>
+                  <template #year-overlay-value="{ value }">{{
+                    parseInt(value + 543)
+                  }}</template>
+                  <template #trigger>
+                    <q-input
+                      class="bg-white"
+                      dense
+                      outlined
+                      :label="`${'วันที่เริ่มต้น-สิ้นสุดคำสั่ง'}`"
+                      :model-value="
+                        date
+                          ? `${date2Thai(date[0])} - ${date2Thai(date[1])}`
+                          : ''
+                      "
+                    >
+                      <template v-slot:prepend>
+                        <q-icon
+                          size="18px"
+                          name="event"
+                          class="cursor-pointer"
+                          color="primary"
+                        ></q-icon>
+                      </template>
+                      <template v-slot:append>
+                        <q-icon
+                          v-if="date !== null"
+                          name="clear"
+                          class="cursor-pointer"
+                          @click.prevent.stop="(date = null), getList()"
+                        />
+                      </template>
+                    </q-input>
                   </template>
+                </datepicker>
+              </div>
+              <div class="col-1 row justify-center">
+                <q-btn
+                  v-if="
+                    checkPermission($route)?.attrIsUpdate &&
+                    checkPermissionList(['COMMAND']) &&
+                    checkPermissionCreate('COMMAND')
+                  "
+                  @click="openModalOrder"
+                  flat
+                  round
+                  dense
+                  color="primary"
+                  icon="mdi-account-arrow-right"
+                >
+                  <q-tooltip>ส่งไปออกคำสั่ง</q-tooltip>
+                </q-btn>
+              </div>
+            </div>
+          </div>
+
+          <q-space />
+          <div class="col-xs-12 col-sm-4 col-md-5 col-lg-4">
+            <div class="row q-col-gutter-sm items-center">
+              <div class="col-7">
+                <q-input
+                  for="#search"
+                  standout
+                  dense
+                  v-model="filterKeyword"
+                  ref="filterRef"
+                  outlined
+                  placeholder="ค้นหา"
+                  @keydown.enter.prevent="getSearch"
+                >
                   <template v-slot:append>
-                    <q-icon
-                      v-if="date !== null"
-                      name="clear"
-                      class="cursor-pointer"
-                      @click.prevent.stop="(date = null), getList()"
-                    />
+                    <q-icon name="search" />
                   </template>
                 </q-input>
-              </template>
-            </datepicker>
+              </div>
+              <div class="col-5">
+                <q-select
+                  v-model="dataStore.visibleColumns"
+                  multiple
+                  outlined
+                  dense
+                  options-dense
+                  :display-value="$q.lang.table.columns"
+                  emit-value
+                  map-options
+                  :options="columns"
+                  option-value="name"
+                />
+              </div>
+            </div>
           </div>
-          <div>
-            <q-btn
-              v-if="
-                checkPermission($route)?.attrIsUpdate &&
-                checkPermissionList(['COMMAND']) &&
-                checkPermissionCreate('COMMAND')
-              "
-              @click="openModalOrder"
-              flat
-              round
-              dense
-              color="primary"
-              icon="mdi-account-arrow-right"
-            >
-              <q-tooltip>ส่งไปออกคำสั่ง</q-tooltip>
-            </q-btn>
-          </div>
-          <q-space />
-
-          <q-input
-            for="#search"
-            standout
-            dense
-            v-model="filterKeyword"
-            ref="filterRef"
-            outlined
-            placeholder="ค้นหา"
-            @keydown.enter.prevent="filterFn"
-          >
-            <template v-slot:append>
-              <q-icon name="search" />
-            </template>
-          </q-input>
-
-          <q-select
-            v-model="dataStore.visibleColumns"
-            multiple
-            outlined
-            dense
-            options-dense
-            :display-value="$q.lang.table.columns"
-            emit-value
-            map-options
-            :options="columns"
-            option-value="name"
-            style="min-width: 140px"
-          />
         </div>
+      </div>
 
-        <div class="col-12 q-pt-sm">
-          <d-table
-            :columns="dataStore.columns"
-            :rows="dataStore.rows"
-            row-key="id"
-            :visible-columns="dataStore.visibleColumns"
-            :rows-per-page-options="[10, 25, 50, 100]"
-            @update:pagination="updatePagination"
-          >
-            <template v-slot:pagination="scope">
-              ทั้งหมด {{ total }} รายการ
-              <q-pagination
-                v-model="pagination.page"
-                active-color="primary"
-                color="dark"
-                :max="Number(totalList)"
-                size="sm"
-                boundary-links
-                direction-links
-                :max-pages="5"
-                @update:model-value="getList"
-              ></q-pagination>
-            </template>
-            <template v-slot:header="props">
-              <q-tr :props="props">
-                <q-th auto-width />
-                <q-th v-for="col in props.cols" :key="col.name" :props="props">
-                  <span class="text-weight-medium">{{ col.label }}</span>
-                </q-th>
-                <!-- <q-th auto-width /> -->
-              </q-tr>
-            </template>
-            <template v-slot:body="props">
-              <q-tr :props="props">
-                <q-td auto-width>
-                  <q-btn
-                    v-if="checkPermission($route)?.attrIsGet"
-                    @click="
-                      router.push(`/discipline-suspend-detail/${props.row.id}`)
-                    "
-                    flat
-                    dense
-                    round
-                    color="info"
-                    icon="mdi-eye"
-                  >
-                    <q-tooltip>รายละเอียด</q-tooltip>
-                  </q-btn>
-                  <q-btn
-                    v-if="
-                      checkPermission($route)?.attrIsUpdate &&
-                      checkPermission($route)?.attrIsGet
-                    "
-                    @click="router.push(`/discipline-suspend/${props.row.id}`)"
-                    flat
-                    dense
-                    round
-                    color="edit"
-                    icon="edit"
-                  >
-                    <q-tooltip>แก้ไขข้อมูลเพื่อลงบัญชีแนบท้าย</q-tooltip>
-                  </q-btn>
-                </q-td>
-                <q-td v-for="col in props.cols" :key="col.name" :props="props">
-                  <div v-if="col.name == 'no'">
-                    {{
-                      (pagination.page - 1) * pagination.rowsPerPage +
-                      props.rowIndex +
-                      1
-                    }}
-                  </div>
-                  <div v-else-if="col.name === 'name'" class="table_ellipsis">
-                    {{ props.row.prefix ? props.row.prefix : ""
-                    }}{{ props.row.firstName ? props.row.firstName : "" }}
-                    {{ props.row.lastName ? props.row.lastName : "" }}
-                  </div>
-                  <div v-else-if="col.name === 'title'" class="table_ellipsis">
-                    {{ props.row.title ? props.row.title : "-" }}
-                  </div>
-                  <div v-else-if="col.name === 'profileType'">
-                    {{
-                      props.row.profileType
-                        ? convertType(props.row.profileType.toUpperCase())
-                        : "-"
-                    }}
-                  </div>
-                  <div
-                    v-else-if="col.name === 'organization'"
-                    class="text-html"
-                    style="width: 250px"
-                  >
-                    {{ props.row.organization ? props.row.organization : "-" }}
-                  </div>
-                  <div v-else>
-                    {{ col.value ?? "-" }}
-                  </div>
-                </q-td>
-              </q-tr>
-            </template>
-          </d-table>
-        </div>
+      <div class="col-12">
+        <p-table
+          :columns="dataStore.columns"
+          :rows="dataStore.rows"
+          row-key="id"
+          :visible-columns="dataStore.visibleColumns"
+          :rows-per-page-options="[10, 25, 50, 100]"
+          v-model:pagination="pagination"
+          @request="onRequest"
+        >
+          <template v-slot:header="props">
+            <q-tr :props="props">
+              <q-th auto-width />
+              <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">
+              <q-td auto-width>
+                <q-btn
+                  v-if="checkPermission($route)?.attrIsGet"
+                  @click="
+                    router.push(`/discipline-suspend-detail/${props.row.id}`)
+                  "
+                  flat
+                  dense
+                  round
+                  color="info"
+                  icon="mdi-eye"
+                >
+                  <q-tooltip>รายละเอียด</q-tooltip>
+                </q-btn>
+                <q-btn
+                  v-if="
+                    checkPermission($route)?.attrIsUpdate &&
+                    checkPermission($route)?.attrIsGet
+                  "
+                  @click="router.push(`/discipline-suspend/${props.row.id}`)"
+                  flat
+                  dense
+                  round
+                  color="edit"
+                  icon="edit"
+                >
+                  <q-tooltip>แก้ไขข้อมูลเพื่อลงบัญชีแนบท้าย</q-tooltip>
+                </q-btn>
+              </q-td>
+              <q-td v-for="col in props.cols" :key="col.name" :props="props">
+                <div v-if="col.name == 'no'">
+                  {{ props.rowIndex + 1 }}
+                </div>
+                <div
+                  v-else-if="col.name === 'firstName'"
+                  class="table_ellipsis"
+                >
+                  {{ props.row.prefix ? props.row.prefix : ""
+                  }}{{ props.row.firstName ? props.row.firstName : "" }}
+                  {{ props.row.lastName ? props.row.lastName : "" }}
+                </div>
+                <div v-else-if="col.name === 'title'" class="table_ellipsis">
+                  {{ props.row.title ? props.row.title : "-" }}
+                </div>
+                <div v-else-if="col.name === 'profileType'">
+                  {{
+                    props.row.profileType
+                      ? convertType(props.row.profileType.toUpperCase())
+                      : "-"
+                  }}
+                </div>
+                <div
+                  v-else-if="col.name === 'organization'"
+                  class="text-html"
+                  style="width: 250px"
+                >
+                  {{ props.row.organization ? props.row.organization : "-" }}
+                </div>
+                <div v-else>
+                  {{ col.value ?? "-" }}
+                </div>
+              </q-td>
+            </q-tr>
+          </template>
+        </p-table>
       </div>
     </div>
   </q-card>