diff --git a/src/modules/08_KPI/components/Tab/Dialog/04_Dialog.vue b/src/modules/08_KPI/components/Tab/Dialog/04_Dialog.vue
index b2a691a..fc11228 100644
--- a/src/modules/08_KPI/components/Tab/Dialog/04_Dialog.vue
+++ b/src/modules/08_KPI/components/Tab/Dialog/04_Dialog.vue
@@ -42,7 +42,6 @@ const fieldDetailLabels = {
   type: "ประเภทสมรรถนะ",
   name: "ชื่อสมรรถนะ",
   definition: "คำจำกัดความ",
-  criteria: "กำหนดเกณฑ์การประเมิน",
 };
 
 const fieldLabels = {
@@ -79,10 +78,9 @@ const competencyTypeOp = ref<DataOptions[]>([
 function clickList(index: number, data: any) {
   listCheck.value = index;
 
-  // formDetail.type = ???
-  // formDetail.name = ???
-  // formDetail.definition = ???
-  // formDetail.criteria = ???
+  formDetail.type = data.type
+  formDetail.name = data.name
+  formDetail.definition = data.description
   formScore.score1 = data.capacityDetails[0].description;
   formScore.score2 = data.capacityDetails[1].description;
   formScore.score3 = data.capacityDetails[2].description;
@@ -141,6 +139,24 @@ function filterTxt(val: any) {
   );
   console.log(listTarget.value.length);
 }
+
+function statusTothai(val: string) {
+  switch (val) {
+    case "HEAD":
+      return "สมรรถนะหลัก";
+    case "GROUP":
+      return "สมรรถนะประจำกลุ่มงาน";
+    case "EXECUTIVE":
+      return "สมรรถนะประจำผู้บริหารกรุงเทพมหานคร";
+    case "DIRECTOR":
+      return "สมรรถนะเฉพาะสำหรับตำแหน่ง ผอ.เขต ผช.ผอ.เขต และหัวหน้าฝ่ายในสังกัด สนง.เขต";
+    case "INSPECTOR":
+      return "สมรรถนะเฉพาะสำหรับตำแหน่งผู้ตรวจราชการ กทม. และผู้ตรวจราชการ";
+    default:
+      return "-";
+  }
+}
+
 watch(
   () => modal.value,
   () => {
@@ -252,7 +268,7 @@ watch(
                     >รายละเอียดตัวชี้วัด</span
                   >
                 </div>
-                <div class="col-8 row">
+                <div class="col-5 row">
                   <q-card bordered class="fit q-pa-sm no-shadow">
                     <div
                       v-for="(field, index) in Object.keys(fieldDetailLabels)"
@@ -267,19 +283,19 @@ watch(
                           }}
                         </div>
                         <div class="col-8">
-                          <span>{{
-                            formDetail[field] ? formDetail[field] : "-"
-                          }}</span>
+                          <span v-if="field == 'type'">{{ formDetail[field] ? statusTothai(formDetail[field]) : "-" }}</span>
+                          <span v-else-if="field == 'definition'" v-html="formDetail[field]"></span>
+                          <span v-else>{{ formDetail[field] ? formDetail[field] : "-" }}</span>
                         </div>
                       </div>
                     </div>
                   </q-card>
                 </div>
-                <div class="col-4 row">
+                <div class="col-7 row">
                   <q-card bordered class="col-12 row no-shadow">
                     <div class="bg-grey-2 row q-py-sm text-weight-bold col-12">
-                      <div class="col-6 text-center">ระดับคะแนน</div>
-                      <div class="col-6 text-center">ผลสำเร็จของงาน</div>
+                      <div class="col-4 text-center">ระดับคะแนน</div>
+                      <div class="col-8 text-center">ผลสำเร็จของงาน</div>
                     </div>
                     <div
                       v-for="(field, index) in Object.keys(fieldLabels)"
@@ -287,13 +303,11 @@ watch(
                       class="col-12"
                     >
                       <div class="row col-12 q-py-sm">
-                        <div class="col-6 text-center text-body2">
+                        <div class="col-4 text-center text-body2">
                           {{ fieldLabels[field as keyof typeof fieldLabels] }}
                         </div>
-                        <div class="col-6 text-center">
-                          <span>{{
-                            formScore[field] ? formScore[field] : "-"
-                          }}</span>
+                        <div class="col-8 text-left">
+                          <span v-html="formScore[field]"></span>
                         </div>
                       </div>
                       <div