diff --git a/src/modules/02_users/views/01_user.vue b/src/modules/02_users/views/01_user.vue
index 08da0e36..f51311a8 100644
--- a/src/modules/02_users/views/01_user.vue
+++ b/src/modules/02_users/views/01_user.vue
@@ -383,10 +383,12 @@ onMounted(async () => {
         dense
         outlined
         v-model="keyword"
+        clearable
+        @clear="keyword = ''"
         placeholder="ค้นหา"
         @keydown.enter.prevent="(currentPage = 1), fetchListUsers()"
       >
-        <template v-slot:append>
+        <template v-slot:append v-if="keyword === ''">
           <q-icon name="search" />
         </template>
       </q-input>
diff --git a/src/modules/02_users/views/02_rolesAndPermissions.vue b/src/modules/02_users/views/02_rolesAndPermissions.vue
index cc5c0885..2f196a22 100644
--- a/src/modules/02_users/views/02_rolesAndPermissions.vue
+++ b/src/modules/02_users/views/02_rolesAndPermissions.vue
@@ -170,8 +170,10 @@ onMounted(() => {
         outlined
         v-model="keyword"
         placeholder="ค้นหา"
+        clearable
+        @clear="keyword = ''"
       >
-        <template v-slot:append>
+        <template v-slot:append v-if="keyword===''">
           <q-icon name="search" />
         </template>
       </q-input>
diff --git a/src/modules/02_users/views/03_permissionsView.vue b/src/modules/02_users/views/03_permissionsView.vue
index 3b4061fe..1138ad77 100644
--- a/src/modules/02_users/views/03_permissionsView.vue
+++ b/src/modules/02_users/views/03_permissionsView.vue
@@ -516,7 +516,7 @@ onMounted(() => {
                             class="cursor-pointer"
                             @click="filter = ''"
                           />
-                          <q-icon name="search" color="grey-5" />
+                          <q-icon name="search" color="grey-5" v-else />
                         </template>
                       </q-input>
                     </div>
@@ -624,6 +624,8 @@ onMounted(() => {
                       dense
                       v-model="reqMaster.keyword"
                       label="ค้นหา"
+                      clearable
+                      @clear="reqMaster.keyword = ''"
                       @keydown.enter.prevent="
                         (reqMaster.page = 1),
                           fetchDataTable(
@@ -633,7 +635,7 @@ onMounted(() => {
                           )
                       "
                     >
-                      <template v-slot:append>
+                      <template v-slot:append v-if="reqMaster.keyword === ''">
                         <q-icon name="search" color="grey-5" />
                       </template>
                     </q-input>
diff --git a/src/modules/02_users/views/05_responsIbilities.vue b/src/modules/02_users/views/05_responsIbilities.vue
index 76f45235..06986da6 100644
--- a/src/modules/02_users/views/05_responsIbilities.vue
+++ b/src/modules/02_users/views/05_responsIbilities.vue
@@ -447,7 +447,7 @@ onMounted(() => {
                             class="cursor-pointer"
                             @click="filter = ''"
                           />
-                          <q-icon name="search" color="grey-5" />
+                          <q-icon v-else name="search" color="grey-5" />
                         </template>
                       </q-input>
                     </div>
@@ -555,6 +555,8 @@ onMounted(() => {
                       dense
                       v-model="reqMaster.keyword"
                       label="ค้นหา"
+                      clearable
+                      @clear="reqMaster.keyword = ''"
                       @keydown.enter.prevent="
                         (reqMaster.page = 1),
                           fetchDataTable(
@@ -564,7 +566,7 @@ onMounted(() => {
                           )
                       "
                     >
-                      <template v-slot:append>
+                      <template v-slot:append v-if="reqMaster.keyword === ''">
                         <q-icon name="search" color="grey-5" />
                       </template>
                     </q-input>