diff --git a/src/modules/14_KPI/components/competency/05ListDetail.vue b/src/modules/14_KPI/components/competency/05ListDetail.vue
index 5ce164831..14a260f3c 100644
--- a/src/modules/14_KPI/components/competency/05ListDetail.vue
+++ b/src/modules/14_KPI/components/competency/05ListDetail.vue
@@ -1,5 +1,328 @@
 <script setup lang="ts"></script>
 
 <template>
-  <div>การประเมิน</div>
+  <div class="display-table">
+    <q-card flat bordered class="q-mb-lg">
+      <q-card-section>
+        <div class="text-h6 text-bold">ประเภทสมรรถนะ</div>
+      </q-card-section>
+
+      <q-card-section class="q-pt-none">
+        ให้ประเมินจากสมรรถนะที่เกี่ยวข้องกับการปฏิบัติราชการตามที่ ก.ก. กำหนด
+        มีรายละเอียดดังนี้
+      </q-card-section>
+
+      <q-separator inset />
+      <div style="border: 1px solid black">
+        <div class="row text-center" style="background-color: #e0e4f4">
+          <div class="col-3 text-bold flex justify-center items-center">
+            ประเภทสมรรถนะ
+          </div>
+          <div class="col-5">
+            <div class="row text-bold flex justify-center">
+              ประเภทและระดับตำแหน่ง
+            </div>
+            <div class="row">
+              <div class="col-3">
+                <div class="text-bold">ทั่วไป</div>
+                <div>ปฏิบัติงาน</div>
+                <div>ชำนาญงาน</div>
+                <div>อาวุโส</div>
+              </div>
+              <div class="col-3">
+                <div class="text-bold">วิชาการ</div>
+                <div>ปฏิบัติการ</div>
+                <div>ชำนาญการ</div>
+                <div>ชำนาญการพิเศษ</div>
+                <div>เชี่ยวชาญ</div>
+                <div>ทรงคุณวุฒิ</div>
+              </div>
+              <div class="col-3">
+                <div class="text-bold">อำนวยการ</div>
+                <div>ต้น สูง</div>
+              </div>
+              <div class="col-3">
+                <div class="text-bold">บริหาร</div>
+                <div>ต้น สูง</div>
+              </div>
+            </div>
+          </div>
+          <div class="col-4 column">
+            <div class="row text-bold flex justify-center">ผู้ดำรงตำแหน่ง</div>
+            <div class="row" style="flex-grow: 1">
+              <div class="col-6">
+                ผู้ตรวจราชการกรุงเทพมหานครและผู้ตรวจราชการ
+              </div>
+              <div class="col-6 flex justify-center">ผู้อำนวยการเขต</div>
+            </div>
+          </div>
+        </div>
+        <div class="row">
+          <div class="col-3 q-pa-sm">
+            <div class="text-bold">สมรรถนะหลัก</div>
+            <div>(๕ สมรรถนะ)</div>
+          </div>
+          <div class="col-5 column">
+            <div class="row col-grow">
+              <div class="col-3 flex items-center justify-center">
+                <q-icon name="check" size="32px" />
+              </div>
+              <div class="col-3 flex items-center justify-center">
+                <q-icon name="check" size="32px" />
+              </div>
+              <div class="col-3 flex items-center justify-center">
+                <q-icon name="check" size="32px" />
+              </div>
+              <div class="col-3 flex items-center justify-center">
+                <q-icon name="check" size="32px" />
+              </div>
+            </div>
+          </div>
+          <div class="col-4 column">
+            <div class="row col-grow">
+              <div class="col-6 flex items-center justify-center">
+                <q-icon name="check" size="32px" />
+              </div>
+              <div class="col-6 flex items-center justify-center">
+                <q-icon name="check" size="32px" />
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="row">
+          <div class="col-3 q-pa-sm">
+            <div class="text-bold">สมรรถนะประจำกลุ่มงาน</div>
+            <div>(๓ สมรรถนะ ตามกลุ่มงาน)</div>
+          </div>
+          <div class="col-5 column">
+            <div class="row col-grow">
+              <div class="col-3 flex items-center justify-center">
+                <q-icon name="check" size="32px" />
+              </div>
+              <div class="col-3 flex items-center justify-center">
+                <q-icon name="check" size="32px" />
+              </div>
+              <div class="col-3"></div>
+              <div class="col-3"></div>
+            </div>
+          </div>
+          <div class="col-4 column">
+            <div class="row col-grow">
+              <div class="col-6"></div>
+              <div class="col-6"></div>
+            </div>
+          </div>
+        </div>
+        <div class="row">
+          <div class="col-3 q-pa-sm">
+            <div class="text-bold">สมรรถนะประจำผู้บริหารกรุงเทพมหานคร</div>
+            <div>(๗ สมรรถนะ)</div>
+          </div>
+          <div class="col-5 column">
+            <div class="row col-grow">
+              <div class="col-3"></div>
+              <div class="col-3"></div>
+              <div class="col-3 flex items-center justify-center">
+                <q-icon name="check" size="32px" />
+              </div>
+              <div class="col-3 flex items-center justify-center">
+                <q-icon name="check" size="32px" />
+              </div>
+            </div>
+          </div>
+          <div class="col-4 column">
+            <div class="row col-grow">
+              <div class="col-6"></div>
+              <div class="col-6"></div>
+            </div>
+          </div>
+        </div>
+        <div class="row">
+          <div class="col-3 q-pa-sm">
+            <div class="text-bold">สมรรถนะเฉพาะสำหรับตำแหน่งผู้อำนวยการเขต</div>
+            <div>(ู๔ สมรรถนะ)</div>
+          </div>
+          <div class="col-5 column">
+            <div class="row col-grow">
+              <div class="col-3"></div>
+              <div class="col-3"></div>
+              <div class="col-3"></div>
+              <div class="col-3"></div>
+            </div>
+          </div>
+          <div class="col-4 column">
+            <div class="row col-grow">
+              <div class="col-6"></div>
+              <div class="col-6 flex items-center justify-center">
+                <q-icon name="check" size="32px" />
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="row">
+          <div class="col-3 q-pa-sm">
+            <div class="text-bold">
+              สมรรถนะเฉพาะสำหรับตำแหน่งผู้ตรวจราชการกรุงเทพมหานครและผู้ตรวจราชการ
+            </div>
+            <div>(ู๒ สมรรถนะ)</div>
+          </div>
+          <div class="col-5 column">
+            <div class="row col-grow">
+              <div class="col-3"></div>
+              <div class="col-3"></div>
+              <div class="col-3"></div>
+              <div class="col-3"></div>
+            </div>
+          </div>
+          <div class="col-4 column">
+            <div class="row col-grow">
+              <div class="col-6 flex items-center justify-center">
+                <q-icon name="check" size="32px" />
+              </div>
+              <div class="col-6"></div>
+            </div>
+          </div>
+        </div>
+        <div class="row text-bold">
+          <div class="col-3 q-pa-sm">
+            <div class="text-bold flex justify-end">รวมสมรรถนะ</div>
+          </div>
+          <div class="col-5 column">
+            <div class="row col-grow">
+              <div class="col-3 flex justify-center items-center">๘</div>
+              <div class="col-3 flex justify-center items-center">๘</div>
+              <div class="col-3 flex justify-center items-center">๑๒</div>
+              <div class="col-3 flex justify-center items-center">๑๒</div>
+            </div>
+          </div>
+          <div class="col-4 column">
+            <div class="row col-grow">
+              <div class="col-6 flex justify-center items-center">๗</div>
+              <div class="col-6 flex justify-center items-center">๙</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </q-card>
+
+    <q-card flat bordered>
+      <q-card-section>
+        <div class="text-h6 text-bold">ระดับสมรรถนะ</div>
+      </q-card-section>
+
+      <q-card-section class="q-pt-none">
+        สมรรถนะหลักและสมรรถนะประจำกลุ่มงาน
+        กำหนดระดับสมรรถนะที่คาดหวังจำแนกตามประเภทและระดับตำแหน่งของข้าราชการกรุงเทพมหานครสามัญ
+        มีรายละเอียดดังนี้
+      </q-card-section>
+
+      <q-separator inset />
+      <div style="border: 1px solid black">
+        <div
+          class="row text-bold text-center"
+          style="background-color: #c0d4ec"
+        >
+          <div class="col-3">ประเภทตำแหน่ง</div>
+          <div class="col-3">ระดับตำแหน่ง</div>
+          <div class="col-3">สมรรถนะหลัก</div>
+          <div class="col-3">สมรรถนะประจำกลุ่มงาน</div>
+        </div>
+        <div class="row text-center">
+          <div class="col-3 flex justify-center items-center">บริหาร</div>
+          <div class="col-6">
+            <div class="row">
+              <div class="col-6">สูง</div>
+              <div class="col-6">๕</div>
+            </div>
+            <div class="row">
+              <div class="col-6">ต้น</div>
+              <div class="col-6">๔</div>
+            </div>
+          </div>
+          <div class="col-3" style="background-color: #bcbcc4"></div>
+        </div>
+        <div class="row text-center">
+          <div class="col-3 flex justify-center items-center">อำนวยการ</div>
+          <div class="col-6">
+            <div class="row">
+              <div class="col-6">สูง</div>
+              <div class="col-6">๔</div>
+            </div>
+            <div class="row">
+              <div class="col-6">ต้น</div>
+              <div class="col-6">๓</div>
+            </div>
+          </div>
+          <div class="col-3" style="background-color: #bcbcc4"></div>
+        </div>
+        <div class="row text-center">
+          <div class="col-3 flex justify-center items-center">วิชาการ</div>
+          <div class="col-9">
+            <div class="row">
+              <div class="col-4">ทรงคุณวุฒิ</div>
+              <div class="col-4">๕</div>
+              <div class="col-4">๕</div>
+            </div>
+            <div class="row">
+              <div class="col-4">เชี่ยวชาญ</div>
+              <div class="col-4">๔</div>
+              <div class="col-4">๔</div>
+            </div>
+            <div class="row">
+              <div class="col-4">ชำนาญการพิเศษ</div>
+              <div class="col-4">๓</div>
+              <div class="col-4">๔</div>
+            </div>
+            <div class="row">
+              <div class="col-4">ชำนาญการ</div>
+              <div class="col-4">๒</div>
+              <div class="col-4">๓</div>
+            </div>
+            <div class="row">
+              <div class="col-4">ปฏิบัติการ</div>
+              <div class="col-4">๑</div>
+              <div class="col-4">๒</div>
+            </div>
+          </div>
+        </div>
+        <div class="row text-center">
+          <div class="col-3 flex justify-center items-center">ทั่วไป</div>
+          <div class="col-9">
+            <div class="row">
+              <div class="col-4">ทักษะพิเศษ</div>
+              <div class="col-4">๔</div>
+              <div class="col-4">๔</div>
+            </div>
+            <div class="row">
+              <div class="col-4">อาวุโส</div>
+              <div class="col-4">๓</div>
+              <div class="col-4">๓</div>
+            </div>
+            <div class="row">
+              <div class="col-4">ชำนาญงาน</div>
+              <div class="col-4">๒</div>
+              <div class="col-4">๒</div>
+            </div>
+            <div class="row">
+              <div class="col-4">ปฏิบัติงาน</div>
+              <div class="col-4">๑</div>
+              <div class="col-4">๑</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </q-card>
+  </div>
 </template>
+
+<style scoped lang="scss">
+.display-table {
+  & .row:not(:last-child) {
+    border-bottom: 1px solid black;
+  }
+
+  & [class^="col-"]:not(:last-child) {
+    border-right: 1px solid black;
+  }
+}
+</style>