diff --git a/src/app/globals.css b/src/app/globals.css
index 949804a..8e62cdf 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -9,11 +9,29 @@
   --color-brand-600: #7B5235;
   --color-brand-700: #5C3D23;
 
+
+.dark {
+  --background: #0f172a;
+  --foreground: #f8fafc;
+  --surface: #1e293b;
+  --surface-hover: #334155;
+  --border: #334155;
+  --muted: #94a3b8;
+}
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --font-sans: var(--font-geist-sans);
+  --font-mono: var(--font-geist-mono);
+}
+
   --color-ink: #3D2918;
   --color-ink-secondary: #5C3D23;
   --color-ink-tertiary: #7B5235;
   --color-ink-inverse: #ffffff;
 
+
   --color-surface: #ffffff;
   --color-surface-secondary: #f8fafc;
   --color-surface-tertiary: #f1f5f9;
@@ -32,7 +50,7 @@
   position: sticky;
   top: 0;
   z-index: 100;
-  background: rgba(255, 255, 255, 0.85);
+  background: var(--surface);
   backdrop-filter: blur(12px);
   border-bottom: 1px solid var(--border);
 }
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
index 902859e..e28bcfd 100644
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -5,6 +5,32 @@ import { FaGithub } from "react-icons/fa";
 
 export default function Footer() {
   return (
+
+    <footer className="footer">
+      <div className="footer-inner">
+        <div className="footer-brand">
+          <Image
+            src="/sjapathwaylogo.png"
+            alt="SJA Pathway"
+            width={36}
+            height={36}
+            quality={100}
+            unoptimized
+            style={{borderRadius: 6, backgroundColor: "white", padding: "2px",}}
+          />
+          <span>WebPath</span>
+          <p className="footer-tagline">
+            An open-source interactive roadmap for web developers.
+          </p>
+        </div>
+        <div className="footer-links">
+          <div className="footer-col">
+            <h4>Explore</h4>
+            <Link href="/paths">All Paths</Link>
+            <Link href="/paths/frontend">Frontend</Link>
+            <Link href="/paths/backend">Backend</Link>
+            <Link href="/paths/fullstack">Full Stack</Link>
+
     <footer className="relative bg-[#0F172A] border-t border-white/5 pt-20 pb-10">
       <div className="absolute inset-0 overflow-hidden pointer-events-none">
         <div className="absolute -top-[30%] -right-[10%] w-[500px] h-[500px] bg-purple-500/10 blur-[120px] rounded-full" />
@@ -21,6 +47,7 @@ export default function Footer() {
                   fill
                   className="object-cover"
                   unoptimized
+                   style={{borderRadius: 6, backgroundColor: "white", padding: "2px",}}
                 />
               </div>
               <span className="text-2xl font-black tracking-tighter text-white">
@@ -42,6 +69,7 @@ export default function Footer() {
                 <Globe size={20} />
               </div>
             </div>
+
           </div>
 
           <div className="space-y-6">
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
index f107a4b..fe5379a 100644
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@@ -1,6 +1,9 @@
 "use client";
 
+
+
 import { useState, useEffect } from "react";
+
 import Link from "next/link";
 import Image from "next/image";
 import { usePathname } from "next/navigation";
@@ -25,6 +28,36 @@ export default function Navbar() {
   ];
 
   return (
+
+    <nav className="navbar">
+      <div className="navbar-inner">
+
+        <Link href="/" className="navbar-brand">
+          <Image
+            src="/sjapathwaylogo.png"
+            alt="SJA Pathway"
+            width={40}
+            height={40}
+            quality={100}
+            unoptimized
+            style={{
+              borderRadius: 6,
+              backgroundColor: "white",
+              padding: "2px",
+            }}
+          />
+
+          <span className="brand-text">WebPath</span>
+        </Link>
+
+        <div className="navbar-links">
+
+          <Link href="/paths">Paths</Link>
+
+          <Link href="/contribute">Contribute</Link>
+
+          <a
+
     <nav
       className={`fixed top-0 w-full z-[100] transition-all duration-500 ${
         scrolled || pathname !== "/"
@@ -66,6 +99,7 @@ export default function Navbar() {
           ))}
 
                     <motion.a
+
             href="https://github.com/sja-thedude/WebPath"
             target="_blank"
             rel="noopener noreferrer"
@@ -82,9 +116,30 @@ export default function Navbar() {
             whileTap={{ scale: 0.95 }}
             className="flex items-center gap-2 px-6 py-2.5 rounded-3xl font-bold bg-white text-[#0F172A] transition-colors hover:bg-slate-50"
           >
+
+            GitHub
+          </a>
+
+          <button
+            className="flex items-center gap-2 px-4 py-2 rounded-3xl font-bold bg-white text-[#0F172A]"
+            onClick={() => {
+              document.documentElement.classList.toggle("dark");
+
+              localStorage.theme =
+                document.documentElement.classList.contains("dark")
+                  ? "dark"
+                  : "light";
+            }}
+            aria-label="Toggle Dark Mode"
+          >
+            🌙
+          </button>
+
+
             <FaGithub size={20} />
             <span>GitHub</span>
           </motion.a>
+
         </div>
 
         <button