diff --git a/Frontend/package-lock.json b/Frontend/package-lock.json
index 88e1fc4a..cd9c8c1e 100644
--- a/Frontend/package-lock.json
+++ b/Frontend/package-lock.json
@@ -23,8 +23,8 @@
         "gsap": "^3.13.0",
         "jwt-decode": "^4.0.0",
         "lucide-react": "^0.545.0",
-        "react": "^19.1.1",
-        "react-dom": "^19.1.1",
+        "react": "^18.3.1",
+        "react-dom": "^18.3.1",
         "react-dropzone": "^14.3.8",
         "react-helmet-async": "^2.0.5",
         "react-hot-toast": "^2.6.0",
@@ -4204,24 +4204,28 @@
       "license": "MIT"
     },
     "node_modules/react": {
-      "version": "19.2.4",
-      "resolved": "https://registry.npmjs.org/react/-/react-19.2.4.tgz",
-      "integrity": "sha512-9nfp2hYpCwOjAN+8TZFGhtWEwgvWHXqESH8qT89AT/lWklpLON22Lc8pEtnpsZz7VmawabSU0gCjnj8aC0euHQ==",
+      "version": "18.3.1",
+      "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
+      "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==",
       "license": "MIT",
+      "dependencies": {
+        "loose-envify": "^1.1.0"
+      },
       "engines": {
         "node": ">=0.10.0"
       }
     },
     "node_modules/react-dom": {
-      "version": "19.2.4",
-      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.4.tgz",
-      "integrity": "sha512-AXJdLo8kgMbimY95O2aKQqsz2iWi9jMgKJhRBAxECE4IFxfcazB2LmzloIoibJI3C12IlY20+KFaLv+71bUJeQ==",
+      "version": "18.3.1",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",
+      "integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==",
       "license": "MIT",
       "dependencies": {
-        "scheduler": "^0.27.0"
+        "loose-envify": "^1.1.0",
+        "scheduler": "^0.23.2"
       },
       "peerDependencies": {
-        "react": "^19.2.4"
+        "react": "^18.3.1"
       }
     },
     "node_modules/react-dropzone": {
@@ -4620,10 +4624,13 @@
       }
     },
     "node_modules/scheduler": {
-      "version": "0.27.0",
-      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.27.0.tgz",
-      "integrity": "sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q==",
-      "license": "MIT"
+      "version": "0.23.2",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.2.tgz",
+      "integrity": "sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==",
+      "license": "MIT",
+      "dependencies": {
+        "loose-envify": "^1.1.0"
+      }
     },
     "node_modules/seedrandom": {
       "version": "3.0.5",
diff --git a/Frontend/package.json b/Frontend/package.json
index 66dab3c7..4dbfe129 100644
--- a/Frontend/package.json
+++ b/Frontend/package.json
@@ -32,8 +32,8 @@
     "gsap": "^3.13.0",
     "jwt-decode": "^4.0.0",
     "lucide-react": "^0.545.0",
-    "react": "^19.1.1",
-    "react-dom": "^19.1.1",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "react-dropzone": "^14.3.8",
     "react-helmet-async": "^2.0.5",
     "react-hot-toast": "^2.6.0",
diff --git a/Frontend/src/components/Navbar.jsx b/Frontend/src/components/Navbar.jsx
index 590bf48e..0094da05 100644
--- a/Frontend/src/components/Navbar.jsx
+++ b/Frontend/src/components/Navbar.jsx
@@ -1,191 +1,289 @@
-import { useState, useEffect } from "react";
-import { Link, useNavigate, useLocation } from "react-router-dom";
+import { useEffect, useMemo, useState } from "react";
+import { Link, useNavigate } from "react-router-dom";
 import { useSelector } from "react-redux";
-import { Menu, X, Home } from "lucide-react";
+import { Menu, X } from "lucide-react";
 import ThemeToggle from "./ThemeToggle";
 
-export default function Navbar() {
-  const navigate = useNavigate();
-  const location = useLocation();
-  const { token } = useSelector((state) => state.auth);
-  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
-  const [activeSection, setActiveSection] = useState("");
+const NAV_TONES = {
+  landing: {
+    nav: "fixed top-6 left-1/2 -translate-x-1/2 w-[95%] max-w-7xl bg-black/10 backdrop-blur-xl rounded-full border border-white/20 z-50 text-skin-primary",
+    link: "text-gray-200 hover:text-emerald-400",
+    mobileMenu: "bg-white backdrop-blur-md rounded-2xl shadow-xl border border-gray-200",
+    mobileLink: "text-gray-600 hover:text-gray-900",
+    menuButton: "text-gray-900 hover:bg-gray-100",
+    logoPrimary: "text-white-800",
+    logoSecondary: "text-emerald-500",
+    activeLink: "text-emerald-400",
+    activeMobile: "text-emerald-500 bg-emerald-50",
+  },
+  skin: {
+    nav: "fixed top-6 left-1/2 transform -translate-x-1/2 w-[95%] max-w-7xl bg-skin-primary/95 backdrop-blur-md rounded-full shadow-lg z-50 border border-skin-primary",
+    link: "text-gray-600 hover:text-skin-primary",
+    mobileMenu: "bg-white backdrop-blur-md rounded-2xl shadow-xl border border-gray-200",
+    mobileLink: "text-gray-600 hover:text-skin-primary",
+    menuButton: "text-skin-primary hover:bg-gray-100",
+    logoPrimary: "text-skin-primary",
+    logoSecondary: "text-emerald-500",
+    activeLink: "text-emerald-500",
+    activeMobile: "text-emerald-500 bg-emerald-50",
+  },
+  light: {
+    nav: "fixed top-6 left-1/2 transform -translate-x-1/2 w-[95%] max-w-7xl bg-white/95 backdrop-blur-md rounded-full shadow-lg z-50 border border-gray-200",
+    link: "text-gray-600 hover:text-gray-900",
+    mobileMenu: "bg-white backdrop-blur-md rounded-2xl shadow-xl border border-gray-200",
+    mobileLink: "text-gray-600 hover:text-gray-900",
+    menuButton: "text-gray-900 hover:bg-gray-100",
+    logoPrimary: "text-gray-900",
+    logoSecondary: "text-emerald-500",
+    activeLink: "text-emerald-500",
+    activeMobile: "text-emerald-500 bg-emerald-50",
+  },
+};
 
-  const closeMenu = () => setMobileMenuOpen(false);
+const buildLinks = (isLanding) => {
+  const prefix = isLanding ? "" : "/";
+  return [
+    { key: "features", label: "Features", href: `${prefix}#features`, isSection: true },
+    { key: "about", label: "About", to: "/about" },
+    { key: "how", label: "How it Works", href: `${prefix}#how-it-works`, isSection: true },
+    { key: "pricing", label: "Pricing", href: `${prefix}#pricing`, isSection: true },
+    { key: "faq", label: "FAQ", href: `${prefix}#faq`, isSection: true },
+    { key: "contact", label: "Contact", to: "/contact" },
+  ];
+};
 
-  /* ---------------- FORCE RE-ANIMATION ON HOME ---------------- */
-  const handleHomeClick = () => {
-    if (location.pathname === "/") {
-      window.scrollTo({ top: 0, behavior: "smooth" });
+export default function Navbar({
+  tone = "light",
+  variant = "pill",
+  isLanding = false,
+  activeKey,
+  showThemeToggle = false,
+  showAuthButtons = true,
+  showDashboardButton = true,
+  onSectionClick,
+}) {
+  const { token } = useSelector((state) => state.auth);
+  const navigate = useNavigate();
+  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
+  const [scrollY, setScrollY] = useState(0);
+  const styles = NAV_TONES[tone] || NAV_TONES.light;
+  const links = useMemo(() => buildLinks(isLanding), [isLanding]);
 
-      // Force reload to replay animations
-      setTimeout(() => {
-        window.location.reload();
-      }, 400);
-    } else {
-      navigate("/");
+  useEffect(() => {
+    if (variant !== "simple") {
+      return undefined;
     }
+    const handleScroll = () => setScrollY(window.scrollY);
+    window.addEventListener("scroll", handleScroll);
+    return () => window.removeEventListener("scroll", handleScroll);
+  }, [variant]);
+
+  const closeMobileMenu = () => {
+    setMobileMenuOpen(false);
   };
 
-  /* ---------------- SMOOTH SCROLL ---------------- */
-  const scrollToSection = (id) => {
-    if (location.pathname !== "/") {
-      navigate("/");
-      setTimeout(() => {
-        const el = document.getElementById(id);
-        if (el) el.scrollIntoView({ behavior: "smooth", block: "start" });
-      }, 200);
-    } else {
-      const el = document.getElementById(id);
-      if (el) el.scrollIntoView({ behavior: "smooth", block: "start" });
+  const handleSectionClick = (event, sectionId) => {
+    if (onSectionClick) {
+      onSectionClick(event, sectionId);
     }
-    closeMenu();
+    closeMobileMenu();
   };
 
-  /* ---------------- SPY NAVIGATION ---------------- */
-  useEffect(() => {
-    const sections = ["features", "how-it-works", "pricing", "faq"];
-
-    const handleScroll = () => {
-      let current = "";
-      sections.forEach((id) => {
-        const section = document.getElementById(id);
-        if (section) {
-          const rect = section.getBoundingClientRect();
-          if (rect.top <= 120 && rect.bottom >= 120) {
-            current = id;
-          }
-        }
-      });
-      setActiveSection(current);
-    };
-
-    window.addEventListener("scroll", handleScroll);
-    return () => window.removeEventListener("scroll", handleScroll);
-  }, []);
-
-  const linkClass = (id) =>
-    `relative cursor-pointer transition-colors duration-300 ${activeSection === id
-      ? "text-emerald-500"
-      : "text-gray-900 dark:text-gray-300 hover:text-emerald-500"
-    }`;
+  if (variant === "simple") {
+    return (
+      <nav
+        className={`fixed top-0 left-0 right-0 z-50 transition-all duration-300 ${scrollY > 20
+          ? "bg-skin-primary/95 backdrop-blur-xl shadow-lg shadow-black/5"
+          : "bg-transparent"
+          }`}
+      >
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="flex justify-between items-center h-16 sm:h-20">
+            <div className="flex items-center gap-2 sm:gap-3">
+              <div className="relative">
+                <div className="w-10 h-10 sm:w-12 sm:h-12 rounded-lg sm:rounded-xl flex items-center justify-center ">
+                  <img src={logo} alt="logo" />
+                </div>
 
-  const pageActive = (path) =>
-    location.pathname === path
-      ? "text-emerald-500 underline underline-offset-8"
-      : "text-gray-900 dark:text-gray-300 hover:text-emerald-500";
-
-  return (
-    <nav
-      className="fixed top-6 left-1/2 transform -translate-x-1/2 w-[95%] max-w-7xl 
-      bg-white/70 dark:bg-gray-900/70 backdrop-blur-xl 
-      rounded-full shadow-lg z-50 border border-white/30 dark:border-gray-700/40 transition-all duration-300"
-    >
-      <div className="px-6 md:px-10 py-4 flex items-center justify-between">
-
-        {/* Logo (No gap now) */}
-        <div className="flex items-center gap-6">
-          <span
-            onClick={handleHomeClick}
-            className="cursor-pointer text-xl md:text-2xl font-bold"
-          >
-            <span className="text-gray-900 dark:text-white">Interv</span>
-            <span className="text-emerald-500">yo</span>
-          </span>
-
-          {/* Home Icon near features */}
-          <Home
-            size={20}
-            className={`cursor-pointer ${location.pathname === "/"
-                ? "text-emerald-500"
-                : "text-gray-900 dark:text-gray-300 hover:text-emerald-500"
-              }`}
-            onClick={handleHomeClick}
-          />
+              </div>
+              <div>
+                <span className="text-xl sm:text-2xl font-bold bg-gradient-to-r from-purple-400 to-pink-400 bg-clip-text text-transparent">
+                  Intervyo
+                </span>
+                <div className="text-xs text-gray-500 font-medium hidden sm:block">
+                  AI-Powered Practice
+                </div>
+              </div>
+            </div>
+          </div>
         </div>
+      </nav>
+    );
+  }
 
-        {/* Desktop Links */}
-        <div className="hidden lg:flex items-center gap-10 ml-6">
-          <span onClick={() => scrollToSection("features")} className={linkClass("features")}>
-            Features
-          </span>
-
-          <Link to="/about" className={pageActive("/about")}>
-            About
-          </Link>
-
-          <span onClick={() => scrollToSection("how-it-works")} className={linkClass("how-it-works")}>
-            How it Works
-          </span>
+  return (
+    <nav className={styles.nav}>
+      <div className="px-4 md:px-8 py-4 flex items-center justify-between">
+        <Link to="/" className="text-xl md:text-2xl font-bold">
+          <span className={styles.logoPrimary}>Interv</span>
+          <span className={styles.logoSecondary}>yo</span>
+        </Link>
 
-          <span onClick={() => scrollToSection("pricing")} className={linkClass("pricing")}>
-            Pricing
-          </span>
+        <div className="hidden lg:flex items-center gap-8">
+          {links.map((link) => {
+            const isActive = activeKey === link.key;
+            const className = `${styles.link} font-medium transition-colors${
+              isActive ? ` ${styles.activeLink}` : ""
+            }`;
 
-          <span onClick={() => scrollToSection("faq")} className={linkClass("faq")}>
-            FAQ
-          </span>
+            if (link.isSection) {
+              return (
+                <a
+                  key={link.key}
+                  href={link.href}
+                  onClick={
+                    onSectionClick
+                      ? (event) => handleSectionClick(event, link.href)
+                      : undefined
+                  }
+                  className={`${className} cursor-pointer`}
+                >
+                  {link.label}
+                </a>
+              );
+            }
 
-          <Link to="/contact" className={pageActive("/contact")}>
-            Contact
-          </Link>
+            return (
+              <Link key={link.key} to={link.to} className={className}>
+                {link.label}
+              </Link>
+            );
+          })}
         </div>
 
-        {/* Desktop Buttons */}
         <div className="hidden lg:flex items-center gap-4">
-          <ThemeToggle />
+          {showThemeToggle && <ThemeToggle />}
           {token ? (
-            <button
-              onClick={() => navigate("/dashboard")}
-              className="px-6 py-2 bg-gradient-to-r from-emerald-500 to-cyan-500 text-white rounded-lg font-semibold"
-            >
-              Dashboard
-            </button>
-          ) : (
-            <>
-              <Link
-                to="/login"
-                className="px-4 py-2 bg-gray-200 text-gray-900 rounded-lg font-semibold text-sm"
-              >
-                Sign In
-              </Link>
-              <Link
-                to="/register"
-                className="px-4 py-2 bg-gradient-to-r from-emerald-500 to-cyan-500 text-white rounded-lg font-semibold text-sm"
+            showDashboardButton && (
+              <button
+                onClick={() => navigate("/dashboard")}
+                className="px-6 py-2.5 bg-black text-white rounded-lg hover:bg-gray-800 font-semibold shadow-lg transition-all"
               >
-                Get Started
-              </Link>
-            </>
+                Dashboard
+              </button>
+            )
+          ) : (
+            showAuthButtons && (
+              <>
+                <Link
+                  to="/login"
+                  className="px-4 py-2 bg-black text-white rounded-lg hover:bg-gray-800 font-semibold shadow-lg transition-all text-sm"
+                >
+                  Sign In
+                </Link>
+                <Link
+                  to="/register"
+                  className="px-4 py-2 bg-emerald-500 text-white rounded-lg hover:bg-emerald-600 font-semibold shadow-lg transition-all text-sm"
+                >
+                  Get Started
+                </Link>
+              </>
+            )
           )}
         </div>
 
-        {/* Mobile Toggle */}
         <button
-          onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
-          className="lg:hidden p-2 text-gray-900 dark:text-white"
+          onClick={() => setMobileMenuOpen((open) => !open)}
+          className={`lg:hidden p-2 rounded-lg transition-colors ${styles.menuButton}`}
+          aria-label="Toggle menu"
         >
           {mobileMenuOpen ? <X size={24} /> : <Menu size={24} />}
         </button>
       </div>
 
-      {/* Mobile Menu */}
       {mobileMenuOpen && (
         <div
-          className="lg:hidden absolute top-full left-0 right-0 mt-3 
-          bg-white/90 dark:bg-gray-900/90 backdrop-blur-xl 
-          rounded-2xl shadow-xl border border-gray-200 dark:border-gray-700 mx-3"
+          className={`lg:hidden absolute top-full left-0 right-0 mt-2 mx-2 overflow-hidden ${styles.mobileMenu}`}
         >
-          <div className="p-6 space-y-4 text-gray-900 dark:text-gray-300">
-            <span onClick={handleHomeClick} className="block cursor-pointer">Home</span>
-            <span onClick={() => scrollToSection("features")} className="block cursor-pointer">Features</span>
-            <Link to="/about" onClick={closeMenu} className="block">About</Link>
-            <span onClick={() => scrollToSection("pricing")} className="block cursor-pointer">Pricing</span>
-            <Link to="/contact" onClick={closeMenu} className="block">Contact</Link>
-
-            <div className="flex items-center justify-between pt-4 border-t border-gray-300 dark:border-gray-700">
-              <span>Theme</span>
-              <ThemeToggle />
-            </div>
+          <div className="p-6 space-y-4">
+            {links.map((link) => {
+              const isActive = activeKey === link.key;
+              const className = `block font-medium py-3 px-4 rounded-lg hover:bg-gray-50 transition-colors ${
+                styles.mobileLink
+              }${isActive ? ` ${styles.activeMobile}` : ""}`;
+
+              if (link.isSection) {
+                return (
+                  <a
+                    key={link.key}
+                    href={link.href}
+                    onClick={
+                      onSectionClick
+                        ? (event) => handleSectionClick(event, link.href)
+                        : closeMobileMenu
+                    }
+                    className={className}
+                  >
+                    {link.label}
+                  </a>
+                );
+              }
+
+              return (
+                <Link
+                  key={link.key}
+                  to={link.to}
+                  onClick={closeMobileMenu}
+                  className={className}
+                >
+                  {link.label}
+                </Link>
+              );
+            })}
+
+            {showThemeToggle && (
+              <div className="flex items-center justify-between py-3 px-4 rounded-lg hover:bg-gray-50 transition-colors">
+                <span className="text-gray-600 font-medium">Theme</span>
+                <ThemeToggle />
+              </div>
+            )}
+
+            {(showDashboardButton || showAuthButtons) && (
+              <div className="pt-4 border-t border-gray-200 space-y-3">
+                {token ? (
+                  showDashboardButton && (
+                    <button
+                      onClick={() => {
+                        navigate("/dashboard");
+                        closeMobileMenu();
+                      }}
+                      className="w-full px-6 py-3 bg-black text-white rounded-lg hover:bg-gray-800 font-semibold shadow-lg transition-all"
+                    >
+                      Dashboard
+                    </button>
+                  )
+                ) : (
+                  showAuthButtons && (
+                    <>
+                      <Link
+                        to="/login"
+                        onClick={closeMobileMenu}
+                        className="block w-full px-6 py-3 bg-black text-white rounded-lg hover:bg-gray-800 font-semibold shadow-lg transition-all text-center"
+                      >
+                        Sign In
+                      </Link>
+                      <Link
+                        to="/register"
+                        onClick={closeMobileMenu}
+                        className="block w-full px-6 py-3 bg-emerald-500 text-white rounded-lg hover:bg-emerald-600 font-semibold shadow-lg transition-all text-center"
+                      >
+                        Get Started
+                      </Link>
+                    </>
+                  )
+                )}
+              </div>
+            )}
           </div>
         </div>
       )}
diff --git a/Frontend/src/pages/AboutUs.jsx b/Frontend/src/pages/AboutUs.jsx
index 90540ec6..4365a330 100644
--- a/Frontend/src/pages/AboutUs.jsx
+++ b/Frontend/src/pages/AboutUs.jsx
@@ -1,3 +1,5 @@
+import React, { useEffect, useRef } from "react";
+import { Link, useNavigate } from "react-router-dom";
 import React, { useEffect, useRef, useState } from "react";
 import { useNavigate } from "react-router-dom";
 import { useSelector } from "react-redux";
@@ -20,6 +22,8 @@ import {
   Lightbulb,
   Star,
 } from "lucide-react";
+import { useState } from "react";
+import Navbar from "../components/Navbar";
 import Lenis from "@studio-freight/lenis";
 
 export default function AboutUs() {
diff --git a/Frontend/src/pages/Career.jsx b/Frontend/src/pages/Career.jsx
index 6dcd796f..1551d8f5 100644
--- a/Frontend/src/pages/Career.jsx
+++ b/Frontend/src/pages/Career.jsx
@@ -1,6 +1,5 @@
 import React, { useState, useEffect } from "react";
 import { Link, useNavigate } from "react-router-dom";
-import { useSelector } from "react-redux";
 import {
     Briefcase,
     BookOpen,
@@ -14,11 +13,10 @@ import {
     Target,
     Users,
     Sparkles,
-    Menu,
-    X
 } from "lucide-react";
 import { apiConnector } from "../services/apiConnector";
 import { careerEndpoints } from "../services/apis";
+import Navbar from "../components/Navbar";
 
 const MOCK_JOBS = [
     {
@@ -69,13 +67,11 @@ const MOCK_RESOURCES = [
 
 export default function Career() {
     const navigate = useNavigate();
-    const { token } = useSelector((state) => state.auth);
     const [jobs, setJobs] = useState([]);
     const [resources, setResources] = useState([]);
     const [loading, setLoading] = useState(true);
     const [searchTerm, setSearchTerm] = useState("");
     const [activeTab, setActiveTab] = useState("jobs");
-    const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
 
     useEffect(() => {
         fetchFeaturedContent();
@@ -114,101 +110,7 @@ export default function Career() {
 
     return (
         <div className="min-h-screen bg-gray-950 text-white font-sans pt-20">
-            {/* Navbar */}
-            <nav className="fixed top-6 left-1/2 transform -translate-x-1/2 w-[95%] max-w-7xl bg-white/95 backdrop-blur-md rounded-full shadow-lg z-50 border border-gray-200">
-                <div className="px-4 md:px-8 py-4 flex items-center justify-between">
-                    <Link to="/" className="text-xl md:text-2xl font-bold">
-                        <span className="text-gray-900">Interv</span>
-                        <span className="text-emerald-500">yo</span>
-                    </Link>
-
-                    {/* Desktop Navigation */}
-                    <div className="hidden lg:flex items-center gap-8">
-                        <Link to="/#features" className="text-gray-600 hover:text-gray-900 font-medium transition-colors cursor-pointer">
-                            Features
-                        </Link>
-                        <Link to="/about" className="text-gray-600 hover:text-gray-900 font-medium transition-colors">
-                            About
-                        </Link>
-                        <Link to="/#how-it-works" className="text-gray-600 hover:text-gray-900 font-medium transition-colors cursor-pointer">
-                            How it Works
-                        </Link>
-                        <Link to="/#pricing" className="text-gray-600 hover:text-gray-900 font-medium transition-colors cursor-pointer">
-                            Pricing
-                        </Link>
-                        <Link to="/#faq" className="text-gray-600 hover:text-gray-900 font-medium transition-colors cursor-pointer">
-                            FAQ
-                        </Link>
-                        <Link to="/contact" className="text-gray-600 hover:text-gray-900 font-medium transition-colors">
-                            Contact
-                        </Link>
-                    </div>
-
-                    {/* Desktop Buttons */}
-                    <div className="hidden lg:flex items-center gap-4">
-                        {token && (
-                            <button
-                                onClick={() => navigate("/dashboard")}
-                                className="px-6 py-2.5 bg-black text-white rounded-lg hover:bg-gray-800 font-semibold shadow-lg transition-all"
-                            >
-                                Dashboard
-                            </button>
-                        )}
-                    </div>
-
-                    {/* Mobile Hamburger Button */}
-                    <button
-                        onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
-                        className="lg:hidden p-2 text-gray-900 hover:bg-gray-100 rounded-lg transition-colors"
-                        aria-label="Toggle menu"
-                    >
-                        {mobileMenuOpen ? <X size={24} /> : <Menu size={24} />}
-                    </button>
-                </div>
-
-                {/* Mobile Menu */}
-                {mobileMenuOpen && (
-                    <div className="lg:hidden absolute top-full left-0 right-0 mt-2 bg-white backdrop-blur-md rounded-2xl shadow-xl border border-gray-200 mx-2 overflow-hidden text-gray-900">
-                        <div className="p-6 space-y-4">
-                            <Link to="/" className="block text-gray-600 hover:text-gray-900 font-medium py-3 px-4 rounded-lg hover:bg-gray-50 transition-colors" onClick={() => setMobileMenuOpen(false)}>
-                                Home
-                            </Link>
-                            <Link to="/about" className="block text-gray-600 hover:text-gray-900 font-medium py-3 px-4 rounded-lg hover:bg-gray-50 transition-colors" onClick={() => setMobileMenuOpen(false)}>
-                                About
-                            </Link>
-                            <Link to="/career" className="block text-emerald-500 font-medium py-3 px-4 rounded-lg bg-emerald-50" onClick={() => setMobileMenuOpen(false)}>
-                                Careers
-                            </Link>
-                            <Link to="/#how-it-works" className="block text-gray-600 hover:text-gray-900 font-medium py-3 px-4 rounded-lg hover:bg-gray-50 transition-colors" onClick={() => setMobileMenuOpen(false)}>
-                                How it Works
-                            </Link>
-                            <Link to="/#pricing" className="block text-gray-600 hover:text-gray-900 font-medium py-3 px-4 rounded-lg hover:bg-gray-50 transition-colors" onClick={() => setMobileMenuOpen(false)}>
-                                Pricing
-                            </Link>
-                            <Link to="/#faq" className="block text-gray-600 hover:text-gray-900 font-medium py-3 px-4 rounded-lg hover:bg-gray-50 transition-colors" onClick={() => setMobileMenuOpen(false)}>
-                                FAQ
-                            </Link>
-                            <Link to="/contact" className="block text-gray-600 hover:text-gray-900 font-medium py-3 px-4 rounded-lg hover:bg-gray-50 transition-colors" onClick={() => setMobileMenuOpen(false)}>
-                                Contact
-                            </Link>
-
-                            <div className="pt-4 border-t border-gray-200 space-y-3">
-                                {token && (
-                                    <button
-                                        onClick={() => {
-                                            navigate("/dashboard");
-                                            setMobileMenuOpen(false);
-                                        }}
-                                        className="w-full px-6 py-3 bg-black text-white rounded-lg hover:bg-gray-800 font-semibold shadow-lg transition-all"
-                                    >
-                                        Dashboard
-                                    </button>
-                                )}
-                            </div>
-                        </div>
-                    </div>
-                )}
-            </nav>
+            <Navbar tone="light" showAuthButtons={false} />
 
             {/* Background decoration */}
             <div className="absolute top-0 left-0 w-full h-[500px] bg-gradient-to-b from-emerald-900/10 to-transparent pointer-events-none" />
diff --git a/Frontend/src/pages/ContactUs.jsx b/Frontend/src/pages/ContactUs.jsx
index 62f45102..478ff0aa 100644
--- a/Frontend/src/pages/ContactUs.jsx
+++ b/Frontend/src/pages/ContactUs.jsx
@@ -6,9 +6,6 @@ import { submitContactForm } from "../services/operations/contactAPI";
 import Lenis from "@studio-freight/lenis";
 
 export default function ContactUs() {
-  const navigate = useNavigate();
-  const { token } = useSelector((state) => state.auth);
-  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
   const [loading, setLoading] = useState(false);
   const lenisRef = useRef(null);
 
diff --git a/Frontend/src/pages/CookiePolicy.jsx b/Frontend/src/pages/CookiePolicy.jsx
index 4359a19c..1ce748c6 100644
--- a/Frontend/src/pages/CookiePolicy.jsx
+++ b/Frontend/src/pages/CookiePolicy.jsx
@@ -1,18 +1,7 @@
 import React from "react";
-import { Link, useNavigate } from "react-router-dom";
-import { Menu, X } from "lucide-react";
-import { useState } from "react";
-import { useSelector } from "react-redux";
+import Navbar from "../components/Navbar";
 
 export default function PrivacyPolicy() {
-  const token = useSelector((state) => state.auth.token);
-  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
-  const navigate = useNavigate();
-
-  const closeMobileMenu = () => {
-    setMobileMenuOpen(false);
-  };
-
   return (
     <>
       {/* Navbar */}
diff --git a/Frontend/src/pages/FAQ.jsx b/Frontend/src/pages/FAQ.jsx
index 7098cdc3..edc9cf29 100644
--- a/Frontend/src/pages/FAQ.jsx
+++ b/Frontend/src/pages/FAQ.jsx
@@ -1,3 +1,5 @@
+import { useState } from "react";
+import Navbar from "../components/Navbar";
 import { Link } from "react-router-dom";
 import { useState, useEffect } from "react";
 import { motion, AnimatePresence } from "framer-motion";
@@ -98,16 +100,9 @@ const faqs = [
 ];
 
 export default function FAQ() {
-  const [scrollY, setScrollY] = useState(0);
   const [activeIndex, setActiveIndex] = useState(null);
   const [hoveredIndex, setHoveredIndex] = useState(null);
 
-  useEffect(() => {
-    const handleScroll = () => setScrollY(window.scrollY);
-    window.addEventListener("scroll", handleScroll);
-    return () => window.removeEventListener("scroll", handleScroll);
-  }, []);
-
   const toggleFAQ = (index) => {
     setActiveIndex(activeIndex === index ? null : index);
   };
diff --git a/Frontend/src/pages/Landing.jsx b/Frontend/src/pages/Landing.jsx
index 53727119..0c0795aa 100644
--- a/Frontend/src/pages/Landing.jsx
+++ b/Frontend/src/pages/Landing.jsx
@@ -1,4 +1,5 @@
 import { useState, useEffect, useRef } from "react";
+import { Link, useNavigate } from "react-router-dom";
 import { useNavigate } from "react-router-dom";
 import { useSelector } from "react-redux";
 import { motion } from "framer-motion";
@@ -13,6 +14,7 @@ import {
   ChevronDown,
 } from "lucide-react";
 import Lenis from "@studio-freight/lenis";
+import Navbar from "../components/Navbar";
 
 
 // Animation variants
@@ -119,7 +121,6 @@ const FloatingElement = ({ children, delay = 0 }) => (
 
 export default function LandingPage() {
   const navigate = useNavigate();
-  const { token } = useSelector((state) => state.auth);
   const [openFaq, setOpenFaq] = useState(null);
   const lenisRef = useRef(null);
 
@@ -164,7 +165,6 @@ export default function LandingPage() {
         duration: 1.5,
       });
     }
-    closeMobileMenu();
   };
 
   return (
@@ -1695,267 +1695,165 @@ export default function LandingPage() {
 
       {/* FAQ Section */}
       <section
-        id="faq"
-        className="py-24 px-6 bg-gradient-to-br from-emerald-500 via-teal-500 to-cyan-600"
-      >
-        <div className="max-w-4xl mx-auto">
-          <h2 className="text-4xl md:text-5xl font-bold text-white text-center mb-16">
-            I've got questions.
-          </h2>
-
-          <div className="space-y-4">
-            {/* FAQ 1 */}
-            <div className="border-b-4 border-white/30 hover:border-amber-300 pb-6 transition-colors duration-300">
-              <button
-                onClick={() => toggleFaq(0)}
-                className="w-full flex items-center justify-between text-left group"
-              >
-                <h3 className="text-2xl md:text-3xl font-bold text-white pr-8 group-hover:text-amber-200 transition-colors">
-                  How does AI feedback work?
-                </h3>
-                <ChevronDown
-                  className={`w-12 h-12 text-white group-hover:text-amber-300 flex-shrink-0 transition-all duration-300 ${openFaq === 0 ? "rotate-180" : ""}`}
-                  strokeWidth={3}
-                />
-              </button>
-              {openFaq === 0 && (
-                <p className="mt-6 text-xl text-white/90 leading-relaxed">
-                  Our AI analyzes your responses in real-time, evaluating
-                  clarity, technical accuracy, structure, and completeness.
-                  You'll receive instant, actionable feedback on how to improve
-                  your answers, just like a real interviewer would provide.
-                </p>
-              )}
-            </div>
-
-            {/* FAQ 2 */}
-            <div className="border-b-4 border-white/30 hover:border-fuchsia-300 pb-6 transition-colors duration-300">
-              <button
-                onClick={() => toggleFaq(1)}
-                className="w-full flex items-center justify-between text-left group"
-              >
-                <h3 className="text-2xl md:text-3xl font-bold text-white pr-8 group-hover:text-fuchsia-200 transition-colors">
-                  Can I practice for specific tech roles?
-                </h3>
-                <ChevronDown
-                  className={`w-12 h-12 text-white group-hover:text-fuchsia-300 flex-shrink-0 transition-all duration-300 ${openFaq === 1 ? "rotate-180" : ""}`}
-                  strokeWidth={3}
-                />
-              </button>
-              {openFaq === 1 && (
-                <p className="mt-6 text-xl text-white/90 leading-relaxed">
-                  Yes! We have role-specific question banks for 50+ tech
-                  positions including Frontend, Backend, Full Stack, DevOps,
-                  Data Science, ML Engineer, Product Manager, and more. Each
-                  role has curated questions that match real interview
-                  scenarios.
-                </p>
-              )}
-            </div>
-
-            {/* FAQ 3 */}
-            <div className="border-b-4 border-white/30 hover:border-violet-300 pb-6 transition-colors duration-300">
-              <button
-                onClick={() => toggleFaq(2)}
-                className="w-full flex items-center justify-between text-left group"
-              >
-                <h3 className="text-2xl md:text-3xl font-bold text-white pr-8 group-hover:text-violet-200 transition-colors">
-                  How fast will I see improvement?
-                </h3>
-                <ChevronDown
-                  className={`w-12 h-12 text-white group-hover:text-violet-300 flex-shrink-0 transition-all duration-300 ${openFaq === 2 ? "rotate-180" : ""}`}
-                  strokeWidth={3}
-                />
-              </button>
-              {openFaq === 2 && (
-                <p className="mt-6 text-xl text-white/90 leading-relaxed">
-                  Most users see significant improvement within 1-2 weeks of
-                  consistent practice. Our analytics dashboard tracks your
-                  progress over time, showing improvements in clarity, technical
-                  depth, and structure scores. Practice 3-5 interviews per week
-                  for best results.
-                </p>
-              )}
-            </div>
-
-            {/* FAQ 4 */}
-            <div className="border-b-4 border-white/30 hover:border-rose-300 pb-6 transition-colors duration-300">
-              <button
-                onClick={() => toggleFaq(3)}
-                className="w-full flex items-center justify-between text-left group"
-              >
-                <h3 className="text-2xl md:text-3xl font-bold text-white pr-8 group-hover:text-rose-200 transition-colors">
-                  Is voice practice really necessary?
-                </h3>
-                <ChevronDown
-                  className={`w-12 h-12 text-white group-hover:text-rose-300 flex-shrink-0 transition-all duration-300 ${openFaq === 3 ? "rotate-180" : ""}`}
-                  strokeWidth={3}
-                />
-              </button>
-              {openFaq === 3 && (
-                <p className="mt-6 text-xl text-white/90 leading-relaxed">
-                  Absolutely! Speaking your answers out loud helps you practice
-                  articulation, pacing, and confidence. Many candidates freeze
-                  during verbal interviews even when they know the answer. Our
-                  voice practice feature simulates real interview conditions so
-                  you're prepared.
-                </p>
-              )}
-            </div>
-
-            {/* FAQ 5 */}
-            <div className="border-b-4 border-white/30 hover:border-cyan-300 pb-6 transition-colors duration-300">
-              <button
-                onClick={() => toggleFaq(4)}
-                className="w-full flex items-center justify-between text-left group"
-              >
-                <h3 className="text-2xl md:text-3xl font-bold text-white pr-8 group-hover:text-cyan-200 transition-colors">
-                  Can I use this to prepare my team for interviews?
-                </h3>
-                <ChevronDown
-                  className={`w-12 h-12 text-white group-hover:text-cyan-300 flex-shrink-0 transition-all duration-300 ${openFaq === 4 ? "rotate-180" : ""}`}
-                  strokeWidth={3}
-                />
-              </button>
-              {openFaq === 4 && (
-                <p className="mt-6 text-xl text-white/90 leading-relaxed">
-                  Yes! Our Enterprise plan includes team management features,
-                  custom branding, and dedicated support. Perfect for bootcamps,
-                  training programs, and companies preparing candidates for
-                  technical interviews. Contact our sales team for custom
-                  solutions.
-                </p>
-              )}
-            </div>
-
-            {/* FAQ 6 */}
-            <div className="border-b-4 border-white/30 hover:border-lime-300 pb-6 transition-colors duration-300">
-              <button
-                onClick={() => toggleFaq(5)}
-                className="w-full flex items-center justify-between text-left group"
-              >
-                <h3 className="text-2xl md:text-3xl font-bold text-white pr-8 group-hover:text-lime-200 transition-colors">
-                  What companies do your questions prepare me for?
-                </h3>
-                <ChevronDown
-                  className={`w-12 h-12 text-white group-hover:text-lime-300 flex-shrink-0 transition-all duration-300 ${openFaq === 5 ? "rotate-180" : ""}`}
-                  strokeWidth={3}
-                />
-              </button>
-              {openFaq === 5 && (
-                <p className="mt-6 text-xl text-white/90 leading-relaxed">
-                  Our question banks are designed to prepare you for interviews
-                  at top tech companies including FAANG (Facebook/Meta, Amazon,
-                  Apple, Netflix, Google), Microsoft, startups, and mid-size
-                  tech companies. The questions cover common patterns and topics
-                  asked across the industry.
-                </p>
-              )}
-            </div>
-
-            {/* FAQ 7 */}
-            <div className="border-b-4 border-white/30 hover:border-sky-300 pb-6 transition-colors duration-300">
-              <button
-                onClick={() => toggleFaq(6)}
-                className="w-full flex items-center justify-between text-left group"
-              >
-                <h3 className="text-2xl md:text-3xl font-bold text-white pr-8 group-hover:text-sky-200 transition-colors">
-                  Is Intervyo suitable for beginners?
-                </h3>
-                <ChevronDown
-                  className={`w-12 h-12 text-white group-hover:text-sky-300 flex-shrink-0 transition-all duration-300 ${
-                    openFaq === 6 ? "rotate-180" : ""
-                  }`}
-                  strokeWidth={3}
-                />
-              </button>
-              {openFaq === 6 && (
-                <p className="mt-6 text-xl text-white/90 leading-relaxed">
-                  Absolutely! Intervyo is designed for learners at all levels —
-                  from students and freshers to experienced professionals.
-                  You can start with beginner-friendly questions and gradually
-                  move to advanced topics as your confidence grows.
-                </p>
-              )}
-            </div>
-
-            {/* FAQ 8 */}
-            <div className="border-b-4 border-white/30 hover:border-orange-300 pb-6 transition-colors duration-300">
-              <button
-                onClick={() => toggleFaq(7)}
-                className="w-full flex items-center justify-between text-left group"
-              >
-                <h3 className="text-2xl md:text-3xl font-bold text-white pr-8 group-hover:text-orange-200 transition-colors">
-                  Do you provide real interview questions?
-                </h3>
-                <ChevronDown
-                  className={`w-12 h-12 text-white group-hover:text-orange-300 flex-shrink-0 transition-all duration-300 ${
-                    openFaq === 7 ? "rotate-180" : ""
-                  }`}
-                  strokeWidth={3}
-                />
-              </button>
-              {openFaq === 7 && (
-                <p className="mt-6 text-xl text-white/90 leading-relaxed">
-                  Yes. Our question bank is inspired by real interview patterns used
-                  at top tech companies. We continuously update our database based on
-                  industry trends so you practice what actually gets asked.
-                </p>
-              )}
-            </div>
-
-            {/* FAQ 9 */}
-            <div className="border-b-4 border-white/30 hover:border-indigo-300 pb-6 transition-colors duration-300">
-              <button
-                onClick={() => toggleFaq(8)}
-                className="w-full flex items-center justify-between text-left group"
-              >
-                <h3 className="text-2xl md:text-3xl font-bold text-white pr-8 group-hover:text-indigo-200 transition-colors">
-                  Can I track my performance over time?
-                </h3>
-                <ChevronDown
-                  className={`w-12 h-12 text-white group-hover:text-indigo-300 flex-shrink-0 transition-all duration-300 ${
-                    openFaq === 8 ? "rotate-180" : ""
-                  }`}
-                  strokeWidth={3}
-                />
-              </button>
-              {openFaq === 8 && (
-                <p className="mt-6 text-xl text-white/90 leading-relaxed">
-                  Definitely. Your dashboard provides detailed analytics including
-                  clarity scores, technical depth ratings, structure evaluation,
-                  and overall progress trends so you can clearly see your improvement.
-                </p>
-              )}
-            </div>
-            
-            {/* FAQ 10 */}
-            <div className="border-b-4 border-white/30 hover:border-pink-300 pb-6 transition-colors duration-300">
-              <button
-                onClick={() => toggleFaq(9)}
-                className="w-full flex items-center justify-between text-left group"
-              >
-                <h3 className="text-2xl md:text-3xl font-bold text-white pr-8 group-hover:text-pink-200 transition-colors">
-                  Is my interview data secure?
-                </h3>
-                <ChevronDown
-                  className={`w-12 h-12 text-white group-hover:text-pink-300 flex-shrink-0 transition-all duration-300 ${
-                    openFaq === 9 ? "rotate-180" : ""
-                  }`}
-                  strokeWidth={3}
-                />
-              </button>
-              {openFaq === 9 && (
-                <p className="mt-6 text-xl text-white/90 leading-relaxed">
-                  Yes. We prioritize your privacy and data security. Your responses,
-                  recordings, and analytics are securely stored and never shared
-                  without your permission.
-                </p>
-              )}
-            </div>
-          </div>
-        </div>
-      </section>
+    id="faq"
+    className="py-24 px-6 bg-gradient-to-br from-emerald-600 to-emerald-500"
+  >
+  <div className="max-w-4xl mx-auto">
+    <h2 className="text-4xl md:text-5xl font-bold text-white text-center mb-16">
+      I've got questions.
+    </h2>
+
+    <div className="space-y-4">
+      {/* FAQ 1 */}
+      <div className="border-b-4 border-white pb-6 rounded-2xl transition-all duration-300 hover:bg-white/10 hover:backdrop-blur-md hover:border-white/70 hover:shadow-[0_8px_32px_rgba(255,255,255,0.15)] px-4">
+        <button
+          onClick={() => toggleFaq(0)}
+          className="w-full flex items-center justify-between text-left group"
+        >
+          <h3 className="text-2xl md:text-3xl font-bold text-white pr-8">
+            How does AI feedback work?
+          </h3>
+          <ChevronDown
+            className={`w-12 h-12 text-white flex-shrink-0 transition-transform duration-300 ${
+              openFaq === 0 ? "rotate-180" : ""
+            }`}
+            strokeWidth={3}
+          />
+        </button>
+        {openFaq === 0 && (
+          <p className="mt-6 text-xl text-white/90 leading-relaxed">
+            Our AI analyzes your responses in real-time, evaluating clarity,
+            technical accuracy, structure, and completeness. You'll receive
+            instant, actionable feedback on how to improve your answers, just
+            like a real interviewer would provide.
+          </p>
+        )}
+      </div>
+
+      {/* FAQ 2 */}
+      <div className="border-b-4 border-white pb-6 rounded-2xl transition-all duration-300 hover:bg-white/10 hover:backdrop-blur-md hover:border-white/70 hover:shadow-[0_8px_32px_rgba(255,255,255,0.15)] px-4">
+        <button
+          onClick={() => toggleFaq(1)}
+          className="w-full flex items-center justify-between text-left group"
+        >
+          <h3 className="text-2xl md:text-3xl font-bold text-white pr-8">
+            Can I practice for specific tech roles?
+          </h3>
+          <ChevronDown
+            className={`w-12 h-12 text-white flex-shrink-0 transition-transform duration-300 ${
+              openFaq === 1 ? "rotate-180" : ""
+            }`}
+            strokeWidth={3}
+          />
+        </button>
+        {openFaq === 1 && (
+          <p className="mt-6 text-xl text-white/90 leading-relaxed">
+            Yes! We have role-specific question banks for 50+ tech positions
+            including Frontend, Backend, Full Stack, DevOps, Data Science, ML
+            Engineer, Product Manager, and more.
+          </p>
+        )}
+      </div>
+
+      {/* FAQ 3 */}
+      <div className="border-b-4 border-white pb-6 rounded-2xl transition-all duration-300 hover:bg-white/10 hover:backdrop-blur-md hover:border-white/70 hover:shadow-[0_8px_32px_rgba(255,255,255,0.15)] px-4">
+        <button
+          onClick={() => toggleFaq(2)}
+          className="w-full flex items-center justify-between text-left group"
+        >
+          <h3 className="text-2xl md:text-3xl font-bold text-white pr-8">
+            How fast will I see improvement?
+          </h3>
+          <ChevronDown
+            className={`w-12 h-12 text-white flex-shrink-0 transition-transform duration-300 ${
+              openFaq === 2 ? "rotate-180" : ""
+            }`}
+            strokeWidth={3}
+          />
+        </button>
+        {openFaq === 2 && (
+          <p className="mt-6 text-xl text-white/90 leading-relaxed">
+            Most users see significant improvement within 1-2 weeks of
+            consistent practice. Practice 3-5 interviews per week for best
+            results.
+          </p>
+        )}
+      </div>
+
+      {/* FAQ 4 */}
+      <div className="border-b-4 border-white pb-6 rounded-2xl transition-all duration-300 hover:bg-white/10 hover:backdrop-blur-md hover:border-white/70 hover:shadow-[0_8px_32px_rgba(255,255,255,0.15)] px-4">
+        <button
+          onClick={() => toggleFaq(3)}
+          className="w-full flex items-center justify-between text-left group"
+        >
+          <h3 className="text-2xl md:text-3xl font-bold text-white pr-8">
+            Is voice practice really necessary?
+          </h3>
+          <ChevronDown
+            className={`w-12 h-12 text-white flex-shrink-0 transition-transform duration-300 ${
+              openFaq === 3 ? "rotate-180" : ""
+            }`}
+            strokeWidth={3}
+          />
+        </button>
+        {openFaq === 3 && (
+          <p className="mt-6 text-xl text-white/90 leading-relaxed">
+            Absolutely! Speaking your answers out loud helps you practice
+            articulation, pacing, and confidence.
+          </p>
+        )}
+      </div>
+
+      {/* FAQ 5 */}
+      <div className="border-b-4 border-white pb-6 rounded-2xl transition-all duration-300 hover:bg-white/10 hover:backdrop-blur-md hover:border-white/70 hover:shadow-[0_8px_32px_rgba(255,255,255,0.15)] px-4">
+        <button
+          onClick={() => toggleFaq(4)}
+          className="w-full flex items-center justify-between text-left group"
+        >
+          <h3 className="text-2xl md:text-3xl font-bold text-white pr-8">
+            Can I use this to prepare my team for interviews?
+          </h3>
+          <ChevronDown
+            className={`w-12 h-12 text-white flex-shrink-0 transition-transform duration-300 ${
+              openFaq === 4 ? "rotate-180" : ""
+            }`}
+            strokeWidth={3}
+          />
+        </button>
+        {openFaq === 4 && (
+          <p className="mt-6 text-xl text-white/90 leading-relaxed">
+            Yes! Our Enterprise plan includes team management features and
+            custom branding.
+          </p>
+        )}
+      </div>
+
+      {/* FAQ 6 */}
+      <div className="border-b-4 border-white pb-6 rounded-2xl transition-all duration-300 hover:bg-white/10 hover:backdrop-blur-md hover:border-white/70 hover:shadow-[0_8px_32px_rgba(255,255,255,0.15)] px-4">
+        <button
+          onClick={() => toggleFaq(5)}
+          className="w-full flex items-center justify-between text-left group"
+        >
+          <h3 className="text-2xl md:text-3xl font-bold text-white pr-8">
+            What companies do your questions prepare me for?
+          </h3>
+          <ChevronDown
+            className={`w-12 h-12 text-white flex-shrink-0 transition-transform duration-300 ${
+              openFaq === 5 ? "rotate-180" : ""
+            }`}
+            strokeWidth={3}
+          />
+        </button>
+        {openFaq === 5 && (
+          <p className="mt-6 text-xl text-white/90 leading-relaxed">
+            Our question banks prepare you for FAANG, Microsoft, startups, and
+            mid-size tech companies.
+          </p>
+        )}
+      </div>
+    </div>
+  </div>
+</section>
 
       {/* CTA Section */}
       <section className="py-20 px-6 bg-gradient-to-b from-gray-50 via-white to-gray-50 dark:from-gray-950 dark:via-gray-900 dark:to-gray-950 text-gray-900 dark:text-white relative overflow-hidden transition-colors duration-500">
diff --git a/Frontend/src/pages/PricingPage.jsx b/Frontend/src/pages/PricingPage.jsx
index 45a91998..01fef9e9 100644
--- a/Frontend/src/pages/PricingPage.jsx
+++ b/Frontend/src/pages/PricingPage.jsx
@@ -1,13 +1,11 @@
 import { useState, useEffect, useRef } from "react";
 import { Link, useNavigate } from "react-router-dom";
-import { useSelector } from "react-redux";
-import { Menu, X, Check, Zap, Users, BarChart, Sparkles, Crown, Building2, ChevronDown } from "lucide-react";
+import { Check, Zap, Users, BarChart, Sparkles, Crown, Building2, ChevronDown } from "lucide-react";
 import Lenis from "@studio-freight/lenis";
+import Navbar from "../components/Navbar";
 
 export default function PricingPage() {
   const navigate = useNavigate();
-  const { token } = useSelector((state) => state.auth);
-  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
   const [billingCycle, setBillingCycle] = useState("monthly");
   const [openFaq, setOpenFaq] = useState(null);
   const lenisRef = useRef(null);
@@ -43,95 +41,9 @@ export default function PricingPage() {
     setOpenFaq(openFaq === index ? null : index);
   };
 
-  const closeMobileMenu = () => {
-    setMobileMenuOpen(false);
-  };
-
   return (
     <div className="bg-white text-gray-900 min-h-screen">
-      {/* Navbar */}
-      <nav className="fixed top-6 left-1/2 transform -translate-x-1/2 w-[95%] max-w-7xl bg-white/95 backdrop-blur-md rounded-full shadow-lg z-50 border border-gray-200">
-        <div className="px-4 md:px-8 py-4 flex items-center justify-between">
-          <Link to="/" className="text-xl md:text-2xl font-bold">
-            <span className="text-gray-900">Interv</span>
-            <span className="text-emerald-500">yo</span>
-          </Link>
-
-          <div className="hidden lg:flex items-center gap-8">
-            <Link to="/#features" className="text-gray-600 hover:text-gray-900 font-medium transition-colors">
-              Features
-            </Link>
-            <Link to="/about" className="text-gray-600 hover:text-gray-900 font-medium transition-colors">
-              About
-            </Link>
-            <Link to="/#how-it-works" className="text-gray-600 hover:text-gray-900 font-medium transition-colors">
-              How it Works
-            </Link>
-            <Link to="/pricing" className="text-gray-600 hover:text-gray-900 font-medium transition-colors">
-              Pricing
-            </Link>
-            <Link to="/#faq" className="text-gray-600 hover:text-gray-900 font-medium transition-colors">
-              FAQ
-            </Link>
-            <Link to="/contact" className="text-gray-600 hover:text-gray-900 font-medium transition-colors">
-              Contact
-            </Link>
-          </div>
-
-          <div className="hidden lg:flex items-center gap-4">
-            {token ? (
-              <button onClick={() => navigate("/dashboard")} className="px-6 py-2.5 bg-black text-white rounded-lg hover:bg-gray-800 font-semibold shadow-lg transition-all">
-                Dashboard
-              </button>
-            ) : (
-              <>
-                <Link to="/login" className="px-4 py-2 bg-black text-white rounded-lg hover:bg-gray-800 font-semibold shadow-lg transition-all text-sm">
-                  Sign In
-                </Link>
-                <Link to="/register" className="px-4 py-2 bg-black text-white rounded-lg hover:bg-gray-800 font-semibold shadow-lg transition-all text-sm">
-                  Get Started
-                </Link>
-              </>
-            )}
-          </div>
-
-          <button onClick={() => setMobileMenuOpen(!mobileMenuOpen)} className="lg:hidden p-2 text-gray-900 hover:bg-gray-100 rounded-lg transition-colors">
-            {mobileMenuOpen ? <X size={24} /> : <Menu size={24} />}
-          </button>
-        </div>
-
-        {mobileMenuOpen && (
-          <div className="lg:hidden absolute top-full left-0 right-0 mt-2 bg-white backdrop-blur-md rounded-2xl shadow-xl border border-gray-200 mx-2 overflow-hidden">
-            <div className="p-6 space-y-4">
-              <Link to="/" onClick={closeMobileMenu} className="block text-gray-600 hover:text-gray-900 font-medium py-3 px-4 rounded-lg hover:bg-gray-50 transition-colors">
-                Home
-              </Link>
-              <Link to="/about" onClick={closeMobileMenu} className="block text-gray-600 hover:text-gray-900 font-medium py-3 px-4 rounded-lg hover:bg-gray-50 transition-colors">
-                About
-              </Link>
-              <Link to="/contact" onClick={closeMobileMenu} className="block text-gray-600 hover:text-gray-900 font-medium py-3 px-4 rounded-lg hover:bg-gray-50 transition-colors">
-                Contact
-              </Link>
-              <div className="pt-4 border-t border-gray-200 space-y-3">
-                {token ? (
-                  <button onClick={() => { navigate("/dashboard"); closeMobileMenu(); }} className="w-full px-6 py-3 bg-black text-white rounded-lg hover:bg-gray-800 font-semibold shadow-lg transition-all">
-                    Dashboard
-                  </button>
-                ) : (
-                  <>
-                    <Link to="/login" onClick={closeMobileMenu} className="block w-full px-6 py-3 bg-black text-white rounded-lg hover:bg-gray-800 font-semibold shadow-lg transition-all text-center">
-                      Sign In
-                    </Link>
-                    <Link to="/register" onClick={closeMobileMenu} className="block w-full px-6 py-3 bg-emerald-500 text-white rounded-lg hover:bg-emerald-600 font-semibold shadow-lg transition-all text-center">
-                      Get Started
-                    </Link>
-                  </>
-                )}
-              </div>
-            </div>
-          </div>
-        )}
-      </nav>
+      <Navbar tone="light" />
 
       {/* Hero Section */}
       <section className="pt-40 pb-20 px-6 relative overflow-hidden bg-gray-950">
diff --git a/Frontend/src/pages/Privacy.jsx b/Frontend/src/pages/Privacy.jsx
index fe46a946..f133471d 100644
--- a/Frontend/src/pages/Privacy.jsx
+++ b/Frontend/src/pages/Privacy.jsx
@@ -1,191 +1,23 @@
 import React from "react";
-import { Link, useNavigate } from "react-router-dom";
-import { Menu, X } from "lucide-react";
-import { useState } from "react";
-import { useSelector } from "react-redux";
+import Navbar from "../components/Navbar";
 
 export default function PrivacyPolicy() {
-  const token = useSelector((state) => state.auth.token);
-  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
-  const navigate = useNavigate();
-
-  const closeMobileMenu = () => {
-    setMobileMenuOpen(false);
-  };
-
   return (
-    <>
-      {/* Navbar */}
-      <nav className="fixed top-6 left-1/2 transform -translate-x-1/2 w-[95%] max-w-7xl bg-white/95 backdrop-blur-md rounded-full shadow-lg z-50 border border-gray-200">
-        <div className="px-4 md:px-8 py-4 flex items-center justify-between">
-          <Link to="/" className="text-xl md:text-2xl font-bold">
-            <span className="text-gray-900">Interv</span>
-            <span className="text-emerald-500">yo</span>
-          </Link>
-
-          {/* Desktop Navigation */}
-          <div className="hidden lg:flex items-center gap-8">
-            <a
-              href="/#features"
-              className="text-gray-600 hover:text-gray-900 font-medium transition-colors cursor-pointer"
-            >
-              Features
-            </a>
-            <Link
-              to="/about"
-              className="text-emerald-500 font-medium transition-colors"
-            >
-              About
-            </Link>
-            <a
-              href="/#how-it-works"
-              className="text-gray-600 hover:text-gray-900 font-medium transition-colors cursor-pointer"
-            >
-              How it Works
-            </a>
-            <a
-              href="/#pricing"
-              className="text-gray-600 hover:text-gray-900 font-medium transition-colors cursor-pointer"
-            >
-              Pricing
-            </a>
-            <a
-              href="/#faq"
-              className="text-gray-600 hover:text-gray-900 font-medium transition-colors cursor-pointer"
-            >
-              FAQ
-            </a>
-            <Link
-              to="/contact"
-              className="text-gray-600 hover:text-gray-900 font-medium transition-colors"
-            >
-              Contact
-            </Link>
-          </div>
-
-          {/* Desktop Buttons */}
-          <div className="hidden lg:flex items-center gap-4">
-            {token ? (
-              <button
-                onClick={() => navigate("/dashboard")}
-                className="px-6 py-2.5 bg-black text-white rounded-lg hover:bg-gray-800 font-semibold shadow-lg transition-all"
-              >
-                Dashboard
-              </button>
-            ) : (
-              <>
-                <Link
-                  to="/login"
-                  className="px-4 py-2 bg-black text-white rounded-lg hover:bg-gray-800 font-semibold shadow-lg transition-all text-sm"
-                >
-                  Sign In
-                </Link>
-                <Link
-                  to="/register"
-                  className="px-4 py-2 bg-emerald-500 text-white rounded-lg hover:bg-emerald-600 font-semibold shadow-lg transition-all text-sm"
-                >
-                  Get Started
-                </Link>
-              </>
-            )}
-          </div>
-
-          {/* Mobile Hamburger Button */}
-          <button
-            onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
-            className="lg:hidden p-2 text-gray-900 hover:bg-gray-100 rounded-lg transition-colors"
-            aria-label="Toggle menu"
-          >
-            {mobileMenuOpen ? <X size={24} /> : <Menu size={24} />}
-          </button>
-        </div>
-
-        {/* Mobile Menu */}
-        {mobileMenuOpen && (
-          <div className="lg:hidden absolute top-full left-0 right-0 mt-2 bg-white backdrop-blur-md rounded-2xl shadow-xl border border-gray-200 mx-2 overflow-hidden">
-            <div className="p-6 space-y-4">
-              <a
-                href="/#features"
-                className="block text-gray-600 hover:text-gray-900 font-medium py-3 px-4 rounded-lg hover:bg-gray-50 transition-colors"
-                onClick={closeMobileMenu}
-              >
-                Features
-              </a>
-              <a
-                href="/#how-it-works"
-                className="block text-gray-600 hover:text-gray-900 font-medium py-3 px-4 rounded-lg hover:bg-gray-50 transition-colors"
-                onClick={closeMobileMenu}
-              >
-                How it Works
-              </a>
-              <a
-                href="/#pricing"
-                className="block text-gray-600 hover:text-gray-900 font-medium py-3 px-4 rounded-lg hover:bg-gray-50 transition-colors"
-                onClick={closeMobileMenu}
-              >
-                Pricing
-              </a>
-              <a
-                href="/#faq"
-                className="block text-gray-600 hover:text-gray-900 font-medium py-3 px-4 rounded-lg hover:bg-gray-50 transition-colors"
-                onClick={closeMobileMenu}
-              >
-                FAQ
-              </a>
-              <Link
-                to="/contact"
-                onClick={closeMobileMenu}
-                className="block text-gray-600 hover:text-gray-900 font-medium py-3 px-4 rounded-lg hover:bg-gray-50 transition-colors"
-              >
-                Contact
-              </Link>
-              <Link
-                to="/about"
-                onClick={closeMobileMenu}
-                className="block text-emerald-500 font-medium py-3 px-4 rounded-lg bg-emerald-50"
-              >
-                About
-              </Link>
-
-              <div className="pt-4 border-t border-gray-200 space-y-3">
-                {token ? (
-                  <button
-                    onClick={() => {
-                      navigate("/dashboard");
-                      closeMobileMenu();
-                    }}
-                    className="w-full px-6 py-3 bg-black text-white rounded-lg hover:bg-gray-800 font-semibold shadow-lg transition-all"
-                  >
-                    Dashboard
-                  </button>
-                ) : (
-                  <>
-                    <Link
-                      to="/login"
-                      onClick={closeMobileMenu}
-                      className="block w-full px-6 py-3 bg-black text-white rounded-lg hover:bg-gray-800 font-semibold shadow-lg transition-all text-center"
-                    >
-                      Sign In
-                    </Link>
-                    <Link
-                      to="/register"
-                      onClick={closeMobileMenu}
-                      className="block w-full px-6 py-3 bg-emerald-500 text-white rounded-lg hover:bg-emerald-600 font-semibold shadow-lg transition-all text-center"
-                    >
-                      Get Started
-                    </Link>
-                  </>
-                )}
-              </div>
-            </div>
-          </div>
-        )}
-      </nav>
-      <div className="min-h-screen bg-gradient-to-b from-slate-900 via-purple-900 to-slate-900 text-white px-4 py-24">
-        <div className="max-w-5xl mx-auto bg-white/5 backdrop-blur-lg rounded-3xl p-6 md:p-12 border border-white/10">
-          <h1 className="text-3xl md:text-5xl font-bold mb-6 bg-gradient-to-r from-purple-400 to-pink-400 bg-clip-text text-transparent">
-            Privacy Policy
-          </h1>
+    <>  
+      <Navbar tone="light" activeKey="about" />
+    <div className="min-h-screen bg-gradient-to-b from-slate-900 via-purple-900 to-slate-900 text-white px-4 py-24">
+      <div className="max-w-5xl mx-auto bg-white/5 backdrop-blur-lg rounded-3xl p-6 md:p-12 border border-white/10">
+        <h1 className="text-3xl md:text-5xl font-bold mb-6 bg-gradient-to-r from-purple-400 to-pink-400 bg-clip-text text-transparent">
+          Privacy Policy
+        </h1>
+
+        <p className="text-gray-300 mb-8">
+          This Privacy Policy describes how{" "}
+          <span className="text-purple-400 font-semibold">Intervyo</span>
+          ("we", "our", or "us") collects, uses, stores, and protects your
+          personal information when you access or use our AI-powered interview
+          preparation platform.
+        </p>
 
           <p className="text-gray-300 mb-8">
             This Privacy Policy describes how{" "}
diff --git a/Frontend/src/pages/Terms.jsx b/Frontend/src/pages/Terms.jsx
index a921ecf9..508cde45 100644
--- a/Frontend/src/pages/Terms.jsx
+++ b/Frontend/src/pages/Terms.jsx
@@ -1,191 +1,22 @@
 import React from "react";
-import { Link, useNavigate } from "react-router-dom";
-import { Menu, X } from "lucide-react";
-import { useState } from "react";
-import { useSelector } from "react-redux";
+import Navbar from "../components/Navbar";
 
 export default function TermsAndConditions() {
-  const token = useSelector((state) => state.auth.token);
-  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
-  const navigate = useNavigate();
-
-  const closeMobileMenu = () => {
-    setMobileMenuOpen(false);
-  };
-
   return (
-    <>
-      {/* Navbar */}
-      <nav className="fixed top-6 left-1/2 transform -translate-x-1/2 w-[95%] max-w-7xl bg-white/95 backdrop-blur-md rounded-full shadow-lg z-50 border border-gray-200">
-        <div className="px-4 md:px-8 py-4 flex items-center justify-between">
-          <Link to="/" className="text-xl md:text-2xl font-bold">
-            <span className="text-gray-900">Interv</span>
-            <span className="text-emerald-500">yo</span>
-          </Link>
-
-          {/* Desktop Navigation */}
-          <div className="hidden lg:flex items-center gap-8">
-            <a
-              href="/#features"
-              className="text-gray-600 hover:text-gray-900 font-medium transition-colors cursor-pointer"
-            >
-              Features
-            </a>
-            <Link
-              to="/about"
-              className="text-emerald-500 font-medium transition-colors"
-            >
-              About
-            </Link>
-            <a
-              href="/#how-it-works"
-              className="text-gray-600 hover:text-gray-900 font-medium transition-colors cursor-pointer"
-            >
-              How it Works
-            </a>
-            <a
-              href="/#pricing"
-              className="text-gray-600 hover:text-gray-900 font-medium transition-colors cursor-pointer"
-            >
-              Pricing
-            </a>
-            <a
-              href="/#faq"
-              className="text-gray-600 hover:text-gray-900 font-medium transition-colors cursor-pointer"
-            >
-              FAQ
-            </a>
-            <Link
-              to="/contact"
-              className="text-gray-600 hover:text-gray-900 font-medium transition-colors"
-            >
-              Contact
-            </Link>
-          </div>
-
-          {/* Desktop Buttons */}
-          <div className="hidden lg:flex items-center gap-4">
-            {token ? (
-              <button
-                onClick={() => navigate("/dashboard")}
-                className="px-6 py-2.5 bg-black text-white rounded-lg hover:bg-gray-800 font-semibold shadow-lg transition-all"
-              >
-                Dashboard
-              </button>
-            ) : (
-              <>
-                <Link
-                  to="/login"
-                  className="px-4 py-2 bg-black text-white rounded-lg hover:bg-gray-800 font-semibold shadow-lg transition-all text-sm"
-                >
-                  Sign In
-                </Link>
-                <Link
-                  to="/register"
-                  className="px-4 py-2 bg-emerald-500 text-white rounded-lg hover:bg-emerald-600 font-semibold shadow-lg transition-all text-sm"
-                >
-                  Get Started
-                </Link>
-              </>
-            )}
-          </div>
-
-          {/* Mobile Hamburger Button */}
-          <button
-            onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
-            className="lg:hidden p-2 text-gray-900 hover:bg-gray-100 rounded-lg transition-colors"
-            aria-label="Toggle menu"
-          >
-            {mobileMenuOpen ? <X size={24} /> : <Menu size={24} />}
-          </button>
-        </div>
-
-        {/* Mobile Menu */}
-        {mobileMenuOpen && (
-          <div className="lg:hidden absolute top-full left-0 right-0 mt-2 bg-white backdrop-blur-md rounded-2xl shadow-xl border border-gray-200 mx-2 overflow-hidden">
-            <div className="p-6 space-y-4">
-              <a
-                href="/#features"
-                className="block text-gray-600 hover:text-gray-900 font-medium py-3 px-4 rounded-lg hover:bg-gray-50 transition-colors"
-                onClick={closeMobileMenu}
-              >
-                Features
-              </a>
-              <a
-                href="/#how-it-works"
-                className="block text-gray-600 hover:text-gray-900 font-medium py-3 px-4 rounded-lg hover:bg-gray-50 transition-colors"
-                onClick={closeMobileMenu}
-              >
-                How it Works
-              </a>
-              <a
-                href="/#pricing"
-                className="block text-gray-600 hover:text-gray-900 font-medium py-3 px-4 rounded-lg hover:bg-gray-50 transition-colors"
-                onClick={closeMobileMenu}
-              >
-                Pricing
-              </a>
-              <a
-                href="/#faq"
-                className="block text-gray-600 hover:text-gray-900 font-medium py-3 px-4 rounded-lg hover:bg-gray-50 transition-colors"
-                onClick={closeMobileMenu}
-              >
-                FAQ
-              </a>
-              <Link
-                to="/contact"
-                onClick={closeMobileMenu}
-                className="block text-gray-600 hover:text-gray-900 font-medium py-3 px-4 rounded-lg hover:bg-gray-50 transition-colors"
-              >
-                Contact
-              </Link>
-              <Link
-                to="/about"
-                onClick={closeMobileMenu}
-                className="block text-emerald-500 font-medium py-3 px-4 rounded-lg bg-emerald-50"
-              >
-                About
-              </Link>
-
-              <div className="pt-4 border-t border-gray-200 space-y-3">
-                {token ? (
-                  <button
-                    onClick={() => {
-                      navigate("/dashboard");
-                      closeMobileMenu();
-                    }}
-                    className="w-full px-6 py-3 bg-black text-white rounded-lg hover:bg-gray-800 font-semibold shadow-lg transition-all"
-                  >
-                    Dashboard
-                  </button>
-                ) : (
-                  <>
-                    <Link
-                      to="/login"
-                      onClick={closeMobileMenu}
-                      className="block w-full px-6 py-3 bg-black text-white rounded-lg hover:bg-gray-800 font-semibold shadow-lg transition-all text-center"
-                    >
-                      Sign In
-                    </Link>
-                    <Link
-                      to="/register"
-                      onClick={closeMobileMenu}
-                      className="block w-full px-6 py-3 bg-emerald-500 text-white rounded-lg hover:bg-emerald-600 font-semibold shadow-lg transition-all text-center"
-                    >
-                      Get Started
-                    </Link>
-                  </>
-                )}
-              </div>
-            </div>
-          </div>
-        )}
-      </nav>
-      <div className="min-h-screen bg-gradient-to-b from-slate-900 via-purple-900 to-slate-900 text-white px-4 py-24">
-        <div className="max-w-5xl mx-auto bg-white/5 backdrop-blur-lg rounded-3xl p-6 md:p-12 border border-white/10">
-          <h1 className="text-3xl md:text-5xl font-bold mb-6 bg-gradient-to-r from-purple-400 to-pink-400 bg-clip-text text-transparent">
-            Terms & Conditions
-          </h1>
+    <>  
+      <Navbar tone="light" activeKey="about" />
+    <div className="min-h-screen bg-gradient-to-b from-slate-900 via-purple-900 to-slate-900 text-white px-4 py-24">
+      <div className="max-w-5xl mx-auto bg-white/5 backdrop-blur-lg rounded-3xl p-6 md:p-12 border border-white/10">
+        <h1 className="text-3xl md:text-5xl font-bold mb-6 bg-gradient-to-r from-purple-400 to-pink-400 bg-clip-text text-transparent">
+          Terms & Conditions
+        </h1>
+
+        <p className="text-gray-300 mb-8">
+          These Terms & Conditions ("Terms") govern your access to and use of{" "}
+          <span className="text-purple-400 font-semibold">Intervyo</span>, an
+          AI-powered interview preparation platform. By accessing or using the
+          platform, you agree to be legally bound by these Terms.
+        </p>
 
           <p className="text-gray-300 mb-8">
             These Terms & Conditions ("Terms") govern your access to and use of{" "}