diff --git a/resources/js/assets/app.scss b/resources/js/assets/app.scss
index 99424640..875a6013 100644
--- a/resources/js/assets/app.scss
+++ b/resources/js/assets/app.scss
@@ -382,6 +382,10 @@ a:hover {
   white-space: nowrap;
 }
 
+.has-no-background {
+  background: none !important;
+}
+
 .add-icon-button {
   height: 64px;
   width: 64px;
diff --git a/resources/js/components/SearchBox.vue b/resources/js/components/SearchBox.vue
index 9ba55cba..6b0c692c 100644
--- a/resources/js/components/SearchBox.vue
+++ b/resources/js/components/SearchBox.vue
@@ -1,6 +1,10 @@
 <script setup>
     const props = defineProps({
-        keyword: String
+        keyword: String,
+        hasNoBackground: {
+            type: Boolean,
+            default: false
+        },
     })
     const searchInput = ref(null)
 
@@ -34,6 +38,7 @@
                 :aria-label="$t('commons.search')"
                 :title="$t('commons.search')"
                 class="input is-rounded is-search"
+                :class="{ 'has-no-background': hasNoBackground }"
                 :value="keyword"
                 v-on:keyup="$emit('update:keyword', $event.target.value)">
             <span class="icon is-small is-right">