diff --git a/src/components/PopupReplyInbox.vue b/src/components/PopupReplyInbox.vue
index 1eed8b2..0cdb863 100644
--- a/src/components/PopupReplyInbox.vue
+++ b/src/components/PopupReplyInbox.vue
@@ -10,7 +10,7 @@ import { useQuasar } from "quasar";
 const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
 const $q = useQuasar();
 
-const { showLoader, hideLoader, success, messageError } = mixin;
+const { showLoader, hideLoader, success, messageError, dialogConfirm } = mixin;
 
 const myForm = ref<any>();
 const props = defineProps({
@@ -30,35 +30,34 @@ const props = defineProps({
 
 const subject = ref<string>("");
 const body = ref<string>("");
-async function submit() {
-  myForm.value.validate().then(async (result: boolean) => {
-    if (result) {
-      // props.savaForm(reason.value);
-      showLoader();
-      await http
-        .put(config.API.replyMessage(props.idInbox), {
-          subject: subject.value,
-          body: body.value,
-        })
-        .then((res) => {
-          props.clickClose()
-          success($q, "ส่งข้อความสำเร็จ");
-        })
-        .catch((e) => {
-          messageError($q, e);
-        })
-        .finally(() => {
-          hideLoader();
-        });
-    }
+function onSubmit() {
+  dialogConfirm($q, () => {
+    showLoader();
+    http
+      .put(config.API.replyMessage(props.idInbox), {
+        subject: subject.value,
+        body: body.value,
+      })
+      .then(() => {
+        props.clickClose();
+        success($q, "ส่งข้อความสำเร็จ");
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(() => {
+        hideLoader();
+      });
   });
 }
 </script>
 
 <template>
   <q-dialog v-model="props.modal" persistent>
-    <q-card style="width: 40vw; max-width: 40vw">
-      <q-form ref="myForm">
+    <q-card
+      :style="$q.screen.gt.xs ? 'width: 40vw; max-width: 40vw' : 'width: 100%'"
+    >
+      <q-form greedy @submit.prevent @validation-success="onSubmit">
         <DialogHeader tittle="ส่งข้อความ" :close="clickClose" />
         <q-separator />
         <q-card-section class="q-pa-sm bg-grey-1">
@@ -98,7 +97,7 @@ async function submit() {
             unelevated
             label="ส่งข้อความ"
             color="public"
-            @click="submit"
+            type="submit"
             class="q-px-md"
           >
             <!-- icon="mdi-content-save-outline" -->
diff --git a/src/modules/00_support/components/FormChat.vue b/src/modules/00_support/components/FormChat.vue
index b2a698d..99746d0 100644
--- a/src/modules/00_support/components/FormChat.vue
+++ b/src/modules/00_support/components/FormChat.vue
@@ -11,7 +11,7 @@ const { date2Thai } = useCounterMixin();
 const { scrollContainer } = storeToRefs(store);
 
 function getOnlineStatus(option: "icon" | "status") {
-  const isAdmin = store.userStatus.some((u) => u.role.includes("admin"));
+  const isAdmin = store.userStatus.some((u: any) => u.role.includes("admin"));
   if (option === "icon") return isAdmin ? "green" : "grey";
   if (option === "status") return isAdmin ? "ออนไลน์" : "ออฟไลน์";
 }
diff --git a/src/modules/01_dashboard/views/Dashboard.vue b/src/modules/01_dashboard/views/Dashboard.vue
index 38b3328..e0111e4 100644
--- a/src/modules/01_dashboard/views/Dashboard.vue
+++ b/src/modules/01_dashboard/views/Dashboard.vue
@@ -6,6 +6,7 @@ import router from "@/router";
 import http from "@/plugins/http";
 import config from "@/app.config";
 import { useCounterMixin } from "@/stores/mixin";
+import keycloak from "@/plugins/keycloak";
 import PopupReplyInbox from "@/components/PopupReplyInbox.vue";
 import PopupDetailInbox from "@/components/PopupDetailInbox.vue";
 
@@ -13,7 +14,7 @@ const $q = useQuasar();
 const mixin = useCounterMixin();
 const { showLoader, hideLoader, date2Thai, messageError } = mixin;
 
-const fullname = ref<string>("ธัญลักษณ์");
+const fullname = ref<string>("");
 const inboxList = ref<any>([
   //   {
   //     no: 1,
@@ -108,6 +109,9 @@ const items = ref<any>([
 ]);
 onMounted(async () => {
   await fetchlistInbox(1);
+  if (keycloak.tokenParsed != null) {
+    fullname.value = keycloak.tokenParsed.name;
+  }
 });
 const fetchlistInbox = async (index: number) => {
   index === 1 && showLoader();
@@ -257,7 +261,7 @@ const thaiOptions: Intl.DateTimeFormatOptions = {
       <q-card
         flat
         bordered
-        :style="$q.screen.gt.xs ? 'max-height: 74vh' : 'height: 100px;'"
+        :style="$q.screen.gt.xs ? 'max-height: 74vh' : 'height: 500px;'"
         class="q-pb-sm col-12"
       >
         <div class="col-12 row q-px-md q-pt-md q-pb-sm">
diff --git a/src/modules/02_transfer/views/AddTransfer.vue b/src/modules/02_transfer/views/AddTransfer.vue
index 1294a70..a359a55 100644
--- a/src/modules/02_transfer/views/AddTransfer.vue
+++ b/src/modules/02_transfer/views/AddTransfer.vue
@@ -59,10 +59,6 @@ const saveData = async () => {
 const createTransfer = async () => {
   showLoader();
   const formData = new FormData();
-  //   const blob = files.value.slice(0, files.value[0].size);
-  //   const newFile = new File(blob, nameFile.value, {
-  //     type: files.value[0].type,
-  //   });
   formData.append("Organization", tranferOrg.value);
   formData.append("Reason", noteReason.value);
   formData.append("file", files.value);
@@ -145,7 +141,9 @@ const fileUploadDoc = async (file: any) => {
             <div class="col-xs-12 col-sm-12">
               <div class="col-12 row q-pa-sm q-col-gutter-sm">
                 <q-input
-                  class="col-12"
+                  :class="
+                    routeName != 'addTransfer' ? 'col-12' : 'col-12 inputgreen'
+                  "
                   dense
                   outlined
                   v-model="tranferOrg"
@@ -154,7 +152,9 @@ const fileUploadDoc = async (file: any) => {
                   :rules="[(val:string) => !!val || `${'กรุณากรอกหน่วยงานที่ขอโอนไป'}`]"
                 />
                 <q-input
-                  class="col-12"
+                  :class="
+                    routeName != 'addTransfer' ? 'col-12' : 'col-12 inputgreen'
+                  "
                   dense
                   outlined
                   v-model="noteReason"
@@ -166,7 +166,7 @@ const fileUploadDoc = async (file: any) => {
                 <div class="col-12 row" v-if="routeName == 'addTransfer'">
                   <q-file
                     v-model="files"
-                    class="col-xs-12 col-sm-12"
+                    class="col-xs-12 col-sm-12 inputgreen"
                     outlined
                     dense
                     lazy-rules
diff --git a/src/modules/02_transfer/views/Main.vue b/src/modules/02_transfer/views/Main.vue
index ce7ce9d..39b49dd 100644
--- a/src/modules/02_transfer/views/Main.vue
+++ b/src/modules/02_transfer/views/Main.vue
@@ -234,7 +234,7 @@ const clickBack = () => {
             </div>
           </div>
           <div>
-            <q-table
+            <d-table
               flat
               bordered
               dense
@@ -290,52 +290,39 @@ const clickBack = () => {
                   </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
+                    @click="router.push(`/transfer/` + props.row.id)"
+                  >
+                    <q-list>
+                      <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>
           </div>
         </q-card>
       </div>
     </div>
   </div>
 </template>
-<style scoped lang="scss">
-.custom-table2 {
-  max-height: 64vh;
-
-  .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>
+<style scoped lang="scss"></style>
diff --git a/src/modules/03_retire/views/DialogRetire.vue b/src/modules/03_retire/views/DialogRetire.vue
index 9f48e7d..9c8d213 100644
--- a/src/modules/03_retire/views/DialogRetire.vue
+++ b/src/modules/03_retire/views/DialogRetire.vue
@@ -20,7 +20,7 @@ const props = defineProps({
   fectData: { type: Function, require: true },
 });
 
-const id = ref<string>(route.params.id.toString());
+const id = ref<string>(route.params.id ? route.params.id.toString() : "");
 
 const mixin = useCounterMixin();
 const { dialogConfirm, messageError, showLoader, hideLoader, success } = mixin;
diff --git a/src/modules/03_retire/views/addRetire.vue b/src/modules/03_retire/views/addRetire.vue
index b3da355..930a995 100644
--- a/src/modules/03_retire/views/addRetire.vue
+++ b/src/modules/03_retire/views/addRetire.vue
@@ -186,7 +186,12 @@ function downloadFile(data: string) {
             <div class="col-xs-12 col-sm-12">
               <div class="col-12 row q-pa-sm q-col-gutter-sm">
                 <q-input
-                  class="col-md-8 col-xs-12"
+                  :class="
+                    routeName !== 'AddRetire'
+                      ? 'col-md-8 col-xs-12'
+                      : 'col-md-8 col-xs-12 inputgreen'
+                  "
+                  class=""
                   dense
                   outlined
                   v-model="tranferOrg"
@@ -195,8 +200,13 @@ function downloadFile(data: string) {
                   :readonly="routeName != 'AddRetire'"
                   :rules="[(val:string) => !!val || `${'กรุณากรอกสถานที่ยื่นขอลาออกจากราชการ'}`]"
                 />
+
                 <datepicker
-                  class="col-md-2 col-xs-12"
+                  :class="
+                    routeName !== 'AddRetire'
+                      ? 'col-md-2 col-xs-12'
+                      : 'col-md-2 col-xs-12 inputgreen'
+                  "
                   menu-class-name="modalfix"
                   v-model="dateCommand"
                   :locale="'th'"
@@ -218,7 +228,7 @@ function downloadFile(data: string) {
                       readonly
                       dense
                       hide-bottom-space
-                      class="full-width datepicker"
+                      class="full-width"
                       :model-value="
                         dateCommand != null ? date2Thai(dateCommand) : null
                       "
@@ -240,7 +250,11 @@ function downloadFile(data: string) {
                   </template>
                 </datepicker>
                 <datepicker
-                  class="col-md-2 col-xs-12"
+                  :class="
+                    routeName !== 'AddRetire'
+                      ? 'col-md-2 col-xs-12'
+                      : 'col-md-2 col-xs-12 inputgreen'
+                  "
                   menu-class-name="modalfix"
                   v-model="dateLeave"
                   :locale="'th'"
@@ -262,7 +276,7 @@ function downloadFile(data: string) {
                       dense
                       hide-bottom-space
                       :readonly="routeName != 'AddRetire'"
-                      class="full-width datepicker"
+                      class="full-width"
                       :model-value="
                         dateLeave != null ? date2Thai(dateLeave) : null
                       "
@@ -284,7 +298,9 @@ function downloadFile(data: string) {
                   </template>
                 </datepicker>
                 <q-input
-                  class="col-12"
+                  :class="
+                    routeName !== 'AddRetire' ? 'col-12' : 'col-12 inputgreen'
+                  "
                   dense
                   outlined
                   v-model="noteReason"
@@ -300,7 +316,7 @@ function downloadFile(data: string) {
                 <div class="col-12 row" v-if="routeName == 'AddRetire'">
                   <q-file
                     v-model="files"
-                    class="col-xs-12 col-sm-12"
+                    class="col-xs-12 col-sm-12 inputgreen"
                     outlined
                     dense
                     lazy-rules
@@ -314,18 +330,6 @@ function downloadFile(data: string) {
                     <template v-slot:prepend>
                       <q-icon name="attach_file" /> </template
                   ></q-file>
-                  <!-- <q-uploader
-                    flat
-                    bordered
-                    class="col-xs-12 col-sm-12"
-                    accept=".jpg,.png,.pdf,.csv,.doc"
-                    url="http://localhost:4444/upload"
-                    label="เอกสารเพิ่มเติม"
-                    type="file"
-                    @added="fileUploadDoc"
-                    @removed="filesNull"
-                    style="max-width: px"
-                  /> -->
                 </div>
                 <div class="col-12 row">
                   <q-card
diff --git a/src/modules/03_retire/views/main.vue b/src/modules/03_retire/views/main.vue
index d0cbd59..3d7912c 100644
--- a/src/modules/03_retire/views/main.vue
+++ b/src/modules/03_retire/views/main.vue
@@ -256,7 +256,7 @@ const clickBack = () => {
                     <div v-if="col.name == 'no'">
                       {{ props.rowIndex + 1 }}
                     </div>
-                    <div>
+                    <div v-else>
                       {{ col.value }}
                     </div>
                   </q-td>
diff --git a/src/modules/05_leave/components/Calendar.vue b/src/modules/05_leave/components/Calendar.vue
index ad2ac1a..a217649 100644
--- a/src/modules/05_leave/components/Calendar.vue
+++ b/src/modules/05_leave/components/Calendar.vue
@@ -274,7 +274,7 @@ onMounted(async () => {
 
 <template>
   <div class="row">
-    <div class="col-sm-12 col-md-3 q-mt-sm q-pr-sm row">
+    <div class="col-xs-12 col-md-3 q-mt-sm q-pr-sm row">
       <q-card class="col-12" flat bordered>
         <div class="q-gutter-sm col-12">
           <q-list class="rounded-borders q-pt-sm" dense>
@@ -299,7 +299,7 @@ onMounted(async () => {
       </q-card>
     </div>
 
-    <div class="col-sm-12 col-md-9 row">
+    <div class="col-xs-12 col-md-9 row">
       <div class="q-mt-sm col-12">
         <div class="row col-12 q-gutter-sm">
           <div class="demo-app-main">
diff --git a/src/modules/05_leave/components/Table.vue b/src/modules/05_leave/components/Table.vue
index 0639bbb..b71361e 100644
--- a/src/modules/05_leave/components/Table.vue
+++ b/src/modules/05_leave/components/Table.vue
@@ -205,11 +205,11 @@ watch([() => currentPage.value, () => pagination.value.rowsPerPage], () => {
     </q-card>
   </div>
   <div>
-    <q-table
+    <d-table
       ref="table"
       flat
       bordered
-      class="custom-table2"
+     
       v-bind="attrs"
       virtual-scroll
       :virtual-scroll-sticky-size-start="48"
@@ -244,7 +244,7 @@ watch([() => currentPage.value, () => pagination.value.rowsPerPage], () => {
       <template v-slot:item="props">
         <slot v-bind="props" name="item"></slot>
       </template>
-    </q-table>
+    </d-table>
   </div>
 </template>
 
diff --git a/src/modules/05_leave/views/Main.vue b/src/modules/05_leave/views/Main.vue
index 46fd6e3..3cb4338 100644
--- a/src/modules/05_leave/views/Main.vue
+++ b/src/modules/05_leave/views/Main.vue
@@ -452,28 +452,30 @@ onMounted(async () => {
                 </q-td>
               </q-tr></template
             >
-            <!-- <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>
-                  <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>
+            <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>
+                    <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-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> -->
+                        <q-item-label v-else>{{
+                          col.value ?? "-"
+                        }}</q-item-label>
+                      </q-item-section>
+                    </q-item>
+                  </q-list>
+                </q-card>
+              </div>
+            </template>
           </d-table>
         </div>
       </q-card-section>
diff --git a/src/modules/06_evaluate/components/TableListEvaluate.vue b/src/modules/06_evaluate/components/TableListEvaluate.vue
index ef058fb..6b0f5ec 100644
--- a/src/modules/06_evaluate/components/TableListEvaluate.vue
+++ b/src/modules/06_evaluate/components/TableListEvaluate.vue
@@ -152,7 +152,7 @@ watch([() => currentPage.value, () => pagination.value.rowsPerPage], () => {
 </script>
 
 <template>
-  <q-table
+  <d-table
     ref="table"
     flat
     bordered
@@ -207,6 +207,52 @@ watch([() => currentPage.value, () => pagination.value.rowsPerPage], () => {
         </q-td>
       </q-tr>
     </template>
+    <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="redirectToDetail(props.row)">
+            <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-separator
+            v-if="
+              props.row.step === 'CHECK_SPEC' ||
+              props.row.step === 'PREPARE_DOC_V1' ||
+              props.row.step === 'CHECK_DOC_V1'
+            "
+          />
+          <q-card-actions align="around">
+            <q-btn
+              v-if="
+                props.row.step === 'CHECK_SPEC' ||
+                props.row.step === 'PREPARE_DOC_V1' ||
+                props.row.step === 'CHECK_DOC_V1'
+              "
+              flat
+              dense
+              round
+              color="red"
+              icon="delete"
+              @click.stop="onCkilckDelete(props.row.id)"
+            >
+              <q-tooltip>ลบ</q-tooltip>
+            </q-btn>
+          </q-card-actions>
+        </q-card>
+      </div>
+    </template>
     <template v-slot:pagination="scope">
       ทั้งหมด {{ store.row.length }} รายการ
       <q-pagination
@@ -219,7 +265,7 @@ watch([() => currentPage.value, () => pagination.value.rowsPerPage], () => {
         :max="Number(props.maxPage)"
       ></q-pagination>
     </template>
-  </q-table>
+  </d-table>
 </template>
 
 <style lang="scss" scoped>
diff --git a/src/modules/06_evaluate/views/EvaluateMain.vue b/src/modules/06_evaluate/views/EvaluateMain.vue
index 50b8520..ed5dcd6 100644
--- a/src/modules/06_evaluate/views/EvaluateMain.vue
+++ b/src/modules/06_evaluate/views/EvaluateMain.vue
@@ -295,7 +295,7 @@ watch(
                 :options="options"
                 option-value="val"
                 label="ค้นหาสถานะ"
-                style="width: 35vw"
+                :style="!$q.screen.gt.xs ? '' : 'width: 35vw'"
                 @update:model-value="fetchEvaluteList"
                 use-input
                 @filter="(inputValue:any,doneFn:Function) => filterOption(inputValue, doneFn) "
diff --git a/src/modules/07_appealComplain/views/Form.vue b/src/modules/07_appealComplain/views/Form.vue
index 22ea4bd..d98e413 100644
--- a/src/modules/07_appealComplain/views/Form.vue
+++ b/src/modules/07_appealComplain/views/Form.vue
@@ -1,3 +1,4 @@
+div
 <script setup lang="ts">
 import { ref, reactive, defineProps, watch } from "vue";
 import { useAppealComplainStore } from "@/modules/07_appealComplain/store";
@@ -96,7 +97,7 @@ function validateForm() {
     }
   }
   if (hasError.every((result) => result === true)) {
-      onSubmit(formData);
+    onSubmit(formData);
   } else {
     console.log("ไม่ผ่าน ");
     console.log(hasError);
@@ -161,7 +162,7 @@ function onSubmit(data: any) {
 </script>
 <template>
   <div class="row">
-    <div class="col-sm-12 col-md-12">
+    <div class="col-sm-12 col-md-12 col-xs-12">
       <form @submit.prevent="validateForm">
         <q-card bordered>
           <div class="q-pa-md">
@@ -184,10 +185,14 @@ function onSubmit(data: any) {
                   <q-icon name="mdi-information-outline" size="20px" />
                   คำอุทธรณ์/ร้องทุกข์นี้จะยังไม่สมบูรณ์
                   จนกว่าผู้อุทธรณ์/ร้องทุกข์จะ “พิมพ์แบบฟอร์มคำร้อง” จากระบบ
-                  พร้อมเอกสารหลักฐานทั้งหมดนำส่งไปรษณีย์ให้ กพค. หรือนำเอกสารทั้งหมดไปส่งด้วยตนเองที่ชั้น 14 อาคารศรีจุลทรัพย์
+                  พร้อมเอกสารหลักฐานทั้งหมดนำส่งไปรษณีย์ให้ กพค.
+                  หรือนำเอกสารทั้งหมดไปส่งด้วยตนเองที่ชั้น 14 อาคารศรีจุลทรัพย์
                 </q-banner>
               </div>
-              <div class="q-gutter-sm" v-else-if="isReadOnly||formData.status === 'NEW'">
+              <div
+                class="q-gutter-sm"
+                v-else-if="isReadOnly || formData.status === 'NEW'"
+              >
                 <q-banner
                   inline-actions
                   bordered
@@ -202,7 +207,7 @@ function onSubmit(data: any) {
                 </q-banner>
               </div>
               <div class="row q-gutter-x-sm">
-                <div class="col-3">
+                <div class="col-xs-12 col-md-3">
                   <q-select
                     :class="inputEdit(isReadOnly)"
                     :readonly="isReadOnly"
@@ -221,22 +226,20 @@ function onSubmit(data: any) {
                     hide-bottom-space
                   />
                 </div>
-                <div class="col-3">
-                  <div class="col-3">
-                    <q-input
-                      :class="inputEdit(isReadOnly)"
-                      :readonly="isReadOnly"
-                      ref="titleRef"
-                      :rules="[
-                        (val) => !!val || 'กรุณากรอกเรื่องอุทธรณ์/ร้องทุกข์',
-                      ]"
-                      v-model="formData.title"
-                      dense
-                      outlined
-                      label="เรื่องอุทธรณ์/ร้องทุกข์"
-                      hide-bottom-space
-                    />
-                  </div>
+                <div class="col-xs-12 col-md-3">
+                  <q-input
+                    :class="inputEdit(isReadOnly)"
+                    :readonly="isReadOnly"
+                    ref="titleRef"
+                    :rules="[
+                      (val) => !!val || 'กรุณากรอกเรื่องอุทธรณ์/ร้องทุกข์',
+                    ]"
+                    v-model="formData.title"
+                    dense
+                    outlined
+                    label="เรื่องอุทธรณ์/ร้องทุกข์"
+                    hide-bottom-space
+                  />
                 </div>
               </div>
               <div class="row">
diff --git a/src/modules/07_appealComplain/views/Main.vue b/src/modules/07_appealComplain/views/Main.vue
index 5c47962..6471e94 100644
--- a/src/modules/07_appealComplain/views/Main.vue
+++ b/src/modules/07_appealComplain/views/Main.vue
@@ -14,7 +14,7 @@ import config from "@/app.config";
 import type { FormType } from "@/modules/07_appealComplain/interface/response/mainType";
 import type { DataOption } from "@/modules/07_appealComplain/interface/index/main";
 
-const total = ref<number>(0)
+const total = ref<number>(0);
 const currentPage = ref<number>(1);
 const maxPage = ref<number>(1);
 const page = ref<number>(1);
@@ -175,7 +175,7 @@ const getData = async () => {
       )
     )
     .then((res: any) => {
-      total.value = res.data.result.total
+      total.value = res.data.result.total;
       maxPage.value = Math.ceil(res.data.result.total / rowsPerPage.value);
       let data = res.data.result.data;
       dataStore.fetchAppealComplain(data);
@@ -280,7 +280,7 @@ onMounted(async () => {
             </div>
           </div>
           <div class="row col-12 q-col-gutter-sm q-mb-sm">
-            <div class="col-2">
+            <div class="col-xs-12 col-md-2">
               <datepicker
                 menu-class-name="modalfix"
                 v-model="formData.year"
@@ -316,7 +316,7 @@ onMounted(async () => {
               </datepicker>
             </div>
 
-            <div class="col-2">
+            <div class="col-xs-12 col-md-2">
               <q-select
                 v-model="formData.type"
                 label="ประเภท"
@@ -330,7 +330,7 @@ onMounted(async () => {
                 @update:model-value="dataUpdate"
               />
             </div>
-            <div class="col-2">
+            <div class="col-xs-12 col-md-2">
               <q-select
                 v-model="formData.status"
                 label="สถานะ"
diff --git a/src/modules/08_KPI/components/Evaluator/01_TabAll.vue b/src/modules/08_KPI/components/Evaluator/01_TabAll.vue
index 3a4b976..f114fa1 100644
--- a/src/modules/08_KPI/components/Evaluator/01_TabAll.vue
+++ b/src/modules/08_KPI/components/Evaluator/01_TabAll.vue
@@ -77,6 +77,33 @@ const pagination = ref({
           </q-td>
         </q-tr>
       </template>
+      <template #item="props">
+        <div class="q-pa-xs col-xs-12 col-sm-6 col-md-4 col-lg-3">
+          <q-card bordered flat @click="redirectViewDetail(props.row.id)">
+            <q-list>
+              <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>
+                    <div v-if="col.name === 'name'">
+                      {{
+                        `${props.row.prefix}${props.row.firstname}  ${props.row.lastname}`
+                      }}
+                    </div>
+                    <div v-else>
+                      {{ col.value ? col.value : "-" }}
+                    </div></q-item-label
+                  >
+                </q-item-section>
+              </q-item>
+            </q-list>
+          </q-card>
+        </div>
+      </template>
       <template v-slot:pagination="scope">
         ทั้งหมด {{ total }} รายการ
         <q-pagination
diff --git a/src/modules/08_KPI/components/Evaluator/02_TabOther.vue b/src/modules/08_KPI/components/Evaluator/02_TabOther.vue
index 772f2f1..b081981 100644
--- a/src/modules/08_KPI/components/Evaluator/02_TabOther.vue
+++ b/src/modules/08_KPI/components/Evaluator/02_TabOther.vue
@@ -152,6 +152,54 @@ function onClickApprove(type: string = "") {
           </q-td>
         </q-tr>
       </template>
+      <template v-slot:item="props">
+        <div
+          class="q-pa-xs col-xs-12 col-sm-6 col-md-4 col-lg-3 grid-style-transition"
+          :style="props.selected ? 'transform: scale(0.95);' : ''"
+        >
+          <q-card
+            bordered
+            flat
+            :class="
+              props.selected
+                ? $q.dark.isActive
+                  ? 'bg-grey-9'
+                  : 'bg-grey-2'
+                : ''
+            "
+          >
+            <q-card-section>
+              <q-checkbox
+                dense
+                v-model="props.selected"
+                :label="props.row.name"
+              />
+            </q-card-section>
+            <q-separator />
+            <q-list @click="redirectViewDetail(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>
+                    <div v-if="col.name === 'name'">
+                      {{
+                        `${props.row.prefix}${props.row.firstname}  ${props.row.lastname}`
+                      }}
+                    </div>
+                    <div v-else>
+                      {{ col.value ? col.value : "-" }}
+                    </div></q-item-label
+                  >
+                </q-item-section>
+              </q-item>
+            </q-list>
+          </q-card>
+        </div>
+      </template>
       <template v-slot:pagination="scope">
         ทั้งหมด {{ total }} รายการ
         <q-pagination
diff --git a/src/modules/08_KPI/components/Tab/01_Assessment.vue b/src/modules/08_KPI/components/Tab/01_Assessment.vue
index 5afc8d5..8cb40c6 100644
--- a/src/modules/08_KPI/components/Tab/01_Assessment.vue
+++ b/src/modules/08_KPI/components/Tab/01_Assessment.vue
@@ -212,7 +212,7 @@ onMounted(() => {
 
 <template>
   <q-scroll-area
-    style="height: 100vh"
+    style="height: 100vh; width: auto"
     class="bg-white row col-12 text-dark q-pa-md"
   >
     <div class="text-weight-bold text-body2">
diff --git a/src/modules/08_KPI/components/Tab/Dialog/01_FormIndicator.vue b/src/modules/08_KPI/components/Tab/Dialog/01_FormIndicator.vue
index 90937c5..0f3a90e 100644
--- a/src/modules/08_KPI/components/Tab/Dialog/01_FormIndicator.vue
+++ b/src/modules/08_KPI/components/Tab/Dialog/01_FormIndicator.vue
@@ -462,7 +462,7 @@ const title = computed(() => {
 
         <q-card-section class="q-pa-none scroll" style="max-height: 75vh">
           <div class="col-12 row">
-            <div class="bg-grey-1 q-pa-md col-3 row lineRight">
+            <div class="bg-grey-1 q-pa-md col-xs-12 col-md-3 row lineRight">
               <div class="col-12 fit">
                 <div class="row col-12" v-if="numpage !== 3">
                   <q-checkbox
@@ -617,14 +617,14 @@ const title = computed(() => {
               </div>
             </div>
 
-            <div class="col-9">
+            <div class="col-xs-12 col-md-9">
               <div class="row q-pa-md q-col-gutter-sm">
                 <div class="col-12">
                   <span class="text-body2 text-weight-medium"
                     >รายละเอียดตัวชี้วัด</span
                   >
                 </div>
-                <div class="col-6">
+                <div class="col-xs-12 col-6">
                   <q-card bordered class="full-height q-pa-sm">
                     <div class="q-pa-sm q-col-gutter-lg">
                       <div class="col-12 row" v-if="numpage !== 3">
@@ -733,7 +733,7 @@ const title = computed(() => {
                     </div>
                   </q-card>
                 </div>
-                <div class="col-6 row">
+                <div class="col-xs-12 col-6 row">
                   <div class="row col-12 card-box">
                     <div
                       class="col-12 bg-grey-2 row items-center text-weight-medium"
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 7d3ecb7..8d57926 100644
--- a/src/modules/08_KPI/components/Tab/Dialog/04_FormCompetency.vue
+++ b/src/modules/08_KPI/components/Tab/Dialog/04_FormCompetency.vue
@@ -282,7 +282,7 @@ watch(
 
         <q-card-section class="q-pa-none scroll" style="max-height: 80vh">
           <div class="row">
-            <div class="bg-grey-1 q-pa-md col-3 row lineRight">
+            <div class="bg-grey-1 q-pa-md col-xs-12 col-md-3 row lineRight">
               <div class="col-12 q-col-gutter-sm fit">
                 <div class="col-12">
                   <q-select
@@ -362,13 +362,13 @@ watch(
               </div>
             </div>
 
-            <div class="col-9 q-pa-md q-col-gutter-sm">
+            <div class="col-xs-12 col-md-9 q-pa-md q-col-gutter-sm">
               <span class="text-body2 text-weight-medium"
                 >รายละเอียดสมรรถนะ</span
               >
 
               <div class="row q-col-gutter-sm">
-                <div class="col-5 row">
+                <div class="col-xs-12 col-md-5 row">
                   <q-card bordered class="fit q-pa-sm no-shadow">
                     <div
                       v-for="(field, index) in Object.keys(fieldDetailLabels)"
@@ -442,14 +442,13 @@ watch(
                     </div>
                   </q-card>
                 </div>
-                <div class="col-7">
-                  <q-table
+                <div class="col-xs-12 col-md-7">
+                  <d-table
                     flat
                     bordered
                     dense
                     :paging="true"
                     row-key="level"
-                    class="custom-table2"
                     virtual-scroll
                     :rows="dataListCapacityDetails"
                     hide-pagination
@@ -486,6 +485,32 @@ watch(
                         </q-td>
                       </q-tr>
                     </template>
+                    <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>
+                            <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 = 'description')">
+                                  <span v-html="col.value"></span
+                                ></q-item-label>
+
+                                <q-item-label v-else>{{
+                                  col.value ?? "-"
+                                }}</q-item-label>
+                              </q-item-section>
+                            </q-item>
+                          </q-list>
+                        </q-card>
+                      </div>
+                    </template>
                     <template v-slot:no-data="{ icon, message }">
                       <div
                         class="q-pa-md text-weight-bold full-width text-center"
@@ -493,7 +518,7 @@ watch(
                         <span style="font-size: 16px">ไม่พบข้อมูลสมรรถนะ</span>
                       </div>
                     </template>
-                  </q-table>
+                  </d-table>
 
                   <!-- <q-card bordered class="col-12 no-shadow">
                     <div class="bg-grey-2 row q-py-sm text-weight-bold col-12">
diff --git a/src/modules/08_KPI/components/Tab/Dialog/DialogViewInfo.vue b/src/modules/08_KPI/components/Tab/Dialog/DialogViewInfo.vue
index 12c71e8..e911d34 100644
--- a/src/modules/08_KPI/components/Tab/Dialog/DialogViewInfo.vue
+++ b/src/modules/08_KPI/components/Tab/Dialog/DialogViewInfo.vue
@@ -1,4 +1,3 @@
-divdiv
 <script setup lang="ts">
 import { ref, watch } from "vue";
 import { useQuasar } from "quasar";
@@ -79,7 +78,10 @@ watch(
 
 <template>
   <q-dialog v-model="modal" persistent>
-    <q-card class="col-12" style="width: 45%">
+    <q-card
+      class="col-12"
+      :style="!$q.screen.gt.xs ? 'width: 100%' : 'width: 45%'"
+    >
       <DialogHeader :tittle="'คำอธิบายผลสำเร็จของงาน'" :close="closeDialog" />
       <q-separator />
       <q-card-section>
diff --git a/src/modules/08_KPI/components/Tab/TabMain.vue b/src/modules/08_KPI/components/Tab/TabMain.vue
index 52ab8ad..d613417 100644
--- a/src/modules/08_KPI/components/Tab/TabMain.vue
+++ b/src/modules/08_KPI/components/Tab/TabMain.vue
@@ -35,22 +35,19 @@ const splitterModel = ref<number>(12);
 </script>
 
 <template>
-  <q-splitter v-model="splitterModel" disable>
+  <q-splitter
+    v-if="$q.screen.gt.xs"
+    v-model="splitterModel"
+    :horizontal="!$q.screen.gt.xs"
+    disable
+  >
     <template v-slot:before>
       <q-tabs
         v-model="store.tabMain"
-        vertical
+        :vertical="$q.screen.gt.xs"
         class="text-grey-7 text-weight-light"
         active-class="bg-blue-1 text-blue-8 text-weight-bold"
       >
-        <!-- <q-tab
-          class="hover-tab"
-          v-for="(tab, index) in itemsTab"
-          :key="index"
-          :name="tab.name"
-          :icon="tab.icon"
-          :label="tab.label"
-        /> -->
         <q-tab name="1" label="จัดทำข้อตกลง" />
         <q-tab
           name="2"
@@ -62,12 +59,6 @@ const splitterModel = ref<number>(12);
           label="รายงานผลสำเร็จของงาน"
           :disable="store.tabOpen < 3"
         />
-        <!-- <q-tab name="3" label="ผู้บังคับบัญชา">
-          <div class="text-caption">เหนือขึ้นไป</div>
-        </q-tab>
-        <q-tab name="4" label="ผู้บังคับบัญชา">
-          <div class="text-caption">เหนือขึ้นไปอีกชั้นหนึ่ง</div>
-        </q-tab> -->
         <q-tab name="5" label="ไฟล์เอกสาร" />
       </q-tabs>
     </template>
@@ -96,6 +87,42 @@ const splitterModel = ref<number>(12);
       </q-tab-panels>
     </template>
   </q-splitter>
+
+  <q-list bordered class="rounded-borders" v-else>
+    <q-expansion-item
+      expand-separator
+      label="จัดทำข้อตกลง"
+      @click="store.tabMain = '1'"
+    >
+      <Assessment v-if="store.tabMain === '1'" />
+    </q-expansion-item>
+
+    <q-expansion-item
+      expand-separator
+      label="รายงานความก้าวหน้า"
+      @click="store.tabMain = '2'"
+      :disable="store.tabOpen < 2"
+    >
+      <Assessment v-if="store.tabMain === '2'" :type="'evaluator'" />
+    </q-expansion-item>
+
+    <q-expansion-item
+      expand-separator
+      label="รายงานผลสำเร็จของงาน"
+      @click="store.tabMain = '3'"
+      :disable="store.tabOpen < 3"
+    >
+      <Assessment v-if="store.tabMain === '3'" :type="'commander'" />
+    </q-expansion-item>
+
+    <q-expansion-item
+      expand-separator
+      label="ไฟล์เอกสาร"
+      @click="store.tabMain = '5'"
+    >
+      <File v-if="store.tabMain === '5'" />
+    </q-expansion-item>
+  </q-list>
 </template>
 
 <style scoped>
diff --git a/src/modules/08_KPI/components/Tab/Topic/01_Indicator.vue b/src/modules/08_KPI/components/Tab/Topic/01_Indicator.vue
index 318ba81..c399fef 100644
--- a/src/modules/08_KPI/components/Tab/Topic/01_Indicator.vue
+++ b/src/modules/08_KPI/components/Tab/Topic/01_Indicator.vue
@@ -238,7 +238,7 @@ const isEditStep3 = computed(() => {
 </script>
 
 <template>
-  <q-card bordered style="border-radius: 5px" class="no-shadow">
+  <q-card bordered style="border-radius: 5px" class="no-shadow q-mt-sm">
     <q-card-section class="bg-grey-2 q-py-sm">
       <div class="row items-center no-wrap">
         <div class="col">
@@ -275,7 +275,7 @@ const isEditStep3 = computed(() => {
     </q-card-section>
     <q-separator />
     <q-card-section class="q-pa-sm">
-      <q-table
+      <d-table
         ref="table"
         :columns="columns"
         :rows="rows"
@@ -285,7 +285,6 @@ const isEditStep3 = computed(() => {
         bordered
         dense
         hide-pagination
-        class="custom-table2"
         :visible-columns="visibleColumns"
         :rows-per-page-options="[20]"
         no-data-label="ไม่มีข้อมูล"
@@ -331,31 +330,6 @@ const isEditStep3 = computed(() => {
                     </q-tooltip>
                   </q-btn>
                 </q-btn-group>
-                <!-- <q-rating
-                  v-model="props.row.point"
-                  max="5"
-                  size="sm"
-                  color="grey"
-                  :color-selected="store.ratingColors"
-                  label="ระดับการประเมินพฤติกรรม"
-                  disable
-                >
-                  <template v-slot:tip-1>
-                    <q-tooltip>{{ props.row.achievement1 }}</q-tooltip>
-                  </template>
-                  <template v-slot:tip-2>
-                    <q-tooltip>{{ props.row.achievement2 }}</q-tooltip>
-                  </template>
-                  <template v-slot:tip-3>
-                    <q-tooltip>{{ props.row.achievement3 }}</q-tooltip>
-                  </template>
-                  <template v-slot:tip-4>
-                    <q-tooltip>{{ props.row.achievement4 }}</q-tooltip>
-                  </template>
-                  <template v-slot:tip-5>
-                    <q-tooltip>{{ props.row.achievement5 }}</q-tooltip>
-                  </template>
-                </q-rating> -->
               </div>
               <div v-else-if="col.name === 'achievement'">
                 {{ props.row.point ? `ระดับ ${props.row.point}` : "" }}
@@ -431,7 +405,96 @@ const isEditStep3 = computed(() => {
             </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>
+              <div class="row justify-end">
+                <q-btn
+                  flat
+                  round
+                  icon="info"
+                  color="info"
+                  size="14px"
+                  @click="onClickView(props.row.id)"
+                >
+                  <q-tooltip>คำอธิบายผลสำเร็จของงาน</q-tooltip>
+                </q-btn>
+              </div>
+
+              <q-separator />
+              <q-list>
+                <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>{{ col.value ?? "-" }}</q-item-label>
+                  </q-item-section>
+                </q-item>
+              </q-list>
+              <q-separator />
+              <q-card-actions
+                align="around"
+                v-if="
+                  store.dataEvaluation.evaluationStatus == 'APPROVE' &&
+                  store.tabMain === '2'
+                "
+              >
+                <q-btn
+                  flat
+                  round
+                  icon="mdi-developer-board"
+                  color="blue-6"
+                  size="12px"
+                  dense
+                  @click="openPopupProgress(props.row.id)"
+                >
+                  <q-tooltip>รายงานความก้าวหน้า</q-tooltip>
+                </q-btn>
+                <q-btn
+                  flat
+                  round
+                  icon="warning"
+                  color="red-5"
+                  size="12px"
+                  dense
+                  main="problem"
+                  @click="openPopupProblem(props.row.id)"
+                >
+                  <q-tooltip>รายงานปัญหา</q-tooltip>
+                </q-btn>
+              </q-card-actions>
+
+              <q-card-actions align="around" v-if="isEditStep1">
+                <q-btn
+                  flat
+                  round
+                  icon="edit"
+                  color="edit"
+                  size="12px"
+                  dense
+                  @click="onAdd(true, props.row.id)"
+                >
+                  <q-tooltip>แก้ไขข้อมูล</q-tooltip>
+                </q-btn>
+
+                <q-btn
+                  flat
+                  round
+                  icon="delete"
+                  color="red"
+                  size="12px"
+                  dense
+                  @click="onDelete(props.row.id)"
+                >
+                  <q-tooltip>ลบข้อมูล</q-tooltip>
+                </q-btn>
+              </q-card-actions>
+            </q-card>
+          </div>
+        </template>
+      </d-table>
     </q-card-section>
   </q-card>
 
diff --git a/src/modules/08_KPI/components/Tab/Topic/02_Competency.vue b/src/modules/08_KPI/components/Tab/Topic/02_Competency.vue
index 6564cdb..1d91d35 100644
--- a/src/modules/08_KPI/components/Tab/Topic/02_Competency.vue
+++ b/src/modules/08_KPI/components/Tab/Topic/02_Competency.vue
@@ -266,7 +266,7 @@ onMounted(() => {
 
 <template>
   <div v-for="(item, index) in store.competencyType" :key="index">
-    <q-card bordered style="border-radius: 5px" class="no-shadow">
+    <q-card bordered style="border-radius: 5px" class="no-shadow q-mt-sm">
       <q-card-section class="bg-grey-2 q-py-sm">
         <div class="row items-center">
           <div class="col">
@@ -302,7 +302,7 @@ onMounted(() => {
         </div>
       </q-card-section>
       <q-card-section class="q-pa-sm">
-        <q-table
+        <d-table
           ref="table"
           :columns="columns"
           :rows="rows[item.id]"
@@ -312,7 +312,6 @@ onMounted(() => {
           :paging="true"
           dense
           hide-pagination
-          class="custom-table2"
           no-data-label="ไม่มีข้อมูล"
           :visible-columns="visibleColumns"
         >
@@ -348,29 +347,7 @@ onMounted(() => {
                         </q-tooltip>
                       </q-btn>
                     </q-btn-group>
-                    <!-- <q-rating
-                      v-model="props.row.point"
-                      max="5"
-                      size="sm"
-                      color="grey"
-                      :color-selected="store.ratingColors"
-                      label="ระดับการประเมินพฤติกรรม"
-                      disable
-                    >
-                      <template
-                        v-for="(i, index) in sortedDataListCriteria"
-                        :key="i.level"
-                        v-slot:[`tip-${index+1}`]
-                      >
-                        <q-tooltip>
-                          <div class="text-body2">
-                            <span v-html="i.description"></span>
-                          </div>
-                        </q-tooltip>
-                      </template>
-                    </q-rating> -->
                   </div>
-                  <!-- <div v-else>รอ ทำ select</div> -->
                 </div>
                 <div v-else-if="col.name == 'summary'">
                   {{
@@ -438,7 +415,105 @@ onMounted(() => {
               </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>
+                  <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 == 'createDate'">
+                        {{ col.value ? date2Thai(col.value) : "-" }}
+                      </q-item-label>
+                      <q-item-label v-else-if="col.name == 'point'">
+                        <q-btn-group outline>
+                          <q-btn
+                            v-for="(i, index) in sortedDataListCriteria"
+                            :key="index"
+                            :class="props.row.point == i.level && 'active'"
+                            outline
+                            color="grey-6"
+                            :label="i.level"
+                          >
+                            <q-tooltip>
+                              <div class="text-body2">
+                                <span v-html="i.description"></span>
+                              </div>
+                            </q-tooltip>
+                          </q-btn>
+                        </q-btn-group>
+                      </q-item-label>
+                      <q-item-label v-else-if="col.name == 'summary'">
+                        {{
+                          props.row.point !== 0
+                            ? (props.row.point / 5) * props.row.weight
+                            : "-"
+                        }}
+                      </q-item-label>
+                      <q-item-label v-else>{{ col.value ?? "-" }}</q-item-label>
+                    </q-item-section>
+                  </q-item>
+                </q-list>
+                <q-separator />
+                <q-card-actions
+                  align="around"
+                  v-if="
+                    store.dataEvaluation.evaluationStatus == 'APPROVE' &&
+                    store.tabMain === '2'
+                  "
+                >
+                  <q-btn
+                    flat
+                    round
+                    icon="mdi-developer-board"
+                    color="blue-6"
+                    size="12px"
+                    dense
+                    @click="openPopupProgress(props.row.id)"
+                  >
+                    <q-tooltip>รายงานความก้าวหน้า</q-tooltip>
+                  </q-btn>
+                  <q-btn
+                    flat
+                    round
+                    icon="warning"
+                    color="red-5"
+                    size="12px"
+                    dense
+                    main="problem"
+                    @click="openPopupProblem(props.row.id)"
+                  >
+                    <q-tooltip>รายงานปัญหา</q-tooltip>
+                  </q-btn>
+                </q-card-actions>
+
+                <q-card-actions align="around" v-if="isEditStep1">
+                  <q-btn
+                    flat
+                    round
+                    icon="edit"
+                    color="edit"
+                    @click.stop.pervent="onEdit(props.row, item.id)"
+                  >
+                    <q-tooltip>แก้ไข </q-tooltip>
+                  </q-btn>
+                  <q-btn
+                    flat
+                    round
+                    icon="delete"
+                    color="red"
+                    @click.stop.pervent="onDelete(props.row.id, item.id)"
+                  >
+                    <q-tooltip>ลบข้อมูล </q-tooltip>
+                  </q-btn>
+                </q-card-actions>
+              </q-card>
+            </div>
+          </template>
+        </d-table>
       </q-card-section>
     </q-card>
   </div>
diff --git a/src/modules/08_KPI/components/Tab/Topic/03_Develop.vue b/src/modules/08_KPI/components/Tab/Topic/03_Develop.vue
index dcc510b..525dade 100644
--- a/src/modules/08_KPI/components/Tab/Topic/03_Develop.vue
+++ b/src/modules/08_KPI/components/Tab/Topic/03_Develop.vue
@@ -227,7 +227,7 @@ onMounted(() => {
       </div>
     </q-card-section>
     <q-card-section class="q-pa-sm">
-      <q-table
+      <d-table
         ref="table"
         :columns="columns"
         :rows="rows"
@@ -237,7 +237,6 @@ onMounted(() => {
         :paging="true"
         dense
         hide-pagination
-        class="custom-table2"
         no-data-label="ไม่มีข้อมูล"
         :visible-columns="visibleColumns"
       >
@@ -362,7 +361,135 @@ onMounted(() => {
             </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>
+                <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 == 'createDate'">
+                      {{ col.value ? date2Thai(col.value) : "-" }}
+                    </q-item-label>
+                    <q-item-label v-else-if="col.name == 'develop'">
+                      <div class="column">
+                        <q-checkbox
+                          size="xs"
+                          :model-value="props.row.isDevelopment70"
+                          label="70 การลงมือปฏิบัติ (โดยผู้บังคับบัญชามอบหมาย)"
+                        />
+                        <q-checkbox
+                          size="xs"
+                          :model-value="props.row.isDevelopment20"
+                          label="20 การเรียนรู้จากผู้อื่น (Coach/Mentor/Consulting)"
+                        />
+                        <q-checkbox
+                          size="xs"
+                          :model-value="props.row.isDevelopment10"
+                          label="10 การฝึกอบรมอื่นๆ"
+                        />
+                      </div>
+                    </q-item-label>
+                    <q-item-label v-else-if="col.name == 'achievement'">
+                      <q-btn-group outline>
+                        <q-btn
+                          outline
+                          color="grey-6"
+                          label="0"
+                          :class="props.row.summary == 0 && 'active'"
+                          ><q-tooltip>{{
+                            props.row.achievement0
+                          }}</q-tooltip></q-btn
+                        >
+                        <q-btn
+                          outline
+                          color="grey-6"
+                          label="5"
+                          :class="props.row.summary == 5 && 'active'"
+                          ><q-tooltip>{{
+                            props.row.achievement5
+                          }}</q-tooltip></q-btn
+                        >
+                        <q-btn
+                          outline
+                          color="grey-6"
+                          label="10"
+                          :class="props.row.summary == 10 && 'active'"
+                          ><q-tooltip>{{
+                            props.row.achievement10
+                          }}</q-tooltip></q-btn
+                        >
+                      </q-btn-group>
+                    </q-item-label>
+                    <q-item-label v-else-if="col.name == 'summary'">
+                      {{ props.row.summary ? props.row.summary : 0 }}
+                    </q-item-label>
+                    <q-item-label v-else>
+                      {{ col.value ? col.value : "-" }}
+                    </q-item-label>
+                  </q-item-section>
+                </q-item>
+              </q-list>
+              <q-separator />
+              <q-card-actions
+                align="around"
+                v-if="
+                  store.dataEvaluation.evaluationStatus == 'APPROVE' &&
+                  store.tabMain === '2'
+                "
+              >
+                <q-btn
+                  flat
+                  round
+                  icon="mdi-developer-board"
+                  color="blue-6"
+                  size="12px"
+                  dense
+                  @click="openPopupProgress(props.row.id)"
+                >
+                  <q-tooltip>รายงานความก้าวหน้า</q-tooltip>
+                </q-btn>
+                <q-btn
+                  flat
+                  round
+                  icon="warning"
+                  color="red-5"
+                  size="12px"
+                  dense
+                  main="problem"
+                  @click="openPopupProblem(props.row.id)"
+                >
+                  <q-tooltip>รายงานปัญหา</q-tooltip>
+                </q-btn>
+              </q-card-actions>
+
+              <q-card-actions align="around" v-if="isEditStep1">
+                <q-btn
+                  flat
+                  round
+                  icon="edit"
+                  color="edit"
+                  @click.stop.pervent="onEdit(props.row.id)"
+                >
+                  <q-tooltip>แก้ไข </q-tooltip>
+                </q-btn>
+                <q-btn
+                  flat
+                  round
+                  icon="delete"
+                  color="red"
+                  @click.stop.pervent="onDelete(props.row.id)"
+                >
+                  <q-tooltip>ลบข้อมูล </q-tooltip>
+                </q-btn>
+              </q-card-actions>
+            </q-card>
+          </div>
+        </template>
+      </d-table>
     </q-card-section>
   </q-card>
 
diff --git a/src/modules/08_KPI/store.ts b/src/modules/08_KPI/store.ts
index f9e5b64..636dd18 100644
--- a/src/modules/08_KPI/store.ts
+++ b/src/modules/08_KPI/store.ts
@@ -129,11 +129,9 @@ export const useKpiDataStore = defineStore("KPIDate", () => {
     }
   }
 
-  function checkCompetency() {
-    const position = dataEvaluation.value.position;
-    const posTypeName = dataEvaluation.value.posTypeName;
-    const posLevelName = dataEvaluation.value.posLevelName;
-    const executiveName = dataEvaluation.value.posExecutiveName;
+  async function checkCompetency() {
+    const position = await dataEvaluation.value.position;
+    const executiveName = await dataEvaluation.value.posExecutiveName;
 
     if (
       position == "ผู้ตรวจราชการกรุงเทพมหานคร" ||
@@ -156,33 +154,6 @@ export const useKpiDataStore = defineStore("KPIDate", () => {
           (x: DataOptions) => x.id == "HEAD" || x.id == "EXECUTIVE"
         );
       }
-      // switch (posTypeName + " " + posLevelName) {
-      //   // case "ทั่วไป ปฏิบัติงาน":
-      //   // case "ทั่วไป ชำนาญงาน":
-      //   // case "ทั่วไป อาวุโส":
-      //   // case "วิชาการ ปฏิบัติการ":
-      //   // case "วิชาการ ชำนาญการ":
-      //   // case "วิชาการ ชำนาญการพิเศษ":
-      //   // case "วิชาการ เชี่ยวชาญ":
-      //   // case "วิชาการ ทรงคุณวุฒิ":
-      //   //   competencyType.value = competencyType.value.filter(
-      //   //     (x: DataOptions) => x.id == "HEAD" || x.id == "GROUP"
-      //   //   );
-      //   //   break;
-      //   case "อำนวยการ ต้น":
-      //   case "อำนวยการ สูง":
-      //   case "บริหาร ต้น":
-      //   case "บริหาร สูง":
-      //     competencyType.value = competencyType.value.filter(
-      //       (x: DataOptions) => x.id == "HEAD" || x.id == "EXECUTIVE"
-      //     );
-      //     break;
-      //   default:
-      //     competencyType.value = competencyType.value.filter(
-      //       (x: DataOptions) => x.id == "HEAD" || x.id == "GROUP"
-      //     );
-      //     break;
-      // }
     }
   }
 
diff --git a/src/modules/08_KPI/views/form.vue b/src/modules/08_KPI/views/form.vue
index 2dabd13..c0abfe3 100644
--- a/src/modules/08_KPI/views/form.vue
+++ b/src/modules/08_KPI/views/form.vue
@@ -3,8 +3,8 @@ import { ref, onMounted, reactive, computed, watch } from "vue";
 import { useRoute, useRouter } from "vue-router";
 import http from "@/plugins/http";
 import config from "@/app.config";
-import TabMain from "@/modules/08_KPI/components/Tab/TabMain.vue";
 import { useQuasar } from "quasar";
+import TabMain from "@/modules/08_KPI/components/Tab/TabMain.vue";
 
 import { useCounterMixin } from "@/stores/mixin";
 import { useKpiDataStore } from "@/modules/08_KPI/store";
@@ -312,6 +312,7 @@ function requireEdit() {
 onMounted(async () => {
   showLoader();
   await getAll();
+  console.log(store.dataEvaluation.avartar);
 });
 </script>
 
@@ -342,22 +343,44 @@ onMounted(async () => {
       </div>
       <div class="col-12">
         <q-card bordered flat class="relative-position">
+          <div class="row justify-center q-pa-md" v-if="!$q.screen.gt.xs">
+            <q-avatar size="80px">
+              <q-img
+                :src="store.dataEvaluation.avartar"
+                v-if="store.dataEvaluation.avartar !== undefined"
+              />
+              <q-img src="@/assets/avatar_user.jpg" v-else />
+            </q-avatar>
+          </div>
+          <!-- <div class="row text-center">
+        
+          </div> -->
+
           <div
+            v-if="$q.screen.gt.xs"
             class="absolute-center-left"
             style="left: 2%; top: 50%; transform: translateY(-50%)"
           >
-            <q-avatar size="95px">
-              <q-img :src="store.dataEvaluation.avartar" />
+            <q-avatar size="80px">
+              <q-img
+                :src="store.dataEvaluation.avartar"
+                v-if="store.dataEvaluation.avartar !== undefined"
+              />
+              <q-img src="@/assets/avatar_user.jpg" v-else />
             </q-avatar>
           </div>
           <div class="row col-12">
             <div class="row items-center col-12 q-pa-sm">
-              <div class="col-12" style="padding-left: 12%">
-                <div class="row col-12 items-center">
+              <div
+                class="col-12"
+                :style="$q.screen.gt.xs ? 'padding-left: 12%' : ''"
+              >
+                <div class="row col-12 items-center justify-center">
                   <span class="text-h6 text-weight-medium text-primary">{{
                     `${store.dataEvaluation.prefix}${store.dataEvaluation.firstName} ${store.dataEvaluation.lastName}`
                   }}</span>
-                  <q-space />
+                  <q-space v-if="$q.screen.gt.xs" />
+
                   <div class="q-gutter-x-sm">
                     <span
                       v-if="
@@ -370,6 +393,8 @@ onMounted(async () => {
                       class="text-red"
                       >*น้ำหนัก(ร้อยละ) ผลสัมฤทธิ์ของงานไม่ถูกต้อง</span
                     >
+                    <br v-if="!$q.screen.gt.xs" />
+                    
                     <q-btn
                       v-if="
                         store.rolePerson == 'USER' &&
@@ -429,18 +454,6 @@ onMounted(async () => {
                       <q-tooltip>ขอแก้ไขข้อตกลง</q-tooltip>
                     </q-btn>
 
-                    <!-- <q-btn
-                      v-if="!isReadonly"
-                      unelevated
-                      round
-                      icon="mdi-format-list-bulleted-square"
-                      color="grey-2"
-                      text-color="amber-10"
-                      size="md"
-                      @click="modalScore = true"
-                    >
-                      <q-tooltip>แก้ไขคะแนนเต็ม</q-tooltip>
-                    </q-btn> -->
                     <q-btn
                       unelevated
                       round
@@ -483,7 +496,12 @@ onMounted(async () => {
             </div>
 
             <div class="row items-center bg-toolbar col-12 q-pa-sm">
-              <div class="col-12 q-py-xs" style="padding-left: 12%">
+              <div
+                class="col-12 q-py-xs"
+                :style="
+                  $q.screen.gt.xs ? 'padding-left: 12%' : 'padding-left:5%'
+                "
+              >
                 <div class="row no-wrap">
                   <div class="col-2">
                     <div class="column">
diff --git a/src/modules/08_KPI/views/main.vue b/src/modules/08_KPI/views/main.vue
index 8e5b749..0968880 100644
--- a/src/modules/08_KPI/views/main.vue
+++ b/src/modules/08_KPI/views/main.vue
@@ -272,11 +272,11 @@ function onSubmit() {
 function getProfile() {
   http
     .get(config.API.profilePosition())
-    .then((res) => {
+    .then(async (res) => {
       const data = res.data.result;
       store.dataProfile = data;
-      store.checkCompetency();
-      store.checkCompetencyDefaultCompetencyLevel();
+      await store.checkCompetency();
+      await store.checkCompetencyDefaultCompetencyLevel();
 
       formRound.profileId = data.profileId;
       formRound.prefix = data.prefix;
@@ -383,7 +383,23 @@ onMounted(() => {
 <template>
   <div class="col-12 row justify-center">
     <div class="col-xs-12 col-sm-12 col-md-11">
-      <div class="toptitle text-white col-12 row items-center">
+      <q-toolbar style="padding: 0px">
+        <q-btn
+          icon="mdi-arrow-left"
+          unelevated
+          round
+          dense
+          flat
+          color="primary"
+          class="q-mr-sm"
+          @click="router.push(`/`)"
+        />
+        <q-toolbar-title class="toptitle text-white items-center">
+          รายการขอรับประเมินผลการปฏิบัติราชการระดับบุคคล</q-toolbar-title
+        >
+      </q-toolbar>
+
+      <!-- <div class="toptitle text-white col-12 row items-center">
         <q-btn
           icon="mdi-arrow-left"
           unelevated
@@ -395,11 +411,11 @@ onMounted(() => {
           @click="router.push(`/`)"
         />
         รายการขอรับประเมินผลการปฏิบัติราชการระดับบุคคล
-      </div>
+      </div> -->
       <div class="col-12">
         <q-card bordered class="q-pa-md">
-          <q-toolbar style="padding: 0">
-            <div class="row q-gutter-sm">
+          <div class="row col-12 q-col-gutter-sm q-mb-sm">
+            <div class="col-xs-12 col-md-3">
               <datepicker
                 menu-class-name="modalfix"
                 v-model="year"
@@ -418,7 +434,6 @@ onMounted(() => {
                     dense
                     lazy-rules
                     outlined
-                    class="inputgreen"
                     hide-bottom-space
                     :model-value="!!year ? year + 543 : null"
                     :label="`${'ปีงบประมาณ'}`"
@@ -434,6 +449,9 @@ onMounted(() => {
                   </q-input>
                 </template>
               </datepicker>
+            </div>
+
+            <div class="col-xs-10 col-md-3">
               <q-select
                 v-model="round"
                 outlined
@@ -442,11 +460,13 @@ onMounted(() => {
                 option-label="name"
                 option-value="id"
                 :options="roundMainOp"
-                style="min-width: 200px"
                 emit-value
                 map-options
                 @update:model-value="changRound"
               />
+            </div>
+
+            <div class="col-xs-2 col-md-2">
               <q-btn
                 flat
                 round
@@ -459,13 +479,7 @@ onMounted(() => {
             </div>
 
             <q-space />
-            <div class="row q-gutter-sm">
-              <!-- <q-input
-                outlined
-                dense
-                v-model="filterKeyword"
-                label="ค้นหา"
-              ></q-input> -->
+            <div class="col-xs-12 col-md-2">
               <q-select
                 v-model="visibleColumns"
                 multiple
@@ -481,10 +495,10 @@ onMounted(() => {
                 style="min-width: 150px"
               />
             </div>
-          </q-toolbar>
+          </div>
 
           <div class="col-12">
-            <q-table
+            <d-table
               ref="table"
               :columns="columns"
               :rows="rows"
@@ -494,7 +508,6 @@ onMounted(() => {
               bordered
               :paging="true"
               dense
-              class="custom-table2"
               :rows-per-page-options="[10, 25, 50, 100]"
               :visible-columns="visibleColumns"
               v-model:pagination="pagination"
@@ -524,6 +537,26 @@ onMounted(() => {
                   </q-td>
                 </q-tr>
               </template>
+              <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="redirectViewDetail(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>
+                            {{ col.value ? col.value : "-" }}</q-item-label
+                          >
+                        </q-item-section>
+                      </q-item>
+                    </q-list>
+                  </q-card>
+                </div>
+              </template>
               <template v-slot:pagination="scope">
                 ทั้งหมด {{ total }} รายการ
                 <q-pagination
@@ -538,7 +571,7 @@ onMounted(() => {
                   @update:model-value="fetchList"
                 ></q-pagination>
               </template>
-            </q-table>
+            </d-table>
           </div>
         </q-card>
       </div>
@@ -546,7 +579,10 @@ onMounted(() => {
   </div>
 
   <q-dialog v-model="modalDialog" persistent>
-    <q-card class="col-12" style="width: 25vw">
+    <q-card
+      class="col-12"
+      :style="$q.screen.gt.xs ? 'width: 25vw' : 'width: 100vw'"
+    >
       <q-form greedy @submit.prevent @validation-success="onSubmit">
         <DialogHeader :tittle="'สร้างแบบประเมินผลฯ'" :close="onCloseDialog" />
         <q-separator />
@@ -571,7 +607,6 @@ onMounted(() => {
                     dense
                     lazy-rules
                     outlined
-                    class="inputgreen"
                     hide-bottom-space
                     :model-value="!!yearDialog ? yearDialog + 543 : null"
                     :label="`${'ปีงบประมาณ'}`"
diff --git a/src/modules/08_KPI/views/mainEvaluator.vue b/src/modules/08_KPI/views/mainEvaluator.vue
index f7acc39..f024cf5 100644
--- a/src/modules/08_KPI/views/mainEvaluator.vue
+++ b/src/modules/08_KPI/views/mainEvaluator.vue
@@ -198,7 +198,7 @@ onMounted(async () => {
 <template>
   <div class="col-12 row justify-center">
     <div class="col-xs-12 col-sm-12 col-md-11">
-      <div class="toptitle text-white col-12 row items-center">
+      <q-toolbar style="padding: 0px;">
         <q-btn
           icon="mdi-arrow-left"
           unelevated
@@ -209,98 +209,112 @@ onMounted(async () => {
           class="q-mr-sm"
           @click="router.push(`/`)"
         />
-        รายการการประเมินผลการปฏิบัติราชการระดับบุคคล
-      </div>
+        <q-toolbar-title class="toptitle text-white items-center">
+          รายการการประเมินผลการปฏิบัติราชการระดับบุคคล</q-toolbar-title
+        >
+      </q-toolbar>
+
+      <!-- <div class="toptitle text-white col-12 row items-center">
+        <q-btn
+          icon="mdi-arrow-left"
+          unelevated
+          round
+          dense
+          flat
+          color="primary"
+          class="q-mr-sm"
+          @click="router.push(`/`)"
+        />
+      </div> -->
       <div class="col-12">
         <q-card bordered class="q-pa-md">
-          <q-toolbar style="padding: 0">
-            <div class="row q-gutter-sm">
-              <datepicker
-                menu-class-name="modalfix"
-                v-model="store.yearRound"
-                :locale="'th'"
-                autoApply
-                year-picker
-                :enableTimePicker="false"
-                @update:model-value="fetchRoundOption(true)"
-              >
-                <template #year="{ year }">{{ year + 543 }}</template>
-                <template #year-overlay-value="{ value }">{{
-                  parseInt(value + 543)
-                }}</template>
-                <template #trigger>
-                  <q-input
-                    dense
-                    lazy-rules
-                    outlined
-                    hide-bottom-space
-                    :model-value="
-                      !!store.yearRound ? store.yearRound + 543 : null
-                    "
-                    :label="`${'ปีงบประมาณ'}`"
-                  >
-                    <template v-slot:prepend>
-                      <q-icon
-                        name="event"
-                        class="cursor-pointer"
-                        style="color: var(--q-primary)"
-                      >
-                      </q-icon>
-                    </template>
-                  </q-input>
-                </template>
-              </datepicker>
-
-              <q-select
-                v-model="store.formQuery.round"
-                outlined
-                label="รอบการประเมิน"
-                dense
-                option-label="name"
-                option-value="id"
-                :options="roundOp"
-                style="min-width: 200px"
-                emit-value
-                map-options
-                @update:model-value="changRound"
-              />
-            </div>
+          <div class="items-center col-12 row q-col-gutter-sm q-mb-sm">
+            <datepicker
+              class="col-md-1 col-xs-12"
+              menu-class-name="modalfix"
+              v-model="store.yearRound"
+              :locale="'th'"
+              autoApply
+              year-picker
+              :enableTimePicker="false"
+              @update:model-value="fetchRoundOption(true)"
+            >
+              <template #year="{ year }">{{ year + 543 }}</template>
+              <template #year-overlay-value="{ value }">{{
+                parseInt(value + 543)
+              }}</template>
+              <template #trigger>
+                <q-input
+                  dense
+                  lazy-rules
+                  outlined
+                  hide-bottom-space
+                  :model-value="
+                    !!store.yearRound ? store.yearRound + 543 : null
+                  "
+                  :label="`${'ปีงบประมาณ'}`"
+                >
+                  <template v-slot:prepend>
+                    <q-icon
+                      name="event"
+                      class="cursor-pointer"
+                      style="color: var(--q-primary)"
+                    >
+                    </q-icon>
+                  </template>
+                </q-input>
+              </template>
+            </datepicker>
+            <q-select
+              class="col-md-2 col-xs-12"
+              v-model="store.formQuery.round"
+              outlined
+              label="รอบการประเมิน"
+              dense
+              option-label="name"
+              option-value="id"
+              :options="roundOp"
+              emit-value
+              map-options
+              @update:model-value="changRound"
+            />
 
             <q-space />
-            <div class="row q-gutter-sm">
-              <q-input
-                outlined
-                dense
-                v-model="store.formQuery.keyword"
-                label="ค้นหาผู้ขอรับการประเมิน"
-                @keydown.enter.prevent="changRound"
-              >
-                <template v-slot:append>
-                  <q-icon
-                    v-if="store.formQuery.keyword !== ''"
-                    name="clear"
-                    class="cursor-pointer"
-                    @click="(store.formQuery.keyword = ''), changRound()"
-                  />
-                  <q-icon v-else name="search" color="grey-5" />
-                </template>
-              </q-input>
-              <q-select
-                v-model="visibleColumns"
-                multiple
-                outlined
-                dense
-                options-dense
-                :display-value="$q.lang.table.columns"
-                emit-value
-                map-options
-                :options="columns"
-                option-value="name"
-                options-cover
-                style="min-width: 150px"
-              />
-            </div>
-          </q-toolbar>
+
+            <q-input
+              class="col-md-2 col-xs-12"
+              outlined
+              dense
+              v-model="store.formQuery.keyword"
+              label="ค้นหาผู้ขอรับการประเมิน"
+              @keydown.enter.prevent="changRound"
+            >
+              <template v-slot:append>
+                <q-icon
+                  v-if="store.formQuery.keyword !== ''"
+                  name="clear"
+                  class="cursor-pointer"
+                  @click="(store.formQuery.keyword = ''), changRound()"
+                />
+                <q-icon v-else name="search" color="grey-5" />
+              </template>
+            </q-input>
+            <q-select
+              class="col-md-1 col-xs-12"
+              v-model="visibleColumns"
+              multiple
+              outlined
+              dense
+              options-dense
+              :display-value="$q.lang.table.columns"
+              emit-value
+              map-options
+              :options="columns"
+              option-value="name"
+              options-cover
+            />
+          </div>
+
           <div class="col-12">
             <q-card bordered class="q-mt-sm">
               <q-tabs
diff --git a/src/modules/09_scholarship/views/detail.vue b/src/modules/09_scholarship/views/detail.vue
index 8fea0e5..08347a0 100644
--- a/src/modules/09_scholarship/views/detail.vue
+++ b/src/modules/09_scholarship/views/detail.vue
@@ -427,10 +427,10 @@ function fetchDataDetail(id: string) {
 
       dataPerson.citizenId = data.citizenId ? data.citizenId : "-";
       dataPerson.name = `${data.prefix}${data.firstName}  ${data.lastName}`;
-      dataPerson.prefix = data.prefix,
-      dataPerson.firstName = data.firstName,
-      dataPerson.lastName = data.lastName,
-      dataPerson.position = data.position ? data.position : "-";
+      (dataPerson.prefix = data.prefix),
+        (dataPerson.firstName = data.firstName),
+        (dataPerson.lastName = data.lastName),
+        (dataPerson.position = data.position ? data.position : "-");
       dataPerson.type = data.posTypeName ? data.posTypeName : "-";
       dataPerson.level = data.posLevelName ? data.posLevelName : "-";
       dataPerson.positionSide = data.posExecutive ? data.posExecutive : "-";
@@ -522,7 +522,7 @@ onMounted(async () => {
             </div>
 
             <q-space />
-            <div v-if="fileList == null" class="col-3">
+            <div v-if="fileList == null" class="col-xs-5 col-3">
               <q-file
                 for="inputFiles"
                 class="col-12"
@@ -573,39 +573,39 @@ onMounted(async () => {
           </div>
           <div class="col-12"><q-separator /></div>
           <div class="row col-12 q-col-gutter-md q-pa-md" v-if="isGov">
-            <div class="col">
+            <div class="col-xs-12 col-md-6">
               <div class="row q-col-gutter-md">
                 <div class="col-4 text-grey">เลขประจำตัวประชาชน</div>
                 <div class="col-8 text-weight-medium">
-                  {{ dataPerson.citizenId ? dataPerson.citizenId:'-' }}
+                  {{ dataPerson.citizenId ? dataPerson.citizenId : "-" }}
                 </div>
                 <div class="col-4 text-grey">ชื่อ-นามสกุล</div>
                 <div class="col-8 text-weight-medium">
-                  {{ dataPerson.firstName ? dataPerson.name:'-' }}
+                  {{ dataPerson.firstName ? dataPerson.name : "-" }}
                 </div>
                 <div class="col-4 text-grey">ตำแหน่ง</div>
                 <div class="col-8 text-weight-medium">
-                  {{ dataPerson.position ? dataPerson.position:'-' }}
+                  {{ dataPerson.position ? dataPerson.position : "-" }}
                 </div>
                 <div class="col-4 text-grey">ประเภทตำแหน่ง</div>
                 <div class="col-8 text-weight-medium">
-                  {{ dataPerson.type ? dataPerson.type:'-' }}
+                  {{ dataPerson.type ? dataPerson.type : "-" }}
                 </div>
               </div>
             </div>
-            <div class="col">
+            <div class="col-xs-12 col-md-6">
               <div class="row q-col-gutter-md">
                 <div class="col-4 text-grey">ระดับตำแหน่ง</div>
                 <div class="col-8 text-weight-medium">
-                  {{ dataPerson.level ? dataPerson.level:'-' }}
+                  {{ dataPerson.level ? dataPerson.level : "-" }}
                 </div>
                 <div class="col-4 text-grey">ตำแหน่งทางการบริหาร</div>
                 <div class="col-8 text-weight-medium">
-                  {{ dataPerson.positionSide ? dataPerson.positionSide:'-' }}
+                  {{ dataPerson.positionSide ? dataPerson.positionSide : "-" }}
                 </div>
                 <div class="col-4 text-grey">หน่วยงานที่สังกัด</div>
                 <div class="col-8 text-weight-medium">
-                  {{ dataPerson.org ? dataPerson.org:'-' }}
+                  {{ dataPerson.org ? dataPerson.org : "-" }}
                 </div>
               </div>
             </div>
@@ -618,7 +618,7 @@ onMounted(async () => {
         </q-card>
 
         <div class="row q-col-gutter-md q-mt-sm">
-          <div class="col-9">
+          <div class="col-md-9 col-xs-12">
             <q-select
               dense
               readonly
@@ -634,7 +634,7 @@ onMounted(async () => {
             />
           </div>
           <div
-            class="col-3"
+            class="col-md-3 col-xs-12"
             v-if="
               formBody.scholarshipType !== '' &&
               formBody.scholarshipType !== 'EXECUTIVE' &&
@@ -662,7 +662,7 @@ onMounted(async () => {
               checked-icon="task_alt"
               unchecked-icon="panorama_fish_eye"
               val="INPLAN"
-              label="ในแผนฯ"
+              label="ในแผน ฯ"
               dense
               disable
             />
@@ -671,7 +671,7 @@ onMounted(async () => {
               checked-icon="task_alt"
               unchecked-icon="panorama_fish_eye"
               val="OUTPLAN"
-              label="นอกแผนฯ"
+              label="นอกแผน ฯ"
               dense
               disable
               class="q-pl-sm"
@@ -679,7 +679,7 @@ onMounted(async () => {
           </div>
 
           <div class="row col-12 q-col-gutter-md">
-            <div class="col-3">
+            <div class="col-xs-12 col-md-3">
               <datepicker
                 menu-class-name="modalfix"
                 v-model="formBody.scholarshipYear"
@@ -722,7 +722,10 @@ onMounted(async () => {
                 </template>
               </datepicker>
             </div>
-            <div v-if="formBody.scholarshipType !== 'RESEARCH'" class="col-3">
+            <div
+              v-if="formBody.scholarshipType !== 'RESEARCH'"
+              class="col-xs-12 col-md-3"
+            >
               <q-select
                 dense
                 outlined
@@ -737,7 +740,7 @@ onMounted(async () => {
                 readonly
               />
             </div>
-            <div class="col-3">
+            <div class="col-xs-12 col-md-3">
               <q-input
                 dense
                 outlined
@@ -749,7 +752,7 @@ onMounted(async () => {
                 reverse-fill-mask
               />
             </div>
-            <div class="col-3">
+            <div class="col-xs-12 col-md-3">
               <q-checkbox
                 keep-color
                 disable
@@ -761,7 +764,7 @@ onMounted(async () => {
           </div>
 
           <div class="row col-12 q-col-gutter-md">
-            <div class="col-3">
+            <div class="col-xs-12 col-md-3">
               <q-input
                 dense
                 readonly
@@ -771,7 +774,7 @@ onMounted(async () => {
                 label="เลขที่หนังสืออนุมัติ"
               />
             </div>
-            <div class="col-3">
+            <div class="col-xs-12 col-md-3">
               <datepicker
                 menu-class-name="modalfix"
                 v-model="formBody.bookNoDate"
@@ -809,7 +812,7 @@ onMounted(async () => {
                 </template>
               </datepicker>
             </div>
-            <div class="col-3">
+            <div class="col-xs-12 col-md-3">
               <datepicker
                 menu-class-name="modalfix"
                 v-model="formBody.bookApproveDate"
@@ -847,7 +850,10 @@ onMounted(async () => {
                 </template>
               </datepicker>
             </div>
-            <div v-if="formBody.scholarshipType !== 'RESEARCH'" class="col-3">
+            <div
+              v-if="formBody.scholarshipType !== 'RESEARCH'"
+              class="col-xs-12 col-md-3"
+            >
               <q-checkbox
                 keep-color
                 disable
@@ -873,7 +879,7 @@ onMounted(async () => {
 
           <div class="col-12" v-if="formBody.scholarshipType !== 'EXECUTIVE'">
             <div class="row col-12 q-col-gutter-md">
-              <div class="col-3">
+              <div class="col-xs-12 col-md-3">
                 <q-input
                   dense
                   readonly
@@ -883,7 +889,7 @@ onMounted(async () => {
                   v-model="formBody.contractNo"
                 />
               </div>
-              <div class="col-2">
+              <div class="col-xs-12 col-md-2">
                 <datepicker
                   readonly
                   menu-class-name="modalfix"
@@ -920,7 +926,10 @@ onMounted(async () => {
                   </template>
                 </datepicker>
               </div>
-              <div v-if="formBody.scholarshipType !== 'RESEARCH'" class="col-3">
+              <div
+                v-if="formBody.scholarshipType !== 'RESEARCH'"
+                class="col-xs-12 col-md-3"
+              >
                 <q-input
                   dense
                   readonly
@@ -930,7 +939,10 @@ onMounted(async () => {
                   label="เลขที่หนังสือรายงานตัวกลับ"
                 />
               </div>
-              <div v-if="formBody.scholarshipType !== 'RESEARCH'" class="col-2">
+              <div
+                v-if="formBody.scholarshipType !== 'RESEARCH'"
+                class="col-xs-12 col-md-2"
+              >
                 <datepicker
                   readonly
                   menu-class-name="modalfix"
@@ -968,7 +980,10 @@ onMounted(async () => {
                   </template>
                 </datepicker>
               </div>
-              <div v-if="formBody.scholarshipType !== 'RESEARCH'" class="col-2">
+              <div
+                v-if="formBody.scholarshipType !== 'RESEARCH'"
+                class="col-xs-12 col-md-2"
+              >
                 <datepicker
                   menu-class-name="modalfix"
                   v-model="formBody.reportBackDate"
@@ -1006,49 +1021,60 @@ onMounted(async () => {
                   </template>
                 </datepicker>
               </div>
-              <div class="col-12" >
+              <div class="col-12">
                 <q-card bordered tyle="border: 1px solid #d6dee1">
                   <div class="text-weight-medium bg-grey-1 q-py-sm q-px-md">
                     ข้อมูลผู้ค้ำประกัน
                   </div>
                   <div class="col-12"><q-separator /></div>
-                  <div
-                    class="row col-12 q-col-gutter-md q-pa-md"
-                   
-                  >
-                    <div class="col">
+                  <div class="row col-12 q-col-gutter-md q-pa-md">
+                    <div class="col-xs-12 col-md-6">
                       <div class="row q-col-gutter-md">
                         <div class="col-4 text-grey">เลขประจำตัวประชาชน</div>
                         <div class="col-8 text-weight-medium">
-                          {{ dataGuarantor.citizenId ? dataGuarantor.citizenId :'-' }}
+                          {{
+                            dataGuarantor.citizenId
+                              ? dataGuarantor.citizenId
+                              : "-"
+                          }}
                         </div>
                         <div class="col-4 text-grey">ชื่อ-นามสกุล</div>
                         <div class="col-8 text-weight-medium">
-                          {{ dataGuarantor.firstName ? dataGuarantor.name:'-' }}
+                          {{
+                            dataGuarantor.firstName ? dataGuarantor.name : "-"
+                          }}
                         </div>
                         <div class="col-4 text-grey">ตำแหน่ง</div>
                         <div class="col-8 text-weight-medium">
-                          {{ dataGuarantor.position ? dataGuarantor.position:'-' }}
+                          {{
+                            dataGuarantor.position
+                              ? dataGuarantor.position
+                              : "-"
+                          }}
                         </div>
                         <div class="col-4 text-grey">ประเภท</div>
                         <div class="col-8 text-weight-medium">
-                          {{ dataGuarantor.type ? dataGuarantor.type :'-' }}
+                          {{ dataGuarantor.type ? dataGuarantor.type : "-" }}
                         </div>
                       </div>
                     </div>
-                    <div class="col">
+                    <div class="col-xs-12 col-md-6">
                       <div class="row q-col-gutter-md">
                         <div class="col-4 text-grey">ระดับตำแหน่ง</div>
                         <div class="col-8 text-weight-medium">
-                          {{ dataGuarantor.level ? dataGuarantor.level:'-' }}
+                          {{ dataGuarantor.level ? dataGuarantor.level : "-" }}
                         </div>
                         <div class="col-4 text-grey">ตำแหน่งทางการบริหาร</div>
                         <div class="col-8 text-weight-medium">
-                          {{ dataGuarantor.positionSide ? dataGuarantor.positionSide:'-' }}
+                          {{
+                            dataGuarantor.positionSide
+                              ? dataGuarantor.positionSide
+                              : "-"
+                          }}
                         </div>
                         <div class="col-4 text-grey">หน่วยงานที่สังกัด</div>
                         <div class="col-8 text-weight-medium">
-                          {{ dataGuarantor.org ? dataGuarantor.org:'-' }}
+                          {{ dataGuarantor.org ? dataGuarantor.org : "-" }}
                         </div>
                       </div>
                     </div>
@@ -1062,7 +1088,7 @@ onMounted(async () => {
                 v-if="formBody.scholarshipType === 'DOMESTICE'"
               >
                 <div class="row q-col-gutter-md">
-                  <div class="col-3">
+                  <div class="col-xs-12 col-md-3">
                     <q-input
                       dense
                       readonly
@@ -1072,7 +1098,7 @@ onMounted(async () => {
                       v-model="formBody.degreeLevel"
                     />
                   </div>
-                  <div class="col-3">
+                  <div class="col-xs-12 col-md-3">
                     <q-input
                       dense
                       readonly
@@ -1082,7 +1108,7 @@ onMounted(async () => {
                       v-model="formBody.course"
                     />
                   </div>
-                  <div class="col-3">
+                  <div class="col-xs-12 col-md-3">
                     <q-input
                       dense
                       outlined
@@ -1092,7 +1118,7 @@ onMounted(async () => {
                       v-model="formBody.field"
                     />
                   </div>
-                  <div class="col-3">
+                  <div class="col-xs-12 col-md-3">
                     <q-input
                       dense
                       outlined
@@ -1102,7 +1128,7 @@ onMounted(async () => {
                       v-model="formBody.faculty"
                     />
                   </div>
-                  <div class="col-6">
+                  <div class="col-xs-12 col-md-6">
                     <q-input
                       dense
                       outlined
@@ -1112,7 +1138,7 @@ onMounted(async () => {
                       v-model="formBody.educationalInstitution"
                     />
                   </div>
-                  <div class="col-3">
+                  <div class="col-xs-12 col-md-3">
                     <datepicker
                       menu-class-name="modalfix"
                       v-model="formBody.startDate"
@@ -1152,7 +1178,7 @@ onMounted(async () => {
                       </template>
                     </datepicker>
                   </div>
-                  <div class="col-3">
+                  <div class="col-xs-12 col-md-3">
                     <datepicker
                       menu-class-name="modalfix"
                       v-model="formBody.endDate"
@@ -1192,7 +1218,7 @@ onMounted(async () => {
                       </template>
                     </datepicker>
                   </div>
-                  <div class="col-6">
+                  <div class="col-xs-12 col-md-6">
                     <q-input
                       dense
                       readonly
@@ -1202,7 +1228,7 @@ onMounted(async () => {
                       v-model="formBody.studyPlace"
                     />
                   </div>
-                  <div class="col-6">
+                  <div class="col-xs-12 col-md-6">
                     <q-input
                       dense
                       readonly
@@ -1212,7 +1238,7 @@ onMounted(async () => {
                       v-model="formBody.studyTopic"
                     />
                   </div>
-                  <div class="col-3">
+                  <div class="col-xs-12 col-md-3">
                     <datepicker
                       readonly
                       menu-class-name="modalfix"
@@ -1252,7 +1278,7 @@ onMounted(async () => {
                       </template>
                     </datepicker>
                   </div>
-                  <div class="col-3">
+                  <div class="col-xs-12 col-md-3">
                     <datepicker
                       menu-class-name="modalfix"
                       readonly
@@ -1292,8 +1318,8 @@ onMounted(async () => {
                       </template>
                     </datepicker>
                   </div>
-                  <div class="col-6"></div>
-                  <div class="col-6">
+                  <div class="col-6" v-if="!$q.screen.gt.xs"></div>
+                  <div class="col-xs-12 col-md-6">
                     <q-input
                       dense
                       readonly
@@ -1303,7 +1329,7 @@ onMounted(async () => {
                       v-model="formBody.studyCountry"
                     />
                   </div>
-                  <div class="col-6">
+                  <div class="col-xs-12 col-md-6">
                     <q-input
                       dense
                       readonly
@@ -1313,7 +1339,7 @@ onMounted(async () => {
                       v-model="formBody.studyAbroadTopic"
                     />
                   </div>
-                  <div class="col-3">
+                  <div class="col-xs-12 col-md-3">
                     <datepicker
                       readonly
                       menu-class-name="modalfix"
@@ -1355,7 +1381,7 @@ onMounted(async () => {
                       </template>
                     </datepicker>
                   </div>
-                  <div class="col-3">
+                  <div class="col-xs-12 col-md-3">
                     <datepicker
                       readonly
                       menu-class-name="modalfix"
@@ -1401,7 +1427,7 @@ onMounted(async () => {
                       </template>
                     </datepicker>
                   </div>
-                  <div class="col-3">
+                  <div class="col-xs-12 col-md-3">
                     <q-input
                       dense
                       readonly
@@ -1420,7 +1446,7 @@ onMounted(async () => {
                 v-else-if="formBody.scholarshipType === 'NOABROAD'"
               >
                 <div class="row q-col-gutter-md">
-                  <div class="col-6">
+                  <div class="col-xs-12 col-md-6">
                     <q-input
                       dense
                       outlined
@@ -1430,7 +1456,7 @@ onMounted(async () => {
                       v-model="formBody.course"
                     />
                   </div>
-                  <div class="col-6">
+                  <div class="col-xs-12 col-md-6">
                     <q-input
                       dense
                       readonly
@@ -1440,7 +1466,7 @@ onMounted(async () => {
                       v-model="formBody.field"
                     />
                   </div>
-                  <div class="col-6">
+                  <div class="col-xs-12 col-md-6">
                     <q-input
                       readonly
                       dense
@@ -1450,7 +1476,7 @@ onMounted(async () => {
                       v-model="formBody.educationalInstitution"
                     />
                   </div>
-                  <div class="col-3">
+                  <div class="col-xs-12 col-md-3">
                     <datepicker
                       readonly
                       menu-class-name="modalfix"
@@ -1490,7 +1516,7 @@ onMounted(async () => {
                       </template>
                     </datepicker>
                   </div>
-                  <div class="col-3">
+                  <div class="col-xs-12 col-md-3">
                     <datepicker
                       readonly
                       menu-class-name="modalfix"
@@ -1530,7 +1556,7 @@ onMounted(async () => {
                       </template>
                     </datepicker>
                   </div>
-                  <div class="col-6">
+                  <div class="col-xs-12 col-md-6">
                     <q-input
                       dense
                       readonly
@@ -1540,7 +1566,7 @@ onMounted(async () => {
                       v-model="formBody.studyPlace"
                     />
                   </div>
-                  <div class="col-6">
+                  <div class="col-xs-12 col-md-6">
                     <q-input
                       dense
                       readonly
@@ -1550,7 +1576,7 @@ onMounted(async () => {
                       v-model="formBody.studyTopic"
                     />
                   </div>
-                  <div class="col-3">
+                  <div class="col-xs-12 col-md-3">
                     <datepicker
                       menu-class-name="modalfix"
                       v-model="formBody.studyStartDate"
@@ -1590,7 +1616,7 @@ onMounted(async () => {
                       </template>
                     </datepicker>
                   </div>
-                  <div class="col-3">
+                  <div class="col-xs-12 col-md-3">
                     <datepicker
                       readonly
                       menu-class-name="modalfix"
@@ -1636,7 +1662,7 @@ onMounted(async () => {
                       </template>
                     </datepicker>
                   </div>
-                  <div class="col-3">
+                  <div class="col-xs-12 col-md-3">
                     <q-input
                       dense
                       readonly
@@ -1655,7 +1681,7 @@ onMounted(async () => {
                 v-else-if="formBody.scholarshipType === 'ABROAD'"
               >
                 <div class="row q-col-gutter-md">
-                  <div class="col-6">
+                  <div class="col-xs-12 col-md-6">
                     <q-input
                       dense
                       readonly
@@ -1665,7 +1691,7 @@ onMounted(async () => {
                       v-model="formBody.course"
                     />
                   </div>
-                  <div class="col-6">
+                  <div class="col-xs-12 col-md-6">
                     <q-input
                       dense
                       outlined
@@ -1675,7 +1701,7 @@ onMounted(async () => {
                       v-model="formBody.field"
                     />
                   </div>
-                  <div class="col-6">
+                  <div class="col-xs-12 col-md-6">
                     <q-input
                       dense
                       readonly
@@ -1685,7 +1711,7 @@ onMounted(async () => {
                       v-model="formBody.educationalInstitution"
                     />
                   </div>
-                  <div class="col-3">
+                  <div class="col-xs-12 col-md-3">
                     <datepicker
                       readonly
                       menu-class-name="modalfix"
@@ -1725,7 +1751,7 @@ onMounted(async () => {
                       </template>
                     </datepicker>
                   </div>
-                  <div class="col-3">
+                  <div class="col-xs-12 col-md-3">
                     <datepicker
                       readonly
                       menu-class-name="modalfix"
@@ -1765,7 +1791,7 @@ onMounted(async () => {
                       </template>
                     </datepicker>
                   </div>
-                  <div class="col-6">
+                  <div class="col-xs-12 col-md-6">
                     <q-input
                       dense
                       readonly
@@ -1775,7 +1801,7 @@ onMounted(async () => {
                       v-model="formBody.studyPlace"
                     />
                   </div>
-                  <div class="col-6">
+                  <div class="col-xs-12 col-md-6">
                     <q-input
                       dense
                       readonly
@@ -1785,7 +1811,7 @@ onMounted(async () => {
                       v-model="formBody.studyTopic"
                     />
                   </div>
-                  <div class="col-3">
+                  <div class="col-xs-12 col-md-3">
                     <datepicker
                       readonly
                       menu-class-name="modalfix"
@@ -1825,7 +1851,7 @@ onMounted(async () => {
                       </template>
                     </datepicker>
                   </div>
-                  <div class="col-3">
+                  <div class="col-xs-12 col-md-3">
                     <datepicker
                       readonly
                       menu-class-name="modalfix"
@@ -1872,8 +1898,8 @@ onMounted(async () => {
                       </template>
                     </datepicker>
                   </div>
-                  <div class="col-6"></div>
-                  <div class="col-6">
+                  <div class="col-6" v-if="!$q.screen.gt.xs"></div>
+                  <div class="col-xs-12 col-md-6">
                     <q-input
                       dense
                       readonly
@@ -1883,7 +1909,7 @@ onMounted(async () => {
                       v-model="formBody.studyCountry"
                     />
                   </div>
-                  <div class="col-6">
+                  <div class="col-xs-12 col-md-6">
                     <q-input
                       dense
                       readonly
@@ -1893,7 +1919,7 @@ onMounted(async () => {
                       v-model="formBody.studyAbroadTopic"
                     />
                   </div>
-                  <div class="col-3">
+                  <div class="col-xs-12 col-md-3">
                     <datepicker
                       readonly
                       menu-class-name="modalfix"
@@ -1935,7 +1961,7 @@ onMounted(async () => {
                       </template>
                     </datepicker>
                   </div>
-                  <div class="col-3">
+                  <div class="col-xs-12 col-md-3">
                     <datepicker
                       readonly
                       menu-class-name="modalfix"
@@ -1981,7 +2007,7 @@ onMounted(async () => {
                       </template>
                     </datepicker>
                   </div>
-                  <div class="col-3">
+                  <div class="col-xs-12 col-md-3">
                     <q-input
                       readonly
                       dense
@@ -2000,7 +2026,7 @@ onMounted(async () => {
                 v-else-if="formBody.scholarshipType === 'RESEARCH'"
               >
                 <div class="row q-col-gutter-md">
-                  <div class="col-3">
+                  <div class="col-xs-12 col-md-3">
                     <q-select
                       dense
                       readonly
@@ -2018,7 +2044,7 @@ onMounted(async () => {
                     />
                   </div>
 
-                  <div class="col-3">
+                  <div class="col-xs-12 col-md-3">
                     <q-input
                       dense
                       readonly
@@ -2029,7 +2055,7 @@ onMounted(async () => {
                     />
                   </div>
 
-                  <div class="col-6">
+                  <div class="col-xs-12 col-md-6">
                     <q-input
                       dense
                       readonly
@@ -2040,7 +2066,7 @@ onMounted(async () => {
                     />
                   </div>
 
-                  <div class="col-3">
+                  <div class="col-xs-12 col-md-3">
                     <q-input
                       dense
                       readonly
@@ -2051,7 +2077,7 @@ onMounted(async () => {
                     />
                   </div>
 
-                  <div class="col-3">
+                  <div class="col-xs-12 col-md-3">
                     <q-input
                       dense
                       readonly
@@ -2062,7 +2088,7 @@ onMounted(async () => {
                     />
                   </div>
 
-                  <div class="col-6">
+                  <div class="col-xs-12 col-md-6">
                     <q-input
                       readonly
                       dense
@@ -2073,7 +2099,7 @@ onMounted(async () => {
                     />
                   </div>
 
-                  <div class="col-3">
+                  <div class="col-xs-12 col-md-3">
                     <datepicker
                       readonly
                       menu-class-name="modalfix"
@@ -2113,7 +2139,8 @@ onMounted(async () => {
                       </template>
                     </datepicker>
                   </div>
-                  <div class="col-3">
+
+                  <div class="col-xs-12 col-md-3">
                     <datepicker
                       readonly
                       menu-class-name="modalfix"
@@ -2153,7 +2180,8 @@ onMounted(async () => {
                       </template>
                     </datepicker>
                   </div>
-                  <div class="col-6">
+
+                  <div class="col-xs-12 col-md-6">
                     <q-input
                       dense
                       readonly
@@ -2174,7 +2202,7 @@ onMounted(async () => {
             v-else-if="formBody.scholarshipType === 'EXECUTIVE'"
           >
             <div class="row q-col-gutter-md">
-              <div class="col-6">
+              <div class="col-xs-12 col-md-md-6">
                 <q-input
                   readonly
                   dense
@@ -2184,7 +2212,7 @@ onMounted(async () => {
                   v-model="formBody.course"
                 />
               </div>
-              <div class="col-6">
+              <div class="col-xs-12 col-md-md-6">
                 <q-input
                   dense
                   readonly
@@ -2194,7 +2222,7 @@ onMounted(async () => {
                   v-model="formBody.educationalInstitution"
                 />
               </div>
-              <div class="col-3">
+              <div class="col-xs-12 col-md-md-3">
                 <datepicker
                   readonly
                   menu-class-name="modalfix"
@@ -2235,7 +2263,7 @@ onMounted(async () => {
                   </template>
                 </datepicker>
               </div>
-              <div class="col-3">
+              <div class="col-xs-12 col-md-md-3">
                 <datepicker
                   readonly
                   menu-class-name="modalfix"
@@ -2273,8 +2301,8 @@ onMounted(async () => {
                   </template>
                 </datepicker>
               </div>
-              <div class="col-6"></div>
-              <div class="col-6">
+              <div class="col-6" v-if="!$q.screen.gt.xs"></div>
+              <div class="col-xs-12 col-md-6">
                 <q-input
                   dense
                   readonly
@@ -2284,7 +2312,7 @@ onMounted(async () => {
                   v-model="formBody.studyPlace"
                 />
               </div>
-              <div class="col-6">
+              <div class="col-xs-12 col-md-6">
                 <q-input
                   dense
                   readonly
@@ -2294,7 +2322,7 @@ onMounted(async () => {
                   v-model="formBody.studyTopic"
                 />
               </div>
-              <div class="col-3">
+              <div class="col-xs-12 col-md-3">
                 <datepicker
                   readonly
                   menu-class-name="modalfix"
@@ -2334,7 +2362,7 @@ onMounted(async () => {
                   </template>
                 </datepicker>
               </div>
-              <div class="col-3">
+              <div class="col-xs-12 col-md-3">
                 <datepicker
                   readonly
                   menu-class-name="modalfix"
@@ -2380,8 +2408,8 @@ onMounted(async () => {
                   </template>
                 </datepicker>
               </div>
-              <div class="col-6"></div>
-              <div class="col-6">
+              <div class="col-6" v-if="!$q.screen.gt.xs"></div>
+              <div class="col-xs-12 col-md-6">
                 <q-input
                   dense
                   readonly
@@ -2391,7 +2419,7 @@ onMounted(async () => {
                   v-model="formBody.studyCountry"
                 />
               </div>
-              <div class="col-6">
+              <div class="col-xs-12 col-md-6">
                 <q-input
                   dense
                   outlined
@@ -2401,7 +2429,7 @@ onMounted(async () => {
                   v-model="formBody.studyAbroadTopic"
                 />
               </div>
-              <div class="col-3">
+              <div class="col-xs-12 col-md-3">
                 <datepicker
                   readonly
                   menu-class-name="modalfix"
@@ -2441,7 +2469,7 @@ onMounted(async () => {
                   </template>
                 </datepicker>
               </div>
-              <div class="col-3">
+              <div class="ccol-xs-12 ol-md-3">
                 <datepicker
                   readonly
                   menu-class-name="modalfix"
@@ -2487,7 +2515,7 @@ onMounted(async () => {
                   </template>
                 </datepicker>
               </div>
-              <div class="col-3">
+              <div class="col-xs-12 col-md-3">
                 <q-input
                   readonly
                   dense
diff --git a/src/modules/09_scholarship/views/main.vue b/src/modules/09_scholarship/views/main.vue
index ab4bbc8..5abaef7 100644
--- a/src/modules/09_scholarship/views/main.vue
+++ b/src/modules/09_scholarship/views/main.vue
@@ -168,105 +168,85 @@ onMounted(async () => {
       </div>
       <div class="col-12">
         <q-card bordered class="q-pa-md">
-          <q-toolbar style="padding: 0">
-            <div class="row q-gutter-sm">
-              <datepicker
-                style="width: 150px"
-                menu-class-name="modalfix"
-                v-model="year"
-                :locale="'th'"
-                autoApply
-                year-picker
-                :enableTimePicker="false"
-                @update:model-value="getData()"
-              >
-                <template #year="{ year }">{{ year + 543 }}</template>
-                <template #year-overlay-value="{ value }">{{
-                  parseInt(value + 543)
-                }}</template>
-                <template #trigger>
-                  <q-input
-                    dense
-                    lazy-rules
-                    outlined
-                    :model-value="year === 0 ? 'ทั้งหมด' : Number(year) + 543"
-                    :label="`${'ปีงบประมาณ'}`"
-                  >
-                    <template v-if="year" v-slot:append>
-                      <q-icon
-                        name="cancel"
-                        @click.stop.prevent="(year = 0), getData()"
-                        class="cursor-pointer"
-                      />
-                    </template>
-                    <template v-slot:prepend>
-                      <q-icon
-                        name="event"
-                        class="cursor-pointer"
-                        style="color: var(--q-primary)"
-                      >
-                      </q-icon>
-                    </template>
-                  </q-input>
-                </template>
-              </datepicker>
-              <q-select
-                dense
-                outlined
-                v-model="type"
-                :options="scholarshipTypeOp"
-                emit-value
-                map-options
-                option-value="id"
-                option-label="name"
-                label="เลือกประเภททุน"
-                @update:model-value="getData()"
-                style="width: 350px"
-              />
-              <!-- <q-btn
-                flat
-                round
-                color="primary"
-                icon="add"
-                @click="router.push(`/KPI/add`)"
-              >
-                <q-tooltip> เพิ่มข้อมูล </q-tooltip>
-              </q-btn> -->
-            </div>
+          <div class="items-center col-12 row q-col-gutter-sm q-mb-sm">
+            <datepicker
+              class="col-xs-12 col-md-1"
+              menu-class-name="modalfix"
+              v-model="year"
+              :locale="'th'"
+              autoApply
+              year-picker
+              :enableTimePicker="false"
+              @update:model-value="getData()"
+            >
+              <template #year="{ year }">{{ year + 543 }}</template>
+              <template #year-overlay-value="{ value }">{{
+                parseInt(value + 543)
+              }}</template>
+              <template #trigger>
+                <q-input
+                  dense
+                  lazy-rules
+                  outlined
+                  :model-value="year === 0 ? 'ทั้งหมด' : Number(year) + 543"
+                  :label="`${'ปีงบประมาณ'}`"
+                >
+                  <template v-if="year" v-slot:append>
+                    <q-icon
+                      name="cancel"
+                      @click.stop.prevent="(year = 0), getData()"
+                      class="cursor-pointer"
+                    />
+                  </template>
+                  <template v-slot:prepend>
+                    <q-icon
+                      name="event"
+                      class="cursor-pointer"
+                      style="color: var(--q-primary)"
+                    >
+                    </q-icon>
+                  </template>
+                </q-input>
+              </template>
+            </datepicker>
+            <q-select
+              dense
+              outlined
+              v-model="type"
+              :options="scholarshipTypeOp"
+              emit-value
+              map-options
+              option-value="id"
+              option-label="name"
+              label="เลือกประเภททุน"
+              @update:model-value="getData()"
+              class="select_ellipsis col-xs-12 col-md-2"
+            />
 
             <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="columns"
-                option-value="name"
-                options-cover
-                style="min-width: 150px"
-              />
-            </div>
-          </q-toolbar>
+
+            <q-select
+              v-model="visibleColumns"
+              multiple
+              outlined
+              dense
+              options-dense
+              :display-value="$q.lang.table.columns"
+              emit-value
+              map-options
+              :options="columns"
+              option-value="name"
+              options-cover
+              class="col-xs-12 col-md-1"
+            />
+          </div>
 
           <div>
-            <q-table
+            <d-table
               flat
               bordered
               dense
               row-key="id"
-              class="custom-table2"
-              style="max-height: 80vh"
               :rows="rows"
               :columns="columns"
               :visible-columns="visibleColumns"
@@ -318,56 +298,39 @@ 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="onEdit(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 === 'scholarshipYear'">
+                            {{ col.value ? col.value + 543 : "-" }}
+                          </q-item-label>
+                          <q-item-label
+                            v-else-if="col.name === 'scholarshipType'"
+                          >
+                            {{ col.value ? convertType(col.value) : "-" }}
+                          </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>
           </div>
         </q-card>
       </div>
     </div>
   </div>
 </template>
-<style scoped lang="scss">
-.icon-color {
-  color: #4154b3;
-}
-
-.custom-table2 {
-  max-height: 64vh;
-
-  .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>
+<style scoped lang="scss"></style>
diff --git a/src/style/quasar-variables.sass b/src/style/quasar-variables.sass
index 39fea51..b995a40 100644
--- a/src/style/quasar-variables.sass
+++ b/src/style/quasar-variables.sass
@@ -82,3 +82,9 @@ input.input-alert
 
 .input-alert i.text-primary
     color: #f00 !important
+
+.select_ellipsis .q-field__native > span
+    white-space: nowrap
+    overflow: hidden
+    text-overflow: ellipsis
+    width: 200px
diff --git a/src/views/MainLayout.vue b/src/views/MainLayout.vue
index c058e0f..476b933 100644
--- a/src/views/MainLayout.vue
+++ b/src/views/MainLayout.vue
@@ -473,16 +473,16 @@ function onInfo(){
             flat
             round
             color="white"
-            icon="mdi-view-dashboard-outline"
+            icon="mdi-home"
             @click="router.push(`/`)"
           />
-          <q-btn
+          <!-- <q-btn
             flat
             round
             color="white"
             icon="mdi-map-marker-check-outline"
             @click="router.push(`/check-in`)"
-          />
+          /> -->
           <q-btn
             flat
             round