diff --git a/src/modules/01_masterdata/components/competency/01ListCompetency.vue b/src/modules/01_masterdata/components/competency/01ListCompetency.vue
index 486c116de..7aa47311a 100644
--- a/src/modules/01_masterdata/components/competency/01ListCompetency.vue
+++ b/src/modules/01_masterdata/components/competency/01ListCompetency.vue
@@ -144,7 +144,7 @@ watch(
 );
 
 onMounted(() => {
-  if (checkPermission(route)?.attrIsList) fetchList();
+  fetchList();
 });
 </script>
 
diff --git a/src/modules/01_masterdata/components/competency/02ListLinkPosition.vue b/src/modules/01_masterdata/components/competency/02ListLinkPosition.vue
index b780e1c13..8a0d86403 100644
--- a/src/modules/01_masterdata/components/competency/02ListLinkPosition.vue
+++ b/src/modules/01_masterdata/components/competency/02ListLinkPosition.vue
@@ -202,7 +202,7 @@ watch(
 );
 
 onMounted(async () => {
-  if (checkPermission(route)?.attrIsList) fetchData();
+  fetchData();
 });
 </script>
 
diff --git a/src/modules/01_masterdata/components/competency/03ListLinkGroup.vue b/src/modules/01_masterdata/components/competency/03ListLinkGroup.vue
index 5379097e6..ce0988a64 100644
--- a/src/modules/01_masterdata/components/competency/03ListLinkGroup.vue
+++ b/src/modules/01_masterdata/components/competency/03ListLinkGroup.vue
@@ -340,7 +340,7 @@ watch(
 );
 
 onMounted(async () => {
-  if (checkPermission(route)?.attrIsList) getData();
+  getData();
 });
 </script>
 
diff --git a/src/modules/01_masterdata/views/Assignment.vue b/src/modules/01_masterdata/views/Assignment.vue
index cd52a23c5..fe733ea18 100644
--- a/src/modules/01_masterdata/views/Assignment.vue
+++ b/src/modules/01_masterdata/views/Assignment.vue
@@ -123,7 +123,7 @@ watch(
 );
 
 onMounted(() => {
-  if (checkPermission(route)?.attrIsList) fetchList();
+  fetchList();
 });
 </script>
 
diff --git a/src/modules/01_masterdata/views/Strategic.vue b/src/modules/01_masterdata/views/Strategic.vue
index d77c97952..e023d3c8e 100644
--- a/src/modules/01_masterdata/views/Strategic.vue
+++ b/src/modules/01_masterdata/views/Strategic.vue
@@ -191,7 +191,7 @@ function onDelete(data: DataStrategic) {
 
 /** ดึงข้อมูลเมื่ออยู่ในหน้า */
 onMounted(() => {
-  if (checkPermission(route)?.attrIsList) fetchDataTree();
+  fetchDataTree();
 });
 </script>
 <template>
diff --git a/src/modules/01_masterdata/views/indicatorByPlan.vue b/src/modules/01_masterdata/views/indicatorByPlan.vue
index 79707f649..15f11904e 100644
--- a/src/modules/01_masterdata/views/indicatorByPlan.vue
+++ b/src/modules/01_masterdata/views/indicatorByPlan.vue
@@ -196,7 +196,7 @@ function onClickHistory(id: string) {
 }
 
 onMounted(() => {
-  if (checkPermission(route)?.attrIsList) fetchActive();
+  fetchActive();
 });
 </script>
 
diff --git a/src/modules/01_masterdata/views/indicatorByRole.vue b/src/modules/01_masterdata/views/indicatorByRole.vue
index de7f47fd1..38de4c1e5 100644
--- a/src/modules/01_masterdata/views/indicatorByRole.vue
+++ b/src/modules/01_masterdata/views/indicatorByRole.vue
@@ -221,10 +221,8 @@ function onClickHistory(id: string) {
 }
 
 onMounted(async () => {
-  if (checkPermission(route)?.attrIsList) {
-    await getOptions();
-    await fetchList();
-  }
+  await getOptions();
+  await fetchList();
 });
 </script>
 
diff --git a/src/modules/04_registry/components/TableProfile.vue b/src/modules/04_registry/components/TableProfile.vue
index 89485a106..2d4066578 100644
--- a/src/modules/04_registry/components/TableProfile.vue
+++ b/src/modules/04_registry/components/TableProfile.vue
@@ -450,6 +450,7 @@
   </d-table>
   <PopupADdEmployee v-model:modal="modalEmployee" />
 </template>
+
 <script setup lang="ts">
 import { ref, useAttrs, reactive, watch } from "vue";
 import type { Pagination } from "@/modules/04_registry/interface/index/Main";
diff --git a/src/modules/04_registryPerson/components/TableView.vue b/src/modules/04_registryPerson/components/TableView.vue
index d653a61db..df44c3ce2 100644
--- a/src/modules/04_registryPerson/components/TableView.vue
+++ b/src/modules/04_registryPerson/components/TableView.vue
@@ -229,7 +229,7 @@ watch(
         round
         flat
         dense
-        color="blue"
+        color="deep-purple"
         icon="mdi-history"
         @click="onClickHistory"
       >
@@ -308,7 +308,6 @@ watch(
     >
     <template v-slot:header="props">
       <q-tr :props="props">
-        <q-th auto-width />
         <q-th v-for="col in props.cols" :key="col.name" :props="props">
           <span class="text-weight-medium" v-if="col.name === 'posLevel'">{{
             empType === "officer" ? col.label : "ระดับชั้นงาน"
@@ -328,21 +327,6 @@ watch(
     </template>
     <template v-slot:body="props" v-if="store.mode === 'table'">
       <q-tr :props="props">
-        <q-td auto-width>
-          <q-btn
-            icon="mdi-eye"
-            round
-            dense
-            flat
-            color="info"
-            @click.stpo.pervent="
-              checkPermission($route)?.attrIsGet &&
-                onClickViewDetail(props.row.id)
-            "
-          >
-            <q-tooltip>รายละเอียด</q-tooltip>
-          </q-btn>
-        </q-td>
         <q-td v-for="col in props.cols" :key="col.id">
           <div v-if="col.name === 'no'">
             {{
@@ -358,12 +342,20 @@ watch(
                   </q-avatar>
                 </q-item-section>
                 <q-item-section>
-                  <div class="text-weight-medium">
+                  <div
+                    class="text-weight-medium text-blue-4 cursor-pointer"
+                    @click="
+                      checkPermission($route)?.attrIsGet &&
+                        onClickViewDetail(props.row.id)
+                    "
+                  >
+                    <q-tooltip>รายละเอียด</q-tooltip>
                     {{
                       `${props.row.prefix ? props.row.prefix : ""}${
                         props.row.firstName
                       } ${props.row.lastName}`
                     }}
+                    <q-icon name="mdi-open-in-new" size="xs"></q-icon>
                   </div>
                   <div class="text-weight-light">{{ props.row.citizenId }}</div>
                 </q-item-section>
@@ -379,35 +371,25 @@ watch(
     <template v-slot:item="props" v-else>
       <div class="col-xs-12 col-sm-4 col-md-3">
         <q-card flat bordered>
-          <div
-            class="row justify-end q-mr-md"
-            v-if="checkPermission($route)?.attrIsGet"
-          >
-            <div class="col-1">
-              <q-btn
-                flat
-                dense
-                round
-                icon="mdi-eye"
-                color="info"
-                @click="onClickViewDetail(props.row.id)"
-              >
-                <q-tooltip>รายละเอียด</q-tooltip>
-              </q-btn>
-            </div>
-          </div>
-        <q-separator/>
           <q-card-section class="text-center q-pb-none">
             <q-avatar size="80px" class="bg-grey-2">
               <q-img :src="props.row.avatar" />
             </q-avatar>
 
-            <div class="text-weight-medium q-mt-md">
+            <div
+              class="text-weight-medium q-mt-md text-blue-4 cursor-pointer"
+              @click="
+                checkPermission($route)?.attrIsGet &&
+                  onClickViewDetail(props.row.id)
+              "
+            >
+              <q-tooltip>รายละเอียด</q-tooltip>
               {{
                 `${props.row.prefix ? props.row.prefix : ""}${
                   props.row.firstName
                 } ${props.row.lastName}`
               }}
+              <q-icon name="mdi-open-in-new" size="xs"></q-icon>
             </div>
             <div class="text-weight-light full-width text-center">
               {{ props.row.citizenId }}
diff --git a/src/modules/04_registryPerson/components/detail/Achievement/01_ProfessionalLicense.vue b/src/modules/04_registryPerson/components/detail/Achievement/01_ProfessionalLicense.vue
index 2415d54ec..de3d93189 100644
--- a/src/modules/04_registryPerson/components/detail/Achievement/01_ProfessionalLicense.vue
+++ b/src/modules/04_registryPerson/components/detail/Achievement/01_ProfessionalLicense.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, reactive, watch, onMounted } from "vue";
+import { ref, reactive, onMounted } from "vue";
 import { checkPermission } from "@/utils/permissions";
 import dialogHeader from "@/components/DialogHeader.vue";
 import type { QTableProps } from "quasar";
@@ -442,17 +442,27 @@ onMounted(async () => {
       </q-tr>
     </template>
     <template v-slot:body="props" v-if="mode === 'table'">
-      <q-tr :props="props" class="cursor-pointer">
+      <q-tr :props="props">
         <q-td auto-width>
           <q-btn
-            v-if="checkPermission($route)?.attrIsUpdate"
-            color="primary"
             flat
             dense
             round
-            class="q-mr-xs"
-            size="14px"
-            icon="mdi-pencil-outline"
+            color="deep-purple"
+            icon="mdi-history"
+            @click="
+              () => (fetchHistoryData(props.row.id), (historyDialog = true))
+            "
+          >
+            <q-tooltip>ประวัติแก้ไขใบอนุญาตประกอบวิชาชีพ</q-tooltip>
+          </q-btn>
+          <q-btn
+            v-if="checkPermission($route)?.attrIsUpdate"
+            flat
+            dense
+            round
+            color="edit"
+            icon="edit"
             clickable
             @click="
               () => {
@@ -462,32 +472,6 @@ onMounted(async () => {
           >
             <q-tooltip>แก้ไขข้อมูล</q-tooltip>
           </q-btn>
-          <q-btn
-            color="info"
-            flat
-            dense
-            round
-            size="14px"
-            icon="mdi-history"
-            @click="
-              () => (fetchHistoryData(props.row.id), (historyDialog = true))
-            "
-          >
-            <q-tooltip>ประวัติแก้ไขใบอนุญาตประกอบวิชาชีพ</q-tooltip>
-          </q-btn>
-          <!-- <q-btn
-            color="red"
-            flat
-            dense
-            round
-            size="14px"
-            icon="mdi-delete"
-            clickable
-            @click.stop="deleteData(props.row.id)"
-            v-close-popup
-          >
-            <q-tooltip>ลบข้อมูล</q-tooltip>
-          </q-btn> -->
         </q-td>
         <q-td v-for="col in props.cols" :key="col.id">
           <div>
@@ -503,27 +487,26 @@ onMounted(async () => {
         <q-card bordered>
           <q-card-actions align="right" class="bg-grey-3">
             <q-btn
-              v-if="checkPermission($route)?.attrIsUpdate"
               flat
               round
-              color="primary"
-              icon="edit"
-              @click="editForm(props.row)"
-            >
-              <q-tooltip>แก้ไขข้อมูล</q-tooltip>
-            </q-btn>
-            <q-btn
-              flat
-              round
-              color="info"
+              color="deep-purple"
               icon="mdi-history"
-              size="14px"
               @click="
                 () => (fetchHistoryData(props.row.id), (historyDialog = true))
               "
             >
               <q-tooltip>ประวัติแก้ไขใบอนุญาตประกอบวิชาชีพ</q-tooltip>
             </q-btn>
+            <q-btn
+              v-if="checkPermission($route)?.attrIsUpdate"
+              flat
+              round
+              color="edit"
+              icon="edit"
+              @click="editForm(props.row)"
+            >
+              <q-tooltip>แก้ไขข้อมูล</q-tooltip>
+            </q-btn>
           </q-card-actions>
           <q-separator />
           <q-list>
@@ -764,7 +747,7 @@ onMounted(async () => {
             </q-tr>
           </template>
           <template v-slot:body="props">
-            <q-tr :props="props" class="cursor-pointer">
+            <q-tr :props="props">
               <q-td v-for="col in props.cols" :key="col.id">
                 <div>
                   {{ col.value ? col.value : "-" }}
diff --git a/src/modules/04_registryPerson/components/detail/Achievement/02_Train.vue b/src/modules/04_registryPerson/components/detail/Achievement/02_Train.vue
index 448a1b2e6..5439f87d3 100644
--- a/src/modules/04_registryPerson/components/detail/Achievement/02_Train.vue
+++ b/src/modules/04_registryPerson/components/detail/Achievement/02_Train.vue
@@ -600,18 +600,27 @@ onMounted(async () => {
       </q-tr>
     </template>
     <template v-slot:body="props" v-if="mode === 'table'">
-      <q-tr :props="props" class="cursor-pointer">
+      <q-tr :props="props">
         <q-td auto-width>
           <q-btn
-            v-if="checkPermission($route)?.attrIsUpdate"
-            color="primary"
             flat
             dense
             round
-            class="q-mr-xs"
-            size="14px"
-            icon="mdi-pencil-outline"
-            clickable
+            color="deep-purple"
+            icon="mdi-history"
+            @click="
+              () => (fetchHistoryData(props.row.id), (historyDialog = true))
+            "
+          >
+            <q-tooltip>ประวัติแก้ไขการฝึกอบรม/ดูงาน</q-tooltip>
+          </q-btn>
+          <q-btn
+            v-if="checkPermission($route)?.attrIsUpdate"
+            flat
+            dense
+            round
+            color="edit"
+            icon="edit"
             @click="
               () => {
                 editForm(props.row);
@@ -620,19 +629,6 @@ onMounted(async () => {
           >
             <q-tooltip>แก้ไขข้อมูล</q-tooltip>
           </q-btn>
-          <q-btn
-            color="info"
-            flat
-            dense
-            round
-            size="14px"
-            icon="mdi-history"
-            @click="
-              () => (fetchHistoryData(props.row.id), (historyDialog = true))
-            "
-          >
-            <q-tooltip>ประวัติแก้ไขการฝึกอบรม/ดูงาน</q-tooltip>
-          </q-btn>
         </q-td>
         <q-td v-for="col in props.cols" :key="col.id">
           <div>
@@ -648,28 +644,26 @@ onMounted(async () => {
         <q-card bordered>
           <q-card-actions align="right" class="bg-grey-3">
             <q-btn
-              v-if="checkPermission($route)?.attrIsUpdate"
               flat
               round
-              size="14px"
-              color="primary"
-              icon="mdi-pencil-outline"
-              @click="editForm(props.row)"
-            >
-              <q-tooltip>แก้ไขข้อมูล</q-tooltip>
-            </q-btn>
-            <q-btn
-              flat
-              round
-              size="14px"
-              color="info"
-              icon="history"
+              color="deep-purple"
+              icon="mdi-history"
               @click="
                 () => (fetchHistoryData(props.row.id), (historyDialog = true))
               "
             >
               <q-tooltip>ประวัติแก้ไขการฝึกอบรม/ดูงาน</q-tooltip>
             </q-btn>
+            <q-btn
+              v-if="checkPermission($route)?.attrIsUpdate"
+              flat
+              round
+              color="edit"
+              icon="edit"
+              @click="editForm(props.row)"
+            >
+              <q-tooltip>แก้ไขข้อมูล</q-tooltip>
+            </q-btn>
           </q-card-actions>
           <q-separator />
           <q-list>
@@ -1139,7 +1133,7 @@ onMounted(async () => {
             </q-tr>
           </template>
           <template v-slot:body="props">
-            <q-tr :props="props" class="cursor-pointer">
+            <q-tr :props="props">
               <q-td v-for="col in props.cols" :key="col.id">
                 <div>
                   {{ col.value ? col.value : "-" }}
diff --git a/src/modules/04_registryPerson/components/detail/Achievement/03_Insignia.vue b/src/modules/04_registryPerson/components/detail/Achievement/03_Insignia.vue
index f3546bcfa..da6baa35b 100644
--- a/src/modules/04_registryPerson/components/detail/Achievement/03_Insignia.vue
+++ b/src/modules/04_registryPerson/components/detail/Achievement/03_Insignia.vue
@@ -715,39 +715,32 @@ onMounted(async () => {
     </template>
 
     <template v-slot:body="props" v-if="modeView === 'table'">
-      <q-tr :props="props" class="cursor-pointer">
+      <q-tr :props="props">
         <q-td auto-width>
           <q-btn
-            v-if="checkPermission($route)?.attrIsUpdate"
             flat
             dense
             round
-            class="q-mr-xs"
-            size="14px"
-            color="primary"
-            icon="mdi-pencil-outline"
-            @click="onClickOpenDialog(true, props.row)"
-          >
-            <q-tooltip>แก้ไขข้อมูล</q-tooltip>
-          </q-btn>
-          <q-btn
-            flat
-            dense
-            round
-            size="14px"
-            color="info"
+            color="deep-purple"
             icon="mdi-history"
             @click="clickHistory(props.row)"
           >
             <q-tooltip>ประวัติแก้ไขเครื่องราชอิสริยาภรณ์</q-tooltip>
           </q-btn>
+
+          <q-btn
+            v-if="checkPermission($route)?.attrIsUpdate"
+            flat
+            dense
+            round
+            color="edit"
+            icon="edit"
+            @click="onClickOpenDialog(true, props.row)"
+          >
+            <q-tooltip>แก้ไขข้อมูล</q-tooltip>
+          </q-btn>
         </q-td>
-        <q-td
-          v-for="col in props.cols"
-          class="cursor-pointer"
-          :key="col.name"
-          :props="props"
-        >
+        <q-td v-for="col in props.cols" :key="col.name" :props="props">
           <div class="table_ellipsis">
             {{ col.value ? col.value : "-" }}
           </div>
@@ -760,24 +753,24 @@ onMounted(async () => {
         <q-card bordered>
           <q-card-actions class="bg-grey-3" align="right">
             <q-btn
-              v-if="checkPermission($route)?.attrIsUpdate"
               flat
               round
-              color="primary"
-              icon="mdi-pencil-outline"
-              @click="onClickOpenDialog(true, props.row)"
-            >
-              <q-tooltip>แก่ไขข้อมุล</q-tooltip>
-            </q-btn>
-            <q-btn
-              flat
-              round
-              color="info"
+              color="deep-purple"
               icon="mdi-history"
               @click="clickHistory(props.row)"
             >
               <q-tooltip>ประวัติแก้ไขเครื่องราชอิสริยาภรณ์</q-tooltip>
             </q-btn>
+            <q-btn
+              v-if="checkPermission($route)?.attrIsUpdate"
+              flat
+              round
+              color="edit"
+              icon="edit"
+              @click="onClickOpenDialog(true, props.row)"
+            >
+              <q-tooltip>แก่ไขข้อมุล</q-tooltip>
+            </q-btn>
           </q-card-actions>
           <q-separator />
           <div>
@@ -1189,7 +1182,7 @@ onMounted(async () => {
             </q-tr>
           </template>
           <template v-slot:body="props">
-            <q-tr :props="props" class="cursor-pointer">
+            <q-tr :props="props">
               <q-td v-for="col in props.cols" :key="col.id">
                 <div>
                   {{ col.value ? col.value : "-" }}
diff --git a/src/modules/04_registryPerson/components/detail/Achievement/04_DeclarationHonor.vue b/src/modules/04_registryPerson/components/detail/Achievement/04_DeclarationHonor.vue
index 551a80e72..e3f32e15b 100644
--- a/src/modules/04_registryPerson/components/detail/Achievement/04_DeclarationHonor.vue
+++ b/src/modules/04_registryPerson/components/detail/Achievement/04_DeclarationHonor.vue
@@ -448,36 +448,28 @@ onMounted(async () => {
       <q-tr :props="props">
         <q-td auto-width>
           <q-btn
-            v-if="checkPermission($route)?.attrIsUpdate"
             flat
             dense
             round
-            class="q-mr-xs"
-            size="14px"
-            color="primary"
-            icon="mdi-pencil-outline"
-            @click="onClickOpenDialog(true, props.row)"
-          >
-            <q-tooltip>แก้ไขข้อมูล</q-tooltip>
-          </q-btn>
-          <q-btn
-            color="info"
-            flat
-            dense
-            round
-            size="14px"
+            color="deep-purple"
             icon="mdi-history"
             @click="clickHistory(props.row)"
           >
             <q-tooltip>ประวัติแก้ไขประกาศเกียรติคุณ</q-tooltip>
           </q-btn>
+          <q-btn
+            v-if="checkPermission($route)?.attrIsUpdate"
+            flat
+            dense
+            round
+            color="edit"
+            icon="edit"
+            @click="onClickOpenDialog(true, props.row)"
+          >
+            <q-tooltip>แก้ไขข้อมูล</q-tooltip>
+          </q-btn>
         </q-td>
-        <q-td
-          v-for="col in props.cols"
-          :key="col.name"
-          :props="props"
-          class="cursor-pointer"
-        >
+        <q-td v-for="col in props.cols" :key="col.name" :props="props">
           <div class="table_ellipsis">
             {{ col.value ? col.value : "-" }}
           </div>
@@ -490,24 +482,24 @@ onMounted(async () => {
         <q-card bordered>
           <q-card-actions class="bg-grey-3" align="right">
             <q-btn
-              v-if="checkPermission($route)?.attrIsUpdate"
               flat
               round
-              color="primary"
-              icon="mdi-pencil-outline"
-              @click="onClickOpenDialog(true, props.row)"
-            >
-              <q-tooltip>แก่ไขข้อมุล</q-tooltip>
-            </q-btn>
-            <q-btn
-              flat
-              round
-              color="info"
+              color="deep-purple"
               icon="mdi-history"
               @click.stop.prevent="clickHistory(props.row)"
             >
               <q-tooltip>ประวัติแก้ไขประกาศเกียรติคุณ</q-tooltip>
             </q-btn>
+            <q-btn
+              v-if="checkPermission($route)?.attrIsUpdate"
+              flat
+              round
+              color="edit"
+              icon="edit"
+              @click="onClickOpenDialog(true, props.row)"
+            >
+              <q-tooltip>แก่ไขข้อมุล</q-tooltip>
+            </q-btn>
           </q-card-actions>
           <q-separator />
           <div>
@@ -822,7 +814,7 @@ onMounted(async () => {
             </q-tr>
           </template>
           <template v-slot:body="props">
-            <q-tr :props="props" class="cursor-pointer">
+            <q-tr :props="props">
               <q-td v-for="col in props.cols" :key="col.id">
                 <div>
                   {{ col.value ? col.value : "-" }}
diff --git a/src/modules/04_registryPerson/components/detail/Achievement/05_ResultsPerformance.vue b/src/modules/04_registryPerson/components/detail/Achievement/05_ResultsPerformance.vue
index 4ab2675e0..f40030d5b 100644
--- a/src/modules/04_registryPerson/components/detail/Achievement/05_ResultsPerformance.vue
+++ b/src/modules/04_registryPerson/components/detail/Achievement/05_ResultsPerformance.vue
@@ -520,36 +520,28 @@ onMounted(async () => {
       <q-tr :props="props">
         <q-td auto-width>
           <q-btn
-            v-if="checkPermission($route)?.attrIsUpdate"
             flat
             dense
             round
-            class="q-mr-xs"
-            size="14px"
-            color="primary"
-            icon="mdi-pencil-outline"
-            @click="onClickOpenDialog(true, props.row)"
-          >
-            <q-tooltip>แก้ไขข้อมูล</q-tooltip>
-          </q-btn>
-          <q-btn
-            color="info"
-            flat
-            dense
-            round
-            size="14px"
+            color="deep-purple"
             icon="mdi-history"
             @click="clickHistory(props.row)"
           >
             <q-tooltip>ประวัติแก้ไขผลการประเมินการปฏิบัติราชการ</q-tooltip>
           </q-btn>
+          <q-btn
+            v-if="checkPermission($route)?.attrIsUpdate"
+            flat
+            dense
+            round
+            color="edit"
+            icon="edit"
+            @click="onClickOpenDialog(true, props.row)"
+          >
+            <q-tooltip>แก้ไขข้อมูล</q-tooltip>
+          </q-btn>
         </q-td>
-        <q-td
-          v-for="col in props.cols"
-          :key="col.name"
-          :props="props"
-          class="cursor-pointer"
-        >
+        <q-td v-for="col in props.cols" :key="col.name" :props="props">
           <div class="table_ellipsis">
             {{ col.value ? col.value : "-" }}
           </div>
@@ -562,24 +554,24 @@ onMounted(async () => {
         <q-card bordered>
           <q-card-actions class="bg-grey-3" align="right">
             <q-btn
-              v-if="checkPermission($route)?.attrIsUpdate"
               flat
               round
-              color="primary"
-              icon="mdi-pencil-outline"
-              @click.stop.prevent="onClickOpenDialog(true, props.row)"
-            >
-              <q-tooltip>แก่ไขข้อมุล</q-tooltip>
-            </q-btn>
-            <q-btn
-              flat
-              round
-              color="info"
+              color="deep-purple"
               icon="mdi-history"
               @click="clickHistory(props.row)"
             >
               <q-tooltip>ประวัติแก้ไขเครื่องราชอิสริยาภรณ์</q-tooltip>
             </q-btn>
+            <q-btn
+              v-if="checkPermission($route)?.attrIsUpdate"
+              flat
+              round
+              color="edit"
+              icon="edit"
+              @click.stop.prevent="onClickOpenDialog(true, props.row)"
+            >
+              <q-tooltip>แก่ไขข้อมุล</q-tooltip>
+            </q-btn>
           </q-card-actions>
           <q-separator />
           <div>
@@ -834,7 +826,7 @@ onMounted(async () => {
             </q-tr>
           </template>
           <template v-slot:body="props">
-            <q-tr :props="props" class="cursor-pointer">
+            <q-tr :props="props">
               <q-td v-for="col in props.cols" :key="col.id">
                 <div>
                   {{ col.value ? col.value : "-" }}
diff --git a/src/modules/04_registryPerson/components/detail/Employee/01_DataEmployee.vue b/src/modules/04_registryPerson/components/detail/Employee/01_DataEmployee.vue
index 7c7955779..a6baf3f4c 100644
--- a/src/modules/04_registryPerson/components/detail/Employee/01_DataEmployee.vue
+++ b/src/modules/04_registryPerson/components/detail/Employee/01_DataEmployee.vue
@@ -303,8 +303,8 @@ onMounted(() => {
         flat
         round
         dense
-        icon="mdi-pencil-outline"
-        color="primary"
+        icon="edit"
+        color="edit"
         @click="onClickEdit"
       >
         <q-tooltip>แก้ไขข้อมูล</q-tooltip>
@@ -314,7 +314,7 @@ onMounted(() => {
         round
         dense
         icon="mdi-history"
-        color="info"
+        color="deep-purple"
         @click="onClickHistory"
       >
         <q-tooltip>ประวัติแก้ไขข้อมูลลูกจ้างชั่วคราว</q-tooltip>
@@ -614,7 +614,7 @@ onMounted(() => {
             </q-tr>
           </template>
           <template v-slot:body="props">
-            <q-tr :props="props" class="cursor-pointer">
+            <q-tr :props="props">
               <q-td v-for="col in props.cols" :key="col.id">
                 <div>
                   {{ col.value ? col.value : "-" }}
diff --git a/src/modules/04_registryPerson/components/detail/Employee/02_Employment.vue b/src/modules/04_registryPerson/components/detail/Employee/02_Employment.vue
index c26885415..3dfbd0357 100644
--- a/src/modules/04_registryPerson/components/detail/Employee/02_Employment.vue
+++ b/src/modules/04_registryPerson/components/detail/Employee/02_Employment.vue
@@ -290,8 +290,6 @@ onMounted(() => {
     >
       <template v-slot:header="props">
         <q-tr :props="props">
-          <q-th auto-width v-if="checkPermission($route)?.attrIsUpdate" />
-          <q-th auto-width v-if="checkPermission($route)?.attrIsDelete" />
           <q-th auto-width />
           <q-th v-for="col in props.cols" :key="col.name" :props="props">
             <span class="text-weight-medium">{{ col.label }}</span>
@@ -299,21 +297,31 @@ onMounted(() => {
         </q-tr>
       </template>
       <template v-slot:body="props">
-        <q-tr :props="props" class="cursor-pointer" style="height: 40px">
-          <q-td v-if="checkPermission($route)?.attrIsUpdate">
+        <q-tr :props="props">
+          <q-td auto-width>
             <q-btn
               dense
               flat
               round
-              color="primary"
-              icon="mdi-pencil"
+              color="deep-purple"
+              icon="mdi-history"
+              @click="onClickHistory(props.row.id)"
+            >
+              <q-tooltip>ประวัติข้อมูลการจ้าง </q-tooltip>
+            </q-btn>
+            <q-btn
+              v-if="checkPermission($route)?.attrIsUpdate"
+              dense
+              flat
+              round
+              color="edit"
+              icon="edit"
               @click="onOpenDialog(true, props.row.id)"
             >
               <q-tooltip>แก้ไขข้อมูล</q-tooltip>
             </q-btn>
-          </q-td>
-          <q-td v-if="checkPermission($route)?.attrIsDelete">
             <q-btn
+              v-if="checkPermission($route)?.attrIsDelete"
               dense
               flat
               round
@@ -324,18 +332,7 @@ onMounted(() => {
               <q-tooltip>ลบข้อมูล</q-tooltip></q-btn
             >
           </q-td>
-          <q-td>
-            <q-btn
-              dense
-              flat
-              round
-              color="info"
-              icon="mdi-history"
-              @click="onClickHistory(props.row.id)"
-            >
-              <q-tooltip>ประวัติข้อมูลการจ้าง </q-tooltip>
-            </q-btn>
-          </q-td>
+
           <q-td v-for="col in props.cols" :key="col.name" :props="props">
             <div>
               {{ col.value ? col.value : "-" }}
diff --git a/src/modules/04_registryPerson/components/detail/Other/01_OtherInformation.vue b/src/modules/04_registryPerson/components/detail/Other/01_OtherInformation.vue
index b8a52959e..d7d3ed4d1 100644
--- a/src/modules/04_registryPerson/components/detail/Other/01_OtherInformation.vue
+++ b/src/modules/04_registryPerson/components/detail/Other/01_OtherInformation.vue
@@ -321,32 +321,29 @@ onMounted(() => {
       </q-tr>
     </template>
     <template v-slot:body="props" v-if="mode === 'table'">
-      <q-tr :props="props" class="cursor-pointer">
+      <q-tr :props="props">
         <q-td auto-width>
+          <q-btn
+            flat
+            dense
+            round
+            color="deep-purple"
+            icon="mdi-history"
+            @click="openDialogHistory(props.row.id)"
+          >
+            <q-tooltip>ประวัติแก้ไขอื่นๆ</q-tooltip>
+          </q-btn>
           <q-btn
             v-if="checkPermission($route)?.attrIsUpdate"
             flat
             dense
             round
-            class="q-mr-xs"
-            size="14px"
-            color="primary"
-            icon="mdi-pencil-outline"
+            color="edit"
+            icon="edit"
             @click="openDialogEdit(props.row)"
           >
             <q-tooltip>แก้ไขข้อมูล</q-tooltip>
           </q-btn>
-          <q-btn
-            color="info"
-            flat
-            dense
-            round
-            size="14px"
-            icon="mdi-history"
-            @click="openDialogHistory(props.row.id)"
-          >
-            <q-tooltip>ประวัติแก้ไขอื่นๆ</q-tooltip>
-          </q-btn>
         </q-td>
         <q-td v-for="col in props.cols" :key="col.id">
           <div>
@@ -362,22 +359,22 @@ onMounted(() => {
             <q-space />
             <div class="q-gutter-x-sm">
               <q-btn
-                v-if="checkPermission($route)?.attrIsUpdate"
-                color="primary"
-                icon="mdi-pencil-outline"
-                flat
-                round
-                @click="openDialogEdit(props.row)"
-                ><q-tooltip>แก้ไข</q-tooltip></q-btn
-              >
-              <q-btn
-                color="info"
+                color="deep-purple"
                 icon="mdi-history"
                 flat
                 round
                 @click="openDialogHistory(props.row.id)"
                 ><q-tooltip>ประวิติแก้ไขอื่นๆ</q-tooltip></q-btn
               >
+              <q-btn
+                v-if="checkPermission($route)?.attrIsUpdate"
+                color="edit"
+                icon="edit"
+                flat
+                round
+                @click="openDialogEdit(props.row)"
+                ><q-tooltip>แก้ไข</q-tooltip></q-btn
+              >
             </div>
           </div>
           <q-separator />
diff --git a/src/modules/04_registryPerson/components/detail/Other/01_OtherInformationHistory.vue b/src/modules/04_registryPerson/components/detail/Other/01_OtherInformationHistory.vue
index cf5affeff..bb22ad1b0 100644
--- a/src/modules/04_registryPerson/components/detail/Other/01_OtherInformationHistory.vue
+++ b/src/modules/04_registryPerson/components/detail/Other/01_OtherInformationHistory.vue
@@ -202,7 +202,7 @@ watch(modal, (status) => {
             </q-tr>
           </template>
           <template v-slot:body="props">
-            <q-tr :props="props" class="cursor-pointer">
+            <q-tr :props="props">
               <q-td v-for="col in props.cols" :key="col.id">
                 <div>
                   {{ col.value ? col.value : "-" }}
diff --git a/src/modules/04_registryPerson/components/detail/PersonalInformation/Main.vue b/src/modules/04_registryPerson/components/detail/PersonalInformation/Main.vue
index 0db0facaf..b45461384 100644
--- a/src/modules/04_registryPerson/components/detail/PersonalInformation/Main.vue
+++ b/src/modules/04_registryPerson/components/detail/PersonalInformation/Main.vue
@@ -5,7 +5,6 @@ import { ref } from "vue";
 import Profile from "@/modules/04_registryPerson/components/detail/PersonalInformation/01_Profile.vue";
 import NameChangeHistory from "@/modules/04_registryPerson/components/detail/PersonalInformation/02_NameChangeHistory.vue";
 import Address from "@/modules/04_registryPerson/components/detail/PersonalInformation/03_Address.vue";
-import Family from "@/modules/04_registryPerson/components/detail/PersonalInformation/04_Family.vue";
 import Education from "@/modules/04_registryPerson/components/detail/PersonalInformation/05_Education.vue";
 import SpecialSkill from "@/modules/04_registryPerson/components/detail/PersonalInformation/06_SpecialSkill.vue";
 
diff --git a/src/modules/04_registryPerson/components/detail/Salary/01_PositionSalary.vue b/src/modules/04_registryPerson/components/detail/Salary/01_PositionSalary.vue
index 69c99c8e0..eb0d1756b 100644
--- a/src/modules/04_registryPerson/components/detail/Salary/01_PositionSalary.vue
+++ b/src/modules/04_registryPerson/components/detail/Salary/01_PositionSalary.vue
@@ -538,6 +538,13 @@ async function fetchOptionGroup() {
 onMounted(() => {
   fetchListSalary();
 });
+
+const classInput = (val: boolean) => {
+  return {
+    "full-width inputgreen cursor-pointer": val,
+    "full-width cursor-pointer": !val,
+  };
+};
 </script>
 <template>
   <div class="row items-center q-gutter-x-sm q-pb-sm">
@@ -611,11 +618,10 @@ onMounted(() => {
       </q-tr>
     </template>
     <template v-slot:body="props">
-      <q-tr :props="props" class="cursor-pointer">
+      <q-tr :props="props">
         <q-td auto-width v-if="checkPermission($route)?.attrIsUpdate">
           <q-btn
             dense
-            size="12px"
             flat
             round
             :color="props.rowIndex + 1 == 1 ? 'grey' : 'green'"
@@ -628,7 +634,6 @@ onMounted(() => {
         <q-td auto-width v-if="checkPermission($route)?.attrIsUpdate">
           <q-btn
             dense
-            size="12px"
             flat
             round
             :color="rows.length == props.rowIndex + 1 ? 'grey' : 'red'"
@@ -640,30 +645,28 @@ onMounted(() => {
         </q-td>
         <q-td auto-width>
           <q-btn
-            v-if="checkPermission($route)?.attrIsUpdate"
-            color="primary"
             flat
             dense
             round
-            class="q-mr-xs"
-            size="14px"
-            icon="mdi-pencil-outline"
-            clickable
-            @click="onClickOpenDialog(true, props.row)"
-          >
-            <q-tooltip>แก้ไขข้อมูล</q-tooltip>
-          </q-btn>
-          <q-btn
-            color="info"
-            flat
-            dense
-            round
-            size="14px"
+            color="deep-purple"
             icon="mdi-history"
             @click="onClikcHistory(props.row.id)"
           >
             <q-tooltip>ประวัติแก้ไขตำแหน่ง/เงินเดือน</q-tooltip>
           </q-btn>
+
+          <q-btn
+            v-if="checkPermission($route)?.attrIsUpdate"
+            flat
+            dense
+            round
+            color="edit"
+            icon="edit"
+            clickable
+            @click="onClickOpenDialog(true, props.row)"
+          >
+            <q-tooltip>แก้ไขข้อมูล</q-tooltip>
+          </q-btn>
         </q-td>
         <q-td v-for="col in props.cols" :key="col.id">
           <div class="table_ellipsis">
@@ -694,6 +697,7 @@ onMounted(() => {
                 autoApply
                 :enableTimePicker="false"
                 week-start="0"
+                :class="classInput(true)"
               >
                 <template #year="{ year }">{{ year + 543 }}</template>
                 <template #year-overlay-value="{ value }">{{
@@ -729,6 +733,7 @@ onMounted(() => {
             <div class="col-xs-6 col-sm-6 col-md-6">
               <q-input
                 ref="posNoRef"
+                :class="classInput(true)"
                 outlined
                 dense
                 lazy-rules
@@ -744,6 +749,7 @@ onMounted(() => {
             <div class="col-xs-12 col-sm-12 col-md-12">
               <q-select
                 ref="templatePosRef"
+                :class="classInput(true)"
                 outlined
                 dense
                 lazy-rules
@@ -768,6 +774,7 @@ onMounted(() => {
             <div class="col-xs-12 col-sm-12 col-md-12">
               <q-input
                 ref="positionRef"
+                :class="classInput(true)"
                 outlined
                 dense
                 lazy-rules
@@ -784,6 +791,7 @@ onMounted(() => {
               <q-select
                 ref="positionType Ref"
                 outlined
+                :class="classInput(true)"
                 dense
                 lazy-rules
                 borderless
@@ -807,6 +815,7 @@ onMounted(() => {
 
             <div class="col-xs-6 col-sm-6 col-md-4">
               <q-select
+                :class="classInput(true)"
                 ref="positionLevel Ref"
                 outlined
                 dense
@@ -833,6 +842,7 @@ onMounted(() => {
             <div class="col-xs-6 col-sm-6 col-md-4" v-if="empType == ''">
               <q-select
                 outlined
+                :class="classInput(true)"
                 dense
                 lazy-rules
                 borderless
@@ -855,6 +865,7 @@ onMounted(() => {
 
             <div class="col-xs-6 col-sm-6 col-md-4" v-if="empType == ''">
               <q-select
+                :class="classInput(true)"
                 outlined
                 dense
                 lazy-rules
@@ -878,6 +889,7 @@ onMounted(() => {
 
             <div class="col-xs-6 col-sm-6 col-md-4" v-if="empType == ''">
               <q-select
+                :class="classInput(true)"
                 outlined
                 dense
                 lazy-rules
@@ -901,6 +913,7 @@ onMounted(() => {
 
             <div class="col-xs-6 col-sm-6 col-md-4">
               <q-input
+                :class="classInput(true)"
                 ref="salaryRef"
                 dense
                 outlined
@@ -916,6 +929,7 @@ onMounted(() => {
 
             <div class="col-xs-6 col-sm-6 col-md-4">
               <q-input
+                :class="classInput(true)"
                 ref="amountRef"
                 dense
                 outlined
@@ -931,6 +945,7 @@ onMounted(() => {
 
             <div class="col-xs-6 col-sm-6 col-md-4">
               <q-input
+                :class="classInput(true)"
                 ref="amountRef"
                 dense
                 outlined
@@ -945,6 +960,7 @@ onMounted(() => {
 
             <div class="col-xs-6 col-sm-6 col-md-12">
               <q-input
+                :class="classInput(true)"
                 outlined
                 dense
                 lazy-rules
@@ -960,6 +976,7 @@ onMounted(() => {
 
             <div class="col-xs-12 col-sm-12 col-md-12">
               <q-select
+                :class="classInput(true)"
                 ref="templateDocRef"
                 outlined
                 dense
@@ -984,6 +1001,7 @@ onMounted(() => {
 
             <div class="col-xs-12 col-sm-12 col-md-12">
               <q-input
+                :class="classInput(true)"
                 ref="docRef"
                 outlined
                 dense
diff --git a/src/modules/04_registryPerson/components/detail/Salary/01_PositionSalaryHistory.vue b/src/modules/04_registryPerson/components/detail/Salary/01_PositionSalaryHistory.vue
index 896e144b1..2e1809b06 100644
--- a/src/modules/04_registryPerson/components/detail/Salary/01_PositionSalaryHistory.vue
+++ b/src/modules/04_registryPerson/components/detail/Salary/01_PositionSalaryHistory.vue
@@ -331,7 +331,7 @@ watch(
             </q-tr>
           </template>
           <template v-slot:body="props">
-            <q-tr :props="props" class="cursor-pointer">
+            <q-tr :props="props">
               <q-td v-for="col in props.cols">
                 <div class="table_ellipsis">
                   {{ col.value ? col.value : "-" }}
diff --git a/src/modules/04_registryPerson/components/detail/Salary/02_NotReceiveSalary.vue b/src/modules/04_registryPerson/components/detail/Salary/02_NotReceiveSalary.vue
index 06c73cfd5..70fce5223 100644
--- a/src/modules/04_registryPerson/components/detail/Salary/02_NotReceiveSalary.vue
+++ b/src/modules/04_registryPerson/components/detail/Salary/02_NotReceiveSalary.vue
@@ -232,7 +232,7 @@ onMounted(() => {
     <q-btn
       v-if="checkPermission($route)?.attrIsUpdate"
       dense
-      color="teal-5"
+      color="primary"
       icon="add"
       flat
       round
@@ -336,32 +336,29 @@ onMounted(() => {
       </q-tr>
     </template>
     <template v-slot:body="props" v-if="modelView === 'table'">
-      <q-tr :props="props" class="cursor-pointer">
+      <q-tr :props="props">
         <q-td auto-width>
+          <q-btn
+            flat
+            dense
+            round
+            color="deep-purple"
+            icon="mdi-history"
+            @click.stop.prevent="onClickHistory(props.row.id)"
+          >
+            <q-tooltip>ประวัติบันทึกวันที่ไม่ได้รับเงินเดือนฯ</q-tooltip>
+          </q-btn>
           <q-btn
             v-if="checkPermission($route)?.attrIsUpdate"
             flat
             dense
             round
-            class="q-mr-xs"
-            size="14px"
-            color="primary"
-            icon="mdi-pencil-outline"
+            color="edit"
+            icon="edit"
             @click="onClickOpenDialog(true, props.row)"
           >
             <q-tooltip>แก้ไขข้อมูล</q-tooltip>
           </q-btn>
-          <q-btn
-            color="info"
-            flat
-            dense
-            round
-            size="14px"
-            icon="mdi-history"
-            @click.stop.prevent="onClickHistory(props.row.id)"
-          >
-            <q-tooltip>ประวัติบันทึกวันที่ไม่ได้รับเงินเดือนฯ</q-tooltip>
-          </q-btn>
         </q-td>
         <q-td v-for="col in props.cols" :key="col.id">
           <div>{{ col.value ? col.value : "-" }}</div>
@@ -375,24 +372,24 @@ onMounted(() => {
         <q-card bordered>
           <q-card-actions class="bg-grey-3" align="right">
             <q-btn
-             v-if="checkPermission($route)?.attrIsUpdate"
               flat
               round
-              color="primary"
-              icon="mdi-pencil-outline"
-              @click="onClickOpenDialog(true, props.row)"
-            >
-              <q-tooltip>แก่ไขข้อมุล</q-tooltip>
-            </q-btn>
-            <q-btn
-              flat
-              round
-              color="info"
-              icon="history"
+              color="deep-purple"
+              icon="mdi-history"
               @click="onClickHistory(props.row.id)"
             >
               <q-tooltip>ประวัติบันทึกวันที่ไม่ได้รับเงินเดือนฯ</q-tooltip>
             </q-btn>
+            <q-btn
+              v-if="checkPermission($route)?.attrIsUpdate"
+              flat
+              round
+              color="edit"
+              icon="edit"
+              @click="onClickOpenDialog(true, props.row)"
+            >
+              <q-tooltip>แก่ไขข้อมุล</q-tooltip>
+            </q-btn>
           </q-card-actions>
           <q-separator />
           <q-list>
diff --git a/src/modules/04_registryPerson/components/detail/Salary/02_NotReceiveSalaryHistory.vue b/src/modules/04_registryPerson/components/detail/Salary/02_NotReceiveSalaryHistory.vue
index a0020e4b3..9bd4846f8 100644
--- a/src/modules/04_registryPerson/components/detail/Salary/02_NotReceiveSalaryHistory.vue
+++ b/src/modules/04_registryPerson/components/detail/Salary/02_NotReceiveSalaryHistory.vue
@@ -209,7 +209,7 @@ watch(modal, (status) => {
             </q-tr>
           </template>
           <template v-slot:body="props">
-            <q-tr :props="props" class="cursor-pointer">
+            <q-tr :props="props">
               <q-td v-for="col in props.cols" :key="col.name" :props="props">
                 <div class="table_ellipsis">
                   {{ col.value ? col.value : "-" }}
diff --git a/src/modules/04_registryPerson/views/detailView.vue b/src/modules/04_registryPerson/views/detailView.vue
index 5e09ed635..84bb4f9a3 100644
--- a/src/modules/04_registryPerson/views/detailView.vue
+++ b/src/modules/04_registryPerson/views/detailView.vue
@@ -742,13 +742,14 @@ onMounted(async () => {
         <q-btn
           v-if="checkPermission($route)?.attrIsUpdate"
           round
-          text-color="primary"
-          icon="mdi-pencil-outline"
+          text-color="edit"
+          icon="mdi-pencil"
           @click="openDialogImg"
           size="sm"
           unelevated
           class="bg-white btnEditImg"
         >
+          <q-tooltip>แก้ไขรูปโปรไฟล์</q-tooltip>
         </q-btn>
       </div>
 
diff --git a/src/modules/04_registryPerson/views/requestEdit.vue b/src/modules/04_registryPerson/views/requestEdit.vue
index 1027331de..706a629ed 100644
--- a/src/modules/04_registryPerson/views/requestEdit.vue
+++ b/src/modules/04_registryPerson/views/requestEdit.vue
@@ -340,7 +340,7 @@ onMounted(() => {
           </q-tr>
         </template>
         <template v-slot:body="props">
-          <q-tr :props="props" class="cursor-pointer">
+          <q-tr :props="props">
             <q-td auto-width>
               <q-btn
                 icon="edit"
diff --git a/src/modules/08_registryEmployee/views/Main.vue b/src/modules/08_registryEmployee/views/Main.vue
index f19ed42f2..8bc6d2d2c 100644
--- a/src/modules/08_registryEmployee/views/Main.vue
+++ b/src/modules/08_registryEmployee/views/Main.vue
@@ -375,7 +375,13 @@ onMounted(() => {
       >
         <template v-slot:header="props">
           <q-tr :props="props">
-            <q-th auto-width />
+            <q-th
+              auto-width
+              v-if="
+                checkPermission($route)?.attrIsDelete ||
+                checkPermission($route)?.attrIsUpdate
+              "
+            />
             <q-th v-for="col in props.cols" :key="col.name" :props="props">
               <span class="text-weight-medium">{{ col.label }}</span>
             </q-th>
@@ -391,74 +397,48 @@ onMounted(() => {
               "
             >
               <q-btn
-                icon="mdi-dots-vertical"
-                size="12px"
-                color="grey-7"
+                v-if="
+                  (props.row.draftOrgEmployeeStatus === null ||
+                    props.row.draftOrgEmployeeStatus === 'WAITTING' ||
+                    props.row.draftOrgEmployeeStatus === 'PENDING') &&
+                  checkPermission($route)?.attrIsUpdate &&
+                  checkPermission($route)?.attrIsGet
+                "
                 flat
                 round
                 dense
+                color="blue"
+                icon="mdi-account-settings"
+                @click.pervent="onClickSelectPos(props.row)"
               >
-                <q-menu transition-show="jump-down" transition-hide="jump-up">
-                  <q-list dense style="min-width: 160px">
-                    <q-item
-                      clickable
-                      v-close-popup
-                      v-if="
-                        (props.row.draftOrgEmployeeStatus === null ||
-                          props.row.draftOrgEmployeeStatus === 'WAITTING' ||
-                          props.row.draftOrgEmployeeStatus === 'PENDING') &&
-                        checkPermission($route)?.attrIsUpdate
-                      "
-                      @click.pervent="onClickSelectPos(props.row)"
-                    >
-                      <q-item-section
-                        style="min-width: 0px"
-                        avatar
-                        class="q-py-sm"
-                      >
-                        <q-icon
-                          color="blue"
-                          size="xs"
-                          name="mdi-account-settings"
-                        />
-                      </q-item-section>
-                      <q-item-section>กำหนดตำแหน่ง</q-item-section>
-                    </q-item>
-                    <q-item
-                      v-if="checkPermission($route)?.attrIsUpdate"
-                      clickable
-                      v-close-popup
-                      @click.pervent="redirectToPageDetail(props.row.id)"
-                    >
-                      <q-item-section
-                        style="min-width: 0px"
-                        avatar
-                        class="q-py-sm"
-                      >
-                        <q-icon color="primary" size="xs" name="mdi-account" />
-                      </q-item-section>
-                      <q-item-section>แก้ไขข้อมูล</q-item-section>
-                    </q-item>
-                    <q-separator />
-                    <q-item
-                      v-if="checkPermission($route)?.attrIsDelete"
-                      clickable
-                      v-close-popup
-                      @click.pervent="onClickDelete(props.row.id)"
-                    >
-                      <q-item-section
-                        style="min-width: 0px"
-                        avatar
-                        class="q-py-sm"
-                      >
-                        <q-icon color="red" size="xs" name="mdi-delete" />
-                      </q-item-section>
-                      <q-item-section>ลบ</q-item-section>
-                    </q-item>
+                <q-tooltip>กำหนดตำแหน่ง </q-tooltip>
+              </q-btn>
 
-                    <q-separator />
-                  </q-list>
-                </q-menu>
+              <q-btn
+                v-if="
+                  checkPermission($route)?.attrIsUpdate &&
+                  checkPermission($route)?.attrIsGet
+                "
+                flat
+                round
+                dense
+                color="edit"
+                icon="edit"
+                @click.pervent="redirectToPageDetail(props.row.id)"
+              >
+                <q-tooltip>แก้ไขข้อมูล </q-tooltip>
+              </q-btn>
+
+              <q-btn
+                v-if="checkPermission($route)?.attrIsDelete"
+                flat
+                round
+                dense
+                color="red"
+                icon="mdi-delete"
+                @click.pervent="onClickDelete(props.row.id)"
+              >
+                <q-tooltip>ลบ </q-tooltip>
               </q-btn>
             </q-td>
             <q-td v-for="col in props.cols" :key="col.name" :props="props">