diff --git a/src/api/14_KPI/api.KPI.ts b/src/api/14_KPI/api.KPI.ts
index 79f02b1de..8eff14fdb 100644
--- a/src/api/14_KPI/api.KPI.ts
+++ b/src/api/14_KPI/api.KPI.ts
@@ -4,6 +4,7 @@ const kpiPeriod = `${env.API_URI}/kpi/period`;
 const kpiEvaluation = `${env.API_URI}/kpi/evaluation`;
 const kpiGroup = `${env.API_URI}/kpi/group`;
 const kpiPlan = `${env.API_URI}/kpi/plan`;
+const kpiCapacity = `${env.API_URI}/kpi/capacity`;
 export default {
   KPI,
   /** รอบการประเมินผล*/
@@ -20,4 +21,7 @@ export default {
   kpiGroupById: (id: string) => `${kpiGroup}/${id}`,
   kpiPlan,
   kpiPlanById: (id: string) => `${kpiPlan}/${id}`,
+
+  /** สมรรถนะ */
+  kpiCapacity,
 };
diff --git a/src/modules/14_KPI/components/competency/01ListCompetency.vue b/src/modules/14_KPI/components/competency/01ListCompetency.vue
index 93f415bc2..ef260ec99 100644
--- a/src/modules/14_KPI/components/competency/01ListCompetency.vue
+++ b/src/modules/14_KPI/components/competency/01ListCompetency.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, onMounted } from "vue";
+import { ref, onMounted, reactive } from "vue";
 import type { QTableProps } from "quasar";
 import { useCounterMixin } from "@/stores/mixin";
 import { useQuasar } from "quasar";
@@ -12,9 +12,10 @@ import http from "@/plugins/http";
 import config from "@/app.config";
 
 const store = useKPIDataStore();
-
 const router = useRouter();
-const rows = ref<any>();
+const $q = useQuasar();
+const mixin = useCounterMixin();
+const { dialogRemove, messageError, showLoader, hideLoader, success } = mixin;
 
 const competencyTypeOp = ref<DataOption[]>([
   {
@@ -40,84 +41,67 @@ const competencyTypeOp = ref<DataOption[]>([
 ]);
 const columns = ref<QTableProps["columns"]>([
   {
-    name: "competency",
+    name: "name",
     align: "left",
     label: "ชื่อสมรรถนะ",
     sortable: true,
-    field: "competency",
+    field: "name",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     sort: (a: string, b: string) =>
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
 ]);
+const visibleColumns = ref<string[]>(["name"]);
 
-const $q = useQuasar();
-const mixin = useCounterMixin();
-const { dialogRemove, messageError, showLoader, hideLoader, success } = mixin;
-
-const filterKeyword = ref<string>("");
-
-const visibleColumns = ref<string[]>(["competency"]);
+const rows = ref<any[]>([]);
+const formQuery = reactive({
+  page: 1,
+  pageSize: 10,
+  keyword: "",
+});
+const totalList = ref<number>(1); //จำนวนข้อมูลรายการ
 
 /** ดึงข้อมูล */
-async function getData() {
-  const data = [
-    {
-      id: "1",
-      competency: "รายการสมรรถะ 1",
-    },
-    {
-      id: "2",
-      competency: "รายการสมรรถะ 2",
-    },
-  ];
-  rows.value = data;
-  // showLoader();
-  // await http
-  //   .get(config.API.orgPrefix)
-  //   .then(async (res) => {
-  //   })
-  //   .catch((err) => {
-  //     messageError($q, err);
-  //   })
-  //   .finally(() => {
-  //     hideLoader();
-  //   });
+async function fetchList() {
+  showLoader();
+  await http
+    .get(
+      config.API.kpiCapacity +
+        `?page=${formQuery.page}&pageSize=${formQuery.pageSize}&keyword=${formQuery.keyword}&type=${store.competencyType}`
+    )
+    .then(async (res) => {
+      const data = res.data.result.data;
+      totalList.value = Math.ceil(res.data.result.total / formQuery.pageSize);
+      rows.value = data;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
 }
 
-async function editData(id: string) {
-  console.log(id);
-  // await http
-  //   .put(config.API.orgPrefixId(id), {
-  //     name: prefix.value,
-  //   })
-  //   .then(() => {
-  //     getData();
-  //     success($q, "บันทึกข้อมูลสำเร็จ");
-  //   })
-  //   .catch((err) => {
-  //     messageError($q, err);
-  //   })
-  //   .finally(() => {
-  //     hideLoader();
-  //   });
+async function onViewDetail(id: string) {
+  router.push(`/KPI-competency/${id}`);
 }
 
-async function deleteData(id: string) {
-  console.log(id);
-  // await http
-  //   .delete(config.API.orgPrefixId(id))
-  //   .then(() => {
-  //     getData();
-  //     success($q, "ลบข้อมูลสำเร็จ");
-  //   })
-  //   .catch((err) => {
-  //     messageError($q, err);
-  //   })
-  //   .finally(() => {
-  //     hideLoader();w
-  //   });
+function deleteData(id: string) {
+  dialogRemove($q, () => {
+    http
+      .delete(config.API.kpiCapacity + `/${id}`)
+      .then(() => {
+        fetchList();
+        success($q, "ลบข้อมูลสำเร็จ");
+      })
+      .catch((err) => {
+        messageError($q, err);
+      })
+      .finally(() => {
+        hideLoader();
+      });
+  });
 }
 
 /** เปลี่ยนเป็นหน้าเพิ่มข้อมูล */
@@ -125,8 +109,13 @@ function onAdd() {
   router.push(`/KPI-competency/add`);
 }
 
-onMounted(async () => {
-  getData();
+function fetchNewList() {
+  formQuery.page = 1;
+  fetchList();
+}
+
+onMounted(() => {
+  fetchList();
 });
 </script>
 
@@ -143,13 +132,30 @@ onMounted(async () => {
       style="min-width: 200px"
       emit-value
       map-options
+      @update:model-value="fetchNewList"
     />
     <q-btn flat round color="primary" icon="add" @click="onAdd()">
       <q-tooltip> เพิ่มข้อมูล </q-tooltip>
     </q-btn>
     <q-space />
     <div class="row q-gutter-sm">
-      <q-input outlined dense v-model="filterKeyword" label="ค้นหา"></q-input>
+      <q-input
+        outlined
+        dense
+        v-model="formQuery.keyword"
+        label="ค้นหา"
+        @keyup.enter="fetchNewList()"
+      >
+        <template v-slot:append>
+          <q-icon v-if="formQuery.keyword == ''" name="search" />
+          <q-icon
+            v-if="formQuery.keyword !== ''"
+            name="clear"
+            class="cursor-pointer"
+            @click="(formQuery.keyword = ''), fetchNewList()"
+          />
+        </template>
+      </q-input>
       <q-select
         v-model="visibleColumns"
         multiple
@@ -171,7 +177,6 @@ onMounted(async () => {
     ref="table"
     :columns="columns"
     :rows="rows"
-    :filter="filterKeyword"
     row-key="id"
     flat
     bordered
@@ -194,26 +199,19 @@ onMounted(async () => {
           {{ col.value }}
         </q-td>
         <q-td auto-width>
-          <!-- <q-btn
+          <q-btn
             color="edit"
             flat
             dense
             round
-            class="q-mr-xs"
             size="12px"
             icon="edit"
             clickable
-            @click.stop="
-              () => {
-                dialogStatus = 'edit';
-                dialog = true;
-                prefix = props.row.name;
-                editId = props.row.id;
-              }
-            "
+            @click.stop="onViewDetail(props.row.id)"
+            v-close-popup
           >
-            <q-tooltip>แก้ไขข้อมูล</q-tooltip>
-          </q-btn> -->
+            <q-tooltip>แก้ไข</q-tooltip>
+          </q-btn>
           <q-btn
             color="red"
             flat
@@ -222,9 +220,7 @@ onMounted(async () => {
             size="12px"
             icon="mdi-delete"
             clickable
-            @click.stop="
-              dialogRemove($q, async () => await deleteData(props.row.id))
-            "
+            @click.stop="deleteData(props.row.id)"
             v-close-popup
           >
             <q-tooltip>ลบข้อมูล</q-tooltip>
@@ -232,5 +228,18 @@ onMounted(async () => {
         </q-td>
       </q-tr>
     </template>
+    <template v-slot:pagination="scope">
+      <q-pagination
+        v-model="formQuery.page"
+        active-color="primary"
+        color="dark"
+        :max="Number(totalList)"
+        size="sm"
+        boundary-links
+        direction-links
+        :max-pages="5"
+        @update:model-value="fetchList"
+      ></q-pagination>
+    </template>
   </d-table>
 </template>
diff --git a/src/modules/14_KPI/components/competency/Forms/Main.vue b/src/modules/14_KPI/components/competency/Forms/Main.vue
index f77c04c2d..cf0d3a7c7 100644
--- a/src/modules/14_KPI/components/competency/Forms/Main.vue
+++ b/src/modules/14_KPI/components/competency/Forms/Main.vue
@@ -1,21 +1,27 @@
 div
 <script setup lang="ts">
-import { ref, reactive } from "vue";
-
-import { useCounterMixin } from "@/stores/mixin";
-import { useKPIDataStore } from "@/modules/14_KPI/store/KPIStore";
-import { useRouter } from "vue-router";
+import { ref, reactive, onMounted } from "vue";
+import { useRouter, useRoute } from "vue-router";
 import { useQuasar } from "quasar";
-
 import http from "@/plugins/http";
 import config from "@/app.config";
 
+/** importStore*/
+import { useCounterMixin } from "@/stores/mixin";
+import { useKPIDataStore } from "@/modules/14_KPI/store/KPIStore";
+
+/**use*/
 const $q = useQuasar();
 const mixin = useCounterMixin();
 const { dialogConfirm, showLoader, hideLoader, success, messageError } = mixin;
 const router = useRouter();
+const route = useRoute();
 const store = useKPIDataStore();
 
+const competencyId = ref<string>(
+  route.params.id ? route.params.id.toString() : ""
+);
+
 const formData = reactive({
   competencyType: "",
   competencyName: "",
@@ -28,8 +34,26 @@ const formData = reactive({
   ],
 });
 
-function ocClickAdd() {
-  // if (formData.levels.length !== 6) {
+function fetchDetail() {
+  showLoader();
+  http
+    .get(config.API.kpiCapacity + `/${competencyId.value}`)
+    .then((res) => {
+      const data = res.data.result;
+      formData.competencyType = data.type;
+      formData.competencyName = data.name;
+      formData.definition = data.description;
+      formData.levels = data.capacityDetails;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+function onClickAddLevels() {
   const levelName = formData.levels.length + 1;
   const data = {
     level: levelName.toString(),
@@ -37,31 +61,44 @@ function ocClickAdd() {
   };
   formData.levels.push(data);
   formData.levels[formData.levels.length].level = levelName.toString();
-  // }
 }
 
 function onSubmit() {
-  dialogConfirm($q, () => {
-    const body = {
-      competencyType: store.competencyType,
-      competencyName: formData.competencyName,
-      definition: formData.definition,
-      levels: formData.levels,
+  dialogConfirm($q, async () => {
+    const formBody = {
+      type: store.competencyType,
+      name: formData.competencyName,
+      description: formData.definition,
+      capacityDetails: formData.levels,
     };
-    // showLoader()
-    //   http
-    //   .put(config.API.???,body)
-    //   .then((res)=>{
-    //     success($q,'บันทึกสำเร็จ')
-    //     router.push(`/KPI-competency`)
-    //   }).catch((e)=>{
-    //     messageError($q,e)
-    //   }).finally(()=>{
-    //     hideLoader()
-    //   })
-    console.log(body);
+    try {
+      const url = competencyId.value
+        ? config.API.kpiCapacity + `/${competencyId.value}`
+        : config.API.kpiCapacity;
+      const method = competencyId.value ? "put" : "post";
+      await http[method](url, formBody);
+      if (!competencyId.value) {
+        router.push(`/KPI-competency`);
+      } else {
+        fetchDetail();
+      }
+      success($q, "บันทึกข้อมูลสำเร็จ");
+    } catch (err) {
+      messageError($q, err);
+    } finally {
+      hideLoader();
+    }
   });
 }
+
+function onDeleteLevels(index: number) {
+  formData.levels.splice(index, 1);
+}
+onMounted(() => {
+  if (competencyId.value) {
+    fetchDetail();
+  }
+});
 </script>
 
 <template>
@@ -137,7 +174,7 @@ function onSubmit() {
                       round
                       color="primary"
                       icon="add"
-                      @click="ocClickAdd"
+                      @click="onClickAddLevels"
                     >
                       <q-tooltip>เพิ่ม</q-tooltip></q-btn
                     >
@@ -172,49 +209,62 @@ function onSubmit() {
                 />
               </div>
               <div class="col-9">
-                <q-field
-                  class="q_field_p_none"
-                  ref="fieldRef"
-                  v-model="formData.levels[index].description"
-                  label-slot
-                  borderless
-                  :rules="[
-                    (val) =>
-                      !!val || 'กรุณากรอกพฤติกรรมที่คาดหวัง/พฤติกรรมย่อย',
-                  ]"
-                  hide-bottom-space
-                >
-                  <template #control>
-                    <q-editor
-                      class="full-width"
+                <div class="row q-col-gutter-md">
+                  <div class="col-11">
+                    <q-field
+                      class="q_field_p_none"
+                      ref="fieldRef"
                       v-model="formData.levels[index].description"
-                      :dense="$q.screen.lt.md"
-                      min-height="5rem"
-                      :toolbar="[
-                        [
-                          'bold',
-                          'italic',
-                          'strike',
-                          'underline',
-                          'subscript',
-                          'superscript',
-                        ],
-
-                        ['unordered', 'ordered'],
+                      label-slot
+                      borderless
+                      :rules="[
+                        (val) =>
+                          !!val || 'กรุณากรอกพฤติกรรมที่คาดหวัง/พฤติกรรมย่อย',
                       ]"
-                      :fonts="{
-                        arial: 'Arial',
-                        arial_black: 'Arial Black',
-                        comic_sans: 'Comic Sans MS',
-                        courier_new: 'Courier New',
-                        impact: 'Impact',
-                        lucida_grande: 'Lucida Grande',
-                        times_new_roman: 'Times New Roman',
-                        verdana: 'Verdana',
-                      }"
-                    />
-                  </template>
-                </q-field>
+                      hide-bottom-space
+                    >
+                      <template #control>
+                        <q-editor
+                          class="full-width"
+                          v-model="formData.levels[index].description"
+                          :dense="$q.screen.lt.md"
+                          min-height="5rem"
+                          :toolbar="[
+                            [
+                              'bold',
+                              'italic',
+                              'strike',
+                              'underline',
+                              'subscript',
+                              'superscript',
+                            ],
+
+                            ['unordered', 'ordered'],
+                          ]"
+                        />
+                      </template>
+                    </q-field>
+                  </div>
+                  <div class="col-1 text-center">
+                    <q-btn
+                      dense
+                      flat
+                      round
+                      color="red"
+                      icon="delete"
+                      @click="onDeleteLevels(index)"
+                      v-if="
+                        (store.competencyType === 'HEAD' && index > 4) ||
+                        (store.competencyType === 'GROUP' && index > 4) ||
+                        store.competencyType === 'EXECUTIVE' ||
+                        store.competencyType === 'DIRECTOR' ||
+                        store.competencyType === 'INSPECTOR'
+                      "
+                    >
+                      <q-tooltip>ลบ</q-tooltip></q-btn
+                    >
+                  </div>
+                </div>
               </div>
             </div>
           </q-card-section>
diff --git a/src/modules/14_KPI/router.ts b/src/modules/14_KPI/router.ts
index 20f02de45..c9401da72 100644
--- a/src/modules/14_KPI/router.ts
+++ b/src/modules/14_KPI/router.ts
@@ -102,4 +102,15 @@ export default [
       Role: "evaluateKPI",
     },
   },
+
+  {
+    path: "/KPI-competency/:id",
+    name: "KPICompetencyByid",
+    component: competencyAddPage,
+    meta: {
+      Auth: true,
+      Key: [1.1],
+      Role: "evaluateKPI",
+    },
+  },
 ];