diff --git a/src/modules/14_KPI/components/Tab/Dialog/DialogEvalute.vue b/src/modules/14_KPI/components/Tab/Dialog/DialogEvalute.vue
index 34ad06b95..da9473b55 100644
--- a/src/modules/14_KPI/components/Tab/Dialog/DialogEvalute.vue
+++ b/src/modules/14_KPI/components/Tab/Dialog/DialogEvalute.vue
@@ -10,7 +10,7 @@ import PopupPersonal from "@/components/Dialogs/PopupPersonalNew.vue";
 import type {
   DataOption,
   typeOp,
-  ResponsePreson,
+  NewPagination,
   tableType,
   FormData,
 } from "@/modules/14_KPI/interface/index/Main";
@@ -22,10 +22,10 @@ const personId = ref<string>("");
 const modalPersonal = ref<boolean>(false);
 const searchRef = ref<any>(null);
 const rows = ref<tableType[]>([]);
-const type = ref<string>("idcard");
+const type = ref<string>("citizenId");
 const search = ref<string>("");
 const typeOps = ref<typeOp[]>([
-  { id: "idcard", name: "เลขประจำตัวประชาชน" },
+  { id: "citizenId", name: "เลขประจำตัวประชาชน" },
   { id: "firstname", name: "ชื่อ" },
   { id: "lastname", name: "นามสกุล" },
 ]);
@@ -96,9 +96,8 @@ function onCloseDialog() {
   formRound.commanderHighId = "";
   selected.value = [];
   search.value = "";
-  type.value = "idcard";
+  type.value = "citizenId";
 }
-
 /** หัวข้อที่เเสดงในตารางผู้ถูกร้องเรียน */
 const visibleColumnsRespondent = ref<string[]>([
   "no",
@@ -112,13 +111,18 @@ const visibleColumnsRespondent = ref<string[]>([
   "organization",
 ]);
 
+const query = reactive({
+  page: 1,
+  pageSize: 10,
+});
 const columnsRespondent = ref<QTableProps["columns"]>([
   {
     name: "no",
     align: "left",
     label: "ลำดับ",
     sortable: false,
-    field: "no",
+    field: (row) =>
+      (query.page - 1) * query.pageSize + rows.value.indexOf(row) + 1,
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
@@ -223,6 +227,9 @@ function checkClosed() {
   isRoundClose.value = formRound.kpiPeriodId.isClosed;
 }
 
+const total = ref<number>(0);
+const maxPage = ref<number>(1);
+
 async function searchInput(check: boolean) {
   if (check) {
     searchRules.value = check;
@@ -234,13 +241,21 @@ async function searchInput(check: boolean) {
         keyword: search.value,
       };
       await http
-        .post(config.API.orgSearchPersonal(), body)
+        .post(
+          config.API.orgSearchPersonal() +
+            `?page=${query.page}&pageSize=${query.pageSize}`,
+          body
+        )
         .then((res) => {
           const data = res.data.result;
+          maxPage.value = Math.ceil(data.total / query.pageSize);
+          total.value = data.total;
 
-          rows.value = data;
+          rows.value = data.data;
+        })
+        .catch((err) => {
+          messageError($q, err);
         })
-        .catch((err) => {})
         .finally(() => {
           hideLoader();
         });
@@ -263,15 +278,21 @@ function getOrgOp() {
       const data = res.data.result;
       evaluatorIdMainOp.value = data.caregiver.map((i: any) => ({
         id: i.id,
-        name: `${i.prefix ? i.prefix :''}${i.firstName ? i.firstName : ''} ${i.lastName ? i.lastName:''}`,
+        name: `${i.prefix ? i.prefix : ""}${i.firstName ? i.firstName : ""} ${
+          i.lastName ? i.lastName : ""
+        }`,
       }));
       commanderIdMainOp.value = data.commander.map((i: any) => ({
         id: i.id,
-        name: `${i.prefix ? i.prefix :''}${i.firstName ? i.firstName : ''} ${i.lastName ? i.lastName:''}`,
+        name: `${i.prefix ? i.prefix : ""}${i.firstName ? i.firstName : ""} ${
+          i.lastName ? i.lastName : ""
+        }`,
       }));
       commanderHighMainOp.value = data.chairman.map((i: any) => ({
         id: i.id,
-        name: `${i.prefix ? i.prefix :''}${i.firstName ? i.firstName : ''} ${i.lastName ? i.lastName:''}`,
+        name: `${i.prefix ? i.prefix : ""}${i.firstName ? i.firstName : ""} ${
+          i.lastName ? i.lastName : ""
+        }`,
       }));
     })
     .catch((e) => {
@@ -329,6 +350,22 @@ watch(
     }
   }
 );
+
+/**
+ * function อัปเดท paging
+ * @param initialPagination ข้อมูล pagination
+ */
+async function updatePagination(initialPagination: NewPagination) {
+  query.page = 1;
+  query.pageSize = initialPagination.rowsPerPage;
+}
+
+watch(
+  () => query.pageSize,
+  () => {
+    searchInput(true);
+  }
+);
 </script>
 <template>
   <q-dialog v-model="modalDialog" persistent>
@@ -374,7 +411,7 @@ watch(
                         icon="search"
                         label="ค้นหา"
                         class="full-width q-py-sm q-px-md"
-                        @click="searchInput(true)"
+                        @click="(query.page = 1), searchInput(true)"
                       >
                       </q-btn>
                     </template>
@@ -389,11 +426,12 @@ watch(
                     flat
                     bordered
                     selection="single"
+                    :rows-per-page-options="[10, 25, 50, 100]"
                     v-model:selected="selected"
                     :paging="true"
                     dense
-                    class="custom-header-table"
                     :visible-columns="visibleColumnsRespondent"
+                    @update:pagination="updatePagination"
                   >
                     <template v-slot:header="props">
                       <q-tr :props="props">
@@ -425,10 +463,7 @@ watch(
                           :key="col.name"
                           :props="props"
                         >
-                          <div v-if="col.name == 'no'">
-                            {{ props.rowIndex + 1 }}
-                          </div>
-                          <div v-else-if="col.name == 'positionType'">
+                          <div v-if="col.name == 'positionType'">
                             {{
                               props.row.positionTypeName
                                 ? props.row.positionTypeName
@@ -451,6 +486,20 @@ watch(
                         </q-td>
                       </q-tr>
                     </template>
+                    <template v-slot:pagination="scope">
+                      ทั้งหมด {{ total }} รายการ
+                      <q-pagination
+                        v-model="query.page"
+                        active-color="primary"
+                        color="dark"
+                        :max="Number(maxPage)"
+                        size="sm"
+                        boundary-links
+                        direction-links
+                        :max-pages="5"
+                        @update:model-value="searchInput(true)"
+                      ></q-pagination>
+                    </template>
                   </d-table>
                 </div>
               </div>