From 09f942be3b52f45abd587852bc44dfa774877ecf Mon Sep 17 00:00:00 2001
From: Pran-bot <pjgawande1966@gmail.com>
Date: Mon, 25 May 2026 17:20:46 +0530
Subject: [PATCH 1/5] Added [feature]: profile dropdown component

---
 backend/routes/auth.js                     |   2 +-
 src/components/Navbar.tsx                  |  41 ++++----
 src/components/Profile/ProfileDropDown.tsx | 105 +++++++++++++++++++++
 src/pages/Login/Login.tsx                  |   1 +
 4 files changed, 130 insertions(+), 19 deletions(-)
 create mode 100644 src/components/Profile/ProfileDropDown.tsx

diff --git a/backend/routes/auth.js b/backend/routes/auth.js
index e26c7a98..023aeb19 100644
--- a/backend/routes/auth.js
+++ b/backend/routes/auth.js
@@ -7,7 +7,7 @@ const router = express.Router();
 router.post("/signup", async (req, res) => {
 
     const { username,  email, password } = req.body;
-
+                                   
     try {
         const existingUser = await User.findOne( {email} );
 
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
index c6cc86d1..98e99af9 100644
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@@ -2,6 +2,7 @@ import { Link } from "react-router-dom";
 import { useState, useContext } from "react";
 import { ThemeContext } from "../context/ThemeContext";
 import { Moon, Sun } from 'lucide-react';
+import ProfileDropDown from "./Profile/ProfileDropDown";
 
 
 const Navbar: React.FC = () => {
@@ -13,6 +14,9 @@ const Navbar: React.FC = () => {
     return null;
 
   const { toggleTheme, mode } = themeContext;
+  const storedUser = localStorage.getItem("user");
+  const user: any = storedUser ? JSON.parse(storedUser) : null;
+  console.log("User", user)
 
   return (
     <nav className="sticky top-0 z-50 bg-white dark:bg-gray-900 text-black dark:text-white border-b border-gray-100 dark:border-gray-800 transition-colors duration-300">
@@ -46,12 +50,14 @@ const Navbar: React.FC = () => {
           >
             Contributors
           </Link>
-          <Link
+          {!user && (<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>
+          </Link>)}
+
+          {user && <ProfileDropDown user={user}/>}
           <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"
@@ -67,19 +73,16 @@ const Navbar: React.FC = () => {
             className="relative w-8 h-8 flex flex-col space-y-[5px] items-center group focus:outline-none"
           >
             <span
-              className={`block h-[3px] w-full bg-black dark:bg-white rounded-lg transition-transform duration-300 ${
-                isOpen ? "rotate-45 translate-y-2" : ""
-              }`}
+              className={`block h-[3px] w-full bg-black dark:bg-white rounded-lg transition-transform duration-300 ${isOpen ? "rotate-45 translate-y-2" : ""
+                }`}
             ></span>
             <span
-              className={`block h-[3px] w-full bg-black dark:bg-white rounded-lg transition-opacity duration-300 ${
-                isOpen ? "opacity-0" : ""
-              }`}
+              className={`block h-[3px] w-full bg-black dark:bg-white rounded-lg transition-opacity duration-300 ${isOpen ? "opacity-0" : ""
+                }`}
             ></span>
             <span
-              className={`block h-[3px] w-full bg-black dark:bg-white rounded-lg transition-transform duration-300 ${
-                isOpen ? "-rotate-45 -translate-y-2" : ""
-              }`}
+              className={`block h-[3px] w-full bg-black dark:bg-white rounded-lg transition-transform duration-300 ${isOpen ? "-rotate-45 -translate-y-2" : ""
+                }`}
             ></span>
           </button>
         </div>
@@ -117,13 +120,15 @@ 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>
+            {!user && (
+              <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/Profile/ProfileDropDown.tsx b/src/components/Profile/ProfileDropDown.tsx
new file mode 100644
index 00000000..7b2de323
--- /dev/null
+++ b/src/components/Profile/ProfileDropDown.tsx
@@ -0,0 +1,105 @@
+import { useEffect, useRef, useState } from "react";
+import { LogOut, Settings, User } from "lucide-react";
+type UserType = {
+    id: string,
+    username: string,
+    email: string,
+}
+
+interface UserProps {
+    user: UserType,
+}
+const ProfileDropDown = ({ user }: UserProps) => {
+    const [open, setOpen] = useState(false);
+    const dropdownRef = useRef<HTMLDivElement>(null);
+
+    // Close dropdown when clicking outside
+    useEffect(() => {
+        const handleClickOutside = (event: MouseEvent) => {
+            if (
+                dropdownRef.current &&
+                !dropdownRef.current.contains(event.target as Node)
+            ) {
+                setOpen(false);
+            }
+        };
+
+        document.addEventListener("mousedown", handleClickOutside);
+
+        return () => {
+            document.removeEventListener("mousedown", handleClickOutside);
+        };
+    }, []);
+
+    return (
+        <div className="relative inline-block text-left" ref={dropdownRef}>
+
+            {/* Profile Button */}
+            <button
+                onClick={() => setOpen(!open)}
+                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
+                
+                "
+            >
+                <User className="h-8 w-5" />
+            </button>
+
+            {/* Dropdown */}
+            {open && (
+                <div className="absolute right-0 mt-3 w-64 overflow-hidden rounded-2xl border border-gray-200 bg-white shadow-xl z-50
+                dark:border-gray-700 dark:bg-gray-900">
+
+                    {/* Top Section */}
+                    <div className="border-b border-gray-100 px-5 py-4
+                    dark:border-gray-800">
+                        <div className="flex items-center gap-3">
+                            <img
+                                src="https://i.pravatar.cc/50"
+                                alt="profile"
+                                className="h-12 w-12 rounded-full"
+                            />
+
+                            <div>
+                                <h3 className="font-semibold text-gray-800
+                                dark:text-white">
+                                    {/* Deep Patel */}
+                                    {user.username}
+                                </h3>
+
+                                <p className="text-sm text-gray-500 
+                                dark:text-gray-400">
+                                    {/* deep@gmail.com */}
+                                    {user.email}
+                                </p>
+                            </div>
+                        </div>
+                    </div>
+
+                    {/* Menu Items */}
+                    <div className="p-2">
+
+                        <button className="flex w-full items-center gap-3 rounded-xl px-4 py-3 text-sm text-gray-700 transition hover:bg-gray-100
+                        dark:text-gray-200 dark:hover:bg-gray-800">
+                            <User size={18} />
+                            My Profile
+                        </button>
+
+                        <button className="flex w-full items-center gap-3 rounded-xl px-4 py-3 text-sm text-gray-700 transition hover:bg-gray-100
+                        dark:text-gray-200 dark:hover:bg-gray-800">
+                            <Settings size={18} />
+                            Edit Profile
+                        </button>
+
+                        <button className="flex w-full items-center gap-3 rounded-xl px-4 py-3 text-sm text-red-600 transition hover:bg-red-50
+                        dark:hover:bg-red-900/2">
+                            <LogOut size={18} />
+                            Logout
+                        </button>
+                    </div>
+                </div>
+            )}
+        </div>
+    );
+};
+
+export default ProfileDropDown;
\ No newline at end of file
diff --git a/src/pages/Login/Login.tsx b/src/pages/Login/Login.tsx
index d6f21a7f..ea37e298 100644
--- a/src/pages/Login/Login.tsx
+++ b/src/pages/Login/Login.tsx
@@ -34,6 +34,7 @@ const Login: React.FC = () => {
       setMessage(response.data.message);
 
       if (response.data.message === 'Login successful') {
+        localStorage.setItem("user", JSON.stringify(response.data.user))
         navigate("/home");
       }
     } catch (error: any) {

From 46844bb0b3f714c455b90818059671047145cb70 Mon Sep 17 00:00:00 2001
From: Pran-bot <pjgawande1966@gmail.com>
Date: Mon, 25 May 2026 19:22:30 +0530
Subject: [PATCH 2/5] Added [feature]: added logout functionality

---
 src/components/Profile/ProfileDropDown.tsx | 30 +++++++++++++++++++++-
 1 file changed, 29 insertions(+), 1 deletion(-)

diff --git a/src/components/Profile/ProfileDropDown.tsx b/src/components/Profile/ProfileDropDown.tsx
index 7b2de323..2253558f 100644
--- a/src/components/Profile/ProfileDropDown.tsx
+++ b/src/components/Profile/ProfileDropDown.tsx
@@ -1,5 +1,7 @@
 import { useEffect, useRef, useState } from "react";
 import { LogOut, Settings, User } from "lucide-react";
+import axios from "axios";
+const backendUrl = import.meta.env.VITE_BACKEND_URL;
 type UserType = {
     id: string,
     username: string,
@@ -31,6 +33,31 @@ const ProfileDropDown = ({ user }: UserProps) => {
         };
     }, []);
 
+    const handleLogout = async (): Promise<void> => {
+
+        try {
+
+            const response = await axios.get(`${backendUrl}/api/auth/logout`);
+
+            if (response.data) {
+
+                // Remove stored user
+                localStorage.removeItem("user");
+
+                // Redirect to login/home
+                window.location.href = "/login";
+
+                console.log(response.data.message);
+            }
+            else {
+                console.log(response.data.message);
+            }
+
+        } catch (error) {
+            console.log("Logout failed", error);
+        }
+    };
+
     return (
         <div className="relative inline-block text-left" ref={dropdownRef}>
 
@@ -91,7 +118,8 @@ const ProfileDropDown = ({ user }: UserProps) => {
                         </button>
 
                         <button className="flex w-full items-center gap-3 rounded-xl px-4 py-3 text-sm text-red-600 transition hover:bg-red-50
-                        dark:hover:bg-red-900/2">
+                        dark:hover:bg-red-900/2"
+                            onClick={() => handleLogout()}>
                             <LogOut size={18} />
                             Logout
                         </button>

From 11c346655b5133ae1ec13bed2a76629affd927e6 Mon Sep 17 00:00:00 2001
From: Pran-bot <pjgawande1966@gmail.com>
Date: Tue, 26 May 2026 17:23:35 +0530
Subject: [PATCH 3/5] Added [feature]: updated the code as per review

---
 src/Routes/Router.tsx                         |   4 +
 src/components/Navbar.tsx                     |  34 ++-
 src/components/Profile/AchievementCard.tsx    |  24 +++
 .../Profile/ContributionHeatmap.tsx           |  21 ++
 src/components/Profile/EditProfileForm.tsx    | 198 ++++++++++++++++++
 src/components/Profile/LanguageChart.tsx      |  38 ++++
 src/components/Profile/ProfileDropDown.tsx    |  45 ++--
 src/components/Profile/ProfileHeader.tsx      |  20 ++
 src/components/Profile/ProfileSidebar.tsx     |  31 +++
 src/components/Profile/RecentActivity.tsx     |  28 +++
 src/components/Profile/RepoStats.tsx          |   0
 src/components/Profile/RepositoryList.tsx     |  36 ++++
 src/components/Profile/StatsCard.tsx          |  24 +++
 src/pages/Login/Login.tsx                     |  37 ++--
 src/pages/Profile/EditProfilePage.tsx         |  20 ++
 src/pages/Profile/ProfilePage.tsx             |  47 +++++
 src/services/auth.ts                          |  25 +++
 17 files changed, 580 insertions(+), 52 deletions(-)
 create mode 100644 src/components/Profile/AchievementCard.tsx
 create mode 100644 src/components/Profile/ContributionHeatmap.tsx
 create mode 100644 src/components/Profile/EditProfileForm.tsx
 create mode 100644 src/components/Profile/LanguageChart.tsx
 create mode 100644 src/components/Profile/ProfileHeader.tsx
 create mode 100644 src/components/Profile/ProfileSidebar.tsx
 create mode 100644 src/components/Profile/RecentActivity.tsx
 create mode 100644 src/components/Profile/RepoStats.tsx
 create mode 100644 src/components/Profile/RepositoryList.tsx
 create mode 100644 src/components/Profile/StatsCard.tsx
 create mode 100644 src/pages/Profile/EditProfilePage.tsx
 create mode 100644 src/pages/Profile/ProfilePage.tsx
 create mode 100644 src/services/auth.ts

diff --git a/src/Routes/Router.tsx b/src/Routes/Router.tsx
index 40a78617..a8173ee6 100644
--- a/src/Routes/Router.tsx
+++ b/src/Routes/Router.tsx
@@ -7,6 +7,8 @@ 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 ProfilePage from "../pages/Profile/ProfilePage.tsx";
+import EditProfilePage from "../pages/Profile/EditProfilePage.tsx";
 
 const Router = () => {
   return (
@@ -19,6 +21,8 @@ const Router = () => {
       <Route path="/contact" element={<Contact />} />
       <Route path="/contributors" element={<Contributors />} />
       <Route path="/contributor/:username" element={<ContributorProfile />} />
+      <Route path="/me" element={<ProfilePage />}></Route>
+      <Route path="/profile/edit" element={<EditProfilePage />}></Route>
     </Routes>
   );
 };
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
index 98e99af9..84db6971 100644
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@@ -3,6 +3,7 @@ import { useState, useContext } from "react";
 import { ThemeContext } from "../context/ThemeContext";
 import { Moon, Sun } from 'lucide-react';
 import ProfileDropDown from "./Profile/ProfileDropDown";
+import { logoutUser } from "../services/auth";
 
 
 const Navbar: React.FC = () => {
@@ -15,8 +16,15 @@ const Navbar: React.FC = () => {
 
   const { toggleTheme, mode } = themeContext;
   const storedUser = localStorage.getItem("user");
-  const user: any = storedUser ? JSON.parse(storedUser) : null;
-  console.log("User", user)
+  let user = null;
+
+  try {
+    user = storedUser ? JSON.parse(storedUser) : null;
+  } catch (error) {
+    console.error("Invalid user data in local Storage");
+    localStorage.removeItem("user");
+    user = null;
+  }
 
   return (
     <nav className="sticky top-0 z-50 bg-white dark:bg-gray-900 text-black dark:text-white border-b border-gray-100 dark:border-gray-800 transition-colors duration-300">
@@ -57,7 +65,7 @@ const Navbar: React.FC = () => {
             Login
           </Link>)}
 
-          {user && <ProfileDropDown user={user}/>}
+          {user && <ProfileDropDown user={user} />}
           <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"
@@ -129,6 +137,26 @@ const Navbar: React.FC = () => {
                 Login
               </Link>
             )}
+            {user && (
+              <>
+                <Link
+                  to="/me"
+                  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)}
+                >
+                  My Profile
+                </Link>
+                <button
+                  className="block w-full text-left text-lg font-medium hover:text-gray-300 transition-all px-2 py-1 border border-transparent hover:border-gray-400 rounded"
+                  onClick={
+                    logoutUser
+                  }
+                >
+                  Logout
+                </button>
+              </>
+            )}
+
             <button
               onClick={() => {
                 toggleTheme();
diff --git a/src/components/Profile/AchievementCard.tsx b/src/components/Profile/AchievementCard.tsx
new file mode 100644
index 00000000..d27e79c8
--- /dev/null
+++ b/src/components/Profile/AchievementCard.tsx
@@ -0,0 +1,24 @@
+interface AchievementProps {
+    title: string
+    description: string
+}
+
+const AchievementCard = ({
+    title,
+    description
+}: AchievementProps) => {
+    return (
+        <div className="rounded-xl border border-zinc-800 bg-zinc-900 p-5">
+
+            <h3 className="text-lg font-semibold">
+                {title}
+            </h3>
+
+            <p className="mt-2 text-sm text-zinc-400">
+                {description}
+            </p>
+        </div>
+    )
+}
+
+export default AchievementCard
\ No newline at end of file
diff --git a/src/components/Profile/ContributionHeatmap.tsx b/src/components/Profile/ContributionHeatmap.tsx
new file mode 100644
index 00000000..bdbabd5f
--- /dev/null
+++ b/src/components/Profile/ContributionHeatmap.tsx
@@ -0,0 +1,21 @@
+const ContributionHeatmap = () => {
+    return (
+        <div className="rounded-2xl border border-zinc-800 bg-zinc-900 p-6">
+
+            <h2 className="mb-4 text-xl font-semibold">
+                Contribution Activity
+            </h2>
+
+            <div className="flex gap-2">
+                {[...Array(50)].map((_, index) => (
+                    <div
+                        key={index}
+                        className="h-8 w-8 rounded bg-green-700"
+                    />
+                ))}
+            </div>
+        </div>
+    )
+}
+
+export default ContributionHeatmap
\ No newline at end of file
diff --git a/src/components/Profile/EditProfileForm.tsx b/src/components/Profile/EditProfileForm.tsx
new file mode 100644
index 00000000..4105fd39
--- /dev/null
+++ b/src/components/Profile/EditProfileForm.tsx
@@ -0,0 +1,198 @@
+import { Camera } from "lucide-react"
+import { useState } from "react"
+
+const EditProfileForm = () => {
+
+    const [formData, setFormData] = useState({
+        username: "deva",
+        email: "deva@gmail.com",
+        bio: "Full Stack Developer passionate about Open Source.",
+        location: "India",
+        github: "deva",
+        avatar: "https://i.pravatar.cc/150",
+    })
+
+    const handleChange = (
+        e: React.ChangeEvent<
+            HTMLInputElement | HTMLTextAreaElement
+        >
+    ) => {
+
+        const { name, value } = e.target
+
+        setFormData((prev) => ({
+            ...prev,
+            [name]: value,
+        }))
+    }
+
+    const handleSubmit = (
+        e: React.FormEvent<HTMLFormElement>
+    ) => {
+
+        e.preventDefault()
+
+        console.log(formData)
+
+        // API CALL
+    }
+
+    return (
+        <div className="min-h-screen bg-black px-4 py-10 text-white">
+
+            <div className="mx-auto max-w-4xl">
+
+                {/* Header */}
+                <div className="mb-8">
+
+                    <h1 className="text-4xl font-bold">
+                        Edit Profile
+                    </h1>
+
+                    <p className="mt-2 text-zinc-400">
+                        Update your personal information and GitHub details
+                    </p>
+                </div>
+
+                {/* Form Container */}
+                <form
+                    onSubmit={handleSubmit}
+                    className="rounded-3xl border border-zinc-800 bg-zinc-900 p-8 shadow-2xl"
+                >
+
+                    {/* Avatar Section */}
+                    <div className="mb-10 flex flex-col items-center border-b border-zinc-800 pb-8">
+
+                        <div className="relative">
+
+                            <img
+                                src={formData.avatar}
+                                alt="profile"
+                                className="h-32 w-32 rounded-full border-4 border-zinc-700 object-cover"
+                            />
+
+                            <button
+                                type="button"
+                                className="absolute bottom-0 right-0 rounded-full bg-orange-500 p-3 transition hover:bg-orange-600"
+                            >
+                                <Camera size={18} />
+                            </button>
+                        </div>
+
+                        <p className="mt-4 text-sm text-zinc-400">
+                            Upload a new profile picture
+                        </p>
+                    </div>
+
+                    {/* Input Grid */}
+                    <div className="grid grid-cols-1 gap-6 md:grid-cols-2">
+
+                        {/* Username */}
+                        <div>
+                            <label className="mb-2 block text-sm font-medium text-zinc-400">
+                                Username
+                            </label>
+
+                            <input
+                                type="text"
+                                name="username"
+                                value={formData.username}
+                                onChange={handleChange}
+                                placeholder="Enter username"
+                                className="w-full rounded-xl border border-zinc-700 bg-zinc-800 px-4 py-3 outline-none transition focus:border-orange-500"
+                            />
+                        </div>
+
+                        {/* Email */}
+                        <div>
+                            <label className="mb-2 block text-sm font-medium text-zinc-400">
+                                Email
+                            </label>
+
+                            <input
+                                type="email"
+                                name="email"
+                                value={formData.email}
+                                onChange={handleChange}
+                                placeholder="Enter email"
+                                className="w-full rounded-xl border border-zinc-700 bg-zinc-800 px-4 py-3 outline-none transition focus:border-orange-500"
+                            />
+                        </div>
+
+                        {/* Location */}
+                        <div>
+                            <label className="mb-2 block text-sm font-medium text-zinc-400">
+                                Location
+                            </label>
+
+                            <input
+                                type="text"
+                                name="location"
+                                value={formData.location}
+                                onChange={handleChange}
+                                placeholder="Your location"
+                                className="w-full rounded-xl border border-zinc-700 bg-zinc-800 px-4 py-3 outline-none transition focus:border-orange-500"
+                            />
+                        </div>
+
+                        {/* GitHub */}
+                        <div>
+                            <label className="mb-2 block text-sm font-medium text-zinc-400">
+                                GitHub Username
+                            </label>
+
+                            <input
+                                type="text"
+                                name="github"
+                                value={formData.github}
+                                onChange={handleChange}
+                                placeholder="GitHub username"
+                                className="w-full rounded-xl border border-zinc-700 bg-zinc-800 px-4 py-3 outline-none transition focus:border-orange-500"
+                            />
+                        </div>
+
+                    </div>
+
+                    {/* Bio */}
+                    <div className="mt-6">
+
+                        <label className="mb-2 block text-sm font-medium text-zinc-400">
+                            Bio
+                        </label>
+
+                        <textarea
+                            rows={5}
+                            name="bio"
+                            value={formData.bio}
+                            onChange={handleChange}
+                            placeholder="Write something about yourself..."
+                            className="w-full rounded-xl border border-zinc-700 bg-zinc-800 px-4 py-3 outline-none transition focus:border-orange-500"
+                        />
+                    </div>
+
+                    {/* Buttons */}
+                    <div className="mt-10 flex items-center justify-end gap-4">
+
+                        <button
+                            type="button"
+                            className="rounded-xl border border-zinc-700 px-6 py-3 font-medium transition hover:bg-zinc-800"
+                        >
+                            Cancel
+                        </button>
+
+                        <button
+                            type="submit"
+                            className="rounded-xl bg-orange-500 px-6 py-3 font-semibold text-white transition hover:bg-orange-600"
+                        >
+                            Save Changes
+                        </button>
+
+                    </div>
+
+                </form>
+            </div>
+        </div>
+    )
+}
+
+export default EditProfileForm
\ No newline at end of file
diff --git a/src/components/Profile/LanguageChart.tsx b/src/components/Profile/LanguageChart.tsx
new file mode 100644
index 00000000..555435cd
--- /dev/null
+++ b/src/components/Profile/LanguageChart.tsx
@@ -0,0 +1,38 @@
+const LanguageChart = () => {
+    return (
+        <div className="rounded-2xl border border-zinc-800 bg-zinc-900 p-6">
+
+            <h2 className="mb-4 text-xl font-semibold">
+                Languages Used
+            </h2>
+
+            <div className="space-y-4">
+
+                <div>
+                    <div className="mb-1 flex justify-between">
+                        <span>TypeScript</span>
+                        <span>40%</span>
+                    </div>
+
+                    <div className="h-3 rounded-full bg-zinc-800">
+                        <div className="h-3 w-[40%] rounded-full bg-blue-500" />
+                    </div>
+                </div>
+
+                <div>
+                    <div className="mb-1 flex justify-between">
+                        <span>JavaScript</span>
+                        <span>30%</span>
+                    </div>
+
+                    <div className="h-3 rounded-full bg-zinc-800">
+                        <div className="h-3 w-[30%] rounded-full bg-yellow-500" />
+                    </div>
+                </div>
+
+            </div>
+        </div>
+    )
+}
+
+export default LanguageChart
\ No newline at end of file
diff --git a/src/components/Profile/ProfileDropDown.tsx b/src/components/Profile/ProfileDropDown.tsx
index 2253558f..5b73f88c 100644
--- a/src/components/Profile/ProfileDropDown.tsx
+++ b/src/components/Profile/ProfileDropDown.tsx
@@ -1,6 +1,8 @@
 import { useEffect, useRef, useState } from "react";
 import { LogOut, Settings, User } from "lucide-react";
 import axios from "axios";
+import { Link } from "react-router-dom";
+import { logoutUser } from "../../services/auth";
 const backendUrl = import.meta.env.VITE_BACKEND_URL;
 type UserType = {
     id: string,
@@ -33,31 +35,6 @@ const ProfileDropDown = ({ user }: UserProps) => {
         };
     }, []);
 
-    const handleLogout = async (): Promise<void> => {
-
-        try {
-
-            const response = await axios.get(`${backendUrl}/api/auth/logout`);
-
-            if (response.data) {
-
-                // Remove stored user
-                localStorage.removeItem("user");
-
-                // Redirect to login/home
-                window.location.href = "/login";
-
-                console.log(response.data.message);
-            }
-            else {
-                console.log(response.data.message);
-            }
-
-        } catch (error) {
-            console.log("Logout failed", error);
-        }
-    };
-
     return (
         <div className="relative inline-block text-left" ref={dropdownRef}>
 
@@ -105,21 +82,25 @@ const ProfileDropDown = ({ user }: UserProps) => {
                     {/* Menu Items */}
                     <div className="p-2">
 
-                        <button className="flex w-full items-center gap-3 rounded-xl px-4 py-3 text-sm text-gray-700 transition hover:bg-gray-100
-                        dark:text-gray-200 dark:hover:bg-gray-800">
+                        <Link className="flex w-full items-center gap-3 rounded-xl px-4 py-3 text-sm text-gray-700 transition hover:bg-gray-100
+                        dark:text-gray-200 dark:hover:bg-gray-800"
+                            to={"/me"}
+                        >
                             <User size={18} />
                             My Profile
-                        </button>
+                        </Link>
 
-                        <button className="flex w-full items-center gap-3 rounded-xl px-4 py-3 text-sm text-gray-700 transition hover:bg-gray-100
-                        dark:text-gray-200 dark:hover:bg-gray-800">
+                        <Link className="flex w-full items-center gap-3 rounded-xl px-4 py-3 text-sm text-gray-700 transition hover:bg-gray-100
+                        dark:text-gray-200 dark:hover:bg-gray-800"
+                        to={"/profile/edit"}
+                        >
                             <Settings size={18} />
                             Edit Profile
-                        </button>
+                        </Link>
 
                         <button className="flex w-full items-center gap-3 rounded-xl px-4 py-3 text-sm text-red-600 transition hover:bg-red-50
                         dark:hover:bg-red-900/2"
-                            onClick={() => handleLogout()}>
+                            onClick={logoutUser}>
                             <LogOut size={18} />
                             Logout
                         </button>
diff --git a/src/components/Profile/ProfileHeader.tsx b/src/components/Profile/ProfileHeader.tsx
new file mode 100644
index 00000000..776f8653
--- /dev/null
+++ b/src/components/Profile/ProfileHeader.tsx
@@ -0,0 +1,20 @@
+const ProfileHeader = () => {
+    return (
+        <div className="rounded-2xl bg-gradient-to-r from-orange-500 to-orange-700 p-8">
+
+            <h1 className="text-4xl font-bold">
+                Track Your GitHub Journey
+            </h1>
+
+            <p className="mt-2 text-lg text-orange-100">
+                Analyze repositories, commits and coding activity
+            </p>
+
+            <button className="mt-5 rounded-lg bg-white px-5 py-2 text-black font-semibold">
+                Connect GitHub
+            </button>
+        </div>
+    )
+}
+
+export default ProfileHeader
\ No newline at end of file
diff --git a/src/components/Profile/ProfileSidebar.tsx b/src/components/Profile/ProfileSidebar.tsx
new file mode 100644
index 00000000..bb704ca7
--- /dev/null
+++ b/src/components/Profile/ProfileSidebar.tsx
@@ -0,0 +1,31 @@
+const ProfileSidebar = () => {
+    return (
+        <div className="rounded-2xl border border-zinc-800 bg-zinc-900 p-6">
+
+            <div className="flex flex-col items-center">
+
+                <img
+                    src="https://i.pravatar.cc/150"
+                    alt="profile"
+                    className="h-28 w-28 rounded-full"
+                />
+
+                <h1 className="mt-4 text-2xl font-bold">
+                    Deep Patel
+                </h1>
+
+                <p className="text-zinc-400">
+                    Full Stack Developer
+                </p>
+            </div>
+
+            <div className="mt-6 space-y-3 text-sm text-zinc-300">
+                <p>📍 India</p>
+                <p>👥 120 Followers</p>
+                <p>📦 42 Repositories</p>
+            </div>
+        </div>
+    )
+}
+
+export default ProfileSidebar
\ No newline at end of file
diff --git a/src/components/Profile/RecentActivity.tsx b/src/components/Profile/RecentActivity.tsx
new file mode 100644
index 00000000..2bdd32a0
--- /dev/null
+++ b/src/components/Profile/RecentActivity.tsx
@@ -0,0 +1,28 @@
+const RecentActivity = () => {
+    return (
+        <div className="rounded-2xl border border-zinc-800 bg-zinc-900 p-6">
+
+            <h2 className="mb-4 text-xl font-semibold">
+                Recent Activity
+            </h2>
+
+            <div className="space-y-3">
+
+                <div className="rounded-lg bg-zinc-800 p-4">
+                    ✔ Pushed 5 commits
+                </div>
+
+                <div className="rounded-lg bg-zinc-800 p-4">
+                    ⭐ Starred a repository
+                </div>
+
+                <div className="rounded-lg bg-zinc-800 p-4">
+                    🔥 Opened a pull request
+                </div>
+
+            </div>
+        </div>
+    )
+}
+
+export default RecentActivity
\ No newline at end of file
diff --git a/src/components/Profile/RepoStats.tsx b/src/components/Profile/RepoStats.tsx
new file mode 100644
index 00000000..e69de29b
diff --git a/src/components/Profile/RepositoryList.tsx b/src/components/Profile/RepositoryList.tsx
new file mode 100644
index 00000000..ea09a70f
--- /dev/null
+++ b/src/components/Profile/RepositoryList.tsx
@@ -0,0 +1,36 @@
+const RepositoryList = () => {
+    return (
+        <div className="rounded-2xl border border-zinc-800 bg-zinc-900 p-6">
+
+            <h2 className="mb-4 text-xl font-semibold">
+                Top Repositories
+            </h2>
+
+            <div className="space-y-4">
+
+                <div className="rounded-xl bg-zinc-800 p-4">
+                    <h3 className="font-semibold">
+                        github-tracker
+                    </h3>
+
+                    <p className="text-sm text-zinc-400">
+                        Track GitHub activity
+                    </p>
+                </div>
+
+                <div className="rounded-xl bg-zinc-800 p-4">
+                    <h3 className="font-semibold">
+                        portfolio
+                    </h3>
+
+                    <p className="text-sm text-zinc-400">
+                        Personal website
+                    </p>
+                </div>
+
+            </div>
+        </div>
+    )
+}
+
+export default RepositoryList
\ No newline at end of file
diff --git a/src/components/Profile/StatsCard.tsx b/src/components/Profile/StatsCard.tsx
new file mode 100644
index 00000000..11ef9861
--- /dev/null
+++ b/src/components/Profile/StatsCard.tsx
@@ -0,0 +1,24 @@
+interface StatsCardProps {
+    title: string
+    value: string
+}
+
+const StatsCard = ({
+    title,
+    value
+}: StatsCardProps) => {
+    return (
+        <div className="rounded-2xl border border-zinc-800 bg-zinc-900 p-6">
+
+            <h2 className="text-zinc-400">
+                {title}
+            </h2>
+
+            <p className="mt-4 text-4xl font-bold">
+                {value}
+            </p>
+        </div>
+    )
+}
+
+export default StatsCard
\ No newline at end of file
diff --git a/src/pages/Login/Login.tsx b/src/pages/Login/Login.tsx
index ea37e298..74e2f9fe 100644
--- a/src/pages/Login/Login.tsx
+++ b/src/pages/Login/Login.tsx
@@ -34,8 +34,16 @@ const Login: React.FC = () => {
       setMessage(response.data.message);
 
       if (response.data.message === 'Login successful') {
-        localStorage.setItem("user", JSON.stringify(response.data.user))
-        navigate("/home");
+        try {
+          localStorage.setItem(
+            "user",
+            JSON.stringify(response.data.user)
+          )
+        } catch (error) {
+          console.error("Failed to save user:", error)
+        }
+
+        navigate("/home")
       }
     } catch (error: any) {
       setMessage(error.response?.data?.message || "Something went wrong");
@@ -46,11 +54,10 @@ const Login: React.FC = () => {
 
   return (
     <div
-      className={`min-h-screen h-full w-full flex items-center justify-center relative overflow-hidden ${
-        mode === "dark"
+      className={`min-h-screen h-full w-full flex items-center justify-center relative overflow-hidden ${mode === "dark"
           ? "bg-gradient-to-br from-slate-900 via-purple-900 to-slate-900"
           : "bg-gradient-to-br from-slate-100 via-purple-100 to-slate-100"
-      }`}
+        }`}
     >
       {/* Animated background elements */}
       <div className="absolute inset-0">
@@ -67,11 +74,10 @@ const Login: React.FC = () => {
             <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"
+          <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`}>
@@ -95,11 +101,10 @@ const Login: React.FC = () => {
                 onChange={handleChange}
                 autoComplete="username"
                 required
-                className={`w-full pl-4 pr-4 py-4 rounded-2xl focus:outline-none transition-all ${
-                  mode === "dark"
+                className={`w-full pl-4 pr-4 py-4 rounded-2xl focus:outline-none transition-all ${mode === "dark"
                     ? "bg-white/5 border border-white/10 text-white placeholder-slate-400 focus:ring-2 focus:ring-purple-500"
                     : "bg-gray-100 border border-gray-300 text-gray-900 placeholder-gray-500 focus:ring-2 focus:ring-purple-400"
-                }`}
+                  }`}
               />
             </div>
 
@@ -112,11 +117,10 @@ const Login: React.FC = () => {
                 value={formData.password}
                 onChange={handleChange}
                 required
-                className={`w-full pl-4 pr-4 py-4 rounded-2xl focus:outline-none transition-all ${
-                  mode === "dark"
+                className={`w-full pl-4 pr-4 py-4 rounded-2xl focus:outline-none transition-all ${mode === "dark"
                     ? "bg-white/5 border border-white/10 text-white placeholder-slate-400 focus:ring-2 focus:ring-purple-500"
                     : "bg-gray-100 border border-gray-300 text-gray-900 placeholder-gray-500 focus:ring-2 focus:ring-purple-400"
-                }`}
+                  }`}
               />
             </div>
 
@@ -131,11 +135,10 @@ const Login: React.FC = () => {
 
           {/* Message */}
           {message && (
-            <div className={`mt-6 p-4 rounded-2xl text-center text-sm font-medium ${
-              message === "Login successful"
+            <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>
           )}
diff --git a/src/pages/Profile/EditProfilePage.tsx b/src/pages/Profile/EditProfilePage.tsx
new file mode 100644
index 00000000..47940466
--- /dev/null
+++ b/src/pages/Profile/EditProfilePage.tsx
@@ -0,0 +1,20 @@
+import EditProfileForm from "../../components/Profile/EditProfileForm"
+
+const EditProfilePage = () => {
+    return (
+        <div className="min-h-screen bg-black p-6 text-white">
+
+            <div className="mx-auto max-w-3xl">
+
+                <h1 className="mb-8 text-4xl font-bold">
+                    Edit Profile
+                </h1>
+
+                <EditProfileForm />
+
+            </div>
+        </div>
+    )
+}
+
+export default EditProfilePage
\ No newline at end of file
diff --git a/src/pages/Profile/ProfilePage.tsx b/src/pages/Profile/ProfilePage.tsx
new file mode 100644
index 00000000..2b25e38d
--- /dev/null
+++ b/src/pages/Profile/ProfilePage.tsx
@@ -0,0 +1,47 @@
+import ContributionHeatmap from "../../components/Profile/ContributionHeatmap"
+import LanguageChart from "../../components/Profile/LanguageChart"
+import ProfileHeader from "../../components/Profile/ProfileHeader"
+import ProfileSidebar from "../../components/Profile/ProfileSidebar"
+import RecentActivity from "../../components/Profile/RecentActivity"
+import RepositoryList from "../../components/Profile/RepositoryList"
+import StatsCard from "../../components/Profile/StatsCard"
+
+
+const ProfilePage = () => {
+    return (
+        <div className="min-h-screen bg-black text-white p-6">
+            <div className="grid grid-cols-12 gap-6">
+
+                {/* Sidebar */}
+                <div className="col-span-3">
+                    <ProfileSidebar />
+                </div>
+
+                {/* Main Content */}
+                <div className="col-span-9 space-y-6">
+
+                    <ProfileHeader />
+
+                    {/* Stats */}
+                    <div className="grid grid-cols-4 gap-4">
+                        <StatsCard title="Repositories" value="24" />
+                        <StatsCard title="Followers" value="120" />
+                        <StatsCard title="Stars" value="450" />
+                        <StatsCard title="Commits" value="1.2K" />
+                    </div>
+
+                    <ContributionHeatmap />
+
+                    <div className="grid grid-cols-2 gap-6">
+                        <RepositoryList />
+                        <LanguageChart />
+                    </div>
+
+                    <RecentActivity />
+                </div>
+            </div>
+        </div>
+    )
+}
+
+export default ProfilePage
\ No newline at end of file
diff --git a/src/services/auth.ts b/src/services/auth.ts
new file mode 100644
index 00000000..1667e534
--- /dev/null
+++ b/src/services/auth.ts
@@ -0,0 +1,25 @@
+import axios from "axios";
+
+const backendUrl = import.meta.env.VITE_BACKEND_URL;
+
+export const logoutUser = async (): Promise<void> => {
+    try {
+        const response = await axios.get(`${backendUrl}/api/auth/logout`);
+
+        if (response.data) {
+
+            // Remove stored user
+            localStorage.removeItem("user");
+
+            // Redirect to login/home
+            window.location.href = "/login";
+
+            console.log(response.data.message);
+        }
+        else {
+            console.log(response.data.message);
+        }
+    } catch (error) {
+        console.error("Logout failed", error)
+    }
+}
\ No newline at end of file

From f14a114638bbf3f6e12a55642c9c2c9ade88e335 Mon Sep 17 00:00:00 2001
From: Pran-bot <pjgawande1966@gmail.com>
Date: Thu, 28 May 2026 19:29:51 +0530
Subject: [PATCH 4/5] Added [feature]: updated the code as per review for
 second time

---
 package.json                                  |   1 +
 src/App.css                                   |  11 +
 src/components/Navbar.tsx                     |   8 +
 .../Profile/ContributionHeatmap.tsx           |  76 +++-
 src/components/Profile/EditProfileForm.tsx    | 198 ----------
 src/components/Profile/LanguageChart.tsx      |  74 ++--
 src/components/Profile/ProfileDropDown.tsx    |  44 ++-
 src/components/Profile/ProfileHeader.tsx      |   7 +-
 src/components/Profile/ProfileSidebar.tsx     |  52 ++-
 src/components/Profile/RecentActivity.tsx     | 149 ++++++-
 src/components/Profile/RepositoryList.tsx     |  56 ++-
 src/components/Profile/StatsCard.tsx          |   9 +-
 src/hooks/useGithubActivity.ts                |  32 ++
 src/hooks/useGithubRepos.ts                   | 128 ++++++
 src/hooks/useProfileData.ts                   |  61 +++
 src/pages/Profile/EditProfilePage.tsx         | 367 +++++++++++++++++-
 src/pages/Profile/ProfilePage.tsx             |  88 ++++-
 src/pages/Tracker/Tracker.tsx                 |  93 ++++-
 src/services/auth.ts                          |  28 +-
 19 files changed, 1122 insertions(+), 360 deletions(-)
 delete mode 100644 src/components/Profile/EditProfileForm.tsx
 create mode 100644 src/hooks/useGithubActivity.ts
 create mode 100644 src/hooks/useGithubRepos.ts
 create mode 100644 src/hooks/useProfileData.ts

diff --git a/package.json b/package.json
index f2d89f59..325e55d0 100644
--- a/package.json
+++ b/package.json
@@ -25,6 +25,7 @@
     "postcss": "^8.4.47",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-github-calendar": "^5.0.6",
     "react-hot-toast": "^2.4.1",
     "react-icons": "^5.3.0",
     "react-router-dom": "^6.28.0",
diff --git a/src/App.css b/src/App.css
index b9d355df..1d145ec2 100644
--- a/src/App.css
+++ b/src/App.css
@@ -11,9 +11,11 @@
   will-change: filter;
   transition: filter 300ms;
 }
+
 .logo:hover {
   filter: drop-shadow(0 0 2em #646cffaa);
 }
+
 .logo.react:hover {
   filter: drop-shadow(0 0 2em #61dafbaa);
 }
@@ -22,6 +24,7 @@
   from {
     transform: rotate(0deg);
   }
+
   to {
     transform: rotate(360deg);
   }
@@ -40,3 +43,11 @@
 .read-the-docs {
   color: #888;
 }
+
+.calendar-container svg text {
+  fill: #1f2937 !important;
+}
+
+.dark .calendar-container svg text {
+  fill: #d1d5db !important;
+}
\ No newline at end of file
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
index 84db6971..3cbc6b06 100644
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@@ -146,6 +146,14 @@ const Navbar: React.FC = () => {
                 >
                   My Profile
                 </Link>
+
+                <Link
+                  to="/profile/edit"
+                  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)}
+                >
+                  My Profile
+                </Link>
                 <button
                   className="block w-full text-left text-lg font-medium hover:text-gray-300 transition-all px-2 py-1 border border-transparent hover:border-gray-400 rounded"
                   onClick={
diff --git a/src/components/Profile/ContributionHeatmap.tsx b/src/components/Profile/ContributionHeatmap.tsx
index bdbabd5f..b2929b6a 100644
--- a/src/components/Profile/ContributionHeatmap.tsx
+++ b/src/components/Profile/ContributionHeatmap.tsx
@@ -1,21 +1,69 @@
-const ContributionHeatmap = () => {
+import { GitHubCalendar } from "react-github-calendar";
+
+interface UsernameProps {
+    username: string;
+}
+
+const calendarTheme = {
+    light: [
+        "#ebedf0",
+        "#9be9a8",
+        "#40c463",
+        "#30a14e",
+        "#216e39",
+    ],
+    dark: [
+        "#161b22",
+        "#0e4429",
+        "#006d32",
+        "#26a641",
+        "#39d353",
+    ],
+};
+
+const ContributionHeatmap = ({
+    username
+}: UsernameProps) => {
+
+    if (!username) return null;
+
+    const themeMode =
+        typeof window !== "undefined"
+            ? localStorage.getItem("theme")
+            : "light";
+
     return (
-        <div className="rounded-2xl border border-zinc-800 bg-zinc-900 p-6">
 
-            <h2 className="mb-4 text-xl font-semibold">
-                Contribution Activity
+        <div className="rounded-2xl border border-zinc-200 bg-white p-6
+                        dark:border-zinc-800 dark:bg-zinc-900">
+
+            <h2 className="mb-4 text-xl font-semibold
+                           text-zinc-700 dark:text-zinc-300">
+
+                Contributions
+
             </h2>
 
-            <div className="flex gap-2">
-                {[...Array(50)].map((_, index) => (
-                    <div
-                        key={index}
-                        className="h-8 w-8 rounded bg-green-700"
-                    />
-                ))}
+            <div className="calendar-container overflow-x-auto pb-2 flex justify-center">
+
+                <GitHubCalendar
+                    username={username}
+                    blockSize={12}
+                    blockMargin={4}
+                    fontSize={14}
+                    theme={calendarTheme}
+                    colorScheme={
+                        themeMode === "dark"
+                            ? "dark"
+                            : "light"
+                    }
+                />
+
             </div>
+
         </div>
-    )
-}
 
-export default ContributionHeatmap
\ No newline at end of file
+    );
+};
+
+export default ContributionHeatmap;
\ No newline at end of file
diff --git a/src/components/Profile/EditProfileForm.tsx b/src/components/Profile/EditProfileForm.tsx
deleted file mode 100644
index 4105fd39..00000000
--- a/src/components/Profile/EditProfileForm.tsx
+++ /dev/null
@@ -1,198 +0,0 @@
-import { Camera } from "lucide-react"
-import { useState } from "react"
-
-const EditProfileForm = () => {
-
-    const [formData, setFormData] = useState({
-        username: "deva",
-        email: "deva@gmail.com",
-        bio: "Full Stack Developer passionate about Open Source.",
-        location: "India",
-        github: "deva",
-        avatar: "https://i.pravatar.cc/150",
-    })
-
-    const handleChange = (
-        e: React.ChangeEvent<
-            HTMLInputElement | HTMLTextAreaElement
-        >
-    ) => {
-
-        const { name, value } = e.target
-
-        setFormData((prev) => ({
-            ...prev,
-            [name]: value,
-        }))
-    }
-
-    const handleSubmit = (
-        e: React.FormEvent<HTMLFormElement>
-    ) => {
-
-        e.preventDefault()
-
-        console.log(formData)
-
-        // API CALL
-    }
-
-    return (
-        <div className="min-h-screen bg-black px-4 py-10 text-white">
-
-            <div className="mx-auto max-w-4xl">
-
-                {/* Header */}
-                <div className="mb-8">
-
-                    <h1 className="text-4xl font-bold">
-                        Edit Profile
-                    </h1>
-
-                    <p className="mt-2 text-zinc-400">
-                        Update your personal information and GitHub details
-                    </p>
-                </div>
-
-                {/* Form Container */}
-                <form
-                    onSubmit={handleSubmit}
-                    className="rounded-3xl border border-zinc-800 bg-zinc-900 p-8 shadow-2xl"
-                >
-
-                    {/* Avatar Section */}
-                    <div className="mb-10 flex flex-col items-center border-b border-zinc-800 pb-8">
-
-                        <div className="relative">
-
-                            <img
-                                src={formData.avatar}
-                                alt="profile"
-                                className="h-32 w-32 rounded-full border-4 border-zinc-700 object-cover"
-                            />
-
-                            <button
-                                type="button"
-                                className="absolute bottom-0 right-0 rounded-full bg-orange-500 p-3 transition hover:bg-orange-600"
-                            >
-                                <Camera size={18} />
-                            </button>
-                        </div>
-
-                        <p className="mt-4 text-sm text-zinc-400">
-                            Upload a new profile picture
-                        </p>
-                    </div>
-
-                    {/* Input Grid */}
-                    <div className="grid grid-cols-1 gap-6 md:grid-cols-2">
-
-                        {/* Username */}
-                        <div>
-                            <label className="mb-2 block text-sm font-medium text-zinc-400">
-                                Username
-                            </label>
-
-                            <input
-                                type="text"
-                                name="username"
-                                value={formData.username}
-                                onChange={handleChange}
-                                placeholder="Enter username"
-                                className="w-full rounded-xl border border-zinc-700 bg-zinc-800 px-4 py-3 outline-none transition focus:border-orange-500"
-                            />
-                        </div>
-
-                        {/* Email */}
-                        <div>
-                            <label className="mb-2 block text-sm font-medium text-zinc-400">
-                                Email
-                            </label>
-
-                            <input
-                                type="email"
-                                name="email"
-                                value={formData.email}
-                                onChange={handleChange}
-                                placeholder="Enter email"
-                                className="w-full rounded-xl border border-zinc-700 bg-zinc-800 px-4 py-3 outline-none transition focus:border-orange-500"
-                            />
-                        </div>
-
-                        {/* Location */}
-                        <div>
-                            <label className="mb-2 block text-sm font-medium text-zinc-400">
-                                Location
-                            </label>
-
-                            <input
-                                type="text"
-                                name="location"
-                                value={formData.location}
-                                onChange={handleChange}
-                                placeholder="Your location"
-                                className="w-full rounded-xl border border-zinc-700 bg-zinc-800 px-4 py-3 outline-none transition focus:border-orange-500"
-                            />
-                        </div>
-
-                        {/* GitHub */}
-                        <div>
-                            <label className="mb-2 block text-sm font-medium text-zinc-400">
-                                GitHub Username
-                            </label>
-
-                            <input
-                                type="text"
-                                name="github"
-                                value={formData.github}
-                                onChange={handleChange}
-                                placeholder="GitHub username"
-                                className="w-full rounded-xl border border-zinc-700 bg-zinc-800 px-4 py-3 outline-none transition focus:border-orange-500"
-                            />
-                        </div>
-
-                    </div>
-
-                    {/* Bio */}
-                    <div className="mt-6">
-
-                        <label className="mb-2 block text-sm font-medium text-zinc-400">
-                            Bio
-                        </label>
-
-                        <textarea
-                            rows={5}
-                            name="bio"
-                            value={formData.bio}
-                            onChange={handleChange}
-                            placeholder="Write something about yourself..."
-                            className="w-full rounded-xl border border-zinc-700 bg-zinc-800 px-4 py-3 outline-none transition focus:border-orange-500"
-                        />
-                    </div>
-
-                    {/* Buttons */}
-                    <div className="mt-10 flex items-center justify-end gap-4">
-
-                        <button
-                            type="button"
-                            className="rounded-xl border border-zinc-700 px-6 py-3 font-medium transition hover:bg-zinc-800"
-                        >
-                            Cancel
-                        </button>
-
-                        <button
-                            type="submit"
-                            className="rounded-xl bg-orange-500 px-6 py-3 font-semibold text-white transition hover:bg-orange-600"
-                        >
-                            Save Changes
-                        </button>
-
-                    </div>
-
-                </form>
-            </div>
-        </div>
-    )
-}
-
-export default EditProfileForm
\ No newline at end of file
diff --git a/src/components/Profile/LanguageChart.tsx b/src/components/Profile/LanguageChart.tsx
index 555435cd..f5a80b84 100644
--- a/src/components/Profile/LanguageChart.tsx
+++ b/src/components/Profile/LanguageChart.tsx
@@ -1,34 +1,58 @@
-const LanguageChart = () => {
+interface LanguageChartProps {
+    languages: Record<string, number>;
+}
+
+const LanguageChart = ({ languages }: LanguageChartProps) => {
+    const total = Object.values(languages).reduce((sum, count) => sum + count, 0);
     return (
-        <div className="rounded-2xl border border-zinc-800 bg-zinc-900 p-6">
+        <div className="rounded-2xl border border-zinc-200 bg-white p-6
+                                        dark:border-zinc-800 dark:bg-zinc-900">
 
-            <h2 className="mb-4 text-xl font-semibold">
+            <h2 className="mb-4 text-xl font-semibold text-zinc-700 dark:text-zinc-300">
                 Languages Used
             </h2>
-
             <div className="space-y-4">
 
-                <div>
-                    <div className="mb-1 flex justify-between">
-                        <span>TypeScript</span>
-                        <span>40%</span>
-                    </div>
-
-                    <div className="h-3 rounded-full bg-zinc-800">
-                        <div className="h-3 w-[40%] rounded-full bg-blue-500" />
-                    </div>
-                </div>
-
-                <div>
-                    <div className="mb-1 flex justify-between">
-                        <span>JavaScript</span>
-                        <span>30%</span>
-                    </div>
-
-                    <div className="h-3 rounded-full bg-zinc-800">
-                        <div className="h-3 w-[30%] rounded-full bg-yellow-500" />
-                    </div>
-                </div>
+                {Object.entries(languages)
+                    .map(([language, count]) => {
+
+                        const percentage =
+                            Math.round(
+                                (count / total) * 100
+                            );
+
+                        return (
+
+                            <div key={language} className="rounded-xl shadow-xl border-zinc-200 dark:border-zinc-800 p-2">
+
+                                <div className="mb-1 flex justify-between">
+
+                                    <span className="text-zinc-700 dark:text-zinc-300">
+                                        {language}
+                                    </span>
+
+                                    <span className="text-zinc-700 dark:text-zinc-300">
+                                        {percentage}%
+                                    </span>
+
+                                </div>
+
+                                <div className="h-3 rounded-full bg-white dark:bg-zinc-900">
+
+                                    <div
+                                        className="h-3 rounded-full bg-blue-500"
+                                        style={{
+                                            width: `${percentage}%`
+                                        }}
+                                    />
+
+                                </div>
+
+                            </div>
+
+                        );
+
+                    })}
 
             </div>
         </div>
diff --git a/src/components/Profile/ProfileDropDown.tsx b/src/components/Profile/ProfileDropDown.tsx
index 5b73f88c..ebcb93e5 100644
--- a/src/components/Profile/ProfileDropDown.tsx
+++ b/src/components/Profile/ProfileDropDown.tsx
@@ -1,9 +1,7 @@
 import { useEffect, useRef, useState } from "react";
 import { LogOut, Settings, User } from "lucide-react";
-import axios from "axios";
 import { Link } from "react-router-dom";
 import { logoutUser } from "../../services/auth";
-const backendUrl = import.meta.env.VITE_BACKEND_URL;
 type UserType = {
     id: string,
     username: string,
@@ -16,7 +14,22 @@ interface UserProps {
 const ProfileDropDown = ({ user }: UserProps) => {
     const [open, setOpen] = useState(false);
     const dropdownRef = useRef<HTMLDivElement>(null);
+    const [avatar, setAvatar] = useState("");
 
+    useEffect(() => {
+
+        const dashboard =
+            JSON.parse(
+                localStorage.getItem(
+                    "githubDashboard"
+                ) || "{}"
+            );
+
+        setAvatar(
+            dashboard.profile?.avatar_url || ""
+        );
+
+    }, []);
     // Close dropdown when clicking outside
     useEffect(() => {
         const handleClickOutside = (event: MouseEvent) => {
@@ -58,7 +71,7 @@ const ProfileDropDown = ({ user }: UserProps) => {
                     dark:border-gray-800">
                         <div className="flex items-center gap-3">
                             <img
-                                src="https://i.pravatar.cc/50"
+                                src={avatar}
                                 alt="profile"
                                 className="h-12 w-12 rounded-full"
                             />
@@ -82,25 +95,34 @@ const ProfileDropDown = ({ user }: UserProps) => {
                     {/* Menu Items */}
                     <div className="p-2">
 
-                        <Link className="flex w-full items-center gap-3 rounded-xl px-4 py-3 text-sm text-gray-700 transition hover:bg-gray-100
-                        dark:text-gray-200 dark:hover:bg-gray-800"
+                        <Link
+                            className="flex w-full items-center gap-3 rounded-xl px-4 py-3 text-sm text-gray-700 transition hover:bg-gray-100
+    dark:text-gray-200 dark:hover:bg-gray-800"
                             to={"/me"}
+                            onClick={() => setOpen(false)}
                         >
                             <User size={18} />
                             My Profile
                         </Link>
 
-                        <Link className="flex w-full items-center gap-3 rounded-xl px-4 py-3 text-sm text-gray-700 transition hover:bg-gray-100
-                        dark:text-gray-200 dark:hover:bg-gray-800"
-                        to={"/profile/edit"}
+                        <Link
+                            className="flex w-full items-center gap-3 rounded-xl px-4 py-3 text-sm text-gray-700 transition hover:bg-gray-100
+    dark:text-gray-200 dark:hover:bg-gray-800"
+                            to={"/profile/edit"}
+                            onClick={() => setOpen(false)}
                         >
                             <Settings size={18} />
                             Edit Profile
                         </Link>
 
-                        <button className="flex w-full items-center gap-3 rounded-xl px-4 py-3 text-sm text-red-600 transition hover:bg-red-50
-                        dark:hover:bg-red-900/2"
-                            onClick={logoutUser}>
+                        <button
+                            className="flex w-full items-center gap-3 rounded-xl px-4 py-3 text-sm text-red-600 transition hover:bg-red-50
+    dark:hover:bg-red-900/2"
+                            onClick={() => {
+                                setOpen(false);
+                                logoutUser();
+                            }}
+                        >
                             <LogOut size={18} />
                             Logout
                         </button>
diff --git a/src/components/Profile/ProfileHeader.tsx b/src/components/Profile/ProfileHeader.tsx
index 776f8653..62c1b224 100644
--- a/src/components/Profile/ProfileHeader.tsx
+++ b/src/components/Profile/ProfileHeader.tsx
@@ -1,4 +1,7 @@
+import { useNavigate } from "react-router-dom"
+
 const ProfileHeader = () => {
+    const navigate = useNavigate();
     return (
         <div className="rounded-2xl bg-gradient-to-r from-orange-500 to-orange-700 p-8">
 
@@ -10,7 +13,9 @@ const ProfileHeader = () => {
                 Analyze repositories, commits and coding activity
             </p>
 
-            <button className="mt-5 rounded-lg bg-white px-5 py-2 text-black font-semibold">
+            <button className="mt-5 rounded-lg bg-white px-5 py-2 text-black font-semibold"
+                onClick={() => navigate('/track')}
+            >
                 Connect GitHub
             </button>
         </div>
diff --git a/src/components/Profile/ProfileSidebar.tsx b/src/components/Profile/ProfileSidebar.tsx
index bb704ca7..3443dd27 100644
--- a/src/components/Profile/ProfileSidebar.tsx
+++ b/src/components/Profile/ProfileSidebar.tsx
@@ -1,28 +1,48 @@
-const ProfileSidebar = () => {
+import { LocationIcon } from "@primer/octicons-react"
+import { Files, User2Icon, Users } from "lucide-react"
+
+interface ProfileType {
+    name: string
+    bio: string
+    location: string
+    followers: number
+    imageUrl: string
+}
+
+interface ProfileProps {
+    profile: ProfileType
+}
+
+const ProfileSidebar = ({ profile }: ProfileProps) => {
     return (
-        <div className="rounded-2xl border border-zinc-800 bg-zinc-900 p-6">
+        <div className="rounded-2xl border border-zinc-200 bg-white p-6
+                        dark:border-zinc-800 dark:bg-zinc-900 shadow-sm transition-colors">
 
-            <div className="flex flex-col items-center">
+            <div className="flex flex-col">
 
-                <img
-                    src="https://i.pravatar.cc/150"
-                    alt="profile"
-                    className="h-28 w-28 rounded-full"
-                />
+                {/* <User2Icon className="h-28 w-28 rounded-full" /> */}
+                <img src={profile.imageUrl} alt="User Avatar" className="h-45 w-45 rounded-full
+                                                                            object-cover border border-zinc-300 dark:border-zinc-700" />
 
-                <h1 className="mt-4 text-2xl font-bold">
-                    Deep Patel
+                <h1 className="mt-4 text-2xl font-bold text-zinc-900 dark:text-white">
+                    {profile.name}
                 </h1>
 
-                <p className="text-zinc-400">
-                    Full Stack Developer
+                <p className="text-zinc-600 text-left mt-2 text-sm dark:text-zinc-400 ">
+                    {profile.bio}
                 </p>
             </div>
 
-            <div className="mt-6 space-y-3 text-sm text-zinc-300">
-                <p>📍 India</p>
-                <p>👥 120 Followers</p>
-                <p>📦 42 Repositories</p>
+            <div className="mt-6 space-y-4 text-sm text-zinc-700 dark:text-zinc-300">
+                <span className="flex items-left gap-2">
+                    <LocationIcon className="w-4 h-4" />
+                    <p>{profile.location}</p>
+                </span>
+
+                <span className="flex items-center gap-2">
+                    <Users className="w-4 h-4" />
+                    <p>{profile.followers} followers</p>
+                </span>
             </div>
         </div>
     )
diff --git a/src/components/Profile/RecentActivity.tsx b/src/components/Profile/RecentActivity.tsx
index 2bdd32a0..5063916a 100644
--- a/src/components/Profile/RecentActivity.tsx
+++ b/src/components/Profile/RecentActivity.tsx
@@ -1,28 +1,145 @@
-const RecentActivity = () => {
+import { useState } from "react";
+interface ActivityItem {
+    id: string;
+    type: string;
+    repo: {
+        name: string;
+    };
+    created_at: string;
+    payload: any;
+}
+
+interface RecentActivityProps {
+    activities: ActivityItem[];
+}
+
+const RecentActivity = ({
+    activities
+}: RecentActivityProps) => {
+
+    const [showAll, setShowAll] = useState(false);
+    const formatActivity = (
+        activity: ActivityItem
+    ) => {
+
+        switch (activity.type) {
+
+            case "PushEvent":
+                return "Pushed commits";
+
+            case "PullRequestEvent":
+                return "Opened a pull request";
+
+            case "IssueCommentEvent":
+                return "Created an issue";
+
+            case "WatchEvent":
+                return "Starred a repository";
+
+            case "ForkEvent":
+                return "Forked a repository";
+
+            case "CreateEvent":
+                return "Created a repository";
+
+            default:
+                return activity.type;
+        }
+    };
+
+    const visibleActivities = showAll ? activities : activities.slice(0, 3);
+
     return (
-        <div className="rounded-2xl border border-zinc-800 bg-zinc-900 p-6">
 
-            <h2 className="mb-4 text-xl font-semibold">
+        <div className="rounded-2xl border border-zinc-200 bg-white p-6
+                                            dark:bg-zinc-900 dark:border-zinc-800">
+
+            <h2 className="mb-4 text-xl font-semibold text-zinc-700 dark:text-zinc-300">
                 Recent Activity
             </h2>
 
-            <div className="space-y-3">
+            <div className="space-y-4">
+
+                {visibleActivities.map((activity) => (
+
+                    <div
+                        key={activity.id}
+                        className="rounded-xl bg-white dark:bg-zinc-900 p-4"
+                    >
 
-                <div className="rounded-lg bg-zinc-800 p-4">
-                    ✔ Pushed 5 commits
-                </div>
+                        <div className="flex items-center justify-between shadow-xl border-zinc-200 dark:border-zinc-800 p-2 rounded-xl">
 
-                <div className="rounded-lg bg-zinc-800 p-4">
-                    ⭐ Starred a repository
-                </div>
+                            <div>
 
-                <div className="rounded-lg bg-zinc-800 p-4">
-                    🔥 Opened a pull request
-                </div>
+                                <p className="font-medium text-zinc-700 dark:text-zinc-300">
+
+                                    {formatActivity(activity)}
+
+                                </p>
+
+                                <p className="text-sm text-zinc-400">
+
+                                    {activity.repo.name}
+
+                                </p>
+
+                            </div>
+
+                            <span className="text-xs text-zinc-700 dark:text-zinc-300">
+
+                                {
+                                    new Date(
+                                        activity.created_at
+                                    ).toLocaleDateString()
+                                }
+
+                            </span>
+
+                        </div>
+
+                    </div>
+
+                ))}
+
+                {
+                    activities.length > 5 && (
+
+                        <button
+                            onClick={() =>
+                                setShowAll(!showAll)
+                            }
+                            className="
+                mt-4
+                w-full
+                rounded-lg
+                border
+                border-zinc-200
+                bg-white
+                px-4
+                py-2
+                text-sm
+                text-zinc-700
+                transition
+                hover:bg-zinc-200
+                dark:border-zinc-800
+                dark:bg-zinc-900
+                dark:text-zinc-300
+                dark:hover:bg-zinc-700
+            "
+                        >
+
+                            {showAll
+                                ? "Show Less"
+                                : "Show More"}
+
+                        </button>
+                    )
+                }
 
             </div>
+
         </div>
-    )
-}
+    );
+};
 
-export default RecentActivity
\ No newline at end of file
+export default RecentActivity;
\ No newline at end of file
diff --git a/src/components/Profile/RepositoryList.tsx b/src/components/Profile/RepositoryList.tsx
index ea09a70f..757f81c1 100644
--- a/src/components/Profile/RepositoryList.tsx
+++ b/src/components/Profile/RepositoryList.tsx
@@ -1,33 +1,51 @@
-const RepositoryList = () => {
+import { Github } from "lucide-react"
+
+interface RepositoryItem {
+    name: string;
+    html_url: string;
+}
+
+interface RepositoryListProps {
+    repositories: RepositoryItem[];
+}
+
+const RepositoryList = ({ repositories }: RepositoryListProps) => {
     return (
-        <div className="rounded-2xl border border-zinc-800 bg-zinc-900 p-6">
+        <div className="rounded-2xl border border-zinc-200 bg-white p-6
+                        dark:bg-zinc-900 dark:border-zinc-800">
 
-            <h2 className="mb-4 text-xl font-semibold">
+            <h2 className="mb-4 text-xl font-semibold text-zinc-700 dark:text-zinc-300">
                 Top Repositories
             </h2>
 
             <div className="space-y-4">
 
-                <div className="rounded-xl bg-zinc-800 p-4">
-                    <h3 className="font-semibold">
-                        github-tracker
-                    </h3>
+                {repositories.map((repo, index) => (
+                    <div
+                        key={index}
+                        className="rounded-xl bg-white dark:bg-zinc-900 p-4 shadow-xl"
+                    >
+
+                        <h3 className="font-semibold text-zinc-700 dark:text-zinc-300">
+                            {repo.name}
+                        </h3>
 
-                    <p className="text-sm text-zinc-400">
-                        Track GitHub activity
-                    </p>
-                </div>
+                        <a
+                            href={repo.html_url}
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            className="mt-2 flex items-center gap-2 text-sm text-zinc-400 hover:text-zinc-900 dark:hover:text-zinc-200"
+                        >
+                            <Github className="h-5 w-5" />
 
-                <div className="rounded-xl bg-zinc-800 p-4">
-                    <h3 className="font-semibold">
-                        portfolio
-                    </h3>
+                            <span className="text-zinc-700 dark:text-zinc-300">
+                                GitHub URL
+                            </span>
 
-                    <p className="text-sm text-zinc-400">
-                        Personal website
-                    </p>
-                </div>
+                        </a>
 
+                    </div>
+                ))}
             </div>
         </div>
     )
diff --git a/src/components/Profile/StatsCard.tsx b/src/components/Profile/StatsCard.tsx
index 11ef9861..5c2b3951 100644
--- a/src/components/Profile/StatsCard.tsx
+++ b/src/components/Profile/StatsCard.tsx
@@ -1,6 +1,6 @@
 interface StatsCardProps {
     title: string
-    value: string
+    value: number
 }
 
 const StatsCard = ({
@@ -8,13 +8,14 @@ const StatsCard = ({
     value
 }: StatsCardProps) => {
     return (
-        <div className="rounded-2xl border border-zinc-800 bg-zinc-900 p-6">
+        <div className="rounded-2xl border border-zinc-200 bg-white p-6
+                        dark:bg-zinc-900 dark:border-zinc-800">
 
-            <h2 className="text-zinc-400">
+            <h2 className="text-zinc-700 dark:text-zinc-300">
                 {title}
             </h2>
 
-            <p className="mt-4 text-4xl font-bold">
+            <p className="mt-4 text-4xl font-bold text-zinc-700 dark:text-zinc-300">
                 {value}
             </p>
         </div>
diff --git a/src/hooks/useGithubActivity.ts b/src/hooks/useGithubActivity.ts
new file mode 100644
index 00000000..148e4a1c
--- /dev/null
+++ b/src/hooks/useGithubActivity.ts
@@ -0,0 +1,32 @@
+import { useState } from "react";
+
+export const useGitHubActivity = (
+    getOctokit: () => any
+) => {
+
+    const [activities, setActivities] =
+        useState([]);
+
+    const fetchActivity = async (
+        username: string
+    ) => {
+
+        const octokit = getOctokit();
+
+        const response =
+            await octokit.request(
+                "GET /users/{username}/events",
+                {
+                    username,
+                    per_page: 10,
+                }
+            );
+
+        setActivities(response.data);
+    };
+
+    return {
+        activities,
+        fetchActivity,
+    };
+};
\ No newline at end of file
diff --git a/src/hooks/useGithubRepos.ts b/src/hooks/useGithubRepos.ts
new file mode 100644
index 00000000..8b497ddd
--- /dev/null
+++ b/src/hooks/useGithubRepos.ts
@@ -0,0 +1,128 @@
+import { useState, useCallback } from "react";
+
+export const useGitHubRepositories = (
+    getOctokit: () => any
+) => {
+
+    const [repos, setRepos] = useState([]);
+
+    const [totalStars, setTotalStars] =
+        useState(0);
+
+    const [totalForks, setTotalForks] =
+        useState(0);
+
+    const [topRepositories, setTopRepositories] =
+        useState([]);
+
+    const [languages, setLanguages] =
+        useState<Record<string, number>>({});
+
+    const [loading, setLoading] =
+        useState(false);
+
+    const [error, setError] =
+        useState("");
+
+    const fetchRepositories = useCallback(
+        async (username: string) => {
+
+            const octokit = getOctokit();
+
+            if (!octokit || !username) return;
+
+            setLoading(true);
+            setError("");
+
+            try {
+
+                const response =
+                    await octokit.request(
+                        "GET /users/{username}/repos",
+                        {
+                            username,
+                            per_page: 100,
+                            sort: "updated",
+                        }
+                    );
+
+                const repositories =
+                    response.data;
+
+                setRepos(repositories);
+
+                // TOTAL STARS
+                const stars =
+                    repositories.reduce(
+                        (sum: number, repo: any) =>
+                            sum + repo.stargazers_count,
+                        0
+                    );
+
+                setTotalStars(stars);
+
+                // TOTAL FORKS
+                const forks =
+                    repositories.reduce(
+                        (sum: number, repo: any) =>
+                            sum + repo.forks_count,
+                        0
+                    );
+
+                setTotalForks(forks);
+
+                // TOP REPOSITORIES
+                const topRepos =
+                    [...repositories]
+                        .sort(
+                            (a: any, b: any) =>
+                                b.stargazers_count -
+                                a.stargazers_count
+                        )
+                        .slice(0, 5);
+
+                setTopRepositories(topRepos);
+
+                // LANGUAGES
+                const languageMap:
+                    Record<string, number> = {};
+
+                repositories.forEach((repo: any) => {
+
+                    if (!repo.language) return;
+
+                    languageMap[repo.language] =
+                        (languageMap[repo.language] || 0) + 1;
+
+                });
+
+                setLanguages(languageMap);
+
+            } catch (err: any) {
+
+                setError(
+                    err.message ||
+                    "Failed to fetch repositories"
+                );
+
+            } finally {
+
+                setLoading(false);
+
+            }
+
+        },
+        [getOctokit]
+    );
+
+    return {
+        repos,
+        totalStars,
+        totalForks,
+        topRepositories,
+        languages,
+        loading,
+        error,
+        fetchRepositories,
+    };
+};
\ No newline at end of file
diff --git a/src/hooks/useProfileData.ts b/src/hooks/useProfileData.ts
new file mode 100644
index 00000000..7c54769b
--- /dev/null
+++ b/src/hooks/useProfileData.ts
@@ -0,0 +1,61 @@
+import { useState, useCallback } from "react";
+
+interface GitHubProfile {
+  login: string;
+  name: string;
+  avatar_url: string;
+  bio: string;
+  followers: number;
+  following: number;
+  public_repos: number;
+  location?: string;
+  company?: string;
+  blog?: string;
+  created_at: string;
+}
+
+export const useGitHubProfile = (
+  getOctokit: () => any
+) => {
+  const [profile, setProfile] =
+    useState<GitHubProfile | null>(null);
+
+  const [loading, setLoading] =
+    useState(false);
+
+  const [error, setError] =
+    useState("");
+
+  const fetchProfile = useCallback(async () => {
+    const octokit = getOctokit();
+
+    if (!octokit) return;
+
+    setLoading(true);
+    setError("");
+
+    try {
+      const response =
+        await octokit.request("GET /user");
+
+      setProfile(response.data);
+
+    } catch (err: any) {
+
+      setError(
+        err.message ||
+        "Failed to fetch profile"
+      );
+
+    } finally {
+      setLoading(false);
+    }
+  }, [getOctokit]);
+
+  return {
+    profile,
+    loading,
+    error,
+    fetchProfile,
+  };
+};
\ No newline at end of file
diff --git a/src/pages/Profile/EditProfilePage.tsx b/src/pages/Profile/EditProfilePage.tsx
index 47940466..d2180c9a 100644
--- a/src/pages/Profile/EditProfilePage.tsx
+++ b/src/pages/Profile/EditProfilePage.tsx
@@ -1,20 +1,365 @@
-import EditProfileForm from "../../components/Profile/EditProfileForm"
+import { useEffect, useState } from "react";
+import { useNavigate } from "react-router-dom";
+import ProfileSidebar from "../../components/Profile/ProfileSidebar";
+
+const EditProfile = () => {
+
+    const navigate = useNavigate();
+
+    const [formData, setFormData] = useState({
+        username: "",
+        name: "",
+        bio: "",
+        location: "",
+        website: "",
+        imageUrl: "",
+        followers: 0,
+        repositories: 0,
+    });
+
+    useEffect(() => {
+
+        const dashboard =
+            JSON.parse(
+                localStorage.getItem(
+                    "githubDashboard"
+                ) || "{}"
+            );
+
+        if (dashboard.profile) {
+
+            setFormData({
+                username: dashboard.profile.login || "",
+                name: dashboard.profile.name || "",
+                bio: dashboard.profile.bio || "",
+                location: dashboard.profile.location || "",
+                website: dashboard.profile.blog || "",
+                imageUrl: dashboard.profile.avatar_url || "",
+                followers: dashboard.profile.followers || 0,
+                repositories: dashboard.profile.public_repos || 0,
+            });
+
+        }
+
+    }, []);
+
+    const handleChange = (
+        e: React.ChangeEvent<
+            HTMLInputElement |
+            HTMLTextAreaElement
+        >
+    ) => {
+
+        setFormData({
+            ...formData,
+            [e.target.name]: e.target.value
+        });
+
+    };
+
+    const handleSave = () => {
+
+        const dashboard =
+            JSON.parse(
+                localStorage.getItem(
+                    "githubDashboard"
+                ) || "{}"
+            );
+
+        dashboard.profile = {
+            ...dashboard.profile,
+            name: formData.name,
+            bio: formData.bio,
+            location: formData.location,
+            blog: formData.website,
+            avatar_url: formData.imageUrl,
+        };
+
+        localStorage.setItem(
+            "githubDashboard",
+            JSON.stringify(dashboard)
+        );
+
+        navigate("/me");
+
+    };
 
-const EditProfilePage = () => {
     return (
-        <div className="min-h-screen bg-black p-6 text-white">
 
-            <div className="mx-auto max-w-3xl">
+        <div className="
+            min-h-screen
+            bg-white
+            dark:bg-zinc-950
+            text-black
+            dark:text-white
+            p-6
+            transition-colors
+        ">
+
+            <div className="
+                grid
+                grid-cols-1
+                lg:grid-cols-12
+                gap-6
+            ">
+
+                {/* Preview Section */}
+                <div className="lg:col-span-4">
+
+                    <ProfileSidebar
+                        profile={formData}
+                    />
+
+                </div>
+
+                {/* Edit Form */}
+                <div className="lg:col-span-8">
+
+                    <div className="
+                        rounded-2xl
+                        border
+                        border-zinc-200
+                        dark:border-zinc-800
+                        bg-white
+                        dark:bg-zinc-900
+                        p-6
+                        shadow-sm
+                    ">
+
+                        <h1 className="
+                            text-2xl
+                            font-bold
+                            mb-6
+                        ">
+                            Edit Profile
+                        </h1>
+
+                        <div className="space-y-5">
 
-                <h1 className="mb-8 text-4xl font-bold">
-                    Edit Profile
-                </h1>
+                            {/* Name */}
+                            <div>
 
-                <EditProfileForm />
+                                <label
+                                    htmlFor="name"
+                                    className="mb-2 block text-sm font-medium"
+                                >
+                                    Name
+                                </label>
+
+                                <input
+                                    id="name"
+                                    type="text"
+                                    name="name"
+                                    value={formData.name}
+                                    onChange={handleChange}
+                                    className="
+                                        w-full
+                                        rounded-xl
+                                        border
+                                        border-zinc-300
+                                        dark:border-zinc-700
+                                        bg-zinc-50
+                                        dark:bg-zinc-800
+                                        px-4
+                                        py-3
+                                        outline-none
+                                        focus:ring-2
+                                        focus:ring-blue-500
+                                    "
+                                />
+
+                            </div>
+
+                            {/* Bio */}
+                            <div>
+
+                                <label
+                                    htmlFor="bio"
+                                    className="mb-2 block text-sm font-medium"
+                                >
+                                    Bio
+                                </label>
+
+                                <textarea
+                                    id="bio"
+                                    name="bio"
+                                    value={formData.bio}
+                                    onChange={handleChange}
+                                    rows={4}
+                                    className="
+                                        w-full
+                                        rounded-xl
+                                        border
+                                        border-zinc-300
+                                        dark:border-zinc-700
+                                        bg-zinc-50
+                                        dark:bg-zinc-800
+                                        px-4
+                                        py-3
+                                        outline-none
+                                        focus:ring-2
+                                        focus:ring-blue-500
+                                    "
+                                />
+
+                            </div>
+
+                            {/* Location */}
+                            <div>
+
+                                <label
+                                    htmlFor="location"
+                                    className="mb-2 block text-sm font-medium"
+                                >
+                                    Location
+                                </label>
+
+                                <input
+                                    id="location"
+                                    type="text"
+                                    name="location"
+                                    value={formData.location}
+                                    onChange={handleChange}
+                                    className="
+                                        w-full
+                                        rounded-xl
+                                        border
+                                        border-zinc-300
+                                        dark:border-zinc-700
+                                        bg-zinc-50
+                                        dark:bg-zinc-800
+                                        px-4
+                                        py-3
+                                        outline-none
+                                        focus:ring-2
+                                        focus:ring-blue-500
+                                    "
+                                />
+
+                            </div>
+
+                            {/* Website */}
+                            <div>
+
+                                <label
+                                    htmlFor="website"
+                                    className="mb-2 block text-sm font-medium"
+                                >
+                                    Website
+                                </label>
+
+                                <input
+                                    id="website"
+                                    type="text"
+                                    name="website"
+                                    value={formData.website}
+                                    onChange={handleChange}
+                                    className="
+                                        w-full
+                                        rounded-xl
+                                        border
+                                        border-zinc-300
+                                        dark:border-zinc-700
+                                        bg-zinc-50
+                                        dark:bg-zinc-800
+                                        px-4
+                                        py-3
+                                        outline-none
+                                        focus:ring-2
+                                        focus:ring-blue-500
+                                    "
+                                />
+
+                            </div>
+
+                            {/* Avatar URL */}
+                            <div>
+
+                                <label
+                                    htmlFor="imageUrl"
+                                    className="mb-2 block text-sm font-medium"
+                                >
+                                    Profile Image URL
+                                </label>
+
+                                <input
+                                    id="imageUrl"
+                                    type="text"
+                                    name="imageUrl"
+                                    value={formData.imageUrl}
+                                    onChange={handleChange}
+                                    className="
+                                        w-full
+                                        rounded-xl
+                                        border
+                                        border-zinc-300
+                                        dark:border-zinc-700
+                                        bg-zinc-50
+                                        dark:bg-zinc-800
+                                        px-4
+                                        py-3
+                                        outline-none
+                                        focus:ring-2
+                                        focus:ring-blue-500
+                                    "
+                                />
+
+                            </div>
+
+                            {/* Buttons */}
+                            <div className="
+                                flex
+                                items-center
+                                gap-4
+                                pt-4
+                            ">
+
+                                <button
+                                    onClick={handleSave}
+                                    className="
+                                        rounded-xl
+                                        bg-blue-600
+                                        hover:bg-blue-700
+                                        px-6
+                                        py-3
+                                        font-medium
+                                        text-white
+                                        transition
+                                    "
+                                >
+                                    Save Changes
+                                </button>
+
+                                <button
+                                    onClick={() => navigate("/profile")}
+                                    className="
+                                        rounded-xl
+                                        border
+                                        border-zinc-300
+                                        dark:border-zinc-700
+                                        px-6
+                                        py-3
+                                        font-medium
+                                        hover:bg-zinc-100
+                                        dark:hover:bg-zinc-800
+                                        transition
+                                    "
+                                >
+                                    Cancel
+                                </button>
+
+                            </div>
+
+                        </div>
+
+                    </div>
+
+                </div>
 
             </div>
+
         </div>
-    )
-}
+    );
+};
 
-export default EditProfilePage
\ No newline at end of file
+export default EditProfile;
\ No newline at end of file
diff --git a/src/pages/Profile/ProfilePage.tsx b/src/pages/Profile/ProfilePage.tsx
index 2b25e38d..935a0a87 100644
--- a/src/pages/Profile/ProfilePage.tsx
+++ b/src/pages/Profile/ProfilePage.tsx
@@ -1,3 +1,4 @@
+import { useEffect, useState } from "react"
 import ContributionHeatmap from "../../components/Profile/ContributionHeatmap"
 import LanguageChart from "../../components/Profile/LanguageChart"
 import ProfileHeader from "../../components/Profile/ProfileHeader"
@@ -8,36 +9,91 @@ import StatsCard from "../../components/Profile/StatsCard"
 
 
 const ProfilePage = () => {
+    const [userInfo, setUserInfo] = useState({
+        username: "",
+        name: "",
+        bio: "",
+        location: "",
+        followers: 0,
+        repositories: 0,
+        imageUrl: ""
+    });
+
+    const [stats, setStats] = useState({
+        stars: 0,
+        issues: 0,
+        pullrequests: 0
+    });
+
+    const [topRepos, setTopRepos] = useState([]);
+    const [languages, setLanguages] = useState<Record<string, number>>({});
+    const [activities, setActivities] = useState([]);
+    useEffect(() => {
+        const dashboard =
+            JSON.parse(
+                localStorage.getItem(
+                    "githubDashboard"
+                ) || "{}"
+            );
+        if (dashboard.profile && dashboard.repositories) {
+            setUserInfo({
+                username: dashboard.profile.login || "",
+                name: dashboard.profile.name || "",
+                bio: dashboard.profile.bio || "",
+                location: dashboard.profile.location || "",
+                followers: dashboard.profile.followers || 0,
+                repositories: dashboard.profile.public_repos || 0,
+                imageUrl: dashboard.profile.avatar_url || ""
+            });
+            setStats({
+                stars: dashboard.repositories.totalStars || 0,
+                issues: dashboard.analytics.totalIssues || 0,
+                pullrequests: dashboard.analytics.totalPrs || 0
+            });
+            setTopRepos(
+                dashboard.repositories.topRepositories || [],
+            );
+            setLanguages(
+                dashboard.repositories?.languages || {}
+            );
+            setActivities(
+                dashboard.activities || []
+            );
+        }
+    }, [])
     return (
-        <div className="min-h-screen bg-black text-white p-6">
-            <div className="grid grid-cols-12 gap-6">
+        <div className="min-h-screen bg-white
+            dark:bg-zinc-950
+            text-black
+            dark:text-white p-6">
+            <div className="grid grid-cols-1 md:grid-cols-12 gap-6">
 
                 {/* Sidebar */}
-                <div className="col-span-3">
-                    <ProfileSidebar />
+                <div className="col-span-12 md:col-span-3">
+                    <ProfileSidebar profile={userInfo} />
                 </div>
 
                 {/* Main Content */}
-                <div className="col-span-9 space-y-6">
+                <div className="col-span-12 md:col-span-9 space-y-6">
 
-                    <ProfileHeader />
+                    {!userInfo.name && <ProfileHeader />}
 
                     {/* Stats */}
-                    <div className="grid grid-cols-4 gap-4">
-                        <StatsCard title="Repositories" value="24" />
-                        <StatsCard title="Followers" value="120" />
-                        <StatsCard title="Stars" value="450" />
-                        <StatsCard title="Commits" value="1.2K" />
+                    <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
+                        <StatsCard title="Followers" value={userInfo?.followers} />
+                        <StatsCard title="Stars" value={stats?.stars} />
+                        <StatsCard title="Pull Requests" value={stats?.pullrequests} />
+                        <StatsCard title="Issues" value={stats?.issues} />
                     </div>
 
-                    <ContributionHeatmap />
+                    <ContributionHeatmap username={userInfo?.username} />
 
-                    <div className="grid grid-cols-2 gap-6">
-                        <RepositoryList />
-                        <LanguageChart />
+                    <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                        <RepositoryList repositories={topRepos} />
+                        <LanguageChart languages={languages} />
                     </div>
 
-                    <RecentActivity />
+                    <RecentActivity activities={activities} />
                 </div>
             </div>
         </div>
diff --git a/src/pages/Tracker/Tracker.tsx b/src/pages/Tracker/Tracker.tsx
index 2bd4d30c..05ebe0bc 100644
--- a/src/pages/Tracker/Tracker.tsx
+++ b/src/pages/Tracker/Tracker.tsx
@@ -32,6 +32,10 @@ import {
 import { useTheme } from "@mui/material/styles";
 import { useGitHubAuth } from "../../hooks/useGitHubAuth";
 import { useGitHubData } from "../../hooks/useGitHubData";
+import { useGitHubProfile } from "../../hooks/useProfileData";
+import { useGitHubRepositories } from "../../hooks/useGithubRepos";
+import { useGitHubActivity } from "../../hooks/useGithubActivity";
+
 
 const ROWS_PER_PAGE = 10;
 
@@ -88,6 +92,9 @@ const Home: React.FC = () => {
   const handleSubmit = (e: React.FormEvent<HTMLFormElement>): void => {
     e.preventDefault();
     setPage(0);
+    fetchProfile();
+    fetchRepositories(username);
+    fetchActivity(username);
     fetchData(username, 1, ROWS_PER_PAGE);
   };
 
@@ -141,17 +148,17 @@ const Home: React.FC = () => {
 
     if (item.pull_request) {
 
-        if (item.pull_request.merged_at)
-            return <GitMergeIcon size={16} className="icon-merged" />;
+      if (item.pull_request.merged_at)
+        return <GitMergeIcon size={16} className="icon-merged" />;
 
-        if (item.state === 'closed')
-            return <GitPullRequestClosedIcon size={16} className="icon-pr-closed" />;
+      if (item.state === 'closed')
+        return <GitPullRequestClosedIcon size={16} className="icon-pr-closed" />;
 
-        return <GitPullRequestIcon size={16} className="icon-pr-open" />;
+      return <GitPullRequestIcon size={16} className="icon-pr-open" />;
     }
 
     if (item.state === 'closed')
-        return <IssueClosedIcon size={16} className="icon-issue-closed" />;
+      return <IssueClosedIcon size={16} className="icon-issue-closed" />;
 
     return <IssueOpenedIcon size={16} className="icon-issue-open" />;
   };
@@ -162,6 +169,60 @@ const Home: React.FC = () => {
   const currentFilteredData = filterData(currentRawData, tab === 0 ? issueFilter : prFilter);
   const totalCount = tab === 0 ? totalIssues : totalPrs;
 
+  // const profileStats = useProfileData(
+  //   issues,
+  //   prs,
+  //   username
+  // )
+
+  const {
+    profile,
+    fetchProfile,
+  } = useGitHubProfile(getOctokit);
+
+  const {
+    repos,
+    totalStars,
+    totalForks,
+    topRepositories,
+    languages,
+    fetchRepositories,
+  } = useGitHubRepositories(getOctokit);
+
+  const {
+    activities,
+    fetchActivity
+  } = useGitHubActivity(getOctokit)
+  useEffect(() => {
+    if (!profile || !repos.length || !activities.length) return;
+
+    try {
+      const gitHubDashBoard = {
+        profile,
+        repositories: {
+          repos,
+          totalStars,
+          totalForks,
+          topRepositories,
+          languages,
+        },
+        analytics: {
+          totalIssues,
+          totalPrs,
+        },
+        activities
+      };
+
+      localStorage.setItem(
+        "githubDashboard",
+        JSON.stringify(gitHubDashBoard)
+      );
+
+    } catch (error) {
+      console.error("Something went wrong while saving profile or RepoStats.");
+    }
+  })
+
   return (
     <Container maxWidth="lg" sx={{ mt: 4, minHeight: "80vh", color: theme.palette.text.primary }}>
       {/* Auth Form */}
@@ -303,16 +364,16 @@ const Home: React.FC = () => {
                   <TableRow key={item.id}>
 
                     <TableCell sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
-                        {getStatusIcon(item)}
-                        <Link
-                            href={item.html_url}
-                            target="_blank"
-                            rel="noopener noreferrer"
-                            underline="hover"
-                            sx={{ color: theme.palette.primary.main }}
-                        >
-                            {item.title}
-                        </Link>
+                      {getStatusIcon(item)}
+                      <Link
+                        href={item.html_url}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        underline="hover"
+                        sx={{ color: theme.palette.primary.main }}
+                      >
+                        {item.title}
+                      </Link>
                     </TableCell>
 
 
diff --git a/src/services/auth.ts b/src/services/auth.ts
index 1667e534..5d175e76 100644
--- a/src/services/auth.ts
+++ b/src/services/auth.ts
@@ -4,22 +4,24 @@ const backendUrl = import.meta.env.VITE_BACKEND_URL;
 
 export const logoutUser = async (): Promise<void> => {
     try {
-        const response = await axios.get(`${backendUrl}/api/auth/logout`);
 
-        if (response.data) {
-
-            // Remove stored user
-            localStorage.removeItem("user");
-
-            // Redirect to login/home
-            window.location.href = "/login";
+        const response = await axios.get(
+            `${backendUrl}/api/auth/logout`
+        );
 
+        // Safe logging
+        if (response.data?.message) {
             console.log(response.data.message);
         }
-        else {
-            console.log(response.data.message);
-        }
+
+        // Always cleanup + redirect
+        localStorage.clear();
+
+        window.location.href = "/login";
+
     } catch (error) {
-        console.error("Logout failed", error)
+
+        console.error("Logout failed", error);
+
     }
-}
\ No newline at end of file
+};
\ No newline at end of file

From b7996a952b187f6e8c3a0a2443bd6c17706bd9d9 Mon Sep 17 00:00:00 2001
From: Pran-bot <pjgawande1966@gmail.com>
Date: Thu, 28 May 2026 21:48:15 +0530
Subject: [PATCH 5/5] Added [feature]: updated the code as per review for third
 time

---
 src/components/Navbar.tsx                  |  2 +-
 src/components/Profile/LanguageChart.tsx   |  6 ++--
 src/components/Profile/ProfileDropDown.tsx | 25 ++++++++++------
 src/components/Profile/ProfileSidebar.tsx  |  4 +--
 src/components/Profile/RecentActivity.tsx  |  4 +--
 src/hooks/useGithubActivity.ts             | 33 ++++++++++++++--------
 src/hooks/useGithubRepos.ts                |  7 ++---
 src/hooks/useProfileData.ts                | 21 +++++++-------
 src/pages/Profile/EditProfilePage.tsx      | 32 ++++++++++++---------
 src/pages/Profile/ProfilePage.tsx          | 22 ++++++++++-----
 src/pages/Tracker/Tracker.tsx              | 32 +++++++++++++++------
 11 files changed, 116 insertions(+), 72 deletions(-)

diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
index 3cbc6b06..6732f506 100644
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@@ -152,7 +152,7 @@ const Navbar: React.FC = () => {
                   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)}
                 >
-                  My Profile
+                  Edit Profile
                 </Link>
                 <button
                   className="block w-full text-left text-lg font-medium hover:text-gray-300 transition-all px-2 py-1 border border-transparent hover:border-gray-400 rounded"
diff --git a/src/components/Profile/LanguageChart.tsx b/src/components/Profile/LanguageChart.tsx
index f5a80b84..c3e6bc0f 100644
--- a/src/components/Profile/LanguageChart.tsx
+++ b/src/components/Profile/LanguageChart.tsx
@@ -17,9 +17,9 @@ const LanguageChart = ({ languages }: LanguageChartProps) => {
                     .map(([language, count]) => {
 
                         const percentage =
-                            Math.round(
-                                (count / total) * 100
-                            );
+                            total > 0
+                                ? Math.round((count / total) * 100)
+                                : 0;
 
                         return (
 
diff --git a/src/components/Profile/ProfileDropDown.tsx b/src/components/Profile/ProfileDropDown.tsx
index ebcb93e5..6d06b9a2 100644
--- a/src/components/Profile/ProfileDropDown.tsx
+++ b/src/components/Profile/ProfileDropDown.tsx
@@ -18,17 +18,24 @@ const ProfileDropDown = ({ user }: UserProps) => {
 
     useEffect(() => {
 
-        const dashboard =
-            JSON.parse(
-                localStorage.getItem(
-                    "githubDashboard"
-                ) || "{}"
+        try {
+            const dashboard =
+                JSON.parse(
+                    localStorage.getItem(
+                        "githubDashboard"
+                    ) || "{}"
+                );
+            setAvatar(
+                dashboard.profile?.avatar_url || ""
             );
+        } catch (error) {
 
-        setAvatar(
-            dashboard.profile?.avatar_url || ""
-        );
-
+            console.error(
+                "Failed to parse githubDashboard",
+                error
+            );
+            setAvatar("");
+        }
     }, []);
     // Close dropdown when clicking outside
     useEffect(() => {
diff --git a/src/components/Profile/ProfileSidebar.tsx b/src/components/Profile/ProfileSidebar.tsx
index 3443dd27..b9dece10 100644
--- a/src/components/Profile/ProfileSidebar.tsx
+++ b/src/components/Profile/ProfileSidebar.tsx
@@ -21,7 +21,7 @@ const ProfileSidebar = ({ profile }: ProfileProps) => {
             <div className="flex flex-col">
 
                 {/* <User2Icon className="h-28 w-28 rounded-full" /> */}
-                <img src={profile.imageUrl} alt="User Avatar" className="h-45 w-45 rounded-full
+                <img src={profile.imageUrl} alt="User Avatar" className="h-52 w-52 rounded-full
                                                                             object-cover border border-zinc-300 dark:border-zinc-700" />
 
                 <h1 className="mt-4 text-2xl font-bold text-zinc-900 dark:text-white">
@@ -34,7 +34,7 @@ const ProfileSidebar = ({ profile }: ProfileProps) => {
             </div>
 
             <div className="mt-6 space-y-4 text-sm text-zinc-700 dark:text-zinc-300">
-                <span className="flex items-left gap-2">
+                <span className="flex gap-2">
                     <LocationIcon className="w-4 h-4" />
                     <p>{profile.location}</p>
                 </span>
diff --git a/src/components/Profile/RecentActivity.tsx b/src/components/Profile/RecentActivity.tsx
index 5063916a..94dfe0f8 100644
--- a/src/components/Profile/RecentActivity.tsx
+++ b/src/components/Profile/RecentActivity.tsx
@@ -31,7 +31,7 @@ const RecentActivity = ({
                 return "Opened a pull request";
 
             case "IssueCommentEvent":
-                return "Created an issue";
+                return "Commented on an issue";
 
             case "WatchEvent":
                 return "Starred a repository";
@@ -102,7 +102,7 @@ const RecentActivity = ({
                 ))}
 
                 {
-                    activities.length > 5 && (
+                    activities.length > 3 && (
 
                         <button
                             onClick={() =>
diff --git a/src/hooks/useGithubActivity.ts b/src/hooks/useGithubActivity.ts
index 148e4a1c..d7feda1c 100644
--- a/src/hooks/useGithubActivity.ts
+++ b/src/hooks/useGithubActivity.ts
@@ -10,21 +10,30 @@ export const useGitHubActivity = (
     const fetchActivity = async (
         username: string
     ) => {
-
         const octokit = getOctokit();
-
-        const response =
-            await octokit.request(
-                "GET /users/{username}/events",
-                {
-                    username,
-                    per_page: 10,
-                }
+        if (!octokit) {
+            console.error("Octokit client unavailable");
+            setActivities([]);
+            return;
+        }
+        try {
+            const response =
+                await octokit.request(
+                    "GET /users/{username}/events",
+                    {
+                        username,
+                        per_page: 10,
+                    }
+                );
+            setActivities(response.data);
+        } catch (error) {
+            console.error(
+                "Failed to fetch GitHub activity",
+                error
             );
-
-        setActivities(response.data);
+            setActivities([]);
+        }
     };
-
     return {
         activities,
         fetchActivity,
diff --git a/src/hooks/useGithubRepos.ts b/src/hooks/useGithubRepos.ts
index 8b497ddd..6f04c607 100644
--- a/src/hooks/useGithubRepos.ts
+++ b/src/hooks/useGithubRepos.ts
@@ -36,8 +36,8 @@ export const useGitHubRepositories = (
 
             try {
 
-                const response =
-                    await octokit.request(
+                const repositories =
+                    await octokit.paginate(
                         "GET /users/{username}/repos",
                         {
                             username,
@@ -46,9 +46,6 @@ export const useGitHubRepositories = (
                         }
                     );
 
-                const repositories =
-                    response.data;
-
                 setRepos(repositories);
 
                 // TOTAL STARS
diff --git a/src/hooks/useProfileData.ts b/src/hooks/useProfileData.ts
index 7c54769b..f9954f35 100644
--- a/src/hooks/useProfileData.ts
+++ b/src/hooks/useProfileData.ts
@@ -26,27 +26,28 @@ export const useGitHubProfile = (
   const [error, setError] =
     useState("");
 
-  const fetchProfile = useCallback(async () => {
+  const fetchProfile = useCallback(async (
+    username?: string
+  ) => {
     const octokit = getOctokit();
-
     if (!octokit) return;
-
     setLoading(true);
     setError("");
-
     try {
-      const response =
-        await octokit.request("GET /user");
-
+      const response = username
+        ? await octokit.request(
+          "GET /users/{username}",
+          { username }
+        )
+        : await octokit.request(
+          "GET /user"
+        );
       setProfile(response.data);
-
     } catch (err: any) {
-
       setError(
         err.message ||
         "Failed to fetch profile"
       );
-
     } finally {
       setLoading(false);
     }
diff --git a/src/pages/Profile/EditProfilePage.tsx b/src/pages/Profile/EditProfilePage.tsx
index d2180c9a..10796710 100644
--- a/src/pages/Profile/EditProfilePage.tsx
+++ b/src/pages/Profile/EditProfilePage.tsx
@@ -2,6 +2,22 @@ import { useEffect, useState } from "react";
 import { useNavigate } from "react-router-dom";
 import ProfileSidebar from "../../components/Profile/ProfileSidebar";
 
+const safeParseDashboard = () => {
+    try {
+        return JSON.parse(
+            localStorage.getItem(
+                "githubDashboard"
+            ) || "{}"
+        );
+    } catch (error) {
+        console.error(
+            "Failed to parse githubDashboard",
+            error
+        );
+        return {};
+    }
+};
+
 const EditProfile = () => {
 
     const navigate = useNavigate();
@@ -19,12 +35,7 @@ const EditProfile = () => {
 
     useEffect(() => {
 
-        const dashboard =
-            JSON.parse(
-                localStorage.getItem(
-                    "githubDashboard"
-                ) || "{}"
-            );
+        const dashboard = safeParseDashboard();
 
         if (dashboard.profile) {
 
@@ -59,12 +70,7 @@ const EditProfile = () => {
 
     const handleSave = () => {
 
-        const dashboard =
-            JSON.parse(
-                localStorage.getItem(
-                    "githubDashboard"
-                ) || "{}"
-            );
+        const dashboard = safeParseDashboard();
 
         dashboard.profile = {
             ...dashboard.profile,
@@ -331,7 +337,7 @@ const EditProfile = () => {
                                 </button>
 
                                 <button
-                                    onClick={() => navigate("/profile")}
+                                    onClick={() => navigate("/me")}
                                     className="
                                         rounded-xl
                                         border
diff --git a/src/pages/Profile/ProfilePage.tsx b/src/pages/Profile/ProfilePage.tsx
index 935a0a87..8a9bae3f 100644
--- a/src/pages/Profile/ProfilePage.tsx
+++ b/src/pages/Profile/ProfilePage.tsx
@@ -29,12 +29,20 @@ const ProfilePage = () => {
     const [languages, setLanguages] = useState<Record<string, number>>({});
     const [activities, setActivities] = useState([]);
     useEffect(() => {
-        const dashboard =
-            JSON.parse(
-                localStorage.getItem(
-                    "githubDashboard"
-                ) || "{}"
+        let dashboard: any = {};
+        try {
+            dashboard =
+                JSON.parse(
+                    localStorage.getItem(
+                        "githubDashboard"
+                    ) || "{}"
+                );
+        } catch (error) {
+            console.error(
+                "Failed to parse githubDashboard",
+                error
             );
+        }
         if (dashboard.profile && dashboard.repositories) {
             setUserInfo({
                 username: dashboard.profile.login || "",
@@ -47,8 +55,8 @@ const ProfilePage = () => {
             });
             setStats({
                 stars: dashboard.repositories.totalStars || 0,
-                issues: dashboard.analytics.totalIssues || 0,
-                pullrequests: dashboard.analytics.totalPrs || 0
+                issues: dashboard.analytics?.totalIssues ?? 0,
+                pullrequests: dashboard.analytics?.totalPrs ?? 0
             });
             setTopRepos(
                 dashboard.repositories.topRepositories || [],
diff --git a/src/pages/Tracker/Tracker.tsx b/src/pages/Tracker/Tracker.tsx
index 05ebe0bc..0ff191ba 100644
--- a/src/pages/Tracker/Tracker.tsx
+++ b/src/pages/Tracker/Tracker.tsx
@@ -92,7 +92,7 @@ const Home: React.FC = () => {
   const handleSubmit = (e: React.FormEvent<HTMLFormElement>): void => {
     e.preventDefault();
     setPage(0);
-    fetchProfile();
+    fetchProfile(username);
     fetchRepositories(username);
     fetchActivity(username);
     fetchData(username, 1, ROWS_PER_PAGE);
@@ -194,8 +194,13 @@ const Home: React.FC = () => {
     fetchActivity
   } = useGitHubActivity(getOctokit)
   useEffect(() => {
-    if (!profile || !repos.length || !activities.length) return;
-
+    if (
+      !profile ||
+      repos == null ||
+      activities == null
+    ) {
+      return;
+    }
     try {
       const gitHubDashBoard = {
         profile,
@@ -210,18 +215,29 @@ const Home: React.FC = () => {
           totalIssues,
           totalPrs,
         },
-        activities
+        activities,
       };
-
       localStorage.setItem(
         "githubDashboard",
         JSON.stringify(gitHubDashBoard)
       );
-
     } catch (error) {
-      console.error("Something went wrong while saving profile or RepoStats.");
+      console.error(
+        "Something went wrong while saving profile or RepoStats.",
+        error
+      );
     }
-  })
+  }, [
+    profile,
+    repos,
+    totalStars,
+    totalForks,
+    topRepositories,
+    languages,
+    totalIssues,
+    totalPrs,
+    activities,
+  ]);
 
   return (
     <Container maxWidth="lg" sx={{ mt: 4, minHeight: "80vh", color: theme.palette.text.primary }}>