diff --git a/public/css/components/searchbar/searchbar.css b/public/css/components/searchbar/searchbar.css
index dfb222c2a..41bc6fa8f 100644
--- a/public/css/components/searchbar/searchbar.css
+++ b/public/css/components/searchbar/searchbar.css
@@ -27,6 +27,12 @@
 	z-index: 5; /* same as bootstrap .input-group > .form-control:focus */
 }
 
+.searchbar_setting_btn {
+	--bs-btn-color: var(--bs-body-color);
+	--bs-btn-bg: var(--bs-tertiary-bg);
+	--bs-btn-border-color: var(--bs-border-color);
+}
+
 
 .searchbar_searchbox.open {
 	z-index: 10000;
diff --git a/public/js/components/searchbar/searchbar.js b/public/js/components/searchbar/searchbar.js
index 18d596cef..c828182f0 100644
--- a/public/js/components/searchbar/searchbar.js
+++ b/public/js/components/searchbar/searchbar.js
@@ -105,19 +105,19 @@ export default {
 				>
 					<i class="fas fa-close"></i>
 				</button>
-                <span
+                <button
                     data-bs-toggle="collapse"
                     data-bs-target="#searchSettings"
                     aria-expanded="false"
                     aria-controls="searchSettings"
                     ref="settingsbutton"
-                    class="input-group-text"
+                    class="searchbar_setting_btn btn btn-secondary"
                     type="button"
                     :title="$p.t('search/button_filter_label')"
                     :aria-label="$p.t('search/button_filter_label')"
                 >
                     <i class="fas fa-cog"></i>
-                </span>
+                </button>
             </div>
 
             <div v-show="showresult"