diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 7c851a2f..d7d504ae 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -5,132 +5,85 @@ import FooterWrapper from "@/components/layout/FooterWrapper";
 import { AuthProvider } from "@/context/AuthContext";
 import { GamificationProvider } from "@/context/GamificationContext";
 import { RealTimeProvider } from "@/context/RealTimeContext";
-import { AnimatedBackground } from "@/components/AnimatedBackground";
+import { AnimatedBackground } from '@/components/AnimatedBackground';
 
-import MaintenanceBanner from "@/components/layout/MaintenanceBanner";
-import BackgroundMesh from "@/components/layout/BackgroundMesh";
-import PageWrapper from "@/components/layout/PageWrapper";
+import MaintenanceBanner from '@/components/layout/MaintenanceBanner';
+import BackgroundMesh from '@/components/layout/BackgroundMesh';
+import PageWrapper from '@/components/layout/PageWrapper';
 import { ThemeProvider } from "@/components/providers/theme-provider";
-
 import "./globals.css";
 
-const inter = Inter({
-  subsets: ["latin"],
-  variable: "--font-inter",
-});
-
-const spaceGrotesk = Space_Grotesk({
-  subsets: ["latin"],
-  variable: "--font-space",
-});
-
+const inter = Inter({ subsets: ["latin"], variable: '--font-inter' });
+const spaceGrotesk = Space_Grotesk({ subsets: ["latin"], variable: '--font-space' });
 const barlowCondensed = Barlow_Condensed({
-  weight: ["900"],
-  subsets: ["latin"],
-  variable: "--font-barlow",
+  weight: ['900'],
+  subsets: ['latin'],
+  variable: '--font-barlow'
 });
 
 export const metadata: Metadata = {
-  metadataBase: new URL("https://devpath-website.web.app"),
-
+  metadataBase: new URL('https://devpath-website.web.app'),
   title: {
     default: "DevPath Community",
     template: "%s | DevPath Community",
   },
-
-  description:
-    "Join 50,000+ developers accelerating their coding skills through structured paths, real projects, and an active community.",
-
-  keywords: [
-    "DevPath",
-    "Coding Community",
-    "Developer Community",
-    "Learn to Code",
-    "Programming",
-    "Software Engineering",
-    "Web Development",
-    "App Development",
-  ],
-
+  description: "Join 50,000+ developers accelerating their coding skills through structured paths, real projects, and an active community.",
+  keywords: ["DevPath", "Coding Community", "Developer Community", "Learn to Code", "Programming", "Software Engineering", "Web Development", "App Development"],
   authors: [{ name: "DevPath Team" }],
-
   creator: "DevPath Community",
-
   publisher: "DevPath Community",
-
   robots: {
     index: true,
     follow: true,
-
     googleBot: {
       index: true,
       follow: true,
-      "max-video-preview": -1,
-      "max-image-preview": "large",
-      "max-snippet": -1,
+      'max-video-preview': -1,
+      'max-image-preview': 'large',
+      'max-snippet': -1,
     },
   },
-
   openGraph: {
     type: "website",
     locale: "en_US",
     url: "https://devpath-website.web.app",
-
     title: "DevPath Community",
-
-    description:
-      "Join 50,000+ developers accelerating their coding skills through structured paths, real projects, and an active community.",
-
+    description: "Join 50,000+ developers accelerating their coding skills through structured paths, real projects, and an active community.",
     siteName: "DevPath Community",
-
     images: [
       {
-        url: "/logo-circle.png",
+        url: "/DevPath-logo.png",
         width: 800,
         height: 600,
         alt: "DevPath Community Logo",
       },
     ],
   },
-
   twitter: {
     card: "summary_large_image",
-
     title: "DevPath Community",
-
-    description:
-      "Join 50,000+ developers accelerating their coding skills through structured paths, real projects, and an active community.",
-
-    images: ["/logo-circle.png"],
-
-    creator: "@DevPath_Community",
+    description: "Join 50,000+ developers accelerating their coding skills through structured paths, real projects, and an active community.",
+    images: ["/DevPath-logo.png"],
+    creator: "@DevPath_Community", // Assuming handle
   },
-
   icons: {
-    icon: "/logo-circle.png",
-    apple: "/logo-circle.png",
+    icon: '/DevPath-logo.png',
+    apple: '/DevPath-logo.png',
   },
 };
 
 const jsonLd = {
   "@context": "https://schema.org",
-
   "@type": "Organization",
-
-  name: "DevPath Community",
-
-  url: "https://devpath-website.web.app",
-
-  logo: "https://devpath-website.web.app/logo-circle.png",
-
-  sameAs: [
+  "name": "DevPath Community",
+  "url": "https://devpath-website.web.app",
+  "logo": "https://devpath-website.web.app/DevPath-logo.png",
+  "sameAs": [
     "https://twitter.com/DevPath_Community",
     "https://www.linkedin.com/company/devpath-community",
-    "https://github.com/devpathindcommunity-india/DevPath-Web",
+    "https://github.com/devpathindcommunity-india/DevPath-Web"
   ],
-
-  description:
-    "A community of 50,000+ developers accelerating their coding skills through structured paths and real projects.",
+  "description": "A community of 50,000+ developers accelerating their coding skills through structured paths and real projects."
 };
 
 export default function RootLayout({
@@ -140,9 +93,7 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="en" suppressHydrationWarning>
-      <body
-        className={`${inter.variable} ${spaceGrotesk.variable} ${barlowCondensed.variable}`}
-      >
+      <body className={`${inter.variable} ${spaceGrotesk.variable} ${barlowCondensed.variable}`}>
         <ThemeProvider
           attribute="class"
           defaultTheme="dark"
@@ -151,24 +102,18 @@ export default function RootLayout({
         >
           <script
             type="application/ld+json"
-            dangerouslySetInnerHTML={{
-              __html: JSON.stringify(jsonLd),
-            }}
+            dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
           />
-
           <AuthProvider>
             <GamificationProvider>
               <RealTimeProvider>
                 <AnimatedBackground />
-
                 {/* <BackgroundMesh /> */}
-
                 <MaintenanceBanner />
-
                 <Navbar />
-
-                <PageWrapper>{children}</PageWrapper>
-
+                <PageWrapper>
+                  {children}
+                </PageWrapper>
                 <FooterWrapper />
               </RealTimeProvider>
             </GamificationProvider>
@@ -177,4 +122,4 @@ export default function RootLayout({
       </body>
     </html>
   );
-}
\ No newline at end of file
+}
diff --git a/src/components/home/Community.tsx b/src/components/home/Community.tsx
index eee56a29..f7861900 100644
--- a/src/components/home/Community.tsx
+++ b/src/components/home/Community.tsx
@@ -1,51 +1,36 @@
-"use client";
-
+"use client"
 import { MessageCircle } from 'lucide-react';
 import { motion } from 'framer-motion';
 import Image from 'next/image';
-
+import logo from '@/assets/logo.png';
 import Button from '../ui/Button';
-
 import styles from './Community.module.css';
 
-const logo = "/logo-circle.png";
-
 export default function Community() {
     return (
         <section className={styles.community}>
             <div className={styles.container}>
-
-                {/* Left Content */}
                 <div className={styles.content}>
                     <h2 className={styles.title}>
-                        Join Our Thriving
-                        <br />
+                        Join Our Thriving<br />
                         Developer Community
                     </h2>
-
                     <p className={styles.description}>
-                        Connect with developers worldwide, share knowledge,
-                        and stay updated with the latest tech trends.
-                        Get help when you&apos;re stuck and celebrate your
-                        wins together.
+                        Connect with developers worldwide, share knowledge, and stay updated with the latest tech trends.
+                        Get help when you&apos;re stuck and celebrate your wins together.
                     </p>
-
                     <a
                         href="https://chat.whatsapp.com/D2PRfQy4HYgC4XURhY2X8C"
                         target="_blank"
                         rel="noopener noreferrer"
                         style={{ textDecoration: 'none' }}
                     >
-                        <Button
-                            variant="primary"
-                            icon={<MessageCircle size={20} />}
-                        >
+                        <Button variant="primary" icon={<MessageCircle size={20} />}>
                             Join DevPath Community
                         </Button>
                     </a>
                 </div>
 
-                {/* Right Mockup */}
                 <div className={styles.mockupWrapper}>
                     <motion.div
                         className={styles.chatCard}
@@ -54,138 +39,61 @@ export default function Community() {
                         transition={{ duration: 0.8 }}
                         whileHover={{ y: -5, scale: 1.02 }}
                     >
-
-                        {/* Header */}
                         <div className={styles.chatHeader}>
                             <div className={styles.serverInfo}>
-
                                 <div className={styles.serverIcon}>
-                                    <Image
-                                        src={logo}
-                                        alt="DevPath"
-                                        width={40}
-                                        height={40}
-                                        className="rounded-full"
-                                    />
+                                    <Image src={logo} alt="DevPath" width={40} height={40} />
                                 </div>
-
                                 <div>
-                                    <span className={styles.serverName}>
-                                        DevPath Official
-                                    </span>
-
+                                    <span className={styles.serverName}>DevPath Official</span>
                                     <span className={styles.serverStatus}>
                                         <span className="inline-block w-2 h-2 rounded-full bg-green-500 mr-2 animate-pulse" />
                                         325 online
                                     </span>
                                 </div>
                             </div>
-
-                            <div
-                                style={{
-                                    color: 'var(--text-secondary)',
-                                    fontSize: '12px'
-                                }}
-                            >
+                            <div style={{ color: 'var(--text-secondary)', fontSize: '12px' }}>
                                 8,000+ members
                             </div>
                         </div>
 
-                        {/* Chat Body */}
                         <div className={styles.chatBody}>
-
-                            {/* Message 1 */}
                             <div className={styles.message}>
-                                <div
-                                    className={styles.avatar}
-                                    style={{ background: '#3b82f6' }}
-                                />
-
+                                <div className={styles.avatar} style={{ background: '#3b82f6' }} />
                                 <div className={styles.messageContent}>
                                     <div className={styles.sender}>
-                                        <span
-                                            className={styles.username}
-                                            style={{ color: '#60a5fa' }}
-                                        >
-                                            Sarah Chen
-                                        </span>
-
-                                        <span className={styles.time}>
-                                            Today at 10:42 AM
-                                        </span>
+                                        <span className={styles.username} style={{ color: '#60a5fa' }}>Sarah Chen</span>
+                                        <span className={styles.time}>Today at 10:42 AM</span>
                                     </div>
-
-                                    <p className={styles.text}>
-                                        Just finished the Advanced React Patterns
-                                        course! The compound components section
-                                        was a game changer. 🚀
-                                    </p>
+                                    <p className={styles.text}>Just finished the Advanced React Patterns course! The compound components section was a game changer. 🚀</p>
                                 </div>
                             </div>
 
-                            {/* Message 2 */}
                             <div className={styles.message}>
-                                <div
-                                    className={styles.avatar}
-                                    style={{ background: '#10b981' }}
-                                />
-
+                                <div className={styles.avatar} style={{ background: '#10b981' }} />
                                 <div className={styles.messageContent}>
                                     <div className={styles.sender}>
-                                        <span
-                                            className={styles.username}
-                                            style={{ color: '#34d399' }}
-                                        >
-                                            Alex Rivera
-                                        </span>
-
-                                        <span className={styles.time}>
-                                            Today at 10:45 AM
-                                        </span>
+                                        <span className={styles.username} style={{ color: '#34d399' }}>Alex Rivera</span>
+                                        <span className={styles.time}>Today at 10:45 AM</span>
                                     </div>
-
-                                    <p className={styles.text}>
-                                        Congrats Sarah! I&apos;m working on the
-                                        Node.js path right now. Would love to
-                                        see your final project.
-                                    </p>
+                                    <p className={styles.text}>Congrats Sarah! I&apos;m working on the Node.js path right now. Would love to see your final project.</p>
                                 </div>
                             </div>
 
-                            {/* Message 3 */}
                             <div className={styles.message}>
-                                <div
-                                    className={styles.avatar}
-                                    style={{ background: '#f59e0b' }}
-                                />
-
+                                <div className={styles.avatar} style={{ background: '#f59e0b' }} />
                                 <div className={styles.messageContent}>
                                     <div className={styles.sender}>
-                                        <span
-                                            className={styles.username}
-                                            style={{ color: '#fbbf24' }}
-                                        >
-                                            Mike Johnson
-                                        </span>
-
-                                        <span className={styles.time}>
-                                            Today at 10:48 AM
-                                        </span>
+                                        <span className={styles.username} style={{ color: '#fbbf24' }}>Mike Johnson</span>
+                                        <span className={styles.time}>Today at 10:48 AM</span>
                                     </div>
-
-                                    <p className={styles.text}>
-                                        Anyone up for a code review?
-                                        I just pushed some changes to the
-                                        open source dashboard project.
-                                    </p>
+                                    <p className={styles.text}>Anyone up for a code review? I just pushed some changes to the open source dashboard project.</p>
                                 </div>
                             </div>
-
                         </div>
                     </motion.div>
                 </div>
-
             </div>
         </section>
     );
-}
\ No newline at end of file
+}
diff --git a/src/components/layout/Footer.tsx b/src/components/layout/Footer.tsx
index 75ed0acc..7543d1b8 100644
--- a/src/components/layout/Footer.tsx
+++ b/src/components/layout/Footer.tsx
@@ -1,51 +1,27 @@
 import Link from 'next/link';
 import Image from 'next/image';
-
-import {
-  Github,
-  Book,
-  Flag,
-  Users,
-  RefreshCw,
-  Code,
-  MessageSquare
-} from 'lucide-react';
-
+import { Github, Book, Flag, Users, RefreshCw, Code, MessageSquare } from 'lucide-react';
+import logo from '@/assets/logo.png';
 import styles from './Footer.module.css';
-
 import { MagneticText } from '../ui/magnetic-text';
 import { siteConfig } from '@/config/siteConfig';
 import AppStoreButtons from '../ui/AppStoreButtons';
 
-const logo = "/logo-circle.png";
-
 export default function Footer() {
     return (
         <footer className={styles.footer}>
             <div className="container">
                 <div className={styles.content}>
-
-                    {/* Brand Section */}
                     <div className={styles.brand}>
                         <h3>
-                            <Image
-                                src={logo}
-                                alt="DevPath Logo"
-                                width={32}
-                                height={32}
-                                className="rounded-full"
-                                style={{ marginRight: '12px' }}
-                            />
-
+                            <Image src={logo} alt="DevPath Logo" width={32} height={32} className="rounded-full" style={{ marginRight: '12px' }} />
                             {siteConfig.name}
                         </h3>
-
                         <p className={styles.tagline}>
                             {siteConfig.tagline}
                         </p>
                     </div>
 
-                    {/* Resources */}
                     <div className={styles.column}>
                         <div className="mb-6">
                             <MagneticText
@@ -54,23 +30,19 @@ export default function Footer() {
                                 className="text-xl font-bold"
                             />
                         </div>
-
                         <div className={styles.links}>
                             <Link href="/wiki" className={styles.link}>
                                 <Book size={16} /> Wiki &amp; Docs
                             </Link>
-
                             <Link href="/flags" className={styles.link}>
                                 <Flag size={16} /> Feature Flags
                             </Link>
-
                             <Link href="/contributors" className={styles.link}>
                                 <Users size={16} /> Contributors
                             </Link>
                         </div>
                     </div>
 
-                    {/* Links */}
                     <div className={styles.column}>
                         <div className="mb-6">
                             <MagneticText
@@ -79,39 +51,25 @@ export default function Footer() {
                                 className="text-xl font-bold"
                             />
                         </div>
-
                         <div className={styles.links}>
                             <Link href="/complaints" className={styles.link}>
                                 <MessageSquare size={16} /> Community Complaint
                             </Link>
-
                             <Link href="/updater" className={styles.link}>
                                 <RefreshCw size={16} /> Updater
                             </Link>
-
                             <Link href="/source-code" className={styles.link}>
                                 <Code size={16} /> Source Code
                             </Link>
                         </div>
 
-                        {/* App Buttons */}
                         <div className="mt-8">
-                            <h4 className="text-sm font-semibold text-gray-400 mb-4">
-                                Get the App
-                            </h4>
-
-                            <AppStoreButtons
-                                variant="footer"
-                                className="flex-col !items-start"
-                            />
+                            <h4 className="text-sm font-semibold text-gray-400 mb-4">Get the App</h4>
+                            <AppStoreButtons variant="footer" className="flex-col !items-start" />
                         </div>
 
-                        {/* Contact */}
                         <div className="mt-8">
-                            <h4 className="text-sm font-semibold text-gray-400 mb-4">
-                                Contact Us
-                            </h4>
-
+                            <h4 className="text-sm font-semibold text-gray-400 mb-4">Contact Us</h4>
                             <a
                                 href={`mailto:${siteConfig.contact.email}`}
                                 className="text-sm text-cyan-400 hover:underline"
@@ -122,17 +80,11 @@ export default function Footer() {
                     </div>
                 </div>
 
-                {/* Bottom */}
                 <div className={styles.bottom}>
                     <div className={styles.copyright}>
-                        <p>
-                            &copy; {new Date().getFullYear()} {siteConfig.name}. All rights reserved.
-                        </p>
+                        <p>&copy; {new Date().getFullYear()} {siteConfig.name}. All rights reserved.</p>
                     </div>
-
-                    {/* Socials */}
                     <div className={styles.socials}>
-
                         {/* GitHub */}
                         <a
                             href={siteConfig.social.github}
@@ -152,34 +104,10 @@ export default function Footer() {
                             className={`${styles.socialIcon} hover:scale-110 hover:text-pink-500 transition-all`}
                             aria-label="Instagram"
                         >
-                            <svg
-                                xmlns="http://www.w3.org/2000/svg"
-                                width="20"
-                                height="20"
-                                viewBox="0 0 24 24"
-                                fill="none"
-                                stroke="currentColor"
-                                strokeWidth="2"
-                                strokeLinecap="round"
-                                strokeLinejoin="round"
-                            >
-                                <rect
-                                    x="2"
-                                    y="2"
-                                    width="20"
-                                    height="20"
-                                    rx="5"
-                                    ry="5"
-                                ></rect>
-
+                            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                                <rect x="2" y="2" width="20" height="20" rx="5" ry="5"></rect>
                                 <path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"></path>
-
-                                <line
-                                    x1="17.5"
-                                    y1="6.5"
-                                    x2="17.51"
-                                    y2="6.5"
-                                ></line>
+                                <line x1="17.5" y1="6.5" x2="17.51" y2="6.5"></line>
                             </svg>
                         </a>
 
@@ -191,31 +119,10 @@ export default function Footer() {
                             className={`${styles.socialIcon} hover:scale-110 hover:text-blue-500 transition-all`}
                             aria-label="LinkedIn"
                         >
-                            <svg
-                                xmlns="http://www.w3.org/2000/svg"
-                                width="20"
-                                height="20"
-                                viewBox="0 0 24 24"
-                                fill="none"
-                                stroke="currentColor"
-                                strokeWidth="2"
-                                strokeLinecap="round"
-                                strokeLinejoin="round"
-                            >
+                            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                                 <path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"></path>
-
-                                <rect
-                                    x="2"
-                                    y="9"
-                                    width="4"
-                                    height="12"
-                                ></rect>
-
-                                <circle
-                                    cx="4"
-                                    cy="4"
-                                    r="2"
-                                ></circle>
+                                <rect x="2" y="9" width="4" height="12"></rect>
+                                <circle cx="4" cy="4" r="2"></circle>
                             </svg>
                         </a>
                     </div>
@@ -223,4 +130,4 @@ export default function Footer() {
             </div>
         </footer>
     );
-}
\ No newline at end of file
+}
diff --git a/src/components/layout/Navbar.tsx b/src/components/layout/Navbar.tsx
index 17edbed9..55ec794e 100644
--- a/src/components/layout/Navbar.tsx
+++ b/src/components/layout/Navbar.tsx
@@ -1,363 +1,258 @@
 "use client";
 
-import { useState, useMemo } from "react";
-import Link from "next/link";
-import { usePathname } from "next/navigation";
-import Image from "next/image";
+import { useState, useMemo } from 'react';
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+import Image from 'next/image';
+import { motion, AnimatePresence } from 'framer-motion';
+import { Flame, Github, LogIn, Menu, X, LogOut, Lock } from 'lucide-react';
+import logo from '@/assets/logo.png';
+import { useAuth } from '@/context/AuthContext';
+import { NotificationDropdown } from '@/components/NotificationDropdown';
+import { ThemeToggle } from '@/components/ui/theme-toggle';
+import styles from './Navbar.module.css';
+import { calculateStreak } from '@/lib/streakUtils';
+import { useScroll, useSpring } from 'framer-motion';
+import { useMaintenance } from '@/hooks/useMaintenance';
 
-import {
-  motion,
-  AnimatePresence,
-  useScroll,
-  useSpring,
-} from "framer-motion";
-
-import {
-  Flame,
-  Github,
-  LogIn,
-  Menu,
-  X,
-  LogOut,
-  Lock,
-} from "lucide-react";
-
-import { useAuth } from "@/context/AuthContext";
-import { NotificationDropdown } from "@/components/NotificationDropdown";
-import { ThemeToggle } from "@/components/ui/theme-toggle";
-import { calculateStreak } from "@/lib/streakUtils";
-import { useMaintenance } from "@/hooks/useMaintenance";
-
-import styles from "./Navbar.module.css";
-
-const logo = "/logo-circle.png";
 
 const navLinks = [
-  { href: "/", label: "Home" },
-  { href: "/courses", label: "Courses" },
-  { href: "/pathway", label: "Pathway" },
-  { href: "/community", label: "Community" },
-  { href: "/resources", label: "Resources" },
-  { href: "/events", label: "Events" },
-  { href: "/opensource", label: "Open Source" },
-  { href: "/team", label: "Team" },
+    { href: '/', label: 'Home' },
+    { href: '/courses', label: 'Courses' },
+    { href: '/pathway', label: 'Pathway' },
+    { href: '/community', label: 'Community' },
+    { href: '/resources', label: 'Resources' },
+    { href: '/events', label: 'Events' },
+    { href: '/opensource', label: 'Open Source' },
+    { href: '/team', label: 'Team' },
 ];
 
 export default function Navbar() {
-  const { user, login, logout } = useAuth();
-
-  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
-
-  const { isMaintenanceMode } = useMaintenance();
-
-  const pathname = usePathname();
-
-  const { currentStreak } = useMemo(
-    () => calculateStreak(user?.loginDates),
-    [user?.loginDates]
-  );
-
-  const toggleMobileMenu = () => {
-    if (!isMaintenanceMode) {
-      setMobileMenuOpen(!mobileMenuOpen);
-    }
-  };
-
-  const closeMobileMenu = () => setMobileMenuOpen(false);
-
-  const { scrollYProgress } = useScroll();
-
-  const scaleX = useSpring(scrollYProgress, {
-    stiffness: 100,
-    damping: 30,
-    restDelta: 0.001,
-  });
-
-  if (pathname === "/ap") return null;
-
-  return (
-    <>
-      <div
-        className={styles.navbarContainer}
-        style={{ top: isMaintenanceMode ? "70px" : "20px" }}
-      >
-        <nav
-          className={styles.navbar}
-          style={{
-            pointerEvents: isMaintenanceMode ? "none" : "auto",
-          }}
-        >
-          {/* Logo */}
-          <Link href="/" className={styles.logo}>
-            <div className={styles.logoIcon}>
-              <Image
-                src={logo}
-                alt="DevPath Logo"
-                width={32}
-                height={32}
-                className="rounded-full"
-              />
-            </div>
-
-            <span className={styles.logoText}>DevPath</span>
-          </Link>
-
-          {/* Navigation */}
-          <div className={styles.navPill}>
-            <div className={styles.navLinks}>
-              {navLinks.map((link) =>
-                isMaintenanceMode ? (
-                  <span
-                    key={link.href}
-                    className={`${styles.navLink} text-muted-foreground cursor-not-allowed opacity-50 ${
-                      link.label === "Courses" ? "text-xs" : ""
-                    }`}
-                    style={{
-                      fontSize:
-                        link.label === "Courses"
-                          ? "0.75rem"
-                          : undefined,
-                    }}
-                    title="Maintenance Mode Active"
-                  >
-                    {link.label === "Community" && (
-                      <Lock size={12} className="inline mr-1" />
-                    )}
-
-                    {link.label}
-                  </span>
-                ) : (
-                  <Link
-                    key={link.href}
-                    href={link.href}
-                    className={`${styles.navLink} ${
-                      link.label === "Courses" ? "text-xs" : ""
-                    }`}
-                    style={{
-                      fontSize:
-                        link.label === "Courses"
-                          ? "0.75rem"
-                          : undefined,
-                    }}
-                  >
-                    {link.label}
-                  </Link>
-                )
-              )}
-            </div>
-
-            {/* Progress Bar */}
-            <motion.div
-              className={styles.progressBar}
-              style={{ scaleX }}
-            />
-          </div>
-
-          {/* Actions */}
-          <div className={styles.actions}>
-            {user && (
-              <div
-                className="flex items-center gap-1 px-3 py-1.5 bg-orange-500/10 text-orange-500 rounded-full border border-orange-500/20"
-                title="Current Streak"
-              >
-                <Flame size={16} fill="currentColor" />
-
-                <span className="text-sm font-bold">
-                  {currentStreak}
-                </span>
-              </div>
-            )}
-
-            <ThemeToggle />
-
-            <a
-              href="https://github.com/devpathindcommunity-india/DevPath-Web"
-              target="_blank"
-              rel="noopener noreferrer"
-              className={styles.iconButton}
-              aria-label="GitHub"
-            >
-              <Github size={20} />
-            </a>
-
-            <NotificationDropdown />
-
-            {user ? (
-              <Link
-                href="/profile"
-                className={styles.profileAvatar}
-                title={user.name || "Profile"}
-              >
-                {user.photoURL ? (
-                  <Image
-                    src={user.photoURL}
-                    alt={user.name || "User"}
-                    width={36}
-                    height={36}
-                    className="rounded-full"
-                    style={{
-                      objectFit: "cover",
-                      width: "100%",
-                      height: "100%",
-                    }}
-                  />
-                ) : (
-                  <div className="w-full h-full flex items-center justify-center bg-blue-500 text-white font-bold text-sm">
-                    {user.name?.charAt(0).toUpperCase()}
-                  </div>
-                )}
-              </Link>
-            ) : (
-              <Link
-                href={isMaintenanceMode ? "#" : "/login"}
-                className={`${styles.profileButton} ${
-                  isMaintenanceMode
-                    ? "opacity-50 cursor-not-allowed pointer-events-none"
-                    : ""
-                }`}
-              >
-                <LogIn size={16} />
-
-                <span className="hidden sm:inline">
-                  Login
-                </span>
-              </Link>
-            )}
-
-            {/* Mobile Menu Button */}
-            <button
-              className={styles.hamburger}
-              onClick={toggleMobileMenu}
-              aria-label={
-                mobileMenuOpen
-                  ? "Close menu"
-                  : "Open menu"
-              }
-              aria-expanded={mobileMenuOpen}
+    const { user, login, logout } = useAuth();
+    const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
+    const { isMaintenanceMode } = useMaintenance();
+    console.log("Navbar Render: isMaintenanceMode =", isMaintenanceMode);
+
+    const toggleMobileMenu = () => {
+        if (!isMaintenanceMode) {
+            setMobileMenuOpen(!mobileMenuOpen);
+        }
+    };
+    const closeMobileMenu = () => setMobileMenuOpen(false);
+
+    const { currentStreak } = useMemo(() => calculateStreak(user?.loginDates), [user?.loginDates]);
+    const pathname = usePathname();
+
+
+    const { scrollYProgress } = useScroll();
+    const scaleX = useSpring(scrollYProgress, {
+        stiffness: 100,
+        damping: 30,
+        restDelta: 0.001
+    });
+
+    if (pathname === '/ap') return null;
+
+    return (
+        <>
+            <div
+                className={styles.navbarContainer}
+                style={{ top: isMaintenanceMode ? '70px' : '20px' }}
             >
-              {mobileMenuOpen ? (
-                <X size={24} />
-              ) : (
-                <Menu size={24} />
-              )}
-            </button>
-          </div>
-        </nav>
-      </div>
-
-      {/* Mobile Menu */}
-      <AnimatePresence>
-        {mobileMenuOpen && (
-          <>
-            {/* Backdrop */}
-            <motion.div
-              className={styles.mobileBackdrop}
-              initial={{ opacity: 0 }}
-              animate={{ opacity: 1 }}
-              exit={{ opacity: 0 }}
-              onClick={closeMobileMenu}
-            />
-
-            {/* Drawer */}
-            <motion.div
-              className={styles.mobileMenu}
-              initial={{ x: "100%" }}
-              animate={{ x: 0 }}
-              exit={{ x: "100%" }}
-              transition={{
-                type: "tween",
-                duration: 0.3,
-              }}
-            >
-              <div className={styles.mobileHeader}>
-                <span className={styles.mobileTitle}>
-                  Menu
-                </span>
-
-                <button
-                  className={styles.mobileClose}
-                  onClick={closeMobileMenu}
-                  aria-label="Close menu"
-                >
-                  <X size={24} />
-                </button>
-              </div>
-
-              <nav className={styles.mobileNav}>
-                {navLinks.map((link) => (
-                  <Link
-                    key={link.href}
-                    href={
-                      isMaintenanceMode
-                        ? "#"
-                        : link.href
-                    }
-                    className={`${styles.mobileLink} ${
-                      isMaintenanceMode
-                        ? "opacity-50 cursor-not-allowed pointer-events-none"
-                        : ""
-                    }`}
-                    onClick={
-                      isMaintenanceMode
-                        ? undefined
-                        : closeMobileMenu
-                    }
-                  >
-                    {link.label}
-                  </Link>
-                ))}
-              </nav>
-
-              <div className={styles.mobileActions}>
-                <div className={styles.mobileActionRow}>
-                  <ThemeToggle />
-
-                  <span>Toggle Theme</span>
-                </div>
-
-                {user ? (
-                  <Link
-                    href="/profile"
-                    className={styles.mobileProfileButton}
-                    onClick={closeMobileMenu}
-                  >
-                    <span>{user.name}</span>
-                  </Link>
-                ) : (
-                  <Link
-                    href="/login"
-                    className={styles.mobileProfileButton}
-                    onClick={closeMobileMenu}
-                  >
-                    <LogIn size={20} />
-
-                    <span>Login</span>
-                  </Link>
-                )}
-
-                {user && (
-                  <button
-                    className={styles.mobileProfileButton}
-                    onClick={() => {
-                      logout();
-                      closeMobileMenu();
-                      window.location.href = "/";
-                    }}
-                    style={{
-                      color: "#ef4444",
-                      borderColor: "#ef4444",
-                    }}
-                  >
-                    <LogOut size={20} />
-
-                    <span>Logout</span>
-                  </button>
-                )}
-              </div>
-            </motion.div>
-          </>
-        )}
-      </AnimatePresence>
-    </>
-  );
-}
\ No newline at end of file
+                <nav className={styles.navbar} style={{ pointerEvents: isMaintenanceMode ? 'none' : 'auto' }}>
+                    <Link href="/" className={styles.logo}>
+                        <div className={styles.logoIcon}>
+                            <Image src={logo} alt="DevPath Logo" width={32} height={32} className="rounded-full" />
+                        </div>
+                        <span className={styles.logoText}>DevPath</span>
+                    </Link>
+
+                    {/* Center Pill Navigation */}
+                    <div className={styles.navPill}>
+                        <div className={styles.navLinks}>
+                            {navLinks.map((link) => (
+                                isMaintenanceMode ? (
+                                    <span
+                                        key={link.href}
+                                        className={`${styles.navLink} text-muted-foreground cursor-not-allowed opacity-50 ${link.label === 'Courses' ? 'text-xs' : ''}`}
+                                        style={{ fontSize: link.label === 'Courses' ? '0.75rem' : undefined }}
+                                        title="Maintenance Mode Active"
+                                    >
+                                        {link.label === 'Community' && <Lock size={12} className="inline mr-1" />}
+                                        {link.label}
+                                    </span>
+                                ) : (
+                                    <Link
+                                        key={link.href}
+                                        href={link.href}
+                                        className={`${styles.navLink} ${link.label === 'Courses' ? 'text-xs' : ''}`}
+                                        style={{ fontSize: link.label === 'Courses' ? '0.75rem' : undefined }}
+                                    >
+                                        {link.label}
+                                    </Link>
+                                )
+                            ))}
+                        </div>
+
+
+                        {/* Scroll Progress Line attached to Pill */}
+                        <motion.div
+                            className={styles.progressBar}
+                            style={{ scaleX }}
+                        />
+                    </div>
+
+                    <div className={styles.actions}>
+                        {user && (
+                            <div className="flex items-center gap-1 px-3 py-1.5 bg-orange-500/10 text-orange-500 rounded-full border border-orange-500/20" title="Current Streak">
+                                <Flame size={16} fill="currentColor" />
+                                <span className="text-sm font-bold">{currentStreak}</span>
+                            </div>
+                        )}
+                        <ThemeToggle />
+                        <a
+                            href="https://github.com/devpathindcommunity-india/DevPath-Web"
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            className={styles.iconButton}
+                            aria-label="GitHub"
+                        >
+                            <Github size={20} />
+                        </a>
+
+                        <NotificationDropdown />
+
+                        {user ? (
+                            <Link href="/profile" className={styles.profileAvatar} title={user.name || 'Profile'}>
+                                {user.photoURL ? (
+                                    <Image
+                                        src={user.photoURL}
+                                        alt={user.name || 'User'}
+                                        width={36}
+                                        height={36}
+                                        className="rounded-full"
+                                        style={{ objectFit: 'cover', width: '100%', height: '100%' }}
+                                    />
+                                ) : (
+                                    <div className="w-full h-full flex items-center justify-center bg-blue-500 text-white font-bold text-sm">
+                                        {user.name?.charAt(0).toUpperCase()}
+                                    </div>
+                                )}
+                            </Link>
+                        ) : (
+                            <Link
+                                href={isMaintenanceMode ? "#" : "/login"}
+                                className={`${styles.profileButton} ${isMaintenanceMode ? 'opacity-50 cursor-not-allowed pointer-events-none' : ''}`}
+                            >
+                                <LogIn size={16} />
+                                <span className="hidden sm:inline">Login</span>
+                            </Link>
+                        )}
+
+                        {/* Hamburger Menu Button (Mobile Only) */}
+                        <button
+                            className={styles.hamburger}
+                            onClick={toggleMobileMenu}
+                            aria-label={mobileMenuOpen ? "Close menu" : "Open menu"}
+                            aria-expanded={mobileMenuOpen}
+                        >
+                            {mobileMenuOpen ? <X size={24} /> : <Menu size={24} />}
+                        </button>
+                    </div>
+                </nav >
+            </div >
+
+            {/* Mobile Menu Drawer */}
+            <AnimatePresence>
+                {
+                    mobileMenuOpen && (
+                        <>
+                            {/* Backdrop */}
+                            <motion.div
+                                className={styles.mobileBackdrop}
+                                initial={{ opacity: 0 }}
+                                animate={{ opacity: 1 }}
+                                exit={{ opacity: 0 }}
+                                onClick={closeMobileMenu}
+                            />
+
+                            {/* Drawer */}
+                            <motion.div
+                                className={styles.mobileMenu}
+                                initial={{ x: '100%' }}
+                                animate={{ x: 0 }}
+                                exit={{ x: '100%' }}
+                                transition={{ type: 'tween', duration: 0.3 }}
+                            >
+                                <div className={styles.mobileHeader}>
+                                    <span className={styles.mobileTitle}>Menu</span>
+                                    <button
+                                        className={styles.mobileClose}
+                                        onClick={closeMobileMenu}
+                                        aria-label="Close menu"
+                                    >
+                                        <X size={24} />
+                                    </button>
+                                </div>
+
+                                <nav className={styles.mobileNav}>
+                                    {navLinks.map((link) => (
+                                        <Link
+                                            key={link.href}
+                                            href={isMaintenanceMode ? "#" : link.href}
+                                            className={`${styles.mobileLink} ${isMaintenanceMode ? 'opacity-50 cursor-not-allowed pointer-events-none' : ''}`}
+                                            onClick={isMaintenanceMode ? undefined : closeMobileMenu}
+                                        >
+                                            {link.label}
+                                        </Link>
+
+                                    ))}
+                                </nav>
+
+                                <div className={styles.mobileActions}>
+                                    <div className={styles.mobileActionRow}>
+                                        <ThemeToggle />
+                                        <span>Toggle Theme</span>
+                                    </div>
+
+                                    {user ? (
+                                        <Link
+                                            href="/profile"
+                                            className={styles.mobileProfileButton}
+                                            onClick={closeMobileMenu}
+                                        >
+                                            <span>{user.name}</span>
+                                        </Link>
+                                    ) : (
+                                        <Link
+                                            href="/login"
+                                            className={styles.mobileProfileButton}
+                                            onClick={closeMobileMenu}
+                                        >
+                                            <LogIn size={20} />
+                                            <span>Login</span>
+                                        </Link>
+                                    )}
+                                    {user && (
+                                        <button
+                                            className={styles.mobileProfileButton}
+                                            onClick={() => {
+                                                logout();
+                                                closeMobileMenu();
+                                                window.location.href = '/';
+                                            }}
+                                            style={{ color: '#ef4444', borderColor: '#ef4444' }}
+                                        >
+                                            <LogOut size={20} />
+                                            <span>Logout</span>
+                                        </button>
+                                    )}
+                                </div>
+                            </motion.div>
+                        </>
+                    )
+                }
+            </AnimatePresence >
+        </>
+    );
+}