diff --git a/docs/app/page.tsx b/docs/app/page.tsx
index ee45e760..cf1137ae 100644
--- a/docs/app/page.tsx
+++ b/docs/app/page.tsx
@@ -1,18 +1,16 @@
-import Link from "next/link";
 import Section from "@/components/landing/section";
 import Hero from "@/components/landing/hero";
-import { Separator } from "@/components/ui/separator";
-import { FeaturesSectionDemo } from "@/components/blocks/features-section-demo-3";
 import Features from "@/components/features";
 export default function HomePage() {
 	return (
-		<main>
+		<main className="h-min">
 			<Section
 				className="-z-1 mb-1"
 				crosses
 				crossesOffset="lg:translate-y-[5.25rem]"
 				customPaddings
 				id="hero"
+
 			>
 				<Hero />
 				<Features />
diff --git a/docs/components/features.tsx b/docs/components/features.tsx
index d4b45b84..1e2229a2 100644
--- a/docs/components/features.tsx
+++ b/docs/components/features.tsx
@@ -23,7 +23,7 @@ import { Ripple } from "./ripple";
 export default function Features() {
 
     return (
-        <div className="max-w-[1300px] font-geist relative my-32 mx-auto md:border-[1.2px] rounded-none md:w-full xl:w-4/5 2xl:w-3/5">
+        <div className="md:max-w-[1300px] font-geist relative mx-auto md:border-[1.2px] rounded-none">
             <Plus className="absolute top-[-17px] left-[-17px] text-black/20 dark:text-white/30  w-8 h-8" />
             <div className="grid grid-cols-1 md:grid-cols-3 grid-rows-10 md:grid-rows-4 w-full">
                 <div className="relative items-start justify-start border-l-[1.2px] transform-gpu  flex flex-col p-10 overflow-clip">
@@ -36,7 +36,7 @@ export default function Features() {
                     <div className="mt-2">
                         <div className="max-w-full">
                             <div className="flex gap-3 ">
-                                <p className="text-2xl tracking-tighter font-normal max-w-lg">
+                                <p className="text-xl md:text-2xl tracking-tighter font-normal max-w-lg">
                                     Supports popular <strong>frameworks</strong>
                                 </p>
                             </div>
@@ -91,7 +91,7 @@ export default function Features() {
                         <div className="max-w-full">
                             <div className="flex gap-3 ">
                                 <p className="text-2xl tracking-tighter font-normal max-w-lg">
-                                    Support multiple <strong>providers.</strong>
+                                    Support multiple <strong>OAuth providers.</strong>
                                 </p>
                             </div>
                         </div>
@@ -116,20 +116,20 @@ export default function Features() {
                         <div className="max-w-full">
                             <div className="flex gap-3 ">
                                 <p className="text-2xl tracking-tighter font-normal max-w-lg">
-                                    2FA right out of <strong>the box.</strong>
+                                    Two Factor <strong>Authentication</strong>
                                 </p>
                             </div>
                         </div>
                         <p className="text-left text-sm mt-2 text-muted-foreground">
-                            Supports your favorite frontend, backend and meta frameworks, including React, Vue, Svelte, Solid, Next.js, Nuxt.js, Hono, and more,
+                            With our built-in two factor authentication plugin, you can add an extra layer of security to your account.
                             {" "}
-                            <a
+                            <Link
                                 className="text-gray-50"
                                 href="/docs"
                                 target="_blank"
                             >
                                 Learn more
-                            </a>
+                            </Link>
                         </p>
                     </div>
                 </div>
@@ -189,10 +189,14 @@ export default function Features() {
                         <div className="flex flex-col gap-3 justify-center h-full items-center w-full">
                             <div className="flex gap-2 items-center">
                                 <Globe2Icon className="w-4 h-4" />
-                                <p className="text-gray-600 dark:text-gray-400">Start in a minute</p>
+                                <p className="text-gray-600 dark:text-gray-400">
+                                    own your auth
+                                </p>
                             </div>
                             <p className="text-4xl md:text-4xl mt-4 tracking-tighter font-normal max-w-md mx-auto text-center">
-                                Start in a minute and. <strong>accelerate with 10x speed </strong>
+                                <strong>
+                                    Roll your own auth with confidence in minutes!
+                                </strong>
                             </p>
                             <div className="flex mt-[10px] z-20">
                                 <TechStackDisplay
@@ -208,16 +212,16 @@ export default function Features() {
                                 />
                             </div>
                             <Link href="/docs" className="z-50">
-                                <Button className="mt-4 rounded-lg p-5 ml-auto">
+                                <Button className="mt-4 rounded-none p-5 ml-auto">
                                     Start now!
                                 </Button>
                             </Link>
                             <Ripple />
                         </div>
                     </div>
-                    <Plus className="absolute bottom-[-15px] left-[-15px] text-black/20 dark:text-black/20 dark:text-white/40 w-8 h-8" />
-                    <Plus className="absolute bottom-[-15px] right-[-15px] text-black/20 dark:text-black/20 dark:text-white/40 w-8 h-8" />
-                    <Plus className="absolute top-[-15px] left-[-15px] text-black/20 dark:text-black/20 dark:text-white/40 w-8 h-8" />
+                    <Plus className="absolute bottom-[-15px] left-[-15px] text-black/20 dark:text-black/20  w-8 h-8" />
+                    <Plus className="absolute bottom-[-15px] right-[-15px] text-black/20 dark:text-black/20 w-8 h-8" />
+                    <Plus className="absolute top-[-15px] left-[-15px] text-black/20 dark:text-black/20  w-8 h-8" />
                 </div>
             </div>
         </div>
diff --git a/docs/components/landing/section.tsx b/docs/components/landing/section.tsx
index e8fb0e74..9e6b8f50 100644
--- a/docs/components/landing/section.tsx
+++ b/docs/components/landing/section.tsx
@@ -21,11 +21,10 @@ const Section = ({
 			id={id}
 			className={`
       relative 
-      ${
-				customPaddings ||
-				`py-10 lg:py-16 xl:py-20 ${crosses ? "lg:py-32 xl:py-40" : ""}`
-			} 
-      ${className || ""}`}
+      ${customPaddings ||
+				`py-10 lg:py-16  ${crosses ? "" : ""}`
+				} 
+      ${className || " "}`}
 		>
 			{children}
 
@@ -35,9 +34,8 @@ const Section = ({
 			{crosses && (
 				<>
 					<div
-						className={`hidden absolute top-0 left-7.5 right-7.5 h-0.25 bg-[#26242C] ${
-							crossesOffset && crossesOffset
-						} pointer-events-none lg:block xl:left-16 right-16`}
+						className={`hidden absolute top-0 left-7.5 right-7.5 h-0.25 bg-[#26242C] ${crossesOffset && crossesOffset
+							} pointer-events-none lg:block xl:left-16 right-16`}
 					/>
 					<SectionSvg crossesOffset={crossesOffset} />
 				</>