diff --git a/app/assets/images/close.svg b/app/assets/images/close.svg
index 878343d21..c3066ce69 100644
--- a/app/assets/images/close.svg
+++ b/app/assets/images/close.svg
@@ -1 +1 @@
-<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m14.3 12.179a.25.25 0 0 1 0-.354l9.263-9.262a1.5 1.5 0 0 0 -2.124-2.121l-9.262 9.258a.25.25 0 0 1 -.354 0l-9.262-9.258a1.5 1.5 0 0 0 -2.122 2.121l9.261 9.262a.25.25 0 0 1 0 .354l-9.261 9.263a1.5 1.5 0 0 0 2.122 2.121l9.262-9.263a.25.25 0 0 1 .354 0l9.262 9.263a1.5 1.5 0 0 0 2.122-2.121z"/></svg>
\ No newline at end of file
+<svg fill="none" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="m18.9396 2.93934c.5858-.58572 1.5353-.58576 2.1211 0 .5857.58577.5857 1.53532 0 2.12109l-6.9395 6.93947 6.9395 6.9394c.5856.5858.5857 1.5354 0 2.1211-.5858.5857-1.5353.5856-2.1211 0l-6.9395-6.9394-6.93942 6.9394c-.58577.5858-1.5353.5858-2.1211 0-.58578-.5858-.58578-1.5353 0-2.1211l6.93946-6.9394-6.93946-6.93947c-.58577-.58577-.58574-1.5353 0-2.12109.58579-.58579 1.53531-.58579 2.1211 0l6.93942 6.93945z" fill="#000"/></svg>
\ No newline at end of file
diff --git a/app/assets/stylesheets/bar.css b/app/assets/stylesheets/bar.css
index 8370ef900..be5eb6a2e 100644
--- a/app/assets/stylesheets/bar.css
+++ b/app/assets/stylesheets/bar.css
@@ -3,6 +3,7 @@
     --row-gap: 0.2lh;
 
     background-color: var(--color-terminal-bg);
+    block-size: var(--footer-height);
     color: var(--color-terminal-text);
     display: flex;
     flex-direction: column;
@@ -17,14 +18,18 @@
     @media (prefers-color-scheme: dark) {
       border-block: 1px solid var(--color-ink-lighter);
     }
+
+    &:has(.bar__placeholder[hidden]) {
+      padding-inline: 1ch;
+    }
   }
 
   .bar__input {
-    transform: translateX(50%);
+    transform: translateY(50%);
     transition: transform 350ms cubic-bezier(0.25, 1.25, 0.5, 1);
 
     .bar:has(.bar__placeholder[hidden]) & {
-      transform: translateX(0);
+      transform: translateY(0);
     }
   }
 
diff --git a/app/assets/stylesheets/buttons.css b/app/assets/stylesheets/buttons.css
index b8a30c7f6..11e52668c 100644
--- a/app/assets/stylesheets/buttons.css
+++ b/app/assets/stylesheets/buttons.css
@@ -64,6 +64,7 @@
   .btn[aria-label]:where(:has(.icon)),
   .btn:where(:has(.for-screen-reader):has(.icon)) {
     --btn-padding: 0;
+    --icon-size: 75%;
 
     aspect-ratio: 1;
     block-size: var(--btn-size);
diff --git a/app/assets/stylesheets/search.css b/app/assets/stylesheets/search.css
index 49e466b39..4ce4fc214 100644
--- a/app/assets/stylesheets/search.css
+++ b/app/assets/stylesheets/search.css
@@ -16,7 +16,7 @@
   /* Form
   /* ------------------------------------------------------------------------ */
 
-  .search__form-input {
+  .search__input {
     --clear-icon-size: 1em;
     --focus-ring-size: 0;
     --input-border-color: var(--color-ink-light);
@@ -28,26 +28,22 @@
     position: relative;
 
     &::-webkit-search-cancel-button {
-      --clear-icon-size: 0.66rem;
+      display: none;
+    }
+  }
 
-      -webkit-appearance: none;
-      appearance: none;
-      background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m14.3 12.179a.25.25 0 0 1 0-.354l9.263-9.262a1.5 1.5 0 0 0 -2.124-2.121l-9.262 9.258a.25.25 0 0 1 -.354 0l-9.262-9.258a1.5 1.5 0 0 0 -2.122 2.121l9.261 9.262a.25.25 0 0 1 0 .354l-9.261 9.263a1.5 1.5 0 0 0 2.122 2.121l9.262-9.263a.25.25 0 0 1 .354 0l9.262 9.263a1.5 1.5 0 0 0 2.122-2.121z" fill="%23000"/></svg>');
-      background-repeat: no-repeat;
-      background-size: var(--clear-icon-size);
-      block-size: var(--clear-icon-size);
-      cursor: pointer;
-      inline-size: var(--clear-icon-size);
-      inset: 50% 0 auto auto;
-      position: absolute;
-      translate: 0 -50%;
+  .search__reset {
+    --btn-background: var(--color-terminal-bg);
+    --btn-size: 1.25lh;
 
-      @media (prefers-color-scheme: dark) {
-        background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m14.3 12.179a.25.25 0 0 1 0-.354l9.263-9.262a1.5 1.5 0 0 0 -2.124-2.121l-9.262 9.258a.25.25 0 0 1 -.354 0l-9.262-9.258a1.5 1.5 0 0 0 -2.122 2.121l9.261 9.262a.25.25 0 0 1 0 .354l-9.261 9.263a1.5 1.5 0 0 0 2.122 2.121l9.262-9.263a.25.25 0 0 1 .354 0l9.262 9.263a1.5 1.5 0 0 0 2.122-2.121z" fill="%23fff"/></svg>');
+    @media (min-width: 800px) {
+      .search__input:placeholder-shown ~ & {
+        opacity: 0;
       }
     }
   }
 
+
   /* Content
   /* ------------------------------------------------------------------------ */
 
diff --git a/app/javascript/controllers/bar_controller.js b/app/javascript/controllers/bar_controller.js
index 5ceed089c..31fc11e3f 100644
--- a/app/javascript/controllers/bar_controller.js
+++ b/app/javascript/controllers/bar_controller.js
@@ -18,6 +18,7 @@ export default class extends Controller {
     this.dialogOutlet.close()
     this.#clearTurboFrame()
 
+    this.searchInputTarget.querySelector("input").value = ""
     this.#showItem(this.buttonsContainerTarget)
     this.#hideItem(this.searchInputTarget)
     if (this.hasAskInputTarget) {
diff --git a/app/views/searches/_form.html.erb b/app/views/searches/_form.html.erb
index a0f8b3448..bc2c9cb4f 100644
--- a/app/views/searches/_form.html.erb
+++ b/app/views/searches/_form.html.erb
@@ -1,11 +1,15 @@
 <%= form_with url: search_path, method: :get, class: "search__form flex align-center justify-center gap-half", data: { turbo_frame: "bar-content" } do |form| %>
   <%= form.label :q, "Search Fizzy", class: "font-weight-black txt-nowrap" %>
   <%= text_field_tag :q, query_terms,
-        class: "search__form-input input",
+        class: "search__input input",
         type: "search",
         placeholder: "Find something…",
         autocomplete: "off",
         autofocus: true,
         data: {
           action: "keydown.enter->bar#showModalAndSubmit keydown.esc->bar#reset" } %>
+  <button class="search__reset btn btn--circle borderless" data-action="bar#reset">
+    <%= icon_tag "close" %>
+    <span class="for-screen-reader">Close search</span>
+  </button>
 <% end %>