diff --git a/src/api/KPI/api.kpis.ts b/src/api/KPI/api.kpis.ts
index f6245f7..e6bb2f9 100644
--- a/src/api/KPI/api.kpis.ts
+++ b/src/api/KPI/api.kpis.ts
@@ -32,6 +32,4 @@ export default {
   kpiEvaluationCheck: `${kpiEvaluation}/check`,
 
   /**ประเมิน*/
-
-
 };
diff --git a/src/modules/08_KPI/components/Tab/02_Evaluator.vue b/src/modules/08_KPI/components/Tab/02_Evaluator.vue
index f2968e9..2d7374c 100644
--- a/src/modules/08_KPI/components/Tab/02_Evaluator.vue
+++ b/src/modules/08_KPI/components/Tab/02_Evaluator.vue
@@ -1,8 +1,24 @@
 <script setup lang="ts">
-import { ref, onMounted } from "vue";
+import { ref, reactive, onMounted } from "vue";
+import { useQuasar } from "quasar";
+import { useRoute } from "vue-router";
+import config from "@/app.config";
+import http from "@/plugins/http";
 
 import type { QTableProps } from "quasar";
+import type { FormComment } from "@/modules/08_KPI/interface/request/index";
+import type { ResEvaluator } from "@/modules/08_KPI/interface/response/index";
 
+import DialogHeader from "@/components/DialogHeader.vue";
+
+import { useCounterMixin } from "@/stores/mixin";
+
+const $q = useQuasar();
+const route = useRoute();
+const { showLoader, hideLoader, messageError, dialogConfirm, success } =
+  useCounterMixin();
+
+const evaluatorId = ref<string>(route.params.id.toString());
 const props = defineProps({
   type: {
     type: String,
@@ -20,9 +36,7 @@ const columns = ref<QTableProps["columns"]>([
     sortable: true,
     field: "topic",
     headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+    style: "font-size: 14px;",
   },
   {
     name: "reason",
@@ -31,22 +45,106 @@ const columns = ref<QTableProps["columns"]>([
     sortable: true,
     field: "reason",
     headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+    style: "font-size: 14px;",
   },
 ]);
-const rows = ref<any[]>([]);
+const rows = ref<ResEvaluator[]>([]);
 const filterKeyword = ref<string>("");
 
+const modal = ref<boolean>(false);
+const formComment = reactive<FormComment>({
+  topic: "",
+  reason: "",
+});
+const optionTopicMain = ref<string[]>([
+  "เห็นชอบตัวชี้วัดผลสัมฤทธิ์ของงาน รายการสมรรถนะ และน้ำหนักคะแนนของผู้ใต้บังคับบัญชา",
+  "ส่งกลับให้แก้ไข",
+  "บันทึกคำปรึกษาแนะนำ",
+  "บันทึกความเห็น",
+  "เห็นด้วยกับผลการประเมิน",
+  "บันทึกข้อเสนอแนะการพัฒนา",
+]);
+const optionTopic = ref<string[]>(optionTopicMain.value);
+
+function fetchList() {
+  showLoader();
+  http
+    .get(config.API.kpiEvaluation + `/${props.type}/${evaluatorId.value}`)
+    .then((res) => {
+      rows.value = res.data.result;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+function openDialog() {
+  modal.value = true;
+}
+
+function closeDialog() {
+  modal.value = false;
+  formComment.topic = "";
+  formComment.reason = "";
+}
+
+function createValue(val: string, done: Function) {
+  if (val.length > 0) {
+    if (!optionTopic.value.includes(val)) {
+      optionTopic.value.push(val);
+    }
+    done(val);
+  }
+}
+
+function filterFn(val: string, update: Function) {
+  update(() => {
+    optionTopic.value = optionTopicMain.value.filter(
+      (v: any) => v.indexOf(val) > -1
+    );
+  });
+}
+
+function onSubmit() {
+  dialogConfirm($q, () => {
+    showLoader();
+    http
+      .put(
+        config.API.kpiEvaluation + `/${props.type}/${evaluatorId.value}`,
+        formComment
+      )
+      .then(() => {
+        fetchList();
+        closeDialog();
+        success($q, "บันทึกข้อมูลสำเร็จ");
+      })
+      .catch((err) => {
+        messageError($q, err);
+      })
+      .finally(() => {
+        hideLoader();
+      });
+  });
+}
+
+const pagination = ref({
+  sortBy: "desc",
+  descending: false,
+  page: 1,
+  rowsPerPage: 10,
+});
+
 onMounted(() => {
-  console.log(props.type);
+  fetchList();
 });
 </script>
 <template>
   <div class="q-pa-md">
     <q-toolbar style="padding: 0px">
-      <q-btn flat round dense icon="add" color="blue-4">
+      <q-btn flat round dense icon="add" color="blue-4" @click="openDialog">
         <q-tooltip>เสนอความคิดเห็น</q-tooltip>
       </q-btn>
       <q-space />
@@ -88,11 +186,11 @@ onMounted(() => {
         flat
         bordered
         dense
-        hide-pagination
         class="custom-table"
         :visible-columns="visibleColumns"
-        :rows-per-page-options="[20]"
+        :rows-per-page-options="[10, 20, 50, 100]"
         no-data-label="ไม่มีข้อมูล"
+        v-model:pagination="pagination"
       >
         <template v-slot:header="props">
           <q-tr :props="props">
@@ -103,16 +201,82 @@ onMounted(() => {
         </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>
-                {{ col.value ? col.value : "-" }}
-              </div>
+            <q-td v-for="col in props.cols" :key="col.id" style="width: 50%">
+              {{ col.value ? col.value : "-" }}
             </q-td>
           </q-tr>
         </template>
+        <template v-slot:pagination="scope">
+          ทั้งหมด {{ rows.length }} รายการ
+          <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>
     </div>
   </div>
+
+  <q-dialog v-model="modal" persistent>
+    <q-card style="width: 700px; max-width: 80vw">
+      <DialogHeader :tittle="'เสนอความคิดเห็น'" :close="closeDialog" />
+      <q-separator />
+      <q-form greedy @submit.prevent @validation-success="onSubmit">
+        <q-card-section>
+          <div class="row q-col-gutter-md">
+            <div class="col-12">
+              <q-select
+                class="inputgreen"
+                dense
+                outlined
+                v-model="formComment.topic"
+                use-input
+                input-debounce="0"
+                @new-value="createValue"
+                :options="optionTopic"
+                @filter="filterFn"
+                hide-bottom-space
+                lazy-rules
+                label="หัวข้อ"
+                :rules="[
+                  (val:string) =>
+                    !!val || `${'กรุณาเลือกหัวข้อ'}`,
+                ]"
+              />
+            </div>
+            <div class="col-12">
+              <q-input
+                v-model="formComment.reason"
+                class="inputgreen"
+                dense
+                outlined
+                type="textarea"
+                label="ควาดคิดเห็น"
+                hide-bottom-space
+                lazy-rules
+                :rules="[
+                  (val:string) =>
+                    !!val || `${'กรุณากรอกความคิดเห็น'}`,
+                ]"
+              />
+            </div>
+          </div>
+        </q-card-section>
+        <q-separator />
+        <q-card-actions align="right">
+          <q-btn label="บันทึก" color="secondary" type="submit"
+            ><q-tooltip>บันทึกข้อมูล</q-tooltip></q-btn
+          >
+        </q-card-actions>
+      </q-form>
+    </q-card>
+  </q-dialog>
 </template>
 
 <style scoped>
diff --git a/src/modules/08_KPI/interface/request/index.ts b/src/modules/08_KPI/interface/request/index.ts
index 7cd6849..effe18a 100644
--- a/src/modules/08_KPI/interface/request/index.ts
+++ b/src/modules/08_KPI/interface/request/index.ts
@@ -45,7 +45,19 @@ interface ListCapacity {
   id: string;
   level: number;
   description: string;
-  capacityId:string
+  capacityId: string;
 }
 
-export type { FormProfile, FormDataAssigned, FormCapacityList,ListCriteria,ListCapacity };
+interface FormComment {
+  topic: string;
+  reason: string;
+}
+
+export type {
+  FormProfile,
+  FormDataAssigned,
+  FormCapacityList,
+  ListCriteria,
+  ListCapacity,
+  FormComment,
+};
diff --git a/src/modules/08_KPI/interface/response/index.ts b/src/modules/08_KPI/interface/response/index.ts
new file mode 100644
index 0000000..a217a31
--- /dev/null
+++ b/src/modules/08_KPI/interface/response/index.ts
@@ -0,0 +1,15 @@
+interface ResEvaluator {
+  createdAt: string;
+  createdFullName: string;
+  createdUserId: string;
+  id: string;
+  kpiUserEvaluationId: string;
+  lastUpdateFullName: string;
+  lastUpdateUserId: string;
+  lastUpdatedAt: string;
+  reason: string;
+  topic: string;
+  type: string;
+}
+
+export type { ResEvaluator };