diff --git a/src/modules/08_KPI/components/Tab/01_Assessment.vue b/src/modules/08_KPI/components/Tab/01_Assessment.vue
index 77115fb..98317e2 100644
--- a/src/modules/08_KPI/components/Tab/01_Assessment.vue
+++ b/src/modules/08_KPI/components/Tab/01_Assessment.vue
@@ -4,8 +4,7 @@ import { useQuasar, type QTableProps } from "quasar";
 import { useRoute } from "vue-router";
 
 import DialogListCriteria from "@/modules/08_KPI/components/Tab/Dialog/DialogListCriteria.vue";
-import DialogDevelop from '@/modules/08_KPI/components/Tab/Dialog/DialogDevelop.vue'
-
+import DialogDevelop from "@/modules/08_KPI/components/Tab/Dialog/DialogDevelop.vue";
 
 import config from "@/app.config";
 import http from "@/plugins/http";
@@ -18,7 +17,6 @@ import { useKpiDataStore } from "@/modules/08_KPI/store";
 
 import type { ListCriteria } from "@/modules/08_KPI/interface/request/index";
 
-
 const indicatorScore = defineModel("indicatorScore", {
   type: Number,
   default: 0,
@@ -249,13 +247,13 @@ watch(
 );
 
 function onAdd() {
-  modalDevelop.value = true
-  editDevelop.value = false
+  modalDevelop.value = true;
+  editDevelop.value = false;
 }
 
 function onEdit(id: string) {
-  modalDevelop.value = true
-  editDevelop.value = true
+  modalDevelop.value = true;
+  editDevelop.value = true;
 }
 
 function onDelete(id: string) {}
@@ -462,8 +460,7 @@ onMounted(() => {
     v-model:dataListCriteria="dataListCriteria"
   />
 
-  <DialogDevelop v-model:modal="modalDevelop" v-model:isEdit="editDevelop"/>
-
+  <DialogDevelop v-model:modal="modalDevelop" v-model:isEdit="editDevelop" />
 </template>
 
 <style scoped>
diff --git a/src/modules/08_KPI/components/Tab/DialogEvaluate/01_Indicator.vue b/src/modules/08_KPI/components/Tab/DialogEvaluate/01_Indicator.vue
index 16133de..429d1a7 100644
--- a/src/modules/08_KPI/components/Tab/DialogEvaluate/01_Indicator.vue
+++ b/src/modules/08_KPI/components/Tab/DialogEvaluate/01_Indicator.vue
@@ -126,9 +126,12 @@ function onSubmit() {
   dialogConfirm($q, async () => {
     try {
       showLoader();
+      console.log(rows.value);
+
       const formData = rows.value.map((e: any) => ({
         id: e.id,
         point: e.point,
+        summary: ((e.point / 5) * e.weight).toFixed(2),
       }));
 
       const url =
@@ -183,7 +186,29 @@ function onSubmit() {
               <q-tr :props="props" class="cursor-pointer">
                 <q-td v-for="col in props.cols" :key="col.id">
                   <div v-if="col.name === 'point'">
-                    <q-rating
+                    <q-btn-group outline>
+                      <q-btn
+                        v-for="i in 5"
+                        :class="props.row.point == i && 'active'"
+                        outline
+                        color="grey-6"
+                        :label="i"
+                        @click="
+                          () => {
+                            updateAchievement(props.rowIndex, props.row);
+                            props.row.point = i;
+                          }
+                        "
+                      >
+                        <q-tooltip>
+                          <div class="text-body2">
+                            <span v-html="props.row[`achievement${i}`]"></span>
+                          </div>
+                        </q-tooltip>
+                      </q-btn>
+                    </q-btn-group>
+
+                    <!-- <q-rating
                       v-model="props.row.point"
                       max="5"
                       size="sm"
@@ -209,7 +234,7 @@ function onSubmit() {
                       <template v-slot:tip-5>
                         <q-tooltip>{{ props.row.achievement5 }}</q-tooltip>
                       </template>
-                    </q-rating>
+                    </q-rating> -->
                   </div>
                   <div v-else-if="col.name === 'achievement'">
                     {{ props.row.point ? `ระดับ ${props.row.point}` : "" }}
@@ -283,4 +308,19 @@ function onSubmit() {
     top: 0;
   }
 }
+.q-btn-group--outline > .q-btn-item:not(:last-child):before {
+  border-right: 1px solid #c4c4c4;
+}
+.q-btn-group--outline > .q-btn-item.active {
+  color: #2196f3 !important;
+  background-color: #cde6fb !important;
+}
+.q-btn-group--outline > .q-btn-item + .q-btn-item.active:before {
+  border-left: 1px solid #2196f3 !important;
+  background-color: #cde6fb;
+}
+.q-btn-group--outline > .q-btn-item.active:not(:last-child):before {
+  border: 1px solid #2196f3;
+  background-color: #cde6fb;
+}
 </style>
diff --git a/src/modules/08_KPI/components/Tab/DialogEvaluate/02_Competenct.vue b/src/modules/08_KPI/components/Tab/DialogEvaluate/02_Competenct.vue
index ae6c2a5..9299127 100644
--- a/src/modules/08_KPI/components/Tab/DialogEvaluate/02_Competenct.vue
+++ b/src/modules/08_KPI/components/Tab/DialogEvaluate/02_Competenct.vue
@@ -282,9 +282,14 @@ function onSubmit() {
 }
 .q-btn-group--outline > .q-btn-item.active {
   color: #2196f3 !important;
-  background-color: #fff;
+  background-color: #cde6fb !important;
+}
+.q-btn-group--outline > .q-btn-item + .q-btn-item.active:before {
+  border-left: 1px solid #2196f3 !important;
+  background-color: #cde6fb;
 }
 .q-btn-group--outline > .q-btn-item.active:not(:last-child):before {
   border: 1px solid #2196f3;
+  background-color: #cde6fb;
 }
 </style>
diff --git a/src/modules/08_KPI/components/Tab/Topic/01_Indicator.vue b/src/modules/08_KPI/components/Tab/Topic/01_Indicator.vue
index 5d34234..9508edc 100644
--- a/src/modules/08_KPI/components/Tab/Topic/01_Indicator.vue
+++ b/src/modules/08_KPI/components/Tab/Topic/01_Indicator.vue
@@ -36,14 +36,18 @@ const props = defineProps({
   fetchList: { type: Function, required: true },
 });
 
-const visibleColumns = ref<string[]>([
-  "includingName",
-  "target",
-  "point",
-  "weight",
-  "achievement",
-  "evaluationResults",
-]);
+const visibleColumns = ref<string[]>(
+  store.tabOpen === 3
+    ? [
+        "includingName",
+        "target",
+        "point",
+        "weight",
+        "achievement",
+        "evaluationResults",
+      ]
+    : ["includingName", "target", "weight"]
+);
 const columns = ref<QTableProps["columns"]>([
   {
     name: "includingName",
@@ -124,7 +128,7 @@ function onAdd(edit: boolean = false, id: string = "") {
   isStatusEdit.value = edit;
   kpiUserPlannedId.value = id;
   // if (numpage.value !== 3) {
-    modal.value = true;
+  modal.value = true;
   // } else if (numpage.value == 3) {
   //   modalAssigned.value = true;
   // }
@@ -191,7 +195,10 @@ watch(
         <div class="col">
           <span class="text-weight-medium">{{ title }}</span>
           <q-btn
-            v-if="!isReadonly"
+            v-if="
+              store.dataEvaluation.evaluationStatus === 'NEW' &&
+              store.rolePerson === 'USER'
+            "
             class="q-ml-xs"
             flat
             round
@@ -204,9 +211,12 @@ watch(
             <q-tooltip>เพิ่มข้อมูล</q-tooltip>
           </q-btn>
         </div>
-        <!-- <div class="col-auto">
+        <div class="col-auto">
           <q-btn
-            v-if="!isReadonly"
+            v-if="
+              store.rolePerson === 'USER' &&
+              store.dataEvaluation.evaluationStatus === 'EVALUATING'
+            "
             flat
             round
             icon="mdi-clipboard-check-outline"
@@ -217,7 +227,7 @@ watch(
           >
             <q-tooltip>ประเมิน</q-tooltip>
           </q-btn>
-        </div> -->
+        </div>
       </div>
     </q-card-section>
     <q-separator />
@@ -242,14 +252,35 @@ watch(
             <q-th v-for="col in props.cols" :key="col.name" :props="props">
               <span class="text-weight-medium">{{ col.label }}</span>
             </q-th>
-            <q-th auto-width v-if="!isReadonly" />
+            <q-th
+              auto-width
+              v-if="
+                store.dataEvaluation.evaluationStatus === 'NEW' &&
+                store.rolePerson === 'USER'
+              "
+            />
           </q-tr>
         </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 v-if="col.name === 'point'">
-                <q-rating
+                <q-btn-group outline>
+                  <q-btn
+                    v-for="i in 5"
+                    :class="props.row.point == i && 'active'"
+                    outline
+                    color="grey-6"
+                    :label="i"
+                  >
+                    <q-tooltip>
+                      <div class="text-body2">
+                        <span v-html="props.row[`achievement${i}`]"></span>
+                      </div>
+                    </q-tooltip>
+                  </q-btn>
+                </q-btn-group>
+                <!-- <q-rating
                   v-model="props.row.point"
                   max="5"
                   size="sm"
@@ -273,7 +304,7 @@ watch(
                   <template v-slot:tip-5>
                     <q-tooltip>{{ props.row.achievement5 }}</q-tooltip>
                   </template>
-                </q-rating>
+                </q-rating> -->
               </div>
               <div v-else-if="col.name === 'achievement'">
                 {{ props.row.point ? `ระดับ ${props.row.point}` : "" }}
@@ -289,7 +320,12 @@ watch(
                 {{ col.value ? col.value : "-" }}
               </div>
             </q-td>
-            <td v-if="!isReadonly">
+            <td
+              v-if="
+                store.dataEvaluation.evaluationStatus === 'NEW' &&
+                store.rolePerson === 'USER'
+              "
+            >
               <q-btn
                 flat
                 round
@@ -338,7 +374,7 @@ watch(
     :isStatusEdit="isStatusEdit"
     :kpiUserPlannedId="kpiUserPlannedId"
   />
-  
+
   <!-- <Dialog03
     v-model:modal="modalAssigned"
     :numpage="numpage"
@@ -346,11 +382,11 @@ watch(
     :kpiUserPlannedId="kpiUserPlannedId"
   /> -->
 
-  <!-- <DialogEvaluate
+  <DialogEvaluate
     v-model:modal="modalEvaluate"
     :data="rows"
     :numpage="numpage"
-  /> -->
+  />
 </template>
 <style scoped>
 .custom-table2 {
@@ -393,4 +429,19 @@ watch(
     top: 0;
   }
 }
+.q-btn-group--outline > .q-btn-item:not(:last-child):before {
+  border-right: 1px solid #c4c4c4;
+}
+.q-btn-group--outline > .q-btn-item.active {
+  color: #2196f3 !important;
+  background-color: #cde6fb !important;
+}
+.q-btn-group--outline > .q-btn-item + .q-btn-item.active:before {
+  border-left: 1px solid #2196f3 !important;
+  background-color: #cde6fb;
+}
+.q-btn-group--outline > .q-btn-item.active:not(:last-child):before {
+  border: 1px solid #2196f3;
+  background-color: #cde6fb;
+}
 </style>
diff --git a/src/modules/08_KPI/components/Tab/Topic/02_Competency.vue b/src/modules/08_KPI/components/Tab/Topic/02_Competency.vue
index 9963619..27abba3 100644
--- a/src/modules/08_KPI/components/Tab/Topic/02_Competency.vue
+++ b/src/modules/08_KPI/components/Tab/Topic/02_Competency.vue
@@ -230,7 +230,10 @@ onMounted(() => {
           <div class="col">
             <span class="text-weight-medium">{{ item.name }}</span>
             <q-btn
-              v-if="!isReadonly"
+              v-if="
+                store.dataEvaluation.evaluationStatus === 'NEW' &&
+                store.rolePerson === 'USER'
+              "
               class="q-ml-xs"
               flat
               round
@@ -246,7 +249,7 @@ onMounted(() => {
 
           <q-space />
           <q-btn
-            v-if="!isReadonly"
+            v-if="store.dataEvaluation.evaluationStatus == 'EVALUATING'"
             flat
             round
             icon="mdi-clipboard-check-outline"
@@ -279,7 +282,13 @@ onMounted(() => {
               <q-th v-for="col in props.cols" :key="col.name" :props="props">
                 <span class="text-weight-medium">{{ col.label }}</span>
               </q-th>
-              <q-th auto-width v-if="!isReadonly" />
+              <q-th
+                auto-width
+                v-if="
+                  store.dataEvaluation.evaluationStatus === 'NEW' &&
+                  store.rolePerson === 'USER'
+                "
+              />
             </q-tr>
           </template>
           <template v-slot:body="props">
@@ -341,7 +350,12 @@ onMounted(() => {
                   {{ col.value }}
                 </div>
               </q-td>
-              <q-td v-if="!isReadonly">
+              <q-td
+                v-if="
+                  store.dataEvaluation.evaluationStatus === 'NEW' &&
+                  store.rolePerson === 'USER'
+                "
+              >
                 <q-btn
                   flat
                   round
@@ -430,9 +444,14 @@ onMounted(() => {
 }
 .q-btn-group--outline > .q-btn-item.active {
   color: #2196f3 !important;
-  background-color: #fff;
+  background-color: #cde6fb !important;
+}
+.q-btn-group--outline > .q-btn-item + .q-btn-item.active:before {
+  border-left: 1px solid #2196f3 !important;
+  background-color: #cde6fb;
 }
 .q-btn-group--outline > .q-btn-item.active:not(:last-child):before {
   border: 1px solid #2196f3;
+  background-color: #cde6fb;
 }
 </style>