diff --git a/assets/css/theme.css b/assets/css/theme.css
index e6a1603b2239..4d6ecf1c5dfa 100644
--- a/assets/css/theme.css
+++ b/assets/css/theme.css
@@ -201,6 +201,7 @@
   --color-yellow-outlinedborder: rgba(235, 156, 0, 0.56);
   --color-yellow-selected: rgba(235, 156, 0, 0.16);
 
+  --topnav-button-bg: #4878f3;
   --tw-prose-code-bg: var(--color-gray-100);
   --tw-prose-code-bg-dark: var(--color-gray-800);
 }
diff --git a/assets/css/utilities.css b/assets/css/utilities.css
index 1923df36b4e8..d98821a4055e 100644
--- a/assets/css/utilities.css
+++ b/assets/css/utilities.css
@@ -249,10 +249,17 @@
 @utility breadcrumbs {
   font-size: 90%;
 }
+
 @utility topbar-button {
-  @apply text-white font-semibold min-h-10 px-2 bg-blue-300/50 rounded-md border-1 border-blue-300  inline-flex justify-center items-center gap-1.5 hover:bg-blue-400/70 hover:border-blue-200 transition-colors;
+  @apply text-center max-w-40 text-white font-semibold min-h-10 px-2 bg-(--topnav-button-bg) rounded-md border-1 border-blue-300;
+  @apply inline-flex justify-center items-center gap-1.5 hover:bg-blue-400 hover:border-blue-300 transition-colors;
+  svg {
+   font-size: 19px;
+  }
+}
+@utility topbar-button-clear {
+  @apply text-center text-white/95 font-semibold min-h-9 px-0   hover:text-white/85 transition-colors;
   svg {
    font-size: 19px;
   }
 }
-
diff --git a/assets/icons/headset.svg b/assets/icons/headset.svg
new file mode 100644
index 000000000000..700d4c546086
--- /dev/null
+++ b/assets/icons/headset.svg
@@ -0,0 +1,3 @@
+<svg width="10" height="12" viewBox="0 0 10 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path stroke="currentColor" stroke-width="0.5"  d="M8.55237 2.00563C8.09228 1.53094 7.54504 1.15362 6.94199 0.895266C6.33893 0.636909 5.69191 0.50259 5.03796 0.5H4.99998C3.6739 0.5 2.40214 1.03807 1.46446 1.99585C0.526782 2.95362 0 4.25264 0 5.60714V8.35714C0 8.66972 0.121565 8.96949 0.337953 9.19052C0.55434 9.41154 0.847824 9.53571 1.15384 9.53571H1.92307C2.22909 9.53571 2.52257 9.41154 2.73896 9.19052C2.95535 8.96949 3.07691 8.66972 3.07691 8.35714V6.39286C3.07691 6.08028 2.95535 5.78051 2.73896 5.55948C2.52257 5.33846 2.22909 5.21429 1.92307 5.21429H0.786536C0.86071 4.39515 1.16194 3.61457 1.65491 2.96405C2.14788 2.31353 2.81218 1.82002 3.56994 1.54135C4.3277 1.26268 5.14752 1.21041 5.93333 1.39066C6.71913 1.57091 7.43835 1.97621 8.0067 2.55906C8.70136 3.27225 9.12864 4.21204 9.21391 5.21429H8.07689C7.77088 5.21429 7.47739 5.33846 7.261 5.55948C7.04462 5.78051 6.92305 6.08028 6.92305 6.39286V8.35714C6.92305 8.66972 7.04462 8.96949 7.261 9.19052C7.47739 9.41154 7.77088 9.53571 8.07689 9.53571H9.23074C9.23074 9.84829 9.10917 10.1481 8.89278 10.3691C8.6764 10.5901 8.38291 10.7143 8.07689 10.7143H5.3846C5.28259 10.7143 5.18476 10.7557 5.11263 10.8294C5.0405 10.903 4.99998 11.003 4.99998 11.1071C4.99998 11.2113 5.0405 11.3113 5.11263 11.3849C5.18476 11.4586 5.28259 11.5 5.3846 11.5H8.07689C8.58692 11.5 9.07606 11.293 9.43671 10.9247C9.79736 10.5563 9.99996 10.0567 9.99996 9.53571V5.60714C10.0025 4.93908 9.87589 4.27707 9.62749 3.65906C9.37908 3.04104 9.01373 2.47917 8.55237 2.00563ZM1.92307 6C2.02508 6 2.1229 6.04139 2.19503 6.11506C2.26716 6.18874 2.30768 6.28866 2.30768 6.39286V8.35714C2.30768 8.46133 2.26716 8.56126 2.19503 8.63494C2.1229 8.70861 2.02508 8.75 1.92307 8.75H1.15384C1.05184 8.75 0.954008 8.70861 0.881879 8.63494C0.80975 8.56126 0.769228 8.46133 0.769228 8.35714V6H1.92307ZM8.07689 8.75C7.97489 8.75 7.87706 8.70861 7.80493 8.63494C7.7328 8.56126 7.69228 8.46133 7.69228 8.35714V6.39286C7.69228 6.28866 7.7328 6.18874 7.80493 6.11506C7.87706 6.04139 7.97489 6 8.07689 6H9.23074V8.75H8.07689Z"/>
+</svg>
diff --git a/assets/icons/moon.svg b/assets/icons/moon.svg
new file mode 100644
index 000000000000..0bc248ff5148
--- /dev/null
+++ b/assets/icons/moon.svg
@@ -0,0 +1,8 @@
+<svg width="1em" height="1em" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <!-- moon icon using path, stroke currentColor -->
+  <path d="M22 15.8442C20.6866 16.4382 19.2286 16.7688 17.6935 16.7688C11.9153 16.7688 7.23116 12.0847 7.23116 6.30654C7.23116 4.77135 7.5618 3.3134 8.15577 2C4.52576 3.64163 2 7.2947 2 11.5377C2 17.3159 6.68414 22 12.4623 22C16.7053 22 20.3584 19.4742 22 15.8442Z"
+    stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
+</svg>
+<rect width="24" height="24" fill="currentColor" fill-opacity="1"/>
+</g>
+</svg>
diff --git a/assets/icons/search.svg b/assets/icons/search.svg
index 8d3e225aa694..4f8a0b6c0178 100644
--- a/assets/icons/search.svg
+++ b/assets/icons/search.svg
@@ -1,8 +1,8 @@
 <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
-<mask id="mask0_206_64" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="1" y="1" width="16" height="16">
-<path d="M15.75 15.75L12.4875 12.4875M14.25 8.25C14.25 11.5637 11.5637 14.25 8.25 14.25C4.93629 14.25 2.25 11.5637 2.25 8.25C2.25 4.93629 4.93629 2.25 8.25 2.25C11.5637 2.25 14.25 4.93629 14.25 8.25Z" stroke="#6C7E9D" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-</mask>
-<g mask="url(#mask0_206_64)">
+  <!-- search icon using path, stroke currentColor -->
+  <path d="M15.75 15.75L12.4875 12.4875M14.25 8.25C14.25 11.5637 11.5637 14.25 8.25 14.25C4.93629 14.25 2.25 11.5637 2.25 8.25C2.25 4.93629 4.93629 2.25 8.25 2.25C11.5637 2.25 14.25 4.93629 14.25 8.25Z"
+    stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
+</svg>
 <rect width="24" height="24" fill="white" fill-opacity="0.85"/>
 </g>
 </svg>
diff --git a/assets/icons/sparkle.svg b/assets/icons/sparkle.svg
index aa93b15221b5..97ce7a10cbf9 100644
--- a/assets/icons/sparkle.svg
+++ b/assets/icons/sparkle.svg
@@ -1,8 +1,8 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<mask id="mask0_5432_1814" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="1" y="0" width="22" height="23">
-<path d="M18.5 7.84656V2.84656M5.5 20.8466V15.8466M16 5.34656H21M3 18.3466H8M6.5 1.84656L5.71554 3.41547C5.45005 3.94645 5.31731 4.21194 5.13997 4.442C4.98261 4.64615 4.79959 4.82917 4.59545 4.98653C4.36538 5.16387 4.0999 5.29661 3.56892 5.5621L2 6.34656L3.56892 7.13102C4.0999 7.39651 4.36538 7.52925 4.59545 7.70659C4.79959 7.86395 4.98261 8.04696 5.13997 8.25111C5.31731 8.48117 5.45005 8.74666 5.71554 9.27764L6.5 10.8466L7.28446 9.27764C7.54995 8.74666 7.68269 8.48117 7.86003 8.25111C8.01739 8.04696 8.20041 7.86395 8.40455 7.70659C8.63462 7.52925 8.9001 7.3965 9.43108 7.13102L11 6.34656L9.43108 5.5621C8.9001 5.29661 8.63462 5.16387 8.40455 4.98653C8.20041 4.82917 8.01739 4.64615 7.86003 4.442C7.68269 4.21194 7.54995 3.94645 7.28446 3.41547L6.5 1.84656ZM17 11.8466L16.0489 13.7488C15.7834 14.2798 15.6506 14.5453 15.4733 14.7753C15.3159 14.9795 15.1329 15.1625 14.9288 15.3199C14.6987 15.4972 14.4332 15.6299 13.9023 15.8954L12 16.8466L13.9023 17.7977C14.4332 18.0632 14.6987 18.1959 14.9288 18.3733C15.1329 18.5306 15.3159 18.7136 15.4733 18.9178C15.6506 19.1478 15.7834 19.4133 16.0489 19.9443L17 21.8466L17.9511 19.9443C18.2166 19.4133 18.3494 19.1478 18.5267 18.9178C18.6841 18.7136 18.8671 18.5306 19.0712 18.3733C19.3013 18.1959 19.5668 18.0632 20.0977 17.7977L22 16.8466L20.0977 15.8954C19.5668 15.6299 19.3013 15.4972 19.0712 15.3199C18.8671 15.1625 18.6841 14.9795 18.5267 14.7753C18.3494 14.5453 18.2166 14.2798 17.9511 13.7488L17 11.8466Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-</mask>
-<g mask="url(#mask0_5432_1814)">
+  <!-- sparkle icon using path, stroke currentColor -->
+  <path d="M18.5 7.84656V2.84656M5.5 20.8466V15.8466M16 5.34656H21M3 18.3466H8M6.5 1.84656L5.71554 3.41547C5.45005 3.94645 5.31731 4.21194 5.13997 4.442C4.98261 4.64615 4.79959 4.82917 4.59545 4.98653C4.36538 5.16387 4.0999 5.29661 3.56892 5.5621L2 6.34656L3.56892 7.13102C4.0999 7.39651 4.36538 7.52925 4.59545 7.70659C4.79959 7.86395 4.98261 8.04696 5.13997 8.25111C5.31731 8.48117 5.45005 8.74666 5.71554 9.27764L6.5 10.8466L7.28446 9.27764C7.54995 8.74666 7.68269 8.48117 7.86003 8.25111C8.01739 8.04696 8.20041 7.86395 8.40455 7.70659C8.63462 7.52925 8.9001 7.3965 9.43108 7.13102L11 6.34656L9.43108 5.5621C8.9001 5.29661 8.63462 5.16387 8.40455 4.98653C8.20041 4.82917 8.01739 4.64615 7.86003 4.442C7.68269 4.21194 7.54995 3.94645 7.28446 3.41547L6.5 1.84656ZM17 11.8466L16.0489 13.7488C15.7834 14.2798 15.6506 14.5453 15.4733 14.7753C15.3159 14.9795 15.1329 15.1625 14.9288 15.3199C14.6987 15.4972 14.4332 15.6299 13.9023 15.8954L12 16.8466L13.9023 17.7977C14.4332 18.0632 14.6987 18.1959 14.9288 18.3733C15.1329 18.5306 15.3159 18.7136 15.4733 18.9178C15.6506 19.1478 15.7834 19.4133 16.0489 19.9443L17 21.8466L17.9511 19.9443C18.2166 19.4133 18.3494 19.1478 18.5267 18.9178C18.6841 18.7136 18.8671 18.5306 19.0712 18.3733C19.3013 18.1959 19.5668 18.0632 20.0977 17.7977L22 16.8466L20.0977 15.8954C19.5668 15.6299 19.3013 15.4972 19.0712 15.3199C18.8671 15.1625 18.6841 14.9795 18.5267 14.7753C18.3494 14.5453 18.2166 14.2798 17.9511 13.7488L17 11.8466Z"
+    stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
+</svg>
 <rect width="24" height="24" fill="currentColor" fill-opacity="1"/>
 </g>
 </svg>
diff --git a/assets/icons/sun.svg b/assets/icons/sun.svg
new file mode 100644
index 000000000000..5eb18a1d1d7b
--- /dev/null
+++ b/assets/icons/sun.svg
@@ -0,0 +1,8 @@
+<svg width="1em" height="1em" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <!-- sun icon using path, stroke currentColor -->
+  <path d="M12 2V4M12 20V22M4 12H2M6.31412 6.31412L4.8999 4.8999M17.6859 6.31412L19.1001 4.8999M6.31412 17.69L4.8999 19.1042M17.6859 17.69L19.1001 19.1042M22 12H20M17 12C17 14.7614 14.7614 17 12 17C9.23858 17 7 14.7614 7 12C7 9.23858 9.23858 7 12 7C14.7614 7 17 9.23858 17 12Z"
+    stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
+</svg>
+<rect width="24" height="24" fill="currentColor" fill-opacity="1"/>
+</g>
+</svg>
diff --git a/hugo_stats.json b/hugo_stats.json
index a87826249e0d..a8bfbf7398f7 100644
--- a/hugo_stats.json
+++ b/hugo_stats.json
@@ -330,7 +330,6 @@
       "hidden",
       "hidden'",
       "highlight",
-      "hover:bg-blue",
       "hover:bg-blue-400",
       "hover:bg-blue-400/90",
       "hover:bg-blue-500",
@@ -338,7 +337,6 @@
       "hover:bg-gray-200",
       "hover:bg-gray-50",
       "hover:border-white/20",
-      "hover:dark:bg-blue-500",
       "hover:dark:bg-gray-800",
       "hover:dark:text-blue-400",
       "hover:dark:text-blue-700",
@@ -375,6 +373,7 @@
       "lg:grid-cols-3",
       "lg:grid-cols-4",
       "lg:hidden",
+      "lg:inline",
       "lg:no-underline",
       "lg:pb-2",
       "lg:scale-100",
@@ -446,8 +445,6 @@
       "object-cover",
       "open-kapa-widget",
       "openSUSE-and-SLES",
-      "order-1",
-      "order-2",
       "origin-bottom-right",
       "origin-top-right",
       "ot-sdk-show-settings",
@@ -563,14 +560,13 @@
       "top-16",
       "top-6",
       "topbar-button",
+      "topbar-button-clear",
       "transition",
       "transition-colors",
       "transition-transform",
       "truncate",
       "underline-offset-2",
-      "w-0",
       "w-2",
-      "w-32",
       "w-5",
       "w-65",
       "w-8",
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
index 7b06c790c819..66cdeeff550b 100644
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@@ -49,6 +49,40 @@
             >
             Back
           </button>
+          <!-- Top nav buttons appear here on sm width -->
+          <div class="flex flex-col gap-2 md:hidden mb-4">
+            <button
+              @click="open = false"
+              class="topbar-button open-kapa-widget w-full flex items-center gap-2"
+            >
+              <span>Ask&nbsp;AI</span>
+              <span class="icon-svg">
+                {{ partialCached "utils/svg.html" "/icons/sparkle.svg" }}
+              </span>
+            </button>
+            <div class="topbar-button w-full flex items-center gap-2" id="search-bar-container">
+               {{ partialCached "search-bar.html" "-" }}
+            </div>
+            {{ partial "contact-support-button.html" .}}
+            <button
+              aria-label="Theme switch"
+              id="theme-switch"
+              class="topbar-button flex items-center"
+              x-data="{ theme: localStorage.getItem('theme-preference') }"
+              x-init="$watch('theme', value => {
+                    localStorage.setItem('theme-preference', value);
+                    document.firstElementChild.className = value;
+                  })"
+              @click="theme = (theme === 'dark' ? 'light' : 'dark')"
+            >
+              <span class="icon-svg icon-sm dark:hidden"
+                >{{ partialCached "icon" "icons/sun.svg" "sun" }}
+              </span>
+              <span class="icon-svg icon-sm hidden dark:block">
+                {{ partialCached "icon" "icons/moon.svg" "moon" }}
+              </span>
+            </button>
+          </div>
           <!-- Actual Sidebar Content -->
           {{ block "left" . }}
             {{ partial "sidebar/mainnav.html" . }}
diff --git a/layouts/_default/search.html b/layouts/_default/search.html
index 5d170983660d..7df360e5781c 100644
--- a/layouts/_default/search.html
+++ b/layouts/_default/search.html
@@ -11,7 +11,7 @@ <h1 class="py-4">{{ .Title }}</h1>
         <input type="search" id="search-page-input"
           class="ring-3-gray-light-200 dark:ring-3-gray-dark-400 dark:bg-background-dark focus:ring-3-blue-light dark:focus:ring-3-blue-dark ring-3-[1.5px] w-full max-w-xl min-w-0 rounded-sm bg-white px-4 py-2 outline-hidden"
           placeholder="Search…" tabindex="0" />
-        <div class="admonition flex flex-row min-w-fit items-center w-0 gap-1">
+        <div class="admonition flex flex-row min-w-fit items-center gap-1">
           <p>Not finding what you're looking for? Try</p>
           <button onclick="askAI('search-page-input')" class="topbar-button bg-blue-400/95 border-blue-300 hover:bg-blue-400/90">
             <span>Ask&nbsp;AI</span>
@@ -19,7 +19,6 @@ <h1 class="py-4">{{ .Title }}</h1>
               {{ partial "utils/svg.html" "/icons/sparkle.svg" }}
             </span>
           </button>
-        </div>
       </div>
       <hr class="border-divider-light dark:border-divider-dark" />
       <div id="search-page-results">
diff --git a/layouts/partials/components/support-button.html b/layouts/partials/components/support-button.html
deleted file mode 100644
index cd6faacdbeab..000000000000
--- a/layouts/partials/components/support-button.html
+++ /dev/null
@@ -1,7 +0,0 @@
-<a
-  href="https://hub.docker.com/support/contact"
-  class="hover:bg-blue bg-blue z-50 flex items-center rounded-sm px-4 py-2 text-white dark:bg-blue-400 hover:dark:bg-blue-500"
-  aria-label="Contact support"
->
-  <span>Contact support</span>
-</a>
diff --git a/layouts/partials/contact-support-button.html b/layouts/partials/contact-support-button.html
new file mode 100644
index 000000000000..ff430c25fc1b
--- /dev/null
+++ b/layouts/partials/contact-support-button.html
@@ -0,0 +1,12 @@
+{{ $class := "" }}
+{{ if eq . "notext" }}
+  {{ $class = "hidden lg:inline" }}
+{{ end }}
+<a class="topbar-button w-full flex items-center gap-2"
+   href="https://hub.docker.com/support/contact"
+   aria-label="Contact support">
+    <span class="{{ $class }}">Contact support</span>
+    <span class="icon-svg icon-sm">
+      {{ partial "utils/svg.html" "/icons/headset.svg" }}
+    </span>
+</a>
diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html
index 39aec22fd1fe..825af7a8035d 100644
--- a/layouts/partials/footer.html
+++ b/layouts/partials/footer.html
@@ -1,8 +1,4 @@
-<div
-  class="relative z-10 flex justify-center bg-gray-100 px-4 py-8 dark:bg-gray-900"
->
-  {{ partialCached "components/support-button.html" . }}
-</div>
+
 <div class="flex justify-center bg-gray-100 px-4 pt-10 pb-20 dark:bg-gray-900">
   <div class="flex w-full max-w-[840px] flex-col gap-10">
     <div class="flex flex-col items-center justify-evenly gap-4 md:flex-row">
@@ -95,27 +91,6 @@
       <button type="button" id="ot-sdk-btn" class="ot-sdk-show-settings">
         Cookies Settings
       </button>
-      <div class="flex items-center gap-2">
-        <span>Theme:</span>
-        <button
-          aria-label="Theme switch"
-          id="theme-switch"
-          class="bg-blue rounded-sm px-4 py-1 text-white transition hover:bg-blue-400 dark:bg-blue-400 dark:hover:bg-blue-500"
-          x-data="{ theme: localStorage.getItem('theme-preference') }"
-          x-init="$watch('theme', value => {
-                localStorage.setItem('theme-preference', value);
-                document.firstElementChild.className = value;
-              })"
-          @click="theme = (theme === 'dark' ? 'light' : 'dark')"
-        >
-          <span class="icon-svg icon-sm dark:hidden"
-            >Light {{ partialCached "icon" "light_mode" "light_mode" }}</span
-          >
-          <span class="icon-svg icon-sm hidden dark:block"
-            >Dark {{ partialCached "icon" "dark_mode" "dark_mode" }}</span
-          >
-        </button>
-      </div>
     </div>
   </div>
 </div>
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
index 7f4636eef7a1..0a8bc3904532 100644
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@@ -45,19 +45,51 @@
         </ul>
       </nav>
     </div>
-    <div id="buttons" class="flex min-w-0 items-center justify-end gap-4 flex-shrink-0">
-      <button
-        @click="open = false"
-        class="topbar-button open-kapa-widget"
-      >
-        <span>Ask&nbsp;AI</span>
-        <span class="icon-svg-stroke">
-          {{ partial "utils/svg.html" "/icons/sparkle.svg" }}
-        </span>
-      </button>
-      <div class="topbar-button" id="search-bar-container">
-         {{ partialCached "search-bar.html" "-" }}
+    <div id="buttons" class="flex min-w-0 items-center justify-end flex-shrink-0">
+      <!-- Hide on small screens, show on md+ -->
+      <div class="hidden md:flex items-center gap-3">
+        <button
+          @click="open = false"
+          class="topbar-button open-kapa-widget"
+        >
+          <span class="hidden lg:inline">Ask&nbsp;AI</span>
+          <span class="icon-svg">
+            {{ partialCached "utils/svg.html" "/icons/sparkle.svg" }}
+          </span>
+        </button>
+
+        <div class="topbar-button" id="search-bar-container">
+           {{ partialCached "search-bar.html" "-" }}
+        </div>
+
+        {{ partial "contact-support-button.html" "notext" }}
+
+        <button
+          aria-label="Theme switch"
+          id="theme-switch"
+          class="topbar-button-clear"
+          x-data="{ theme: localStorage.getItem('theme-preference') }"
+          x-init="$watch('theme', value => {
+                localStorage.setItem('theme-preference', value);
+                document.firstElementChild.className = value;
+              })"
+          @click="theme = (theme === 'dark' ? 'light' : 'dark')"
+        >
+          <span class="icon-svg icon-sm dark:hidden"
+            >{{ partialCached "icon" "icons/sun.svg" "sun" }}
+          </span>
+          <span class="icon-svg icon-sm hidden dark:block">
+            {{ partialCached "icon" "icons/moon.svg" "moon" }}
+          </span>
+        </button>
+      </div>
+      <!-- On sm screens, hide all buttons here (they will be in sidebar) -->
+    </div>
+  </div>
+</header>
+        </button>
       </div>
+      <!-- On sm screens, hide all buttons here (they will be in sidebar) -->
     </div>
   </div>
 </header>
diff --git a/layouts/partials/search-bar.html b/layouts/partials/search-bar.html
index 7dd5a5c6b6d5..01e9a15baf21 100644
--- a/layouts/partials/search-bar.html
+++ b/layouts/partials/search-bar.html
@@ -1,129 +1,132 @@
 <div
-  x-ref="searchBarRef"
-  x-data="{ open: false }"
-  @click.outside="open = false;"
-  @keyup.escape.window="open = false"
-  id="search-bar"
-  class="relative w-32 items-center flex"
->
-  <input
-    x-ref="searchBarInput"
-    type="search"
-    id="search-bar-input"
-    placeholder="Search"
-    @focus="open = true;"
-    @keyup.enter.prevent="window.location.href = '/search/?q=' + $event.target.value;"
-    @keyup.escape.prevent="open = false;"
-    @keydown.window="(e) => {
-          switch(e.key) {
-          case 'k':
-            if (e.metaKey || e.ctrlKey) {
-              e.preventDefault();
-              $el.focus();
+    x-ref="searchBarRef"
+    x-data="{ open: false }"
+    @click.outside="open = false;"
+    @keyup.escape.window="open = false"
+    id="search-bar"
+    class="relative items-center flex w-full max-w-full overflow-x-auto"
+  >
+    <input
+      class="border-none outline-none focus:outline-none min-w-0"
+      x-ref="searchBarInput"
+      type="search"
+      id="search-bar-input"
+      placeholder="Search"
+      @focus="open = true;"
+      @keyup.enter.prevent="window.location.href = '/search/?q=' + $event.target.value;"
+      @keyup.escape.prevent="open = false;"
+      @keydown.window="(e) => {
+            switch(e.key) {
+            case 'k':
+              if (e.metaKey || e.ctrlKey) {
+                e.preventDefault();
+                $el.focus();
+              }
+              break;
             }
-            break;
-          }
-        }"
-    class="flex-grow order-1 min-w-0 border-none outline-none focus:outline-none"
-    tabindex="0"
-  />
-  <div id="search-bar-icon" class="order-2">
-    <span class="icon-svg-stroke">
-          {{ partial "utils/svg.html" "/icons/search.svg" }}
-        </span>
-  </div>
-  <div id="search-bar-dropdown" x-show="open" x-cloak x-ref="dropdown"
-    class="font-medium text-gray-400 dark:text-gray-200 bg-gray-50 dark:bg-gray-900 rounded-sm mt-4 border-1 border-gray-100 dark:border-gray-700 fixed z-[999] w-[500px] p-6 shadow-md"
-    x-effect="if (open) {
-      const containerRect = document.getElementById('search-bar-container').getBoundingClientRect();
-      const rect = $refs.searchBarRef.getBoundingClientRect();
-      $el.style.top = (rect.bottom + window.scrollY - 2) + 'px';
-      $el.style.right = (window.innerWidth - containerRect.right - 15) + 'px';
-    }">
-    <div id="search-bar-results">
-      {{- $emptyState := `<div>Start typing to search or try <button onclick="askAI('search-bar-input')" class="link">Ask
-          AI</button>.</div>` }}
-      {{- $emptyState | safe.HTML }}
-      <!-- results -->
+          }"
+      tabindex="0"
+    />
+    <div id="search-bar-icon">
+      <span class="icon-svg-stroke">
+            {{ partial "utils/svg.html" "/icons/search.svg" }}
+          </span>
     </div>
-  </div>
-  <script type="module">
-    window.addEventListener("load", async function () {
-      const pagefind = await import("/pagefind/pagefind.js");
-      await pagefind.options({
-        ranking: {
-          termFrequency: 0.2,
-          pageLength: 0.75,
-          termSaturation: 1.4,
-          termSimilarity: 6.0
-        },
-      });
+    <div id="search-bar-dropdown"
+      x-show="open"
+      x-cloak
+      x-ref="dropdown"
+      class="hidden md:block font-medium text-gray-400 dark:text-gray-200 bg-gray-50 dark:bg-gray-900 rounded-sm mt-4 border-1 border-gray-100 dark:border-gray-700 fixed z-[999] w-[500px] p-6 shadow-md"
+      x-effect="if (open) {
+        const containerRect = document.getElementById('search-bar-container').getBoundingClientRect();
+        const rect = $refs.searchBarRef.getBoundingClientRect();
+        $el.style.top = (rect.bottom + window.scrollY - 2) + 'px';
+        $el.style.right = (window.innerWidth - containerRect.right - 15) + 'px';
+      }">
+      <div id="search-bar-results">
+        {{- $emptyState := `<div>Start typing to search or try <button onclick="askAI('search-bar-input')" class="link">Ask
+            AI</button>.</div>` }}
+        {{- $emptyState | safe.HTML }}
+        <!-- results -->
+      </div>
+    </div>
+    <script type="module">
+      window.addEventListener("load", async function () {
+        const pagefind = await import("/pagefind/pagefind.js");
+        await pagefind.options({
+          ranking: {
+            termFrequency: 0.2,
+            pageLength: 0.75,
+            termSaturation: 1.4,
+            termSimilarity: 6.0
+          },
+        });
 
-      const searchBarInput = document.querySelector("#search-bar-input");
-      const searchBarResults = document.querySelector(
-        "#search-bar-results",
-      );
+        const searchBarInput = document.querySelector("#search-bar-input");
+        const searchBarResults = document.querySelector(
+          "#search-bar-results",
+        );
 
-      async function search(e) {
-        const query = e.target.value;
-        if (query === "") {
-          searchBarResults.innerHTML = `{{ $emptyState | safe.HTML }}`;
-          return;
-        }
-        const search = await pagefind.debouncedSearch(query);
-        if (search === null) {
-          return;
-        } else {
-          const resultsLength = search.results.length
-          const resultsData = await Promise.all(search.results.slice(0, 5).map(r => r.data()));
-          const results = resultsData.map((item, index) => ({...item, index: index + 1}));
-
-          if (query) {
-            searchBarResults.classList.remove("hidden");
-          } else {
-            searchBarResults.classList.add("hidden");
+        async function search(e) {
+          const query = e.target.value;
+          if (query === "") {
+            searchBarResults.innerHTML = `{{ $emptyState | safe.HTML }}`;
+            return;
           }
+          const search = await pagefind.debouncedSearch(query);
+          if (search === null) {
+            return;
+          } else {
+            const resultsLength = search.results.length
+            const resultsData = await Promise.all(search.results.slice(0, 5).map(r => r.data()));
+            const results = resultsData.map((item, index) => ({...item, index: index + 1}));
 
-          let resultsHTML = `<div class="p-2 text-gray-400 dark:text-gray-500">${resultsLength} results</div>`;
-          resultsHTML += results
-            .map((item) => {
-              return `<div class="p-2">
-              <div class="flex flex-col">
-                <a class="link" href="${item.url}" data-query="${query}" data-index="${item.index}">${item.meta.title}</a>
-                <p class="text-black dark:text-white overflow-hidden">…${item.excerpt}…</p>
-              </div>
-              </div>`;
-            })
-            .join("");
-          if (resultsLength > 5) {
-            resultsHTML += `<div class="w-fit ml-auto px-4 py-2"><a href="/search/?q=${query}" class="link">Show all results</a></div>`;
-          }
+            if (query) {
+              searchBarResults.classList.remove("hidden");
+            } else {
+              searchBarResults.classList.add("hidden");
+            }
+
+            let resultsHTML = `<div class="p-2 text-gray-400 dark:text-gray-500">${resultsLength} results</div>`;
+            resultsHTML += results
+              .map((item) => {
+                return `<div class="p-2">
+                <div class="flex flex-col">
+                  <a class="link" href="${item.url}" data-query="${query}" data-index="${item.index}">${item.meta.title}</a>
+                  <p class="text-black dark:text-white overflow-hidden">…${item.excerpt}…</p>
+                </div>
+                </div>`;
+              })
+              .join("");
+            if (resultsLength > 5) {
+              resultsHTML += `<div class="w-fit ml-auto px-4 py-2"><a href="/search/?q=${query}" class="link">Show all results</a></div>`;
+            }
 
-          searchBarResults.innerHTML = resultsHTML;
+            searchBarResults.innerHTML = resultsHTML;
+          }
         }
-      }
 
-      searchBarInput.addEventListener("input", search);
+        searchBarInput.addEventListener("input", search);
 
-      // Event delegation for tracking link clicks
-      if (window.heap !== undefined) {
-        searchBarResults.addEventListener('click', function (event) {
-          if (event.target.tagName === 'A' && event.target.closest('.link')) {
-            const searchQuery = event.target.getAttribute('data-query');
-            const resultIndex = event.target.getAttribute('data-index');
-            const url = new URL(event.target.href);
-            const properties = {
-              docs_search_target_path: url.pathname,
-              docs_search_target_title: event.target.textContent,
-              docs_search_query_text: searchQuery,
-              docs_search_target_index: resultIndex,
-              docs_search_source_path: window.location.pathname,
-              docs_search_source_title: document.title,
-            };
-            heap.track("Docs - Search - Click - Result Link", properties);
-          }
-        });
-      }
-    });
-  </script>
+        // Event delegation for tracking link clicks
+        if (window.heap !== undefined) {
+          searchBarResults.addEventListener('click', function (event) {
+            if (event.target.tagName === 'A' && event.target.closest('.link')) {
+              const searchQuery = event.target.getAttribute('data-query');
+              const resultIndex = event.target.getAttribute('data-index');
+              const url = new URL(event.target.href);
+              const properties = {
+                docs_search_target_path: url.pathname,
+                docs_search_target_title: event.target.textContent,
+                docs_search_query_text: searchQuery,
+                docs_search_target_index: resultIndex,
+                docs_search_source_path: window.location.pathname,
+                docs_search_source_title: document.title,
+              };
+              heap.track("Docs - Search - Click - Result Link", properties);
+            }
+          });
+        }
+      });
+    </script>
 </div>