diff --git a/src/modules/08_KPI/components/Tab/Dialog/01_FormIndicator.vue b/src/modules/08_KPI/components/Tab/Dialog/01_FormIndicator.vue
index 8ba2df3..1cbfc74 100644
--- a/src/modules/08_KPI/components/Tab/Dialog/01_FormIndicator.vue
+++ b/src/modules/08_KPI/components/Tab/Dialog/01_FormIndicator.vue
@@ -28,6 +28,7 @@ const {
 const modal = defineModel<boolean>("modal", { required: true });
 const numpage = defineModel<number>("numpage", { required: true });
 const isStatusEdit = defineModel<boolean>("isStatusEdit", { required: true });
+const checkDetail = defineModel<boolean>("checkDetail", { required: true });
 const kpiUserPlannedId = defineModel<string>("kpiUserPlannedId", {
   required: true,
 });
@@ -252,51 +253,53 @@ function fetchspecialByid(id: string) {
 }
 
 function clickList(id: string, isData: boolean = false) {
-  showLoader();
-  const url =
-    numpage.value === 1
-      ? config.API.kpiPlan
-      : numpage.value === 2
-      ? config.API.kpiRole
-      : config.API.kpiSpecial;
-  http
-    .get(`${url}/${id}`)
-    .then((res) => {
-      listCheckID.value = id;
-      const data = res.data.result;
-      if (!isData) {
-        formDetail.target = data.target;
-        formDetail.unit = data.unit;
-        formDetail.weight = data.weight;
-        formDetail.meaning = data.meaning;
-        formDetail.formula = data.formula;
-        formDetail.achievement1 = data.achievement1;
-        formDetail.achievement2 = data.achievement2;
-        formDetail.achievement3 = data.achievement3;
-        formDetail.achievement4 = data.achievement4;
-        formDetail.achievement5 = data.achievement5;
-      }
-      formDetail.orgRevisionId = data.corgRevisionId;
-      formDetail.id = data.id;
-      formDetail.year = data.year;
-      formDetail.round = data.round;
-      formDetail.kpiPeriodId = data.kpiPeriodId;
-      formDetail.includingName = data.includingName;
-      formDetail.including = data.including;
-      formDetail.node = data.node;
-      formDetail.nodeId = data.nodeId;
-      formDetail.nodeName = data.nodeName;
-      formDetail.strategy = data.strategy;
-      formDetail.strategyId = data.strategyId;
-      formDetail.strategyName = data.strategyName;
-      formDetail.documentInfoEvidence = data.documentInfoEvidence;
-    })
-    .catch((err) => {
-      messageError($q, err);
-    })
-    .finally(() => {
-      hideLoader();
-    });
+  if (!checkDetail.value) {
+    showLoader();
+    const url =
+      numpage.value === 1
+        ? config.API.kpiPlan
+        : numpage.value === 2
+        ? config.API.kpiRole
+        : config.API.kpiSpecial;
+    http
+      .get(`${url}/${id}`)
+      .then((res) => {
+        listCheckID.value = id;
+        const data = res.data.result;
+        if (!isData) {
+          formDetail.target = data.target;
+          formDetail.unit = data.unit;
+          formDetail.weight = data.weight;
+          formDetail.meaning = data.meaning;
+          formDetail.formula = data.formula;
+          formDetail.achievement1 = data.achievement1;
+          formDetail.achievement2 = data.achievement2;
+          formDetail.achievement3 = data.achievement3;
+          formDetail.achievement4 = data.achievement4;
+          formDetail.achievement5 = data.achievement5;
+        }
+        formDetail.orgRevisionId = data.corgRevisionId;
+        formDetail.id = data.id;
+        formDetail.year = data.year;
+        formDetail.round = data.round;
+        formDetail.kpiPeriodId = data.kpiPeriodId;
+        formDetail.includingName = data.includingName;
+        formDetail.including = data.including;
+        formDetail.node = data.node;
+        formDetail.nodeId = data.nodeId;
+        formDetail.nodeName = data.nodeName;
+        formDetail.strategy = data.strategy;
+        formDetail.strategyId = data.strategyId;
+        formDetail.strategyName = data.strategyName;
+        formDetail.documentInfoEvidence = data.documentInfoEvidence;
+      })
+      .catch((err) => {
+        messageError($q, err);
+      })
+      .finally(() => {
+        hideLoader();
+      });
+  }
 }
 
 /** ปิด dialog */
@@ -337,6 +340,9 @@ function closeDialog() {
   formFilter.year = null;
   formFilter.page = 1;
   formFilter.pageSize = 20;
+
+  isStatusEdit.value = false;
+  checkDetail.value = false;
 }
 
 function onSubmit() {
@@ -420,12 +426,15 @@ watch(
       if (numpage.value === 1) {
         fetchListPlan();
         isStatusEdit.value && fetchListPlanByid(kpiUserPlannedId.value);
+        checkDetail.value && fetchListPlanByid(kpiUserPlannedId.value);
       } else if (numpage.value === 2) {
         fetchListRole();
         isStatusEdit.value && fetchRoleByid(kpiUserPlannedId.value);
+        checkDetail.value && fetchRoleByid(kpiUserPlannedId.value);
       } else if (numpage.value === 3) {
         fetchListSpecial();
         isStatusEdit.value && fetchspecialByid(kpiUserPlannedId.value);
+        checkDetail.value && fetchspecialByid(kpiUserPlannedId.value);
       }
     }
   }
@@ -454,7 +463,14 @@ const title = computed(() => {
   <q-dialog v-model="modal" persistent>
     <q-card class="col-12" style="width: 100%">
       <q-form greedy @submit.prevent @validation-success="onSubmit">
-        <DialogHeader :tittle="title" :close="closeDialog" />
+        <DialogHeader
+          :tittle="
+            checkDetail
+              ? `รายละเอียดตัวชี้วัดตามแผนปฏิบัติราชการประจําปี`
+              : `${title}`
+          "
+          :close="closeDialog"
+        />
         <q-separator />
 
         <q-card-section class="q-pa-none scroll" style="max-height: 75vh">
@@ -463,6 +479,7 @@ const title = computed(() => {
               <div class="col-12 fit">
                 <div class="row col-12" v-if="numpage !== 3">
                   <q-checkbox
+                  :disable="checkDetail"
                     v-model="formFilter.isAll"
                     label="แสดงตัวชี้วัดภายใต้หน่วยงาน/ส่วนราชการทุกระดับ"
                     @update:model-value="fetchNewList()"
@@ -471,6 +488,7 @@ const title = computed(() => {
                 <div class="row q-col-gutter-sm col-12">
                   <div class="col-5">
                     <datepicker
+                    :readonly="checkDetail"
                       menu-class-name="modalfix"
                       v-model="formFilter.year"
                       :locale="'th'"
@@ -487,6 +505,7 @@ const title = computed(() => {
                         <q-input
                           dense
                           outlined
+                          :readonly="checkDetail"
                           :model-value="
                             formFilter.year === null || formFilter.year === ''
                               ? null
@@ -519,6 +538,7 @@ const title = computed(() => {
                   <div class="col-7">
                     <q-select
                       dense
+                      :readonly="checkDetail"
                       outlined
                       v-model="formFilter.period"
                       :options="roundOp"
@@ -539,6 +559,7 @@ const title = computed(() => {
                     v-model="formFilter.keyword"
                     outlined
                     dense
+                    :readonly="checkDetail"
                     label="ค้นหา"
                     @keydown.enter.prevent="fetchNewList()"
                   >
@@ -572,6 +593,7 @@ const title = computed(() => {
                         :active="listCheckID === item.id"
                         active-class="my-menu-link"
                         @click="clickList(item.id)"
+                         :style="checkDetail ? 'pointer-events: none;' : ''"
                       >
                         <q-item-section class="q-pa-none">
                           <div
@@ -599,7 +621,6 @@ const title = computed(() => {
                         active-color="primary"
                         color="dark"
                         :max="Number(maxPage)"
-                        size="sm"
                         boundary-links
                         direction-links
                         :max-pages="5"
@@ -642,6 +663,7 @@ const title = computed(() => {
                           <q-input
                             v-if="numpage === 3"
                             outlined
+                            :readonly="checkDetail"
                             v-model="formDetail.including"
                             bg-color="white"
                             dense
@@ -663,6 +685,7 @@ const title = computed(() => {
                           <q-input
                             v-if="numpage === 3"
                             outlined
+                            :readonly="checkDetail"
                             v-model="formDetail.includingName"
                             bg-color="white"
                             dense
@@ -683,6 +706,7 @@ const title = computed(() => {
                             outlined
                             v-model="formDetail.target"
                             bg-color="white"
+                            :readonly="checkDetail"
                             dense
                             class="inputgreen"
                             :rules="[
@@ -700,6 +724,7 @@ const title = computed(() => {
                             outlined
                             v-model="formDetail.unit"
                             bg-color="white"
+                            :readonly="checkDetail"
                             dense
                             class="inputgreen"
                             :rules="[
@@ -718,6 +743,7 @@ const title = computed(() => {
                             outlined
                             v-model="formDetail.weight"
                             bg-color="white"
+                            :readonly="checkDetail"
                             dense
                             class="inputgreen"
                             :rules="[
@@ -749,6 +775,7 @@ const title = computed(() => {
                           v-model="formDetail.achievement5"
                           outlined
                           dense
+                          :readonly="checkDetail"
                           :rules="[(val:string) => !!val || `${'กรุณากรอกผลสำเร็จของงาน'}`,]"
                           hide-bottom-space
                           class="inputgreen"
@@ -763,6 +790,7 @@ const title = computed(() => {
                         <q-input
                           v-model="formDetail.achievement4"
                           outlined
+                          :readonly="checkDetail"
                           dense
                           :rules="[(val:string) => !!val || `${'กรุณากรอกผลสำเร็จของงาน'}`,]"
                           hide-bottom-space
@@ -778,6 +806,7 @@ const title = computed(() => {
                         <q-input
                           v-model="formDetail.achievement3"
                           outlined
+                          :readonly="checkDetail"
                           dense
                           :rules="[(val:string) => !!val || `${'กรุณากรอกผลสำเร็จของงาน'}`,]"
                           hide-bottom-space
@@ -793,6 +822,7 @@ const title = computed(() => {
                         <q-input
                           v-model="formDetail.achievement2"
                           outlined
+                          :readonly="checkDetail"
                           dense
                           :rules="[(val:string) => !!val || `${'กรุณากรอกผลสำเร็จของงาน'}`,]"
                           hide-bottom-space
@@ -808,6 +838,7 @@ const title = computed(() => {
                         <q-input
                           v-model="formDetail.achievement1"
                           outlined
+                          :readonly="checkDetail"
                           dense
                           :rules="[(val:string) => !!val || `${'กรุณากรอกผลสำเร็จของงาน'}`,]"
                           hide-bottom-space
@@ -823,6 +854,7 @@ const title = computed(() => {
                     v-model="formDetail.meaning"
                     label="นิยามหรือความหมายของตัวชี้วัด"
                     type="textarea"
+                    :readonly="checkDetail"
                     outlined
                     dense
                     :rules="[(val:string) => !!val || `${'กรุณากรอกตัวชี้วัด'}`,]"
@@ -836,6 +868,7 @@ const title = computed(() => {
                   <q-input
                     v-model="formDetail.formula"
                     label="สูตรคำนวณ"
+                    :readonly="checkDetail"
                     type="textarea"
                     outlined
                     dense
@@ -852,6 +885,7 @@ const title = computed(() => {
                     label="ข้อมูลเอกสารหลักฐาน"
                     type="textarea"
                     outlined
+                    :readonly="checkDetail"
                     dense
                     :rules="[(val:string) => !!val || `${'กรุณากรอกข้อมูลเอกสารหลักฐาน'}`,]"
                     hide-bottom-space
@@ -863,6 +897,7 @@ const title = computed(() => {
                   <datepicker
                     v-model="formDetail.startDate"
                     :locale="'th'"
+                    :readonly="checkDetail"
                     autoApply
                     :enableTimePicker="false"
                     week-start="0"
@@ -876,6 +911,7 @@ const title = computed(() => {
                       <q-input
                         dense
                         outlined
+                        :readonly="checkDetail"
                         class="inputgreen"
                         :model-value="
                           formDetail.startDate
@@ -909,6 +945,7 @@ const title = computed(() => {
                   <datepicker
                     v-model="formDetail.endDate"
                     :locale="'th'"
+                    :readonly="checkDetail"
                     autoApply
                     :enableTimePicker="false"
                     week-start="0"
@@ -923,6 +960,7 @@ const title = computed(() => {
                         dense
                         outlined
                         class="inputgreen"
+                        :readonly="checkDetail"
                         :model-value="
                           formDetail.endDate
                             ? date2Thai(formDetail.endDate)
@@ -955,9 +993,9 @@ const title = computed(() => {
             </div>
           </div>
         </q-card-section>
-        <q-separator />
+        <q-separator v-if="!checkDetail"/>
 
-        <q-card-actions align="right" class="bg-white text-teal">
+        <q-card-actions v-if="!checkDetail" align="right" class="bg-white text-teal">
           <q-btn label="บันทึก" color="secondary" type="submit"
             ><q-tooltip>บันทึกข้อมูล</q-tooltip></q-btn
           >
diff --git a/src/modules/08_KPI/components/Tab/Dialog/04_FormCompetency.vue b/src/modules/08_KPI/components/Tab/Dialog/04_FormCompetency.vue
index 17cd626..4d12338 100644
--- a/src/modules/08_KPI/components/Tab/Dialog/04_FormCompetency.vue
+++ b/src/modules/08_KPI/components/Tab/Dialog/04_FormCompetency.vue
@@ -574,9 +574,9 @@ watch(
             </div>
           </div>
         </q-card-section>
-        <q-separator />
+        <q-separator v-if="competencyType !== 'HEAD' && competencyType !== 'GROUP'"/>
 
-        <q-card-actions align="right" class="bg-white text-teal">
+        <q-card-actions v-if="competencyType !== 'HEAD' && competencyType !== 'GROUP'" align="right" class="bg-white text-teal">
           <q-btn label="บันทึก" color="secondary" type="submit"
             ><q-tooltip>บันทึกข้อมูล</q-tooltip></q-btn
           >
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 1d4fc2b..a48678a 100644
--- a/src/modules/08_KPI/components/Tab/Topic/01_Indicator.vue
+++ b/src/modules/08_KPI/components/Tab/Topic/01_Indicator.vue
@@ -16,7 +16,7 @@ import DialogProblem from "@/modules/08_KPI/components/Tab/Dialog/DialogCommentP
 
 import { useCounterMixin } from "@/stores/mixin";
 import { useKpiDataStore } from "@/modules/08_KPI/store";
-
+const checkDetail = ref<boolean>(false);
 const $q = useQuasar();
 const store = useKpiDataStore();
 const route = useRoute();
@@ -137,8 +137,9 @@ function onAdd(edit: boolean = false, id: string = "") {
 }
 
 function onClickView(id: string) {
+  checkDetail.value = true;
   kpiUserPlannedId.value = id;
-  modalViewInfo.value = true;
+  modal.value = true;
 }
 
 async function onEvaluate() {
@@ -250,7 +251,6 @@ const isEditStep3 = computed(() => {
             round
             icon="mdi-plus"
             color="primary"
-            size="12px"
             dense
             @click="onAdd()"
           >
@@ -264,7 +264,6 @@ const isEditStep3 = computed(() => {
             round
             icon="mdi-clipboard-check-outline"
             color="blue-5"
-            size="12px"
             dense
             @click="onEvaluate"
           >
@@ -306,11 +305,10 @@ const isEditStep3 = computed(() => {
                 round
                 icon="mdi-eye"
                 color="info"
-                size="12px"
                 dense
                 @click="onClickView(props.row.id)"
               >
-                <q-tooltip>คำอธิบายผลสำเร็จของงาน</q-tooltip>
+                <q-tooltip>รายละเอียด</q-tooltip>
               </q-btn></q-td
             >
             <q-td v-for="col in props.cols" :key="col.id">
@@ -334,7 +332,10 @@ const isEditStep3 = computed(() => {
               <div v-else-if="col.name === 'achievement'">
                 {{ props.row.point ? `ระดับ ${props.row.point}` : "" }}
               </div>
-              <div v-else-if="col.name === 'includingName'" style="width: 200px; white-space: normal;">
+              <div
+                v-else-if="col.name === 'includingName'"
+                style="width: 200px; white-space: normal"
+              >
                 {{ props.row.includingName ? props.row.includingName : "-" }}
               </div>
               <div v-else-if="col.name === 'evaluationResults'">
@@ -361,7 +362,6 @@ const isEditStep3 = computed(() => {
                   round
                   icon="mdi-developer-board"
                   color="blue-6"
-                  size="12px"
                   dense
                   @click="openPopupProgress(props.row.id)"
                 >
@@ -372,7 +372,6 @@ const isEditStep3 = computed(() => {
                   round
                   icon="warning"
                   color="red-5"
-                  size="12px"
                   dense
                   main="problem"
                   @click="openPopupProblem(props.row.id)"
@@ -387,7 +386,6 @@ const isEditStep3 = computed(() => {
                   round
                   icon="edit"
                   color="edit"
-                  size="12px"
                   dense
                   @click="onAdd(true, props.row.id)"
                 >
@@ -399,7 +397,6 @@ const isEditStep3 = computed(() => {
                   round
                   icon="delete"
                   color="red"
-                  size="12px"
                   dense
                   @click="onDelete(props.row.id)"
                 >
@@ -418,7 +415,6 @@ const isEditStep3 = computed(() => {
                   round
                   icon="info"
                   color="info"
-                  size="14px"
                   @click="onClickView(props.row.id)"
                 >
                   <q-tooltip>คำอธิบายผลสำเร็จของงาน</q-tooltip>
@@ -451,7 +447,6 @@ const isEditStep3 = computed(() => {
                   round
                   icon="mdi-developer-board"
                   color="blue-6"
-                  size="12px"
                   dense
                   @click="openPopupProgress(props.row.id)"
                 >
@@ -462,7 +457,6 @@ const isEditStep3 = computed(() => {
                   round
                   icon="warning"
                   color="red-5"
-                  size="12px"
                   dense
                   main="problem"
                   @click="openPopupProblem(props.row.id)"
@@ -477,7 +471,6 @@ const isEditStep3 = computed(() => {
                   round
                   icon="edit"
                   color="edit"
-                  size="12px"
                   dense
                   @click="onAdd(true, props.row.id)"
                 >
@@ -489,7 +482,6 @@ const isEditStep3 = computed(() => {
                   round
                   icon="delete"
                   color="red"
-                  size="12px"
                   dense
                   @click="onDelete(props.row.id)"
                 >
@@ -506,7 +498,8 @@ const isEditStep3 = computed(() => {
   <Dialog
     v-model:modal="modal"
     :numpage="numpage"
-    :isStatusEdit="isStatusEdit"
+    v-model:isStatusEdit="isStatusEdit"
+    v-model:checkDetail="checkDetail"
     :kpiUserPlannedId="kpiUserPlannedId"
   />
 
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 665d8e0..1ffba9c 100644
--- a/src/modules/08_KPI/components/Tab/Topic/02_Competency.vue
+++ b/src/modules/08_KPI/components/Tab/Topic/02_Competency.vue
@@ -310,7 +310,6 @@ onMounted(() => {
               round
               icon="mdi-plus"
               color="primary"
-              size="12px"
               dense
               @click="onAdd(item.id)"
             >
@@ -325,7 +324,6 @@ onMounted(() => {
             round
             icon="mdi-clipboard-check-outline"
             color="blue-5"
-            size="12px"
             dense
             @click="onEvaluate(item.id)"
           >
@@ -372,14 +370,19 @@ onMounted(() => {
             <q-tr :props="props" class="cursor-pointer">
               <q-td auto-width>
                 <q-btn
+                  v-if="isEditStep1"
                   flat
-                  icon="mdi-eye"
-                  color="info"
                   round
-                  class="q-ml-xs"
-                  @click="onAchievement(props.row.achievement)"
+                  :icon="
+                    item.id == 'HEAD' || item.id == 'GROUP' ? 'mdi-eye' : 'edit'
+                  "
+                  color="info"
+                  @click.stop.pervent="onEdit(props.row, item.id)"
                 >
-                  <q-tooltip>พฤติกรรมที่คาดหวัง/พฤติกรรมย่อย</q-tooltip>
+                  <q-tooltip v-if="item.id == 'HEAD' || item.id == 'GROUP'"
+                    >รายละเอียด</q-tooltip
+                  >
+                  <q-tooltip v-else>แก้ไข</q-tooltip>
                 </q-btn>
               </q-td>
               <q-td v-for="col in props.cols" :key="col.id">
@@ -438,7 +441,6 @@ onMounted(() => {
                     round
                     icon="mdi-account-details"
                     color="blue-6"
-                    size="12px"
                     dense
                     @click="openPopupProgress(props.row.id)"
                   >
@@ -447,22 +449,6 @@ onMounted(() => {
                 </div>
 
                 <div v-if="isEditStep1">
-                  <q-btn
-                    flat
-                    round
-                    :icon="
-                      item.id == 'HEAD' || item.id == 'GROUP'
-                        ? 'mdi-eye'
-                        : 'edit'
-                    "
-                    color="info"
-                    @click.stop.pervent="onEdit(props.row, item.id)"
-                  >
-                    <q-tooltip v-if="item.id == 'HEAD' || item.id == 'GROUP'"
-                      >ดูรายละเอียด</q-tooltip
-                    >
-                    <q-tooltip v-else>แก้ไข</q-tooltip>
-                  </q-btn>
                   <q-btn
                     flat
                     round
@@ -532,7 +518,6 @@ onMounted(() => {
                     round
                     icon="mdi-developer-board"
                     color="blue-6"
-                    size="12px"
                     dense
                     @click="openPopupProgress(props.row.id)"
                   >
@@ -543,7 +528,6 @@ onMounted(() => {
                     round
                     icon="warning"
                     color="red-5"
-                    size="12px"
                     dense
                     main="problem"
                     @click="openPopupProblem(props.row.id)"