diff --git a/src/modules/12_evaluatePersonal/components/Detail/popupHistory.vue b/src/modules/12_evaluatePersonal/components/Detail/popupHistory.vue
index a63a0d184..f792c26b3 100644
--- a/src/modules/12_evaluatePersonal/components/Detail/popupHistory.vue
+++ b/src/modules/12_evaluatePersonal/components/Detail/popupHistory.vue
@@ -127,11 +127,10 @@ watch(
       <q-card-section class="q-pt-none">
         <div class="col-xs-12 col-sm-12 col-md-12 row q-col-gutter-md">
           <div class="col-12 q-mt-sm">
-            <q-table
+            <d-table
               ref="table"
               flat
               bordered
-              class="custom-header-table"
               :columns="columns"
               :rows="row"
               dense
@@ -164,7 +163,7 @@ watch(
                   </q-td>
                 </q-tr>
               </template>
-            </q-table>
+            </d-table>
           </div>
         </div>
       </q-card-section>
@@ -172,31 +171,4 @@ watch(
   </q-dialog>
 </template>
 
-<style lang="scss" scoped>
-.custom-header-table {
-  height: auto;
-  .q-table tr:nth-child(odd) td {
-    background: white;
-  }
-  .q-table tr:nth-child(even) td {
-    background: #f8f8f8;
-  }
-
-  .q-table thead tr {
-    background: #ecebeb;
-  }
-
-  .q-table thead tr th {
-    position: sticky;
-    z-index: 1;
-  }
-  /* this will be the loading indicator */
-  .q-table thead tr:last-child th {
-    /* height of all previous header rows */
-    top: 48px;
-  }
-  .q-table thead tr:first-child th {
-    top: 0;
-  }
-}
-</style>
+<style lang="scss" scoped></style>
diff --git a/src/modules/12_evaluatePersonal/components/Detail/viewstep/tableStep1.vue b/src/modules/12_evaluatePersonal/components/Detail/viewstep/tableStep1.vue
index 1bb0da6c4..04c6edd19 100644
--- a/src/modules/12_evaluatePersonal/components/Detail/viewstep/tableStep1.vue
+++ b/src/modules/12_evaluatePersonal/components/Detail/viewstep/tableStep1.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { ref, computed } from "vue";
 const props = defineProps({
   columns: {
     type: Array as () => any[],
@@ -9,6 +10,17 @@ const props = defineProps({
     require: true,
   },
 });
+
+const total = computed(() => {
+  return props.row?.length;
+});
+
+const pagination = ref({
+  sortBy: "desc",
+  descending: false,
+  page: 1,
+  rowsPerPage: 10,
+});
 </script>
 
 <template>
@@ -22,6 +34,7 @@ const props = defineProps({
     :rows-per-page-options="[10, 25, 50, 100]"
     virtual-scroll
     class="row col-12"
+    v-model:pagination="pagination"
   >
     <template v-slot:header="props">
       <q-tr :props="props" class="bg-grey-2">
@@ -40,6 +53,20 @@ const props = defineProps({
         </q-td>
       </q-tr>
     </template>
+
+    <template v-slot:pagination="scope">
+      ทั้งหมด {{ total }} รายการ
+      <q-pagination
+        v-model="pagination.page"
+        active-color="primary"
+        color="dark"
+        :max="scope.pagesNumber"
+        :max-pages="5"
+        size="sm"
+        boundary-links
+        direction-links
+      ></q-pagination>
+    </template>
   </q-table>
 </template>