diff --git a/src/modules/08_KPI/components/Tab/Dialog/04_FormCompetency.vue b/src/modules/08_KPI/components/Tab/Dialog/04_FormCompetency.vue
index 8fcd607..78ddf55 100644
--- a/src/modules/08_KPI/components/Tab/Dialog/04_FormCompetency.vue
+++ b/src/modules/08_KPI/components/Tab/Dialog/04_FormCompetency.vue
@@ -9,7 +9,7 @@ import { useCounterMixin } from "@/stores/mixin";
 
 import http from "@/plugins/http";
 import config from "@/app.config";
-import { useQuasar } from "quasar";
+import { useQuasar, type QTableProps } from "quasar";
 import { useRoute } from "vue-router";
 
 const dataListCapacityDetails = ref<ListCapacity[]>([]);
@@ -23,7 +23,12 @@ const props = defineProps({
 const $q = useQuasar();
 const store = useKpiDataStore();
 const expectedLevel = ref<any>();
-
+const pagination = ref({
+  sortBy: "desc",
+  descending: false,
+  page: 1,
+  rowsPerPage: 20,
+});
 const weight = ref<number | null>(null);
 const mixin = useCounterMixin();
 const {
@@ -79,6 +84,28 @@ const fieldLabels = {
 
 const competencyTypeOp = ref<DataOptions[]>(store.competencyType);
 
+const visibleColumns = ref<String[]>(["level", "description"]);
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "level",
+    align: "center",
+    label: "ระดับสมรรถนะ",
+    sortable: true,
+    field: "level",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px; width:5px;",
+  },
+  {
+    name: "description",
+    align: "left",
+    label: "พฤติกรรมที่คาดหวัง/พฤติกรรมย่อย",
+    sortable: true,
+    field: "description",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px; width:15%;",
+  },
+]);
+
 function clickList(index: string, data: any) {
   const dataCapacityDetails = data.capacityDetails.sort(
     (a: any, b: any) => a.level - b.level
@@ -417,19 +444,64 @@ watch(
                   </q-card>
                 </div>
                 <div class="col-7">
-                  <q-card bordered class="col-12 row no-shadow">
+                  <q-table
+                    flat
+                    bordered
+                    dense
+                    :paging="true"
+                    row-key="level"
+                    class="custom-table2"
+                    virtual-scroll
+                    :rows="dataListCapacityDetails"
+                    hide-pagination
+                    :columns="columns"
+                    :visible-columns="visibleColumns"
+                    v-model:pagination="pagination"
+                  >
+                    <template v-slot:header="props">
+                      <q-tr :props="props">
+                        <q-th
+                          v-for="col in props.cols"
+                          :key="col.name"
+                          :props="props"
+                          class="bg-grey-2"
+                        >
+                          <span class="text-weight-bold">{{ col.label }}</span>
+                        </q-th>
+                      </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.name"
+                          :props="props"
+                        >
+                          <div v-if="(col.name = 'description')">
+                            <span v-html="col.value"></span>
+                          </div>
+                          <div v-else>
+                            {{ col.value }}
+                            <!-- <span v-html="item.description"></span> -->
+                          </div>
+                        </q-td>
+                      </q-tr>
+                    </template>
+                  </q-table>
+
+                  <!-- <q-card bordered class="col-12 no-shadow">
                     <div class="bg-grey-2 row q-py-sm text-weight-bold col-12">
                       <div class="col-4 text-center">
                         <span>ระดับสมรรถนะ</span>
                       </div>
-                      <div class="col-8 text-center">
+                      <div class="col-8 text-start">
                         <span>พฤติกรรมที่คาดหวัง/พฤติกรรมย่อย</span>
                       </div>
                     </div>
                     <div
                       v-if="dataListCapacityDetails.length == 0"
-                      class="q-pa-md text-weight-bold col-12 text-center "
-                      style="border: 2px solid #f5f5f5;"
+                      class="q-pa-md text-weight-bold col-12 text-center"
+                      style="border: 2px solid #f5f5f5"
                     >
                       <span>ไม่พบข้อมูลสมรรถนะ</span>
                     </div>
@@ -437,7 +509,7 @@ watch(
                       v-for="(item, index) in dataListCapacityDetails"
                       :key="item.id"
                     >
-                      <div :class="`row q-pa-sm`">
+                      <div class="row q-pa-sm">
                         <div class="col-4 text-center self-start text-body1">
                           <span>{{ item.level }}</span>
                         </div>
@@ -445,9 +517,11 @@ watch(
                           <span v-html="item.description"></span>
                         </div>
                       </div>
-                      <q-separator />
+                      <q-separator
+                        v-if="index !== dataListCapacityDetails.length - 1"
+                      />
                     </div>
-                  </q-card>
+                  </q-card> -->
                 </div>
               </div>
             </div>
@@ -483,4 +557,42 @@ watch(
   border: 1px solid #ededed !important;
   border-radius: 8px;
 }
+.custom-table2 {
+  .q-table tr:nth-child(odd) td {
+    background: white;
+  }
+
+  .q-table tr:nth-child(even) td {
+    background: #f8f8f8;
+  }
+
+  .q-table thead tr {
+    background: #ecebeb;
+  }
+
+  .q-table thead tr th {
+    position: sticky;
+  }
+
+  .q-table td:nth-of-type(2) {
+    z-index: 3 !important;
+  }
+
+  .q-table th:nth-of-type(2),
+  .q-table td:nth-of-type(2) {
+    position: sticky;
+    left: 0;
+    z-index: 1;
+  }
+
+  /* this will be the loading indicator */
+  .q-table thead tr:last-child th {
+    /* height of all previous header rows */
+    top: 48px;
+  }
+
+  .q-table thead tr:first-child th {
+    top: 0;
+  }
+}
 </style>