diff --git a/app/(root)/changelogs/page.tsx b/app/(root)/changelogs/page.tsx
index 32f21e1..0b26690 100644
--- a/app/(root)/changelogs/page.tsx
+++ b/app/(root)/changelogs/page.tsx
@@ -54,7 +54,7 @@ const LogsPage: React.FC = () => {
 			id="logs"
 			className="wrapper container py-24 md:py-28 gap-4 flex flex-col"
 		>
-			<h1 className="text-3xl md:text-5xl font-bold text-black dark:bg-clip-text dark:text-transparent dark:bg-gradient-to-b dark:from-white dark:to-neutral-400">
+			<h1 className="text-3xl md:text-5xl md:pb-2 font-bold text-black dark:bg-clip-text dark:text-transparent dark:bg-gradient-to-b dark:from-white dark:to-neutral-400">
 				Server LOGS
 			</h1>
 			<p className="text-lg text-muted-foreground text-start mb-4">
diff --git a/app/(root)/contribute/page.tsx b/app/(root)/contribute/page.tsx
index 81398be..b0070c8 100644
--- a/app/(root)/contribute/page.tsx
+++ b/app/(root)/contribute/page.tsx
@@ -12,7 +12,7 @@ const Contribute = () => {
 			id="tos"
 			className="wrapper container py-24 md:py-28 gap-4 flex flex-col"
 		>
-			<h1 className="text-3xl md:text-5xl font-bold text-black dark:bg-clip-text dark:text-transparent dark:bg-gradient-to-b dark:from-white dark:to-neutral-400">
+			<h1 className="text-3xl md:text-5xl md:pb-2 font-bold text-black dark:bg-clip-text dark:text-transparent dark:bg-gradient-to-b dark:from-white dark:to-neutral-400">
 				Contributing to SVR.JS
 			</h1>
 			<p className="text-lg text-muted-foreground text-start mb-4">
diff --git a/app/(root)/downloads/page.tsx b/app/(root)/downloads/page.tsx
index 78b33c2..e090aa9 100644
--- a/app/(root)/downloads/page.tsx
+++ b/app/(root)/downloads/page.tsx
@@ -58,7 +58,7 @@ const DownloadPage: React.FC = () => {
       id="download"
       className="wrapper container py-24 md:py-28 gap-4 flex flex-col"
     >
-      <h1 className="text-3xl md:text-5xl font-bold text-black dark:bg-clip-text dark:text-transparent dark:bg-gradient-to-b dark:from-white dark:to-neutral-400">
+      <h1 className="text-3xl md:text-5xl md:pb-2 font-bold text-black dark:bg-clip-text dark:text-transparent dark:bg-gradient-to-b dark:from-white dark:to-neutral-400">
         Downloads
       </h1>
       <p className="text-lg text-muted-foreground text-start mb-4">
diff --git a/app/(root)/layout.tsx b/app/(root)/layout.tsx
index c8a4234..cbcd0f5 100644
--- a/app/(root)/layout.tsx
+++ b/app/(root)/layout.tsx
@@ -38,10 +38,10 @@ export default function PageLayout({
 	children: React.ReactNode;
 }) {
 	return (
-		<main className="flex flex-col min-h-screen">
+		<div className="flex flex-col min-h-screen">
 			<Navbar />
-			<div className="flex-grow flex-1">{children}</div>
+			<div className="flex-grow flex-1 overflow-x-hidden">{children}</div>
 			<Footer />
-		</main>
+		</div>
 	);
 }
diff --git a/app/(root)/mods/page.tsx b/app/(root)/mods/page.tsx
index 55f91cc..4393b20 100644
--- a/app/(root)/mods/page.tsx
+++ b/app/(root)/mods/page.tsx
@@ -58,7 +58,7 @@ const ModsPage: React.FC = () => {
       id="mods"
       className="wrapper container py-24 md:py-28 gap-4 flex flex-col"
     >
-      <h1 className="text-3xl md:text-5xl font-bold text-black dark:bg-clip-text dark:text-transparent dark:bg-gradient-to-b dark:from-white dark:to-neutral-400">
+      <h1 className="text-3xl md:text-5xl md:pb-2 font-bold text-black dark:bg-clip-text dark:text-transparent dark:bg-gradient-to-b dark:from-white dark:to-neutral-400">
         SvrJS Mods
       </h1>
       <p className="text-lg text-muted-foreground text-start mb-4">
diff --git a/app/(root)/privacy-policy/page.tsx b/app/(root)/privacy-policy/page.tsx
index 02021e6..0634eb5 100644
--- a/app/(root)/privacy-policy/page.tsx
+++ b/app/(root)/privacy-policy/page.tsx
@@ -14,7 +14,7 @@ const PrivacyPolicy = () => {
 			id="privacy-policy"
 			className="wrapper container py-24 md:py-28 gap-4 flex flex-col"
 		>
-			<h1 className="text-3xl md:text-5xl font-bold text-black dark:bg-clip-text dark:text-transparent dark:bg-gradient-to-b dark:from-white dark:to-neutral-400">
+			<h1 className="text-3xl md:text-5xl md:pb-2 font-bold text-black dark:bg-clip-text dark:text-transparent dark:bg-gradient-to-b dark:from-white dark:to-neutral-400">
 				Privacy Policy
 			</h1>
 			<p className="text-lg text-muted-foreground text-start mb-4">
diff --git a/app/(root)/tos/page.tsx b/app/(root)/tos/page.tsx
index afb8e0a..8e74c70 100644
--- a/app/(root)/tos/page.tsx
+++ b/app/(root)/tos/page.tsx
@@ -12,7 +12,7 @@ const TermsOfService = () => {
 			id="tos"
 			className="wrapper container py-24 md:py-28 gap-4 flex flex-col"
 		>
-			<h1 className="text-3xl md:text-5xl font-bold text-black dark:bg-clip-text dark:text-transparent dark:bg-gradient-to-b dark:from-white dark:to-neutral-400">
+			<h1 className="text-3xl md:text-5xl md:pb-2 font-bold text-black dark:bg-clip-text dark:text-transparent dark:bg-gradient-to-b dark:from-white dark:to-neutral-400">
 				Terms and Conditions
 			</h1>
 			<p className="text-lg text-muted-foreground text-start mb-4">
diff --git a/app/(root)/vulnerabilities/page.tsx b/app/(root)/vulnerabilities/page.tsx
index e85d6c2..e5274ee 100644
--- a/app/(root)/vulnerabilities/page.tsx
+++ b/app/(root)/vulnerabilities/page.tsx
@@ -12,7 +12,7 @@ const Vulnerabilities = () => {
 			id="tos"
 			className="wrapper container py-24 md:py-28 gap-4 flex flex-col"
 		>
-			<h1 className="text-3xl md:text-5xl font-bold text-black dark:bg-clip-text dark:text-transparent dark:bg-gradient-to-b dark:from-white dark:to-neutral-400">
+			<h1 className="text-3xl md:text-5xl md:pb-2 font-bold text-black dark:bg-clip-text dark:text-transparent dark:bg-gradient-to-b dark:from-white dark:to-neutral-400">
 				SVR.JS Vulnerabilities
 			</h1>
 			<p className="text-lg text-muted-foreground text-start mb-4">
diff --git a/app/globals.css b/app/globals.css
index 95a8b23..578b422 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -6,12 +6,10 @@ html {
 	height: 100%;
 	width: 100%;
 	font-family: "Poppins", sans-serif;
-	overflow-x: hidden;
 }
 
 body {
 	user-select: text;
-	overflow-x: clip;
 }
 
 * {
diff --git a/app/layout.tsx b/app/layout.tsx
index b2a35a9..d723b8e 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -30,7 +30,7 @@ export default function RootLayout({
 					disableTransitionOnChange
 				>
 					<AuthProvider>
-						<main>{children}</main>
+						{children}
 						<Toaster />
 					</AuthProvider>
 				</ThemeProvider>
diff --git a/components/shared/About.tsx b/components/shared/About.tsx
index fad7e17..4099412 100644
--- a/components/shared/About.tsx
+++ b/components/shared/About.tsx
@@ -12,7 +12,7 @@ const About = () => {
 						alt="aboutpicture"
 						width={300}
 						height={300}
-						className="w-[300px] object-contain rounded-lg"
+						className="w-[300px] object-contain rounded-lg flex-shrink-0"
 					/>
 
 					<div className="flex flex-col justify-between">
diff --git a/components/shared/FAQ.tsx b/components/shared/FAQ.tsx
index 719be6c..84d1ad2 100644
--- a/components/shared/FAQ.tsx
+++ b/components/shared/FAQ.tsx
@@ -10,10 +10,10 @@ import {
 const Faq = () => {
   return (
     <section id="faq" className="wrapper container py-24 md:py-28">
-      <h2 className="text-3xl md:text-5xl font-bold mb-4 text-black dark:bg-clip-text dark:text-transparent dark:bg-gradient-to-b dark:from-white dark:to-neutral-400">
+      <h2 className="text-3xl md:text-5xl font-bold mb-4 md:mb-2 md:pb-2 text-black dark:bg-clip-text dark:text-transparent dark:bg-gradient-to-b dark:from-white dark:to-neutral-400">
         Frequently Asked Question
       </h2>
-      <p className="text-lg text-muted-foreground text-start mt-4 mb-8">
+      <p className="text-lg text-muted-foreground text-start mt-4 md:mt-2 mb-8">
         Find answers to common questions about SVRJS
       </p>
       <Accordion
diff --git a/components/shared/Footer.tsx b/components/shared/Footer.tsx
index 5a77660..78e8dd2 100644
--- a/components/shared/Footer.tsx
+++ b/components/shared/Footer.tsx
@@ -9,7 +9,7 @@ const Footer = () => {
 	const currentYear = new Date().getFullYear();
 	return (
 		<>
-			<footer className="flex flex-col w-full transition-all bg-zinc-100 text-black dark:bg-[#0308033b] border-t dark:text-white">
+			<footer className="flex flex-col w-full transition-all bg-zinc-50 text-black dark:bg-[#0308033b] border-t dark:text-white">
 				<div className="px-6 md:px-12 lg:px-24 py-10 w-full mx-auto max-w-screen-2xl">
 					<div className="flex flex-col lg:flex-row justify-between max-lg:items-start max-md:items-center items-center mb-6 ">
 						<div className="flex items-center mb-6 lg:mb-0">
diff --git a/components/shared/Hero.tsx b/components/shared/Hero.tsx
index da2d13c..25a34b5 100644
--- a/components/shared/Hero.tsx
+++ b/components/shared/Hero.tsx
@@ -65,7 +65,7 @@ const Hero = () => {
 				</AnimatedGradientText>
 				<main className="text-5xl md:text-6xl font-bold">
 					<h1 className="inline custom-title">
-						<span className="bg-primary bg-clip-text text-transparent bg-gradient-to-r from-green-300 to-primary">
+						<span className="text-transparent bg-gradient-to-r from-green-300 to-primary bg-clip-text">
 							Simplify
 						</span>{" "}
 						your server logic performance
@@ -120,6 +120,7 @@ const Hero = () => {
 						variant={"ghost"}
 						onClick={() => handleButtonClick("linux")}
 					>
+						<span className="sr-only">Linux</span>
 						<svg
 							xmlns="http://www.w3.org/2000/svg"
 							width={200}
@@ -142,6 +143,7 @@ const Hero = () => {
 						variant={"ghost"}
 						onClick={() => handleButtonClick("docker")}
 					>
+						<span className="sr-only">Docker</span>
 						<svg
 							xmlns="http://www.w3.org/2000/svg"
 							width={200}
diff --git a/components/shared/HowItWorks.tsx b/components/shared/HowItWorks.tsx
index 5e73a1a..15c5404 100644
--- a/components/shared/HowItWorks.tsx
+++ b/components/shared/HowItWorks.tsx
@@ -11,7 +11,7 @@ const HowItWorks = () => {
 					development
 				</span>
 			</h2>
-			<p className="md:w-3/4 mx-auto mt-4 mb-8 text-xl text-muted-foreground">
+			<p className="md:w-3/4 mx-auto mt-4 mb-8 text-lg md:text-xl text-muted-foreground">
 				Beautifully designed components that you can copy and paste into your
 				apps. Accessible. Customizable. Open Source.
 			</p>
diff --git a/components/shared/MobileNav.tsx b/components/shared/MobileNav.tsx
index a84b835..09b6cc8 100644
--- a/components/shared/MobileNav.tsx
+++ b/components/shared/MobileNav.tsx
@@ -19,6 +19,7 @@ const MobileNav = () => {
 			<ThemeToggle />
 			<Sheet>
 				<SheetTrigger>
+					<span className="sr-only">Menu</span>
 					<Menu className="w-5 h-5" />
 				</SheetTrigger>
 				<SheetContent>
diff --git a/components/shared/Navbar.tsx b/components/shared/Navbar.tsx
index 3df247b..cb0b581 100644
--- a/components/shared/Navbar.tsx
+++ b/components/shared/Navbar.tsx
@@ -20,35 +20,40 @@ const Navbar = () => {
 		<header className="sticky border-b top-0 z-40 w-full shadow-md bg-white dark:border-b-slate-800 dark:bg-background">
 			{/* LOGO LEFT NAVBAR */}
 			<NavigationMenu className="mx-auto">
-				<NavigationMenuList className="container h-16 px-4 w-screen flex justify-between items-center">
+				<NavigationMenuList className="container h-16 px-4 w-full flex justify-between items-center">
 					<NavigationMenuItem className="font-bold flex items-center">
 						<Link href="/#" className="inline-flex items-center gap-2">
+							<span className="sr-only">SVR.JS</span>
 							<Logo width={120} height={40} />
 						</Link>
 					</NavigationMenuItem>
 
 					{/* Mobile view */}
-					<MobileNav />
+					<NavigationMenuItem className="flex md:hidden">
+						<MobileNav />
+					</NavigationMenuItem>
 
 					{/* Desktop Menu */}
-					<nav className="hidden md:flex gap-4">
-						{NAVBAR.centerLinks?.map(({ href, label, target }) => (
-							<Link
-								key={label}
-								href={href}
-								target={target}
-								className={`text-[17px] tracking-tight ${
-									pathname == href ? "bg-muted-foreground/20" : ""
-								} ${buttonVariants({
-									variant: "ghost",
-								})}`}
-							>
-								{label}
-							</Link>
-						))}
-					</nav>
+					<NavigationMenuItem className="hidden md:flex">
+						<nav className="hidden md:flex gap-4">
+							{NAVBAR.centerLinks?.map(({ href, label, target }) => (
+								<Link
+									key={label}
+									href={href}
+									target={target}
+									className={`text-[17px] tracking-tight ${
+										pathname == href ? "bg-muted-foreground/20" : ""
+									} ${buttonVariants({
+										variant: "ghost",
+									})}`}
+								>
+									{label}
+								</Link>
+							))}
+						</nav>
+					</NavigationMenuItem>
 
-					<div className="hidden md:flex gap-2 items-center">
+					<NavigationMenuItem className="hidden md:flex gap-2 items-center">
 						{NAVBAR.rightLinks?.map(({ href = "", label, target }) => (
 							<Link
 								key={label}
@@ -75,7 +80,7 @@ const Navbar = () => {
 							</Link>
 						))}
 						<ThemeToggle />
-					</div>
+					</NavigationMenuItem>
 				</NavigationMenuList>
 			</NavigationMenu>
 		</header>
diff --git a/components/shared/Newsletter.tsx b/components/shared/Newsletter.tsx
index 0b7f9d7..6a55764 100644
--- a/components/shared/Newsletter.tsx
+++ b/components/shared/Newsletter.tsx
@@ -25,10 +25,10 @@ const Newsletter = () => {
     <section id="newsletter">
       <hr className="w-11/12 mx-auto" />
       <div className="container py-24 md:py-32">
-        <h3 className="text-center text-4xl md:text-5xl text-black font-bold dark:bg-clip-text dark:text-transparent dark:bg-gradient-to-b dark:from-white dark:to-neutral-400">
+        <h3 className="text-center text-4xl md:text-5xl md:pb-2 text-black font-bold dark:bg-clip-text dark:text-transparent dark:bg-gradient-to-b dark:from-white dark:to-neutral-400">
           Join The Newsletter!
         </h3>
-        <p className="text-lg text-muted-foreground text-center mt-4 mb-8">
+        <p className="text-lg text-muted-foreground text-center mt-4 md:mt-2 mb-8">
           Choosing the right website deployment option is important when
           creating a website, because it directly impacts the user experience
           and the resources required to run your website.
diff --git a/components/shared/Partners.tsx b/components/shared/Partners.tsx
index c6d3c48..0c381a0 100644
--- a/components/shared/Partners.tsx
+++ b/components/shared/Partners.tsx
@@ -23,7 +23,7 @@ const Partners = () => {
 			</h2>
 			<div className="w-full flex-start flex-row">
 				<div className="flex max-md:flex-col items-center justify-start gap-4">
-					<h2 className="text-lg font-medium bg-accent/60 px-2 py-2 rounded-md">
+					<h2 className="text-md font-medium bg-accent/60 px-2 py-2 rounded-md">
 						Process of setting up a WordPress website running on SVR.JS.
 					</h2>
 					<Button
diff --git a/components/shared/Testimonials.tsx b/components/shared/Testimonials.tsx
index ef0a7d8..d2a8e90 100644
--- a/components/shared/Testimonials.tsx
+++ b/components/shared/Testimonials.tsx
@@ -86,7 +86,7 @@ const Testimonials = () => {
 				</span>
 			</h1>
 
-			<div className="wrapper columns-1 gap-5 md:columns-2 lg:columns-3 py-6 mt-6">
+			<ul className="wrapper columns-1 gap-5 md:columns-2 lg:columns-3 py-6 mt-6">
 				{testimonials.map((testimonial, idx) => (
 					<TestimonialCard
 						avatar={testimonial.avatar}
@@ -97,7 +97,7 @@ const Testimonials = () => {
 						key={idx}
 					/>
 				))}
-			</div>
+			</ul>
 		</section>
 	);
 };
diff --git a/components/ui/theme-toggle.tsx b/components/ui/theme-toggle.tsx
index 1e7ba8c..738b688 100644
--- a/components/ui/theme-toggle.tsx
+++ b/components/ui/theme-toggle.tsx
@@ -30,6 +30,7 @@ const ThemeToggle = () => {
           className="md:border-input border-transparent"
           onClick={handleTheme}
         >
+          <span className="sr-only">Toggle theme</span>
           <Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
           <Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
         </Button>
diff --git a/package-lock.json b/package-lock.json
index 43ea265..2819aec 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14,6 +14,7 @@
         "@radix-ui/react-dropdown-menu": "^2.0.6",
         "@radix-ui/react-label": "^2.1.0",
         "@radix-ui/react-navigation-menu": "^1.1.4",
+        "@radix-ui/react-separator": "^1.1.0",
         "@radix-ui/react-slot": "^1.1.0",
         "@radix-ui/react-toast": "^1.2.1",
         "@radix-ui/themes": "^3.0.5",
@@ -2348,6 +2349,50 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-separator": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-separator/-/react-separator-1.1.0.tgz",
+      "integrity": "sha512-3uBAs+egzvJBDZAzvb/n4NxxOYpnspmWxO2u5NbZ8Y6FM/NdrGSF9bop3Cf6F6C71z1rTSn8KV0Fo2ZVd79lGA==",
+      "dependencies": {
+        "@radix-ui/react-primitive": "2.0.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-separator/node_modules/@radix-ui/react-primitive": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.0.0.tgz",
+      "integrity": "sha512-ZSpFm0/uHa8zTvKBDjLFWLo8dkr4MBsiDLz0g3gMUwqgLHz9rTaRRGYDgvZPtBJgYCBKXkS9fzmoySgr8CO6Cw==",
+      "dependencies": {
+        "@radix-ui/react-slot": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-slider": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-slider/-/react-slider-1.1.2.tgz",