From 910ff962c9acd2b696e1f2bf724ace1c3e2f114f Mon Sep 17 00:00:00 2001
From: arpit2006 <arpitshirbhate25@gmail.com>
Date: Thu, 28 May 2026 17:06:04 +0530
Subject: [PATCH 1/2] added feature profile page on navbar

---
 src/Routes/Router.tsx         |   2 +
 src/components/Navbar.tsx     |  57 ++--------
 src/pages/Profile/Profile.tsx | 203 ++++++++++++++++++++++++++++++++++
 3 files changed, 217 insertions(+), 45 deletions(-)
 create mode 100644 src/pages/Profile/Profile.tsx

diff --git a/src/Routes/Router.tsx b/src/Routes/Router.tsx
index 874ef7e7..c8ca2fc3 100644
--- a/src/Routes/Router.tsx
+++ b/src/Routes/Router.tsx
@@ -9,6 +9,7 @@ import ContributorProfile from "../pages/ContributorProfile/ContributorProfile.t
 import Home from "../pages/Home/Home.tsx";
 import Activity from "../pages/Activity.tsx"; 
 import PrivacyPolicy from "../pages/Privacy/PrivacyPolicy.tsx"; // ✅ Updated import path to match your new folder structure
+import Profile from "../pages/Profile/Profile.tsx";
 
 const Router = () => {
   return (
@@ -21,6 +22,7 @@ const Router = () => {
       <Route path="/contact" element={<Contact />} />
       <Route path="/contributors" element={<Contributors />} />
       <Route path="/contributor/:username" element={<ContributorProfile />} />
+      <Route path="/profile" element={<Profile />} />
       <Route path="/activity" element={<Activity />} />
 
       {/* Privacy Policy page route */}
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
index fd5eac86..526ff561 100644
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@@ -1,7 +1,7 @@
 import { NavLink, Link } from "react-router-dom";
 import { useState, useContext } from "react";
 import { ThemeContext } from "../context/ThemeContext";
-import { Moon, Sun, Menu, X, Github } from "lucide-react";
+import { Moon, Sun, Menu, X, User } from "lucide-react";
 
 const Navbar: React.FC = () => {
   const [isOpen, setIsOpen] = useState(false);
@@ -24,40 +24,30 @@ const Navbar: React.FC = () => {
   return (
     <nav className="sticky top-0 z-50 bg-white dark:bg-gray-900 border-b border-gray-200 dark:border-gray-800 transition-colors duration-300 backdrop-blur">
       <div className="max-w-7xl mx-auto px-6 py-4 flex items-center justify-between">
-
-        {/* Logo */}
         <Link
           to="/"
           className="flex items-center gap-3 text-xl font-bold text-slate-900 dark:text-white"
         >
-          <img
-            src="/crl-icon.png"
-            alt="CRL Icon"
-            className="h-8 w-8 object-contain"
-          />
-
+          <img src="/crl-icon.png" alt="CRL Icon" className="h-8 w-8 object-contain" />
           <span>GitHub Tracker</span>
         </Link>
 
-        {/* Desktop Navigation */}
         <div className="hidden md:flex items-center gap-3">
           <NavLink to="/" className={navLinkStyles}>
             Home
           </NavLink>
-
           <NavLink to="/track" className={navLinkStyles}>
             Tracker
           </NavLink>
-
           <NavLink to="/contributors" className={navLinkStyles}>
             Contributors
           </NavLink>
-
+          <NavLink to="/profile" className={navLinkStyles}>
+            Profile
+          </NavLink>
           <NavLink to="/login" className={navLinkStyles}>
             Login
           </NavLink>
-
-          {/* Theme Toggle */}
           <button
             onClick={toggleTheme}
             className="ml-2 p-2 rounded-xl border border-gray-300 dark:border-gray-700 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
@@ -71,10 +61,7 @@ const Navbar: React.FC = () => {
           </button>
         </div>
 
-        {/* Mobile Controls */}
         <div className="md:hidden flex items-center gap-2">
-
-          {/* Theme Toggle */}
           <button
             onClick={toggleTheme}
             className="p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
@@ -86,8 +73,6 @@ const Navbar: React.FC = () => {
               <Moon className="h-5 w-5 text-white" />
             )}
           </button>
-
-          {/* Menu Toggle */}
           <button
             onClick={() => setIsOpen(!isOpen)}
             className="p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
@@ -102,40 +87,22 @@ const Navbar: React.FC = () => {
         </div>
       </div>
 
-      {/* Mobile Menu */}
       {isOpen && (
         <div className="md:hidden border-t border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900">
           <div className="px-6 py-5 flex flex-col gap-3">
-
-            <NavLink
-              to="/"
-              className={navLinkStyles}
-              onClick={closeMenu}
-            >
+            <NavLink to="/" className={navLinkStyles} onClick={closeMenu}>
               Home
             </NavLink>
-
-            <NavLink
-              to="/track"
-              className={navLinkStyles}
-              onClick={closeMenu}
-            >
+            <NavLink to="/track" className={navLinkStyles} onClick={closeMenu}>
               Tracker
             </NavLink>
-
-            <NavLink
-              to="/contributors"
-              className={navLinkStyles}
-              onClick={closeMenu}
-            >
+            <NavLink to="/contributors" className={navLinkStyles} onClick={closeMenu}>
               Contributors
             </NavLink>
-
-            <NavLink
-              to="/login"
-              className={navLinkStyles}
-              onClick={closeMenu}
-            >
+            <NavLink to="/profile" className={navLinkStyles} onClick={closeMenu}>
+              <span className="inline-flex items-center gap-2"><User className="h-4 w-4" />Profile</span>
+            </NavLink>
+            <NavLink to="/login" className={navLinkStyles} onClick={closeMenu}>
               Login
             </NavLink>
           </div>
diff --git a/src/pages/Profile/Profile.tsx b/src/pages/Profile/Profile.tsx
new file mode 100644
index 00000000..2b4ec14c
--- /dev/null
+++ b/src/pages/Profile/Profile.tsx
@@ -0,0 +1,203 @@
+import { useContext } from "react";
+import { Link } from "react-router-dom";
+import { ArrowRight, BadgeCheck, CalendarDays, Clock3, History, Mail, ShieldCheck, Sparkles, UserCircle2 } from "lucide-react";
+import { motion } from "framer-motion";
+import { ThemeContext } from "../../context/ThemeContext";
+
+const Profile = () => {
+  const themeContext = useContext(ThemeContext);
+  if (!themeContext) return null;
+
+  const { mode } = themeContext;
+
+  const profile = {
+    username: "Profile",
+    email: "profile@githubtracker.dev",
+    joined: "Always available",
+    status: "Active",
+  };
+
+  const profileCompleteness = 100;
+
+  const quickStats = [
+    { label: "Account status", value: "Active", icon: BadgeCheck, tone: "text-emerald-500" },
+    { label: "Session", value: "Secure", icon: ShieldCheck, tone: "text-cyan-500" },
+    { label: "Profile score", value: `${profileCompleteness}%`, icon: Sparkles, tone: "text-fuchsia-500" },
+  ];
+
+  return (
+    <div className={`min-h-[calc(100vh-8rem)] w-full overflow-hidden px-4 py-10 ${mode === "dark" ? "bg-slate-950 text-white" : "bg-slate-50 text-slate-900"}`}>
+      <div className="mx-auto w-full max-w-6xl">
+        <motion.div
+          initial={{ opacity: 0, y: 14 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.45 }}
+          className={`relative overflow-hidden rounded-[2rem] border shadow-2xl ${mode === "dark" ? "border-white/10 bg-white/5 backdrop-blur-xl" : "border-slate-200 bg-white"}`}
+        >
+          <div className="absolute inset-0 opacity-70">
+            <div className="absolute -left-12 top-8 h-40 w-40 rounded-full bg-cyan-400/20 blur-3xl" />
+            <div className="absolute right-0 top-0 h-56 w-56 rounded-full bg-emerald-400/20 blur-3xl" />
+            <div className="absolute bottom-0 left-1/2 h-48 w-48 rounded-full bg-blue-500/10 blur-3xl" />
+          </div>
+
+          <div className="relative bg-gradient-to-r from-blue-600 via-cyan-500 to-emerald-500 px-6 py-8 text-white sm:px-10 sm:py-10">
+            <div className="flex flex-col gap-4 lg:flex-row lg:items-end lg:justify-between">
+              <div>
+                <p className="text-sm uppercase tracking-[0.35em] text-white/80">Account Overview</p>
+                <h1 className="mt-2 text-3xl font-black sm:text-4xl">Your profile dashboard</h1>
+                <p className="mt-3 max-w-2xl text-sm text-white/80 sm:text-base">
+                  Review your profile setup and jump back into tracking without leaving the profile screen.
+                </p>
+              </div>
+
+              <div className="inline-flex w-fit items-center gap-2 rounded-full border border-white/20 bg-white/10 px-4 py-2 text-sm font-medium backdrop-blur">
+                <Clock3 className="h-4 w-4" />
+                Updated today
+              </div>
+            </div>
+          </div>
+
+          <div className="relative grid gap-6 px-6 py-8 sm:px-10 lg:grid-cols-[1.25fr_0.75fr]">
+            <div className={`rounded-[1.75rem] border p-6 shadow-sm ${mode === "dark" ? "border-white/10 bg-slate-900/60" : "border-slate-200 bg-slate-50"}`}>
+              <div className="flex flex-col gap-6 md:flex-row md:items-center md:justify-between">
+                <div className="flex items-center gap-4">
+                  <div className="flex h-20 w-20 items-center justify-center rounded-[1.5rem] bg-gradient-to-br from-blue-600 to-cyan-500 text-3xl font-black text-white shadow-lg shadow-cyan-500/20">
+                    <UserCircle2 className="h-10 w-10" />
+                  </div>
+                  <div>
+                    <div className="flex flex-wrap items-center gap-2">
+                      <h2 className="text-3xl font-extrabold tracking-tight">{profile.username}</h2>
+                      <span className="inline-flex items-center gap-1 rounded-full bg-emerald-500/10 px-3 py-1 text-xs font-semibold text-emerald-500">
+                        <BadgeCheck className="h-3.5 w-3.5" />
+                        {profile.status}
+                      </span>
+                    </div>
+                    <p className={`${mode === "dark" ? "text-slate-300" : "text-slate-600"}`}>
+                      A focused profile page for your GitHub tracking workspace.
+                    </p>
+                  </div>
+                </div>
+
+                <div className={`rounded-2xl border px-4 py-3 ${mode === "dark" ? "border-white/10 bg-white/5" : "border-slate-200 bg-white"}`}>
+                  <p className="text-xs uppercase tracking-[0.2em] text-slate-400">Profile completeness</p>
+                  <div className="mt-2 h-2 w-48 overflow-hidden rounded-full bg-slate-200 dark:bg-slate-800">
+                    <div className="h-full rounded-full bg-gradient-to-r from-blue-600 to-emerald-500" style={{ width: `${profileCompleteness}%` }} />
+                  </div>
+                  <p className="mt-2 text-sm font-semibold">{profileCompleteness}% complete</p>
+                </div>
+              </div>
+
+              <div className="mt-8 grid gap-4 sm:grid-cols-2 xl:grid-cols-3">
+                <div className={`rounded-2xl border p-4 ${mode === "dark" ? "border-white/10 bg-white/5" : "border-slate-200 bg-white"}`}>
+                  <div className="flex items-center gap-2 text-sm font-medium uppercase tracking-wide text-slate-500">
+                    <Mail className="h-4 w-4" />
+                    Email
+                  </div>
+                  <p className="mt-3 break-all text-base font-semibold">{profile.email}</p>
+                </div>
+
+                <div className={`rounded-2xl border p-4 ${mode === "dark" ? "border-white/10 bg-white/5" : "border-slate-200 bg-white"}`}>
+                  <div className="flex items-center gap-2 text-sm font-medium uppercase tracking-wide text-slate-500">
+                    <CalendarDays className="h-4 w-4" />
+                    Joined
+                  </div>
+                  <p className="mt-3 text-base font-semibold">{profile.joined}</p>
+                </div>
+
+                <div className={`rounded-2xl border p-4 ${mode === "dark" ? "border-white/10 bg-white/5" : "border-slate-200 bg-white"}`}>
+                  <div className="flex items-center gap-2 text-sm font-medium uppercase tracking-wide text-slate-500">
+                    <History className="h-4 w-4" />
+                    Account ID
+                  </div>
+                  <p className="mt-3 break-all text-sm font-semibold text-slate-900 dark:text-slate-100">profile</p>
+                </div>
+              </div>
+
+              <div className="mt-8 grid gap-4 md:grid-cols-3">
+                {quickStats.map((stat) => {
+                  const Icon = stat.icon;
+
+                  return (
+                    <div key={stat.label} className={`rounded-2xl border p-4 ${mode === "dark" ? "border-white/10 bg-white/5" : "border-slate-200 bg-white"}`}>
+                      <div className="flex items-center justify-between gap-3">
+                        <div>
+                          <p className="text-xs uppercase tracking-[0.2em] text-slate-400">{stat.label}</p>
+                          <p className="mt-2 text-lg font-bold">{stat.value}</p>
+                        </div>
+                        <Icon className={`h-5 w-5 ${stat.tone}`} />
+                      </div>
+                    </div>
+                  );
+                })}
+              </div>
+
+              <div className="mt-8 flex flex-wrap gap-3">
+                <Link to="/track" className="inline-flex items-center gap-2 rounded-2xl border border-slate-300 bg-transparent px-5 py-3 text-sm font-semibold text-slate-700 transition hover:-translate-y-0.5 hover:bg-slate-100 dark:border-white/15 dark:text-slate-200 dark:hover:bg-white/5">
+                  <ArrowRight className="h-4 w-4" />
+                  Go to tracker
+                </Link>
+              </div>
+            </div>
+
+            <aside className="flex flex-col gap-6">
+              <div className={`rounded-[1.75rem] border p-6 shadow-sm ${mode === "dark" ? "border-white/10 bg-slate-900/60" : "border-slate-200 bg-slate-50"}`}>
+                <div className="flex items-center justify-between gap-3">
+                  <div>
+                    <h3 className="text-lg font-bold">Session summary</h3>
+                    <p className={`mt-1 text-sm ${mode === "dark" ? "text-slate-400" : "text-slate-500"}`}>
+                      A quick overview of this profile page.
+                    </p>
+                  </div>
+                  <div className="rounded-2xl bg-emerald-500/10 p-3 text-emerald-500">
+                    <ShieldCheck className="h-5 w-5" />
+                  </div>
+                </div>
+
+                <dl className="mt-6 space-y-5 text-sm">
+                  <div>
+                    <dt className={`${mode === "dark" ? "text-slate-400" : "text-slate-500"}`}>Session state</dt>
+                    <dd className="mt-1 font-semibold text-emerald-500">Ready</dd>
+                  </div>
+                  <div>
+                    <dt className={`${mode === "dark" ? "text-slate-400" : "text-slate-500"}`}>Username</dt>
+                    <dd className="mt-1 font-semibold">{profile.username}</dd>
+                  </div>
+                  <div>
+                    <dt className={`${mode === "dark" ? "text-slate-400" : "text-slate-500"}`}>Email</dt>
+                    <dd className="mt-1 break-all font-semibold">{profile.email}</dd>
+                  </div>
+                  <div>
+                    <dt className={`${mode === "dark" ? "text-slate-400" : "text-slate-500"}`}>Joined</dt>
+                    <dd className="mt-1 font-semibold">{profile.joined}</dd>
+                  </div>
+                </dl>
+              </div>
+
+              <div className={`rounded-[1.75rem] border p-6 shadow-sm ${mode === "dark" ? "border-white/10 bg-slate-900/60" : "border-slate-200 bg-slate-50"}`}>
+                <h3 className="text-lg font-bold">Next steps</h3>
+                <div className="mt-5 space-y-3 text-sm">
+                  <Link to="/contributors" className="flex items-center justify-between rounded-2xl border border-transparent px-4 py-3 transition hover:border-blue-200 hover:bg-blue-50 dark:hover:border-cyan-500/20 dark:hover:bg-white/5">
+                    <span>
+                      <span className="block font-semibold">Browse contributors</span>
+                      <span className={`block text-xs ${mode === "dark" ? "text-slate-400" : "text-slate-500"}`}>Explore the full contributor directory</span>
+                    </span>
+                    <ArrowRight className="h-4 w-4 text-blue-500" />
+                  </Link>
+                  <Link to="/track" className="flex items-center justify-between rounded-2xl border border-transparent px-4 py-3 transition hover:border-blue-200 hover:bg-blue-50 dark:hover:border-cyan-500/20 dark:hover:bg-white/5">
+                    <span>
+                      <span className="block font-semibold">Open tracker</span>
+                      <span className={`block text-xs ${mode === "dark" ? "text-slate-400" : "text-slate-500"}`}>Jump straight into issue and PR analytics</span>
+                    </span>
+                    <ArrowRight className="h-4 w-4 text-blue-500" />
+                  </Link>
+                </div>
+              </div>
+            </aside>
+          </div>
+        </motion.div>
+      </div>
+    </div>
+  );
+};
+
+export default Profile;
\ No newline at end of file

From 6094af4fbaa2a868beeb914240b84b1cf8e702fd Mon Sep 17 00:00:00 2001
From: arpit2006 <arpitshirbhate25@gmail.com>
Date: Thu, 28 May 2026 17:47:05 +0530
Subject: [PATCH 2/2] Resolved issue as reported by coderabbit

---
 src/Routes/Router.tsx                   |   3 +-
 src/components/Navbar.tsx               | 199 ++++++++++++++++++++++--
 src/components/ProtectedRoute.tsx       |  37 +++++
 src/components/__test__/Navbar.test.tsx |  22 ++-
 src/pages/Login/Login.tsx               |   3 +
 src/pages/Profile/Profile.tsx           | 150 +++++++++++++++---
 6 files changed, 374 insertions(+), 40 deletions(-)
 create mode 100644 src/components/ProtectedRoute.tsx

diff --git a/src/Routes/Router.tsx b/src/Routes/Router.tsx
index c8ca2fc3..9c98f19d 100644
--- a/src/Routes/Router.tsx
+++ b/src/Routes/Router.tsx
@@ -10,6 +10,7 @@ import Home from "../pages/Home/Home.tsx";
 import Activity from "../pages/Activity.tsx"; 
 import PrivacyPolicy from "../pages/Privacy/PrivacyPolicy.tsx"; // ✅ Updated import path to match your new folder structure
 import Profile from "../pages/Profile/Profile.tsx";
+import ProtectedRoute from "../components/ProtectedRoute";
 
 const Router = () => {
   return (
@@ -22,7 +23,7 @@ const Router = () => {
       <Route path="/contact" element={<Contact />} />
       <Route path="/contributors" element={<Contributors />} />
       <Route path="/contributor/:username" element={<ContributorProfile />} />
-      <Route path="/profile" element={<Profile />} />
+      <Route path="/profile" element={<ProtectedRoute><Profile /></ProtectedRoute>} />
       <Route path="/activity" element={<Activity />} />
 
       {/* Privacy Policy page route */}
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
index 526ff561..5fcdd439 100644
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@@ -1,10 +1,169 @@
 import { NavLink, Link } from "react-router-dom";
-import { useState, useContext } from "react";
+import { useEffect, useMemo, useRef, useState, useContext } from "react";
 import { ThemeContext } from "../context/ThemeContext";
-import { Moon, Sun, Menu, X, User } from "lucide-react";
+import { Moon, Sun, Menu, X, ChevronDown, BadgeInfo, LogOut, User } from "lucide-react";
+
+type NavbarUser = {
+  id?: string;
+  username?: string;
+  email?: string;
+};
+
+const AUTH_STORAGE_KEY = "github_tracker_auth_user";
+
+const readStoredUser = (): NavbarUser | null => {
+  if (typeof window === "undefined") {
+    return null;
+  }
+
+  const storedUser = window.localStorage.getItem(AUTH_STORAGE_KEY);
+
+  if (!storedUser) {
+    return null;
+  }
+
+  try {
+    const parsedUser = JSON.parse(storedUser) as NavbarUser;
+    return parsedUser?.username ? parsedUser : null;
+  } catch {
+    return null;
+  }
+};
+
+type ProfileDropdownProps = {
+  user: NavbarUser;
+  onLogout: () => void;
+  onCloseMenu?: () => void;
+  mobile?: boolean;
+};
+
+const ProfileDropdown: React.FC<ProfileDropdownProps> = ({ user, onLogout, onCloseMenu, mobile = false }) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const profileMenuRef = useRef<HTMLDivElement | null>(null);
+  const displayName = useMemo(() => user.username ?? "Profile", [user.username]);
+
+  useEffect(() => {
+    const handleOutsideClick = (event: MouseEvent) => {
+      if (profileMenuRef.current && !profileMenuRef.current.contains(event.target as Node)) {
+        setIsOpen(false);
+      }
+    };
+
+    document.addEventListener("mousedown", handleOutsideClick);
+    return () => document.removeEventListener("mousedown", handleOutsideClick);
+  }, []);
+
+  const closeMenu = () => setIsOpen(false);
+
+  if (mobile) {
+    return (
+      <div className="mt-2 rounded-3xl border border-gray-200 dark:border-gray-800 bg-gray-50 dark:bg-gray-800/60 p-4">
+        <div className="flex items-center gap-3">
+          <div className="flex h-12 w-12 items-center justify-center rounded-2xl bg-gradient-to-br from-blue-600 to-cyan-500 text-white font-semibold">
+            {displayName.charAt(0).toUpperCase()}
+          </div>
+          <div>
+            <p className="font-semibold text-slate-900 dark:text-white">{displayName}</p>
+            <p className="text-sm text-slate-500 dark:text-slate-400">{user.email ?? "Signed in"}</p>
+          </div>
+        </div>
+
+        <div className="mt-4 flex flex-col gap-2">
+          <Link
+            to="/profile"
+            onClick={onCloseMenu}
+            className="flex items-center gap-2 rounded-2xl px-4 py-3 text-sm font-medium text-slate-700 transition hover:bg-white dark:text-slate-200 dark:hover:bg-white/5"
+          >
+            <User className="h-4 w-4" />
+            View Profile
+          </Link>
+          <Link
+            to={user.username ? `/contributor/${user.username}` : "/contributors"}
+            onClick={onCloseMenu}
+            className="flex items-center gap-2 rounded-2xl px-4 py-3 text-sm font-medium text-slate-700 transition hover:bg-white dark:text-slate-200 dark:hover:bg-white/5"
+          >
+            <BadgeInfo className="h-4 w-4" />
+            Account Details
+          </Link>
+          <button
+            onClick={onLogout}
+            className="flex items-center gap-2 rounded-2xl px-4 py-3 text-sm font-medium text-red-600 transition hover:bg-red-50 dark:text-red-300 dark:hover:bg-red-500/10"
+          >
+            <LogOut className="h-4 w-4" />
+            Logout
+          </button>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="relative" ref={profileMenuRef}>
+      <button
+        onClick={() => setIsOpen((prev) => !prev)}
+        className="flex items-center gap-3 rounded-2xl border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800 px-3 py-2 text-left transition hover:border-blue-300 hover:bg-blue-50 dark:hover:bg-gray-700"
+        aria-haspopup="menu"
+        aria-expanded={isOpen}
+      >
+        <span className="flex h-10 w-10 items-center justify-center rounded-2xl bg-gradient-to-br from-blue-600 to-cyan-500 text-white shadow-md">
+          {displayName.charAt(0).toUpperCase()}
+        </span>
+        <span className="hidden xl:block">
+          <span className="block text-sm font-semibold text-slate-900 dark:text-white">{displayName}</span>
+          <span className="block text-xs text-slate-500 dark:text-slate-400">Signed in</span>
+        </span>
+        <ChevronDown className={`h-4 w-4 text-slate-500 transition-transform ${isOpen ? "rotate-180" : ""}`} />
+      </button>
+
+      {isOpen && (
+        <div className="absolute right-0 mt-3 w-72 overflow-hidden rounded-3xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 shadow-2xl animate-in fade-in slide-in-from-top-2 duration-200">
+          <div className="px-5 py-4 border-b border-gray-100 dark:border-gray-800">
+            <p className="text-xs uppercase tracking-[0.2em] text-slate-400">Account</p>
+            <div className="mt-2 flex items-center gap-3">
+              <div className="flex h-12 w-12 items-center justify-center rounded-2xl bg-gradient-to-br from-blue-600 to-cyan-500 text-white font-semibold">
+                {displayName.charAt(0).toUpperCase()}
+              </div>
+              <div>
+                <p className="font-semibold text-slate-900 dark:text-white">{displayName}</p>
+                <p className="text-sm text-slate-500 dark:text-slate-400">{user.email ?? "No email available"}</p>
+              </div>
+            </div>
+          </div>
+
+          <div className="p-2">
+            <Link
+              to="/profile"
+              onClick={closeMenu}
+              className="flex items-center gap-3 rounded-2xl px-4 py-3 text-sm font-medium text-slate-700 transition hover:bg-blue-50 hover:text-blue-700 dark:text-slate-300 dark:hover:bg-white/5 dark:hover:text-cyan-300"
+            >
+              <User className="h-4 w-4" />
+              View Profile
+            </Link>
+            <Link
+              to={user.username ? `/contributor/${user.username}` : "/contributors"}
+              onClick={closeMenu}
+              className="flex items-center gap-3 rounded-2xl px-4 py-3 text-sm font-medium text-slate-700 transition hover:bg-blue-50 hover:text-blue-700 dark:text-slate-300 dark:hover:bg-white/5 dark:hover:text-cyan-300"
+            >
+              <BadgeInfo className="h-4 w-4" />
+              Account Details
+            </Link>
+            <button
+              onClick={onLogout}
+              className="flex w-full items-center gap-3 rounded-2xl px-4 py-3 text-sm font-medium text-red-600 transition hover:bg-red-50 dark:text-red-300 dark:hover:bg-red-500/10"
+            >
+              <LogOut className="h-4 w-4" />
+              Logout
+            </button>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
 
 const Navbar: React.FC = () => {
   const [isOpen, setIsOpen] = useState(false);
+  const [user, setUser] = useState<NavbarUser | null>(() => readStoredUser());
 
   const themeContext = useContext(ThemeContext);
 
@@ -20,6 +179,13 @@ const Navbar: React.FC = () => {
     }`;
 
   const closeMenu = () => setIsOpen(false);
+  const handleLogout = () => {
+    if (typeof window !== "undefined") {
+      window.localStorage.removeItem(AUTH_STORAGE_KEY);
+    }
+    setUser(null);
+    closeMenu();
+  };
 
   return (
     <nav className="sticky top-0 z-50 bg-white dark:bg-gray-900 border-b border-gray-200 dark:border-gray-800 transition-colors duration-300 backdrop-blur">
@@ -42,12 +208,15 @@ const Navbar: React.FC = () => {
           <NavLink to="/contributors" className={navLinkStyles}>
             Contributors
           </NavLink>
-          <NavLink to="/profile" className={navLinkStyles}>
-            Profile
-          </NavLink>
-          <NavLink to="/login" className={navLinkStyles}>
-            Login
-          </NavLink>
+
+          {user ? (
+            <ProfileDropdown user={user} onLogout={handleLogout} />
+          ) : (
+            <NavLink to="/login" className={navLinkStyles}>
+              Login
+            </NavLink>
+          )}
+
           <button
             onClick={toggleTheme}
             className="ml-2 p-2 rounded-xl border border-gray-300 dark:border-gray-700 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
@@ -99,12 +268,14 @@ const Navbar: React.FC = () => {
             <NavLink to="/contributors" className={navLinkStyles} onClick={closeMenu}>
               Contributors
             </NavLink>
-            <NavLink to="/profile" className={navLinkStyles} onClick={closeMenu}>
-              <span className="inline-flex items-center gap-2"><User className="h-4 w-4" />Profile</span>
-            </NavLink>
-            <NavLink to="/login" className={navLinkStyles} onClick={closeMenu}>
-              Login
-            </NavLink>
+
+            {user ? (
+              <ProfileDropdown user={user} onLogout={handleLogout} onCloseMenu={closeMenu} mobile />
+            ) : (
+              <NavLink to="/login" className={navLinkStyles} onClick={closeMenu}>
+                Login
+              </NavLink>
+            )}
           </div>
         </div>
       )}
diff --git a/src/components/ProtectedRoute.tsx b/src/components/ProtectedRoute.tsx
new file mode 100644
index 00000000..94bca049
--- /dev/null
+++ b/src/components/ProtectedRoute.tsx
@@ -0,0 +1,37 @@
+import type { ReactNode } from "react";
+import { Navigate } from "react-router-dom";
+
+type ProtectedRouteProps = {
+  children: ReactNode;
+};
+
+const AUTH_STORAGE_KEY = "github_tracker_auth_user";
+
+const ProtectedRoute = ({ children }: ProtectedRouteProps) => {
+  const isAuthenticated = (() => {
+    if (typeof window === "undefined") {
+      return false;
+    }
+
+    const storedUser = window.localStorage.getItem(AUTH_STORAGE_KEY);
+
+    if (!storedUser) {
+      return false;
+    }
+
+    try {
+      const parsedUser = JSON.parse(storedUser) as { username?: string; email?: string };
+      return Boolean(parsedUser?.username && parsedUser?.email);
+    } catch {
+      return false;
+    }
+  })();
+
+  if (!isAuthenticated) {
+    return <Navigate to="/login" replace />;
+  }
+
+  return <>{children}</>;
+};
+
+export default ProtectedRoute;
\ No newline at end of file
diff --git a/src/components/__test__/Navbar.test.tsx b/src/components/__test__/Navbar.test.tsx
index 780b9bb3..a06862df 100644
--- a/src/components/__test__/Navbar.test.tsx
+++ b/src/components/__test__/Navbar.test.tsx
@@ -19,6 +19,10 @@ const renderNavbar = (mode: 'light' | 'dark' = 'light') => {
 }
 
 describe('Navbar', () => {
+  beforeEach(() => {
+    window.localStorage.clear()
+  })
+
   // --- Rendering ---
   it('renders the GitHub Tracker logo link', () => {
     renderNavbar()
@@ -33,6 +37,15 @@ describe('Navbar', () => {
     expect(screen.getByRole('link', { name: /login/i })).toBeInTheDocument()
   })
 
+  it('shows profile dropdown trigger when a user is stored', () => {
+    window.localStorage.setItem('github_tracker_auth_user', JSON.stringify({ username: 'testuser', email: 'test@example.com' }))
+
+    renderNavbar()
+
+    expect(screen.queryByRole('link', { name: /login/i })).not.toBeInTheDocument()
+    expect(screen.getByRole('button', { name: /testuser/i })).toBeInTheDocument()
+  })
+
   // --- Theme toggle ---
   it('shows Moon icon in light mode', () => {
     renderNavbar('light')
@@ -58,8 +71,8 @@ describe('Navbar', () => {
     renderNavbar()
     const hamburger = screen.getAllByRole('button')[1] // second button = hamburger
     fireEvent.click(hamburger)
-    expect(screen.getByText('About')).toBeInTheDocument()
-    expect(screen.getByText('Contact')).toBeInTheDocument()
+    expect(screen.getByRole('link', { name: /login/i })).toBeInTheDocument()
+    expect(screen.getByRole('link', { name: /contributors/i })).toBeInTheDocument()
   })
 
   it('closes mobile menu when a nav link is clicked', () => {
@@ -73,9 +86,8 @@ describe('Navbar', () => {
 
   it('calls toggleTheme from the mobile menu button', () => {
     const { toggleTheme } = renderNavbar('dark')
-    const hamburger = screen.getAllByRole('button')[1]
-    fireEvent.click(hamburger)
-    fireEvent.click(screen.getByText(/light/i))
+    const themeBtn = screen.getAllByRole('button')[0]
+    fireEvent.click(themeBtn)
     expect(toggleTheme).toHaveBeenCalledTimes(1)
   })
 
diff --git a/src/pages/Login/Login.tsx b/src/pages/Login/Login.tsx
index 92b7073e..516f44b1 100644
--- a/src/pages/Login/Login.tsx
+++ b/src/pages/Login/Login.tsx
@@ -34,6 +34,9 @@ const Login: React.FC = () => {
       setMessage(response.data.message);
 
       if (response.data.message === 'Login successful') {
+        if (typeof window !== "undefined" && response.data.user) {
+          window.localStorage.setItem("github_tracker_auth_user", JSON.stringify(response.data.user));
+        }
         navigate("/");
       }
     } catch (error: unknown) {
diff --git a/src/pages/Profile/Profile.tsx b/src/pages/Profile/Profile.tsx
index 2b4ec14c..87f8b540 100644
--- a/src/pages/Profile/Profile.tsx
+++ b/src/pages/Profile/Profile.tsx
@@ -1,30 +1,134 @@
-import { useContext } from "react";
-import { Link } from "react-router-dom";
+import { useContext, useEffect, useMemo, useState } from "react";
+import { Link, useNavigate } from "react-router-dom";
 import { ArrowRight, BadgeCheck, CalendarDays, Clock3, History, Mail, ShieldCheck, Sparkles, UserCircle2 } from "lucide-react";
 import { motion } from "framer-motion";
 import { ThemeContext } from "../../context/ThemeContext";
 
+type ProfileUser = {
+  id?: string;
+  username?: string;
+  email?: string;
+  createdAt?: string;
+  updatedAt?: string;
+  status?: string;
+  emailVerified?: boolean;
+  avatarUrl?: string;
+  bio?: string;
+  phone?: string;
+  socialLinks?: Record<string, string | undefined>;
+};
+
+const AUTH_STORAGE_KEY = "github_tracker_auth_user";
+
+const calculateProfileCompleteness = (profile: ProfileUser | null) => {
+  const checks = [
+    { weight: 15, value: profile?.username },
+    { weight: 15, value: profile?.email },
+    { weight: 10, value: profile?.id },
+    { weight: 10, value: profile?.createdAt },
+    { weight: 5, value: profile?.updatedAt },
+    { weight: 10, value: profile?.emailVerified === true },
+    { weight: 10, value: profile?.avatarUrl },
+    { weight: 10, value: profile?.bio },
+    { weight: 10, value: profile?.phone },
+    {
+      weight: 5,
+      value: profile?.socialLinks && Object.values(profile.socialLinks).some(Boolean),
+    },
+  ];
+
+  const totalWeight = checks.reduce((sum, check) => sum + check.weight, 0);
+  const earnedWeight = checks.reduce(
+    (sum, check) => sum + (check.value ? check.weight : 0),
+    0
+  );
+
+  return totalWeight === 0 ? 0 : Math.round((earnedWeight / totalWeight) * 100);
+};
+
 const Profile = () => {
   const themeContext = useContext(ThemeContext);
+  const navigate = useNavigate();
+  const [user, setUser] = useState<ProfileUser | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState("");
+
   if (!themeContext) return null;
 
   const { mode } = themeContext;
 
-  const profile = {
-    username: "Profile",
-    email: "profile@githubtracker.dev",
-    joined: "Always available",
-    status: "Active",
-  };
+  useEffect(() => {
+    if (typeof window === "undefined") {
+      return;
+    }
+
+    const storedUser = window.localStorage.getItem(AUTH_STORAGE_KEY);
+
+    if (!storedUser) {
+      navigate("/login", { replace: true });
+      return;
+    }
 
-  const profileCompleteness = 100;
+    try {
+      const parsedUser = JSON.parse(storedUser) as ProfileUser;
+
+      if (!parsedUser?.username || !parsedUser?.email) {
+        navigate("/login", { replace: true });
+        return;
+      }
+
+      setUser(parsedUser);
+    } catch {
+      setError("Unable to read your profile data.");
+    } finally {
+      setLoading(false);
+    }
+  }, [navigate]);
+
+  const joinedDate = useMemo(() => {
+    if (user?.createdAt) {
+      return new Date(user.createdAt).toLocaleDateString(undefined, {
+        year: "numeric",
+        month: "short",
+        day: "numeric",
+      });
+    }
+
+    return "Unavailable";
+  }, [user?.createdAt]);
+
+  const profileCompleteness = calculateProfileCompleteness(user);
+
+  const handleLogout = () => {
+    if (typeof window !== "undefined") {
+      window.localStorage.removeItem(AUTH_STORAGE_KEY);
+    }
+
+    navigate("/login", { replace: true });
+  };
 
   const quickStats = [
-    { label: "Account status", value: "Active", icon: BadgeCheck, tone: "text-emerald-500" },
+    { label: "Account status", value: user?.status ?? "Active", icon: BadgeCheck, tone: "text-emerald-500" },
     { label: "Session", value: "Secure", icon: ShieldCheck, tone: "text-cyan-500" },
     { label: "Profile score", value: `${profileCompleteness}%`, icon: Sparkles, tone: "text-fuchsia-500" },
   ];
 
+  if (loading) {
+    return (
+      <div className={`w-full px-4 py-20 text-center ${mode === "dark" ? "text-slate-300" : "text-slate-600"}`}>
+        Loading profile...
+      </div>
+    );
+  }
+
+  if (error) {
+    return <div className="w-full px-4 py-20 text-center text-red-600 dark:text-red-300">{error}</div>;
+  }
+
+  if (!user) {
+    return null;
+  }
+
   return (
     <div className={`min-h-[calc(100vh-8rem)] w-full overflow-hidden px-4 py-10 ${mode === "dark" ? "bg-slate-950 text-white" : "bg-slate-50 text-slate-900"}`}>
       <div className="mx-auto w-full max-w-6xl">
@@ -52,7 +156,7 @@ const Profile = () => {
 
               <div className="inline-flex w-fit items-center gap-2 rounded-full border border-white/20 bg-white/10 px-4 py-2 text-sm font-medium backdrop-blur">
                 <Clock3 className="h-4 w-4" />
-                Updated today
+                Updated {joinedDate}
               </div>
             </div>
           </div>
@@ -66,10 +170,10 @@ const Profile = () => {
                   </div>
                   <div>
                     <div className="flex flex-wrap items-center gap-2">
-                      <h2 className="text-3xl font-extrabold tracking-tight">{profile.username}</h2>
+                      <h2 className="text-3xl font-extrabold tracking-tight">{user.username}</h2>
                       <span className="inline-flex items-center gap-1 rounded-full bg-emerald-500/10 px-3 py-1 text-xs font-semibold text-emerald-500">
                         <BadgeCheck className="h-3.5 w-3.5" />
-                        {profile.status}
+                        {user.status ?? "Active"}
                       </span>
                     </div>
                     <p className={`${mode === "dark" ? "text-slate-300" : "text-slate-600"}`}>
@@ -93,7 +197,7 @@ const Profile = () => {
                     <Mail className="h-4 w-4" />
                     Email
                   </div>
-                  <p className="mt-3 break-all text-base font-semibold">{profile.email}</p>
+                  <p className="mt-3 break-all text-base font-semibold">{user.email}</p>
                 </div>
 
                 <div className={`rounded-2xl border p-4 ${mode === "dark" ? "border-white/10 bg-white/5" : "border-slate-200 bg-white"}`}>
@@ -101,7 +205,7 @@ const Profile = () => {
                     <CalendarDays className="h-4 w-4" />
                     Joined
                   </div>
-                  <p className="mt-3 text-base font-semibold">{profile.joined}</p>
+                  <p className="mt-3 text-base font-semibold">{joinedDate}</p>
                 </div>
 
                 <div className={`rounded-2xl border p-4 ${mode === "dark" ? "border-white/10 bg-white/5" : "border-slate-200 bg-white"}`}>
@@ -109,7 +213,7 @@ const Profile = () => {
                     <History className="h-4 w-4" />
                     Account ID
                   </div>
-                  <p className="mt-3 break-all text-sm font-semibold text-slate-900 dark:text-slate-100">profile</p>
+                  <p className="mt-3 break-all text-sm font-semibold text-slate-900 dark:text-slate-100">{user.id ?? user.username ?? "Unknown ID"}</p>
                 </div>
               </div>
 
@@ -136,6 +240,12 @@ const Profile = () => {
                   <ArrowRight className="h-4 w-4" />
                   Go to tracker
                 </Link>
+                <button
+                  onClick={handleLogout}
+                  className="inline-flex items-center gap-2 rounded-2xl border border-red-200 bg-red-50 px-5 py-3 text-sm font-semibold text-red-700 transition hover:-translate-y-0.5 hover:bg-red-100 dark:border-red-500/30 dark:bg-red-500/10 dark:text-red-300 dark:hover:bg-red-500/20"
+                >
+                  Logout
+                </button>
               </div>
             </div>
 
@@ -156,19 +266,19 @@ const Profile = () => {
                 <dl className="mt-6 space-y-5 text-sm">
                   <div>
                     <dt className={`${mode === "dark" ? "text-slate-400" : "text-slate-500"}`}>Session state</dt>
-                    <dd className="mt-1 font-semibold text-emerald-500">Ready</dd>
+                    <dd className="mt-1 font-semibold text-emerald-500">{user.status ?? "Ready"}</dd>
                   </div>
                   <div>
                     <dt className={`${mode === "dark" ? "text-slate-400" : "text-slate-500"}`}>Username</dt>
-                    <dd className="mt-1 font-semibold">{profile.username}</dd>
+                    <dd className="mt-1 font-semibold">{user.username}</dd>
                   </div>
                   <div>
                     <dt className={`${mode === "dark" ? "text-slate-400" : "text-slate-500"}`}>Email</dt>
-                    <dd className="mt-1 break-all font-semibold">{profile.email}</dd>
+                    <dd className="mt-1 break-all font-semibold">{user.email}</dd>
                   </div>
                   <div>
                     <dt className={`${mode === "dark" ? "text-slate-400" : "text-slate-500"}`}>Joined</dt>
-                    <dd className="mt-1 font-semibold">{profile.joined}</dd>
+                    <dd className="mt-1 font-semibold">{joinedDate}</dd>
                   </div>
                 </dl>
               </div>