diff --git a/src/api/14_KPI/api.KPI.ts b/src/api/14_KPI/api.KPI.ts
index 1bca35e14..2de431732 100644
--- a/src/api/14_KPI/api.KPI.ts
+++ b/src/api/14_KPI/api.KPI.ts
@@ -1,10 +1,12 @@
 import env from "../index";
 const KPI = `${env.API_URI}/kpi`;
 const kpiPeriod = `${env.API_URI}/kpi/period`;
+const kpiEvaluation = `${env.API_URI}/kpi/evaluation`;
 
 export default {
   KPI,
   /** รอบการประเมินผล*/
   kpiPeriod: `${kpiPeriod}`,
   kpiPeriodById: (id: string) => `${kpiPeriod}/${id}`,
+  kpiEvaluation
 };
diff --git a/src/modules/14_KPI/components/competency/04ListCriteria.vue b/src/modules/14_KPI/components/competency/04ListCriteria.vue
index b77c54a45..f78c0e2d3 100644
--- a/src/modules/14_KPI/components/competency/04ListCriteria.vue
+++ b/src/modules/14_KPI/components/competency/04ListCriteria.vue
@@ -1,6 +1,14 @@
 <script setup lang="ts">
 import { ref, reactive, onMounted, watch } from "vue";
+import { useCounterMixin } from "@/stores/mixin";
 
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { useQuasar } from "quasar";
+
+const $q = useQuasar();
+const dataLevel = ref<any>();
+const { showLoader, hideLoader, success } = useCounterMixin();
 const fieldLabels = {
   score5: "5",
   score4: "4",
@@ -23,26 +31,39 @@ interface FormScore {
   score3: string;
   score2: string;
   score1: string;
-  [key:string]:any
+  [key: string]: any;
 }
 
 function onSubmit() {
-const array = ref<any>([])
-
-  for (const key in formScore) {
-    if (formScore.hasOwnProperty(key)) {
-      if (key in formScore) {
-        const scoreObj: Partial<FormScore> = {}; // กำหนด scoreObj ให้เป็น Partial<FormScore>
-        scoreObj[key] = formScore[key];
-        array.value.push(scoreObj)
-      }
-    }
-  }
   const body = {
-    formScore: array.value ,
+    formScore: dataLevel.value.map((item: any) => {
+      const { level, ...rest } = item;
+      return rest;
+    }),
   };
-  console.log(body);
+
+  http
+    .put(config.API.kpiEvaluation, body.formScore)
+    .then((res) => {
+      success($q, "บันทึกสำเร็จ");
+    })
+    .finally(() => {});
 }
+
+function getData() {
+  showLoader();
+  http
+    .get(config.API.kpiEvaluation)
+    .then((res) => {
+      dataLevel.value = res.data.result;
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+onMounted(() => {
+  getData();
+});
 </script>
 
 <template>
@@ -55,16 +76,13 @@ const array = ref<any>([])
         </div>
       </q-card-section>
       <q-card-section class="q-pa-none">
-        <div
-          v-for="(field, index) in Object.keys(fieldLabels)"
-          :key="index + 1"
-        >
+        <div v-for="(field, index) in dataLevel" :key="field.id">
           <div class="row q-pa-sm">
             <div class="col-8 text-left">
               <q-field
                 class="q_field_p_none"
                 ref="fieldRef"
-                v-model="formScore[field]"
+                v-model="field.description"
                 label-slot
                 borderless
                 :rules="[(val) => !!val || 'กรุณากรอกมาตรฐานพฤติกรรม']"
@@ -73,7 +91,7 @@ const array = ref<any>([])
                 <template #control>
                   <q-editor
                     class="full-width"
-                    v-model="formScore[field]"
+                    v-model="field.description"
                     :dense="$q.screen.lt.md"
                     min-height="5rem"
                     :toolbar="[
@@ -114,7 +132,7 @@ const array = ref<any>([])
             <div
               class="col-4 text-center text-body1 text-weight-bold self-center"
             >
-              {{ fieldLabels[field as keyof typeof fieldLabels] }}
+              {{ field.level }}
             </div>
           </div>
           <div
diff --git a/src/modules/14_KPI/components/indicatorByRole/DetailView.vue b/src/modules/14_KPI/components/indicatorByRole/DetailView.vue
index 83245ab23..60abbfbf3 100644
--- a/src/modules/14_KPI/components/indicatorByRole/DetailView.vue
+++ b/src/modules/14_KPI/components/indicatorByRole/DetailView.vue
@@ -371,7 +371,7 @@ onMounted(() => {
               hide-bottom-space
             />
           </div>
-          <div class="col-8" style="height: 340px">
+          <div class="col-4" style="height: 340px">
             <q-card flat bordered>
               <q-card-section class="bg-grey-3 q-pa-sm">
                 <div class="text-dark text-body2 text-weight-medium">
@@ -439,12 +439,12 @@ onMounted(() => {
               </q-card-section>
             </q-card>
           </div>
-          <div class="col-4" style="height: 340px">
+          <div class="col-8" style="height: 340px">
             <q-card flat bordered>
               <q-card-section class="bg-grey-3 q-pa-sm">
                 <div class="row text-dark text-body2 text-weight-medium">
                   <div class="text-center col-4">ระดับคะแนน</div>
-                  <div class="col-8">อ้างอิง</div>
+                  <div class="col-8">ผลสำเร็จของงาน</div>
                 </div>
               </q-card-section>
               <q-card-section class="q-pa-none">
@@ -504,8 +504,8 @@ onMounted(() => {
                         dense
                         outlined
                         class="inputgreen"
-                        label="กรอกข้อความเพื่อไว้ใช้อ้างอิงเท่านั้น"
-                        :rules="[(val:string) => !!val || `${'กรุณากรอกข้อความเพื่อไว้ใช้อ้างอิงเท่านั้น'}`,]"
+                        label="กรอกผลสำเร็จของงาน"
+                        :rules="[(val:string) => !!val || `${'กรุณากรอกผลสำเร็จของงาน'}`,]"
                         hide-bottom-space
                       />
                     </div>