diff --git a/src/modules/14_KPI/components/competency/01ListCompetency.vue b/src/modules/14_KPI/components/competency/01ListCompetency.vue
index 15a4da022..93f415bc2 100644
--- a/src/modules/14_KPI/components/competency/01ListCompetency.vue
+++ b/src/modules/14_KPI/components/competency/01ListCompetency.vue
@@ -18,23 +18,23 @@ const rows = ref<any>();
 
 const competencyTypeOp = ref<DataOption[]>([
   {
-    id: "ID1",
+    id: "HEAD",
     name: "สมรรถนะหลัก",
   },
   {
-    id: "ID2",
+    id: "GROUP",
     name: "สมรรถนะประจำกลุ่มงาน",
   },
   {
-    id: "ID3",
+    id: "EXECUTIVE",
     name: "สมรรถนะประจำผู้บริหารกรุงเทพมหานคร",
   },
   {
-    id: "ID4",
+    id: "DIRECTOR",
     name: "สมรรถนะเฉพาะสำหรับตำแหน่ง ผอ.เขต ผช.ผอ.เขต และหัวหน้าฝ่ายในสังกัด สนง.เขต",
   },
   {
-    id: "ID5",
+    id: "INSPECTOR",
     name: "สมรรถนะเฉพาะสำหรับตำแหน่งผู้ตรวจราชการ กทม. และผู้ตรวจราชการ",
   },
 ]);
@@ -64,11 +64,11 @@ const visibleColumns = ref<string[]>(["competency"]);
 async function getData() {
   const data = [
     {
-      id: "ID1",
+      id: "1",
       competency: "รายการสมรรถะ 1",
     },
     {
-      id: "ID2",
+      id: "2",
       competency: "รายการสมรรถะ 2",
     },
   ];
diff --git a/src/modules/14_KPI/components/competency/AddPage.vue b/src/modules/14_KPI/components/competency/AddPage.vue
index dd408e6f9..22ae8abe1 100644
--- a/src/modules/14_KPI/components/competency/AddPage.vue
+++ b/src/modules/14_KPI/components/competency/AddPage.vue
@@ -2,11 +2,12 @@
 import { ref, reactive } from "vue";
 import { useRouter } from "vue-router";
 
-import FormMain from "@/modules/14_KPI/components/competency/Forms/01_FormMain.vue";
-import FormGroup from "@/modules/14_KPI/components/competency/Forms/02_FormGroup.vue";
-import FormExecutive from "@/modules/14_KPI/components/competency/Forms/03_FormExecutive.vue";
-import FormExecutivePosition from "@/modules/14_KPI/components/competency/Forms/04_FormExecutivePosition.vue";
-import FormExecutiveLevel from "@/modules/14_KPI/components/competency/Forms/05_FormExecutiveLevel.vue";
+import Main from "@/modules/14_KPI/components/competency/Forms/Main.vue";
+// import FormMain from "@/modules/14_KPI/components/competency/Forms/01_FormMain.vue";
+// import FormGroup from "@/modules/14_KPI/components/competency/Forms/02_FormGroup.vue";
+// import FormExecutive from "@/modules/14_KPI/components/competency/Forms/03_FormExecutive.vue";
+// import FormExecutivePosition from "@/modules/14_KPI/components/competency/Forms/04_FormExecutivePosition.vue";
+// import FormExecutiveLevel from "@/modules/14_KPI/components/competency/Forms/05_FormExecutiveLevel.vue";
 import { useKPIDataStore } from "@/modules/14_KPI/store/KPIStore";
 
 import type { DataOption } from "@/modules/14_KPI/interface/index/Main";
@@ -29,23 +30,23 @@ const formData = reactive<FormCompetency>({
 
 const competencyTypeOp = ref<DataOption[]>([
   {
-    id: "ID1",
+    id: "HEAD",
     name: "สมรรถนะหลัก",
   },
   {
-    id: "ID2",
+    id: "GROUP",
     name: "สมรรถนะประจำกลุ่มงาน",
   },
   {
-    id: "ID3",
+    id: "EXECUTIVE",
     name: "สมรรถนะประจำผู้บริหารกรุงเทพมหานคร",
   },
   {
-    id: "ID4",
+    id: "DIRECTOR",
     name: "สมรรถนะเฉพาะสำหรับตำแหน่ง ผอ.เขต ผช.ผอ.เขต และหัวหน้าฝ่ายในสังกัด สนง.เขต",
   },
   {
-    id: "ID5",
+    id: "INSPECTOR",
     name: "สมรรถนะเฉพาะสำหรับตำแหน่งผู้ตรวจราชการ กทม. และผู้ตรวจราชการ",
   },
 ]);
@@ -108,134 +109,13 @@ function onSubmit() {
           />
         </div>
 
-        <FormMain v-if="store.competencyType === 'ID1'" />
+        <Main />
+        <!-- <FormMain v-if="store.competencyType === 'ID1'" />
         <FormGroup v-else-if="store.competencyType === 'ID2'" />
         <FormExecutive v-else-if="store.competencyType === 'ID3'" />
         <FormExecutivePosition v-else-if="store.competencyType === 'ID4'" />
-        <FormExecutiveLevel v-else-if="store.competencyType === 'ID5'" />
-
-        <!-- <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-card-section class="bg-grey-4">
-                <div
-                  class="row items-center text-dark text-body2 text-weight-medium"
-                >
-                  <div class="col-3">
-                    <div class="row items-center">
-                      <div class="col-1">
-                        <q-btn
-                          dense
-                          flat
-                          round
-                          color="primary"
-                          icon="add"
-                          @click="ocClickAdd"
-                        >
-                          <q-tooltip>เพิ่ม</q-tooltip></q-btn
-                        >
-                      </div>
-                      <div class="col-11 text-center">
-                        <span>ระดับสมรรถนะ</span>
-                      </div>
-                    </div>
-                  </div>
-                  <div class="col-4">
-                    <span>คำอธิบายระดับ/พฤติกรรมที่คาดหวัง/พฤติกรรมย่อย</span>
-                  </div>
-                </div>
-              </q-card-section>
-              <q-card-section>
-                <div
-                  class="row q-pa-sm"
-                  v-for="(items, index) in itemsFormCard"
-                  key="index"
-                >
-                  <div
-                    class="col-3 text-center self-center text-body1 text-weight-medium"
-                  >
-                    <span>{{ index + 1 }}</span>
-                  </div>
-                  <div class="col-9">
-                    <q-editor
-                      v-model="formData.level_1[index]"
-                      :dense="$q.screen.lt.md"
-                      min-height="5rem"
-                      :toolbar="[
-                        [
-                          'bold',
-                          'italic',
-                          'strike',
-                          'underline',
-                          'subscript',
-                          'superscript',
-                        ],
-
-                        ['unordered', 'ordered'],
-                      ]"
-                      :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',
-                      }"
-                    />
-                  </div>
-                </div>
-              </q-card-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> -->
+        <FormExecutiveLevel v-else-if="store.competencyType === 'ID5'" /> -->
       </div>
     </q-card-section>
-    <!-- <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/components/competency/Forms/Main.vue b/src/modules/14_KPI/components/competency/Forms/Main.vue
new file mode 100644
index 000000000..f77c04c2d
--- /dev/null
+++ b/src/modules/14_KPI/components/competency/Forms/Main.vue
@@ -0,0 +1,240 @@
+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 { useQuasar } from "quasar";
+
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+const $q = useQuasar();
+const mixin = useCounterMixin();
+const { dialogConfirm, showLoader, hideLoader, success, messageError } = mixin;
+const router = useRouter();
+const store = useKPIDataStore();
+
+const formData = reactive({
+  competencyType: "",
+  competencyName: "",
+  definition: "",
+  levels: [
+    {
+      level: "1",
+      description: "",
+    },
+  ],
+});
+
+function ocClickAdd() {
+  // if (formData.levels.length !== 6) {
+  const levelName = formData.levels.length + 1;
+  const data = {
+    level: levelName.toString(),
+    description: "",
+  };
+  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,
+    };
+    // showLoader()
+    //   http
+    //   .put(config.API.???,body)
+    //   .then((res)=>{
+    //     success($q,'บันทึกสำเร็จ')
+    //     router.push(`/KPI-competency`)
+    //   }).catch((e)=>{
+    //     messageError($q,e)
+    //   }).finally(()=>{
+    //     hideLoader()
+    //   })
+    console.log(body);
+  });
+}
+</script>
+
+<template>
+  <q-form greedy @submit.prevent @validation-success="onSubmit" class="col-12">
+    <div class="row">
+      <div class="col-12">
+        <q-input
+          v-model="formData.competencyName"
+          dense
+          outlined
+          label="ชื่อสมรรถนะ"
+          :rules="[(val:string) => !!val || `${'กรุณากรอกชื่อสมรรถนะ'}`,]"
+          hide-bottom-space
+        />
+      </div>
+      <q-card-section class="col-12 q-px-none">
+        <div>
+          <q-field
+            class="q_field_p_none"
+            ref="fieldRef"
+            v-model="formData.definition"
+            label-slot
+            borderless
+            :rules="[(val) => !!val || 'กรุณากรอกคำจำกัดความสมรรถนะ']"
+            hide-bottom-space
+          >
+            <template #control>
+              <q-editor
+                class="full-width"
+                v-model="formData.definition"
+                :dense="$q.screen.lt.md"
+                min-height="7rem"
+                placeholder="คำจำกัดความสมรรถนะ"
+                :toolbar="[
+                  [
+                    'bold',
+                    'italic',
+                    'strike',
+                    'underline',
+                    'subscript',
+                    'superscript',
+                  ],
+
+                  ['unordered', 'ordered'],
+                ]"
+                :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>
+        </div>
+      </q-card-section>
+      <div class="col-12">
+        <q-card flat bordered>
+          <q-card-section class="bg-grey-4">
+            <div
+              class="row items-center text-dark text-body2 text-weight-medium"
+            >
+              <div class="col-3">
+                <div class="row items-center">
+                  <div class="col-1">
+                    <q-btn
+                      dense
+                      flat
+                      round
+                      color="primary"
+                      icon="add"
+                      @click="ocClickAdd"
+                    >
+                      <q-tooltip>เพิ่ม</q-tooltip></q-btn
+                    >
+                  </div>
+                  <div class="col-11 text-center">
+                    <span>ระดับสมรรถนะ</span>
+                  </div>
+                </div>
+              </div>
+              <div class="col-4">
+                <span>พฤติกรรมที่คาดหวัง/พฤติกรรมย่อย</span>
+              </div>
+            </div>
+          </q-card-section>
+          <q-card-section>
+            <div
+              class="row q-pa-sm"
+              v-for="(items, index) in formData.levels"
+              key="index"
+            >
+              <div class="col-3 align-center q-pr-lg">
+                <q-input
+                  :readonly="
+                    store.competencyType === 'HEAD' ||
+                    store.competencyType === 'GROUP'
+                  "
+                  v-model="formData.levels[index].level"
+                  dense
+                  outlined
+                  :rules="[(val:string) => !!val || `${'กรุณากรอกระดับสมรรถนะ'}`,]"
+                  hide-bottom-space
+                />
+              </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"
+                      v-model="formData.levels[index].description"
+                      :dense="$q.screen.lt.md"
+                      min-height="5rem"
+                      :toolbar="[
+                        [
+                          'bold',
+                          'italic',
+                          'strike',
+                          'underline',
+                          'subscript',
+                          'superscript',
+                        ],
+
+                        ['unordered', 'ordered'],
+                      ]"
+                      :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>
+              </div>
+            </div>
+          </q-card-section>
+        </q-card>
+      </div>
+      <div class="col-12 q-my-sm"><q-separator /></div>
+      <div class="col-12 row justify-end">
+        <q-btn
+          dense
+          unelevated
+          label="บันทึก"
+          color="public"
+          class="q-px-md"
+          type="submit"
+        >
+          <q-tooltip>บันทึกข้อมูล</q-tooltip>
+        </q-btn>
+      </div>
+    </div>
+  </q-form>
+</template>
+
+<style scoped></style>
diff --git a/src/modules/14_KPI/store/KPIStore.ts b/src/modules/14_KPI/store/KPIStore.ts
index 58894b277..5cc082e07 100644
--- a/src/modules/14_KPI/store/KPIStore.ts
+++ b/src/modules/14_KPI/store/KPIStore.ts
@@ -3,7 +3,7 @@ import { ref } from "vue";
 
 // store
 export const useKPIDataStore = defineStore("KPIDataStore", () => {
-  const competencyType = ref<string>("ID1");
+  const competencyType = ref<string>("HEAD");
 
   return { competencyType };
 });