diff --git a/apps/docs/components/Navigation/NavigationMenu/TopNavBarRef.tsx b/apps/docs/components/Navigation/NavigationMenu/TopNavBarRef.tsx
index c69c3ce2923..2fd9b545aa8 100644
--- a/apps/docs/components/Navigation/NavigationMenu/TopNavBarRef.tsx
+++ b/apps/docs/components/Navigation/NavigationMenu/TopNavBarRef.tsx
@@ -89,17 +89,7 @@ const TopNavBarRef: FC = () => {
         </div>
 
         <div className="flex items-center gap-6">
-          <div className="flex md:hidden cursor-pointer">
-            <Image
-              onClick={openClippy}
-              width={26}
-              height={29}
-              src={isDarkMode ? clippyImageDark : clippyImage}
-              alt="Clippy"
-            />
-          </div>
-
-          <SearchButton className="md:w-full lg:w-96">
+          <SearchButton className="md:w-full lg:w-96 order-2 lg:order-1">
             <div
               className="
               flex
@@ -127,6 +117,16 @@ const TopNavBarRef: FC = () => {
               </div>
             </div>
           </SearchButton>
+
+          <div className="flex cursor-pointer order-1 lg:order-2">
+            <Image
+              onClick={openClippy}
+              width={26}
+              height={29}
+              src={isDarkMode ? clippyImageDark : clippyImage}
+              alt="Clippy"
+            />
+          </div>
         </div>
         <div className="hidden lg:flex grow items-center justify-end gap-3">
           <Button