diff --git a/assets/js/main.js b/assets/js/main.js
index eaa6188..c00efb6 100644
--- a/assets/js/main.js
+++ b/assets/js/main.js
@@ -464,7 +464,9 @@ function setAllOthersToInactive(link){
     const tocLinks = document.querySelectorAll('.toc li');
     for(let i = 0; i < tocLinks.length; i++){
         if(tocLinks[i] != link){
-            tocLinks[i].classList.remove('active');
+            if(tocLinks[i].classList){
+                tocLinks[i].classList.remove('active');
+            }
         }
     }
 }
diff --git a/includes/docs-sidebar.html b/includes/docs-sidebar.html
index e5e801a..a88dec5 100644
--- a/includes/docs-sidebar.html
+++ b/includes/docs-sidebar.html
@@ -2,14 +2,14 @@
     <div class="relative">
         <div class="px-2.5 py-1 text-sm font-medium"><span class="truncate">Get Started</span></div>
         <nav class="relative mt-1">
-            <button x-data="{ isActive: false }" id="introduction-docs" @set-active="isActive=true" @set-inactive="isActive=false" hx-get="{ url('/docs/getting-started') }" 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;"
+            <button x-data="{ isActive: false }" id="introduction-docs" @set-active="isActive=true" @set-inactive="isActive=false" hx-get="{ url('/docs/getting-started') }" hx-target="#docs-content" hx-select="#docs-content" hx-swap="outerHTML transition:true" hx-push-url="true" @click="scrollTop(); window.dispatchEvent(new CustomEvent('set-docs-active', {})); route=$el.getAttribute('hx-get'); leftSidebar=false;"
                 :class="{ 'text-white before:bg-neutral-800' : route.includes('/docs/getting-started') || isActive, 'text-neutral-400 hover:text-white hover:before:bg-neutral-800/50' : !route.includes('/docs/getting-started') || !isActive }"
                 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="M12 20.25V5.74999C9.30735 3.95489 6.62809 3.75848 3.7454 3.7483C3.19498 3.74636 2.75 4.19482 2.75 4.74525V18.4735C2.75 18.8371 3.12789 19.0832 3.47435 18.9728C6.23535 18.0924 10.1673 18.6464 12 20.25Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M12 20.25V5.75001C14.6926 3.95491 17.3719 3.7585 20.2546 3.74832C20.805 3.74637 21.25 4.19484 21.25 4.74527V18.4735C21.25 18.8371 20.8721 19.0832 20.5257 18.9728C17.7647 18.0924 13.8327 18.6464 12 20.25Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></g></svg>
                 <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') }"
+            <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(); window.dispatchEvent(new CustomEvent('set-install-active', {})); 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="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>
diff --git a/includes/header.html b/includes/header.html
index de67cd9..d0729e6 100644
--- a/includes/header.html
+++ b/includes/header.html
@@ -118,6 +118,7 @@
                         </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';  introductionActive = true; fullWidth=true; scrollTop(); resetProgressWidth(); route=$el.getAttribute('hx-get');  mobileMenu=false" data-docs @mouseenter="calculateMarkerPosition($el); hovered='docs'"
                             :class="{ 'text-white' : active == 'docs', 'text-white/80': active != 'docs' }"
+                            @set-docs-active.window="calculateMarkerPosition($el)"
                             class="inline-flex relative flex-shrink-0 justify-center items-center px-3 py-3 my-2 w-full h-full leading-tight text-center rounded-lg transition-colors md:py-2 group md:my-0 md:w-auto md:text-center">
                             <span>Documentation</span>
                             <span 
@@ -126,6 +127,7 @@
                         </button>
                         <button hx-get="{ url('/docs/install') }" hx-target="#site-content" hx-select="#site-content" hx-ext="alpine-morph" hx-swap="outerHTML transition:true" hx-push-url="true" @click="active='install'; installationActive = true; fullWidth=true; scrollTop(); resetProgressWidth(); route=$el.getAttribute('hx-get');  mobileMenu=false" data-install @mouseenter="calculateMarkerPosition($el); hovered='install'" 
                             :class="{ 'text-white' : active == 'install', 'text-white/80': active != 'install' }"
+                            @set-install-active.window="calculateMarkerPosition($el)"
                             class="inline-flex relative flex-shrink-0 justify-center items-center px-3 py-3 my-2 w-full h-full leading-tight text-center rounded-lg transition-colors md:py-2 group md:my-0 md:w-auto md:text-center">
                             <span>Installation</span>
                             <span 
diff --git a/includes/home/browser-tab-pages.html b/includes/home/browser-tab-pages.html
index 4abd0f9..34fbe73 100644
--- a/includes/home/browser-tab-pages.html
+++ b/includes/home/browser-tab-pages.html
@@ -1,8 +1,8 @@
 <section class="overflow-hidden relative px-6 py-12 md:px-8 lg:pt-32 lg:pb-10">
     <div class="mx-auto">
         <div class="mx-auto mb-12 text-left md:text-center md:max-w-5xl">
-            <span class="inline-block mb-4 text-sm font-medium tracking-tighter uppercase text-[#a9fd02]">Plug-and-Play Auth</span>
-            <h2 class="text-2xl font-normal text-white text-balance sm:text-4xl md:text-6xl md:leading-tight font-rota">Authentication Simplified for Peace of Mind</h2>
+            <span class="inline-block mb-4 text-sm font-medium tracking-tighter uppercase text-[#a9fd02]">Pages that are Easy on the eyes</span>
+            <h2 class="text-2xl font-normal text-white text-balance sm:text-4xl md:text-6xl md:leading-tight font-rota">Clean and Beautiful <br>Authentication Pages</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">
diff --git a/includes/home/customize.html b/includes/home/customize.html
index 0145ee4..612845d 100644
--- a/includes/home/customize.html
+++ b/includes/home/customize.html
@@ -16,7 +16,7 @@ <h2 class="text-2xl font-normal text-white text-balance sm:text-4xl md:text-6xl
                                 <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-2 text-xl 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-sm text-white text-opacity-60 md:text-base">Update your authentication pages with your colors and logo to seamlessly reflect your brand identity.</p>
+                            <p class="text-sm text-white text-opacity-60 md:text-base">Update your authentication pages with your colors and logo to perfectly reflect your brand identity.</p>
                         </div>
                     </div>
                     <div class="flex justify-center items-center p-0 pt-3 w-full h-auto translate-y-16 sm:pt-5 md:translate-y-0 md:pl-14 md:block md:w-1/2 lg:w-1/2 md:h-full">
diff --git a/includes/home/hero.html b/includes/home/hero.html
index 2439504..a17ac0d 100644
--- a/includes/home/hero.html
+++ b/includes/home/hero.html
@@ -14,9 +14,10 @@
         <div class="relative w-full h-px"></div>
         <!-- Heading Content -->
         <div class="pt-16 mx-auto max-w-5xl text-left lg:pt-24 sm:text-center">
-            <h1 class="pb-4 mb-2 text-3xl font-medium text-white text-balance font-rota md:leading-tight sm:text-5xl lg:text-7xl">Customizable Auth Screens for <span class="hidden sm:inline">your</span> Laravel <span class="hidden sm:inline">App</span></h1>
+            
+            <h1 class="pb-4 mb-2 text-3xl font-medium text-white text-balance font-rota md:leading-tight sm:text-5xl lg:text-7xl">Customizable Auth Screens for your Laravel App</h1>
             <!-- Seamless & Configurable Authentication for Laravel -->
-            <p class="mx-auto mb-8 text-sm font-light leading-relaxed text-white opacity-80 text-balance sm:max-w-xl lg:max-w-3xl sm:text-base lg:text-xl lg:mb-12">Implement common authentication features with the flip of a switch! Then, easily customize it to fit your brand. </p>
+            <p class="mx-auto mb-8 max-w-lg text-sm font-light leading-relaxed text-white opacity-80 sm:text-base lg:text-xl lg:mb-12">Easily add authentication features with the flip of a switch!<br class="hidden md:inline"> Then, 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">
@@ -55,9 +56,12 @@ <h1 class="pb-4 mb-2 text-3xl font-medium text-white text-balance font-rota md:l
                     </div>
                 </div>
             </div>
-            <div class="block relative mt-6 w-full sm:hidden">
-                <include src="button.html" title="View The Docs"></include>
+            <div class="flex justify-center items-center translate-y-7 sm:bg-transparent bg-[#211d21] rounded-md">
+                <a href="https://www.producthunt.com/posts/devdojo-auth?embed=true&utm_source=badge-featured&utm_medium=badge&utm_souce=badge-devdojo&#0045;auth" target="_blank"><img src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=463082&theme=dark" alt="DevDojo&#0032;Auth - Customizable&#0032;Auth&#0032;Screens&#0032;for&#0032;Laravel | Product Hunt" style="width: 250px; height: 54px;" width="250" height="54" /></a>
             </div>
+            <!-- <div class="hidden relative mt-6 w-full sm:hidden">
+                <include src="button.html" title="View The Docs"></include>
+            </div> -->
             
         </div>
         <!-- Logo Cloud -->