diff --git a/resources/css/app.css b/resources/css/app.css
index be9b352..990f833 100644
--- a/resources/css/app.css
+++ b/resources/css/app.css
@@ -67,6 +67,11 @@
     }
 }
 
+/* Prevents scrollbars from appearing when a popover is open */
+html:has(#mobile-menu-popover:popover-open) {
+    overflow: hidden;
+}
+
 /* Scrollbar width */
 ::-webkit-scrollbar {
     height: 8px;
diff --git a/resources/css/docsearch.css b/resources/css/docsearch.css
index 194b1c4..5131922 100644
--- a/resources/css/docsearch.css
+++ b/resources/css/docsearch.css
@@ -11,12 +11,12 @@
 }
 
 .DocSearch-Button {
-    @apply m-0 flex items-center rounded-lg bg-gray-50 font-normal ring-1 ring-gray-700/40 transition duration-300 ease-out dark:bg-black/30;
+    @apply m-0 flex items-center rounded-lg bg-gray-50 font-normal ring-1 ring-slate-600/40 transition duration-300 ease-out dark:bg-black/30;
 }
 
 .DocSearch-Button:hover {
     box-shadow: none;
-    @apply bg-gray-100 ring-gray-300 dark:bg-black/50 dark:ring-gray-700/70;
+    @apply bg-gray-100 ring-1 ring-transparent dark:bg-slate-950 dark:ring-slate-700/70;
 }
 
 .DocSearch-Button:hover .DocSearch-Button-Placeholder {
@@ -36,11 +36,11 @@
 }
 
 .DocSearch-Button-Placeholder {
-    @apply hidden pr-1 pl-1 text-sm text-black/60 min-[400px]:block min-[520px]:pr-20 dark:text-white/60;
+    @apply px-1 text-sm text-black/60 transition duration-300 min-[520px]:pr-20 dark:text-white/60;
 }
 
 .DocSearch-Button-Keys {
-    @apply mt-1 ml-1 hidden min-w-[auto] text-sm leading-none min-[520px]:flex;
+    @apply mt-1 ml-1 hidden min-w-[auto] text-sm leading-none sm:flex;
 }
 
 .DocSearch-Button-Key {
@@ -55,12 +55,108 @@
     @apply text-black;
 }
 
+.DocSearch-Modal:where(.dark, .dark *) {
+    background-color: var(--color-slate-950);
+    --docsearch-hit-active-color: var(--color-slate-300);
+}
+
+.DocSearch-SearchBar .DocSearch-Form:where(.dark, .dark *) {
+    border-color: color-mix(in oklab, var(--color-white) 10%, transparent);
+    background-color: color-mix(in oklab, var(--color-white) 15%, transparent);
+    color: var(--color-slate-300);
+}
+.DocSearch-SearchBar .DocSearch-Form:where(.dark, .dark *)::placeholder {
+    color: var(--color-slate-400);
+}
+.DocSearch-SearchBar .DocSearch-Form:where(.dark, .dark *) {
+    --tw-shadow: 0 0 #0000;
+    box-shadow:
+        var(--tw-inset-shadow), var(--tw-inset-ring-shadow),
+        var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+}
+.DocSearch-SearchBar .DocSearch-Form:where(.dark, .dark *):disabled {
+    border-color: color-mix(in oklab, var(--color-white) 5%, transparent);
+    color: var(--color-slate-400);
+}
+.DocSearch-SearchBar
+    .DocSearch-Form:where(.dark, .dark *):disabled::placeholder,
+.DocSearch-SearchBar .DocSearch-MagnifierLabel {
+    color: var(--color-slate-500);
+}
+.DocSearch-SearchBar .DocSearch-MagnifierLabel:where(.dark, .dark *) {
+    color: var(--color-slate-300);
+}
+.DocSearch-SearchBar .DocSearch-LoadingIndicator {
+    color: var(--color-slate-500);
+}
+.DocSearch-SearchBar .DocSearch-LoadingIndicator:where(.dark, .dark *),
+.DocSearch-SearchBar .DocSearch-Input:where(.dark, .dark *),
+.DocSearch-SearchBar .DocSearch-Cancel:where(.dark, .dark *) {
+    color: var(--color-slate-300);
+}
+
+.DocSearch-Dropdown .DocSearch-Hits mark:where(.dark, .dark *) {
+    color: var(--color-slate-400);
+}
+
+.DocSearch-Hit-source {
+    @apply py-2.5 text-base;
+}
+
+.DocSearch-Dropdown .DocSearch-Hit-source:where(.dark, .dark *) {
+    background-color: var(--color-slate-950);
+    color: var(--color-slate-300);
+}
+
+.DocSearch-Dropdown
+    .DocSearch-Hit[aria-selected='true']
+    a:where(.dark, .dark *) {
+    background-color: var(--color-indigo-800);
+}
+
+.DocSearch-Dropdown .DocSearch-Hit a:where(.dark, .dark *) {
+    background-color: var(--color-indigo-900);
+    box-shadow: none;
+}
+
+.DocSearch-Dropdown .DocSearch-Hit .DocSearch-Hit-title:where(.dark, .dark *) {
+    color: var(--color-slate-300);
+}
+
+.DocSearch-Dropdown
+    .DocSearch-NoResults
+    .DocSearch-Screen-Icon:where(.dark, .dark *) {
+    color: var(--color-slate-500);
+}
+
+.DocSearch-Dropdown
+    .DocSearch-NoResults
+    .DocSearch-Title:where(.dark, .dark *) {
+    color: var(--color-slate-300);
+}
+
+.DocSearch-Footer {
+    @apply py-6;
+}
+
+.DocSearch-Footer:where(.dark, .dark *) {
+    background: var(--color-slate-950);
+    box-shadow: none;
+    @apply border-t border-t-slate-700;
+}
+
+.DocSearch-Footer .DocSearch-Logo svg :where(.dark, .dark *) {
+    fill: var(--color-gray-500);
+    color: var(--color-white);
+    background: transparent;
+}
+
 .DocSearch-Screen-Icon {
     display: none;
 }
 
 .DocSearch-Input {
-    @apply focus-visible:outline-none;
+    @apply ring-0 outline-0 focus-visible:outline-none;
 }
 
 .DocSearch-Form {
diff --git a/resources/views/components/layout-three-columns.blade.php b/resources/views/components/docs-layout.blade.php
similarity index 73%
rename from resources/views/components/layout-three-columns.blade.php
rename to resources/views/components/docs-layout.blade.php
index 88e44bc..471ba74 100644
--- a/resources/views/components/layout-three-columns.blade.php
+++ b/resources/views/components/docs-layout.blade.php
@@ -1,4 +1,4 @@
-<x-layout :hasMenu="! empty($sidebarLeft)">
+<x-layout>
     {{-- Main container --}}
     <main
         class="mx-auto flex w-full max-w-5xl grow items-start px-4 pt-1 xl:max-w-7xl 2xl:max-w-360"
@@ -13,7 +13,13 @@ class="mx-auto flex w-full max-w-5xl grow items-start px-4 pt-1 xl:max-w-7xl 2xl
         <div class="flex w-full min-w-0 grow items-start px-2 pt-2">
             {{-- Content --}}
             <article class="flex w-full min-w-0 grow flex-col lg:pl-5 xl:pr-5">
-                {{ $slot }}
+                {{-- Docs mobile menu --}}
+                <x-docs-menu>
+                    <nav class="docs-navigation">{{ $sidebarLeft }}</nav>
+                </x-docs-menu>
+
+                {{-- Main content --}}
+                <div class="mt-3">{{ $slot }}</div>
             </article>
 
             {{-- Right sidebar --}}
diff --git a/resources/views/components/docs-menu.blade.php b/resources/views/components/docs-menu.blade.php
new file mode 100644
index 0000000..831220f
--- /dev/null
+++ b/resources/views/components/docs-menu.blade.php
@@ -0,0 +1,64 @@
+<div class="lg:hidden">
+    <div
+        class="mb-2 flex flex-col-reverse items-start justify-between gap-3.5 min-[400px]:mb-2.5 min-[400px]:flex-row min-[400px]:items-center"
+    >
+        {{-- Docs menu button --}}
+        <button
+            type="button"
+            x-on:click="showDocsMenu = !showDocsMenu"
+            class="-mx-1 flex items-center gap-1.5 px-1 py-1.5 transition duration-300 ease-in-out will-change-transform focus:ring-0 focus:outline-none"
+            :aria-expanded="showDocsMenu"
+            aria-label="Toggle docs menu"
+            aria-haspopup="true"
+            title="Open docs navigation"
+            :class="{
+                'translate-x-1': showDocsMenu,
+            }"
+        >
+            <svg
+                xmlns="http://www.w3.org/2000/svg"
+                class="size-5.5"
+                viewBox="0 0 24 24"
+            >
+                <g
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-linecap="round"
+                    stroke-width="1.5"
+                >
+                    <path
+                        d="M4 19V5a2 2 0 0 1 2-2h13.4a.6.6 0 0 1 .6.6v13.114"
+                    />
+                    <path
+                        stroke-linejoin="round"
+                        d="M8 3v8l2.5-1.6L13 11V3"
+                    />
+                    <path d="M6 17h14M6 21h14" />
+                    <path
+                        stroke-linejoin="round"
+                        d="M6 21a2 2 0 1 1 0-4"
+                    />
+                </g>
+            </svg>
+
+            <div>Menu</div>
+        </button>
+
+        {{-- Platform switcher --}}
+        <x-mini-platform-switcher />
+    </div>
+
+    {{-- Docs mobile menu --}}
+    <div
+        x-show="showDocsMenu"
+        x-collapse
+        role="dialog"
+        aria-modal="true"
+        aria-label="Docs menu"
+        class="dark:bg-mirage rounded-xl bg-gray-100"
+    >
+        <div class="p-6">
+            {{ $slot }}
+        </div>
+    </div>
+</div>
diff --git a/resources/views/components/layout.blade.php b/resources/views/components/layout.blade.php
index 9d43d94..8cf29f5 100644
--- a/resources/views/components/layout.blade.php
+++ b/resources/views/components/layout.blade.php
@@ -60,7 +60,8 @@
     <body
         x-cloak
         x-data="{
-            showDocsNavigation: false,
+            showMobileMenu: false,
+            showDocsMenu: false,
             scrolled: window.scrollY > 50,
             width: window.innerWidth,
             get showPlatformSwitcherHeader() {
@@ -69,23 +70,19 @@
         }"
         x-resize="
             width = $width
-            if (width >= 1024) showDocsNavigation = false
+            if (width >= 1024) {
+                showMobileMenu = false
+                showDocsMenu = false
+            }
         "
         x-init="
             window.addEventListener('scroll', () => {
                 scrolled = window.scrollY > 50
             })
         "
-        x-effect="
-            if (showDocsNavigation) {
-                document.body.style.overflow = 'hidden'
-            } else {
-                document.body.style.overflow = ''
-            }
-        "
-        class="min-h-screen overflow-x-clip font-poppins antialiased selection:bg-black selection:text-[#b4a9ff] dark:bg-[#050714] dark:text-white"
+        class="font-poppins min-h-screen overflow-x-clip antialiased selection:bg-black selection:text-[#b4a9ff] dark:bg-[#050714] dark:text-white"
     >
-        <x-navigation-bar :hasMenu="$hasMenu ?? false" />
+        <x-navigation-bar />
         {{ $slot }}
         <x-footer />
         @livewireScriptConfig
diff --git a/resources/views/components/mini-platform-switcher.blade.php b/resources/views/components/mini-platform-switcher.blade.php
new file mode 100644
index 0000000..741f0b3
--- /dev/null
+++ b/resources/views/components/mini-platform-switcher.blade.php
@@ -0,0 +1,44 @@
+@php
+    $isMobile = request()->is('docs/mobile/*');
+    $mobileHref = '/docs/mobile/1';
+    $desktopHref = '/docs/desktop/1';
+@endphp
+
+<div
+    class="dark:bg-mirage grid h-11 grid-cols-2 items-center gap-0.5 rounded-lg bg-gray-100 p-1 text-xs"
+>
+    <a
+        href="{{ $desktopHref }}"
+        @class([
+            'flex h-9 items-center gap-1.5 rounded-[calc(var(--radius-lg)-1px)] pr-2 pl-1 transition duration-300 ease-in-out',
+            'bg-white dark:bg-slate-700/30' => ! $isMobile,
+        ])
+    >
+        <div
+            @class([
+                'grid h-7 w-7.5 place-items-center rounded-[calc(var(--radius-md)-1px)]',
+                'dark:bg-haiti bg-blue-50 text-blue-500 dark:text-blue-400' => ! $isMobile,
+            ])
+        >
+            <x-icons.pc class="size-5 shrink-0" />
+        </div>
+        <div>Desktop</div>
+    </a>
+    <a
+        href="{{ $mobileHref }}"
+        @class([
+            'flex h-9 items-center gap-1.5 rounded-[calc(var(--radius-lg)-1px)] pr-2 pl-1 transition duration-300 ease-in-out',
+            'bg-white dark:bg-slate-700/30' => $isMobile,
+        ])
+    >
+        <div
+            @class([
+                'grid h-7 w-7.5 place-items-center rounded-[calc(var(--radius-md)-1px)]',
+                'dark:bg-haiti bg-blue-50 text-blue-500 dark:text-blue-400' => $isMobile,
+            ])
+        >
+            <x-icons.device-mobile-phone class="size-4 shrink-0" />
+        </div>
+        <div>Mobile</div>
+    </a>
+</div>
diff --git a/resources/views/components/mobile-menu.blade.php b/resources/views/components/mobile-menu.blade.php
new file mode 100644
index 0000000..843ab7c
--- /dev/null
+++ b/resources/views/components/mobile-menu.blade.php
@@ -0,0 +1,334 @@
+<div
+    x-init="
+        () => {
+            // Sync Popover ➜ Alpine
+            $refs.mobilePopover.addEventListener('toggle', () => {
+                showMobileMenu = $refs.mobilePopover.matches(':popover-open')
+            })
+
+            // Sync Alpine ➜ Popover
+            $watch('showMobileMenu', (open) => {
+                if (open && ! $refs.mobilePopover.matches(':popover-open')) {
+                    $refs.mobilePopover.showPopover()
+                } else if (! open && $refs.mobilePopover.matches(':popover-open')) {
+                    $refs.mobilePopover.hidePopover()
+                }
+            })
+        }
+    "
+    class="relative z-40 lg:hidden"
+>
+    <button
+        type="button"
+        popovertarget="mobile-menu-popover"
+        popovertargetaction="toggle"
+        class="-m-1.5 grid size-9 place-items-center overflow-hidden focus:ring-0 focus:outline-none"
+        :aria-expanded="showMobileMenu"
+        aria-controls="mobile-menu-popover"
+        aria-label="Toggle mobile menu"
+        aria-haspopup="true"
+        title="Open main navigation"
+    >
+        <div class="flex flex-col items-end gap-1 [grid-area:1/-1]">
+            <div
+                class="h-0.5 w-5 rounded-full bg-current transition duration-300 ease-in-out"
+                :class="{'translate-x-2 opacity-0': showMobileMenu}"
+            ></div>
+            <div
+                class="h-0.5 w-5 rounded-full bg-current transition delay-50 duration-300 ease-in-out"
+                :class="{'translate-x-2 opacity-0': showMobileMenu}"
+            ></div>
+            <div
+                class="h-0.5 w-3.5 rounded-full bg-current transition delay-100 duration-300 ease-in-out"
+                :class="{'translate-x-2 opacity-0': showMobileMenu}"
+            ></div>
+        </div>
+        <div class="flex items-center gap-2 [grid-area:1/-1]">
+            <div
+                class="h-5 w-0.5 rotate-45 rounded-full bg-current transition duration-300 ease-in-out"
+                :class="{
+                    'scale-y-100': showMobileMenu,
+                    'opacity-0 scale-y-0 -translate-y-4 translate-x-4': !showMobileMenu
+                }"
+            ></div>
+            <div
+                class="-ml-2.5 h-5 w-0.5 -rotate-45 rounded-full bg-current transition duration-300 ease-in-out"
+                :class="{
+                    'scale-y-100': showMobileMenu,
+                    'opacity-0 scale-y-0 -translate-y-4 -translate-x-4': !showMobileMenu
+                }"
+            ></div>
+        </div>
+    </button>
+
+    <div
+        popover
+        x-ref="mobilePopover"
+        id="mobile-menu-popover"
+        role="dialog"
+        aria-modal="true"
+        aria-label="Site menu"
+        class="fixed top-23 right-3.5 bottom-3.5 left-3.5 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 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
+            x-data="{
+                mobileMenuTimeline: null,
+
+                init() {
+                    mobileMenuTimeline = gsap
+                        .timeline({
+                            paused: true,
+                            delay: 0.2,
+                        })
+                        .fromTo(
+                            '.gsap-mobile-menu-link',
+                            {
+                                y: 30,
+                                autoAlpha: 0,
+                                scale: 1.1,
+                            },
+                            {
+                                y: 0,
+                                autoAlpha: 1,
+                                scale: 1,
+                                ease: 'circ.out',
+                                stagger: 0.05,
+                                duration: 0.5,
+                            },
+                        )
+                        .fromTo(
+                            '.gsap-mobile-menu-divider',
+                            {
+                                x: -10,
+                                autoAlpha: 0,
+                            },
+                            {
+                                x: 0,
+                                autoAlpha: 0.05,
+                                ease: 'circ.out',
+                                stagger: 0.1,
+                                duration: 0.5,
+                            },
+                            '0',
+                        )
+                        .fromTo(
+                            '.gsap-mobile-menu-left-to-right-slide',
+                            {
+                                x: -30,
+                                y: -30,
+                                scale: 1.1,
+                                autoAlpha: 0,
+                            },
+                            {
+                                x: 0,
+                                y: 0,
+                                scale: 1,
+                                autoAlpha: 1,
+                                ease: 'circ.out',
+                                duration: 0.5,
+                            },
+                            '0',
+                        )
+                        .fromTo(
+                            '.gsap-mobile-menu-right-to-left-slide',
+                            {
+                                x: 30,
+                                y: -30,
+                                scale: 1.1,
+                                autoAlpha: 0,
+                            },
+                            {
+                                x: 0,
+                                y: 0,
+                                scale: 1,
+                                autoAlpha: 1,
+                                ease: 'circ.out',
+                                duration: 0.5,
+                            },
+                            '0',
+                        )
+                        .fromTo(
+                            '.gsap-mobile-menu-social-media > *',
+                            {
+                                y: 30,
+                                autoAlpha: 0,
+                            },
+                            {
+                                y: 0,
+                                autoAlpha: 1,
+                                ease: 'circ.out',
+                                duration: 0.5,
+                                stagger: 0.05,
+                            },
+                            '0',
+                        )
+
+                    $watch('showMobileMenu', (value) => {
+                        if (value) {
+                            mobileMenuTimeline.restart(true, false)
+                        }
+                    })
+                },
+            }"
+            class="flex h-full flex-col overflow-hidden p-6"
+        >
+            <nav
+                class="flex flex-1 flex-col items-start text-xl"
+                aria-label="Primary"
+            >
+                @php
+                    $isHomeActive = request()->routeIs('welcome*');
+                    $isMobileActive = request()->routeIs('early-adopter*');
+                    $isDocsActive = request()->is('docs*');
+                    $isSponsorActive = request()->is('docs/*/getting‐started/sponsoring*');
+                @endphp
+
+                {{-- Home Link --}}
+                <div class="gsap-mobile-menu-link w-full">
+                    <a
+                        href="/"
+                        @class([
+                            'flex items-center justify-between 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"
+                                aria-hidden="true"
+                                focusable="false"
+                            />
+                        @endif
+                    </a>
+                </div>
+
+                <div
+                    class="gsap-mobile-menu-divider h-0.5 w-full rounded-full bg-current opacity-5"
+                    role="presentation"
+                ></div>
+
+                {{-- Mobile Link --}}
+                <div class="gsap-mobile-menu-link w-full">
+                    <a
+                        href="{{ route('early-adopter') }}"
+                        @class([
+                            'flex items-center justify-between py-3 transition duration-200',
+                            'font-medium' => $isMobileActive,
+                            'opacity-50 hover:translate-x-1 hover:opacity-100' => ! $isMobileActive,
+                        ])
+                        aria-current="{{ $isMobileActive ? 'page' : 'false' }}"
+                    >
+                        <div>Mobile</div>
+                        @if ($isMobileActive)
+                            <x-icons.right-arrow
+                                class="size-4 shrink-0"
+                                aria-hidden="true"
+                                focusable="false"
+                            />
+                        @endif
+                    </a>
+                </div>
+
+                <div
+                    class="gsap-mobile-menu-divider h-0.5 w-full rounded-full bg-current opacity-5"
+                    role="presentation"
+                ></div>
+
+                {{-- Docs Link --}}
+                <div class="gsap-mobile-menu-link w-full">
+                    <a
+                        href="/docs/"
+                        @class([
+                            'flex items-center justify-between 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"
+                                aria-hidden="true"
+                                focusable="false"
+                            />
+                        @endif
+                    </a>
+                </div>
+
+                <div
+                    class="gsap-mobile-menu-divider h-0.5 w-full rounded-full bg-current opacity-5"
+                    role="presentation"
+                ></div>
+
+                {{-- Sponsor Link --}}
+                <div class="gsap-mobile-menu-link w-full">
+                    <a
+                        href="/docs/1/getting‐started/sponsoring"
+                        @class([
+                            'flex items-center justify-between py-3 transition duration-200',
+                            'font-medium' => $isSponsorActive,
+                            'opacity-50 hover:translate-x-1 hover:opacity-100' => ! $isSponsorActive,
+                        ])
+                        aria-label="Sponsor NativePHP project"
+                        aria-current="{{ $isSponsorActive ? 'page' : 'false' }}"
+                    >
+                        <div>Sponsor</div>
+                        @if ($isSponsorActive)
+                            <x-icons.right-arrow
+                                class="size-4 shrink-0"
+                                aria-hidden="true"
+                                focusable="false"
+                            />
+                        @endif
+                    </a>
+                </div>
+            </nav>
+
+            <div
+                class="mb-2 flex w-full items-center justify-between gap-2 pb-2"
+            >
+                <div class="gsap-mobile-menu-left-to-right-slide">Theme:</div>
+                <button
+                    x-on:click="darkMode = !darkMode; showMobileMenu = false"
+                    class="gsap-mobile-menu-right-to-left-slide flex h-10 items-center gap-0.5 rounded-full bg-gray-100 p-1 ring-1 ring-black/5 dark:bg-black/20 dark:ring-white/10"
+                    aria-pressed="false"
+                    aria-label="Toggle light or dark theme"
+                    title="Switch between dark and light mode"
+                >
+                    <div
+                        class="rounded-full px-4 py-1.5 transition duration-300 ease-in-out"
+                        :class="{
+                            'bg-gray-200/10': darkMode,
+                        }"
+                    >
+                        Dark
+                    </div>
+                    <div
+                        class="rounded-full px-4 py-1.5 transition duration-300 ease-in-out"
+                        :class="{
+                            'bg-zinc-300/70': !darkMode,
+                        }"
+                    >
+                        Light
+                    </div>
+                </button>
+            </div>
+
+            <div
+                class="gsap-mobile-menu-divider h-0.5 w-full rounded-full bg-current opacity-5"
+                role="presentation"
+            ></div>
+
+            <nav
+                class="gsap-mobile-menu-social-media mt-4 flex flex-wrap items-center justify-center gap-2.5"
+                aria-label="Social media"
+            >
+                <x-social-networks-all />
+            </nav>
+        </div>
+    </div>
+</div>
diff --git a/resources/views/components/navigation-bar.blade.php b/resources/views/components/navigation-bar.blade.php
index b1295d9..17d91e2 100644
--- a/resources/views/components/navigation-bar.blade.php
+++ b/resources/views/components/navigation-bar.blade.php
@@ -1,15 +1,13 @@
-@props(['hasMenu' => false])
-
 <nav
     class="sticky top-0 z-50 flex flex-col items-center justify-center px-3 pt-px"
     aria-label="Main Navigation"
 >
     <div
         :class="{
-            'ring-gray-200/80 dark:ring-gray-800/50 bg-white/50 dark:bg-white/5 translate-y-3': scrolled || showDocsNavigation,
-            'ring-transparent dark:bg-transparent': ! scrolled && ! showDocsNavigation,
+            'ring-gray-200/80 dark:ring-gray-700/70 bg-white/50 dark:bg-black/50 translate-y-3': scrolled || showMobileMenu,
+            'ring-transparent dark:bg-transparent': ! scrolled && ! showMobileMenu,
         }"
-        class="mx-auto flex w-full max-w-5xl items-center justify-between gap-5 rounded-2xl px-5 py-4 ring-1 backdrop-blur-md transition duration-200 ease-out xl:max-w-7xl 2xl:max-w-360"
+        class="mx-auto flex w-full max-w-5xl items-center justify-between gap-5 rounded-2xl px-5 py-4 ring-1 backdrop-blur-2xl transition duration-200 ease-out xl:max-w-7xl 2xl:max-w-360"
     >
         {{-- Left side --}}
         <div class="flex items-center gap-3">
@@ -79,7 +77,12 @@ class="hidden rounded-full bg-gray-200/60 px-2 py-1 text-xs text-gray-600 lg:blo
         {{-- Right side --}}
         <div class="flex items-center gap-3.5">
             {{-- Doc search --}}
-            <div>
+            <div
+                class="-mr-0.5 transition-all duration-200 ease-in-out will-change-transform"
+                :class="{
+                    'pr-0.5': showMobileMenu,
+                }"
+            >
                 <div
                     id="docsearch"
                     x-on:click="if (window.innerWidth < 640) window.scrollTo({ top: 0, behavior: 'instant' })"
@@ -87,16 +90,19 @@ class="hidden rounded-full bg-gray-200/60 px-2 py-1 text-xs text-gray-600 lg:blo
                 ></div>
             </div>
 
+            {{-- Mobile menu --}}
+            <x-mobile-menu />
+
             {{-- Desktop menu --}}
             <div
-                class="flex items-center gap-3.5 text-sm"
+                class="hidden items-center gap-3.5 text-sm lg:flex"
                 aria-label="Primary navigation"
             >
                 {{-- Link --}}
                 <a
                     href="/"
                     @class([
-                        'hidden transition duration-200 lg:block',
+                        'transition duration-200',
                         'font-medium' => request()->routeIs('welcome*'),
                         'opacity-60 hover:opacity-100' => ! request()->routeIs('welcome*'),
                     ])
@@ -107,7 +113,7 @@ class="flex items-center gap-3.5 text-sm"
 
                 {{-- Decorative circle --}}
                 <div
-                    class="hidden size-[3px] rotate-45 rounded-xs bg-gray-400 transition duration-200 lg:block dark:opacity-60"
+                    class="size-[3px] rotate-45 rounded-xs bg-gray-400 transition duration-200 dark:opacity-60"
                     aria-hidden="true"
                 ></div>
 
@@ -126,60 +132,26 @@ class="hidden size-[3px] rotate-45 rounded-xs bg-gray-400 transition duration-20
 
                 {{-- Decorative circle --}}
                 <div
-                    class="hidden size-[3px] rotate-45 rounded-xs bg-gray-400 transition duration-200 lg:block dark:opacity-60"
+                    class="size-[3px] rotate-45 rounded-xs bg-gray-400 transition duration-200 dark:opacity-60"
                     aria-hidden="true"
                 ></div>
 
-                @if ($hasMenu)
-                    <button
-                        type="button"
-                        @click="showDocsNavigation = !showDocsNavigation"
-                        class="-m-2 block p-2 text-gray-600 focus:ring-0 focus:outline-hidden lg:hidden dark:text-gray-300"
-                        aria-expanded="false"
-                        aria-controls="docs-navigation"
-                        aria-label="Toggle documentation menu"
-                    >
-                        <div x-show="!showDocsNavigation">
-                            <x-icons.menu
-                                class="size-6"
-                                aria-hidden="true"
-                            />
-                        </div>
-                        <div x-show="showDocsNavigation">
-                            <x-icons.close
-                                class="size-6"
-                                aria-hidden="true"
-                            />
-                        </div>
-                    </button>
-                    <a
-                        href="/docs/"
-                        @class([
-                            'hidden transition duration-200 lg:block',
-                            'font-medium' => request()->is('docs*'),
-                            'opacity-60 hover:opacity-100' => ! request()->is('docs*'),
-                        ])
-                        aria-current="{{ request()->is('docs*') ? 'page' : 'false' }}"
-                    >
-                        Docs
-                    </a>
-                @else
-                    <a
-                        href="/docs/"
-                        @class([
-                            'transition duration-200',
-                            'font-medium' => request()->is('docs*'),
-                            'opacity-60 hover:opacity-100' => ! request()->is('docs*'),
-                        ])
-                        aria-current="{{ request()->is('docs*') ? 'page' : 'false' }}"
-                    >
-                        Docs
-                    </a>
-                @endif
+                {{-- Link --}}
+                <a
+                    href="/docs/"
+                    @class([
+                        'transition duration-200',
+                        'font-medium' => request()->is('docs*'),
+                        'opacity-60 hover:opacity-100' => ! request()->is('docs*'),
+                    ])
+                    aria-current="{{ request()->is('docs*') ? 'page' : 'false' }}"
+                >
+                    Docs
+                </a>
 
                 {{-- Decorative circle --}}
                 <div
-                    class="hidden size-[3px] rotate-45 rounded-xs bg-gray-400 transition duration-200 lg:block dark:opacity-60"
+                    class="size-[3px] rotate-45 rounded-xs bg-gray-400 transition duration-200 dark:opacity-60"
                     aria-hidden="true"
                 ></div>
 
@@ -188,7 +160,7 @@ class="hidden size-[3px] rotate-45 rounded-xs bg-gray-400 transition duration-20
                     <a
                     href="{{ route('blog') }}"
                     @class([
-                    'hidden transition duration-200 lg:block',
+                    'transition duration-200',
                     'font-medium' => request()->routeIs('blog*'),
                     'opacity-60 hover:opacity-100' => ! request()->routeIs('blog*'),
                     ])
@@ -196,10 +168,9 @@ class="hidden size-[3px] rotate-45 rounded-xs bg-gray-400 transition duration-20
                     >
                     Blog
                     </a>
-                    
                     {{-- Decorative circle -- }}
                     <div
-                    class="hidden size-[3px] rotate-45 rounded-xs bg-gray-400 transition duration-200 lg:block dark:opacity-60"
+                    class="size-[3px] rotate-45 rounded-xs bg-gray-400 transition duration-200  dark:opacity-60"
                     aria-hidden="true"
                     ></div>
                 --}}
@@ -272,7 +243,7 @@ class="hidden size-[3px] rotate-45 rounded-xs bg-gray-400 transition duration-20
                         }
                     "
                     href="/docs/1/getting-started/sponsoring"
-                    class="relative hidden bg-linear-to-tr from-violet-600 to-violet-300 bg-clip-text font-medium text-transparent lg:block dark:from-violet-500 dark:to-white/80"
+                    class="relative bg-linear-to-tr from-violet-600 to-violet-300 bg-clip-text font-medium text-transparent dark:from-violet-500 dark:to-white/80"
                     aria-label="Sponsor NativePHP"
                     title="Support NativePHP development"
                 >
diff --git a/resources/views/components/sidebar-left-navigation.blade.php b/resources/views/components/sidebar-left-navigation.blade.php
index 4d7082a..c72542b 100644
--- a/resources/views/components/sidebar-left-navigation.blade.php
+++ b/resources/views/components/sidebar-left-navigation.blade.php
@@ -1,5 +1,5 @@
 <aside
-    class="sticky top-20 hidden max-h-[calc(100dvh-7rem)] w-[18rem] shrink-0 overflow-y-auto overflow-x-hidden pr-3 pt-4 lg:block"
+    class="sticky top-20 hidden max-h-[calc(100dvh-7rem)] w-[18rem] shrink-0 overflow-x-hidden overflow-y-auto pt-4 pr-3 lg:block"
 >
     <div class="relative flex flex-1 flex-col pb-5">
         <x-platform-switcher />
@@ -7,26 +7,3 @@ class="sticky top-20 hidden max-h-[calc(100dvh-7rem)] w-[18rem] shrink-0 overflo
         <nav class="docs-navigation">{!! $slot !!}</nav>
     </div>
 </aside>
-
-<div
-    x-show="showDocsNavigation"
-    x-transition:enter="transition duration-200 ease-out"
-    x-transition:enter-start="translate-y-1 opacity-0"
-    x-transition:enter-end="translate-y-0 opacity-100"
-    x-transition:leave="transition duration-150 ease-in"
-    x-transition:leave-start="translate-y-0 opacity-100"
-    x-transition:leave-end="translate-y-1 opacity-0"
-    class="fixed inset-0 z-40 h-screen w-screen overflow-y-auto overflow-x-hidden bg-white dark:bg-mirage"
->
-    <div class="px-3 pt-24">
-        <x-platform-switcher />
-
-        <nav class="docs-navigation">{!! $slot !!}</nav>
-
-        <div
-            class="mb-16 mt-7 flex flex-wrap items-center justify-center gap-6"
-        >
-            <x-social-networks-all />
-        </div>
-    </div>
-</div>
diff --git a/resources/views/components/social-networks-all.blade.php b/resources/views/components/social-networks-all.blade.php
index 77bcc61..99de067 100644
--- a/resources/views/components/social-networks-all.blade.php
+++ b/resources/views/components/social-networks-all.blade.php
@@ -2,7 +2,7 @@
     <a
         href="https://x.com/nativephp"
         title="Twitter"
-        class="group inline-grid size-10 place-items-center rounded-xl bg-gray-100 transition duration-200 hover:bg-gray-200/70 dark:bg-mirage dark:hover:bg-haiti"
+        class="group dark:hover:bg-haiti inline-grid size-10 place-items-center rounded-xl bg-zinc-200/80 transition duration-200 hover:bg-gray-200/70 dark:bg-gray-700/40"
     >
         <x-icons.twitter
             class="size-[1.1rem] text-black transition duration-200 group-hover:text-violet-400 dark:text-white"
@@ -14,7 +14,7 @@ class="size-[1.1rem] text-black transition duration-200 group-hover:text-violet-
     <a
         href="https://youtube.com/@NativePHPOfficial"
         title="Youtube"
-        class="group inline-grid size-10 place-items-center rounded-xl bg-gray-100 transition duration-200 hover:bg-gray-200/70 dark:bg-mirage dark:hover:bg-haiti"
+        class="group dark:hover:bg-haiti inline-grid size-10 place-items-center rounded-xl bg-zinc-200/80 transition duration-200 hover:bg-gray-200/70 dark:bg-gray-700/40"
     >
         <x-icons.youtube
             class="size-[1.4rem] text-black transition duration-200 group-hover:text-violet-400 dark:text-white"
@@ -26,7 +26,7 @@ class="size-[1.4rem] text-black transition duration-200 group-hover:text-violet-
     <a
         href="https://bsky.app/profile/nativephp.com"
         title="Bluesky"
-        class="group inline-grid size-10 place-items-center rounded-xl bg-gray-100 transition duration-200 hover:bg-gray-200/70 dark:bg-mirage dark:hover:bg-haiti"
+        class="group dark:hover:bg-haiti inline-grid size-10 place-items-center rounded-xl bg-zinc-200/80 transition duration-200 hover:bg-gray-200/70 dark:bg-gray-700/40"
     >
         <x-icons.bluesky
             class="size-[1.1rem] text-black transition duration-200 group-hover:text-violet-400 dark:text-white"
@@ -38,7 +38,7 @@ class="size-[1.1rem] text-black transition duration-200 group-hover:text-violet-
     <a
         href="https://discord.gg/X62tWNStZK"
         title="Go to discord server"
-        class="group inline-grid size-10 place-items-center rounded-xl bg-gray-100 transition duration-200 hover:bg-gray-200/70 dark:bg-mirage dark:hover:bg-haiti"
+        class="group dark:hover:bg-haiti inline-grid size-10 place-items-center rounded-xl bg-zinc-200/80 transition duration-200 hover:bg-gray-200/70 dark:bg-gray-700/40"
     >
         <x-icons.discord
             class="size-[1.1rem] text-black transition duration-200 group-hover:text-violet-400 dark:text-white"
@@ -50,7 +50,7 @@ class="size-[1.1rem] text-black transition duration-200 group-hover:text-violet-
     <a
         href="https://opencollective.com/nativephp"
         title="NativePHP on Open Collective"
-        class="group inline-grid size-10 place-items-center rounded-xl bg-gray-100 transition duration-200 hover:bg-gray-200/70 dark:bg-mirage dark:hover:bg-haiti"
+        class="group dark:hover:bg-haiti inline-grid size-10 place-items-center rounded-xl bg-zinc-200/80 transition duration-200 hover:bg-gray-200/70 dark:bg-gray-700/40"
     >
         <x-icons.opencollective
             class="size-[1.1rem] text-black transition duration-200 group-hover:text-violet-400 dark:text-white"
@@ -62,7 +62,7 @@ class="size-[1.1rem] text-black transition duration-200 group-hover:text-violet-
     <a
         href="https://github.com/nativephp"
         title="Source code of NativePHP"
-        class="group inline-grid size-10 place-items-center rounded-xl bg-gray-100 transition duration-200 hover:bg-gray-200/70 dark:bg-mirage dark:hover:bg-haiti"
+        class="group dark:hover:bg-haiti inline-grid size-10 place-items-center rounded-xl bg-zinc-200/80 transition duration-200 hover:bg-gray-200/70 dark:bg-gray-700/40"
     >
         <x-icons.github
             class="size-[1.1rem] transition duration-200 group-hover:fill-violet-400 dark:fill-white"
@@ -74,7 +74,7 @@ class="size-[1.1rem] transition duration-200 group-hover:fill-violet-400 dark:fi
     <a
         href="https://pinkary.com/@nativephp"
         title="NativePHP on Pinkary"
-        class="group inline-grid size-10 place-items-center rounded-xl bg-gray-100 transition duration-200 hover:bg-gray-200/70 dark:bg-mirage dark:hover:bg-haiti"
+        class="group dark:hover:bg-haiti inline-grid size-10 place-items-center rounded-xl bg-zinc-200/80 transition duration-200 hover:bg-gray-200/70 dark:bg-gray-700/40"
     >
         <x-icons.pinkary
             class="size-[1.6rem] text-black transition duration-200 group-hover:text-violet-400 dark:text-white"
@@ -86,7 +86,7 @@ class="size-[1.6rem] text-black transition duration-200 group-hover:text-violet-
     <a
         href="https://www.linkedin.com/company/nativephp/"
         title="NativePHP on LinkedIn"
-        class="group inline-grid size-10 place-items-center rounded-xl bg-gray-100 transition duration-200 hover:bg-gray-200/70 dark:bg-mirage dark:hover:bg-haiti"
+        class="group dark:hover:bg-haiti inline-grid size-10 place-items-center rounded-xl bg-zinc-200/80 transition duration-200 hover:bg-gray-200/70 dark:bg-gray-700/40"
     >
         <x-icons.linkedin
             class="size-[1.1rem] text-black transition duration-200 group-hover:text-violet-400 dark:text-white"
diff --git a/resources/views/docs/index.blade.php b/resources/views/docs/index.blade.php
index 93d8afc..ee975ca 100644
--- a/resources/views/docs/index.blade.php
+++ b/resources/views/docs/index.blade.php
@@ -1,4 +1,4 @@
-<x-layout-three-columns>
+<x-docs-layout>
     <x-slot name="sidebarLeft">
         {!! $navigation !!}
     </x-slot>
@@ -44,7 +44,7 @@ class="mt-2 flex flex-col space-y-2 border-l text-xs dark:border-l-white/15"
     </div>
 
     <div
-        class="prose mt-8 max-w-none dark:prose-invert prose-headings:scroll-mt-20 prose-headings:text-gray-800 sm:prose-headings:scroll-mt-32 dark:prose-headings:text-gray-50"
+        class="prose dark:prose-invert prose-headings:scroll-mt-20 prose-headings:text-gray-800 sm:prose-headings:scroll-mt-32 dark:prose-headings:text-gray-50 mt-8 max-w-none"
     >
         {!! $content !!}
     </div>
@@ -99,4 +99,4 @@ class="flex items-center justify-end gap-1.5 opacity-60"
             Edit this page on GitHub
         </x-link-subtle>
     </div>
-</x-layout-three-columns>
+</x-docs-layout>
diff --git a/resources/views/early-adopter.blade.php b/resources/views/early-adopter.blade.php
index 8a7c4b4..96c2ec1 100644
--- a/resources/views/early-adopter.blade.php
+++ b/resources/views/early-adopter.blade.php
@@ -86,7 +86,7 @@ class="relative"
                 aria-labelledby="ios-heading"
             >
                 <div
-                    class="relative isolate z-10 flex w-full max-w-xs flex-col items-center overflow-hidden rounded-2xl bg-[#EBECF6] p-8 text-center ring-4 ring-inset ring-white/60 dark:bg-black/50 dark:ring-white/5"
+                    class="relative isolate z-10 flex w-full max-w-xs flex-col items-center overflow-hidden rounded-2xl bg-[#EBECF6] p-8 text-center ring-4 ring-white/60 ring-inset dark:bg-black/50 dark:ring-white/5"
                 >
                     {{-- Subtitle --}}
                     <p class="text-sm text-gray-500">Available now for</p>
@@ -116,7 +116,7 @@ class="absolute -top-5 right-1/2 -z-10 h-40 w-14 translate-x-1/2 rounded-full bg
                     ></div>
                     {{-- Blue blurred circle - Decorative --}}
                     <div
-                        class="absolute bottom-0 right-1/2 -z-10 h-52 w-72 translate-x-1/2 rounded-full bg-[#9CA8D9]/40 blur-2xl dark:bg-blue-800/40"
+                        class="absolute right-1/2 bottom-0 -z-10 h-52 w-72 translate-x-1/2 rounded-full bg-[#9CA8D9]/40 blur-2xl dark:bg-blue-800/40"
                         aria-hidden="true"
                     ></div>
                 </div>
@@ -151,7 +151,7 @@ class="relative"
                 aria-labelledby="android-heading"
             >
                 <div
-                    class="relative isolate z-10 flex w-full max-w-xs flex-col items-center overflow-hidden rounded-2xl bg-[#F6F1EB] p-8 text-center ring-4 ring-inset ring-white/60 dark:bg-black/50 dark:ring-white/5"
+                    class="relative isolate z-10 flex w-full max-w-xs flex-col items-center overflow-hidden rounded-2xl bg-[#F6F1EB] p-8 text-center ring-4 ring-white/60 ring-inset dark:bg-black/50 dark:ring-white/5"
                 >
                     {{-- Subtitle --}}
                     <p class="text-sm text-gray-500">Available now for</p>
@@ -181,7 +181,7 @@ class="absolute -top-5 right-1/2 -z-10 h-40 w-14 translate-x-1/2 rounded-full bg
                     ></div>
                     {{-- Center blurred circle - Decorative --}}
                     <div
-                        class="absolute bottom-0 right-1/2 -z-10 h-52 w-72 translate-x-1/2 rounded-full bg-[#E0D7CE] blur-2xl dark:bg-slate-700/50"
+                        class="absolute right-1/2 bottom-0 -z-10 h-52 w-72 translate-x-1/2 rounded-full bg-[#E0D7CE] blur-2xl dark:bg-slate-700/50"
                         aria-hidden="true"
                     ></div>
                 </div>
@@ -461,7 +461,7 @@ class="pt-0.5 text-sm text-gray-500 opacity-0 dark:text-gray-400"
                 {{-- Box --}}
                 <div
                     x-ref="box"
-                    class="mt-3 grid h-52 w-72 place-items-center rounded-xl bg-[#f4f1ee] p-5 opacity-0 dark:bg-mirage"
+                    class="dark:bg-mirage mt-3 grid h-52 w-72 place-items-center rounded-xl bg-[#f4f1ee] p-5 opacity-0"
                     aria-label="Purchase confirmation visualization"
                 >
                     <div class="flex flex-col items-center gap-5 text-center">
@@ -474,7 +474,7 @@ class="relative grid size-7 place-items-center rounded-full bg-emerald-400 text-
                             <x-icons.checkmark class="size-6" />
 
                             <div
-                                class="absolute right-1/2 top-1/2 hidden size-24 -translate-y-1/2 translate-x-1/2 rounded-full bg-emerald-400/20 blur-2xl dark:block"
+                                class="absolute top-1/2 right-1/2 hidden size-24 translate-x-1/2 -translate-y-1/2 rounded-full bg-emerald-400/20 blur-2xl dark:block"
                                 aria-hidden="true"
                             ></div>
                         </div>
@@ -524,7 +524,7 @@ class="relative isolate z-0 mt-3 grid h-52 w-72 place-items-center overflow-hidd
                     {{-- Terminal --}}
                     <div
                         x-ref="terminal"
-                        class="-mb-12 -mr-12 h-52 w-72 overflow-hidden rounded-xl bg-white opacity-0 dark:bg-gray-900"
+                        class="-mr-12 -mb-12 h-52 w-72 overflow-hidden rounded-xl bg-white opacity-0 dark:bg-gray-900"
                     >
                         <div
                             class="flex items-center gap-1 bg-gray-100 px-3 py-3.5 dark:bg-gray-800"
@@ -632,7 +632,7 @@ class="mx-auto mt-16 max-w-4xl px-5"
                     })
                 }
             "
-            class="space-y-6 rounded-2xl bg-gray-100 p-7 dark:bg-mirage"
+            class="dark:bg-mirage space-y-6 rounded-2xl bg-gray-100 p-7"
         >
             {{-- Plan Name --}}
             <h3
@@ -656,7 +656,7 @@ class="text-2xl font-semibold"
                 license management, early access to build services, and other
                 enterprise-oriented services for businesses.
             </p>
-            <div class="">
+            <div>
                 <a
                     href="{{ route('partners') }}"
                     class="mt-5 block w-full max-w-xs rounded-2xl bg-zinc-200 py-4 text-center text-sm font-medium transition duration-200 ease-in-out hover:bg-zinc-800 hover:text-white dark:bg-slate-700/30 dark:hover:bg-slate-700/40"