diff --git a/dist/app.css b/dist/app.css
index ee5862d..34ef8dc 100644
--- a/dist/app.css
+++ b/dist/app.css
@@ -12335,6 +12335,11 @@ input, label, textarea {
   align-items: center;
   gap: 1rem;
 }
+@media (max-width: 575.98px) {
+  .top-bar a.account-button {
+    gap: 0.5rem;
+  }
+}
 
 .main-nav {
   padding: 2rem 0;
diff --git a/dist/mix-manifest.json b/dist/mix-manifest.json
index f4c4038..6e1372d 100644
--- a/dist/mix-manifest.json
+++ b/dist/mix-manifest.json
@@ -1,4 +1,4 @@
 {
     "/app.js": "/app.js?id=8af0c9c0d989b79afe124f8138dc1a63",
-    "/app.css": "/app.css?id=9c6c128de14d4fb5a3e1c5ce08e8ba82"
+    "/app.css": "/app.css?id=d8bec67f6e619178d3aafac5d20b9855"
 }
diff --git a/src/scss/header.scss b/src/scss/header.scss
index 9c1a5cf..791450b 100644
--- a/src/scss/header.scss
+++ b/src/scss/header.scss
@@ -22,6 +22,10 @@
         display: flex;
         align-items: center;
         gap: 1rem;
+
+        @include media-breakpoint-down(sm) {
+            gap: 0.5rem;
+        }
     }
 }
 
diff --git a/tpl/header.tpl b/tpl/header.tpl
index 677c1a7..79a43ca 100644
--- a/tpl/header.tpl
+++ b/tpl/header.tpl
@@ -19,7 +19,7 @@
     <div class="container">
         <div class="row">
             <div class="col">
-                <div class="d-flex gap-5 justify-content-end">
+                <div class="d-flex gap-3 gap-md-5 justify-content-end align-items-center">
                     <form action="/">
                         <input type="text" name="s" placeholder="What are you searching for?" value="{{ searchTerm }}" />
                     </form>