diff --git a/.junie/mcp/mcp.json b/.junie/mcp/mcp.json
index 7f63ff3c..0fd7d4ef 100644
--- a/.junie/mcp/mcp.json
+++ b/.junie/mcp/mcp.json
@@ -1,11 +1,8 @@
 {
     "mcpServers": {
         "laravel-boost": {
-            "command": "/usr/bin/php8.4",
-            "args": [
-                "/home/hassan/code/nativephp.com/artisan",
-                "boost:mcp"
-            ]
+            "command": "php",
+            "args": ["./artisan", "boost:mcp"]
         }
     }
-}
\ No newline at end of file
+}
diff --git a/resources/css/docsearch.css b/resources/css/docsearch.css
index d4aa9f96..513bc8c3 100644
--- a/resources/css/docsearch.css
+++ b/resources/css/docsearch.css
@@ -11,7 +11,7 @@
 }
 
 .DocSearch-Button {
-    @apply m-0 flex items-center rounded-full bg-gray-50/50 font-normal ring-1 ring-slate-600/30 transition duration-300 ease-out ring-inset dark:bg-black/30;
+    @apply m-0 flex h-10 items-center rounded-full bg-gray-50/50 font-normal ring-1 ring-slate-600/30 transition duration-300 ease-out ring-inset min-[1024px]:h-9 dark:bg-black/30;
 }
 
 .DocSearch-Button:hover {
@@ -29,13 +29,17 @@
 }
 
 .DocSearch-Button-Placeholder {
-    @apply px-1 text-sm text-black/60 transition duration-300 xl:pr-5 dark:text-white/60;
+    @apply pr-2 pl-1 text-sm text-black/60 transition duration-300 xl:pr-5 dark:text-white/60;
 }
 
 .DocSearch-Button-Keys {
     @apply mt-1 ml-1 hidden min-w-[auto] text-sm leading-none sm:flex;
 }
 
+.DocSearch-Button-Placeholder {
+    @apply inline!;
+}
+
 .DocSearch-Button-Key {
     background: none;
     box-shadow: none;
diff --git a/resources/js/app.js b/resources/js/app.js
index e6d7b49a..fcd34386 100644
--- a/resources/js/app.js
+++ b/resources/js/app.js
@@ -119,6 +119,15 @@ docsearch({
     apiKey: '9be495a1aaf367b47c873d30a8e7ccf5',
     indexName: 'nativephp',
     insights: true,
-    container: '#docsearch',
+    container: '#docsearch-desktop',
+    debug: false,
+})
+
+docsearch({
+    appId: 'ZNII9QZ8WI',
+    apiKey: '9be495a1aaf367b47c873d30a8e7ccf5',
+    indexName: 'nativephp',
+    insights: true,
+    container: '#docsearch-mobile',
     debug: false,
 })
diff --git a/resources/views/components/navbar/mobile-menu.blade.php b/resources/views/components/navbar/mobile-menu.blade.php
index 1703fb0c..274cf6dd 100644
--- a/resources/views/components/navbar/mobile-menu.blade.php
+++ b/resources/views/components/navbar/mobile-menu.blade.php
@@ -68,11 +68,11 @@ class="-ml-2.5 h-5 w-0.5 -rotate-45 rounded-full bg-current transition duration-
         role="dialog"
         aria-modal="true"
         aria-label="Site menu"
-        class="fixed top-21 right-3 bottom-3.5 left-3 h-auto w-auto origin-top -translate-y-2 scale-y-90 overflow-y-scroll overscroll-contain rounded-2xl bg-gray-100/50 opacity-0 ring-1 ring-gray-200/80 backdrop-blur-2xl transition transition-discrete duration-300 open:translate-y-0 open:scale-y-100 open:opacity-100 min-[500px]:right-3.5 min-[500px]:left-3.5 dark:bg-black/50 dark:text-white dark:ring-gray-700/70 starting:open:-translate-y-2 starting:open:scale-y-0 starting:open:opacity-0"
+        class="fixed top-20 right-3 bottom-3.5 left-3 w-auto origin-top -translate-y-2 scale-y-90 overflow-y-scroll overscroll-contain rounded-2xl bg-gray-200/50 opacity-0 ring-1 ring-gray-200/80 backdrop-blur-2xl transition transition-discrete duration-300 open:translate-y-0 open:scale-y-100 open:opacity-100 min-[500px]:right-3.5 min-[500px]:left-3.5 dark:bg-black/50 dark:text-white dark:ring-gray-700/70 starting:open:-translate-y-2 starting:open:scale-y-0 starting:open:opacity-0"
     >
-        <div class="flex h-full flex-col overflow-hidden p-6">
+        <div class="@container flex flex-col overflow-hidden px-6 pt-4 pb-6">
             <nav
-                class="flex flex-1 flex-col items-start text-xl"
+                class="@md:grid-cols-3 grid grid-cols-2 text-xl"
                 aria-label="Primary"
             >
                 @php
@@ -80,21 +80,22 @@ class="flex flex-1 flex-col items-start text-xl"
                     $isPricingActive = request()->routeIs('pricing*');
                     $isDocsActive = request()->is('docs*');
                     $isBlogActive = request()->routeIs('blog*');
+                    $isPartnersActive = request()->routeIs('partners*');
                     $isSponsorActive = request()->routeIs('sponsoring*');
+                    $isLoginActive = request()->routeIs('customer.login*');
                 @endphp
 
                 {{-- Home Link --}}
-                <div class="w-full">
+                <div>
                     <a
                         href="/"
                         @class([
-                            'flex items-center justify-between py-3 transition duration-200',
+                            'flex items-center gap-2 py-3 transition duration-200',
                             'font-medium' => $isHomeActive,
                             'opacity-50 hover:translate-x-1 hover:opacity-100' => ! $isHomeActive,
                         ])
                         aria-current="{{ $isHomeActive ? 'page' : 'false' }}"
                     >
-                        <div>Home</div>
                         @if ($isHomeActive)
                             <x-icons.right-arrow
                                 class="size-4 shrink-0"
@@ -102,26 +103,22 @@ class="size-4 shrink-0"
                                 focusable="false"
                             />
                         @endif
+
+                        <div>Home</div>
                     </a>
                 </div>
 
-                <div
-                    class="h-0.5 w-full rounded-full bg-current opacity-5"
-                    role="presentation"
-                ></div>
-
                 {{-- Docs Link --}}
-                <div class="w-full">
+                <div>
                     <a
                         href="/docs/"
                         @class([
-                            'flex items-center justify-between py-3 transition duration-200',
+                            'flex items-center gap-2 py-3 transition duration-200',
                             'font-medium' => $isDocsActive,
                             'opacity-50 hover:translate-x-1 hover:opacity-100' => ! $isDocsActive,
                         ])
                         aria-current="{{ $isDocsActive ? 'page' : 'false' }}"
                     >
-                        <div>Docs</div>
                         @if ($isDocsActive)
                             <x-icons.right-arrow
                                 class="size-4 shrink-0"
@@ -129,26 +126,22 @@ class="size-4 shrink-0"
                                 focusable="false"
                             />
                         @endif
+
+                        <div>Docs</div>
                     </a>
                 </div>
 
-                <div
-                    class="h-0.5 w-full rounded-full bg-current opacity-5"
-                    role="presentation"
-                ></div>
-
                 {{-- Blog Link --}}
-                <div class="w-full">
+                <div>
                     <a
                         href="{{ route('blog') }}"
                         @class([
-                            'flex items-center justify-between py-3 transition duration-200',
+                            'flex items-center gap-2 py-3 transition duration-200',
                             'font-medium' => $isBlogActive,
                             'opacity-50 hover:translate-x-1 hover:opacity-100' => ! $isBlogActive,
                         ])
                         aria-current="{{ $isBlogActive ? 'page' : 'false' }}"
                     >
-                        <div>Blog</div>
                         @if ($isBlogActive)
                             <x-icons.right-arrow
                                 class="size-4 shrink-0"
@@ -156,60 +149,79 @@ class="size-4 shrink-0"
                                 focusable="false"
                             />
                         @endif
+
+                        <div>Blog</div>
                     </a>
                 </div>
 
-                <div
-                    class="h-0.5 w-full rounded-full bg-current opacity-5"
-                    role="presentation"
-                ></div>
-
                 {{-- Shop Link --}}
-                <div class="w-full">
+                <div>
                     <a
                         href="https://shop.nativephp.com/"
-                        class="flex items-center justify-between py-3 opacity-50 transition duration-200 hover:translate-x-1 hover:opacity-100"
+                        class="flex items-center gap-2 py-3 opacity-50 transition duration-200 hover:translate-x-1 hover:opacity-100"
                         aria-label="NativePHP Shop"
                     >
                         <div>Shop</div>
                     </a>
                 </div>
 
-                <div
-                    class="h-0.5 w-full rounded-full bg-current opacity-5"
-                    role="presentation"
-                ></div>
-
-                <div class="w-full">
+                <div>
                     <a
-                        href="/partners"
-                        class="flex items-center justify-between py-3 opacity-50 transition duration-200 hover:translate-x-1 hover:opacity-100"
-                        aria-label="NativePHP Partners"
+                        href="{{ route('partners') }}"
+                        @class([
+                            'flex items-center gap-2 py-3 transition duration-200',
+                            'font-medium' => $isPartnersActive,
+                            'opacity-50 hover:translate-x-1 hover:opacity-100' => ! $isPartnersActive,
+                        ])
+                        aria-current="{{ $isPartnersActive ? 'page' : 'false' }}"
                     >
+                        @if ($isPartnersActive)
+                            <x-icons.right-arrow
+                                class="size-4 shrink-0"
+                                aria-hidden="true"
+                                focusable="false"
+                            />
+                        @endif
+
                         <div>Partners</div>
                     </a>
                 </div>
 
-                <div
-                    class="h-0.5 w-full rounded-full bg-current opacity-5"
-                    role="presentation"
-                ></div>
-
                 {{-- Login/Logout --}}
                 @feature(App\Features\ShowAuthButtons::class)
-                    <div class="w-full">
+                    <div>
                         @auth
-                            <form method="POST" action="{{ route('customer.logout') }}" class="w-full">
+                            <form
+                                method="POST"
+                                action="{{ route('customer.logout') }}"
+                                class="w-full"
+                            >
                                 @csrf
-                                <button type="submit" class="flex w-full items-center justify-between py-3 opacity-50 transition duration-200 hover:translate-x-1 hover:opacity-100">
+                                <button
+                                    type="submit"
+                                    class="flex w-full items-center justify-between py-3 opacity-50 transition duration-200 hover:translate-x-1 hover:opacity-100"
+                                >
                                     <div>Log out</div>
                                 </button>
                             </form>
                         @else
                             <a
                                 href="{{ route('customer.login') }}"
-                                class="flex items-center justify-between py-3 opacity-50 transition duration-200 hover:translate-x-1 hover:opacity-100"
+                                @class([
+                                    'flex items-center gap-2 py-3 transition duration-200',
+                                    'font-medium' => $isLoginActive,
+                                    'opacity-50 hover:translate-x-1 hover:opacity-100' => ! $isLoginActive,
+                                ])
+                                aria-current="{{ $isLoginActive ? 'page' : 'false' }}"
                             >
+                                @if ($isLoginActive)
+                                    <x-icons.right-arrow
+                                        class="size-4 shrink-0"
+                                        aria-hidden="true"
+                                        focusable="false"
+                                    />
+                                @endif
+
                                 <div>Log in</div>
                             </a>
                         @endauth
@@ -218,11 +230,22 @@ class="flex items-center justify-between py-3 opacity-50 transition duration-200
             </nav>
 
             <div
-                class="mb-2 flex w-full items-center justify-between gap-2 pb-2"
+                class="mt-6 mb-2 flex w-full flex-wrap items-center justify-between gap-2 pb-2"
             >
-                <div>Theme:</div>
+                {{-- Doc search --}}
+                <div class="contrast-150 dark:contrast-100">
+                    <div
+                        id="docsearch-mobile"
+                        x-on:click="
+                            window.scrollTo({ top: 0, behavior: 'instant' })
+                            showMobileMenu = false
+                        "
+                        aria-label="Search documentation"
+                    ></div>
+                </div>
+
                 <div
-                    class="flex h-10 items-center gap-0.5 rounded-full bg-gray-100 p-1 text-sm ring-1 ring-black/5 dark:bg-black/20 dark:ring-white/10"
+                    class="flex h-10 items-center rounded-full bg-gray-100/90 p-1 text-sm ring-1 ring-black/5 dark:bg-black/20 dark:ring-white/10"
                     role="radiogroup"
                     aria-label="Theme preference"
                 >
@@ -231,7 +254,7 @@ class="flex h-10 items-center gap-0.5 rounded-full bg-gray-100 p-1 text-sm ring-
                         role="radio"
                         :aria-checked="themePreference === 'light'"
                         x-on:click="themePreference = 'light'; showMobileMenu = false"
-                        class="rounded-full px-3 py-1.5 transition duration-300 ease-in-out"
+                        class="rounded-full px-2.5 py-1.5 transition duration-300 ease-in-out"
                         :class="{
                             'bg-zinc-300/70': themePreference === 'light',
                         }"
@@ -244,7 +267,7 @@ class="rounded-full px-3 py-1.5 transition duration-300 ease-in-out"
                         role="radio"
                         :aria-checked="themePreference === 'system'"
                         x-on:click="themePreference = 'system'; showMobileMenu = false"
-                        class="rounded-full px-3 py-1.5 transition duration-300 ease-in-out"
+                        class="rounded-full px-2.5 py-1.5 transition duration-300 ease-in-out"
                         :class="{
                             'bg-zinc-300/50 dark:bg-gray-200/10': themePreference === 'system',
                         }"
@@ -257,7 +280,7 @@ class="rounded-full px-3 py-1.5 transition duration-300 ease-in-out"
                         role="radio"
                         :aria-checked="themePreference === 'dark'"
                         x-on:click="themePreference = 'dark'; showMobileMenu = false"
-                        class="rounded-full px-3 py-1.5 transition duration-300 ease-in-out"
+                        class="rounded-full px-2.5 py-1.5 transition duration-300 ease-in-out"
                         :class="{
                             'bg-gray-200/10': themePreference === 'dark',
                         }"
@@ -274,10 +297,12 @@ class="h-0.5 w-full rounded-full bg-current opacity-5"
             ></div>
 
             <nav
-                class="mt-4 mx-auto flex"
+                class="mx-auto mt-4 flex"
                 aria-label="Social media"
             >
-                <div class="grid grid-cols-4 justify-items-center gap-4">
+                <div
+                    class="flex flex-wrap justify-center-safe gap-4 contrast-120"
+                >
                     <x-social-networks-all />
                 </div>
             </nav>
diff --git a/resources/views/components/navigation-bar.blade.php b/resources/views/components/navigation-bar.blade.php
index 80c39491..57f6f75f 100644
--- a/resources/views/components/navigation-bar.blade.php
+++ b/resources/views/components/navigation-bar.blade.php
@@ -164,12 +164,9 @@ class="opacity-60 transition duration-200 hover:opacity-100"
                 {{-- Doc search --}}
                 <div
                     class="-mr-0.5 transition-all duration-200 ease-in-out will-change-transform"
-                    :class="{
-                    'pr-0.5': showMobileMenu,
-                }"
                 >
                     <div
-                        id="docsearch"
+                        id="docsearch-desktop"
                         x-on:click="if (window.innerWidth < 640) window.scrollTo({ top: 0, behavior: 'instant' })"
                         aria-label="Search documentation"
                     ></div>