diff --git a/src/modules/14_KPI/components/competency/01ListCompetency.vue b/src/modules/14_KPI/components/competency/01ListCompetency.vue
new file mode 100644
index 000000000..1c3bb15be
--- /dev/null
+++ b/src/modules/14_KPI/components/competency/01ListCompetency.vue
@@ -0,0 +1,246 @@
+<script setup lang="ts">
+import { ref, onMounted } from "vue";
+import type { QTableProps } from "quasar";
+import { useCounterMixin } from "@/stores/mixin";
+import { useQuasar } from "quasar";
+import { useRouter } from "vue-router";
+
+import type{ DataOption } from '@/modules/14_KPI/interface/index/Main'
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+
+const router = useRouter()
+const rows = ref<any>()
+
+const competencyTypeOp = ref<DataOption[]>([
+  {
+    id:'ID1',
+    name:'สมรรถนะหลัก',
+  },
+  {
+    id:'ID2',
+    name:'สมรรถนะประจำกลุ่มงาน',
+  },
+  {
+    id:'ID3',
+    name:'สมรรถนะประจำกลุ่มงาน',
+  },
+  {
+    id:'ID4',
+    name:'สมรรถนะประจำผู้บริหารกรุงเทพมหานคร',
+  },
+  {
+    id:'ID5',
+    name:'สมรรถนะเฉพาะสำหรับตำแหน่ง ผอ.เขต ผช.ผอ.เขต และหัวหน้าฝ่ายในสังกัด สนง.เขต',
+  },
+  {
+    id:'ID6',
+    name:'สมรรถนะเฉพาะสำหรับตำแหน่งผู้ตรวจราชการ กทม. และผู้ตรวจราชการ',
+  },
+])
+const column = [
+  {
+    name: "competency",
+    align: "left",
+    label: "ชื่อสมรรถนะ",
+    sortable: true,
+    field: "competency",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+] as const satisfies QTableProps["columns"];
+
+const $q = useQuasar();
+const mixin = useCounterMixin();
+const { dialogRemove, messageError, showLoader, hideLoader, success } = mixin;
+
+const competencyType = ref<string>('ID1')
+const filterKeyword = ref<string>("");
+
+const visibleColumns = ref<string[]>([
+  "competency",
+]);
+
+/** ดึงข้อมูล */
+async function getData() {
+  const data = [
+    {
+      id:'ID1',
+      competency:'รายการสมรรถะ 1'
+    },
+    {
+      id:'ID2',
+      competency:'รายการสมรรถะ 2'
+    },
+  ]
+  rows.value = data
+  // showLoader();
+  // await http
+  //   .get(config.API.orgPrefix)
+  //   .then(async (res) => {
+  //   })
+  //   .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 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 onAdd(){
+  router.push(`/KPI-competency/add`)
+}
+
+onMounted(async () => {
+  getData();
+});
+</script>
+
+<template>
+  <q-toolbar style="padding: 0">
+    <q-select
+    v-model="competencyType"
+    outlined
+    label="ประเภทสมรรถนะ"
+    dense
+    option-label="name"
+    option-value="id"
+    :options="competencyTypeOp"
+    style="min-width: 200px"
+    emit-value
+    map-options
+    />
+    <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-select
+        v-model="visibleColumns"
+        multiple
+        outlined
+        dense
+        options-dense
+        :display-value="$q.lang.table.columns"
+        emit-value
+        map-options
+        :options="column"
+        option-value="name"
+        options-cover
+        style="min-width: 150px"
+      />
+    </div>
+  </q-toolbar>
+
+  <d-table
+    ref="table"
+    :columns="column"
+    :rows="rows"
+    :filter="filterKeyword"
+    row-key="id"
+    flat
+    bordered
+    :paging="true"
+    dense
+    class="custom-header-table"
+    :visible-columns="visibleColumns"
+  >
+    <template v-slot:header="props">
+      <q-tr :props="props">
+        <q-th v-for="col in props.cols" :key="col.name" :props="props">
+          <span class="text-weight-medium">{{ col.label }}</span>
+        </q-th>
+        <q-th auto-width />
+      </q-tr>
+    </template>
+    <template v-slot:body="props">
+      <q-tr :props="props" class="cursor-pointer">
+        <q-td v-for="col in props.cols" :key="col.id">
+          {{ col.value }}
+        </q-td>
+        <q-td auto-width>
+          <!-- <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;
+              }
+            "
+          >
+            <q-tooltip>แก้ไขข้อมูล</q-tooltip>
+          </q-btn> -->
+          <q-btn
+            color="red"
+            flat
+            dense
+            round
+            size="12px"
+            icon="mdi-delete"
+            clickable
+            @click.stop="
+              dialogRemove($q, async () => await deleteData(props.row.id))
+            "
+            v-close-popup
+          >
+            <q-tooltip>ลบข้อมูล</q-tooltip>
+          </q-btn>
+        </q-td>
+      </q-tr>
+    </template>
+  </d-table>
+</template>
diff --git a/src/modules/14_KPI/components/competency/02ListLinkPosition.vue b/src/modules/14_KPI/components/competency/02ListLinkPosition.vue
new file mode 100644
index 000000000..5f8a88812
--- /dev/null
+++ b/src/modules/14_KPI/components/competency/02ListLinkPosition.vue
@@ -0,0 +1,3 @@
+<template>
+  <div>เชื่อมโยงกับตําแหน่ง</div>
+</template>
diff --git a/src/modules/14_KPI/components/competency/03ListLinkGroup.vue b/src/modules/14_KPI/components/competency/03ListLinkGroup.vue
new file mode 100644
index 000000000..3aa701266
--- /dev/null
+++ b/src/modules/14_KPI/components/competency/03ListLinkGroup.vue
@@ -0,0 +1,3 @@
+<template>
+  <div>เชื่อมโยงกับกลุ่มงาน</div>
+</template>
diff --git a/src/modules/14_KPI/components/competency/AddPage.vue b/src/modules/14_KPI/components/competency/AddPage.vue
new file mode 100644
index 000000000..2cb622d6b
--- /dev/null
+++ b/src/modules/14_KPI/components/competency/AddPage.vue
@@ -0,0 +1,171 @@
+<script setup lang="ts">
+import { ref, reactive } from "vue";
+import { useRouter } from "vue-router";
+
+import type { DataOption } from "@/modules/14_KPI/interface/index/Main";
+import type { FormCompetency } from "@/modules/14_KPI/interface/request/Main";
+
+const router = useRouter();
+
+const formData = reactive<FormCompetency>({
+  competencyType: "",
+  competencyName: "",
+  definition: "",
+  level_1: "",
+  level_2: "",
+  level_3: "",
+  level_4: "",
+  level_5: "",
+  evaluation: "",
+});
+
+const competencyTypeOp = ref<DataOption[]>([
+  {
+    id: "ID1",
+    name: "สมรรถนะหลัก",
+  },
+  {
+    id: "ID2",
+    name: "สมรรถนะประจำกลุ่มงาน",
+  },
+  {
+    id: "ID3",
+    name: "สมรรถนะประจำกลุ่มงาน",
+  },
+  {
+    id: "ID4",
+    name: "สมรรถนะประจำผู้บริหารกรุงเทพมหานคร",
+  },
+  {
+    id: "ID5",
+    name: "สมรรถนะเฉพาะสำหรับตำแหน่ง ผอ.เขต ผช.ผอ.เขต และหัวหน้าฝ่ายในสังกัด สนง.เขต",
+  },
+  {
+    id: "ID6",
+    name: "สมรรถนะเฉพาะสำหรับตำแหน่งผู้ตรวจราชการ กทม. และผู้ตรวจราชการ",
+  },
+]);
+
+/** บันทึก */
+function onSubmit() {}
+</script>
+
+<template>
+  <div>
+    <q-btn
+      icon="mdi-arrow-left"
+      unelevated
+      round
+      dense
+      flat
+      color="primary"
+      class="q-mr-sm"
+      @click="router.go(-1)"
+    />
+    <span class="toptitle text-dark">เพิ่มสมรรถนะ</span>
+  </div>
+  <q-card flat bordered>
+    <q-form greedy @submit.prevent @validation-success="onSubmit">
+      <q-card-section>
+        <div class="row q-col-gutter-sm">
+          <div class="col-12">
+            <q-select
+              v-model="formData.competencyType"
+              outlined
+              label="เลือกประเภทสมรรถนะ"
+              dense
+              option-label="name"
+              option-value="id"
+              :options="competencyTypeOp"
+              emit-value
+              map-options
+              :rules="[(val:string) => !!val || `${'กรุณาเลือกประเภทสมรรถนะ'}`,]"
+              hide-bottom-space
+            />
+          </div>
+          <div class="col-12">
+            <q-input
+              v-model="formData.competencyName"
+              dense
+              outlined
+              label="ชื่อสมรรถนะ"
+              :rules="[(val:string) => !!val || `${'กรุณากรอกชื่อสมรรถนะ'}`,]"
+              hide-bottom-space
+            />
+          </div>
+          <div class="col-12">
+            <q-input
+              v-model="formData.definition"
+              label="คำจำกัดความ"
+              dense
+              type="textarea"
+              outlined
+              :rules="[(val:string) => !!val || `${'กรุณากรอกคำจำกัดความ'}`,]"
+              hide-bottom-space
+            />
+          </div>
+          <div class="col-12">
+            <q-card flat bordered>
+              <q-item-section class="bg-grey-4">
+                <div
+                  class="row items-center text-dark text-body2 text-weight-medium"
+                >
+                  <div class="col-3 text-center">
+                    <span>ระดับสมรรถนะ</span>
+                  </div>
+                  <div class="col-9">
+                    <span>คำอธิบายระดับ/พฤติกรรมที่คาดหวัง/พฤติกรรมย่อย</span>
+                  </div>
+                </div>
+              </q-item-section>
+              <q-separator />
+              <q-item-section>
+                <div class="row q-pa-sm">
+                  <div
+                    class="col-3 text-center self-center text-body1 text-weight-medium"
+                  >
+                    <span>1</span>
+                  </div>
+                  <div class="col-9">
+                    <q-input
+                      v-model="formData.level_1"
+                      label="คำอธิบาย"
+                      dense
+                      outlined
+                    />
+                  </div>
+                </div>
+              </q-item-section>
+            </q-card>
+          </div>
+
+          <div class="col-12">
+            <q-input
+              v-model="formData.definition"
+              label="กำหนดเกณฑ์การประเมิน"
+              dense
+              type="textarea"
+              outlined
+              :rules="[(val:string) => !!val || `${'กรุณากรอกกำหนดเกณฑ์การประเมิน'}`,]"
+              hide-bottom-space
+            />
+          </div>
+        </div>
+      </q-card-section>
+      <q-separator />
+      <div class="text-right q-pa-sm">
+        <q-btn
+          dense
+          unelevated
+          label="บันทึก"
+          id="onSubmit"
+          type="submit"
+          color="public"
+          class="q-px-md"
+        >
+          <q-tooltip>บันทึกข้อมูล</q-tooltip>
+        </q-btn>
+      </div>
+    </q-form>
+  </q-card>
+</template>
diff --git a/src/modules/14_KPI/interface/index/Main.ts b/src/modules/14_KPI/interface/index/Main.ts
index e4ea7770c..4c53fb84e 100644
--- a/src/modules/14_KPI/interface/index/Main.ts
+++ b/src/modules/14_KPI/interface/index/Main.ts
@@ -1 +1,6 @@
-export type {};
+interface DataOption {
+    id: string;
+    name: string;
+  }
+
+export type {DataOption};
diff --git a/src/modules/14_KPI/interface/request/Main.ts b/src/modules/14_KPI/interface/request/Main.ts
index e4ea7770c..800fa3163 100644
--- a/src/modules/14_KPI/interface/request/Main.ts
+++ b/src/modules/14_KPI/interface/request/Main.ts
@@ -1 +1,13 @@
-export type {};
+interface FormCompetency {
+  competencyType: string;
+  competencyName: string;
+  definition: string;
+  level_1: string;
+  level_2: string;
+  level_3: string;
+  level_4: string;
+  level_5: string;
+  evaluation: string;
+}
+
+export type { FormCompetency };
diff --git a/src/modules/14_KPI/router.ts b/src/modules/14_KPI/router.ts
index 11e95a72e..a4bf5872d 100644
--- a/src/modules/14_KPI/router.ts
+++ b/src/modules/14_KPI/router.ts
@@ -4,6 +4,7 @@ const IndicatorByPlan = () =>
 const IndicatorByRole = () =>
   import("@/modules/14_KPI/views/indicatorByRole.vue");
 const competencyPage = () => import("@/modules/14_KPI/views/competency.vue");
+const competencyAddPage = () => import("@/modules/14_KPI/components/competency/AddPage.vue");
 
 export default [
   {
@@ -46,4 +47,14 @@ export default [
       Role: "evaluateKPI",
     },
   },
+  {
+    path: "/KPI-competency/add",
+    name: "KPICompetencyAdd",
+    component: competencyAddPage,
+    meta: {
+      Auth: true,
+      Key: [1.1],
+      Role: "evaluateKPI",
+    },
+  },
 ];
diff --git a/src/modules/14_KPI/views/competency.vue b/src/modules/14_KPI/views/competency.vue
index ddec68619..4e574e0c2 100644
--- a/src/modules/14_KPI/views/competency.vue
+++ b/src/modules/14_KPI/views/competency.vue
@@ -1,5 +1,64 @@
+<script setup lang="ts">
+import { ref, onMounted } from "vue";
+import ListCompetency from "@/modules/14_KPI/components/competency/01ListCompetency.vue";
+import ListLinkPosition from "@/modules/14_KPI/components/competency/02ListLinkPosition.vue";
+import ListLinkGroup from "@/modules/14_KPI/components/competency/03ListLinkGroup.vue";
+
+
+const currentTab = ref<string>("list_competency");
+const tabs = ref<Array<any>>([]);
+
+onMounted(() => {
+  const tab = [
+    { label: "รายการสมรรถนะ", value: "list_competency" },
+    { label: "เชื่อมโยงกับตําแหน่ง", value: "list_linkPosition" },
+    { label: "เชื่อมโยงกับกลุ่มงาน", value: "list_linkGroup" },
+  ];
+  tabs.value = tab;
+});
+</script>
+
 <template>
-    <div>
-        สมรรถนะ
+  <div class="toptitle text-dark col-12 row items-center">
+    สมรรถนะ
+  </div>
+
+  <q-card flat bordered>
+    <div class="text-subtitle1 text-grey-9">
+      <q-tabs
+        dense
+        v-model="currentTab"
+        align="left"
+        indicator-color="primary"
+        active-color="primary bg-teal-1"
+        inline-label
+        class="text-body2 text-grey-7"
+      >
+        <q-tab
+          v-for="tab in tabs"
+          :key="tab.value"
+          v-on:click="currentTab = tab.value"
+          :label="tab.label"
+          :name="tab.value"
+          class="q-py-xs"
+        />
+      </q-tabs>
+      <q-separator />
+      <!-- person -->
+
+      <q-tab-panels v-model="currentTab" animated>
+        <q-tab-panel name="list_competency">
+          <ListCompetency v-if="currentTab == 'list_competency'" />
+        </q-tab-panel>
+        <q-tab-panel name="list_linkPosition">
+          <ListLinkPosition v-if="currentTab == 'list_linkPosition'" />
+        </q-tab-panel>
+        <q-tab-panel name="list_linkGroup">
+          <ListLinkGroup v-if="currentTab == 'list_linkGroup'" />
+        </q-tab-panel>
+      </q-tab-panels>
     </div>
-</template>
\ No newline at end of file
+  </q-card>
+</template>
+
+<style scoped></style>