diff --git a/src/components/Workflow/DialogSelectPerson.vue b/src/components/Workflow/DialogSelectPerson.vue
index 10bc48c..8adf2eb 100644
--- a/src/components/Workflow/DialogSelectPerson.vue
+++ b/src/components/Workflow/DialogSelectPerson.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, watch } from "vue";
+import { reactive, ref, watch } from "vue";
 import { useQuasar } from "quasar";
 
 import { useCounterMixin } from "@/stores/mixin";
@@ -7,6 +7,8 @@ import http from "@/plugins/http";
 import config from "@/app.config";
 
 import type { QTableProps } from "quasar";
+import type { Pagination } from "@/components/Workflow/interface/index/Main";
+import type { DataQuery } from "@/components/Workflow/interface/request/Main";
 import type { DataCommander } from "@/components/Workflow/interface/response/Main";
 
 import DialogHeader from "@/components/DialogHeader.vue";
@@ -58,16 +60,30 @@ const columns = ref<QTableProps["columns"]>([
   },
 ]);
 
+const total = ref<number>(0);
+const totalList = ref<number>(1);
+
 const isAcceptSetting = ref<boolean>(false);
 const isApproveSetting = ref<boolean>(false);
 const isReasonSetting = ref<boolean>(false);
 
+const formDataQuery = reactive<DataQuery>({
+  page: 1,
+  pageSize: 10,
+  isAct: false,
+  keyword: "",
+});
+
 async function fetchLists() {
   showLoader();
   await http
-    .get(config.API.workflow + `commander/${props.type}`)
+    .put(config.API.workflow + `commander/${props.type}`, formDataQuery)
     .then(async (res) => {
-      rows.value = res.data.result;
+      totalList.value = Math.ceil(
+        res.data.result.total / formDataQuery.pageSize
+      );
+      total.value = res.data.result.total;
+      rows.value = res.data.result.data;
     })
     .catch((err) => {
       messageError($q, err);
@@ -102,6 +118,11 @@ function onSubmit() {
   });
 }
 
+function onSearchData() {
+  formDataQuery.page = 1;
+  fetchLists();
+}
+
 function onCloseModal() {
   modal.value = false;
   selected.value = [];
@@ -109,6 +130,10 @@ function onCloseModal() {
   isAcceptSetting.value = false;
   isApproveSetting.value = false;
   isReasonSetting.value = false;
+  formDataQuery.page = 1;
+  formDataQuery.pageSize = 10;
+  formDataQuery.isAct = false;
+  formDataQuery.keyword = "";
 }
 
 watch(modal, (val) => {
@@ -116,6 +141,21 @@ watch(modal, (val) => {
     fetchLists();
   }
 });
+
+watch(
+  () => [formDataQuery.isAct, formDataQuery.pageSize],
+  () => {
+    onSearchData();
+  }
+);
+
+/**
+ * function updatePagination
+ * @param newPagination ข้อมูล Pagination ใหม่
+ */
+function updatePagination(newPagination: Pagination) {
+  formDataQuery.pageSize = newPagination.rowsPerPage;
+}
 </script>
 
 <template>
@@ -126,6 +166,39 @@ watch(modal, (val) => {
         <q-separator />
 
         <q-card-section>
+          <div class="row q-col-gutter-sm items-start q-mb-sm">
+            <div class="col-12 col-sm-4 col-md-4">
+              <q-input
+                v-model="formDataQuery.keyword"
+                outlined
+                clearable
+                hide-bottom-space
+                dense
+                label="คำค้น"
+                @clear="formDataQuery.keyword = ''"
+              />
+            </div>
+            <q-checkbox
+              keep-color
+              v-model="formDataQuery.isAct"
+              label="แสดงเฉพาะรักษาการแทน"
+              color="primary"
+            >
+              <q-tooltip>แสดงเฉพาะรักษาการแทน </q-tooltip>
+            </q-checkbox>
+            <q-space />
+
+            <div class="col-12 col-sm-6 col-md-3">
+              <q-btn
+                color="primary"
+                icon="search"
+                label="ค้นหา"
+                class="full-width q-pa-sm"
+                @click.prevent="onSearchData"
+              >
+              </q-btn>
+            </div>
+          </div>
           <d-table
             ref="table"
             :columns="columns"
@@ -138,6 +211,7 @@ watch(modal, (val) => {
             :rows-per-page-options="[10, 25, 50, 100]"
             selection="single"
             v-model:selected="selected"
+            @update:pagination="updatePagination"
           >
             <template v-slot:header-selection="scope">
               <q-checkbox
@@ -172,6 +246,21 @@ watch(modal, (val) => {
                 </q-td>
               </q-tr>
             </template>
+
+            <template v-slot:pagination="scope">
+              ทั้งหมด {{ total }} รายการ
+              <q-pagination
+                v-model="formDataQuery.page"
+                active-color="primary"
+                color="dark"
+                :max="Number(totalList)"
+                size="sm"
+                boundary-links
+                direction-links
+                :max-pages="5"
+                @update:model-value="fetchLists()"
+              ></q-pagination>
+            </template>
           </d-table>
           <div class="q-gutter-xs q-pt-sm">
             <div>
diff --git a/src/components/Workflow/interface/index/Main.ts b/src/components/Workflow/interface/index/Main.ts
index 88d6451..d2bdaf3 100644
--- a/src/components/Workflow/interface/index/Main.ts
+++ b/src/components/Workflow/interface/index/Main.ts
@@ -8,4 +8,11 @@ interface Permission {
   isSing: boolean;
 }
 
-export type { Permission };
+interface Pagination {
+  descending: boolean;
+  page: number;
+  rowsPerPage: number;
+  sortBy: string;
+}
+
+export type { Permission, Pagination };
diff --git a/src/components/Workflow/interface/request/Main.ts b/src/components/Workflow/interface/request/Main.ts
new file mode 100644
index 0000000..dcd8c4d
--- /dev/null
+++ b/src/components/Workflow/interface/request/Main.ts
@@ -0,0 +1,8 @@
+interface DataQuery {
+  page: number;
+  pageSize: number;
+  isAct: boolean;
+  keyword: string;
+}
+
+export type { DataQuery };