diff --git a/src/modules/14_KPI/components/Tab/05_File.vue b/src/modules/14_KPI/components/Tab/05_File.vue
index 01712d33b..fe190cb44 100644
--- a/src/modules/14_KPI/components/Tab/05_File.vue
+++ b/src/modules/14_KPI/components/Tab/05_File.vue
@@ -10,6 +10,7 @@ import { useRoute } from "vue-router";
 
 const $q = useQuasar();
 const route = useRoute();
+const checkRoutePermisson = ref<boolean>(route.name == "KPIDetailPage");
 const id = ref<string>(route.params.id ? route.params.id.toString() : "");
 const {
   dialogConfirm,
@@ -158,6 +159,7 @@ onMounted(() => {
       <div class="row col-12 q-col-gutter-y-sm q-pa-sm">
         <div class="col-12 row">
           <q-file
+            :readonly="checkRoutePermisson"
             for="inputFiles"
             class="col-12"
             outlined
@@ -213,7 +215,7 @@ onMounted(() => {
                 >
 
                 <q-btn
-                  v-if="!isReadonly"
+                  v-if="!isReadonly &&!checkRoutePermisson"
                   size="12px"
                   flat
                   round
diff --git a/src/modules/14_KPI/components/Tab/Dialog/DialogCommentProgress.vue b/src/modules/14_KPI/components/Tab/Dialog/DialogCommentProgress.vue
index 41cb9b0fb..6514c6334 100644
--- a/src/modules/14_KPI/components/Tab/Dialog/DialogCommentProgress.vue
+++ b/src/modules/14_KPI/components/Tab/Dialog/DialogCommentProgress.vue
@@ -17,6 +17,8 @@ import { useKpiDataStore } from "@/modules/14_KPI/store";
 const numLevel = ref<string>("");
 const store = useKpiDataStore();
 const $q = useQuasar();
+const route = useRoute();
+const checkRoutePermisson = ref<boolean>(route.name == "KPIDetailPage");
 const mixin = useCounterMixin();
 const {
   dialogConfirm,
@@ -254,9 +256,10 @@ watch(
               <div class="q-pa-sm">
                 <q-btn
                   v-if="
-                    type == 'capacity' ||
-                    type == 'development' ||
-                    (type != 'capacity' &&
+                    (!checkRoutePermisson && type == 'capacity') ||
+                    (!checkRoutePermisson && type == 'development') ||
+                    (!checkRoutePermisson &&
+                      type != 'capacity' &&
                       type != 'development' &&
                       store.rolePerson == 'USER')
                   "
@@ -407,6 +410,7 @@ watch(
                             outlined
                             dense
                             :readonly="
+                              checkRoutePermisson ||
                               formDataView.reasonEvaluator !== null ||
                               store.rolePerson !== 'EVALUATOR'
                             "
@@ -422,6 +426,7 @@ watch(
 
                         <div
                           v-if="
+                            !checkRoutePermisson &&
                             formDataView.reasonEvaluator == null &&
                             store.rolePerson == 'EVALUATOR'
                           "
@@ -463,6 +468,7 @@ watch(
                             class="inputgreen"
                             lazy-rules
                             :readonly="
+                              checkRoutePermisson ||
                               formDataView.reasonCommander !== null ||
                               store.rolePerson !== 'COMMANDER'
                             "
@@ -473,6 +479,7 @@ watch(
 
                         <div
                           v-if="
+                            !checkRoutePermisson &&
                             formDataView.reasonCommander == null &&
                             store.rolePerson == 'COMMANDER'
                           "
@@ -513,6 +520,7 @@ watch(
                             class="inputgreen"
                             lazy-rules
                             :readonly="
+                              checkRoutePermisson ||
                               formDataView.reasonCommanderHigh !== null ||
                               store.rolePerson !== 'COMMANDERHIGH'
                             "
@@ -523,6 +531,7 @@ watch(
 
                         <div
                           v-if="
+                            !checkRoutePermisson &&
                             formDataView.reasonCommanderHigh == null &&
                             store.rolePerson == 'COMMANDERHIGH'
                           "
diff --git a/src/modules/14_KPI/components/Tab/Topic/01_Indicator.vue b/src/modules/14_KPI/components/Tab/Topic/01_Indicator.vue
index 0092fc472..7410a026d 100644
--- a/src/modules/14_KPI/components/Tab/Topic/01_Indicator.vue
+++ b/src/modules/14_KPI/components/Tab/Topic/01_Indicator.vue
@@ -20,6 +20,7 @@ import { useKpiDataStore } from "@/modules/14_KPI/store";
 const $q = useQuasar();
 const store = useKpiDataStore();
 const route = useRoute();
+const checkRoutePermisson = ref<boolean>(route.name == "KPIDetailPage");
 const {
   date2Thai,
   dialogRemove,
@@ -245,7 +246,7 @@ const isEditStep3 = computed(() => {
         <div class="col">
           <span class="text-weight-medium">{{ title }}</span>
           <q-btn
-            v-if="isEditStep1"
+            v-if="isEditStep1 && !checkRoutePermisson"
             class="q-ml-xs"
             flat
             round
@@ -260,7 +261,7 @@ const isEditStep3 = computed(() => {
         </div>
         <div class="col-auto">
           <q-btn
-            v-if="isEditStep3"
+            v-if="isEditStep3 && !checkRoutePermisson"
             flat
             round
             icon="mdi-clipboard-check-outline"
@@ -303,6 +304,7 @@ const isEditStep3 = computed(() => {
           <q-tr :props="props" class="cursor-pointer">
             <q-td>
               <q-btn
+              v-if="isEditStep1"
                 flat
                 round
                 icon="mdi-eye"
@@ -372,6 +374,7 @@ const isEditStep3 = computed(() => {
                   <q-tooltip>รายงานความก้าวหน้า</q-tooltip>
                 </q-btn>
                 <q-btn
+                v-if="!checkRoutePermisson"
                   flat
                   round
                   icon="warning"
@@ -385,7 +388,7 @@ const isEditStep3 = computed(() => {
                 </q-btn>
               </div>
 
-              <div v-if="isEditStep1">
+              <div v-if="isEditStep1 && !checkRoutePermisson">
                 <q-btn
                   flat
                   round
@@ -413,7 +416,7 @@ const isEditStep3 = computed(() => {
             </td>
           </q-tr>
         </template>
-        <template #item="props">
+        <!-- <template #item="props">
           <div class="q-pa-xs col-xs-12 col-sm-6 col-md-4 col-lg-3">
             <q-card bordered flat>
               <div class="row justify-end">
@@ -425,7 +428,7 @@ const isEditStep3 = computed(() => {
                   size="14px"
                   @click="onClickView(props.row.id)"
                 >
-                  <q-tooltip>คำอธิบายผลสำเร็จของงาน</q-tooltip>
+                  <q-tooltip>รายละเอียด</q-tooltip>
                 </q-btn>
               </div>
 
@@ -502,7 +505,7 @@ const isEditStep3 = computed(() => {
               </q-card-actions>
             </q-card>
           </div>
-        </template>
+        </template> -->
       </d-table>
     </q-card-section>
   </q-card>
diff --git a/src/modules/14_KPI/components/Tab/Topic/02_Competency.vue b/src/modules/14_KPI/components/Tab/Topic/02_Competency.vue
index dd74baaa2..3e5cd092a 100644
--- a/src/modules/14_KPI/components/Tab/Topic/02_Competency.vue
+++ b/src/modules/14_KPI/components/Tab/Topic/02_Competency.vue
@@ -39,6 +39,7 @@ const modalEvaluate = ref<boolean>(false);
 const store = useKpiDataStore();
 
 const route = useRoute();
+const checkRoutePermisson = ref<boolean>(route.name == "KPIDetailPage");
 const id = ref<string>(route.params.id as string);
 const isReadonly = <boolean>(route.name === "KPIEditEvaluator" ? true : false);
 
@@ -324,7 +325,7 @@ onMounted(() => {
           <div class="col">
             <span class="text-weight-medium">{{ item.name }}</span>
             <q-btn
-              v-if="isEditStep1 && item.id != 'HEAD' && item.id != 'GROUP'"
+              v-if="!checkRoutePermisson && isEditStep1 && item.id != 'HEAD' && item.id != 'GROUP'"
               class="q-ml-xs"
               flat
               round
@@ -340,7 +341,7 @@ onMounted(() => {
 
           <q-space />
           <q-btn
-            v-if="isEditStep3"
+            v-if="!checkRoutePermisson && isEditStep3"
             flat
             round
             icon="mdi-clipboard-check-outline"
@@ -471,7 +472,7 @@ onMounted(() => {
                   </q-btn>
                 </div>
 
-                <div v-if="isEditStep1">
+                <div v-if="isEditStep1 && !checkRoutePermisson">
                   <q-btn
                     flat
                     round
@@ -485,7 +486,7 @@ onMounted(() => {
               </q-td>
             </q-tr>
           </template>
-          <template #item="props">
+          <!-- <template #item="props">
             <div class="q-pa-xs col-xs-12 col-sm-6 col-md-4 col-lg-3">
               <q-card bordered flat>
                 <q-list>
@@ -583,7 +584,7 @@ onMounted(() => {
                 </q-card-actions>
               </q-card>
             </div>
-          </template>
+          </template> -->
         </d-table>
       </q-card-section>
     </q-card>
diff --git a/src/modules/14_KPI/components/Tab/Topic/03_Develop.vue b/src/modules/14_KPI/components/Tab/Topic/03_Develop.vue
index 495e75c63..42aea7964 100644
--- a/src/modules/14_KPI/components/Tab/Topic/03_Develop.vue
+++ b/src/modules/14_KPI/components/Tab/Topic/03_Develop.vue
@@ -16,7 +16,7 @@ const store = useKpiDataStore();
 const route = useRoute();
 const evaluationId = ref<string>(route.params.id.toString());
 const modalEvaluate = ref<boolean>(false);
-
+const checkRoutePermisson = ref<boolean>(route.name == "KPIDetailPage");
 const rows = ref<any[]>([]);
 const modalDevelop = ref<boolean>(false);
 const idEditDevelop = ref<string>("");
@@ -106,8 +106,8 @@ const columns = ref<QTableProps["columns"]>([
 
 const visibleColumns = ref<string[]>(
   store.tabOpen === 3 && store.tabMain === "3"
-  ? ['no',"name", "develop", "target", "achievement", "summary"]
-  : ['no',"name", "develop", "target"]
+    ? ["no", "name", "develop", "target", "achievement", "summary"]
+    : ["no", "name", "develop", "target"]
 );
 
 function onAdd() {
@@ -206,7 +206,7 @@ onMounted(() => {
         <div class="col">
           <span class="text-weight-medium">การพัฒนาตนเอง</span>
           <q-btn
-            v-if="isEditStep1"
+            v-if="isEditStep1 && !checkRoutePermisson"
             class="q-ml-xs"
             flat
             round
@@ -222,7 +222,7 @@ onMounted(() => {
 
         <q-space />
         <q-btn
-          v-if="isEditStep3"
+          v-if="isEditStep3 && !checkRoutePermisson"
           flat
           round
           icon="mdi-clipboard-check-outline"
@@ -320,7 +320,7 @@ onMounted(() => {
             </q-td>
             <q-td>
               <div
-              v-if="
+                v-if="
                   (store.dataEvaluation.evaluationStatus == 'APPROVE' &&
                     store.tabMain === '2') ||
                   store.tabMain === '3'
@@ -351,7 +351,7 @@ onMounted(() => {
                 </q-btn> -->
               </div>
 
-              <div v-if="isEditStep1">
+              <div v-if="isEditStep1 && !checkRoutePermisson">
                 <q-btn
                   flat
                   round
diff --git a/src/modules/14_KPI/components/results/tableIndividual.vue b/src/modules/14_KPI/components/results/tableIndividual.vue
index 114e81f65..7fb2d5328 100644
--- a/src/modules/14_KPI/components/results/tableIndividual.vue
+++ b/src/modules/14_KPI/components/results/tableIndividual.vue
@@ -25,6 +25,8 @@ import DialogIndividual from "@/modules/14_KPI/components/results/dialogIndividu
 import { useCounterMixin } from "@/stores/mixin";
 import { useKpiDataStore } from "@/modules/14_KPI/store";
 
+import { checkPermission } from "@/utils/permissions";
+
 /**
  * use
  */
@@ -365,14 +367,15 @@ onMounted(() => {
         </q-tr>
       </template>
       <template v-slot:body="props">
-        <q-tr :props="props" class="cursor-pointer">
+        <q-tr :props="props" >
           <q-td
             ><q-btn
+            v-if="checkPermission($route)?.attrIsGet"
               flat
               dense
               round
               color="info"
-              icon="mdi-eye-outline"
+              icon="mdi-eye"
               @click="onClickView(props.row.id)"
             >
               <q-tooltip>รายละเอียดแผนพัฒนาการปฏิบัติราชการรายบุคคล</q-tooltip>
diff --git a/src/modules/14_KPI/components/results/tableResults.vue b/src/modules/14_KPI/components/results/tableResults.vue
index d024bf2e4..d8b6e9d1e 100644
--- a/src/modules/14_KPI/components/results/tableResults.vue
+++ b/src/modules/14_KPI/components/results/tableResults.vue
@@ -20,6 +20,7 @@ import type { DataOption } from "@/modules/14_KPI/interface/index/Main";
 import { useCounterMixin } from "@/stores/mixin";
 import { useKpiDataStore } from "@/modules/14_KPI/store";
 
+import { checkPermission } from "@/utils/permissions";
 /**
  * use
  */
@@ -379,13 +380,20 @@ onMounted(() => {
       :paging="true"
       :visible-columns="visibleColumns"
     >
-      <template v-slot:header-selection="scope" v-if="tab === 'COMPLETE'">
-        <q-checkbox keep-color color="primary" dense v-model="scope.selected" />
+      <template v-slot:header-selection="scope"  v-if="tab === 'COMPLETE'">
+        <q-checkbox
+          v-if="tab === 'COMPLETE' && checkPermission($route)?.attrIsUpdate"
+          keep-color
+          color="primary"
+          dense
+          v-model="scope.selected"
+        />
       </template>
       <template v-slot:body="props">
         <q-tr :props="props" class="cursor-pointer">
           <q-td v-if="tab === 'COMPLETE'">
             <q-checkbox
+              v-if="tab === 'COMPLETE' && checkPermission($route)?.attrIsUpdate"
               keep-color
               color="primary"
               dense
@@ -418,12 +426,14 @@ onMounted(() => {
       </template>
     </d-table>
   </q-card-section>
-  <q-separator v-if="tab === 'COMPLETE'" />
+  <q-separator
+    v-if="tab === 'COMPLETE' && checkPermission($route)?.attrIsUpdate"
+  />
 
   <q-card-actions
     align="right"
     class="bg-white text-teal"
-    v-if="tab === 'COMPLETE'"
+    v-if="tab === 'COMPLETE' && checkPermission($route)?.attrIsUpdate"
   >
     <q-btn
       label="ประกาศผล"
diff --git a/src/modules/14_KPI/router.ts b/src/modules/14_KPI/router.ts
index 46e39f3ca..804cd9685 100644
--- a/src/modules/14_KPI/router.ts
+++ b/src/modules/14_KPI/router.ts
@@ -16,6 +16,7 @@ const listPage = () => import("@/modules/14_KPI/views/list.vue");
 // const detailPage = () => import("@/modules/14_KPI/views/detail.vue");
 const reportPage = () => import("@/modules/14_KPI/views/report.vue");
 const detailView = () => import("@/modules/14_KPI/views/detailView.vue");
+const detailViewPage = () => import("@/modules/14_KPI/views/detailView.vue");
 const ResultsView = () => import("@/modules/14_KPI/views/resultsMain.vue");
 
 export default [
@@ -50,6 +51,16 @@ export default [
       Role: "STAFF",
     },
   },
+  {
+    path: "/KPI-list-detail/:id",
+    name: "KPIDetailPage",
+    component: detailViewPage,
+    meta: {
+      Auth: true,
+      Key: "SYS_KPI_LIST",
+      Role: "STAFF",
+    },
+  },
   {
     path: "/KPI/report",
     name: "KPIReport",
diff --git a/src/modules/14_KPI/views/detailView.vue b/src/modules/14_KPI/views/detailView.vue
index f499aa22d..e3ff624d5 100644
--- a/src/modules/14_KPI/views/detailView.vue
+++ b/src/modules/14_KPI/views/detailView.vue
@@ -51,6 +51,7 @@ const modalStatus = ref<boolean>(false);
 // const modalScore = ref<boolean>(false);
 const modalEdit = ref<boolean>(false);
 const route = useRoute();
+const checkRoutePermisson = ref<boolean>(route.name == "KPIDetailPage");
 const id = ref<string>(route.params.id as string);
 const isReadonly = <boolean>(route.name === "KPIEditEvaluator" ? true : false);
 
@@ -495,11 +496,13 @@ onMounted(async () => {
             <div class="q-gutter-x-sm">
               <span
                 v-if="
-                  (store.tabMain === '1' &&
+                  (!checkRoutePermisson &&
+                    store.tabMain === '1' &&
                     store.dataEvaluation.posTypeName != 'อำนวยการ' &&
                     store.dataEvaluation.posTypeName != 'บริหาร' &&
                     store.indicatorWeightTotal != 100) ||
-                  (store.dataEvaluation.posTypeName == 'อำนวยการ' &&
+                  (!checkRoutePermisson &&
+                    store.dataEvaluation.posTypeName == 'อำนวยการ' &&
                     store.dataEvaluation.posTypeName == 'บริหาร' &&
                     (store.indicatorWeight1Total != 100 ||
                       store.indicatorWeight2Total != 20) &&
@@ -512,7 +515,8 @@ onMounted(async () => {
               <q-btn
                 v-if="
                   store.rolePerson == 'USER' &&
-                  store.dataEvaluation.evaluationStatus == 'NEW'
+                  store.dataEvaluation.evaluationStatus == 'NEW' &&
+                  !checkRoutePermisson
                 "
                 :disabled="
                   (store.dataEvaluation.posTypeName != 'อำนวยการ' &&
@@ -535,6 +539,7 @@ onMounted(async () => {
               </q-btn>
               <q-btn
                 v-if="
+                  !checkRoutePermisson &&
                   store.rolePerson == 'USER' &&
                   store.tabMain == '2' &&
                   store.dataEvaluation.evaluationStatus == 'APPROVE'
@@ -551,6 +556,7 @@ onMounted(async () => {
               </q-btn>
               <q-btn
                 v-if="
+                  !checkRoutePermisson &&
                   store.rolePerson == 'USER' &&
                   store.dataEvaluation.evaluationStatus == 'EVALUATING' &&
                   store.tabMain == '3'
@@ -584,6 +590,7 @@ onMounted(async () => {
                     </q-btn> -->
               <q-btn
                 v-if="
+                  !checkRoutePermisson &&
                   store.rolePerson == 'USER' &&
                   store.tabOpen < 3 &&
                   store.dataEvaluation.evaluationStatus != 'NEW' &&
@@ -604,6 +611,7 @@ onMounted(async () => {
 
               <q-btn
                 v-if="
+                  !checkRoutePermisson &&
                   store.rolePerson == 'EVALUATOR' &&
                   store.tabMain === '3' &&
                   store.dataEvaluation.evaluationStatus ===
@@ -866,7 +874,7 @@ onMounted(async () => {
             <div class="row">
               <div class="col-10">
                 <q-select
-                  :readonly="
+                  :readonly="checkRoutePermisson||
                     !(
                       store.dataEvaluation.evaluationStatus === 'NEW' &&
                       store.rolePerson === 'USER'
@@ -907,7 +915,7 @@ onMounted(async () => {
             <div class="row">
               <div class="col-10">
                 <q-select
-                  :readonly="
+                  :readonly="checkRoutePermisson||
                     !(
                       store.dataEvaluation.evaluationStatus === 'NEW' &&
                       store.rolePerson === 'USER'
@@ -959,7 +967,7 @@ onMounted(async () => {
             <div class="row">
               <div class="col-10">
                 <q-select
-                  :readonly="
+                  :readonly="checkRoutePermisson||
                     !(
                       store.dataEvaluation.evaluationStatus === 'NEW' &&
                       store.rolePerson === 'USER'
@@ -1014,9 +1022,9 @@ onMounted(async () => {
             </div>
           </div>
         </q-card-section>
-        <q-separator />
+        <q-separator v-if="!checkRoutePermisson"/>
         <q-card-actions
-          v-if="
+          v-if="!checkRoutePermisson&&
             store.dataEvaluation.evaluationStatus === 'NEW' &&
             store.rolePerson === 'USER'
           "
diff --git a/src/modules/14_KPI/views/list.vue b/src/modules/14_KPI/views/list.vue
index e4915b676..05e654429 100644
--- a/src/modules/14_KPI/views/list.vue
+++ b/src/modules/14_KPI/views/list.vue
@@ -164,6 +164,10 @@ function redirectViewDetail(id: string) {
   store.tabMain = "1";
   router.push(`KPI-list/${id}`);
 }
+function redirectViewDetailOnly(id: string) {
+  store.tabMain = "1";
+  router.push(`KPI-list-detail/${id}`);
+}
 
 function clearYear() {
   year.value = null;
@@ -262,7 +266,14 @@ onMounted(async () => {
               @update:model-value="changRound"
               :disable="year === null"
             />
-            <q-btn v-if="checkPermission($route)?.attrIsCreate" round color="primary" flat icon="add" @click="onDialog()">
+            <q-btn
+              v-if="checkPermission($route)?.attrIsCreate"
+              round
+              color="primary"
+              flat
+              icon="add"
+              @click="onDialog()"
+            >
               <q-tooltip>เพิ่มผู้ประเมิน</q-tooltip>
             </q-btn>
             <!-- <q-select
@@ -332,18 +343,39 @@ onMounted(async () => {
           >
             <template v-slot:header="props">
               <q-tr :props="props">
+                <q-th auto-width></q-th>
                 <q-th v-for="col in props.cols" :key="col.name" :props="props">
                   <span class="text-weight-medium">{{ col.label }}</span>
                 </q-th>
               </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"
-                  @click="checkPermission($route)?.attrIsUpdate ? redirectViewDetail(props.row.id):''"
-                >
+              <q-tr :props="props">
+                <q-td auto-width>
+                  <q-btn
+                    v-if="checkPermission($route)?.attrIsGet"
+                    @click="redirectViewDetailOnly(props.row.id)"
+                    round
+                    color="info"
+                    flat
+                    dense
+                    icon="mdi-eye"
+                  >
+                    <q-tooltip>รายละเอียด</q-tooltip>
+                  </q-btn>
+                  <q-btn
+                    v-if="checkPermission($route)?.attrIsUpdate && checkPermission($route)?.attrIsGet"
+                    @click="redirectViewDetail(props.row.id)"
+                    round
+                    color="edit"
+                    flat
+                    dense
+                    icon="edit"
+                  >
+                    <q-tooltip>แก้ไขข้อมูล</q-tooltip>
+                  </q-btn>
+                </q-td>
+                <q-td v-for="col in props.cols" :key="col.id">
                   <div v-if="col.name === 'name'">
                     {{
                       `${props.row.prefix}${props.row.firstname}  ${props.row.lastname}`
diff --git a/src/modules/14_KPI/views/report.vue b/src/modules/14_KPI/views/report.vue
index ed1dc1026..d19d3fcf3 100644
--- a/src/modules/14_KPI/views/report.vue
+++ b/src/modules/14_KPI/views/report.vue
@@ -31,7 +31,7 @@ import DialogHeader from "@/components/DialogHeader.vue";
  * importStore
  */
 import { useCounterMixin } from "@/stores/mixin";
-
+import { checkPermission } from "@/utils/permissions";
 /**
  * use
  */
@@ -494,6 +494,7 @@ onMounted(() => {
       <q-toolbar style="padding: 0">
         <div class="row q-gutter-sm">
           <q-select
+            :readonly="!checkPermission($route)?.attrIsGet"
             style="min-width: 100px"
             dense
             hide-bottom-space
@@ -521,6 +522,7 @@ onMounted(() => {
         <q-space />
 
         <q-btn
+          v-if="checkPermission($route)?.attrIsGet"
           flat
           round
           color="primary"
diff --git a/src/modules/14_KPI/views/round.vue b/src/modules/14_KPI/views/round.vue
index d93a00565..57ab68f6c 100644
--- a/src/modules/14_KPI/views/round.vue
+++ b/src/modules/14_KPI/views/round.vue
@@ -515,6 +515,7 @@ onMounted(() => {
                 dense
                 color="orange"
                 icon="mdi-close"
+                @click="onClickAction('close', props.row.id)"
               >
                 <q-tooltip>ปิดรอบ</q-tooltip>
               </q-btn>