diff --git a/src/api/14_KPI/api.KPI.ts b/src/api/14_KPI/api.KPI.ts
index 4121a0153..0bacb9df1 100644
--- a/src/api/14_KPI/api.KPI.ts
+++ b/src/api/14_KPI/api.KPI.ts
@@ -93,6 +93,7 @@ export default {
   achievementDevByid: (id: string) =>
     `${KpiUser}/achievement/development/admin/detail/${id}`,
 
-  indicatorSummary:`${kpiPlan}/summary/indicator`
+  indicatorSummary:`${kpiPlan}/summary/indicator`,
+  capacitySummary:`${kpiCapacity}/summary`
   
 };
diff --git a/src/modules/01_masterdata/views/competency.vue b/src/modules/01_masterdata/views/competency.vue
index 511137d3a..5de236eda 100644
--- a/src/modules/01_masterdata/views/competency.vue
+++ b/src/modules/01_masterdata/views/competency.vue
@@ -7,10 +7,72 @@ import ListLinkGroup from "@/modules/01_masterdata/components/competency/03ListL
 import ListCriteria from "@/modules/01_masterdata/components/competency/04ListCriteria.vue";
 import ListDetail from "@/modules/01_masterdata/components/competency/05ListDetail.vue";
 
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { useCounterMixin } from "@/stores/mixin";
+import { useQuasar } from "quasar";
+
+const $q = useQuasar();
+const { showLoader, hideLoader, dialogRemove, success, messageError } =
+  useCounterMixin();
+
 const currentTab = ref<string>("list_competency");
 const tabs = ref<Array<any>>([]);
 
+const indicatorTotal = ref<any[]>([
+  {
+    value: "HEAD",
+    label: "สมรรถนะหลัก",
+    color: "edit",
+  },
+  {
+    value: "GROUP",
+    label: "สมรรถนะประจำกลุ่มงาน",
+    color: "primary",
+  },
+  {
+    value: "EXECUTIVE",
+    label: "สมรรถนะประจำผู้บริหารกรุงเทพมหานคร",
+    color: "blue",
+  },
+  {
+    value: "total",
+    label: "ทั้งหมด",
+    color: "red",
+  },
+  {
+    value: "DIRECTOR",
+    label:
+      "สมรรถนะเฉพาะสำหรับตำแหน่ง ผอ.เขต ผช.ผอ.เขต และหัวหน้าฝ่ายในสังกัด สนง.เขต",
+    color: "deep-purple",
+  },
+  {
+    value: "INSPECTOR",
+    label: "สมรรถนะเฉพาะสำหรับตำแหน่งผู้ตรวจราชการ กทม. และผู้ตรวจราชการ",
+    color: "orange",
+  },
+]);
+
+function getTotal() {
+  http
+    .get(config.API.capacitySummary)
+    .then((res) => {
+      const data = res.data.result;
+      indicatorTotal.value.forEach((i) => {
+        const map = data.find((item: any) => item.type === i.value);
+        if (map) i.total = map.total;
+      });
+      const totalSum = data.reduce((i:any, j:any) => i + +j.total, 0);
+      indicatorTotal.value.find((i) => i.value === "total").total =
+        totalSum.toString();
+    })
+    .catch((e) => {
+      messageError($q, e);
+    });
+}
+
 onMounted(() => {
+  getTotal();
   const tab = [
     { label: "รายการสมรรถนะ", value: "list_competency" },
     { label: "กลุ่มงาน", value: "list_linkPosition" },
@@ -25,6 +87,38 @@ onMounted(() => {
 <template>
   <div class="toptitle text-dark col-12 row items-center">สมรรถนะ</div>
   <q-card flat bordered>
+    <div class="row">
+      <div class="col-12">
+        <q-card class="q-pa-xs bg-grey-1">
+          <div class="row q-col-gutter-xs">
+            <div
+              v-for="(i, index) in indicatorTotal"
+              :class="
+                index > 3
+                  ? 'col-12 col-sm-12 col-md-6 col-lg-6'
+                  : 'col-12 col-sm-12 col-md-6 col-lg-3'
+              "
+            >
+              <div
+                class="bg-white rounded-borders q-pa-sm"
+                style="border: 1px solid #ededed"
+              >
+                <div class="row items-center no-wrap text-weight-medium">
+                  {{ i.label }}
+                  <q-space />
+                  <q-badge
+                    :color="i.color"
+                    text-color="white"
+                    :label="i.total"
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+        </q-card>
+      </div>
+    </div>
+    <q-separator />
     <div class="text-subtitle1 text-grey-9">
       <q-tabs
         dense