diff --git a/src/modules/04_registryPerson/components/TableView.vue b/src/modules/04_registryPerson/components/TableView.vue
index d653a61db..1a572faf0 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"
       >
@@ -396,7 +396,7 @@ watch(
               </q-btn>
             </div>
           </div>
-        <q-separator/>
+          <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" />
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/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"