diff --git a/backend/package.json b/backend/package.json
index 9891c08..00102e3 100644
--- a/backend/package.json
+++ b/backend/package.json
@@ -18,6 +18,7 @@
     "dotenv": "^16.4.5",
     "express": "^4.21.1",
     "express-session": "^1.18.1",
+    "jsonwebtoken": "^9.0.2",
     "mongoose": "^8.8.2",
     "passport": "^0.7.0",
     "passport-local": "^1.0.0"
diff --git a/backend/routes/auth.js b/backend/routes/auth.js
index e26c7a9..bb4246a 100644
--- a/backend/routes/auth.js
+++ b/backend/routes/auth.js
@@ -2,6 +2,7 @@ const express = require("express");
 const passport = require("passport");
 const User = require("../models/User");
 const router = express.Router();
+const jwt = require("jsonwebtoken");
 
 // Signup route
 router.post("/signup", async (req, res) => {
@@ -23,9 +24,16 @@ router.post("/signup", async (req, res) => {
 });
 
 // Login route
-router.post("/login", passport.authenticate('local'), (req, res) => {
-    res.status(200).json( { message: 'Login successful', user: req.user } );
-});
+router.post("/login", passport.authenticate("local", { session: false }), (req, res) => {
+    try {
+        const user = req.user;
+        const token = jwt.sign({ id: user.id }, process.env.SESSION_SECRET, { expiresIn: "1d" });
+        res.status(200).json({ message: "Login successful", token, user });
+    } catch (error) {
+        res.status(500).json({ message: "Login failed", error: error.message });
+    }
+}
+);
 
 // Logout route
 router.get("/logout", (req, res) => {
@@ -39,4 +47,62 @@ router.get("/logout", (req, res) => {
     });
 });
 
+// ---------------- AUTH MIDDLEWARE ----------------
+function requireAuth(req, res, next) {
+    const authHeader = req.headers.authorization;
+    if (!authHeader || !authHeader.startsWith("Bearer ")) {
+        return res.status(401).json({ message: "Missing or invalid token" });
+    }
+
+    const token = authHeader.split(" ")[1];
+    try {
+        const decoded = jwt.verify(token, process.env.SESSION_SECRET);
+        req.userId = decoded.id;
+        next();
+    } catch (err) {
+        return res.status(401).json({ message: "Invalid or expired token" });
+    }
+}
+
+// ---------------- GET PROFILE ----------------
+router.get("/profile", requireAuth, async (req, res) => {
+    try {
+        const user = await User.findById(req.userId).select("-password");
+        if (!user) return res.status(404).json({ message: "User not found" });
+        res.status(200).json({ user });
+    } catch (err) {
+        res.status(500).json({ message: "Error fetching profile", error: err.message });
+    }
+});
+
+// ---------------- EDIT PROFILE ----------------
+router.put("/profile", requireAuth, async (req, res) => {
+    try {
+        const updates = {};
+        const { username, email, bio, avatar, newPassword } = req.body;
+
+        if (username !== undefined) updates.username = username;
+        if (email !== undefined) updates.email = email;
+        if (bio !== undefined) updates.bio = bio;
+        if (avatar !== undefined) updates.avatar = avatar;
+
+        // Handle password update if newPassword is provided
+        if (newPassword !== undefined && newPassword.trim().length > 0) {
+            // Password will be hashed by the User model's pre-save hook
+            updates.password = newPassword;
+        }
+
+        const user = await User.findByIdAndUpdate(req.userId, updates, {
+            new: true,
+            runValidators: true,
+            select: "-password",
+        });
+
+        if (!user) return res.status(404).json({ message: "User not found" });
+
+        res.status(200).json({ message: "Profile updated successfully", user });
+    } catch (err) {
+        res.status(500).json({ message: "Error updating profile", error: err.message });
+    }
+});
 module.exports = router;
diff --git a/lib/api.ts b/lib/api.ts
new file mode 100644
index 0000000..5b6f7a5
--- /dev/null
+++ b/lib/api.ts
@@ -0,0 +1,25 @@
+/// <reference types="vite/client" />
+// src/services/api.ts
+import axios from "axios";
+
+// Backend base URL from .env
+const backendUrl = import.meta.env.VITE_BACKEND_URL;
+
+const api = axios.create({
+  baseURL: backendUrl,
+  headers: { "Content-Type": "application/json" },
+});
+
+//  Interceptor to attach token from localStorage
+api.interceptors.request.use(
+  (config) => {
+    const token = localStorage.getItem("token");
+    if (token) {
+      config.headers.Authorization = `Bearer ${token}`;
+    }
+    return config;
+  },
+  (error) => Promise.reject(error)
+);
+
+export default api;
diff --git a/public/profile.svg b/public/profile.svg
new file mode 100644
index 0000000..17efa4c
--- /dev/null
+++ b/public/profile.svg
@@ -0,0 +1 @@
+<svg fill="#000000" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 45.532 45.532" xml:space="preserve"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <g> <path d="M22.766,0.001C10.194,0.001,0,10.193,0,22.766s10.193,22.765,22.766,22.765c12.574,0,22.766-10.192,22.766-22.765 S35.34,0.001,22.766,0.001z M22.766,6.808c4.16,0,7.531,3.372,7.531,7.53c0,4.159-3.371,7.53-7.531,7.53 c-4.158,0-7.529-3.371-7.529-7.53C15.237,10.18,18.608,6.808,22.766,6.808z M22.761,39.579c-4.149,0-7.949-1.511-10.88-4.012 c-0.714-0.609-1.126-1.502-1.126-2.439c0-4.217,3.413-7.592,7.631-7.592h8.762c4.219,0,7.619,3.375,7.619,7.592 c0,0.938-0.41,1.829-1.125,2.438C30.712,38.068,26.911,39.579,22.761,39.579z"></path> </g> </g></svg>
\ No newline at end of file
diff --git a/src/Routes/Router.tsx b/src/Routes/Router.tsx
index 40a7861..62e447f 100644
--- a/src/Routes/Router.tsx
+++ b/src/Routes/Router.tsx
@@ -1,4 +1,5 @@
-import { Routes, Route } from "react-router-dom";
+import { Routes, Route, useNavigate } from "react-router-dom";
+import { useEffect, useState } from "react";
 import Tracker from "../pages/Tracker/Tracker.tsx";
 import About from "../pages/About/About";
 import Contact from "../pages/Contact/Contact";
@@ -7,8 +8,23 @@ import Signup from "../pages/Signup/Signup.tsx";
 import Login from "../pages/Login/Login.tsx";
 import ContributorProfile from "../pages/ContributorProfile/ContributorProfile.tsx";
 import Home from "../pages/Home/Home.tsx";
+import Profile from "../pages/Profile/Profile.tsx";
+import ProtectedRoute from "../components/ProtectedRoute.tsx";
+import EditProfile from "../pages/Editprofile/EditProfile.tsx";
 
 const Router = () => {
+  const [isAuthenticated, setIsAuthenticated] = useState(
+    !!localStorage.getItem("token")
+  );
+  useEffect(() => {
+    const syncAuth = () => setIsAuthenticated(!!localStorage.getItem("token"));
+    window.addEventListener("authChange", syncAuth);
+    window.addEventListener("storage", syncAuth);
+    return () => {
+      window.removeEventListener("authChange", syncAuth);
+      window.removeEventListener("storage", syncAuth);
+    };
+  }, []);
   return (
     <Routes>
       <Route path="/" element={<Home />} />
@@ -19,6 +35,23 @@ const Router = () => {
       <Route path="/contact" element={<Contact />} />
       <Route path="/contributors" element={<Contributors />} />
       <Route path="/contributor/:username" element={<ContributorProfile />} />
+      {/*  Protected route */}
+      <Route
+        path="/profile"
+        element={
+          <ProtectedRoute isAuthenticated={isAuthenticated}>
+            <Profile />
+          </ProtectedRoute>
+        }
+      />
+      <Route
+        path="/profile/edit"
+        element={
+          <ProtectedRoute isAuthenticated={isAuthenticated}>
+            <EditProfile />
+          </ProtectedRoute>
+        }
+      />
     </Routes>
   );
 };
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
index c6cc86d..d16a8f3 100644
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@@ -1,11 +1,57 @@
-import { Link } from "react-router-dom";
-import { useState, useContext } from "react";
+import { Link, useNavigate, useLocation } from "react-router-dom";
+import { useState, useContext, useEffect } from "react";
 import { ThemeContext } from "../context/ThemeContext";
-import { Moon, Sun } from 'lucide-react';
-
+import { Moon, Sun } from "lucide-react";
+import { useRef } from "react";
 
 const Navbar: React.FC = () => {
+  const navigate = useNavigate();
+  const location = useLocation();
+
+  const [menuOpen, setMenuOpen] = useState(false);
+  const menuRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const onClick = (e: MouseEvent) => {
+      if (menuRef.current && !menuRef.current.contains(e.target as Node))
+        setMenuOpen(false);
+    };
+
+    const onStorage = (e: StorageEvent) => {
+      if (e.key === "token") setIsAuthed(!!e.newValue);
+    };
+
+    const onAuthChange = () => {
+      setIsAuthed(!!localStorage.getItem("token"));
+    };
+
+    window.addEventListener("storage", onStorage);
+    window.addEventListener("authChange", onAuthChange);
+    window.addEventListener("click", onClick);
+    return () => {
+      window.removeEventListener("storage", onStorage);
+      window.removeEventListener("authChange", onAuthChange);
+      window.removeEventListener("click", onClick);
+    };
+  }, []);
+
+  useEffect(() => {
+    setIsOpen(false); // close mobile menu on navigation
+  }, [location.pathname]);
+
+  const handleLogout = () => {
+    localStorage.removeItem("token");
+    localStorage.removeItem("user");
+    setIsAuthed(false);
+    setUser(null);
+    // notify same-tab listeners
+    window.dispatchEvent(new Event("authChange"));
+    navigate("/login");
+  };
 
+  const [isAuthed, setIsAuthed] = useState<boolean>(
+    !!localStorage.getItem("token")
+  );
   const [isOpen, setIsOpen] = useState<boolean>(false);
   const themeContext = useContext(ThemeContext);
 
@@ -46,12 +92,97 @@ const Navbar: React.FC = () => {
           >
             Contributors
           </Link>
-          <Link
-            to="/login"
-            className="text-lg font-medium hover:text-gray-300 transition-all px-2 py-1 border border-transparent hover:border-gray-400 rounded"
-          >
-            Login
-          </Link>
+          {/* replace your auth block with this */}
+          {isAuthed ? (
+            <div className="relative" ref={menuRef}>
+              <button
+                onClick={() => setMenuOpen((v) => !v)}
+                className="flex items-center gap-2 px-2 py-1 rounded hover:bg-gray-100 dark:hover:bg-gray-800 transition"
+                aria-haspopup="menu"
+                aria-expanded={menuOpen}
+              >
+                {/* Avatar Icon */}
+                <img
+                  src={
+                    JSON.parse(localStorage.getItem("user") || "{}")
+                      ?.avatarUrl || "/profile.svg"
+                  }
+                  alt="avatar"
+                  className="h-8 w-8 rounded-full object-cover border border-gray-300 dark:border-gray-600"
+                />
+
+                {/* Username beside icon */}
+                {/* <span className="text-sm font-medium">
+                  {JSON.parse(localStorage.getItem("user") || "{}")?.username ||
+                    "Me"}
+                </span> */}
+
+                {/* Chevron icon */}
+                <svg
+                  className={`h-4 w-4 transition-transform ${
+                    menuOpen ? "rotate-180" : ""
+                  }`}
+                  viewBox="0 0 20 20"
+                  fill="currentColor"
+                >
+                  <path d="M5.25 7.5L10 12.25L14.75 7.5H5.25Z" />
+                </svg>
+              </button>
+
+              {/* Dropdown Menu */}
+              {menuOpen && (
+                <div
+                  role="menu"
+                  className="absolute right-0 mt-2 w-56 rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 shadow-lg p-2"
+                >
+                  {/* User Info */}
+                  <div className="px-3 py-2 border-b border-gray-100 dark:border-gray-700">
+                    <p className="text-sm font-semibold text-gray-900 dark:text-gray-100">
+                      {JSON.parse(localStorage.getItem("user") || "{}")
+                        ?.username || "User"}
+                    </p>
+                    <p className="text-xs text-gray-500 dark:text-gray-400 truncate">
+                      {JSON.parse(localStorage.getItem("user") || "{}")
+                        ?.email || "email@example.com"}
+                    </p>
+                  </div>
+
+                  {/* Menu Links */}
+                  <Link
+                    to="/profile"
+                    className="block px-3 py-2 text-sm rounded hover:bg-gray-100 dark:hover:bg-gray-700"
+                    onClick={() => setMenuOpen(false)}
+                  >
+                    View Profile
+                  </Link>
+                  <Link
+                    to="/profile/edit"
+                    className="block px-3 py-2 text-sm rounded hover:bg-gray-100 dark:hover:bg-gray-700"
+                    onClick={() => setMenuOpen(false)}
+                  >
+                    Edit Profile
+                  </Link>
+                  <button
+                    onClick={() => {
+                      setMenuOpen(false);
+                      handleLogout();
+                    }}
+                    className="block w-full text-left px-3 py-2 text-sm rounded hover:bg-gray-100 dark:hover:bg-gray-700"
+                  >
+                    Logout
+                  </button>
+                </div>
+              )}
+            </div>
+          ) : (
+            <Link
+              to="/login"
+              className="text-lg font-medium hover:text-gray-300 transition-all px-2 py-1 border border-transparent hover:border-gray-400 rounded"
+            >
+              Login
+            </Link>
+          )}
+
           <button
             onClick={toggleTheme}
             className="text-sm font-semibold px-3 py-1 rounded border border-gray-500 hover:text-gray-300 hover:border-gray-300 transition duration-200"
@@ -117,13 +248,33 @@ const Navbar: React.FC = () => {
             >
               Contributors
             </Link>
-            <Link
-              to="/login"
-              className="block text-lg font-medium hover:text-gray-300 transition-all px-2 py-1 border border-transparent hover:border-gray-400 rounded"
-              onClick={() => setIsOpen(false)}
-            >
-              Login
-            </Link>
+            {isAuthed ? (
+              <>
+                <Link
+                  to="/profile"
+                  className="block text-lg font-medium hover:text-gray-300 transition-all px-2 py-1 border border-transparent hover:border-gray-400 rounded"
+                  onClick={() => setIsOpen(false)}
+                >
+                  Profile
+                </Link>
+                <button
+                  onClick={() => {
+                    handleLogout();
+                  }}
+                  className="block text-left text-lg font-medium px-2 py-1 border border-transparent hover:border-gray-400 rounded w-full"
+                >
+                  Logout
+                </button>
+              </>
+            ) : (
+              <Link
+                to="/login"
+                className="block text-lg font-medium hover:text-gray-300 transition-all px-2 py-1 border border-transparent hover:border-gray-400 rounded"
+                onClick={() => setIsOpen(false)}
+              >
+                Login
+              </Link>
+            )}
             <button
               onClick={() => {
                 toggleTheme();
diff --git a/src/components/ProtectedRoute.tsx b/src/components/ProtectedRoute.tsx
new file mode 100644
index 0000000..5bd8808
--- /dev/null
+++ b/src/components/ProtectedRoute.tsx
@@ -0,0 +1,18 @@
+import { Navigate } from "react-router-dom";
+import { ReactNode } from "react";
+
+interface ProtectedRouteProps {
+  children: ReactNode;
+  isAuthenticated: boolean;
+}
+
+const ProtectedRoute = ({ children, isAuthenticated }: ProtectedRouteProps) => {
+  if (!isAuthenticated) {
+    // Redirect to login page if user is not authenticated
+    return <Navigate to="/login" replace />;
+  }
+
+  return <>{children}</>;
+};
+
+export default ProtectedRoute;
diff --git a/src/pages/Editprofile/EditProfile.tsx b/src/pages/Editprofile/EditProfile.tsx
new file mode 100644
index 0000000..df454bc
--- /dev/null
+++ b/src/pages/Editprofile/EditProfile.tsx
@@ -0,0 +1,218 @@
+import React, { useEffect, useMemo, useState } from "react";
+import api from "../../../lib/api";
+
+interface UserProfile {
+  username?: string;
+  email?: string;
+  password?: string;
+  newPassword?: string;
+}
+
+const EMAIL_RE = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+
+export default function EditProfile() {
+  const [form, setForm] = useState<UserProfile>({
+    username: "",
+    email: "",
+    password: "",
+    newPassword: "",
+  });
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [success, setSuccess] = useState<string | null>(null);
+  const [isDark, setIsDark] = useState(false);
+  const [changePassword, setChangePassword] = useState(false);
+
+  useEffect(() => {
+    const stored = localStorage.getItem("theme");
+    const dark = stored === "dark";
+    setIsDark(dark);
+    const root = document.documentElement;
+    if (dark) root.classList.add("dark");
+    else root.classList.remove("dark");
+  }, []);
+
+  useEffect(() => {
+    const fetchProfile = async () => {
+      try {
+        const res = await api.get("/api/auth/profile");
+        const user: UserProfile = res.data.user;
+        setForm({
+          username: user?.username || "",
+          email: user?.email || "",
+          password: "",
+          newPassword: "",
+        });
+      } catch (err: any) {
+        setError(err.response?.data?.message || "Failed to load profile");
+      } finally {
+        setLoading(false);
+      }
+    };
+    fetchProfile();
+  }, []);
+
+  const isValid = useMemo(() => {
+    if (!form.username || form.username.trim().length < 3) return false;
+    if (form.email && !EMAIL_RE.test(form.email)) return false;
+    if (!form.password || form.password.trim().length < 1) return false;
+    if (changePassword && form.newPassword && form.newPassword.length < 6)
+      return false;
+    return true;
+  }, [form, changePassword]);
+
+  const onChange =
+    (key: keyof UserProfile) => (e: React.ChangeEvent<HTMLInputElement>) => {
+      setForm((f) => ({ ...f, [key]: e.target.value }));
+    };
+
+  const onSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!isValid) return;
+    setLoading(true);
+    setError(null);
+    setSuccess(null);
+    try {
+      const payload: UserProfile = {
+        username: form.username?.trim(),
+        email: form.email?.trim(),
+        password: form.password?.trim(),
+      };
+
+      if (changePassword && form.newPassword) {
+        payload.newPassword = form.newPassword.trim();
+      }
+
+      const { data } = await api.put("/profile", payload);
+      const updated: UserProfile = data?.user || payload;
+      setForm((f) => ({ ...f, ...updated, password: "", newPassword: "" }));
+      setSuccess(data?.message || "Profile updated successfully");
+    } catch (e: any) {
+      const msg =
+        e?.response?.data?.message || e?.message || "Error updating profile";
+      setError(msg);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  if (loading) {
+    return (
+      <div className="flex items-center justify-center p-8 bg-white text-black dark:bg-zinc-900 dark:text-zinc-100">
+        <span className="animate-pulse text-sm opacity-70">
+          Loading profile…
+        </span>
+      </div>
+    );
+  }
+
+  const inputCls =
+    "w-full rounded-lg border px-3 py-2 outline-none focus:ring border-zinc-300 bg-white text-black dark:bg-zinc-800 dark:text-zinc-100 dark:border-zinc-700";
+
+  return (
+    <div className="mx-auto max-w-xl p-4 sm:p-6 bg-white text-black dark:bg-zinc-900 dark:text-zinc-100 rounded-lg">
+      <h1 className="text-xl font-semibold mb-4">Edit Profile</h1>
+      <form onSubmit={onSubmit} className="space-y-4">
+        <div>
+          <label htmlFor="username" className="block text-sm font-medium">
+            Username *
+          </label>
+          <input
+            id="username"
+            type="text"
+            value={form.username || ""}
+            onChange={onChange("username")}
+            className={inputCls}
+            placeholder="your_username"
+            required
+            minLength={3}
+          />
+        </div>
+
+        <div>
+          <label htmlFor="email" className="block text-sm font-medium">
+            Email
+          </label>
+          <input
+            id="email"
+            type="email"
+            value={form.email || ""}
+            onChange={onChange("email")}
+            className={inputCls}
+            placeholder="you@example.com"
+          />
+        </div>
+
+        <div>
+          <label htmlFor="password" className="block text-sm font-medium">
+            Current Password *
+          </label>
+          <input
+            id="password"
+            type="password"
+            value={form.password || ""}
+            onChange={onChange("password")}
+            className={inputCls}
+            placeholder="Enter current password"
+            required
+          />
+        </div>
+
+        <div className="flex items-center gap-2">
+          <input
+            id="changePassword"
+            type="checkbox"
+            checked={changePassword}
+            onChange={(e) => setChangePassword(e.target.checked)}
+            className="h-4 w-4 rounded border-zinc-400 dark:border-zinc-600"
+          />
+          <label htmlFor="changePassword" className="text-sm font-medium">
+            Change Password
+          </label>
+        </div>
+
+        {changePassword && (
+          <div>
+            <label htmlFor="newPassword" className="block text-sm font-medium">
+              New Password
+            </label>
+            <input
+              id="newPassword"
+              type="password"
+              value={form.newPassword || ""}
+              onChange={onChange("newPassword")}
+              className={inputCls}
+              placeholder="Enter new password"
+            />
+          </div>
+        )}
+
+        {error && (
+          <div
+            role="alert"
+            className="border border-red-300 bg-red-50 px-3 py-2 text-sm rounded-md dark:bg-red-900/20 dark:border-red-900/40"
+          >
+            {error}
+          </div>
+        )}
+        {success && (
+          <div
+            role="status"
+            className="border border-green-300 bg-green-50 px-3 py-2 text-sm rounded-md dark:bg-green-900/20 dark:border-green-900/40"
+          >
+            {success}
+          </div>
+        )}
+
+        <button
+          type="submit"
+          disabled={!isValid || loading}
+          className="px-4 py-2 font-medium text-white rounded-md disabled:opacity-50"
+          style={{ background: isDark ? "#18181b" : "black" }}
+        >
+          {loading ? "Saving…" : "Save changes"}
+        </button>
+      </form>
+    </div>
+  );
+}
diff --git a/src/pages/Login/Login.tsx b/src/pages/Login/Login.tsx
index d6f21a7..259a4b7 100644
--- a/src/pages/Login/Login.tsx
+++ b/src/pages/Login/Login.tsx
@@ -30,14 +30,30 @@ const Login: React.FC = () => {
     setIsLoading(true);
 
     try {
-      const response = await axios.post(`${backendUrl}/api/auth/login`, formData);
-      setMessage(response.data.message);
+      const response = await axios.post(
+        `${backendUrl}/api/auth/login`,
+        formData
+      );
 
-      if (response.data.message === 'Login successful') {
-        navigate("/home");
+      if (response.status === 200) {
+        setMessage(response.data.message || "Login successful");
+
+        localStorage.setItem("token", response.data.token);
+        localStorage.setItem("user", JSON.stringify(response.data.user));
+
+        window.dispatchEvent(new Event("authChange"));
+
+        // Redirect after successful login
+        navigate("/");
+      } else {
+        setMessage(response.data.message || "Login failed");
       }
     } catch (error: any) {
-      setMessage(error.response?.data?.message || "Something went wrong");
+      if (axios.isAxiosError(error) && error.response) {
+        setMessage(error.response.data?.message || "Invalid email or password");
+      } else {
+        setMessage("Something went wrong. Please try again.");
+      }
     } finally {
       setIsLoading(false);
     }
@@ -53,34 +69,70 @@ const Login: React.FC = () => {
     >
       {/* Animated background elements */}
       <div className="absolute inset-0">
-        <div className={`absolute -top-40 -right-40 w-96 h-96 ${mode === "dark" ? "bg-purple-500" : "bg-purple-300"} rounded-full blur-3xl opacity-30 animate-pulse`} />
-        <div className={`absolute -bottom-40 -left-40 w-96 h-96 ${mode === "dark" ? "bg-blue-500" : "bg-blue-300"} rounded-full blur-3xl opacity-30 animate-pulse`} />
-        <div className={`absolute top-40 left-40 w-96 h-96 ${mode === "dark" ? "bg-pink-500" : "bg-pink-300"} rounded-full blur-3xl opacity-30 animate-pulse`} />
-        <div className={`absolute top-1/2 right-1/4 w-64 h-64 ${mode === "dark" ? "bg-indigo-500" : "bg-indigo-300"} rounded-full blur-2xl opacity-20 animate-pulse delay-1000`} />
+        <div
+          className={`absolute -top-40 -right-40 w-96 h-96 ${
+            mode === "dark" ? "bg-purple-500" : "bg-purple-300"
+          } rounded-full blur-3xl opacity-30 animate-pulse`}
+        />
+        <div
+          className={`absolute -bottom-40 -left-40 w-96 h-96 ${
+            mode === "dark" ? "bg-blue-500" : "bg-blue-300"
+          } rounded-full blur-3xl opacity-30 animate-pulse`}
+        />
+        <div
+          className={`absolute top-40 left-40 w-96 h-96 ${
+            mode === "dark" ? "bg-pink-500" : "bg-pink-300"
+          } rounded-full blur-3xl opacity-30 animate-pulse`}
+        />
+        <div
+          className={`absolute top-1/2 right-1/4 w-64 h-64 ${
+            mode === "dark" ? "bg-indigo-500" : "bg-indigo-300"
+          } rounded-full blur-2xl opacity-20 animate-pulse delay-1000`}
+        />
       </div>
 
       <div className="relative w-full max-w-md px-6">
         {/* Branding */}
         <div className="text-center mb-10">
           <div className="inline-flex items-center justify-center w-20 h-20 bg-white rounded-3xl mb-6 shadow-2xl transform hover:scale-105 transition-transform duration-300 overflow-hidden">
-            <img src="/crl-icon.png" alt="Logo" className="w-14 h-14 object-contain" />
+            <img
+              src="/crl-icon.png"
+              alt="Logo"
+              className="w-14 h-14 object-contain"
+            />
           </div>
 
-          <h1 className={`text-4xl font-bold bg-clip-text text-transparent mb-2 ${
-            mode === "dark"
-              ? "bg-gradient-to-r from-purple-300 via-pink-300 to-indigo-300"
-              : "bg-gradient-to-r from-purple-600 via-pink-600 to-indigo-600"
-          }`}>
+          <h1
+            className={`text-4xl font-bold bg-clip-text text-transparent mb-2 ${
+              mode === "dark"
+                ? "bg-gradient-to-r from-purple-300 via-pink-300 to-indigo-300"
+                : "bg-gradient-to-r from-purple-600 via-pink-600 to-indigo-600"
+            }`}
+          >
             GitHubTracker
           </h1>
-          <p className={`${mode === "dark" ? "text-slate-300" : "text-gray-700"} text-lg font-medium`}>
+          <p
+            className={`${
+              mode === "dark" ? "text-slate-300" : "text-gray-700"
+            } text-lg font-medium`}
+          >
             Track your GitHub journey
           </p>
         </div>
 
         {/* Form Card */}
-        <div className={`rounded-3xl p-10 shadow-2xl border ${mode === "dark" ? "bg-white/10 backdrop-blur-xl border-white/20 text-white" : "bg-white border-gray-200 text-black"}`}>
-          <h2 className={`text-2xl font-bold text-center mb-8 ${mode === "dark" ? "text-white" : "text-gray-800"}`}>
+        <div
+          className={`rounded-3xl p-10 shadow-2xl border ${
+            mode === "dark"
+              ? "bg-white/10 backdrop-blur-xl border-white/20 text-white"
+              : "bg-white border-gray-200 text-black"
+          }`}
+        >
+          <h2
+            className={`text-2xl font-bold text-center mb-8 ${
+              mode === "dark" ? "text-white" : "text-gray-800"
+            }`}
+          >
             Welcome Back
           </h2>
 
@@ -130,18 +182,24 @@ const Login: React.FC = () => {
 
           {/* Message */}
           {message && (
-            <div className={`mt-6 p-4 rounded-2xl text-center text-sm font-medium ${
-              message === "Login successful"
-                ? "bg-green-500/20 text-green-300 border border-green-500/30"
-                : "bg-red-500/20 text-red-300 border border-red-500/30"
-            }`}>
+            <div
+              className={`mt-6 p-4 rounded-2xl text-center text-sm font-medium ${
+                message === "Login successful"
+                  ? "bg-green-500/20 text-green-300 border border-green-500/30"
+                  : "bg-red-500/20 text-red-300 border border-red-500/30"
+              }`}
+            >
               {message}
             </div>
           )}
 
           {/* Footer Text */}
           <div className="text-center mt-8 pb-8">
-            <p className={`${mode === "dark" ? "text-slate-500" : "text-gray-600"} text-sm`}>
+            <p
+              className={`${
+                mode === "dark" ? "text-slate-500" : "text-gray-600"
+              } text-sm`}
+            >
               Don't have an account?
               <Link
                 to="/signup"
@@ -154,9 +212,13 @@ const Login: React.FC = () => {
         </div>
       </div>
 
-      <div className={`${mode === "dark" ? "from-slate-900" : "from-slate-100"} absolute bottom-0 left-0 w-full h-20 bg-gradient-to-t to-transparent`} />
+      <div
+        className={`${
+          mode === "dark" ? "from-slate-900" : "from-slate-100"
+        } absolute bottom-0 left-0 w-full h-20 bg-gradient-to-t to-transparent`}
+      />
     </div>
   );
 };
 
-export default Login;
\ No newline at end of file
+export default Login;
diff --git a/src/pages/Profile/Profile.tsx b/src/pages/Profile/Profile.tsx
new file mode 100644
index 0000000..3c07933
--- /dev/null
+++ b/src/pages/Profile/Profile.tsx
@@ -0,0 +1,86 @@
+import { useEffect, useState } from "react";
+import api from "../../../lib/api";
+
+interface User {
+  username: string;
+  email: string;
+  avatarUrl?: string;
+}
+
+const Profile = () => {
+  const [user, setUser] = useState<User | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState("");
+
+  // ---- Apply theme from localStorage ----
+  useEffect(() => {
+    const savedTheme = localStorage.getItem("theme");
+    const root = document.documentElement;
+
+    if (savedTheme === "dark") {
+      root.classList.add("dark");
+    } else {
+      root.classList.remove("dark");
+    }
+  }, []);
+
+  // ---- Fetch user profile ----
+  useEffect(() => {
+    const fetchProfile = async () => {
+      try {
+        const res = await api.get("/api/auth/profile");
+        setUser(res.data.user);
+      } catch (err: any) {
+        setError(err.response?.data?.message || "Failed to load profile");
+      } finally {
+        setLoading(false);
+      }
+    };
+    fetchProfile();
+  }, []);
+
+  // ---- Loading ----
+  if (loading)
+    return (
+      <div className="flex justify-center items-center h-screen">
+        <p className="text-gray-500 dark:text-gray-400">Loading...</p>
+      </div>
+    );
+
+  // ---- Error ----
+  if (error)
+    return (
+      <div className="flex justify-center items-center h-screen">
+        <p className="text-red-600 dark:text-red-400">{error}</p>
+      </div>
+    );
+
+  // ---- Empty ----
+  if (!user) return null;
+
+  // ---- Main UI ----
+  return (
+    <div className="flex justify-center items-center min-h-screen bg-gray-50 dark:bg-inherit px-4">
+      <div className="max-w-md w-full bg-white dark:bg-gray-800 rounded-2xl shadow-md p-6 text-center transition-colors">
+        <img
+          src={user.avatarUrl || "/profile.svg"}
+          alt="avatar"
+          className="w-24 h-24 rounded-full mx-auto mb-4 object-cover border border-gray-300 dark:border-gray-700"
+        />
+        <h2 className="text-2xl font-semibold text-gray-900 dark:text-gray-100">
+          {user.username}
+        </h2>
+        <p className="text-gray-600 dark:text-gray-400">{user.email}</p>
+
+        <button
+          onClick={() => (window.location.href = "/profile/edit")}
+          className="mt-6 w-full py-2 bg-black text-white dark:bg-white dark:text-black rounded-lg hover:opacity-90 transition"
+        >
+          Edit Profile
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default Profile;