diff --git a/src/__tests__/app/sitemap.test.ts b/src/__tests__/app/sitemap.test.ts
new file mode 100644
index 00000000..58dd34c4
--- /dev/null
+++ b/src/__tests__/app/sitemap.test.ts
@@ -0,0 +1,47 @@
+import sitemap from "@/app/sitemap";
+
+const siteUrlEnvironmentKeys = [
+  "NEXT_PUBLIC_SITE_URL",
+  "NEXT_PUBLIC_APP_URL",
+  "VERCEL_PROJECT_PRODUCTION_URL",
+  "VERCEL_URL",
+] as const;
+
+const originalEnvironment = Object.fromEntries(
+  siteUrlEnvironmentKeys.map((key) => [key, process.env[key]]),
+);
+
+describe("sitemap", () => {
+  afterEach(() => {
+    for (const key of siteUrlEnvironmentKeys) {
+      const originalValue = originalEnvironment[key];
+      if (originalValue === undefined) {
+        delete process.env[key];
+      } else {
+        process.env[key] = originalValue;
+      }
+    }
+  });
+
+  it("preserves static route metadata without generated modification dates", () => {
+    for (const key of siteUrlEnvironmentKeys) {
+      delete process.env[key];
+    }
+
+    const entries = sitemap();
+    expect(entries.every((entry) => !("lastModified" in entry))).toBe(true);
+    expect(entries[0].url).toBe("https://doubt-desk-seven.vercel.app");
+    expect(entries[0].changeFrequency).toBe("weekly");
+    expect(entries[0].priority).toBe(1);
+  });
+
+  it("uses the configured site URL without introducing duplicate slashes", () => {
+    process.env.NEXT_PUBLIC_SITE_URL = "https://docs.example.com/";
+
+    const entries = sitemap();
+
+    expect(entries[0].url).toBe("https://docs.example.com");
+    expect(entries[1].url).toBe("https://docs.example.com/about");
+    expect(entries.every((entry) => !("lastModified" in entry))).toBe(true);
+  });
+});
diff --git a/src/app/(routes)/bookmarks/page.tsx b/src/app/(routes)/bookmarks/page.tsx
index a0c48d4a..846d040e 100644
--- a/src/app/(routes)/bookmarks/page.tsx
+++ b/src/app/(routes)/bookmarks/page.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { useEffect, useState } from "react";
-import { Bookmark, Loader2, ArrowLeft, RefreshCw } from "lucide-react";
+import { Bookmark, Loader2, ArrowLeft, RefreshCw, Search, X } from "lucide-react";
 import DoubtCard from "@/components/classroom/DoubtCard";
 import { useRouter } from "next/navigation";
 import { useAppUser } from "@/app/provider";
@@ -21,6 +21,7 @@ export default function BookmarksPage() {
   const [bookmarks, setBookmarks] = useState<any[]>([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
+  const [searchQuery, setSearchQuery] = useState("");
   const router = useRouter();
   const { appUser } = useAppUser();
   const { isLoaded, isSignedIn } = useAuth();
@@ -54,6 +55,15 @@ export default function BookmarksPage() {
     fetchBookmarks();
   }, [isLoaded, isSignedIn]);
 
+  const filteredBookmarks = bookmarks.filter((doubt) => {
+    if (!searchQuery.trim()) return true;
+    const q = searchQuery.toLowerCase();
+    return (
+      doubt.subject?.toLowerCase().includes(q) ||
+      doubt.content?.toLowerCase().includes(q)
+    );
+  });
+
   return (
     <>
       <SignedIn>
@@ -86,6 +96,28 @@ export default function BookmarksPage() {
               </div>
             </header>
 
+            {!loading && !error && bookmarks.length > 0 && (
+              <div className="relative">
+                <Search className="absolute left-4 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400 dark:text-zinc-500 pointer-events-none" />
+                <input
+                  type="text"
+                  value={searchQuery}
+                  onChange={(e) => setSearchQuery(e.target.value)}
+                  placeholder="Search bookmarks by subject or content..."
+                  className="w-full pl-11 pr-10 py-3 rounded-xl border border-slate-200 dark:border-zinc-800 bg-slate-50 dark:bg-zinc-900 text-slate-900 dark:text-white placeholder:text-slate-400 dark:placeholder:text-zinc-500 text-sm font-medium focus:outline-none focus:ring-2 focus:ring-purple-500/40 transition-all"
+                />
+                {searchQuery && (
+                  <button
+                    onClick={() => setSearchQuery("")}
+                    className="absolute right-3 top-1/2 -translate-y-1/2 text-slate-400 hover:text-slate-700 dark:hover:text-white transition-colors"
+                    aria-label="Clear search"
+                  >
+                    <X className="w-4 h-4" />
+                  </button>
+                )}
+              </div>
+            )}
+
             {loading ? (
               <div className="flex flex-col items-center justify-center py-24 space-y-4">
                 <Loader2 className="w-8 h-8 text-purple-500 animate-spin" />
@@ -112,9 +144,9 @@ export default function BookmarksPage() {
                   {UI_TEXT.RETRY_BUTTON}
                 </button>
               </div>
-            ) : bookmarks.length > 0 ? (
+            ) : filteredBookmarks.length > 0 ? (
               <div className="flex flex-col gap-6 lg:gap-8">
-                {bookmarks.map((doubt) => (
+                {filteredBookmarks.map((doubt) => (
                   <DoubtCard
                     key={doubt.id}
                     doubt={doubt}
diff --git a/src/app/doubts/[id]/DoubtPermalinkClient.tsx b/src/app/doubts/[id]/DoubtPermalinkClient.tsx
deleted file mode 100644
index b3eef3bd..00000000
--- a/src/app/doubts/[id]/DoubtPermalinkClient.tsx
+++ /dev/null
@@ -1,87 +0,0 @@
-"use client";
-
-import { useEffect, useState } from "react";
-import Link from "next/link";
-import { ArrowLeft } from "lucide-react";
-import DoubtCard from "@/components/classroom/DoubtCard";
-import DoubtRepliesModal from "@/components/classroom/DoubtRepliesModal";
-import type { Doubt } from "@/types";
-
-interface DoubtPermalinkClientProps {
-    initialDoubt: any;
-}
-
-export default function DoubtPermalinkClient({ initialDoubt }: DoubtPermalinkClientProps) {
-    const [doubt, setDoubt] = useState<any>({
-        ...initialDoubt,
-        tags: [],
-        replyCount: initialDoubt.replyCount || 0,
-        hasLiked: false,
-        hasBookmarked: false,
-    });
-
-    const fetchDoubt = async () => {
-        try {
-            const res = await fetch(`/api/doubts/${initialDoubt.id}`);
-            if (res.ok) {
-                const data = await res.json();
-                setDoubt(data);
-            }
-        } catch (error) {
-            console.error("Failed to fetch doubt details:", error);
-        }
-    };
-
-    useEffect(() => {
-        fetchDoubt();
-    }, [initialDoubt.id]);
-
-    const backUrl = doubt.classroomId ? `/rooms/${doubt.classroomId}` : "/public-rooms";
-
-    const handleScrollToComments = () => {
-        const commentsSection = document.getElementById("permalink-comments");
-        if (commentsSection) {
-            commentsSection.scrollIntoView({ behavior: "smooth" });
-        }
-    };
-
-    return (
-        <div className="p-4 md:p-8 space-y-8 max-w-4xl mx-auto pb-24 text-slate-900 dark:text-zinc-100 bg-white dark:bg-black min-h-screen transition-colors duration-500 relative overflow-hidden">
-            {/* Glow effect */}
-            <div className="absolute top-0 left-0 w-[500px] h-[500px] bg-blue-500/10 dark:from-blue-500/5 blur-[120px] rounded-full -translate-x-1/2 -translate-y-1/2 pointer-events-none z-0" />
-            
-            {/* Header/Back button */}
-            <div className="relative z-10 flex items-center justify-between pb-4 border-b border-slate-100 dark:border-zinc-900/60">
-                <Link 
-                    href={backUrl} 
-                    className="flex items-center gap-2 text-slate-500 dark:text-zinc-400 hover:text-slate-900 dark:hover:text-white transition-all text-sm font-bold uppercase tracking-wider"
-                >
-                    <ArrowLeft className="w-4 h-4" />
-                    Back to Feed
-                </Link>
-                <h1 className="text-xl font-black text-slate-900 dark:text-white tracking-tight uppercase italic">
-                    Doubt <span className="text-blue-500">Permalink</span>
-                </h1>
-            </div>
-
-            {/* Content */}
-            <div className="relative z-10 space-y-8">
-                <DoubtCard 
-                    doubt={doubt} 
-                    onUpdate={fetchDoubt} 
-                    disableModal={true} 
-                    onCommentClick={handleScrollToComments}
-                />
-                <div id="permalink-comments" className="border border-slate-200 dark:border-white/10 rounded-[1.5rem] sm:rounded-[2.5rem] overflow-hidden shadow-2xl">
-                    <DoubtRepliesModal 
-                        doubt={doubt} 
-                        isOpen={true} 
-                        onClose={() => {}} 
-                        onReplyChange={fetchDoubt} 
-                        inline={true} 
-                    />
-                </div>
-            </div>
-        </div>
-    );
-}
diff --git a/src/app/doubts/[id]/page.tsx b/src/app/doubts/[id]/page.tsx
deleted file mode 100644
index b575f84c..00000000
--- a/src/app/doubts/[id]/page.tsx
+++ /dev/null
@@ -1,132 +0,0 @@
-import { notFound, redirect } from "next/navigation";
-import { db } from "@/configs/db";
-import { doubtsTable, classroomsTable, membershipsTable } from "@/configs/schema";
-import { eq, and } from "drizzle-orm";
-import { currentUser } from "@clerk/nextjs/server";
-import DoubtPermalinkClient from "./DoubtPermalinkClient";
-import type { Metadata } from "next";
-import { toPublicDoubt } from "@/lib/anonymity/anonymity";
-
-export async function generateMetadata(
-    { params }: { params: Promise<{ id: string }> }
-): Promise<Metadata> {
-    const { id } = await params;
-    const doubtId = parseInt(id, 10);
-    if (isNaN(doubtId)) {
-        return {
-            title: "Doubt Not Found",
-        };
-    }
-
-    try {
-        const [doubt] = await db
-            .select({
-                subject: doubtsTable.subject,
-                content: doubtsTable.content,
-            })
-            .from(doubtsTable)
-            .where(eq(doubtsTable.id, doubtId))
-            .limit(1);
-
-        if (!doubt) {
-            return {
-                title: "Doubt Not Found",
-            };
-        }
-
-        const title = doubt.subject || "Doubt Thread";
-        const contentSnippet = doubt.content
-            ? doubt.content.slice(0, 150) + (doubt.content.length > 150 ? "..." : "")
-            : "View this doubt on DoubtDesk.";
-
-        return {
-            title,
-            description: contentSnippet,
-        };
-    } catch {
-        return {
-            title: "Doubt Thread",
-        };
-    }
-}
-
-export default async function DoubtPermalinkPage(
-    { params }: { params: Promise<{ id: string }> }
-) {
-    const { id } = await params;
-    const doubtId = parseInt(id, 10);
-
-    if (isNaN(doubtId)) {
-        notFound();
-    }
-
-    const user = await currentUser();
-    const email = user?.primaryEmailAddress?.emailAddress ?? null;
-
-    // Fetch the single doubt
-    const [doubt] = await db
-        .select()
-        .from(doubtsTable)
-        .where(eq(doubtsTable.id, doubtId))
-        .limit(1);
-
-    if (!doubt) {
-        notFound();
-    }
-
-    // Classroom membership check
-    if (doubt.classroomId) {
-        if (!email) {
-            redirect("/sign-in");
-        }
-
-        // Check membership
-        const [membership] = await db
-            .select({ role: membershipsTable.role })
-            .from(membershipsTable)
-            .where(
-                and(
-                    eq(membershipsTable.userEmail, email),
-                    eq(membershipsTable.classroomId, doubt.classroomId)
-                )
-            );
-
-        let role = membership?.role ?? null;
-        if (!role) {
-            // Check if teacher owns the classroom
-            const [ownedClassroom] = await db
-                .select()
-                .from(classroomsTable)
-                .where(
-                    and(
-                        eq(classroomsTable.id, doubt.classroomId),
-                        eq(classroomsTable.teacherEmail, email)
-                    )
-                );
-            if (ownedClassroom) {
-                role = "owner";
-            }
-        }
-
-        if (!role) {
-            redirect("/403");
-        }
-
-        // Teacher doubts visibility rules
-        if (doubt.type === "teacher") {
-            const isTeacher = ["teacher", "owner", "admin"].includes(role.toLowerCase());
-            const isAuthor = doubt.userEmail === email;
-            if (!isTeacher && !isAuthor) {
-                redirect("/403");
-            }
-        }
-    }
-
-    // Sanitize before handing the row to a client component: props serialized into
-    // the RSC payload are visible in the browser, so the raw userEmail/embedding must
-    // be stripped here just as the API does. All server-side checks above used the
-    // raw row; only the client-facing shape is anonymized.
-    return (
-        <DoubtPermalinkClient initialDoubt={toPublicDoubt(doubt, email) as any} />
-    );
-}
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 1b5b96d3..29a45ac5 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,53 +1,35 @@
 "use client";
-import { useState, useEffect } from "react";
-import {
-  SignInButton,
-  SignUpButton,
-  SignedIn,
-  SignedOut,
-  useClerk,
-  UserButton,
-} from "@clerk/nextjs";
-import {
-  Map,
-  MessageCircle,
-  ArrowRight,
-  LayoutGrid,
-  Clipboard,
-  Activity,
-  Users,
-  Globe,
-} from "lucide-react";
-import Link from "next/link";
+
+import { useEffect, useState } from "react";
+import { useClerk } from "@clerk/nextjs";
 import {
-  AlertDialog,
-  AlertDialogAction,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogTitle,
-} from "@/components/ui/alert-dialog";
-import { ThemeToggle } from "@/components/layout/ThemeToggle";
-import ShapeGrid from "@/components/marketing/ShapeGrid";
-import { Inter, Staatliches } from "next/font/google";
-import LiveCampusThreadPanel from "@/components/classroom/LiveCampusThreadPanel";
-import { scrollToSection } from "@/lib/utils/scroll-to-section";
+  Inter,
+  // Keeping only Inter here since other sections use their own fonts.
+  // (Next/font modules are safe to instantiate per component.)
+} from "next/font/google";
+
+import ScrollToTopButton from "@/components/ScrollToTopButton";
+import { scrollToSection } from "@/lib/scroll-to-section";
 
-import TestimonialsMarquee from "@/components/marketing/TestimonialsMarquee"; //Testimonials marquee
+import SignOutDialog from "@/components/landing/SignOutDialog";
+import HeroSection from "@/components/landing/HeroSection";
+import FeaturesSection from "@/components/landing/FeaturesSection";
+import HowItWorksSection from "@/components/landing/HowItWorksSection";
+import TestimonialsSection from "@/components/landing/TestimonialsSection";
 
 const inter = Inter({ subsets: ["latin"] });
-const staatliches = Staatliches({ weight: "400", subsets: ["latin"] });
 
 export default function Home() {
   const [showSignOutDialog, setShowSignOutDialog] = useState(false);
+  const { signOut } = useClerk();
 
   useEffect(() => {
     const scrollFromHash = () => {
       const hash = window.location.hash.slice(1);
       if (!hash) return;
-      requestAnimationFrame(() => scrollToSection(hash, { updateHash: false }));
+      requestAnimationFrame(() =>
+        scrollToSection(hash, { updateHash: false })
+      );
     };
 
     scrollFromHash();
@@ -55,131 +37,6 @@ export default function Home() {
     return () => window.removeEventListener("hashchange", scrollFromHash);
   }, []);
 
-  const { signOut } = useClerk();
-
-  const features = [
-    {
-      slug: "collaborative-discussions",
-      title: "Real-time collaborative discussions",
-      description:
-        "Share questions, answers, and classroom updates instantly across study groups.",
-      icon: MessageCircle,
-    },
-    {
-      slug: "classroom-management",
-      title: "Smart classroom management",
-      description:
-        "Organize learning spaces, schedules, and teacher workflows with ease.",
-      icon: LayoutGrid,
-    },
-    {
-      slug: "notes-resource-sharing",
-      title: "Notes and resource sharing",
-      description:
-        "Keep study materials, highlights, and shared guides organized in one hub.",
-      icon: Clipboard,
-    },
-    {
-      slug: "learning-roadmaps",
-      title: "Learning roadmaps and guidance",
-      description:
-        "Follow curated study paths that keep learners focused on milestones.",
-      icon: Map,
-    },
-    {
-      slug: "ai-powered-doubt-solving",
-      title: "AI-powered doubt solving",
-      description:
-        "Get instant, context-aware answers to questions with smart AI support.",
-      icon: Activity,
-    },
-    {
-      slug: "study-collaboration",
-      title: "Organized study collaboration",
-      description:
-        "Coordinate projects, peer review, and group work with clear tools and structure.",
-      icon: Users,
-    },
-  ];
-
-  const howItWorks = [
-    {
-      title: "Join or create a classroom",
-      description: "Teachers set up rooms, students join using invite codes.",
-    },
-    {
-      title: "Ask doubts instantly",
-      description: "Post questions using text or image and get AI + peer help.",
-    },
-    {
-      title: "Get clear answers & insights",
-      description:
-        "AI explanations, teacher guidance, and analytics all in one place.",
-    },
-  ];
-
-  const testimonials = [
-    {
-      id: "1",
-      name: "Aarav Sharma",
-      role: "B.Tech Student",
-      institution: "DTU",
-      avatarUrl: "/avatars/arav.png",
-      quote:
-        "DoubtDesk helped me resolve doubts 3x faster during exams. The AI explanations are incredibly clear.",
-      rating: 5,
-    },
-    {
-      id: "2",
-      name: "Neha Verma",
-      role: "CS Student",
-      institution: "Punjab University",
-      avatarUrl: "/avatars/neha.png",
-      quote:
-        "Everything is organized in one place. No more scrolling through endless chat groups.",
-      rating: 5,
-    },
-    {
-      id: "3",
-      name: "Rohit Mehta",
-      role: "Teaching Assistant",
-      institution: "NIT Jalandhar",
-      avatarUrl: "/avatars/rohit.png",
-      quote:
-        "Analytics help me quickly identify where students struggle the most.",
-      rating: 5,
-    },
-    {
-      id: "4",
-      name: "Priya Singh",
-      role: "MBA Student",
-      institution: "IIM Indore",
-      avatarUrl: "/avatars/priya.png",
-      quote:
-        "My exam preparation became much more efficient after switching to DoubtDesk.",
-      rating: 5,
-    },
-    {
-      id: "5",
-      name: "Karan Gupta",
-      role: "Engineering Student",
-      institution: "PEC Chandigarh",
-      avatarUrl: "/avatars/karan.png",
-      quote:
-        "Instant answers saved hours of searching through notes and forums.",
-      rating: 5,
-    },
-    {
-      id: "6",
-      name: "Ananya Kapoor",
-      role: "Professor",
-      institution: "Chitkara University",
-      avatarUrl: "/avatars/ananya.png",
-      quote: "Managing classroom discussions has become significantly easier.",
-      rating: 5,
-    },
-  ];
-
   const handleSignOut = async () => {
     await signOut({ redirectUrl: "/" });
   };
@@ -188,260 +45,19 @@ export default function Home() {
     <div
       className={`${inter.className} min-h-screen bg-slate-50 dark:bg-black text-slate-900 dark:text-slate-50 flex flex-col selection:bg-blue-500/30 dark:selection:bg-[#5E8CFF]/30 transition-colors duration-500 overflow-x-hidden`}
     >
-      {/* Logout Confirmation Dialog */}
-      <AlertDialog open={showSignOutDialog} onOpenChange={setShowSignOutDialog}>
-        <AlertDialogContent className="bg-white dark:bg-slate-900 border-slate-200 dark:border-slate-800 text-slate-900 dark:text-white rounded-2xl animate-in fade-in-50 zoom-in-95 duration-200">
-          <AlertDialogHeader>
-            <AlertDialogTitle>
-              Are you sure you want to sign out?
-            </AlertDialogTitle>
-            <AlertDialogDescription className="text-slate-500 dark:text-slate-400">
-              You will need to log in again to access your classroom insights
-              and doubt-solving history.
-            </AlertDialogDescription>
-          </AlertDialogHeader>
-          <AlertDialogFooter>
-            <AlertDialogCancel className="bg-slate-100 dark:bg-slate-800 border-slate-200 dark:border-slate-700 text-slate-700 dark:text-slate-300 hover:bg-slate-200 dark:hover:bg-slate-700 rounded-xl transition-all duration-200">
-              Cancel
-            </AlertDialogCancel>
-            <AlertDialogAction
-              onClick={handleSignOut}
-              className="bg-red-600 hover:bg-red-700 text-white border-none rounded-xl transition-all duration-200"
-            >
-              Sign Out
-            </AlertDialogAction>
-          </AlertDialogFooter>
-        </AlertDialogContent>
-      </AlertDialog>
-
-      {/* Hero Section */}
-      <main className="flex-1 relative overflow-hidden scroll-smooth">
-        <div className="absolute inset-0 z-0 pointer-events-none">
-          <ShapeGrid
-            speed={0.45}
-            squareSize={42}
-            direction="diagonal"
-            borderColor="rgba(143, 172, 243, 0.2)"
-            hoverFillColor="rgba(182, 201, 248, 0.08)"
-            shape="square"
-            hoverTrailAmount={5}
-            className="opacity-100 dark:opacity-60"
-          />
-          <div className="absolute inset-0 bg-gradient-to-b from-blue-50/30 via-transparent to-transparent dark:from-transparent" />
-          <div className="absolute inset-0 bg-[radial-gradient(circle_at_30%_20%,rgba(59,130,246,0.08),transparent_35%),radial-gradient(circle_at_70%_60%,rgba(99,102,241,0.05),transparent_40%)] dark:bg-[radial-gradient(circle_at_26%_24%,rgba(125,162,255,0.12),transparent_28%),radial-gradient(circle_at_72%_42%,rgba(170,191,255,0.05),transparent_26%)]" />
-        </div>
-        <section className="px-4 sm:px-6 lg:px-20 pt-32 pb-20 relative z-10">
-          <div className="max-w-7xl mx-auto grid grid-cols-1 xl:grid-cols-[1.1fr_0.9fr] gap-12 xl:gap-16 items-center">
-            <div className="text-center xl:text-left space-y-8 animate-in fade-in slide-in-from-left-6 duration-700 ease-out">
-              {/* Primary Header Typography */}
-              <h2 className="text-4xl sm:text-5xl lg:text-6xl xl:text-7xl font-black text-slate-900 dark:text-white tracking-tight leading-[1.05] max-w-xl sm:max-w-2xl mx-auto xl:mx-0 transition-colors duration-300">
-                Empower <br />
-                Your Learning <br />
-                with{" "}
-                <span
-                  className={`${staatliches.className} uppercase tracking-[0.04em] bg-gradient-to-r from-blue-600 via-indigo-500 to-blue-600 dark:from-[#8BB8FF] dark:to-[#AABFFF] bg-clip-text text-transparent bg-[size:200%_auto] animate-[shine_5s_linear_infinite]`}
-                >
-                  Collaborative AI.
-                </span>
-              </h2>
-              {/* Description Subtext Stack */}
-              <div className="space-y-2 max-w-md sm:max-w-xl mx-auto xl:mx-0 transition-all duration-300">
-                <div
-                  className={`${staatliches.className} text-xs tracking-[0.16em] text-blue-600 dark:text-blue-400 uppercase font-medium`}
-                >
-                  Collaborative classrooms
-                </div>
-                <p className="text-base sm:text-lg text-slate-500 dark:text-zinc-400 leading-relaxed transition-colors duration-300">
-                  Built for collaborative classrooms, instant doubt solving, and
-                  smarter learning.
-                </p>
-              </div>
-              {/* Call to Action Button Core Wrappers */}
-              <div className="flex flex-col sm:flex-row items-stretch sm:items-center justify-center xl:justify-start gap-4 transition-all duration-300 max-w-md sm:max-w-none mx-auto xl:mx-0">
-                <SignedIn>
-                  <Link href="/rooms" className="w-full sm:w-auto">
-                    <button className="group w-full sm:w-auto px-10 py-5 bg-[#5E8CFF] text-white rounded-2xl text-lg font-bold hover:bg-[#8BB8FF] hover:shadow-[0_0_24px_rgba(94,140,255,0.35)] transition-all flex items-center justify-center gap-2 hover:scale-[1.02] active:scale-[0.98]">
-                      <span
-                        className={`${staatliches.className} uppercase tracking-[0.08em]`}
-                      >
-                        Open Classroom
-                      </span>
-                      <ArrowRight className="w-5 h-5 group-hover:translate-x-1.5 transition-transform duration-300" />
-                    </button>
-                  </Link>
-                </SignedIn>
-                <SignedOut>
-                  <Link href="/sign-up" className="w-full sm:w-auto">
-                    <button className="group w-full sm:w-auto px-10 py-5 bg-white text-slate-950 rounded-2xl text-lg font-bold hover:bg-slate-200 transition-all flex items-center justify-center gap-2 hover:scale-[1.02] active:scale-[0.98]">
-                      <span
-                        className={`${staatliches.className} uppercase tracking-[0.08em]`}
-                      >
-                        Open
-                      </span>
-                      <span>Classroom</span>
-                      <ArrowRight className="w-5 h-5 group-hover:translate-x-1.5 transition-transform duration-300" />
-                    </button>
-                  </Link>
-                </SignedOut>
-                <Link href="/public-rooms" className="w-full sm:w-auto">
-                  <button className="group w-full sm:w-auto px-10 py-5 bg-slate-100 dark:bg-white/5 hover:bg-slate-200 dark:hover:bg-white/10 text-slate-900 dark:text-white rounded-2xl text-lg font-bold border border-slate-200 dark:border-white/10 transition-all hover:shadow-[0_0_20px_rgba(94,140,255,0.15)] flex items-center justify-center gap-2 hover:scale-[1.02] active:scale-[0.98]">
-                    <span
-                      className={`${staatliches.className} uppercase tracking-[0.08em]`}
-                    >
-                      Explore Community
-                    </span>
-                    <Globe className="w-5 h-5 text-slate-600 dark:text-slate-400 group-hover:text-blue-600 dark:group-hover:text-[#8BB8FF] group-hover:rotate-12 transition-transform duration-300" />
-                  </button>
-                </Link>
-              </div>
-            </div>
-            {/* Right Live Panel Graphic Column */}
-            <div className="flex items-center justify-center xl:justify-end w-full pt-4 xl:pt-6 animate-in fade-in slide-in-from-bottom-8 duration-700 delay-200 ease-out fill-mode-both">
-              <div className="w-full max-w-md xl:max-w-full transition-transform duration-500 hover:scale-[1.01] rounded-[0.9rem]">
-                <LiveCampusThreadPanel />
-              </div>
-            </div>
-          </div>
-        </section>
-
-        {/* Features Section */}
-        <section
-          id="features"
-          className="scroll-mt-20 px-4 sm:px-6 lg:px-8 py-20 relative z-10 border-t border-slate-200/60 dark:border-slate-900 bg-slate-100/40 dark:bg-black/20 transition-colors duration-500"
-        >
-          <div className="max-w-7xl mx-auto space-y-16">
-            <div className="max-w-3xl mx-auto text-center space-y-4">
-              <div
-                className={`${staatliches.className} text-sm tracking-[0.14em] text-blue-600 dark:text-blue-400 uppercase`}
-              >
-                Features
-              </div>
-              <h3 className="text-3xl sm:text-4xl lg:text-5xl font-extrabold text-slate-900 dark:text-slate-100 tracking-tight leading-tight transition-colors duration-300">
-                Everything your classroom needs to solve doubts, stay aligned,
-                and move faster.
-              </h3>
-              <p className="text-base sm:text-lg text-slate-600 dark:text-slate-400 max-w-2xl mx-auto leading-relaxed transition-colors duration-300">
-                Built for modern study teams, DoubtDesk blends AI-powered doubt
-                solving, shared resources, and smart classroom flows into a
-                single polished platform.
-              </p>
-            </div>
-
-            <div
-              id="features-grid"
-              className="grid gap-6 scroll-mt-20 sm:grid-cols-2 lg:grid-cols-3"
-            >
-              {features.map((feature, i) => {
-                const Icon = feature.icon;
-                return (
-                  <div
-                    key={feature.slug}
-                    id={`feature-${feature.slug}`}
-                    style={{ animationDelay: `${i * 100}ms` }}
-                    className="group relative scroll-mt-20 overflow-hidden rounded-3xl border border-slate-200/80 dark:border-zinc-800/80 bg-white dark:bg-zinc-900/40 p-6 shadow-sm shadow-slate-200/60 dark:shadow-none hover:shadow-lg dark:hover:shadow-lg dark:hover:shadow-blue-500/10 hover:border-blue-300/60 dark:hover:border-blue-500/40 transition-all duration-300 animate-in fade-in slide-in-from-bottom-4"
-                  >
-                    <div className="flex h-12 w-12 items-center justify-center rounded-2xl bg-blue-50 dark:bg-blue-950/50 text-blue-600 dark:text-blue-400 shadow-inner transition-all duration-300 group-hover:scale-110 group-hover:shadow-lg group-hover:shadow-blue-500/20">
-                      <Icon className="h-5 w-5 transition-transform duration-300 group-hover:scale-110" />
-                    </div>
-                    <h4 className="mt-5 text-xl font-bold text-slate-900 dark:text-slate-100 tracking-tight transition-colors duration-300">
-                      {feature.title}
-                    </h4>
-                    <p className="mt-2.5 text-sm leading-relaxed text-slate-600 dark:text-zinc-400 transition-colors duration-300">
-                      {feature.description}
-                    </p>
-                  </div>
-                );
-              })}
-            </div>
-          </div>
-        </section>
-
-        {/* How It Works, Testimonials, etc. remain unchanged */}
-        {/* How It Works Section */}
-        <section
-          id="how-it-works"
-          className="scroll-mt-20 px-4 sm:px-6 lg:px-8 py-20 relative z-10 border-t border-slate-200/60 dark:border-zinc-900 transition-colors duration-500"
-        >
-          <div className="max-w-7xl mx-auto space-y-16">
-            <div className="text-center space-y-3">
-              <div
-                className={`${staatliches.className} text-sm tracking-[0.14em] text-blue-600 dark:text-blue-400 uppercase`}
-              >
-                Process
-              </div>
-              <h3 className="text-3xl sm:text-4xl font-extrabold text-slate-900 dark:text-slate-100 tracking-tight transition-colors duration-300">
-                How it works
-              </h3>
-              <p className="text-base text-slate-600 dark:text-zinc-400 max-w-md mx-auto transition-colors duration-300">
-                Simple flow from doubt → solution → understanding
-              </p>
-            </div>
-            <div className="grid md:grid-cols-3 gap-8 relative">
-              <div className="hidden md:block absolute top-12 left-[15%] right-[15%] h-0.5 bg-gradient-to-r from-blue-100 via-indigo-100 to-blue-100 dark:from-zinc-900 dark:via-zinc-800 dark:to-zinc-900 -z-10 transition-colors duration-300" />
-              {howItWorks.map((step, index) => (
-                <div
-                  key={step.title}
-                  style={{ animationDelay: `${index * 150}ms` }}
-                  className="p-6 rounded-3xl border border-slate-200/80 dark:border-zinc-900 bg-white dark:bg-zinc-950/40 backdrop-blur-sm hover:border-blue-400 dark:hover:border-zinc-700 hover:bg-slate-50 dark:hover:bg-zinc-900/40 transition-all duration-500 flex flex-col items-center text-center space-y-4 group shadow-sm dark:shadow-none hover:shadow-lg hover:-translate-y-1 animate-in fade-in slide-in-from-bottom-6 fill-mode-both"
-                >
-                  <div className="flex h-12 w-12 items-center justify-center rounded-full bg-blue-600 dark:bg-blue-500 text-white text-lg font-bold shadow-md shadow-blue-500/20 dark:shadow-blue-500/10 transition-all duration-500 group-hover:scale-110 group-hover:bg-indigo-600 dark:group-hover:bg-indigo-500">
-                    {index + 1}
-                  </div>
-                  <h4 className="text-xl font-bold text-slate-900 dark:text-slate-100 tracking-tight transition-colors duration-300">
-                    {step.title}
-                  </h4>
-                  <p className="text-sm leading-relaxed text-slate-600 dark:text-zinc-400 transition-colors duration-300">
-                    {step.description}
-                  </p>
-                </div>
-              ))}
-            </div>
-          </div>
-        </section>
-
-        {/* Testimonials Section */}
-        <section
-          id="testimonials"
-          className="scroll-mt-20 px-4 sm:px-6 lg:px-8 py-20 relative z-10 border-t border-slate-200/60 dark:border-zinc-900 bg-slate-100/40 dark:bg-black/20 transition-colors duration-500"
-        >
-          <div className="max-w-7xl mx-auto space-y-16">
-            <div className="text-center space-y-3">
-              <div
-                className={`${staatliches.className} text-sm tracking-[0.14em] text-blue-600 dark:text-blue-400 uppercase`}
-              >
-                Testimonials
-              </div>
-              <h3 className="text-3xl sm:text-4xl font-extrabold text-slate-900 dark:text-slate-100 tracking-tight transition-colors duration-300">
-                What students say
-              </h3>
-              <p className="text-base text-slate-600 dark:text-zinc-400 max-w-md mx-auto transition-colors duration-300">
-                Real feedback from learners and educators
-              </p>
-            </div>
-            <div className="grid md:grid-cols-3 gap-6">
-              {testimonials.map((t, index) => (
-                <div
-                  key={t.name}
-                  style={{ animationDelay: `${index * 200}ms` }}
-                  className="p-6 rounded-3xl border border-slate-200/80 dark:border-zinc-800/80 bg-white dark:bg-zinc-900/40 backdrop-blur-md hover:border-blue-400 dark:hover:border-zinc-700 hover:bg-slate-50 dark:hover:bg-zinc-900/60 transition-all duration-500 flex flex-col justify-between shadow-sm dark:shadow-none hover:shadow-xl hover:-translate-y-1 animate-in fade-in slide-in-from-bottom-6 fill-mode-both"
-                >
-                  <p className="text-slate-600 dark:text-slate-300 text-sm leading-relaxed italic transition-colors duration-300">
-                    “{t.quote}”
-                  </p>
-                  <div className="mt-6 pt-4 border-t border-slate-100 dark:border-zinc-800/60 flex flex-col">
-                    <div className="text-slate-950 dark:text-slate-100 font-bold tracking-tight transition-colors duration-300">
-                      {t.name}
-                    </div>
-                    <div className="text-xs font-medium text-slate-400 dark:text-zinc-500 mt-0.5 transition-colors duration-300">
-                      {t.role}
-                    </div>
-                  </div>
-                </div>
-              ))}
-            </div>
-          </div>
-        </section>
-      </main>
+      <SignOutDialog
+        open={showSignOutDialog}
+        onOpenChange={setShowSignOutDialog}
+        onSignOut={handleSignOut}
+      />
+
+      <HeroSection />
+      <FeaturesSection />
+      <HowItWorksSection />
+      <TestimonialsSection />
+
+      <ScrollToTopButton />
     </div>
   );
 }
+
diff --git a/src/app/provider.tsx b/src/app/provider.tsx
index fe31af63..f9197dfc 100644
--- a/src/app/provider.tsx
+++ b/src/app/provider.tsx
@@ -80,15 +80,24 @@ export function Provider({ children }: { children: React.ReactNode }) {
                 headers: { "content-type": "application/json" },
             });
 
-            const data = await res.json().catch(() => null);
-
             if (!res.ok) {
+                console.error(`User API failed with status ${res.status}`);
+                setAppUser(null);
+                return;
+            }
+
+            let data: AppUser | null = null;
+            try {
+                data = await res.json();
+            } catch (error) {
+                console.error("Failed to parse user response:", error);
                 setAppUser(null);
                 return;
             }
 
-            setAppUser(data as AppUser);
-        } catch {
+            setAppUser(data);
+        } catch (error) {
+            console.error("Failed to fetch user:", error);
             setAppUser(null);
         } finally {
             setLoading(false);
diff --git a/src/app/sitemap.ts b/src/app/sitemap.ts
index 62716e02..e2d8ad3d 100644
--- a/src/app/sitemap.ts
+++ b/src/app/sitemap.ts
@@ -16,14 +16,15 @@ export default function sitemap(): MetadataRoute.Sitemap {
   const baseUrl = getSiteUrl();
 
   return [
-    { url: baseUrl, lastModified: new Date(), changeFrequency: "weekly", priority: 1 },
-    { url: `${baseUrl}/about`, lastModified: new Date(), changeFrequency: "monthly", priority: 0.8 },
-    { url: `${baseUrl}/faq`, lastModified: new Date(), changeFrequency: "monthly", priority: 0.7 },
-    { url: `${baseUrl}/contributors`, lastModified: new Date(), changeFrequency: "weekly", priority: 0.6 },
-    { url: `${baseUrl}/contact`, lastModified: new Date(), changeFrequency: "monthly", priority: 0.5 },
-    { url: `${baseUrl}/discussions`, lastModified: new Date(), changeFrequency: "daily", priority: 0.8 },
-    { url: `${baseUrl}/public-rooms`, lastModified: new Date(), changeFrequency: "daily", priority: 0.9 },
-    { url: `${baseUrl}/terms-of-service`, lastModified: new Date(), changeFrequency: "yearly", priority: 0.3 },
-    { url: `${baseUrl}/privacy-policy`, lastModified: new Date(), changeFrequency: "yearly", priority: 0.3 },
+    { url: baseUrl, changeFrequency: "weekly", priority: 1 },
+    { url: `${baseUrl}/about`, changeFrequency: "monthly", priority: 0.8 },
+    { url: `${baseUrl}/faq`, changeFrequency: "monthly", priority: 0.7 },
+    { url: `${baseUrl}/contributors`, changeFrequency: "weekly", priority: 0.6 },
+    { url: `${baseUrl}/contact`, changeFrequency: "monthly", priority: 0.5 },
+    { url: `${baseUrl}/discussions`, changeFrequency: "daily", priority: 0.8 },
+    { url: `${baseUrl}/roadmaps`, changeFrequency: "weekly", priority: 0.7 },
+    { url: `${baseUrl}/public-rooms`, changeFrequency: "daily", priority: 0.9 },
+    { url: `${baseUrl}/terms-of-service`, changeFrequency: "yearly", priority: 0.3 },
+    { url: `${baseUrl}/privacy-policy`, changeFrequency: "yearly", priority: 0.3 },
   ];
 }
diff --git a/src/components/ScrollToTopButton.tsx b/src/components/ScrollToTopButton.tsx
new file mode 100644
index 00000000..1d1acbec
--- /dev/null
+++ b/src/components/ScrollToTopButton.tsx
@@ -0,0 +1,124 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { usePathname } from "next/navigation";
+import { ArrowUp } from "lucide-react";
+import { cn } from "@/lib/utils/utils";
+import { getScrollBehavior } from "@/lib/utils/scroll-to-section";
+
+type ScrollToTopButtonProps = {
+  showProgress?: boolean;
+  /** Scroll progress % (0–100) to show button when showProgress is true */
+  progressThreshold?: number;
+  /** Pixel scroll offset to show button when showProgress is false */
+  scrollThreshold?: number;
+};
+
+export default function ScrollToTopButton({
+  showProgress = false,
+  progressThreshold = 5,
+  scrollThreshold = 300,
+}: ScrollToTopButtonProps) {
+  const pathname = usePathname();
+  const showProgressOnHome = showProgress || pathname === "/";
+  const [isVisible, setIsVisible] = useState(false);
+  const [scrollProgress, setScrollProgress] = useState(0);
+
+  useEffect(() => {
+    const handleScroll = () => {
+      const scrollTop = window.scrollY;
+      const docHeight =
+        document.documentElement.scrollHeight - window.innerHeight;
+      const progress =
+        docHeight > 0 ? (scrollTop / docHeight) * 100 : 0;
+      setScrollProgress(progress);
+
+      if (showProgressOnHome) {
+        setIsVisible(progress > progressThreshold);
+      } else {
+        setIsVisible(scrollTop > scrollThreshold);
+      }
+    };
+
+    handleScroll();
+    window.addEventListener("scroll", handleScroll, { passive: true });
+
+    return () => window.removeEventListener("scroll", handleScroll);
+  }, [showProgressOnHome, progressThreshold, scrollThreshold]);
+
+  if (!isVisible) return null;
+
+  const circumference = 2 * Math.PI * 24;
+  const scrollToTop = () =>
+    window.scrollTo({ top: 0, behavior: getScrollBehavior() });
+
+  const focusRingClass =
+    "focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:ring-offset-background";
+
+  if (showProgressOnHome) {
+    return (
+      <button
+        type="button"
+        onClick={scrollToTop}
+        aria-label="Scroll to top"
+        className={cn(
+          "fixed bottom-8 right-8 z-50 flex h-14 w-14 items-center justify-center rounded-full",
+          focusRingClass
+        )}
+      >
+        <svg
+          className="absolute top-0 left-0 h-14 w-14 -rotate-90"
+          viewBox="0 0 56 56"
+          aria-hidden
+        >
+          <circle
+            cx="28"
+            cy="28"
+            r="24"
+            fill="none"
+            className="stroke-primary/20"
+            strokeWidth="3"
+          />
+          <circle
+            cx="28"
+            cy="28"
+            r="24"
+            fill="none"
+            className="stroke-primary transition-all duration-150"
+            strokeWidth="3"
+            strokeLinecap="round"
+            strokeDasharray={circumference}
+            strokeDashoffset={
+              circumference * (1 - scrollProgress / 100)
+            }
+          />
+        </svg>
+        <div
+          className={cn(
+            "flex h-10 w-10 items-center justify-center rounded-full border border-border bg-background text-foreground shadow-lg backdrop-blur-sm transition-colors",
+            "hover:bg-accent hover:text-accent-foreground",
+            "dark:border-white/10 dark:bg-card dark:shadow-black/20"
+          )}
+        >
+          <ArrowUp className="h-5 w-5" />
+        </div>
+      </button>
+    );
+  }
+
+  return (
+    <button
+      type="button"
+      onClick={scrollToTop}
+      aria-label="Scroll to top"
+      className={cn(
+        "fixed bottom-6 right-6 z-50 flex h-12 w-12 items-center justify-center rounded-2xl border border-border bg-background text-foreground shadow-lg transition-all",
+        "hover:-translate-y-1 hover:bg-accent hover:text-accent-foreground",
+        focusRingClass,
+        "dark:border-white/10 dark:bg-card dark:shadow-black/20"
+      )}
+    >
+      <ArrowUp className="h-5 w-5" />
+    </button>
+  );
+}
diff --git a/src/components/classroom/AskAIView.tsx b/src/components/classroom/AskAIView.tsx
index 6ce6540a..7cf81cd4 100644
--- a/src/components/classroom/AskAIView.tsx
+++ b/src/components/classroom/AskAIView.tsx
@@ -92,22 +92,32 @@ export default function AskAIView({ classroomId = null, onSuccess, initialDoubt
         setIsLoading(true);
         try {
           const res = await fetch(`/api/replies?doubtId=${initialDoubt.id}`);
-          if (res.ok) {
-            const data = await res.json();
-            if (Array.isArray(data) && data.length > 0) {
-              const solution = data.find(
-                (r: any) =>
-                  r.type === "solution" || r.userName === "DoubtDesk AI"
-              );
-              if (solution) {
-                const assistantMsg: DisplayMessage = {
-                  id: "initial-assistant-" + initialDoubt.id,
-                  role: "assistant",
-                  content: solution.content,
-                  isCelebration: mode === "mentor" && isCelebrationMessage(solution.content),
-                };
-                setMessages([initialUserMsg, assistantMsg]);
-              }
+          if (!res.ok) {
+            console.error("Could not retrieve the solution.");
+            return;
+          }
+
+          let data;
+          try {
+            data = await res.json();
+          } catch (error) {
+            console.error("Failed to parse replies response:", error);
+            return;
+          }
+
+          if (Array.isArray(data) && data.length > 0) {
+            const solution = data.find(
+              (r: any) =>
+                r.type === "solution" || r.userName === "DoubtDesk AI"
+            );
+            if (solution) {
+              const assistantMsg: DisplayMessage = {
+                id: "initial-assistant-" + initialDoubt.id,
+                role: "assistant",
+                content: solution.content,
+                isCelebration: mode === "mentor" && isCelebrationMessage(solution.content),
+              };
+              setMessages([initialUserMsg, assistantMsg]);
             }
           }
         } catch (err) {
@@ -164,10 +174,14 @@ export default function AskAIView({ classroomId = null, onSuccess, initialDoubt
       });
 
       if (!res.ok) {
-        throw new Error(`API error ${res.status}`);
+        throw new Error(res.statusText || "Something went wrong");
+      }
+      let data;
+      try {
+        data = (await res.json()) as { reply: string };
+      } catch (error) {
+        throw new Error("Invalid server response format");
       }
-
-      const data = (await res.json()) as { reply: string };
       const replyText = data.reply ?? "Sorry, something went wrong.";
 
       const assistantMsg: DisplayMessage = {
diff --git a/src/components/classroom/DoubtRepliesModal.tsx b/src/components/classroom/DoubtRepliesModal.tsx
index e428bad6..927650c3 100644
--- a/src/components/classroom/DoubtRepliesModal.tsx
+++ b/src/components/classroom/DoubtRepliesModal.tsx
@@ -121,10 +121,18 @@ export default function DoubtRepliesModal({ doubt, isOpen, onClose, onReplyChang
         try {
             const url = `/api/replies?doubtId=${doubt.id}`;
             const res = await fetch(url);
-            if (res.ok) {
-                const data = await res.json();
-                setReplies(data);
+            if (!res.ok) {
+                console.error(`Replies API failed with status ${res.status}`);
+                return;
+            }
+            let data;
+            try {
+                data = await res.json();
+            } catch (err) {
+                console.error("Failed to parse replies response:", err);
+                return;
             }
+            setReplies(data);
         } catch (error) {
             console.error("Failed to fetch replies:", error);
         } finally {
diff --git a/src/components/landing/FeaturesSection.tsx b/src/components/landing/FeaturesSection.tsx
new file mode 100644
index 00000000..82b21aba
--- /dev/null
+++ b/src/components/landing/FeaturesSection.tsx
@@ -0,0 +1,60 @@
+import { features } from "./landingContent";
+import { Staatliches } from "next/font/google";
+
+const staatliches = Staatliches({ weight: "400", subsets: ["latin"] });
+
+export default function FeaturesSection() {
+  return (
+    <section
+      id="features"
+      className="scroll-mt-20 px-4 sm:px-6 lg:px-8 py-20 relative z-10 border-t border-slate-200/60 dark:border-slate-900 bg-slate-100/40 dark:bg-black/20 transition-colors duration-500"
+    >
+      <div className="max-w-7xl mx-auto space-y-16">
+        <div className="max-w-3xl mx-auto text-center space-y-4">
+          <div
+            className={`${staatliches.className} text-sm tracking-[0.14em] text-blue-600 dark:text-blue-400 uppercase`}
+          >
+            Features
+          </div>
+          <h3 className="text-3xl sm:text-4xl lg:text-5xl font-extrabold text-slate-900 dark:text-slate-100 tracking-tight leading-tight transition-colors duration-300">
+            Everything your classroom needs to solve doubts, stay aligned,
+            and move faster.
+          </h3>
+          <p className="text-base sm:text-lg text-slate-600 dark:text-slate-400 max-w-2xl mx-auto leading-relaxed transition-colors duration-300">
+            Built for modern study teams, DoubtDesk blends AI-powered doubt
+            solving, shared resources, and smart classroom flows into a
+            single polished platform.
+          </p>
+        </div>
+
+        <div
+          id="features-grid"
+          className="grid gap-6 scroll-mt-20 sm:grid-cols-2 lg:grid-cols-3"
+        >
+          {features.map((feature, i) => {
+            const Icon = feature.icon;
+            return (
+              <div
+                key={feature.slug}
+                id={`feature-${feature.slug}`}
+                style={{ animationDelay: `${i * 100}ms` }}
+                className="group relative scroll-mt-20 overflow-hidden rounded-3xl border border-slate-200/80 dark:border-zinc-800/80 bg-white dark:bg-zinc-900/40 p-6 shadow-sm shadow-slate-200/60 dark:shadow-none hover:shadow-lg dark:hover:shadow-lg dark:hover:shadow-blue-500/10 hover:border-blue-300/60 dark:hover:border-blue-500/40 transition-all duration-300 animate-in fade-in slide-in-from-bottom-4"
+              >
+                <div className="flex h-12 w-12 items-center justify-center rounded-2xl bg-blue-50 dark:bg-blue-950/50 text-blue-600 dark:text-blue-400 shadow-inner transition-all duration-300 group-hover:scale-110 group-hover:shadow-lg group-hover:shadow-blue-500/20">
+                  <Icon className="h-5 w-5 transition-transform duration-300 group-hover:scale-110" />
+                </div>
+                <h4 className="mt-5 text-xl font-bold text-slate-900 dark:text-slate-100 tracking-tight transition-colors duration-300">
+                  {feature.title}
+                </h4>
+                <p className="mt-2.5 text-sm leading-relaxed text-slate-600 dark:text-zinc-400 transition-colors duration-300">
+                  {feature.description}
+                </p>
+              </div>
+            );
+          })}
+        </div>
+      </div>
+    </section>
+  );
+}
+
diff --git a/src/components/landing/HeroSection.tsx b/src/components/landing/HeroSection.tsx
new file mode 100644
index 00000000..78e834bd
--- /dev/null
+++ b/src/components/landing/HeroSection.tsx
@@ -0,0 +1,105 @@
+import { ArrowRight, Globe } from "lucide-react";
+import Link from "next/link";
+import { SignedIn, SignedOut } from "@clerk/nextjs";
+import { Staatliches } from "next/font/google";
+import ShapeGrid from "@/components/marketing/ShapeGrid";
+import LiveCampusThreadPanel from "@/components/classroom/LiveCampusThreadPanel";
+
+const staatliches = Staatliches({ weight: "400", subsets: ["latin"] });
+
+
+export default function HeroSection() {
+  return (
+    <main className="flex-1 relative overflow-hidden scroll-smooth">
+      <div className="absolute inset-0 z-0 pointer-events-none">
+        <ShapeGrid
+          speed={0.45}
+          squareSize={42}
+          direction="diagonal"
+          borderColor="rgba(143, 172, 243, 0.2)"
+          hoverFillColor="rgba(182, 201, 248, 0.08)"
+          shape="square"
+          hoverTrailAmount={5}
+          className="opacity-100 dark:opacity-60"
+        />
+        <div className="absolute inset-0 bg-gradient-to-b from-blue-50/30 via-transparent to-transparent dark:from-transparent" />
+        <div className="absolute inset-0 bg-[radial-gradient(circle_at_30%_20%,rgba(59,130,246,0.08),transparent_35%),radial-gradient(circle_at_70%_60%,rgba(99,102,241,0.05),transparent_40%)] dark:bg-[radial-gradient(circle_at_26%_24%,rgba(125,162,255,0.12),transparent_28%),radial-gradient(circle_at_72%_42%,rgba(170,191,255,0.05),transparent_26%)]" />
+      </div>
+      <section className="px-4 sm:px-6 lg:px-20 pt-32 pb-20 relative z-10">
+        <div className="max-w-7xl mx-auto grid grid-cols-1 xl:grid-cols-[1.1fr_0.9fr] gap-12 xl:gap-16 items-center">
+          <div className="text-center xl:text-left space-y-8 animate-in fade-in slide-in-from-left-6 duration-700 ease-out">
+            <h2 className="text-4xl sm:text-5xl lg:text-6xl xl:text-7xl font-black text-slate-900 dark:text-white tracking-tight leading-[1.05] max-w-xl sm:max-w-2xl mx-auto xl:mx-0 transition-colors duration-300">
+              Empower <br />
+              Your Learning <br />
+              with{" "}
+              <span
+                className={`${staatliches.className} uppercase tracking-[0.04em] bg-gradient-to-r from-blue-600 via-indigo-500 to-blue-600 dark:from-[#8BB8FF] dark:to-[#AABFFF] bg-clip-text text-transparent bg-[size:200%_auto] animate-[shine_5s_linear_infinite]`}
+              >
+                Collaborative AI.
+              </span>
+            </h2>
+
+            <div className="space-y-2 max-w-md sm:max-w-xl mx-auto xl:mx-0 transition-all duration-300">
+              <div
+                className={`${staatliches.className} text-xs tracking-[0.16em] text-blue-600 dark:text-blue-400 uppercase font-medium`}
+              >
+                Collaborative classrooms
+              </div>
+              <p className="text-base sm:text-lg text-slate-500 dark:text-zinc-400 leading-relaxed transition-colors duration-300">
+                Built for collaborative classrooms, instant doubt solving, and
+                smarter learning.
+              </p>
+            </div>
+
+            <div className="flex flex-col sm:flex-row items-stretch sm:items-center justify-center xl:justify-start gap-4 transition-all duration-300 max-w-md sm:max-w-none mx-auto xl:mx-0">
+              <SignedIn>
+                <Link href="/rooms" className="w-full sm:w-auto">
+                  <button className="group w-full sm:w-auto px-10 py-5 bg-[#5E8CFF] text-white rounded-2xl text-lg font-bold hover:bg-[#8BB8FF] hover:shadow-[0_0_24px_rgba(94,140,255,0.35)] transition-all flex items-center justify-center gap-2 hover:scale-[1.02] active:scale-[0.98]">
+                    <span
+                      className={`${staatliches.className} uppercase tracking-[0.08em]`}
+                    >
+                      Open Classroom
+                    </span>
+                    <ArrowRight className="w-5 h-5 group-hover:translate-x-1.5 transition-transform duration-300" />
+                  </button>
+                </Link>
+              </SignedIn>
+
+              <SignedOut>
+                <Link href="/sign-up" className="w-full sm:w-auto">
+                  <button className="group w-full sm:w-auto px-10 py-5 bg-white text-slate-950 rounded-2xl text-lg font-bold hover:bg-slate-200 transition-all flex items-center justify-center gap-2 hover:scale-[1.02] active:scale-[0.98]">
+                    <span
+                      className={`${staatliches.className} uppercase tracking-[0.08em]`}
+                    >
+                      Open
+                    </span>
+                    <span>Classroom</span>
+                    <ArrowRight className="w-5 h-5 group-hover:translate-x-1.5 transition-transform duration-300" />
+                  </button>
+                </Link>
+              </SignedOut>
+
+              <Link href="/public-rooms" className="w-full sm:w-auto">
+                <button className="group w-full sm:w-auto px-10 py-5 bg-slate-100 dark:bg-white/5 hover:bg-slate-200 dark:hover:bg-white/10 text-slate-900 dark:text-white rounded-2xl text-lg font-bold border border-slate-200 dark:border-white/10 transition-all hover:shadow-[0_0_20px_rgba(94,140,255,0.15)] flex items-center justify-center gap-2 hover:scale-[1.02] active:scale-[0.98]">
+                  <span
+                    className={`${staatliches.className} uppercase tracking-[0.08em]`}
+                  >
+                    Explore Community
+                  </span>
+                  <Globe className="w-5 h-5 text-slate-600 dark:text-slate-400 group-hover:text-blue-600 dark:group-hover:text-[#8BB8FF] group-hover:rotate-12 transition-transform duration-300" />
+                </button>
+              </Link>
+            </div>
+          </div>
+
+          <div className="flex items-center justify-center xl:justify-end w-full pt-4 xl:pt-6 animate-in fade-in slide-in-from-bottom-8 duration-700 delay-200 ease-out fill-mode-both">
+            <div className="w-full max-w-md xl:max-w-full transition-transform duration-500 hover:scale-[1.01] rounded-[0.9rem]">
+              <LiveCampusThreadPanel />
+            </div>
+          </div>
+        </div>
+      </section>
+    </main>
+  );
+}
+
diff --git a/src/components/landing/HowItWorksSection.tsx b/src/components/landing/HowItWorksSection.tsx
new file mode 100644
index 00000000..c86a8cd7
--- /dev/null
+++ b/src/components/landing/HowItWorksSection.tsx
@@ -0,0 +1,47 @@
+import { howItWorks } from "./landingContent";
+
+export default function HowItWorksSection() {
+  return (
+    <section
+      id="how-it-works"
+      className="scroll-mt-20 px-4 sm:px-6 lg:px-8 py-20 relative z-10 border-t border-slate-200/60 dark:border-zinc-900 transition-colors duration-500"
+    >
+      <div className="max-w-7xl mx-auto space-y-16">
+        <div className="text-center space-y-3">
+          <div className="text-sm tracking-[0.14em] text-blue-600 dark:text-blue-400 uppercase">
+            Process
+          </div>
+          <h3 className="text-3xl sm:text-4xl font-extrabold text-slate-900 dark:text-slate-100 tracking-tight transition-colors duration-300">
+            How it works
+          </h3>
+          <p className="text-base text-slate-600 dark:text-zinc-400 max-w-md mx-auto transition-colors duration-300">
+            Simple flow from doubt → solution → understanding
+          </p>
+        </div>
+
+        <div className="grid md:grid-cols-3 gap-8 relative">
+          <div className="hidden md:block absolute top-12 left-[15%] right-[15%] h-0.5 bg-gradient-to-r from-blue-100 via-indigo-100 to-blue-100 dark:from-zinc-900 dark:via-zinc-800 dark:to-zinc-900 -z-10 transition-colors duration-300" />
+
+          {howItWorks.map((step, index) => (
+            <div
+              key={step.title}
+              style={{ animationDelay: `${index * 150}ms` }}
+              className="p-6 rounded-3xl border border-slate-200/80 dark:border-zinc-900 bg-white dark:bg-zinc-950/40 backdrop-blur-sm hover:border-blue-400 dark:hover:border-zinc-700 hover:bg-slate-50 dark:hover:bg-zinc-900/40 transition-all duration-500 flex flex-col items-center text-center space-y-4 group shadow-sm dark:shadow-none hover:shadow-lg hover:-translate-y-1 animate-in fade-in slide-in-from-bottom-6 fill-mode-both"
+            >
+              <div className="flex h-12 w-12 items-center justify-center rounded-full bg-blue-600 dark:bg-blue-500 text-white text-lg font-bold shadow-md shadow-blue-500/20 dark:shadow-blue-500/10 transition-all duration-500 group-hover:scale-110 group-hover:bg-indigo-600 dark:group-hover:bg-indigo-500">
+                {index + 1}
+              </div>
+              <h4 className="text-xl font-bold text-slate-900 dark:text-slate-100 tracking-tight transition-colors duration-300">
+                {step.title}
+              </h4>
+              <p className="text-sm leading-relaxed text-slate-600 dark:text-zinc-400 transition-colors duration-300">
+                {step.description}
+              </p>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}
+
diff --git a/src/components/landing/SignOutDialog.tsx b/src/components/landing/SignOutDialog.tsx
new file mode 100644
index 00000000..4783896e
--- /dev/null
+++ b/src/components/landing/SignOutDialog.tsx
@@ -0,0 +1,48 @@
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/components/ui/alert-dialog";
+
+type SignOutDialogProps = {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onSignOut: () => void | Promise<void>;
+};
+
+export default function SignOutDialog({
+  open,
+  onOpenChange,
+  onSignOut,
+}: SignOutDialogProps) {
+  return (
+    <AlertDialog open={open} onOpenChange={onOpenChange}>
+      <AlertDialogContent className="bg-white dark:bg-slate-900 border-slate-200 dark:border-slate-800 text-slate-900 dark:text-white rounded-2xl animate-in fade-in-50 zoom-in-95 duration-200">
+        <AlertDialogHeader>
+          <AlertDialogTitle>Are you sure you want to sign out?</AlertDialogTitle>
+          <AlertDialogDescription className="text-slate-500 dark:text-slate-400">
+            You will need to log in again to access your classroom insights and
+            doubt-solving history.
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogCancel className="bg-slate-100 dark:bg-slate-800 border-slate-200 dark:border-slate-700 text-slate-700 dark:text-slate-300 hover:bg-slate-200 dark:hover:bg-slate-700 rounded-xl transition-all duration-200">
+            Cancel
+          </AlertDialogCancel>
+          <AlertDialogAction
+            onClick={onSignOut}
+            className="bg-red-600 hover:bg-red-700 text-white border-none rounded-xl transition-all duration-200"
+          >
+            Sign Out
+          </AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+}
+
diff --git a/src/components/landing/TestimonialsSection.tsx b/src/components/landing/TestimonialsSection.tsx
new file mode 100644
index 00000000..a0de75ce
--- /dev/null
+++ b/src/components/landing/TestimonialsSection.tsx
@@ -0,0 +1,47 @@
+import { testimonials } from "./landingContent";
+
+export default function TestimonialsSection() {
+  return (
+    <section
+      id="testimonials"
+      className="scroll-mt-20 px-4 sm:px-6 lg:px-8 py-20 relative z-10 border-t border-slate-200/60 dark:border-zinc-900 bg-slate-100/40 dark:bg-black/20 transition-colors duration-500"
+    >
+      <div className="max-w-7xl mx-auto space-y-16">
+        <div className="text-center space-y-3">
+          <div className="text-sm tracking-[0.14em] text-blue-600 dark:text-blue-400 uppercase">
+            Testimonials
+          </div>
+          <h3 className="text-3xl sm:text-4xl font-extrabold text-slate-900 dark:text-slate-100 tracking-tight transition-colors duration-300">
+            What students say
+          </h3>
+          <p className="text-base text-slate-600 dark:text-zinc-400 max-w-md mx-auto transition-colors duration-300">
+            Real feedback from learners and educators
+          </p>
+        </div>
+
+        <div className="grid md:grid-cols-3 gap-6">
+          {testimonials.map((t, index) => (
+            <div
+              key={t.name}
+              style={{ animationDelay: `${index * 200}ms` }}
+              className="p-6 rounded-3xl border border-slate-200/80 dark:border-zinc-800/80 bg-white dark:bg-zinc-900/40 backdrop-blur-md hover:border-blue-400 dark:hover:border-zinc-700 hover:bg-slate-50 dark:hover:bg-zinc-900/60 transition-all duration-500 flex flex-col justify-between shadow-sm dark:shadow-none hover:shadow-xl hover:-translate-y-1 animate-in fade-in slide-in-from-bottom-6 fill-mode-both"
+            >
+              <p className="text-slate-600 dark:text-slate-300 text-sm leading-relaxed italic transition-colors duration-300">
+                “{t.quote}”
+              </p>
+              <div className="mt-6 pt-4 border-t border-slate-100 dark:border-zinc-800/60 flex flex-col">
+                <div className="text-slate-950 dark:text-slate-100 font-bold tracking-tight transition-colors duration-300">
+                  {t.name}
+                </div>
+                <div className="text-xs font-medium text-slate-400 dark:text-zinc-500 mt-0.5 transition-colors duration-300">
+                  {t.role}
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}
+
diff --git a/src/components/landing/landingContent.ts b/src/components/landing/landingContent.ts
new file mode 100644
index 00000000..e593fac1
--- /dev/null
+++ b/src/components/landing/landingContent.ts
@@ -0,0 +1,157 @@
+import {
+  Activity,
+  Clipboard,
+  LayoutGrid,
+  Map,
+  MessageCircle,
+  Users,
+} from "lucide-react";
+
+export type LandingFeature = {
+  slug: string;
+  title: string;
+  description: string;
+  // Stored as a React component type (lucide icons)
+  icon: React.ComponentType<{ className?: string }>;
+};
+
+
+export type LandingHowItWorksStep = {
+  title: string;
+  description: string;
+};
+
+export type LandingTestimonial = {
+  id: string;
+  name: string;
+  role: string;
+  institution: string;
+  avatarUrl: string;
+  quote: string;
+  rating: number;
+};
+
+export const features: LandingFeature[] = [
+  {
+    slug: "collaborative-discussions",
+    title: "Real-time collaborative discussions",
+    description:
+      "Share questions, answers, and classroom updates instantly across study groups.",
+    icon: MessageCircle,
+  },
+  {
+    slug: "classroom-management",
+    title: "Smart classroom management",
+    description:
+      "Organize learning spaces, schedules, and teacher workflows with ease.",
+    icon: LayoutGrid,
+  },
+  {
+    slug: "notes-resource-sharing",
+    title: "Notes and resource sharing",
+    description:
+      "Keep study materials, highlights, and shared guides organized in one hub.",
+    icon: Clipboard,
+  },
+  {
+    slug: "learning-roadmaps",
+    title: "Learning roadmaps and guidance",
+    description:
+      "Follow curated study paths that keep learners focused on milestones.",
+    icon: Map,
+  },
+  {
+    slug: "ai-powered-doubt-solving",
+    title: "AI-powered doubt solving",
+    description:
+      "Get instant, context-aware answers to questions with smart AI support.",
+    icon: Activity,
+  },
+  {
+    slug: "study-collaboration",
+    title: "Organized study collaboration",
+    description:
+      "Coordinate projects, peer review, and group work with clear tools and structure.",
+    icon: Users,
+  },
+];
+
+export const howItWorks: LandingHowItWorksStep[] = [
+  {
+    title: "Join or create a classroom",
+    description: "Teachers set up rooms, students join using invite codes.",
+  },
+  {
+    title: "Ask doubts instantly",
+    description: "Post questions using text or image and get AI + peer help.",
+  },
+  {
+    title: "Get clear answers & insights",
+    description:
+      "AI explanations, teacher guidance, and analytics all in one place.",
+  },
+];
+
+export const testimonials: LandingTestimonial[] = [
+  {
+    id: "1",
+    name: "Aarav Sharma",
+    role: "B.Tech Student",
+    institution: "DTU",
+    avatarUrl: "/avatars/arav.png",
+    quote:
+      "DoubtDesk helped me resolve doubts 3x faster during exams. The AI explanations are incredibly clear.",
+    rating: 5,
+  },
+  {
+    id: "2",
+    name: "Neha Verma",
+    role: "CS Student",
+    institution: "Punjab University",
+    avatarUrl: "/avatars/neha.png",
+    quote:
+      "Everything is organized in one place. No more scrolling through endless chat groups.",
+    rating: 5,
+  },
+  {
+    id: "3",
+    name: "Rohit Mehta",
+    role: "Teaching Assistant",
+    institution: "NIT Jalandhar",
+    avatarUrl: "/avatars/rohit.png",
+    quote:
+      "Analytics help me quickly identify where students struggle the most.",
+    rating: 5,
+  },
+  {
+    id: "4",
+    name: "Priya Singh",
+    role: "MBA Student",
+    institution: "IIM Indore",
+    avatarUrl: "/avatars/priya.png",
+    quote:
+      "My exam preparation became much more efficient after switching to DoubtDesk.",
+    rating: 5,
+  },
+  {
+    id: "5",
+    name: "Karan Gupta",
+    role: "Engineering Student",
+    institution: "PEC Chandigarh",
+    avatarUrl: "/avatars/karan.png",
+    quote:
+      "Instant answers saved hours of searching through notes and forums.",
+    rating: 5,
+  },
+  {
+    id: "6",
+    name: "Ananya Kapoor",
+    role: "Professor",
+    institution: "Chitkara University",
+    avatarUrl: "/avatars/ananya.png",
+    quote:
+      "Managing classroom discussions has become significantly easier.",
+    rating: 5,
+  },
+];
+
diff --git a/src/components/layout/Header.tsx b/src/components/layout/Header.tsx
index 25676cff..e4299f23 100644
--- a/src/components/layout/Header.tsx
+++ b/src/components/layout/Header.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useCallback } from "react";
 import Link from "next/link";
 import { useRouter, usePathname } from "next/navigation";
 import { SignedIn, SignedOut, UserButton } from "@clerk/nextjs";
@@ -31,6 +31,31 @@ export default function Header() {
     return () => window.removeEventListener("popstate", handlePopState);
   }, [pathname]);
 
+  // Lock body scroll while the mobile menu is open
+  useEffect(() => {
+    if (isOpen) {
+      const previousOverflow = document.body.style.overflow;
+      document.body.style.overflow = "hidden";
+      return () => {
+        document.body.style.overflow = previousOverflow;
+      };
+    }
+  }, [isOpen]);
+
+  // Close mobile menu on Escape
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === "Escape") setIsOpen(false);
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, []);
+
+  // Close mobile menu automatically on route change
+  useEffect(() => {
+    setIsOpen(false);
+  }, [pathname]);
+
   // Scroll Progress Bar
   useEffect(() => {
     const updateScrollProgress = () => {
@@ -55,8 +80,14 @@ export default function Header() {
     { href: "/public-rooms", label: "Public Rooms" },
     { href: "/faq", label: "FAQ" },
     { href: "/contact", label: "Contact" },
+    { href: "/about", label: "About" },
   ];
 
+  const isActive = useCallback(
+    (href: string) => !href.startsWith("#") && pathname === href,
+    [pathname]
+  );
+
   const handleScrollNavigation = (targetId: string) => {
     setIsOpen(false);
 
@@ -77,7 +108,7 @@ export default function Header() {
         {showBackButton && (
           <button
             onClick={handleBackClick}
-            className={`hidden md:flex items-center justify-center p-2 rounded-xl transition-all duration-300 flex-shrink-0 ${
+            className={`hidden md:flex items-center justify-center p-2 rounded-xl transition-all duration-300 flex-shrink-0 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500/60 ${
               canGoBack
                 ? "text-slate-700 dark:text-zinc-300 hover:bg-slate-100 dark:hover:bg-zinc-900 cursor-pointer"
                 : "text-slate-400 dark:text-zinc-600 opacity-50 cursor-default"
@@ -93,9 +124,9 @@ export default function Header() {
         {/* Logo and Brand */}
         <Link
           href="/"
-          className="flex items-center gap-2 sm:gap-3 hover:opacity-90 transition-opacity shrink-0 group relative z-50"
+          className="flex items-center gap-2 sm:gap-3 shrink-0 group relative z-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500/60 rounded-xl"
         >
-          <div className="w-9 h-9 sm:w-10 sm:h-10 rounded-xl flex items-center justify-center transition-transform duration-300 group-hover:scale-105">
+          <div className="relative w-9 h-9 sm:w-10 sm:h-10 rounded-xl flex items-center justify-center transition-transform duration-300 group-hover:scale-105 bg-gradient-to-br from-blue-600/10 to-blue-400/5 dark:from-[#5E8CFF]/15 dark:to-[#5E8CFF]/5 ring-1 ring-blue-600/10 dark:ring-[#5E8CFF]/20">
             <img
               src="/logo.png"
               alt="DoubtDesk logo"
diff --git a/src/lib/scroll-to-section.ts b/src/lib/scroll-to-section.ts
new file mode 100644
index 00000000..4385d2d6
--- /dev/null
+++ b/src/lib/scroll-to-section.ts
@@ -0,0 +1,25 @@
+export function getScrollBehavior(): ScrollBehavior {
+  const prefersReducedMotion = window.matchMedia(
+    "(prefers-reduced-motion: reduce)"
+  ).matches;
+  return prefersReducedMotion ? "auto" : "smooth";
+}
+
+export function scrollToSection(
+  targetId: string,
+  options?: { updateHash?: boolean }
+) {
+  const target = document.getElementById(targetId);
+  if (!target) return;
+
+  const headerHeight =
+    document.querySelector("header")?.getBoundingClientRect().height ?? 80;
+  const top =
+    target.getBoundingClientRect().top + window.scrollY - headerHeight;
+
+  window.scrollTo({ top, behavior: getScrollBehavior() });
+
+  if (options?.updateHash !== false) {
+    history.pushState(null, "", `#${targetId}`);
+  }
+}