diff --git a/src/modules/06_evaluate/components/EvaluateStepMain.vue b/src/modules/06_evaluate/components/EvaluateStepMain.vue
index 27b068c..039aca5 100644
--- a/src/modules/06_evaluate/components/EvaluateStepMain.vue
+++ b/src/modules/06_evaluate/components/EvaluateStepMain.vue
@@ -596,7 +596,7 @@ onMounted(async () => {
       <div class="col-12">
         <q-card bordered class="col-12 row caedNone">
           <div class="col-xs-12 col-sm-3 row">
-            <div class="col-12 row no-wrap">
+            <div class="col-12 row ">
               <div class="col-12 q-py-md q-px-lg">
                 <div class="col-12 row items-center no-wrap">
                   <div class="toptitle2">
diff --git a/src/modules/06_evaluate/components/viewstep/tableStep1.vue b/src/modules/06_evaluate/components/viewstep/tableStep1.vue
index 8bbd1e5..aab00a3 100644
--- a/src/modules/06_evaluate/components/viewstep/tableStep1.vue
+++ b/src/modules/06_evaluate/components/viewstep/tableStep1.vue
@@ -13,7 +13,7 @@ const props = defineProps({
 
 <template>
   <div class="q-pa-sm row col-12">
-    <q-table
+    <d-table
       ref="table"
       flat
       bordered
@@ -23,9 +23,9 @@ const props = defineProps({
       :rows-per-page-options="[10, 25, 50, 100]"
       virtual-scroll
       class="row col-12"
-      :style="$q.screen.lt.sm ? 'width: 70vw' : 'width: 50vw;'"
+      :style="$q.screen.lt.sm ? 'width: 80vw' : 'width: 50vw;'"
     >
-    </q-table>
+    </d-table>
   </div>
 </template>
 
diff --git a/src/modules/07_appealComplain/views/Form.vue b/src/modules/07_appealComplain/views/Form.vue
index d98e413..97035e2 100644
--- a/src/modules/07_appealComplain/views/Form.vue
+++ b/src/modules/07_appealComplain/views/Form.vue
@@ -1,4 +1,3 @@
-div
 <script setup lang="ts">
 import { ref, reactive, defineProps, watch } from "vue";
 import { useAppealComplainStore } from "@/modules/07_appealComplain/store";
@@ -206,7 +205,7 @@ function onSubmit(data: any) {
                   </div>
                 </q-banner>
               </div>
-              <div class="row q-gutter-x-sm">
+              <div class="row q-col-gutter-sm ">
                 <div class="col-xs-12 col-md-3">
                   <q-select
                     :class="inputEdit(isReadOnly)"
diff --git a/src/modules/07_appealComplain/views/Main.vue b/src/modules/07_appealComplain/views/Main.vue
index 6471e94..bf4bb11 100644
--- a/src/modules/07_appealComplain/views/Main.vue
+++ b/src/modules/07_appealComplain/views/Main.vue
@@ -379,7 +379,7 @@ onMounted(async () => {
               class="col-xs-12 col-sm-3 col-md-2"
             />
           </div>
-          <q-table
+          <d-table
             flat
             bordered
             dense
@@ -436,7 +436,30 @@ onMounted(async () => {
                 </q-td>
               </q-tr>
             </template>
-          </q-table>
+
+            <template #item="props">
+              <div class="q-pa-xs col-xs-12 col-sm-6 col-md-4 col-lg-3">
+                <q-card bordered flat>
+                  <q-list @click="editPage(props.row.id)">
+                    <q-item
+                      v-for="col in props.cols.filter((col:any) => col.name !== 'desc')"
+                      :key="col.name"
+                    >
+                      <q-item-section>
+                        <q-item-label caption>{{ col.label }}</q-item-label>
+
+                        <q-item-label v-if="col.name === 'no'">
+                          {{ props.rowIndex + 1 }}
+                        </q-item-label>
+
+                        <q-item-label v-else>{{ col.value }}</q-item-label>
+                      </q-item-section>
+                    </q-item>
+                  </q-list>
+                </q-card>
+              </div>
+            </template>
+          </d-table>
         </q-card>
       </div>
     </div>
diff --git a/src/modules/08_KPI/views/form.vue b/src/modules/08_KPI/views/form.vue
index c0abfe3..c380572 100644
--- a/src/modules/08_KPI/views/form.vue
+++ b/src/modules/08_KPI/views/form.vue
@@ -394,7 +394,7 @@ onMounted(async () => {
                       >*น้ำหนัก(ร้อยละ) ผลสัมฤทธิ์ของงานไม่ถูกต้อง</span
                     >
                     <br v-if="!$q.screen.gt.xs" />
-                    
+
                     <q-btn
                       v-if="
                         store.rolePerson == 'USER' &&
@@ -502,51 +502,51 @@ onMounted(async () => {
                   $q.screen.gt.xs ? 'padding-left: 12%' : 'padding-left:5%'
                 "
               >
-                <div class="row no-wrap">
-                  <div class="col-2">
-                    <div class="column">
-                      <span class="text-grey-6">ตำแหน่งในสายงาน</span>
-                      <span class="text-weight-medium text-dark">{{
+                <div class="row">
+                  <div class="col-xs-12 col-md-2">
+                    <div :class="$q.screen.gt.sm ? 'column' : 'row'">
+                      <span class="text-grey-6 col">ตำแหน่งในสายงาน</span>
+                      <span class="text-weight-medium text-dark col">{{
                         store.dataEvaluation.position
                       }}</span>
                     </div>
                   </div>
-                  <div class="col-2">
-                    <div class="column">
-                      <span class="text-grey-6">ประเภทตำแหน่ง</span>
-                      <span class="text-weight-medium text-dark">{{
+                  <div class="col-xs-12 col-md-2">
+                    <div :class="$q.screen.gt.sm ? 'column' : 'row'">
+                      <span class="text-grey-6 col">ประเภทตำแหน่ง</span>
+                      <span class="text-weight-medium text-dark col">{{
                         store.dataEvaluation.posTypeName
                       }}</span>
                     </div>
                   </div>
-                  <div class="col-2">
-                    <div class="column">
-                      <span class="text-grey-6">ระดับตำแหน่ง</span>
-                      <span class="text-weight-medium text-dark">{{
+                  <div class="col-xs-12 col-md-2">
+                    <div :class="$q.screen.gt.sm ? 'column' : 'row'">
+                      <span class="text-grey-6 col">ระดับตำแหน่ง</span>
+                      <span class="text-weight-medium text-dark col">{{
                         store.dataEvaluation.posLevelName
                       }}</span>
                     </div>
                   </div>
-                  <div class="col-2">
-                    <div class="column">
-                      <span class="text-grey-6">สถานะการประเมิน</span>
-                      <span class="text-weight-medium text-dark">{{
+                  <div class="col-xs-12 col-md-2">
+                    <div :class="$q.screen.gt.sm ? 'column' : 'row'">
+                      <span class="text-grey-6 col">สถานะการประเมิน</span>
+                      <span class="text-weight-medium text-dark col">{{
                         formProfile.status
                       }}</span>
                     </div>
                   </div>
-                  <div class="col-2">
-                    <div class="column">
-                      <span class="text-grey-6">ผลการประเมิน</span>
-                      <span class="text-weight-medium text-dark">{{
+                  <div class="col-xs-12 col-md-2">
+                    <div :class="$q.screen.gt.sm ? 'column' : 'row'">
+                      <span class="text-grey-6 col">ผลการประเมิน</span>
+                      <span class="text-weight-medium text-dark col">{{
                         formProfile.result
                       }}</span>
                     </div>
                   </div>
-                  <div class="col-2">
-                    <div class="column">
-                      <span class="text-grey-6">คะแนนประเมิน</span>
-                      <span class="text-weight-medium text-primary">
+                  <div class="col-xs-12 col-md-2">
+                    <div :class="$q.screen.gt.sm ? 'column' : 'row'">
+                      <span class="text-grey-6 col">คะแนนประเมิน</span>
+                      <span class="text-weight-medium text-primary col">
                         {{
                           store.dataEvaluation.posExecutiveName == null
                             ? (