diff --git a/app/assets/bundle/trestle/search.css b/app/assets/bundle/trestle/search.css
index 23717c7..b144b23 100644
--- a/app/assets/bundle/trestle/search.css
+++ b/app/assets/bundle/trestle/search.css
@@ -1 +1 @@
-.searchbox{margin-right:auto;max-width:30em;width:100%}.searchbox .input-group{background:#fff;border:1px solid #ccc;border-radius:50rem}.searchbox .form-control,.searchbox .input-group-text{background:transparent;border:0}.searchbox .form-control{box-shadow:none;padding-left:0}.searchbox .form-control::-webkit-search-cancel-button{display:none}.searchbox .clear-search{color:#555;font-size:1.2rem;padding:.35rem;position:absolute;right:.75rem;z-index:5}.searchbox .clear-search:focus,.searchbox .clear-search:hover{color:#333}
\ No newline at end of file
+.searchbox{margin-right:auto;max-width:30em;width:100%}.searchbox .input-group{background:#fff;border:1px solid #ccc;border-radius:50rem}.searchbox .form-control,.searchbox .input-group-text{background:transparent;border:0}.searchbox .form-control{box-shadow:none;padding-left:0}.searchbox .form-control::-webkit-search-cancel-button{display:none}.searchbox .btn-clear-search{--bs-btn-padding-y:0;--bs-btn-font-size:1.325rem;--bs-btn-color:#555;--bs-btn-hover-color:#333}@media(min-width:576px){.searchbox .btn-clear-search{--bs-btn-font-size:1.25rem}}
\ No newline at end of file
diff --git a/app/views/trestle/search/_search.html.erb b/app/views/trestle/search/_search.html.erb
index 1f2316b..0b38544 100644
--- a/app/views/trestle/search/_search.html.erb
+++ b/app/views/trestle/search/_search.html.erb
@@ -1,9 +1,11 @@
 <div class="searchbox">
   <%= form_tag admin.path, method: :get do %>
     <div class="input-group">
-      <span class="input-group-text"><icon class="fa fa-search"></icon></span>
-      <%= link_to icon("fa fa-times"), admin.path, class: "clear-search" if params[:q].present? %>
+      <%= label_tag :q, icon("fas fa-search"), class: "input-group-text" %>
+
       <%= search_field_tag :q, params[:q], class: "form-control", autocomplete: "off", placeholder: admin.t("search.placeholder", default: "Search") %>
+
+      <%= link_to icon("fas fa-times"), admin.path, class: "btn btn-clear-search" if params[:q].present? %>
     </div>
   <% end %>
 </div>
diff --git a/frontend/index.scss b/frontend/index.scss
index 7ffb9cb..2e4ce5f 100644
--- a/frontend/index.scss
+++ b/frontend/index.scss
@@ -1,3 +1,5 @@
+@import "~trestle/frontend/css/support";
+
 .searchbox {
   width: 100%;
   max-width: 30em;
@@ -27,16 +29,14 @@
     }
   }
 
-  .clear-search {
-    position: absolute;
-    right: 0.75rem;
-    z-index: 5;
-    color: #555;
-    font-size: 1.2rem;
-    padding: 0.35rem;
+  .btn-clear-search {
+    --bs-btn-padding-y: 0;
+    --bs-btn-font-size: 1.325rem;
+    --bs-btn-color: #555;
+    --bs-btn-hover-color: #333;
 
-    &:hover, &:focus {
-      color: #333;
+    @include media-breakpoint-up(sm) {
+      --bs-btn-font-size: 1.25rem;
     }
   }
 }