From dcebd797a67db0af921d9d4eda4717316c7e96cc Mon Sep 17 00:00:00 2001
From: Tony Lea <tnylea@gmail.com>
Date: Tue, 4 Jun 2024 13:09:43 -0400
Subject: [PATCH] Adding final updates to auth website

---
 includes/docs-sidebar.html           | 24 +++++++++----------
 includes/docs/section-header.html    |  2 +-
 includes/header.html                 | 14 ++++++-----
 includes/home/browser-tab-pages.html | 12 +++++-----
 includes/home/customize.html         | 36 ++++++++++++++--------------
 includes/home/hero.html              |  6 ++---
 includes/home/never-worry.html       | 14 ++++-------
 includes/home/tab.html               |  6 ++---
 includes/mobilemenu.html             | 14 +++++++++++
 includes/search.html                 |  2 +-
 layouts/main.html                    |  3 +++
 pages/docs/[content].html            | 13 ++++------
 pages/index.html                     | 15 ++++++++++++
 13 files changed, 93 insertions(+), 68 deletions(-)
 create mode 100644 includes/mobilemenu.html

diff --git a/includes/docs-sidebar.html b/includes/docs-sidebar.html
index 132b281..5d7f8c4 100644
--- a/includes/docs-sidebar.html
+++ b/includes/docs-sidebar.html
@@ -9,7 +9,7 @@
                 <span class="relative truncate">Introduction</span>
             </button>
             <button x-data="{ isActive: false }" id="installation-docs" @set-active="isActive=true" @set-inactive="isActive=false" hx-get="{ url('/docs/install') }" hx-target="#docs-content" hx-select="#docs-content" hx-swap="outerHTML transition:true" hx-push-url="true" @click="scrollTop(); route=$el.getAttribute('hx-get'); leftSidebar=false;"
-                :class="{ 'text-white before:bg-neutral-800' : route.includes('/docs/install') || isActive, 'text-neutral-400 hover:text-white hover:before:bg-neutral-800/50' : !route.includes('/docs/install') || !isActive }"
+                :class="{ 'text-white before:bg-neutral-800' : route.includes('/docs/install') || isActive, 'text-neutral-400 hover:text-white hover:before:bg-neutral-800/50' : !route.includes('/docs/install') }"
                 class="flex relative gap-2 items-center px-3 py-1.5 w-full text-sm font-medium rounded-md group focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-1 focus-visible:before:ring-primary-400 before:absolute before:inset-px before:rounded-md disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-400">
                 <svg class="z-20 flex-shrink-0 w-4 h-4 text-neutral-200" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g fill="none" stroke="none"><path d="M18.2502 20.25C19.3548 20.25 20.2502 19.3546 20.2502 18.25L20.2501 9.45157C20.2501 8.99742 20.0955 8.5568 19.8118 8.20217L16.8505 4.50059C16.4709 4.02617 15.8963 3.75 15.2888 3.75L5.75 3.75C4.64543 3.75 3.75 4.64543 3.75 5.75V18.25C3.75 19.3546 4.64543 20.25 5.75 20.25H18.2502Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M15.25 8C12.6715 8 11.0903 8 8.75041 8C8.19813 8 7.75 7.55228 7.75 7L7.75 4.25" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M7.75 20.25V14.5C7.75 13.6716 8.42157 13 9.25 13H14.75C15.5784 13 16.25 13.6716 16.25 14.5V20.25" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></g></svg>
                 <span class="relative truncate">Installation</span>
@@ -20,13 +20,13 @@
         <div class="px-2.5 py-1 text-sm font-medium"><span class="truncate">Basics</span></div>
         <nav class="relative mt-1">
             <button id="authentication-pages" hx-get="{ url('/docs/authentication-pages') }" hx-target="#docs-content" hx-select="#docs-content" hx-swap="outerHTML transition:true" hx-push-url="true" @click="scrollTop(); route=$el.getAttribute('hx-get'); leftSidebar=false;"
-                :class="{ 'text-white before:bg-neutral-800' : $el.getAttribute('hx-get').includes(route), 'text-neutral-400 hover:text-white hover:before:bg-neutral-800/50' : !$el.getAttribute('hx-get').includes(route) }"
+                :class="{ 'text-white before:bg-neutral-800' : $el.getAttribute('hx-get').includes(route) && route != '/', 'text-neutral-400 hover:text-white hover:before:bg-neutral-800/50' : !$el.getAttribute('hx-get').includes(route) || route == '/' }"
                 class="flex relative gap-2 items-center px-3 py-1.5 w-full text-sm font-medium rounded-md group focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-1 focus-visible:before:ring-primary-400 before:absolute before:inset-px before:rounded-md disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-400 text-neutral-400 hover:text-white hover:before:bg-neutral-800/50" x-cloak>
                 <svg class="z-20 flex-shrink-0 w-4 h-4 text-neutral-200" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><g fill="none" class="signal-icon-wrapper" stroke="none"><path d="M3.75 12.75a3 3 0 0 1 3-3h10.5a3 3 0 0 1 3 3v5.5a3 3 0 0 1-3 3H6.75a3 3 0 0 1-3-3v-5.5z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M12 16.25v-1.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M16.25 9.75V7a4.25 4.25 0 0 0-8.5 0v2.75" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></g></svg>
                 <span class="relative truncate">Authentication Pages</span>
             </button>
             <button id="setup-customizations" hx-get="{ url('/docs/setup-customizations') }" hx-target="#docs-content" hx-select="#docs-content" hx-swap="outerHTML transition:true" hx-push-url="true" @click="scrollTop(); route=$el.getAttribute('hx-get'); leftSidebar=false;"
-                :class="{ 'text-white before:bg-neutral-800' : $el.getAttribute('hx-get').includes(route), 'text-neutral-400 hover:text-white hover:before:bg-neutral-800/50' : !$el.getAttribute('hx-get').includes(route) }"
+                :class="{ 'text-white before:bg-neutral-800' : $el.getAttribute('hx-get').includes(route) && route != '/', 'text-neutral-400 hover:text-white hover:before:bg-neutral-800/50' : !$el.getAttribute('hx-get').includes(route) || route == '/' }"
                 class="flex relative gap-2 items-center px-3 py-1.5 w-full text-sm font-medium rounded-md group focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-1 focus-visible:before:ring-primary-400 before:absolute before:inset-px before:rounded-md disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-400" x-cloak>
                 <svg class="z-20 flex-shrink-0 w-4 h-4 text-neutral-200" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g fill="none" class="signal-icon-wrapper" stroke="none"><path d="M3.62356 10.3796L9.37156 4.62898C10.5457 3.45434 12.4507 3.45712 13.6213 4.63518L17.3865 8.42408C18.5538 9.59873 18.5485 11.497 17.3747 12.6652L11.6218 18.3903C10.449 19.5574 8.55278 19.5547 7.38336 18.3843L3.62313 14.6208C2.4526 13.4493 2.4528 11.5509 3.62356 10.3796Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M4.74951 2.75L11.2495 9.25" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M18.9503 14.7835C18.9728 14.7467 19.0262 14.7466 19.0488 14.7834L20.9184 17.8213C21.3632 18.5442 21.363 19.456 20.9178 20.1787C20.0388 21.6054 17.9639 21.6032 17.0876 20.1749C16.6452 19.454 16.6449 18.5457 17.0869 17.8245L18.9503 14.7835Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></g></svg>
                 <span class="relative truncate">Setup & Customizations</span>
@@ -37,31 +37,31 @@
         <div class="px-2.5 py-1 text-sm font-medium"><span class="truncate">Configuration</span></div>
         <nav class="relative mt-1">
             <button id="social-providers" hx-get="{ url('/docs/config/social-providers') }" hx-target="#docs-content" hx-select="#docs-content" hx-swap="outerHTML transition:true" hx-push-url="true" @click="scrollTop(); route=$el.getAttribute('hx-get'); leftSidebar=false;"
-                :class="{ 'text-white before:bg-neutral-800' : $el.getAttribute('hx-get').includes(route), 'text-neutral-400 hover:text-white hover:before:bg-neutral-800/50' : !$el.getAttribute('hx-get').includes(route) }"
+                :class="{ 'text-white before:bg-neutral-800' : $el.getAttribute('hx-get').includes(route) && route != '/', 'text-neutral-400 hover:text-white hover:before:bg-neutral-800/50' : !$el.getAttribute('hx-get').includes(route) || route == '/' }"
                 class="flex relative gap-2 items-center px-3 py-1.5 w-full text-sm font-medium rounded-md group focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-1 focus-visible:before:ring-primary-400 before:absolute before:inset-px before:rounded-md disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-400 text-neutral-400 hover:text-white hover:before:bg-neutral-800/50" x-cloak>
                 <svg class="z-20 flex-shrink-0 w-4 h-4 text-neutral-200" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><g fill="none" class="signal-icon-wrapper" stroke="none"><path d="M8.75 7.742V2.75" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M15.25 7.746V2.75" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M12 21.25v-2.01" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M4.75 9.028c0-.706.571-1.278 1.277-1.278h11.946c.706 0 1.278.572 1.278 1.278v2.971a7.25 7.25 0 0 1-14.502 0V9.028z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></g></svg>
                 <span class="relative truncate">Social Providers</span>
             </button>
             <button id="two-factor-auth" hx-get="{ url('/docs/config/two-factor-auth') }" hx-target="#docs-content" hx-select="#docs-content" hx-swap="outerHTML transition:true" hx-push-url="true" @click="scrollTop(); route=$el.getAttribute('hx-get'); leftSidebar=false;"
-                :class="{ 'text-white before:bg-neutral-800' : $el.getAttribute('hx-get').includes(route), 'text-neutral-400 hover:text-white hover:before:bg-neutral-800/50' : !$el.getAttribute('hx-get').includes(route) }"
+                :class="{ 'text-white before:bg-neutral-800' : $el.getAttribute('hx-get').includes(route) && route != '/', 'text-neutral-400 hover:text-white hover:before:bg-neutral-800/50' : !$el.getAttribute('hx-get').includes(route) || route == '/' }"
                 class="flex relative gap-2 items-center px-3 py-1.5 w-full text-sm font-medium rounded-md group focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-1 focus-visible:before:ring-primary-400 before:absolute before:inset-px before:rounded-md disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-400 text-neutral-400 hover:text-white hover:before:bg-neutral-800/50" x-cloak>
                 <svg class="z-20 flex-shrink-0 w-4 h-4 text-neutral-200" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g fill="none" class="signal-icon-wrapper" stroke="none"><path d="M18.2501 11.25C19.907 11.25 21.2502 9.90681 21.2501 8.24992L21.2501 6.74992C21.25 5.0931 19.9069 3.75 18.2501 3.75L5.75 3.75C4.09315 3.75 2.75 5.09315 2.75 6.75V8.25C2.75 9.90685 4.09315 11.25 5.75 11.25H18.2501Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M3.75 17H15.7541M4.75195 16.998L4.75195 20.25M7.75195 16.998V19.25M20.25 17C20.25 18.2426 19.2426 19.25 18 19.25C16.7574 19.25 15.75 18.2426 15.75 17C15.75 15.7574 16.7574 14.75 18 14.75C19.2426 14.75 20.25 15.7574 20.25 17Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M8.25 7.4978C8.25 7.91202 7.91421 8.2478 7.5 8.2478C7.08579 8.2478 6.75 7.91202 6.75 7.4978C6.75 7.08359 7.08579 6.7478 7.5 6.7478C7.91421 6.7478 8.25 7.08359 8.25 7.4978Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M12.75 7.4978C12.75 7.91202 12.4142 8.2478 12 8.2478C11.5858 8.2478 11.25 7.91202 11.25 7.4978C11.25 7.08359 11.5858 6.7478 12 6.7478C12.4142 6.7478 12.75 7.08359 12.75 7.4978Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M17.25 7.4978C17.25 7.91202 16.9142 8.2478 16.5 8.2478C16.0858 8.2478 15.75 7.91202 15.75 7.4978C15.75 7.08359 16.0858 6.7478 16.5 6.7478C16.9142 6.7478 17.25 7.08359 17.25 7.4978Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></g></svg>
                 <span class="relative truncate">Two-Factor Auth</span>
             </button>
             <button id="email-template" hx-get="{ url('/docs/config/email') }" hx-target="#docs-content" hx-select="#docs-content" hx-swap="outerHTML transition:true" hx-push-url="true" @click="scrollTop(); route=$el.getAttribute('hx-get'); leftSidebar=false;"
-                :class="{ 'text-white before:bg-neutral-800' : $el.getAttribute('hx-get').includes(route), 'text-neutral-400 hover:text-white hover:before:bg-neutral-800/50' : !$el.getAttribute('hx-get').includes(route) }"
+                :class="{ 'text-white before:bg-neutral-800' : $el.getAttribute('hx-get').includes(route) && route != '/', 'text-neutral-400 hover:text-white hover:before:bg-neutral-800/50' : !$el.getAttribute('hx-get').includes(route) || route == '/' }"
                 class="flex relative gap-2 items-center px-3 py-1.5 w-full text-sm font-medium rounded-md group focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-1 focus-visible:before:ring-primary-400 before:absolute before:inset-px before:rounded-md disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-400 text-neutral-400 hover:text-white hover:before:bg-neutral-800/50" x-cloak>
                 <svg class="z-20 flex-shrink-0 w-4 h-4 text-neutral-200" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><g fill="none" stroke="none"><path d="M2.75 7.75a4 4 0 0 1 4-4h10.5a4 4 0 0 1 4 4v8.5a4 4 0 0 1-4 4H6.75a4 4 0 0 1-4-4v-8.5z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M21.25 7.75l-7.404 3.852a4 4 0 0 1-3.693 0L2.75 7.75" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></g></svg>
                 <span class="relative truncate">Email Template</span>
             </button>
             <button id="config-files" hx-get="{ url('/docs/config/files') }" hx-target="#docs-content" hx-select="#docs-content" hx-swap="outerHTML transition:true" hx-push-url="true" @click="scrollTop(); route=$el.getAttribute('hx-get'); leftSidebar=false;"
-                :class="{ 'text-white before:bg-neutral-800' : $el.getAttribute('hx-get').includes(route), 'text-neutral-400 hover:text-white hover:before:bg-neutral-800/50' : !$el.getAttribute('hx-get').includes(route) }"
+                :class="{ 'text-white before:bg-neutral-800' : $el.getAttribute('hx-get').includes(route) && route != '/', 'text-neutral-400 hover:text-white hover:before:bg-neutral-800/50' : !$el.getAttribute('hx-get').includes(route) || route == '/' }"
                 class="flex relative gap-2 items-center px-3 py-1.5 w-full text-sm font-medium rounded-md group focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-1 focus-visible:before:ring-primary-400 before:absolute before:inset-px before:rounded-md disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-400 text-neutral-400 hover:text-white hover:before:bg-neutral-800/50" x-cloak>
                 <svg class="z-20 flex-shrink-0 w-4 h-4 text-neutral-200" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><g fill="none" stroke="none"><path d="M9.75 4.238c0-.822.666-1.488 1.488-1.488h1.524c.822 0 1.488.666 1.488 1.488v.299c0 1.585 1.716 2.575 3.088 1.783a1.373 1.373 0 0 1 1.875.502l.878 1.52a1.373 1.373 0 0 1-.503 1.875c-1.372.792-1.372 2.774 0 3.566.657.379.882 1.218.503 1.875l-.878 1.52a1.373 1.373 0 0 1-1.875.502c-1.372-.792-3.088.198-3.088 1.783v.3c0 .82-.666 1.487-1.488 1.487h-1.524a1.488 1.488 0 0 1-1.488-1.488v-.299c0-1.585-1.716-2.575-3.088-1.783a1.373 1.373 0 0 1-1.875-.502l-.878-1.52a1.373 1.373 0 0 1 .503-1.875c1.372-.792 1.372-2.774 0-3.566a1.373 1.373 0 0 1-.503-1.875l.878-1.52a1.373 1.373 0 0 1 1.875-.502c1.372.792 3.088-.198 3.088-1.783v-.3z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M15.25 12a3.25 3.25 0 1 1-6.5 0 3.25 3.25 0 0 1 6.5 0z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></g></svg>
                 <span class="relative truncate">Config Files</span>
             </button>
             <button id="github-action" hx-get="{ url('/docs/config/github-action') }" hx-target="#docs-content" hx-select="#docs-content" hx-swap="outerHTML transition:true" hx-push-url="true" @click="scrollTop(); route=$el.getAttribute('hx-get'); leftSidebar=false;"
-                :class="{ 'text-white before:bg-neutral-800' : $el.getAttribute('hx-get').includes(route), 'text-neutral-400 hover:text-white hover:before:bg-neutral-800/50' : !$el.getAttribute('hx-get').includes(route) }"
+                :class="{ 'text-white before:bg-neutral-800' : $el.getAttribute('hx-get').includes(route) && route != '/', 'text-neutral-400 hover:text-white hover:before:bg-neutral-800/50' : !$el.getAttribute('hx-get').includes(route) || route == '/' }"
                 class="flex relative gap-2 items-center px-3 py-1.5 w-full text-sm font-medium rounded-md group focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-1 focus-visible:before:ring-primary-400 before:absolute before:inset-px before:rounded-md disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-400 text-neutral-400 hover:text-white hover:before:bg-neutral-800/50" x-cloak>
                 <svg class="z-20 flex-shrink-0 w-4 h-4 text-neutral-200" viewBox="0 0 256 256" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#a)" fill="white"><path d="M53.604 0c29.604 0 53.604 23.992 53.604 53.59 0 29.09-23.189 52.75-52.093 53.553 0 2.461.109 7.111 1.502 9.919 1.932 3.894 13.524 11.145 24.891 11.145h4.084c2.567-18.271 18.257-32.332 37.24-32.332 18.906 0 34.55 13.946 37.211 32.109h21.129c2.662-18.163 18.305-32.109 37.211-32.109 20.775 0 37.617 16.837 37.617 37.607 0 20.769-16.842 37.606-37.617 37.606-18.906 0-34.55-13.948-37.211-32.111h-21.128c-2.661 18.163-18.305 32.111-37.212 32.111-18.871 0-34.494-13.893-37.198-32.007l-4.516.135c-7.435-.056-15.29-2.042-21.598-6.328-1.72-1.169-3.415-2.397-5.182-3.561v2.442c-.01.79-.153 12.657-.164 25.833v2.79c.005 8.641.073 17.545.277 24.039.446 14.247 12.034 25.746 24.822 28.437 1.663.349 4.52.394 6.321.238 2.571-18.264 18.259-32.32 37.238-32.32 20.774 0 37.616 16.838 37.616 37.607S143.606 256 122.832 256c-18.769 0-34.323-13.744-37.153-31.714h-3.254c-24.436-1.334-39.628-23.746-39.363-41.923.334-22.877.082-45.764.079-68.647v-7.564C18.546 101.286 0 79.606 0 53.591 0 23.992 23.999 0 53.604 0Zm69.228 191.779c-14.701 0-26.62 11.916-26.62 26.614 0 14.699 11.919 26.614 26.62 26.614 14.702 0 26.62-11.915 26.62-26.614 0-14.698-11.918-26.614-26.62-26.614Zm0-84.911c-14.701 0-26.62 11.915-26.62 26.614 0 14.697 11.919 26.613 26.62 26.613 14.702 0 26.62-11.916 26.62-26.613 0-14.699-11.918-26.614-26.62-26.614Zm95.551 0c-14.702 0-26.619 11.915-26.619 26.614 0 14.697 11.917 26.613 26.619 26.613 14.703 0 26.621-11.916 26.621-26.613 0-14.699-11.918-26.614-26.621-26.614Zm15.161 15.408a5.496 5.496 0 0 1 .17 7.606l-.16.168-16.309 16.345a5.499 5.499 0 0 1-7.577.198l-.172-.163-7.985-7.86a5.496 5.496 0 0 1-.061-7.773 5.5 5.5 0 0 1 7.607-.22l.168.16 4.092 4.027 12.452-12.477a5.498 5.498 0 0 1 7.775-.011Zm-95.99-.08a5.496 5.496 0 0 1 .171 7.606l-.161.168-16.309 16.344a5.498 5.498 0 0 1-7.577.198l-.172-.163-7.985-7.86a5.498 5.498 0 0 1 7.546-7.992l.168.16 4.093 4.027 12.451-12.478a5.499 5.499 0 0 1 7.775-.01ZM53.604 10.993c-23.532 0-42.608 19.07-42.608 42.598 0 23.525 19.076 42.597 42.608 42.597 23.532 0 42.608-19.072 42.608-42.597 0-23.527-19.076-42.598-42.608-42.598ZM49.171 28.13A743.562 743.562 0 0 1 75.7 44.842c7.308 4.82 7.29 13.562-.1 18.393a608.466 608.466 0 0 1-27.058 16.713c-7.455 4.339-15.8-.651-16.002-9.344-.13-5.603-.024-11.212-.032-16.818-.006-5.454-.113-10.911.019-16.363.222-9.248 8.736-14.066 16.643-9.293Zm-5.91 8.872v3.868c0 1.916 0 3.806-.002 5.675V55.734c0 4.231.002 8.394.01 12.558.003 1.96 1.023 1.88 2.343 1.063 7.605-4.714 15.214-9.423 22.827-14.127 1.258-.776 1.294-1.587.06-2.365-8.154-5.139-16.318-10.26-25.238-15.862Z"/><path d="M133.227 223.879a5.498 5.498 0 1 0-5.498-5.496 5.498 5.498 0 0 0 5.498 5.496Z"/><path d="M112.179 223.879a5.498 5.498 0 1 0-5.498-5.496 5.498 5.498 0 0 0 5.498 5.496Z"/><path d="M218.384 245.007c-14.702 0-26.62-11.915-26.62-26.614 0-14.698 11.918-26.614 26.62-26.614 14.701 0 26.62 11.916 26.62 26.614 0 14.699-11.919 26.614-26.62 26.614Zm0-64.221c-18.906 0-34.551 13.948-37.211 32.111h-6.153c-2.685 0-4.864 2.461-4.864 5.496 0 3.036 2.179 5.497 4.864 5.497h6.153c2.66 18.163 18.305 32.11 37.211 32.11C239.158 256 256 239.162 256 218.393s-16.842-37.607-37.616-37.607Z"/></g><defs><clipPath id="a"><rect width="256" height="256" fill="white"/></clipPath></defs></svg>
                 <span class="relative truncate">Github Action</span>
@@ -72,13 +72,13 @@
         <div class="px-2.5 py-1 text-sm font-medium"><span class="truncate">Extending Functionality</span></div>
         <nav class="relative mt-1">
             <button id="authentication-events" hx-get="{ url('/docs/extend/events') }" hx-target="#docs-content" hx-select="#docs-content" hx-swap="outerHTML transition:true" hx-push-url="true" @click="scrollTop(); route=$el.getAttribute('hx-get'); leftSidebar=false;"
-                :class="{ 'text-white before:bg-neutral-800' : $el.getAttribute('hx-get').includes(route), 'text-neutral-400 hover:text-white hover:before:bg-neutral-800/50' : !$el.getAttribute('hx-get').includes(route) }"
+                :class="{ 'text-white before:bg-neutral-800' : $el.getAttribute('hx-get').includes(route) && route != '/', 'text-neutral-400 hover:text-white hover:before:bg-neutral-800/50' : !$el.getAttribute('hx-get').includes(route) || route == '/' }"
                 class="flex relative gap-2 items-center px-3 py-1.5 w-full text-sm font-medium rounded-md group focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-1 focus-visible:before:ring-primary-400 before:absolute before:inset-px before:rounded-md disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-400 text-neutral-400 hover:text-white hover:before:bg-neutral-800/50" x-cloak>
                 <svg class="z-20 flex-shrink-0 w-4 h-4 text-neutral-200" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><g fill="none" class="signal-icon-wrapper" stroke="none"><path d="M5.25 18.25c-1.589-1.662-2.5-3.77-2.5-6.25a9.25 9.25 0 1 1 18.5 0c0 2.443-.948 4.596-2.496 6.25" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M7.44 16.25c-1.074-1.123-1.69-2.548-1.69-4.223a6.25 6.25 0 0 1 12.5 0c0 1.65-.64 3.105-1.686 4.223" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M9.629 14.25a3.098 3.098 0 0 1-.879-2.196 3.25 3.25 0 1 1 6.5 0c0 .858-.333 1.614-.877 2.195" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M12 21.25v-9.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></g></svg>
                 <span class="relative truncate">Authentication Events</span>
             </button>
             <button id="custom-components" hx-get="{ url('/docs/extend/components') }" hx-target="#docs-content" hx-select="#docs-content" hx-swap="outerHTML transition:true" hx-push-url="true" @click="scrollTop(); route=$el.getAttribute('hx-get'); leftSidebar=false;"
-                :class="{ 'text-white before:bg-neutral-800' : $el.getAttribute('hx-get').includes(route), 'text-neutral-400 hover:text-white hover:before:bg-neutral-800/50' : !$el.getAttribute('hx-get').includes(route) }"
+                :class="{ 'text-white before:bg-neutral-800' : $el.getAttribute('hx-get').includes(route) && route != '/', 'text-neutral-400 hover:text-white hover:before:bg-neutral-800/50' : !$el.getAttribute('hx-get').includes(route) || route == '/' }"
                 class="flex relative gap-2 items-center px-3 py-1.5 w-full text-sm font-medium rounded-md group focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-1 focus-visible:before:ring-primary-400 before:absolute before:inset-px before:rounded-md disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-400" x-cloak>
                 <svg class="z-20 flex-shrink-0 w-4 h-4 text-neutral-200" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g fill="none" class="signal-icon-wrapper" stroke="none"><path d="M19.4753 8.17105C18.906 8.74038 18.1356 8.9861 17.3927 8.90821L20.6814 12.1969C21.4624 12.9779 21.4624 14.2443 20.6814 15.0253L19.9808 15.7258C19.5903 16.1164 18.9571 16.1164 18.5666 15.7258L18.2662 15.4254C17.4871 14.6463 16.224 14.6463 15.445 15.4254C14.666 16.2044 14.666 17.4675 15.445 18.2466L15.7454 18.547C16.136 18.9375 16.136 19.5707 15.7454 19.9612L15.045 20.6617C14.2639 21.4428 12.9976 21.4428 12.2165 20.6617L8.92812 17.3733C9.00597 18.1161 8.76024 18.8865 8.19095 19.4558C7.18932 20.4574 5.56536 20.4574 4.56373 19.4558C3.56211 18.4541 3.56211 16.8302 4.56373 15.8286C5.13303 15.2593 5.90336 15.0135 6.64621 15.0914L3.35727 11.8025C2.57622 11.0214 2.57622 9.75507 3.35727 8.97402L4.05776 8.27353C4.44829 7.88301 5.08145 7.88301 5.47198 8.27353L5.77243 8.57398C6.55147 9.35303 7.81455 9.35303 8.5936 8.57398C9.37264 7.79494 9.37264 6.53186 8.5936 5.75282L8.29314 5.45237C7.90262 5.06184 7.90262 4.42868 8.29314 4.03815L8.99368 3.33762C9.77473 2.55657 11.0411 2.55657 11.8221 3.33762L15.1109 6.62645C15.033 5.88356 15.2788 5.11317 15.8481 4.54384C16.8497 3.54221 18.4737 3.54221 19.4753 4.54384C20.4769 5.54546 20.4769 7.16942 19.4753 8.17105Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></g></svg>
                 <span class="relative truncate">Custom Components</span>
@@ -88,13 +88,13 @@
     <div class="relative">
         <div class="px-2.5 py-1 text-sm font-medium"><span class="truncate">Resources</span></div>
         <button id="contributing" hx-get="{ url('/docs/contributing') }" hx-target="#docs-content" hx-select="#docs-content" hx-swap="outerHTML transition:true" hx-push-url="true" @click="scrollTop(); route=$el.getAttribute('hx-get'); leftSidebar=false;"
-            :class="{ 'text-white before:bg-neutral-800' : $el.getAttribute('hx-get').includes(route), 'text-neutral-400 hover:text-white hover:before:bg-neutral-800/50' : !$el.getAttribute('hx-get').includes(route) }"
+            :class="{ 'text-white before:bg-neutral-800' : $el.getAttribute('hx-get').includes(route) && route != '/', 'text-neutral-400 hover:text-white hover:before:bg-neutral-800/50' : !$el.getAttribute('hx-get').includes(route) || route == '/' }"
             class="flex relative gap-2 items-center px-3 py-1.5 w-full text-sm font-medium rounded-md group focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-1 focus-visible:before:ring-primary-400 before:absolute before:inset-px before:rounded-md disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-400" x-cloak>
             <svg class="z-20 flex-shrink-0 w-4 h-4 text-neutral-200" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><g fill="none" class="signal-icon-wrapper" stroke="none"><path d="M3.75 11.75a3 3 0 0 1 3-3h10.5a3 3 0 0 1 3 3v5.5a3 3 0 0 1-3 3H6.75a3 3 0 0 1-3-3v-5.5z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M12 20.25V8.75m0 0c0-5.376-5.25-6.183-5.25-3.5 0 2.475 2.718 3.5 5.25 3.5zm0 0c0-5.376 5.25-6.183 5.25-3.5 0 2.475-2.719 3.5-5.25 3.5z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></g></svg>
             <span class="relative truncate">Contributing</span>
         </button>
         <button id="troubleshooting" hx-get="{ url('/docs/troubleshooting') }" hx-target="#docs-content" hx-select="#docs-content" hx-swap="outerHTML transition:true" hx-push-url="true" @click="scrollTop(); route=$el.getAttribute('hx-get'); leftSidebar=false;"
-            :class="{ 'text-white before:bg-neutral-800' : $el.getAttribute('hx-get').includes(route), 'text-neutral-400 hover:text-white hover:before:bg-neutral-800/50' : !$el.getAttribute('hx-get').includes(route) }"
+            :class="{ 'text-white before:bg-neutral-800' : $el.getAttribute('hx-get').includes(route) && route != '/', 'text-neutral-400 hover:text-white hover:before:bg-neutral-800/50' : !$el.getAttribute('hx-get').includes(route) || route == '/' }"
             class="flex relative gap-2 items-center px-3 py-1.5 w-full text-sm font-medium rounded-md group focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-1 focus-visible:before:ring-primary-400 before:absolute before:inset-px before:rounded-md disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-400" x-cloak>
             <svg class="z-20 flex-shrink-0 w-4 h-4 text-neutral-200" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><g fill="none" class="signal-icon-wrapper" stroke="none"><path d="M12 13.25v-4.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M12 17.25v-.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M3.03 17.252L10.27 4.75c.77-1.33 2.69-1.33 3.461 0l7.245 12.501c.772 1.333-.19 3.003-1.73 3.003H4.76c-1.541 0-2.503-1.67-1.731-3.003z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></g></svg>
             <span class="relative truncate">Troubleshooting</span>
diff --git a/includes/docs/section-header.html b/includes/docs/section-header.html
index 531139f..7feb26d 100644
--- a/includes/docs/section-header.html
+++ b/includes/docs/section-header.html
@@ -1,5 +1,5 @@
 <If condition="frontmatter.home == true">
-    <div class="flex relative flex-col pb-8">
+    <div class="flex relative flex-col sm:pb-8">
 
         <div class="flex relative flex-col">
             <h1 class="font-book font-styling text-white w-full font-rota mb-5 md:mb-3 lg:mb-6 text-left text-[2rem] lg:text-[2.5rem]  tracking-tight leading-[90%] xl:mt-0 mt-2 font-gradient">Welcome to the Auth Docs</h1>
diff --git a/includes/header.html b/includes/header.html
index 3d0174b..554bff9 100644
--- a/includes/header.html
+++ b/includes/header.html
@@ -134,12 +134,14 @@
                 
                 </div>
                 <div  class="flex relative items-center space-x-3 font-medium leading-10 md:flex-grow-0 md:flex-shrink-0 md:mt-0 md:text-right lg:flex-grow-0 lg:flex-shrink-0">
-                    <button @click="mobileMenu=!mobileMenu; $el.classList.add('scale-90'); setTimeout(function(){ $el.classList.remove('scale-90') }, 100)" class="block p-2 h-full rounded-lg duration-100 ease-out group md:hidden hover:bg-neutral-800/70">
-                        <div :class="{ '' : !mobileMenu, 'rotate-[0deg] scale-90 -translate-y-px origin-center' : mobileMenu }" class="flex flex-col justify-around items-end w-4 h-4 transition-all duration-300 linear">
-                            <div :class="{ 'w-full group-hover:w-2/3 -translate-x-px' : !mobileMenu, 'rotate-[45deg] w-full translate-y-1.5' : mobileMenu }" class="h-[2px] flex-shrink-0 rounded-lg transition-all linear duration-200 bg-zinc-100"></div>
-                            <div :class="{ 'opacity-100 w-1/2 group-hover:w-full -translate-x-px' : !mobileMenu, 'opacity-0' : mobileMenu }" class="h-[2px] flex-shrink-0 rounded-lg transition-all linear duration-200 bg-zinc-100 opacity-100"></div>
-                            <div :class="{ 'group-hover:w-1/2 w-2/3 -translate-x-px' : !mobileMenu, '-rotate-[45deg] w-full -translate-y-1' : mobileMenu }" class="h-[2px] flex-shrink-0 rounded-lg transition-all linear duration-200 bg-zinc-100"></div>
-                            </div>
+                    <button @click="leftSidebar=!leftSidebar; $el.classList.add('scale-90'); setTimeout(function(){ $el.classList.remove('scale-90') }, 100)" class="block p-2 h-full rounded-lg duration-100 ease-out group md:hidden hover:bg-neutral-800/70">
+                        <div class="flex flex-col justify-center items-center w-6 h-6 transition-all duration-300 linear">
+                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-full h-full text-white currentColor">
+                                <path fill-rule="evenodd" d="M3 9a.75.75 0 0 1 .75-.75h16.5a.75.75 0 0 1 0 1.5H3.75A.75.75 0 0 1 3 9Zm0 6.75a.75.75 0 0 1 .75-.75h16.5a.75.75 0 0 1 0 1.5H3.75a.75.75 0 0 1-.75-.75Z" clip-rule="evenodd" />
+                              </svg>
+                              
+
+                        </div>
                     </button>
                     <div :class="{ 'flex' : mobile, 'hidden md:flex' : !mobile }" class="hidden relative z-20 flex-col justify-center pr-5 mt-4 space-y-8 md:pr-3 lg:pr-0 md:flex-row md:space-y-0 md:items-center md:space-x-6 md:mt-0 md:flex">
                         <a href="https://github.com/thedevdojo/auth" target="_blank" class="px-5 font-medium group text-black bg-white flex text-sm h-10 items-center rounded-lg shadow-xl cursor-pointer hover:bg-[#c9fd02]">
diff --git a/includes/home/browser-tab-pages.html b/includes/home/browser-tab-pages.html
index 8c46791..f1ad79b 100644
--- a/includes/home/browser-tab-pages.html
+++ b/includes/home/browser-tab-pages.html
@@ -1,14 +1,14 @@
-<section class="overflow-hidden relative py-24 lg:pt-32 lg:pb-10">
+<section class="overflow-hidden relative px-6 py-24 md:px-8 lg:pt-32 lg:pb-10">
     <div class="mx-auto">
-        <div class="mx-auto mb-12 text-center md:max-w-3xl">
+        <div class="mx-auto mb-12 text-left md:text-center md:max-w-3xl">
             <span class="inline-block mb-4 text-sm font-medium tracking-tighter uppercase text-[#a9fd02]">Premium Authentication Experience</span>
-            <h2 class="text-5xl font-normal text-white md:text-6xl md:leading-tight font-rota">Plug-and-Play Authentication Pages for Your Application</h2>
+            <h2 class="text-4xl font-normal text-white md:text-6xl md:leading-tight font-rota">Plug-and-Play Auth<span class="hidden md:inline">entication</span> Pages for Your App<span class="hidden md:inline">lication</span></h2>
         </div>
         <div class="flex relative justify-center items-center py-0 w-full">
             <div class="overflow-hidden absolute inset-0 z-10 w-full h-full">
                 <div class="absolute inset-0 z-30 w-full bg-gradient-to-b from-black to-black via-zinc-900"></div>
             </div>
-            <div class="px-6 mx-auto w-full max-w-6xl md:px-8 h-[740px] z-40 mb-20">
+            <div class="mx-auto w-full max-w-6xl h-[700px] md:h-[740px] z-40 md:mb-20">
                 <browser-el x-data="{ 
                         interacted: false,
                         active: 'login',
@@ -69,7 +69,7 @@ <h2 class="text-5xl font-normal text-white md:text-6xl md:leading-tight font-rot
                             <div class="w-2.5 h-2.5 bg-yellow-500 rounded-full"></div>
                             <div class="w-2.5 h-2.5 bg-green-500 rounded-full"></div>
                         </div>
-                        <nav class="flex items-center pt-1.5 space-x-1 w-auto w-full h-full font-medium">
+                        <nav class="flex items-center pt-1.5 space-x-1 w-auto w-full h-full font-medium no-scrollbar" style="overflow-x:scroll">
                             <include src="home/tab.html" title="login"></include>
                             <include src="home/tab.html" title="register" marker="true"></include>
                             <include src="home/tab.html" title="verify"></include>
@@ -97,7 +97,7 @@ <h2 class="text-5xl font-normal text-white md:text-6xl md:leading-tight font-rot
 
                         </div>
                     </div>
-                    <div class="flex flex-1 justify-center items-center w-full bg-white rounded-b-xl border border-t-0 border-zinc-100">
+                    <div class="flex flex-1 justify-center items-center py-20 w-full bg-white rounded-b-xl border border-t-0 md:py-0 border-zinc-100">
                         <div x-show="active=='login'" x-transition:enter="transition ease-out delay-200 duration-300" x-transition:enter-start="opacity-0 scale-90" x-transition:enter-end="opacity-100 scale-100" x-transition:leave="transition ease-in duration-200" x-transition:leave-start="opacity-100 scale-100" x-transition:leave-end="opacity-0 scale-90" class="absolute -translate-y-4">
                             <img x-bind:src="'{ url('/assets/images/screens/login.jpg') }'" class="w-full max-w-[400px] rounded-lg" />
                         </div>
diff --git a/includes/home/customize.html b/includes/home/customize.html
index f468389..1ee8d1a 100644
--- a/includes/home/customize.html
+++ b/includes/home/customize.html
@@ -1,52 +1,52 @@
-<section class="overflow-hidden relative py-20 lg:pt-32 lg:pb-10">
+<section class="overflow-hidden relative pt-20 pb-10 sm:py-20 lg:pt-32 lg:pb-10">
     <div class="container px-6 mx-auto max-w-6xl lg:px-8">
-        <div class="mx-auto mb-12 text-center md:max-w-4xl">
+        <div class="mx-auto mb-12 text-left md:text-center md:max-w-4xl">
             <span class="inline-block mb-4 text-sm font-medium tracking-tighter uppercase text-[#a9fd02]">Easily make it your own</span>
-            <h2 class="text-5xl font-normal text-white md:text-6xl md:leading-tight font-rota">Customize and Configure<br> With Just a Few Clicks</h2>
+            <h2 class="text-4xl font-normal text-white md:text-6xl md:leading-tight font-rota">Customize and Configure<br> With Just a Few Clicks</h2>
         </div>
 
-        <div class="overflow-hidden relative px-16 py-24 mb-10 rounded-xl border border-zinc-700 bg-zinc-950 radial-background">
+        <div class="overflow-hidden relative px-16 pt-16 mb-10 rounded-xl border sm:pt-24 md:py-24 border-zinc-700 bg-zinc-950 radial-background">
             <div class="mx-auto max-w-6xl">
                 <div class="flex relative z-10 flex-wrap items-start -m-8">
-                    <div class="p-8 w-full md:w-1/3">
+                    <div class="pb-3 w-full sm:pb-10 md:p-8 md:w-1/2 lg:w-1/3">
                         <div class="mx-auto max-w-md text-left">
                             <div class="flex relative justify-center items-center p-px mb-5 w-10 h-10 rounded-lg border border-zinc-600">
                                 <div class="absolute hover:scale-[1.03] z-10 ease-out mb-0 flex items-center justify-center duration-300 bg-pink-200 rounded-lg w-10 h-10 sm:max-w-sm [background:linear-gradient(45deg,#090912,theme(colors.black)_50%,#090912)_padding-box,conic-gradient(from_var(--border-angle),theme(colors.slate.900/.48)_80%,_#75a522_86%,_#bcfb4f_90%,_#75a522_94%,_theme(colors.slate.900/.48))_border-box] border border-transparent animate-border"></div>
                                 <div class="flex absolute z-20 justify-center items-center w-full h-full bg-gradient-to-br rounded-md from-zinc-700 via-zinc-900 to-zinc-800"></div>
                                 <svg class="relative z-30 flex-shrink-0 w-5 h-5 text-white" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g fill="none" stroke="none"><path d="M3.62356 10.3796L9.37156 4.62898C10.5457 3.45434 12.4507 3.45712 13.6213 4.63518L17.3865 8.42408C18.5538 9.59873 18.5485 11.497 17.3747 12.6652L11.6218 18.3903C10.449 19.5574 8.55278 19.5547 7.38336 18.3843L3.62313 14.6208C2.4526 13.4493 2.4528 11.5509 3.62356 10.3796Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M4.74951 2.75L11.2495 9.25" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M18.9503 14.7835C18.9728 14.7467 19.0262 14.7466 19.0488 14.7834L20.9184 17.8213C21.3632 18.5442 21.363 19.456 20.9178 20.1787C20.0388 21.6054 17.9639 21.6032 17.0876 20.1749C16.6452 19.454 16.6449 18.5457 17.0869 17.8245L18.9503 14.7835Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></g></svg>
                             </div>
-                            <h2 class="mb-6 text-4xl font-bold text-white tracking-tighter-xl font-rota">Personalize to <br> Match Your Brand</h2>
+                            <h2 class="mb-2 text-2xl font-bold text-white sm:mb-6 sm:text-3xl md:text-4xl tracking-tighter-xl font-rota">Personalize to <br class="hidden md:block"> Match Your Brand</h2>
                             <p class="text-white text-opacity-60">Update your authentication pages with your colors and logo to seamlessly reflect your brand identity.</p>
                         </div>
                     </div>
-                    <div class="p-8 pt-5 pl-14 w-full h-full md:w-1/2">
-                        <img class="mx-auto md:mr-0 max-w-[300px] -translate-x-12 absolute rounded-xl" src="{ url('/assets/images/auth-screens/digital-ocean.jpg') }" alt="">
-                        <img class="mx-auto md:mr-0 max-w-[300px]  translate-x-[338px] shadow-xl rounded-xl absolute" src="{ url('/assets/images/auth-screens/openai.jpg') }" alt="">
-                        <img class="mx-auto md:mr-0 max-w-[300px] scale-[1.02] translate-x-[150px] shadow-xl -translate-y-10 rounded-xl absolute" src="{ url('/assets/images/auth-screens/starbucks.jpg') }" alt="">
+                    <div class="flex justify-center items-center p-0 pt-5 w-full h-auto translate-y-16 md:translate-y-0 md:pl-14 md:block md:w-1/2 lg:w-1/2 md:h-full">
+                        <img class="mx-auto md:mr-0 max-w-[300px] sm:block hidden -translate-x-20 md:-translate-x-12 absolute rounded-xl" src="{ url('/assets/images/auth-screens/digital-ocean.jpg') }" alt="">
+                        <img class="mx-auto md:mr-0 max-w-[300px] hidden sm:block translate-x-20 md:translate-x-[338px] shadow-xl rounded-xl absolute" src="{ url('/assets/images/auth-screens/openai.jpg') }" alt="">
+                        <img class="mx-auto md:mr-0 w-full sm:max-w-[300px] scale-[1.02] md:translate-x-[150px] shadow-xl -translate-y-10 rounded-xl relative md:absolute" src="{ url('/assets/images/auth-screens/starbucks.jpg') }" alt="">
                     </div>
                 </div>
             </div>
         </div>
 
         <div class="flex flex-wrap">
-            <div class="pr-5 w-full md:w-1/2">
+            <div class="pb-10 w-full md:pr-5 md:w-1/2 md:pb-0">
                 <div class="overflow-hidden relative h-full rounded-2xl border border-zinc-700 bg-zinc-950 radial-background">
-                      <div class="p-16 mx-auto max-w-lg text-left">
-                        <h2 class="mb-6 text-4xl font-bold text-white tracking-tighter-xl font-rota">Simple Authentication <br> Setup Screen</h2>
+                      <div class="p-8 mx-auto max-w-lg text-left sm:p-16">
+                        <h2 class="mb-2 text-2xl font-bold text-white sm:mb-6 sm:text-3xl md:text-4xl tracking-tighter-xl font-rota">Simple Authentication <br class="hidden md:block"> Setup Screen</h2>
                         <p class="text-white text-opacity-60">Visit the <strong class="font-mono text-white">/auth/setup</strong> page to easily setup and configure the authentication for your application.</p>
                     </div>
-                    <div class="relative right-0 bottom-0 pl-12">
+                    <div class="relative right-0 bottom-0 pl-6 sm:pl-12">
                       <img class="w-full h-full rounded-tl-lg" src="{ url('/assets/images/auth-screen.jpeg') }" alt="" />
                     </div>
                 </div>
             </div>
-            <div class="pl-5 w-full md:w-1/2">
+            <div class="w-full md:pl-5 md:w-1/2">
               <div class="overflow-hidden relative h-full rounded-2xl border border-zinc-700 bg-zinc-950 radial-background">
-                    <div class="p-16 mx-auto max-w-lg text-left">
-                      <h2 class="mb-6 text-4xl font-bold text-white tracking-tighter-xl font-rota">Open Source features for every use-case</h2>
+                    <div class="p-8 mx-auto max-w-lg text-left sm:p-16">
+                      <h2 class="mb-2 text-2xl font-bold text-white sm:mb-6 sm:text-3xl md:text-4xl tracking-tighter-xl font-rota">Open Source features for every use-case</h2>
                       <p class="text-white text-opacity-60">Integrate into any new or existing Laravel application for plug-in-play authentication features.</p>
                   </div>
-                  <div class="relative right-0 bottom-0 pr-12">
+                  <div class="relative right-0 bottom-0 pr-6 sm:pr-12">
                     <img class="w-full h-full rounded-tr-lg" src="{ url('/assets/images/github.jpg') }" alt="" />
                   </div>
               </div>  
diff --git a/includes/home/hero.html b/includes/home/hero.html
index bc6f167..9db5ffb 100644
--- a/includes/home/hero.html
+++ b/includes/home/hero.html
@@ -13,10 +13,10 @@
     <div class="px-5 mx-auto w-full max-w-7xl h-full flex-1 flex flex-col justify-between md:px-10 pt-24 relative z-[103]">
         <div class="relative w-full h-px"></div>
         <!-- Heading Content -->
-        <div class="pt-24 mx-auto max-w-5xl text-left sm:text-center">
-            <h1 class="pb-4 mb-2 text-4xl font-medium text-white font-rota md:leading-tight md:text-7xl">Customizable, Drop-in Ready Authentication for Laravel</h1>
+        <div class="pt-16 mx-auto max-w-5xl text-left lg:pt-24 sm:text-center">
+            <h1 class="pb-4 mb-2 text-4xl font-medium text-white font-rota md:leading-tight sm:text-5xl lg:text-7xl">Customizable, Drop-in Ready <br> Authentication for Laravel</h1>
             <!-- Seamless & Configurable Authentication for Laravel -->
-            <p class="mx-auto mb-8 max-w-3xl text-base font-light leading-relaxed text-white opacity-80 sm:text-lg lg:text-xl lg:mb-12 text-balance">Easily add Login, Registration, Email Verification, Forgot Password, Social Login, and Two-Factor Auth in a SNAP! Then, easily customize it to fit your brand. </p>
+            <p class="mx-auto mb-8 text-base font-light leading-relaxed text-white opacity-80 sm:max-w-xl lg:max-w-3xl sm:text-base lg:text-xl lg:mb-12 text-balance">Easily add Login, Registration, Email Verification, Forgot Password, Social Login, and Two-Factor Auth in a SNAP! Then, easily customize it to fit your brand. </p>
 
             <div class="relative hover:scale-[1.03] ease-out mb-0 duration-300 bg-pink-200 rounded-lg w-full sm:max-w-sm mx-auto [background:linear-gradient(45deg,#090912,theme(colors.black)_50%,#090912)_padding-box,conic-gradient(from_var(--border-angle),theme(colors.slate.900/.48)_80%,_#75a522_86%,_#bcfb4f_90%,_#75a522_94%,_theme(colors.slate.900/.48))_border-box] border border-transparent animate-border">
                 <div class="relative mx-auto w-full h-auto font-mono text-base font-medium text-left text-white bg-gradient-to-br to-black rounded-lg border shadow-sm duration-300 ease-out sm:inline-block border-zinc-700 radial-background group from-neutral-900">
diff --git a/includes/home/never-worry.html b/includes/home/never-worry.html
index ec4806e..833c7cb 100644
--- a/includes/home/never-worry.html
+++ b/includes/home/never-worry.html
@@ -1,17 +1,13 @@
-<div class="mx-auto mb-20 max-w-6xl sm:px-6 lg:px-8 font-everett [text-wrap:balance]">
+<div class="mx-auto mb-10 sm:mb-20 max-w-6xl px-6 lg:px-8 font-everett [text-wrap:balance]">
     <div class="relative p-px rounded-xl group">
-
-        <div class="flex isolate overflow-hidden relative z-50 items-center p-16 bg-gradient-to-r from-black border radial-background to-zinc-900 border-zinc-700 sm:rounded-xl">
-
-            <div class="pr-10 mx-auto text-left">
-                <h2 class="mb-6 text-4xl font-bold text-white tracking-tighter-xl font-rota">Never Worry About Auth Again</h2>
+        <div class="flex isolate overflow-hidden relative z-50 flex-col items-center p-8 bg-gradient-to-r from-black rounded-xl border sm:p-16 md:flex-row radial-background to-zinc-900 border-zinc-700">
+            <div class="mx-auto text-left md:pr-10 sm:max-w-md md:max-w-full">
+                <h2 class="mb-2 text-2xl font-bold text-white sm:mb-6 sm:text-3xl md:text-4xl tracking-tighter-xl font-rota">Never Worry About Auth Again</h2>
                 <p class="text-white text-opacity-60">Equipped with a GitHub CI action to ensure your authentication is fully functional. Setup in a few minutes, then focus on what you do best — building great applications</p>
             </div>
-
-            <div class="flex flex-shrink-0 justify-center items-center">
+            <div class="flex flex-shrink-0 justify-start items-center mt-5 w-full sm:max-w-md md:max-w-full md:justify-center md:w-auto md:mt-0">
                 <include src="button.html" title="View The Documentation"></include>
             </div>
-
         </div>
     </div>
 </div>
\ No newline at end of file
diff --git a/includes/home/tab.html b/includes/home/tab.html
index 012967b..90c70d4 100644
--- a/includes/home/tab.html
+++ b/includes/home/tab.html
@@ -1,6 +1,6 @@
-<button x-on:click="active='{title}'" :class="{ 'bg-white text-black' : active == '{title}', 'bg-zinc-100/70 text-zinc-500 hover:bg-zinc-100' : active != '{title}', 'pr-7' : ('{title}' == 'register' && !interacted) }" class="flex relative items-center px-5 h-full text-xs rounded-t-lg duration-300 ease-out">
-    <div class="block mr-1 -ml-1 w-3 h-3 current-color" x-html="icons['{title}']"></div>
-    <span x-text="uppercase('{title}')"></span>
+<button x-on:click="active='{title}'" :class="{ 'bg-white text-black' : active == '{title}', 'bg-zinc-100/70 text-zinc-500 hover:bg-zinc-100' : active != '{title}', 'pr-7' : ('{title}' == 'register' && !interacted) }" class="block relative flex-shrink-0 items-center px-5 h-full text-xs rounded-t-lg duration-300 ease-out lg:flex">
+    <div class="block hidden mr-1 -ml-1 w-3 h-3 current-color lg:inline" x-html="icons['{title}']"></div>
+    <span x-text="uppercase('{title}')" class="flex-shrink-0"></span>
     <span x-show="'{title}'=='register' && !interacted" class="absolute top-0 right-0 mt-[9px] mr-2" x-cloak>
         <span class="flex absolute justify-center items-center w-4 h-4 rounded-full border-4 border-red-500 animate-ping bg-[#a9fd02"></span>
         <span class="flex justify-center items-center w-4 h-4 rounded-full border-4 border-red-400 bg-zinc-100"></span>
diff --git a/includes/mobilemenu.html b/includes/mobilemenu.html
new file mode 100644
index 0000000..0005402
--- /dev/null
+++ b/includes/mobilemenu.html
@@ -0,0 +1,14 @@
+<div class="flex justify-center items-center pb-3 space-x-3 text-xs font-medium md:hidden">
+    <button hx-get="{ url('/') }" hx-target="#site-content" hx-select="#site-content" hx-ext="alpine-morph" hx-swap="outerHTML transition:true" hx-push-url="true" data-home @click="active='home'; leftSidebar=false; fullWidth=false; scrollTop(); mobileMenu=false" class="flex flex-1 justify-center items-center p-2 rounded-md border hover:bg-zinc-800 border-zinc-800">
+        <svg class="mr-1.5 w-3.5 h-3.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><g fill="none" stroke="none"><path d="M3.75 11.199a3 3 0 0 1 1.134-2.35l5.872-4.662a2 2 0 0 1 2.488 0l5.872 4.662a3 3 0 0 1 1.135 2.35v7.051a2 2 0 0 1-2 2H5.749a2 2 0 0 1-2-2v-7.051z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M15.25 20.25v-6.5a2 2 0 0 0-2-2h-2.5a2 2 0 0 0-2 2v6.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></g></svg>
+        <span>Home</span>
+    </button>
+    <button hx-get="{ url('/docs/getting-started') }" hx-target="#site-content" hx-select="#site-content" hx-ext="alpine-morph" hx-swap="outerHTML transition:true" hx-push-url="true" @click="active='docs'; leftSidebar=false;  introductionActive = true; fullWidth=true; scrollTop(); route=$el.getAttribute('hx-get');  mobileMenu=false" data-docs class="flex flex-1 justify-center items-center p-2 rounded-md border hover:bg-zinc-800 border-zinc-800">
+        <svg class="mr-1.5 w-3.5 h-3.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><g fill="none" stroke="none"><path d="M16.25 7.75h-8.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M14.25 11.25h-4.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M4.75 17.75h14.5m0 2.5V3.75a1 1 0 0 0-1-1H7.75a3 3 0 0 0-3 3v12.5a3 3 0 0 0 3 3h10.5a1 1 0 0 0 1-1z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></g></svg>
+        <span>Docs</span>
+    </button>
+    <button @click="leftSidebar=false" class="flex flex-1 justify-center items-center p-2 rounded-md border hover:bg-zinc-800 border-zinc-800">
+        <svg class="mr-1.5 w-3.5 h-3.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><g fill="none" stroke="none"><path d="M19.25 4.75l-14.5 14.5m0-14.5l14.5 14.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></g></svg>
+        <span>Close Menu</span>
+    </button>
+</div>
\ No newline at end of file
diff --git a/includes/search.html b/includes/search.html
index 6793db9..432c936 100644
--- a/includes/search.html
+++ b/includes/search.html
@@ -23,7 +23,7 @@
 <button @click="commandOpen=true" class="flex flex-shrink-0 gap-x-1.5 justify-center items-center px-2.5 py-1.5 mb-5 w-full text-sm font-medium rounded-md ring-1 ring-inset shadow-sm focus:outline-none focus-visible:outline-0 disabled:cursor-not-allowed disabled:opacity-75 ring-neutral-700 text-neutral-200 bg-neutral-800 hover:bg-neutral-700/50 disabled:bg-neutral-800 focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-primary-400" type="button">
     <svg class="flex-shrink-0 w-5 h-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z" /></svg>  
     Search 
-    <div class="hidden gap-0.5 ml-auto lg:inline-flex">
+    <div class="hidden gap-0.5 ml-auto md:inline-flex">
         <kbd class="inline-flex items-center justify-center text-white h-5 min-w-[20px] text-[11px] px-1 rounded font-medium font-sans bg-neutral-800 ring-1 ring-neutral-700 ring-inset">⌘</kbd>
         <kbd class="inline-flex items-center justify-center text-white h-5 min-w-[20px] text-[11px] px-1 rounded font-medium font-sans bg-neutral-800 ring-1 ring-neutral-700 ring-inset">K</kbd>
     </div>
diff --git a/layouts/main.html b/layouts/main.html
index 0ea6f18..788845e 100644
--- a/layouts/main.html
+++ b/layouts/main.html
@@ -238,7 +238,10 @@
 
           $watch('leftSidebar', function(value){
               if(value){
+                  document.body.classList.add('overflow-hidden');
                   window.dispatchEvent(new CustomEvent('close-mobile-menu', {}));
+              } else {
+                document.body.classList.remove('overflow-hidden');
               }
           });
           $watch('templatePreview', function(value){
diff --git a/pages/docs/[content].html b/pages/docs/[content].html
index cd7d259..e85764c 100644
--- a/pages/docs/[content].html
+++ b/pages/docs/[content].html
@@ -1,19 +1,14 @@
 <layout title="Docs" src="main.html">
 
-    <div  class="flex items-start px-6 pt-[138px] mx-auto max-w-7xl md:pt-28 md:px-7 docs">
+    <div  class="flex items-start px-6 pt-[110px] mx-auto max-w-7xl md:pt-28 md:px-7 docs">
 
         <div x-show="leftSidebar" @click="leftSidebar=false" class="block w-screen h-screen z-[9998] absolute inset-0 bg-black/50"></div>
         <div 
-            :class="{ 'translate-x-0  bg-black/90 border-r border-neutral-800/20 md:bg-transparent': leftSidebar, 'md:-translate-x-0 border-transparent -translate-x-full': !leftSidebar }"
-            class="fixed  md:sticky flex-shrink-0 z-[9999] md:left-auto left-0 top-0 md:transition-none ease-out duration-300 md:top-[17px] md:mt-[17px] text-white md:-ml-0.5 h-full w-64  xl:w-72" x-cloak>
+            :class="{ 'translate-x-0  bg-black/90 border-r border-neutral-800/20 md:bg-transparent w-full': leftSidebar, 'md:-translate-x-0 border-transparent  w-64 -translate-x-full': !leftSidebar }"
+            class="fixed  md:sticky flex-shrink-0 z-[9999] md:left-auto left-0 top-0 md:transition-none md:top-[17px] md:mt-[17px] text-white md:-ml-0.5 h-full  xl:w-72" x-cloak>
             
-            <div @click="leftSidebar=!leftSidebar"
-            :class="{ 'border-neutral-700/40': leftSidebar, 'border-zinc-700/60': !leftSidebar }"
-                class="fixed z-[99] cursor-pointer md:hidden flex items-center group right-0 top-[116px] translate-x-full bg-black/50 border  border-l-0 w-[70px] text-xs rounded-r-md h-auto py-2 text-white">
-                <svg :class="{ 'rotate-180' : leftSidebar }" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="mx-1.5 w-3 h-3 duration-300 ease-out group-hover:translate-x-0.5"><path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" /></svg>      
-                <span>Menu</span>
-            </div>
             <div class="overflow-scroll px-5 pt-5 pb-10 h-full md:pt-2 md:pl-0.5 md:pr-8 xl:pr-16 no-scrollbar">
+                <include src="mobilemenu.html"></include>
                 <include src="search.html"></include>
                 <include src="docs-sidebar.html"></include>
             </div>
diff --git a/pages/index.html b/pages/index.html
index 0d441dd..b7454f0 100644
--- a/pages/index.html
+++ b/pages/index.html
@@ -1,5 +1,20 @@
 <layout title="DevDojo Auth Package" src="main.html">
     
+    <div class="block md:hidden">
+        <div x-show="leftSidebar" @click="leftSidebar=false" class="block overflow-x-hidden w-screen h-screen z-[9998] absolute inset-0 bg-black/50"></div>
+        <div 
+            :class="{ 'translate-x-0  bg-black/90 border-r border-neutral-800/20 md:bg-transparent overflow-hidden w-full': leftSidebar, 'md:-translate-x-0 border-transparent  w-64 -translate-x-full': !leftSidebar }"
+            class="fixed  md:sticky flex-shrink-0 z-[9999] md:left-auto left-0 top-0 md:top-[17px] md:mt-[17px] text-white md:-ml-0.5 h-full  xl:w-72" x-cloak>
+            
+            <div class="overflow-scroll px-5 pt-5 pb-10 h-full md:pt-2 md:pl-0.5 md:pr-8 xl:pr-16 no-scrollbar">
+                <include src="mobilemenu.html"></include>
+                <include src="search.html"></include>
+                <include src="docs-sidebar.html"></include>
+            </div>
+        </div>
+        <div x-show="leftSidebar" @click="leftSidebar=false" class="fixed inset-0 z-20 w-screen h-screen bg-black bg-opacity-[95%]"></div>
+    </div>
+
     <include src="home/hero.html"></include>
     <include src="separator.html"></include>