diff --git a/src/modules/14_KPI/components/competency/Forms/01_FormMain.vue b/src/modules/14_KPI/components/competency/Forms/01_FormMain.vue
index fb01b5b5f..46ddf6a67 100644
--- a/src/modules/14_KPI/components/competency/Forms/01_FormMain.vue
+++ b/src/modules/14_KPI/components/competency/Forms/01_FormMain.vue
@@ -1,6 +1,21 @@
 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: "",
@@ -27,7 +42,27 @@ function ocClickAdd() {
 }
 
 function onSubmit() {
-  console.log(formData);
+  dialogConfirm($q, () => {
+    const body = {
+      competencyType: store.competencyType,
+      competencyName: formData.competencyName,
+      definition: formData.definition,
+      levels: formData.levels,
+      evaluation: formData.evaluation,
+    };
+    // 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>
 
@@ -97,33 +132,46 @@ function onSubmit() {
                 <span>{{ items.level }}</span>
               </div>
               <div class="col-9">
-                <q-editor
+                <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',
-                    ],
+                  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',
-                  }"
-                />
+                        ['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>
@@ -136,8 +184,6 @@ function onSubmit() {
           dense
           type="textarea"
           outlined
-          :rules="[(val:string) => !!val || `${'กรุณากรอกกำหนดเกณฑ์การประเมิน'}`,]"
-          hide-bottom-space
         />
       </div>
       <div class="col-12"><q-separator /></div>
diff --git a/src/modules/14_KPI/components/competency/Forms/02_FormGroup.vue b/src/modules/14_KPI/components/competency/Forms/02_FormGroup.vue
index 72cc3e0f3..72b8a33cf 100644
--- a/src/modules/14_KPI/components/competency/Forms/02_FormGroup.vue
+++ b/src/modules/14_KPI/components/competency/Forms/02_FormGroup.vue
@@ -1,5 +1,18 @@
 <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();
 
 interface DetailLevelType {
   level_01: any;
@@ -40,7 +53,31 @@ const formData = reactive<FormGroup>({
 });
 
 function onSubmit() {
-  console.log(formData);
+  dialogConfirm($q, () => {
+    const body = {
+      competencyType: store.competencyType,
+      competencyName: formData.definition,
+      definition: formData.definition,
+      levels1: formScore.score1,
+      levels2: formScore.score2,
+      levels3: formScore.score3,
+      levels4: formScore.score4,
+      levels5: formScore.score5,
+      evaluation: formData.evaluation,
+    };
+    // 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>
 
@@ -48,7 +85,14 @@ function onSubmit() {
   <q-form greedy @submit.prevent @validation-success="onSubmit" class="col-12">
     <div class="row q-col-gutter-sm">
       <div class="col-12">
-        <q-input label="ชื่อสมรรถนะ" outlined v-model="formData.name" dense />
+        <q-input
+          label="ชื่อสมรรถนะ"
+          outlined
+          v-model="formData.name"
+          dense
+          :rules="[(val:string) => !!val || `${'กรุณากรอกชื่อสมรรถนะ'}`,]"
+          hide-bottom-space
+        />
       </div>
       <div class="col-12">
         <q-input
@@ -57,6 +101,8 @@ function onSubmit() {
           v-model="formData.definition"
           dense
           type="textarea"
+          :rules="[(val:string) => !!val || `${'กรุณากรอกคำจำกัดความ'}`,]"
+          hide-bottom-space
         />
       </div>
       <div class="col-12">
@@ -79,33 +125,46 @@ function onSubmit() {
                   {{ fieldLabels[field as keyof typeof fieldLabels] }}
                 </div>
                 <div class="col-8 text-left">
-                  <q-editor
+                  <q-field
+                    class="q_field_p_none"
+                    ref="fieldRef"
                     v-model="formScore[field]"
-                    :dense="$q.screen.lt.md"
-                    min-height="5rem"
-                    :toolbar="[
-                      [
-                        'bold',
-                        'italic',
-                        'strike',
-                        'underline',
-                        'subscript',
-                        'superscript',
-                      ],
+                    label-slot
+                    borderless
+                    :rules="[(val) => !!val || 'กรุณากรอกมาตรฐานพฤติกรรม']"
+                    hide-bottom-space
+                  >
+                    <template #control>
+                      <q-editor
+                        class="full-width"
+                        v-model="formScore[field]"
+                        :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',
-                    }"
-                  />
+                          ['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>
               <div
@@ -125,8 +184,6 @@ function onSubmit() {
           dense
           type="textarea"
           outlined
-          :rules="[(val:string) => !!val || `${'กรุณากรอกกำหนดเกณฑ์การประเมิน'}`,]"
-          hide-bottom-space
         />
       </div>
       <div class="col-12"><q-separator /></div>
diff --git a/src/modules/14_KPI/components/competency/Forms/03_FormExecutive.vue b/src/modules/14_KPI/components/competency/Forms/03_FormExecutive.vue
index 09085cba9..bb3d0f493 100644
--- a/src/modules/14_KPI/components/competency/Forms/03_FormExecutive.vue
+++ b/src/modules/14_KPI/components/competency/Forms/03_FormExecutive.vue
@@ -1,15 +1,19 @@
 <script setup lang="ts">
 import { ref, reactive, onMounted } 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";
 
-import { useCounterMixin } from "@/stores/mixin";
-
 const $q = useQuasar();
 const { dialogConfirm, showLoader, success, hideLoader, messageError } =
   useCounterMixin();
 
+const router = useRouter
+const store = useKPIDataStore();
 const formData = reactive({
   competencyType: "",
   competencyName: "",
@@ -76,10 +80,30 @@ function updateSelectType(val: string, index: number) {
   formData.form[index].posLevel = "";
 }
 
+
 function onSubmit() {
   dialogConfirm($q, () => {
-    console.log(formData);
-  });
+    const body = {
+    competencyType:store.competencyType,
+    competencyName:formData.competencyName,
+    definition:formData.definition,
+    postype:formData.form,
+    evaluation:formData.evaluation,
+  }
+// showLoader()
+//   http
+//   .put(config.API.???,body)
+//   .then((res)=>{
+//     success($q,'บันทึกสำเร็จ')
+//     router.push(`/KPI-competency`)
+//   }).catch((e)=>{
+//     messageError($q,e)
+//   }).finally(()=>{
+//     hideLoader()
+//   })
+console.log(body)
+  })
+
 }
 
 onMounted(() => {
@@ -184,60 +208,86 @@ onMounted(() => {
                 />
               </div>
               <div class="col-6">
-                <q-editor
+                <q-field
+                  class="q_field_p_none"
+                  ref="fieldRef"
                   v-model="formData.form[index].description"
-                  :dense="$q.screen.lt.md"
-                  min-height="5rem"
-                  :toolbar="[
-                    [
-                      'bold',
-                      'italic',
-                      'strike',
-                      'underline',
-                      'subscript',
-                      'superscript',
-                    ],
+                  label-slot
+                  borderless
+                  :rules="[(val) => !!val || 'กรุณากรอกมาตรฐานพฤติกรรม']"
+                  hide-bottom-space
+                >
+                  <template #control>
+                    <q-editor
+                      class="full-width"
+                      v-model="formData.form[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',
-                  }"
-                />
-                <q-editor
+                        ['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>
+                <q-field
+                  class="q_field_p_none"
+                  ref="fieldRef"
                   v-model="formData.form[index].description2"
-                  :dense="$q.screen.lt.md"
-                  min-height="5rem"
-                  :toolbar="[
-                    [
-                      'bold',
-                      'italic',
-                      'strike',
-                      'underline',
-                      'subscript',
-                      'superscript',
-                    ],
+                  label-slot
+                  borderless
+                  :rules="[(val) => !!val || 'กรุณากรอกมาตรฐานพฤติกรรม']"
+                  hide-bottom-space
+                >
+                  <template #control>
+                    <q-editor
+                      class="full-width"
+                      v-model="formData.form[index].description2"
+                      :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',
-                  }"
-                />
+                        ['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 class="col-12"><q-separator /></div>
             </div>
@@ -251,8 +301,6 @@ onMounted(() => {
           dense
           type="textarea"
           outlined
-          :rules="[(val:string) => !!val || `${'กรุณากรอกกำหนดเกณฑ์การประเมิน'}`,]"
-          hide-bottom-space
         />
       </div>
       <div class="col-12"><q-separator /></div>
diff --git a/src/modules/14_KPI/components/competency/Forms/04_FormExecutivePosition.vue b/src/modules/14_KPI/components/competency/Forms/04_FormExecutivePosition.vue
index 76b513cad..66c7e31ed 100644
--- a/src/modules/14_KPI/components/competency/Forms/04_FormExecutivePosition.vue
+++ b/src/modules/14_KPI/components/competency/Forms/04_FormExecutivePosition.vue
@@ -1,9 +1,11 @@
 <script setup lang="ts">
 import { ref, reactive } from "vue";
 import type { QTableProps } from "quasar";
+
 import { useCounterMixin } from "@/stores/mixin";
-import { useQuasar } from "quasar";
+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";
@@ -22,6 +24,7 @@ const {
   date2Thai,
 } = mixin;
 
+const store = useKPIDataStore();
 const formData = reactive({
   competencyType: "",
   competencyName: "",
@@ -31,8 +34,31 @@ const formData = reactive({
   level3: "",
   evaluation: "",
 });
-async function onSubmit() {
-  dialogConfirm($q, async () => {});
+
+function onSubmit() {
+  dialogConfirm($q, () => {
+    const body = {
+      competencyType: store.competencyType,
+      competencyName: formData.competencyName,
+      definition: formData.definition,
+      levels1: formData.level1,
+      levels2: formData.level2,
+      levels3: formData.level3,
+      evaluation: formData.evaluation,
+    };
+    // 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>
 
@@ -51,34 +77,47 @@ async function onSubmit() {
       </div>
       <q-card-section class="col-12 q-px-none">
         <div>
-          <q-editor
+          <q-field
+            class="q_field_p_none"
+            ref="fieldRef"
             v-model="formData.definition"
-            :dense="$q.screen.lt.md"
-            min-height="7rem"
-            placeholder="คำจำกัดความ"
-            :toolbar="[
-              [
-                'bold',
-                'italic',
-                'strike',
-                'underline',
-                'subscript',
-                'superscript',
-              ],
+            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',
-            }"
-          />
+                  ['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">
diff --git a/src/modules/14_KPI/components/competency/Forms/05_FormExecutiveLevel.vue b/src/modules/14_KPI/components/competency/Forms/05_FormExecutiveLevel.vue
index 51940f818..059917972 100644
--- a/src/modules/14_KPI/components/competency/Forms/05_FormExecutiveLevel.vue
+++ b/src/modules/14_KPI/components/competency/Forms/05_FormExecutiveLevel.vue
@@ -2,8 +2,9 @@
 import { ref, reactive } from "vue";
 import type { QTableProps } from "quasar";
 import { useCounterMixin } from "@/stores/mixin";
-import { useQuasar } from "quasar";
+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";
@@ -21,7 +22,7 @@ const {
   success,
   date2Thai,
 } = mixin;
-
+const store = useKPIDataStore();
 const formData = reactive({
   competencyType: "",
   competencyName: "",
@@ -31,8 +32,29 @@ const formData = reactive({
   evaluation: "",
 });
 
-async function onSubmit() {
-  dialogConfirm($q, async () => {});
+function onSubmit() {
+  dialogConfirm($q, () => {
+    const body = {
+      competencyType: store.competencyType,
+      competencyName: formData.competencyName,
+      definition: formData.definition,
+      levels1: formData.level1,
+      levels2: formData.level2,
+      evaluation: formData.evaluation,
+    };
+    // 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>
 
@@ -51,34 +73,47 @@ async function onSubmit() {
       </div>
       <q-card-section class="col-12 q-px-none">
         <div>
-          <q-editor
+          <q-field
+          class="q_field_p_none"
+            ref="fieldRef"
             v-model="formData.definition"
-            :dense="$q.screen.lt.md"
-            min-height="7rem"
-            placeholder="คำจำกัดความ"
-            :toolbar="[
-              [
-                'bold',
-                'italic',
-                'strike',
-                'underline',
-                'subscript',
-                'superscript',
-              ],
+            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',
-            }"
-          />
+                  ['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">
diff --git a/src/style/quasar-variables.sass b/src/style/quasar-variables.sass
index 070d6407e..06edabb4e 100644
--- a/src/style/quasar-variables.sass
+++ b/src/style/quasar-variables.sass
@@ -136,6 +136,9 @@ $muti-tab: #87d4cc
 .q-tree
     color: #c8d3db
 
+.q_field_p_none .q-field__control-container
+    padding-top: 0 !important
+
 .input-alert .q-field--outlined .q-field__control
     border: 1px solid red !important
     background-color: rgb(255, 216, 216)