diff --git a/src/modules/14_KPI/components/detailList/01_Assessment.vue b/src/modules/14_KPI/components/detailList/01_Assessment.vue
index 6f0111e78..c5675fe92 100644
--- a/src/modules/14_KPI/components/detailList/01_Assessment.vue
+++ b/src/modules/14_KPI/components/detailList/01_Assessment.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, onMounted, computed } from "vue";
+import { ref, onMounted, computed, watch } from "vue";
 import { useQuasar } from "quasar";
 import { useRoute } from "vue-router";
 
@@ -16,6 +16,8 @@ import { useKPIDataStore } from "@/modules/14_KPI/store/KPIStore";
 // import type { ListCriteria } from "@/modules/08_KPI/interface/request/index";
 
 const dataListCriteria = ref<any[]>([]);
+const indicatorScore = defineModel("indicatorScore", { default: 0 });
+const competencyScore = defineModel("competencyScore", { default: 0 });
 
 const modalCriteria = ref<boolean>(false);
 const $q = useQuasar();
@@ -35,7 +37,6 @@ const totalResults3 = ref<number>(0);
 // const resultWork = ref<number>(0);
 
 function fetchListPlanned() {
-  showLoader();
   http
     .get(config.API.kpiAchievement("planned") + `?id=${evaluationId.value}`)
     .then((res) => {
@@ -60,14 +61,10 @@ function fetchListPlanned() {
     })
     .catch((err) => {
       messageError($q, err);
-    })
-    .finally(() => {
-      hideLoader();
     });
 }
 
 function fetchListRole() {
-  showLoader();
   http
     .get(config.API.kpiAchievement("role") + `?id=${evaluationId.value}`)
     .then((res) => {
@@ -92,14 +89,10 @@ function fetchListRole() {
     })
     .catch((err) => {
       messageError($q, err);
-    })
-    .finally(() => {
-      hideLoader();
     });
 }
 
 function fetchAssigned() {
-  showLoader();
   http
     .get(config.API.kpiAchievement("special") + `?id=${evaluationId.value}`)
     .then((res) => {
@@ -124,17 +117,16 @@ function fetchAssigned() {
     })
     .catch((err) => {
       messageError($q, err);
-    })
-    .finally(() => {
-      hideLoader();
     });
 }
 
 function onInfo() {
   modalCriteria.value = true;
 }
+
 const resultWork = computed(() => {
   const total = totalResults1.value + totalResults2.value + totalResults3.value;
+  indicatorScore.value = total;
   return total.toFixed(2);
 });
 
@@ -147,17 +139,17 @@ function getCriteria() {
     })
     .catch((e) => {
       messageError($q, e);
-    })
-    .finally(() => {
-      hideLoader();
     });
 }
 
 onMounted(() => {
-  getCriteria();
-  fetchListPlanned();
-  fetchListRole();
-  fetchAssigned();
+  setTimeout(() => {
+    getCriteria();
+    fetchListPlanned();
+    fetchListRole();
+    fetchAssigned();
+    hideLoader();
+  }, 1000);
 });
 </script>
 
@@ -232,7 +224,10 @@ onMounted(() => {
         </q-btn>
       </div>
 
-      <Competency v-model:dataListCriteria="dataListCriteria" />
+      <Competency
+        v-model:dataListCriteria="dataListCriteria"
+        v-model:competency-score="competencyScore"
+      />
     </div>
   </q-scroll-area>
 
diff --git a/src/modules/14_KPI/components/detailList/TabMain.vue b/src/modules/14_KPI/components/detailList/TabMain.vue
index 9fa876e73..1f9e7cc17 100644
--- a/src/modules/14_KPI/components/detailList/TabMain.vue
+++ b/src/modules/14_KPI/components/detailList/TabMain.vue
@@ -14,7 +14,8 @@ const store = useKPIDataStore();
 const route = useRoute();
 
 const isReadonly = <boolean>(route.name === "KPIDetail" ? true : false);
-
+const indicatorScore = defineModel("indicatorScore", { default: 0 });
+const competencyScore = defineModel("competencyScore", { default: 0 });
 const itemsTab = ref<any>([
   {
     name: "1",
@@ -40,6 +41,7 @@ const itemsTab = ref<any>([
 
 const splitterModel = ref<number>(12);
 </script>
+
 <template>
   <q-splitter v-model="splitterModel" disable>
     <template v-slot:before>
@@ -76,7 +78,11 @@ const splitterModel = ref<number>(12);
           :name="tab.name"
           class="q-pa-none"
         >
-          <Assessment v-if="store.tabMain === '1'" />
+          <Assessment
+            v-if="store.tabMain === '1'"
+            v-model:indicatorScore="indicatorScore"
+            v-model:competencyScore="competencyScore"
+          />
           <Evaluator v-if="store.tabMain === '2'" :type="'evaluator'" />
           <Evaluator v-if="store.tabMain === '3'" :type="'commander'" />
           <Evaluator v-if="store.tabMain === '4'" :type="'commanderHigh'" />
diff --git a/src/modules/14_KPI/components/detailList/Topic/02_Competency.vue b/src/modules/14_KPI/components/detailList/Topic/02_Competency.vue
index 6e101e4dd..1ef5a0f8e 100644
--- a/src/modules/14_KPI/components/detailList/Topic/02_Competency.vue
+++ b/src/modules/14_KPI/components/detailList/Topic/02_Competency.vue
@@ -20,6 +20,9 @@ import { useRoute } from "vue-router";
 const dataListCriteria = defineModel<any[]>("dataListCriteria", {
   required: true,
 });
+const competencyScore = defineModel<number>("competencyScore", {
+  default: 0,
+});
 
 const sortedDataListCriteria = computed(() => {
   return dataListCriteria.value.sort((a, b) => a.level - b.level);
@@ -115,7 +118,6 @@ const rows = ref<any>([]);
 const lists = ref<any>([]);
 const resultEvaluation = ref<string | 0>(0);
 function getData(type: string) {
-  showLoader();
   http
     .get(config.API.kpiUserCapacity + `?id=${id.value}&type=${type}`)
     .then(async (res) => {
@@ -157,9 +159,8 @@ function getData(type: string) {
             ? (resultAvg / weightAvg) * store.dataEvaluation.capacityPoint
             : 0;
         resultEvaluation.value = sum.toFixed(2);
+        competencyScore.value = sum;
       }
-      // end cal summary
-      hideLoader();
     });
 }
 
@@ -193,10 +194,12 @@ function onEvaluate(type: string) {
 }
 
 onMounted(() => {
-  for (let index = 0; index < store.competencyType.length; index++) {
-    const element = store.competencyType[index];
-    getData(element.id);
-  }
+  setTimeout(() => {
+    for (let index = 0; index < store.competencyType.length; index++) {
+      const element = store.competencyType[index];
+      getData(element.id);
+    }
+  }, 1000);
 });
 </script>
 
diff --git a/src/modules/14_KPI/store/KPIStore.ts b/src/modules/14_KPI/store/KPIStore.ts
index f695ddb6e..18533052d 100644
--- a/src/modules/14_KPI/store/KPIStore.ts
+++ b/src/modules/14_KPI/store/KPIStore.ts
@@ -12,6 +12,7 @@ export const useKPIDataStore = defineStore("KPIDataStore", () => {
     plannedPoint: 0,
     rolePoint: 0,
     specialPoint: 0,
+    capacityPoint: 0,
   });
 
   const competencyType = ref<DataOption[]>([
diff --git a/src/modules/14_KPI/views/detail.vue b/src/modules/14_KPI/views/detail.vue
index d0b061b50..b7f83f3c4 100644
--- a/src/modules/14_KPI/views/detail.vue
+++ b/src/modules/14_KPI/views/detail.vue
@@ -9,6 +9,7 @@ import TabMain from "@/modules/14_KPI/components/detailList/TabMain.vue";
 
 import { useCounterMixin } from "@/stores/mixin";
 import { useKPIDataStore } from "@/modules/14_KPI/store/KPIStore";
+import { time } from "console";
 
 // import type { FormProfile } from "@/modules/08_KPI/interface/request/index";
 
@@ -20,7 +21,8 @@ const store = useKPIDataStore();
 const $q = useQuasar();
 const mixin = useCounterMixin();
 const { showLoader, hideLoader, messageError } = mixin;
-
+const indicatorScore = ref<number>(0);
+const competencyScore = ref<number>(0);
 const formProfile = reactive<any>({
   fullName: "",
   position: "",
@@ -35,7 +37,6 @@ const formProfile = reactive<any>({
 const router = useRouter();
 
 function fetchEvaluation() {
-  showLoader();
   http
     .get(config.API.kpiUserEvaluation + `/${id.value}`)
     .then((res) => {
@@ -47,14 +48,10 @@ function fetchEvaluation() {
     })
     .catch((e) => {
       messageError($q, e);
-    })
-    .finally(() => {
-      hideLoader();
     });
 }
 
 function getProfile() {
-  showLoader();
   http
     .get(config.API.profilePosition())
     .then((res) => {
@@ -69,14 +66,10 @@ function getProfile() {
     })
     .catch((e) => {
       messageError($q, e);
-    })
-    .finally(() => {
-      hideLoader();
     });
 }
 
 async function fetchProfile(id: string) {
-  showLoader();
   await http
     .get(
       config.API.fileByFile("ทะเบียนประวัติ", "โปรไฟล์", id, `profile-${id}`)
@@ -86,16 +79,14 @@ async function fetchProfile(id: string) {
     })
     .catch(() => {
       // profilePicture.value = avatar;
-    })
-    .finally(() => {
-      hideLoader();
     });
 }
 
 /** save */
 function onSave() {}
 
-onMounted(() => {
+onMounted(async () => {
+  showLoader();
   fetchEvaluation();
   getProfile();
 });
@@ -112,7 +103,12 @@ onMounted(() => {
         flat
         color="primary"
         class="q-mr-sm"
-        @click="isReadonly ? router.push(`/KPI-list`) : router.push(`/KPI`)"
+        @click="
+          () => {
+            store.dataEvaluation = {};
+            isReadonly ? router.push(`/KPI-list`) : router.push(`/KPI`);
+          }
+        "
       />
       {{ id ? `รายละเอียดแบบประเมิน` : `เพิ่มแบบประเมิน` }}
       <q-space />
@@ -214,9 +210,9 @@ onMounted(() => {
                 <div class="col-2">
                   <div class="column">
                     <span class="text-grey-6">คะแนนประเมิน</span>
-                    <span class="text-weight-medium text-primary">{{
-                      formProfile.score
-                    }}</span>
+                    <span class="text-weight-medium text-primary"
+                      >{{ (indicatorScore + competencyScore).toFixed(2) }}
+                    </span>
                   </div>
                 </div>
               </div>
@@ -226,7 +222,10 @@ onMounted(() => {
       </q-card>
 
       <q-card class="q-mt-md rounded">
-        <TabMain />
+        <TabMain
+          v-model:indicatorScore="indicatorScore"
+          v-model:competencyScore="competencyScore"
+        />
       </q-card>
     </div>
   </div>