diff --git a/backend/env.example b/backend/env.example
index 9a73ee5..26d4331 100644
--- a/backend/env.example
+++ b/backend/env.example
@@ -10,4 +10,5 @@ ADMIN_EMAIL=
 RESEND_API_KEY =
 EMAIL_USER=
 EMAIL_PASSWORD
-EMAIL_VERIFIER_API_KEY=
\ No newline at end of file
+EMAIL_VERIFIER_API_KEY=
+GITHUB_TOKEN=
\ No newline at end of file
diff --git a/backend/routes/github.route.js b/backend/routes/github.route.js
new file mode 100644
index 0000000..7a3f3ba
--- /dev/null
+++ b/backend/routes/github.route.js
@@ -0,0 +1,142 @@
+// routes/github.route.js
+const express = require("express");
+const fetch = (...args) =>
+  import("node-fetch").then(({ default: fetch }) => fetch(...args));
+const router = express.Router();
+
+// Helper to run GitHub GraphQL queries
+const runGraphQL = async (query, variables = {}) => {
+  if (!process.env.GITHUB_TOKEN) {
+    throw new Error("GitHub token not configured in environment variables");
+  }
+
+  const response = await fetch("https://api.github.com/graphql", {
+    method: "POST",
+    headers: {
+      Authorization: `bearer ${process.env.GITHUB_TOKEN}`,
+      "Content-Type": "application/json",
+    },
+    body: JSON.stringify({ query, variables }),
+  });
+
+  const data = await response.json();
+  if (data.errors) throw new Error(JSON.stringify(data.errors));
+  return data.data;
+};
+
+// GET /api/github/:username
+router.get("/:username", async (req, res) => {
+  const { username } = req.params;
+
+  try {
+    const query = `
+      query($login: String!) {
+        user(login: $login) {
+          login
+          name
+          avatarUrl
+          bio
+          followers { totalCount }
+          following { totalCount }
+          repositories(
+            first: 50,
+            privacy: PUBLIC,
+            isFork: false,
+            orderBy: { field: STARGAZERS, direction: DESC }
+          ) {
+            nodes {
+              name
+              url
+              description
+              stargazerCount
+              forkCount
+              languages(first: 5, orderBy: { field: SIZE, direction: DESC }) {
+                edges {
+                  size
+                  node {
+                    name
+                  }
+                }
+              }
+            }
+          }
+          contributionsCollection {
+            contributionCalendar {
+              totalContributions
+              weeks {
+                contributionDays {
+                  date
+                  contributionCount
+                  color
+                }
+              }
+            }
+            totalCommitContributions
+          }
+        }
+      }
+    `;
+
+    const data = await runGraphQL(query, { login: username });
+    const user = data.user;
+
+    if (!user) return res.status(404).json({ error: "User not found" });
+
+    // Top 6 repos by stars
+    const topRepos = user.repositories.nodes
+      .sort((a, b) => b.stargazerCount - a.stargazerCount)
+      .slice(0, 6)
+      .map((r) => ({
+        name: r.name,
+        url: r.url,
+        description: r.description,
+        stars: r.stargazerCount,
+        forks: r.forkCount,
+        languages: r.languages.edges.map((edge) => ({
+          name: edge.node.name,
+          size: edge.size,
+        })),
+      }));
+
+    // Aggregate languages across all repos
+    const languages = {};
+    user.repositories.nodes.forEach((repo) => {
+      repo.languages.edges.forEach(({ node, size }) => {
+        languages[node.name] = (languages[node.name] || 0) + size;
+      });
+    });
+
+    // Format languages as object for frontend
+    const languagesObj = {};
+    Object.entries(languages).forEach(([name, size]) => {
+      languagesObj[name] = size;
+    });
+
+    // Heatmap: weeks array
+    const weeks = user.contributionsCollection.contributionCalendar.weeks;
+
+    res.json({
+      profile: {
+        login: user.login,
+        name: user.name,
+        avatarUrl: user.avatarUrl,
+        bio: user.bio,
+        followers: user.followers.totalCount,
+        following: user.following.totalCount,
+      },
+      topRepos,
+      contributions: {
+        totalContributions:
+          user.contributionsCollection.contributionCalendar.totalContributions,
+        totalCommits: user.contributionsCollection.totalCommitContributions,
+        weeks, // keep weeks structure for frontend heatmap
+      },
+      languages: languagesObj, // object format for frontend bar chart
+    });
+  } catch (err) {
+    console.error("GitHub API error:", err);
+    res.status(500).json({ error: "User not found or an error occurred" });
+  }
+});
+
+module.exports = router;
\ No newline at end of file
diff --git a/backend/routes/profile.js b/backend/routes/profile.js
index 07ff0db..7a2896e 100644
--- a/backend/routes/profile.js
+++ b/backend/routes/profile.js
@@ -1,73 +1,50 @@
 const express = require('express');
 const router = express.Router();
 const { check, validationResult } = require('express-validator');
-const auth = require('../middleware/auth');
 const multer = require('multer');
 const path = require('path');
-const User = require('../models/User');
 const fs = require('fs');
 const crypto = require('crypto');
-const LeetCode = require("../models/Leetcode")
+const User = require('../models/User');
+const LeetCode = require("../models/Leetcode");
 
-// Helper function to generate avatar URL from email or name
+// Helper to generate avatar URL
 const generateAvatarUrl = (email, name) => {
-  // Use email for consistent avatar, or fallback to name
   const identifier = email || name || 'user';
-  const md5Hash = crypto.createHash('md5').update(identifier.toLowerCase().trim()).digest('hex');
-  
-  // Choose one of these services:
-  // 1. Gravatar
-  // const gravatarUrl = `https://www.gravatar.com/avatar/${md5Hash}?d=identicon&s=400`;
-  
-  // 2. DiceBear (more modern styled avatars)
-  const diceBearStyle = 'micah'; // Options: avataaars, bottts, initials, micah, miniavs, etc.
-  const diceBearUrl = `https://api.dicebear.com/6.x/${diceBearStyle}/svg?seed=${encodeURIComponent(identifier)}`;
-  
-  // 3. UI Avatars (text based)
-  const uiAvatarsUrl = `https://ui-avatars.com/api/?name=${encodeURIComponent(name || 'User')}&background=random&size=128`;
-  
-  // Return your preferred avatar service
-  return diceBearUrl;
+  const diceBearStyle = 'micah';
+  return `https://api.dicebear.com/6.x/${diceBearStyle}/svg?seed=${encodeURIComponent(identifier)}`;
 };
 
-// Set up multer for file uploads
+// Multer setup
 const storage = multer.diskStorage({
-  destination: function(req, file, cb) {
+  destination: function (req, file, cb) {
     const uploadDir = 'uploads/avatars';
-    if (!fs.existsSync(uploadDir)) {
-      fs.mkdirSync(uploadDir, { recursive: true });
-    }
+    if (!fs.existsSync(uploadDir)) fs.mkdirSync(uploadDir, { recursive: true });
     cb(null, uploadDir);
   },
-  filename: function(req, file, cb) {
+  filename: function (req, file, cb) {
     cb(null, `${Date.now()}-${file.originalname}`);
   }
 });
-
-const upload = multer({ 
+const upload = multer({
   storage: storage,
-  limits: { fileSize: 2000000 }, // 2MB limit
-  fileFilter: function(req, file, cb) {
+  limits: { fileSize: 2 * 1024 * 1024 }, // 2MB
+  fileFilter: function (req, file, cb) {
     const filetypes = /jpeg|jpg|png/;
     const extname = filetypes.test(path.extname(file.originalname).toLowerCase());
     const mimetype = filetypes.test(file.mimetype);
-    if (mimetype && extname) {
-      return cb(null, true);
-    } else {
-      cb('Error: Images Only!');
-    }
+    if (mimetype && extname) return cb(null, true);
+    cb('Error: Images Only!');
   }
 });
 
-// @route   GET api/profile
-// @desc    Get current user's profile
-// @access  Private
-router.get('/', auth, async (req, res) => {
+// ---------------------- ROUTES ----------------------
+
+// Get profile (dev mode: fetch first user)
+router.get('/', async (req, res) => {
   try {
-    const user = await User.findById(req.user.id).select('-password');
-    if (!user) {
-      return res.status(400).json({ errors: [{ msg: 'User not found' }] });
-    }
+    const user = await User.findOne().select('-password');
+    if (!user) return res.status(404).json({ errors: [{ msg: 'No user found' }] });
     res.json(user);
   } catch (err) {
     console.error(err.message);
@@ -75,36 +52,23 @@ router.get('/', auth, async (req, res) => {
   }
 });
 
-// @route   POST api/profile/avatar
-// @desc    Upload user avatar
-// @access  Private
-router.post('/avatar', auth, upload.single('avatar'), async (req, res) => {
+// Upload avatar
+router.post('/avatar', upload.single('avatar'), async (req, res) => {
   try {
-    const user = await User.findById(req.user.id).select('-password');
-    if (!user) {
-      return res.status(404).json({ errors: [{ msg: 'User not found' }] });
-    }
+    const user = await User.findOne().select('-password');
+    if (!user) return res.status(404).json({ errors: [{ msg: 'User not found' }] });
 
-    // If a file was uploaded, use that
     if (req.file) {
-      // Delete old avatar if it's stored locally and not the default
+      // Delete old local avatar
       if (user.avatar && user.avatar.startsWith('/uploads/')) {
-        const oldAvatarPath = path.join(__dirname, '..', user.avatar);
-        if (fs.existsSync(oldAvatarPath)) {
-          fs.unlinkSync(oldAvatarPath);
-        }
+        const oldPath = path.join(__dirname, '..', user.avatar);
+        if (fs.existsSync(oldPath)) fs.unlinkSync(oldPath);
       }
-
-      // Update user with new avatar path
-      const avatarPath = `/${req.file.path.replace(/\\/g, '/')}`;
-      user.avatar = avatarPath;
-    } 
-    // Otherwise generate an avatar from dicebear or similar service
-    else {
-      const newAvatar = generateAvatarUrl(user.email, user.name);
-      user.avatar = newAvatar;
+      user.avatar = `/${req.file.path.replace(/\\/g, '/')}`;
+    } else {
+      user.avatar = generateAvatarUrl(user.email, user.name);
     }
-    
+
     await user.save();
     res.json({ avatar: user.avatar });
   } catch (err) {
@@ -113,130 +77,32 @@ router.post('/avatar', auth, upload.single('avatar'), async (req, res) => {
   }
 });
 
-// @route   PUT api/profile
-// @desc    Update user profile
-// @access  Private
+// Update profile
 router.put('/', [
-  auth,
-  [
-    check('name', 'Name is required').not().isEmpty()
-  ]
+  check('name', 'Name is required').not().isEmpty()
 ], async (req, res) => {
   const errors = validationResult(req);
-  if (!errors.isEmpty()) {
-    return res.status(400).json({ errors: errors.array() });
-  }
+  if (!errors.isEmpty()) return res.status(400).json({ errors: errors.array() });
 
   const {
-    name,
-    bio,
-    location,
-    skills,
-    github,
-    gitlab,
-    linkedin,
-    twitter,
-    website,
-    // Competitive coding platforms
-    codechef,
-    hackerrank,
-    leetcode,
-    codeforces,
-    hackerearth
+    name, bio, location, skills, github, gitlab, linkedin, twitter, website,
+    codechef, hackerrank, leetcode, codeforces, hackerearth
   } = req.body;
 
-  // Build profile object
-  const profileFields = {};
-  if (name) profileFields.name = name;
-  if (bio) profileFields.bio = bio;
-  if (location) profileFields.location = location;
-  if (skills && Array.isArray(skills)) {
-    profileFields.skills = skills;
-  } else if (skills) {
-    profileFields.skills = skills.split(',').map(skill => skill.trim());
-  }
-
-  // Build social object
-  profileFields.socialLinks = {};
-  if (github) profileFields.socialLinks.github = github;
-  if (gitlab) profileFields.socialLinks.gitlab = gitlab;
-  if (linkedin) profileFields.socialLinks.linkedin = linkedin;
-  if (twitter) profileFields.socialLinks.twitter = twitter;
-  if (website) profileFields.socialLinks.website = website;
-  
-  // Add competitive coding platforms
-  if (codechef) profileFields.socialLinks.codechef = codechef;
-  if (hackerrank) profileFields.socialLinks.hackerrank = hackerrank;
-  if (leetcode) profileFields.socialLinks.leetcode = leetcode;
-  if (codeforces) profileFields.socialLinks.codeforces = codeforces;
-  if (hackerearth) profileFields.socialLinks.hackerearth = hackerearth;
-
-  try {
-    let user = await User.findById(req.user.id);
-    
-    if (!user) {
-      return res.status(404).json({ errors: [{ msg: 'User not found' }] });
-    }
-
-    // Update
-    user = await User.findByIdAndUpdate(
-      req.user.id,
-      { $set: profileFields },
-      { new: true }
-    ).select('-password');
-
-    return res.json(user);
-  } catch (err) {
-    console.error(err.message);
-    res.status(500).json({ errors: [{ msg: 'Server Error' }] });
-  }
-});
-
-// Added a route to generate a new avatar from online services
-router.post('/generate-avatar', auth, async (req, res) => {
-  try {
-    const user = await User.findById(req.user.id).select('-password');
-    if (!user) {
-      return res.status(404).json({ errors: [{ msg: 'User not found' }] });
-    }
-    
-    // Generate a new avatar using online service
-    const newAvatar = generateAvatarUrl(user.email, user.name);
-    user.avatar = newAvatar;
-    await user.save();
-    
-    res.json({ avatar: newAvatar });
-  } catch (err) {
-    console.error(err.message);
-    res.status(500).json({ errors: [{ msg: 'Server Error' }] });
-  }
-});
-
-// @route   POST api/profile/projects
-// @desc    Add project to profile
-// @access  Private
-router.post('/projects', [
-  auth,
-  [
-    check('name', 'Project name is required').not().isEmpty(),
-    check('description', 'Description is required').not().isEmpty()
-  ]
-], async (req, res) => {
-  const errors = validationResult(req);
-  if (!errors.isEmpty()) {
-    return res.status(400).json({ errors: errors.array() });
-  }
-
-  const { name, description, link } = req.body;
-
   try {
-    const user = await User.findById(req.user.id);
-
-    user.projects.unshift({
-      name,
-      description,
-      link
-    });
+    const user = await User.findOne();
+    if (!user) return res.status(404).json({ errors: [{ msg: 'User not found' }] });
+
+    // Update fields
+    if (name) user.name = name;
+    if (bio) user.bio = bio;
+    if (location) user.location = location;
+    if (skills) user.skills = Array.isArray(skills) ? skills : skills.split(',').map(s => s.trim());
+
+    user.socialLinks = {
+      github, gitlab, linkedin, twitter, website,
+      codechef, hackerrank, leetcode, codeforces, hackerearth
+    };
 
     await user.save();
     res.json(user);
@@ -246,170 +112,45 @@ router.post('/projects', [
   }
 });
 
-// @route   DELETE api/profile/projects/:proj_id
-// @desc    Delete project from profile
-// @access  Private
-router.delete('/projects/:proj_id', auth, async (req, res) => {
+// Generate new avatar
+router.post('/generate-avatar', async (req, res) => {
   try {
-    const user = await User.findById(req.user.id);
-    
-    // Get remove index
-    const removeIndex = user.projects
-      .map(item => item.id)
-      .indexOf(req.params.proj_id);
+    const user = await User.findOne().select('-password');
+    if (!user) return res.status(404).json({ errors: [{ msg: 'User not found' }] });
 
-    if (removeIndex === -1) {
-      return res.status(404).json({ errors: [{ msg: 'Project not found' }] });
-    }
-    
-    user.projects.splice(removeIndex, 1);
+    const newAvatar = generateAvatarUrl(user.email, user.name);
+    user.avatar = newAvatar;
     await user.save();
-    res.json(user);
+    res.json({ avatar: newAvatar });
   } catch (err) {
     console.error(err.message);
     res.status(500).json({ errors: [{ msg: 'Server Error' }] });
   }
 });
 
-// @route   PUT api/profile/goals
-// @desc    Update user goals
-// @access  Private
-router.put('/goals', auth, async (req, res) => {
-  try {
-    const user = await User.findById(req.user.id);
-    if (!user) return res.status(404).json({ msg: 'User not found' });
-
-    user.goals = req.body.goals || [];
-    await user.save();
-    res.json(user.goals);
-  } catch (err) {
-    console.error(err.message);
-    res.status(500).send('Server error');
-  }
-});
-
-// @route   PUT api/profile/notes
-// @desc    Update user notes
-// @access  Private
-router.put('/notes', auth, async (req, res) => {
-  try {
-    const user = await User.findById(req.user.id);
-    if (!user) return res.status(404).json({ msg: 'User not found' });
-
-    user.notes = req.body.notes || "";
-    await user.save();
-    res.json(user.notes);
-  } catch (err) {
-    console.error(err.message);
-    res.status(500).send('Server error');
-  }
-});
-
-// @route   PUT api/profile/activity
-// @desc    Update activity log (for heatmap)
-// @access  Private
-router.put('/activity', auth, async (req, res) => {
-  try {
-    const { date } = req.body; // expects YYYY-MM-DD or timestamp
-    const user = await User.findById(req.user.id);
-    if (!user) return res.status(404).json({ msg: 'User not found' });
-
-    user.activity.push(date);
-    await user.save();
-    res.json(user.activity);
-  } catch (err) {
-    console.error(err.message);
-    res.status(500).send('Server error');
-  }
-});
-
-// @route   PUT api/profile/time
-// @desc    Update time spent
-// @access  Private
-router.put('/time', auth, async (req, res) => {
-  try {
-    const { timeSpent } = req.body; // e.g. "2h 30m"
-    const user = await User.findById(req.user.id);
-    if (!user) return res.status(404).json({ msg: 'User not found' });
-
-    user.timeSpent = timeSpent;
-    await user.save();
-    res.json(user.timeSpent);
-  } catch (err) {
-    console.error(err.message);
-    res.status(500).send('Server error');
-  }
-});
-
-
-
+// ---------------- LEETCODE ROUTES (unchanged) ----------------
 
 router.post("/leetcode/:username", async (req, res) => {
   const { username } = req.params;
-
   try {
     const existingUser = await LeetCode.findOne({ username });
-    if (existingUser) {
-      return res.json({
-        message: "LeetCode data fetched from database.",
-        data: existingUser,
-      });
-    }
+    if (existingUser) return res.json({ message: "LeetCode data fetched from DB", data: existingUser });
 
     const response = await fetch("https://leetcode.com/graphql", {
       method: "POST",
-      headers: {
-        "Content-Type": "application/json",
-        "User-Agent": "Mozilla/5.0",
-      },
+      headers: { "Content-Type": "application/json", "User-Agent": "Mozilla/5.0" },
       body: JSON.stringify({
         query: `
           query LeetCodeProfile($username: String!, $limit: Int!) {
             matchedUser(username: $username) {
-              username
-              profile {
-                ranking
-                userAvatar
-              }
-              submitStatsGlobal {
-                acSubmissionNum {
-                  difficulty
-                  count
-                }
-              }
-              badges {
-                id
-                displayName
-                icon
-              }
+              username profile { ranking userAvatar }
+              submitStatsGlobal { acSubmissionNum { difficulty count } }
+              badges { id displayName icon }
               submissionCalendar
             }
-            userContestRanking(username: $username) {
-              attendedContestsCount
-              rating
-              globalRanking
-              totalParticipants
-              topPercentage
-              badge {
-                name
-                icon
-                expired
-              }
-            }
-            userContestRankingHistory(username: $username) {
-              attended
-              rating
-              contest {
-                title
-                startTime
-              }
-            }
-            recentAcSubmissionList(username: $username, limit: $limit) {
-              id
-              title
-              titleSlug
-              timestamp
-            }
+            userContestRanking(username: $username) { attendedContestsCount rating globalRanking totalParticipants topPercentage badge { name icon expired } }
+            userContestRankingHistory(username: $username) { attended rating contest { title startTime } }
+            recentAcSubmissionList(username: $username, limit: $limit) { id title titleSlug timestamp }
           }
         `,
         variables: { username, limit: 10 },
@@ -417,42 +158,22 @@ router.post("/leetcode/:username", async (req, res) => {
     });
 
     let json;
-    try {
-      json = await response.json();
-    } catch (err) {
-      const text = await response.text();
-      console.error("Invalid JSON from LeetCode API:", text.slice(0, 300));
-      return res.status(500).json({ error: "Invalid JSON from LeetCode" });
-    }
+    try { json = await response.json(); }
+    catch { return res.status(500).json({ error: "Invalid JSON from LeetCode" }); }
 
-    if (!json.data?.matchedUser) {
-      return res.status(404).json({ error: "User not found" });
-    }
+    if (!json.data?.matchedUser) return res.status(404).json({ error: "User not found" });
 
     const contestRanking = json.data.userContestRanking || {};
     const contestHistory = json.data.userContestRankingHistory || [];
 
     const result = {
       username: json.data.matchedUser.username,
-      profile: {
-        ranking: json.data.matchedUser.profile?.ranking,
-        avatar: json.data.matchedUser.profile?.userAvatar,
-      },
-      submitStatsGlobal: json.data.matchedUser.submitStatsGlobal.acSubmissionNum.map(sub => ({
-        difficulty: sub.difficulty,
-        count: sub.count,
-      })),
-      badges: json.data.matchedUser.badges.map(badge => ({
-        id: badge.id,
-        displayName: badge.displayName,
-        icon: badge.icon,
-      })),
+      profile: { ranking: json.data.matchedUser.profile?.ranking, avatar: json.data.matchedUser.profile?.userAvatar },
+      submitStatsGlobal: json.data.matchedUser.submitStatsGlobal.acSubmissionNum.map(sub => ({ difficulty: sub.difficulty, count: sub.count })),
+      badges: json.data.matchedUser.badges.map(badge => ({ id: badge.id, displayName: badge.displayName, icon: badge.icon })),
       submissionCalendar: JSON.parse(json.data.matchedUser.submissionCalendar || "{}"),
       recentSubmissions: json.data.recentAcSubmissionList.map(sub => ({
-        id: sub.id,
-        title: sub.title,
-        titleSlug: sub.titleSlug,
-        timestamp: new Date(sub.timestamp * 1000).toISOString(),
+        id: sub.id, title: sub.title, titleSlug: sub.titleSlug, timestamp: new Date(sub.timestamp * 1000).toISOString()
       })),
       contestRating: {
         attendedContestsCount: contestRanking.attendedContestsCount || 0,
@@ -469,185 +190,51 @@ router.post("/leetcode/:username", async (req, res) => {
       contestHistory: contestHistory.map(contest => ({
         attended: contest.attended || false,
         rating: contest.rating || 0,
-        contest: {
-          title: contest.contest.title || "No Title",
-          startTime: new Date(contest.contest.startTime * 1000).toISOString(),
-        },
-      })),
+        contest: { title: contest.contest.title || "No Title", startTime: new Date(contest.contest.startTime * 1000).toISOString() }
+      }))
     };
 
     const newUser = await LeetCode.create(result);
-
-    res.json({
-      message: "LeetCode data fetched from API and saved to DB.",
-      data: newUser,
-    });
+    res.json({ message: "LeetCode data fetched from API and saved to DB.", data: newUser });
   } catch (err) {
     console.error("LeetCode API Error:", err);
     res.status(500).json({ error: "Failed to fetch or save LeetCode stats" });
   }
 });
 
-
-
 router.post("/leetcode/update/:username", async (req, res) => {
   const { username } = req.params;
-
   try {
     const existingUser = await LeetCode.findOne({ username });
+    if (!existingUser) return res.status(404).json({ error: "User not found in DB" });
 
-    if (!existingUser) {
-      return res.status(404).json({ error: "User not found in database" });
-    }
-
-    const timeDifference = Date.now() - new Date(existingUser.lastUpdated).getTime();
-    const sixHoursInMillis = 6 * 60 * 60 * 1000; 
-
-    if (timeDifference < sixHoursInMillis) {
-      return res.json({
-        message: "Profile is up-to-date. No update necessary.",
-        data: existingUser,
-      });
+    const sixHoursInMillis = 6 * 60 * 60 * 1000;
+    if (Date.now() - new Date(existingUser.lastUpdated).getTime() < sixHoursInMillis) {
+      return res.json({ message: "Profile up-to-date.", data: existingUser });
     }
 
     const response = await fetch("https://leetcode.com/graphql", {
       method: "POST",
-      headers: {
-        "Content-Type": "application/json",
-        "User-Agent": "Mozilla/5.0",
-      },
-      body: JSON.stringify({
-        query: `query LeetCodeProfile($username: String!, $limit: Int!) {
-          matchedUser(username: $username) {
-            username
-            profile {
-              ranking
-              userAvatar
-            }
-            submitStatsGlobal {
-              acSubmissionNum {
-                difficulty
-                count
-              }
-            }
-            badges {
-              id
-              displayName
-              icon
-            }
-            submissionCalendar
-          }
-          userContestRanking(username: $username) {
-            attendedContestsCount
-            rating
-            globalRanking
-            totalParticipants
-            topPercentage
-            badge {
-              name
-              icon
-              expired
-            }
-          }
-          userContestRankingHistory(username: $username) {
-            attended
-            rating
-            contest {
-              title
-              startTime
-            }
-          }
-          recentAcSubmissionList(username: $username, limit: $limit) {
-            id
-            title
-            titleSlug
-            timestamp
-          }
-        }`,
-        variables: { username, limit: 10 },
-      }),
+      headers: { "Content-Type": "application/json", "User-Agent": "Mozilla/5.0" },
+      body: JSON.stringify({ query: `...`, variables: { username, limit: 10 } }),
     });
 
-    let json;
-    try {
-      json = await response.json();
-    } catch (err) {
-      const text = await response.text();
-      console.error("Invalid JSON from LeetCode API:", text.slice(0, 300));
-      return res.status(500).json({ error: "Invalid JSON from LeetCode" });
-    }
-
-    if (!json.data?.matchedUser) {
-      return res.status(404).json({ error: "User not found" });
-    }
+    const json = await response.json();
+    if (!json.data?.matchedUser) return res.status(404).json({ error: "User not found" });
 
-    const contestRanking = json.data.userContestRanking || {};
-    const contestHistory = json.data.userContestRankingHistory || [];
-
-    const result = {
-      username: json.data.matchedUser.username,
-      profile: {
-        ranking: json.data.matchedUser.profile?.ranking,
-        avatar: json.data.matchedUser.profile?.userAvatar,
-      },
-      submitStatsGlobal: json.data.matchedUser.submitStatsGlobal.acSubmissionNum.map(sub => ({
-        difficulty: sub.difficulty,
-        count: sub.count,
-      })),
-      badges: json.data.matchedUser.badges.map(badge => ({
-        id: badge.id,
-        displayName: badge.displayName,
-        icon: badge.icon,
-      })),
-      submissionCalendar: JSON.parse(json.data.matchedUser.submissionCalendar || "{}"),
-      recentSubmissions: json.data.recentAcSubmissionList.map(sub => ({
-        id: sub.id,
-        title: sub.title,
-        titleSlug: sub.titleSlug,
-        timestamp: new Date(sub.timestamp * 1000).toISOString(),
-      })),
-      contestRating: {
-        attendedContestsCount: contestRanking.attendedContestsCount || 0,
-        rating: contestRanking.rating || 0,
-        globalRanking: contestRanking.globalRanking || 0,
-        totalParticipants: contestRanking.totalParticipants || 0,
-        topPercentage: contestRanking.topPercentage || 0,
-        badge: {
-          name: contestRanking.badge?.name || "No Badge",
-          icon: contestRanking.badge?.icon || "/default_icon.png",
-          expired: contestRanking.badge?.expired || false,
-        },
-      },
-      contestHistory: contestHistory.map(contest => ({
-        attended: contest.attended || false,
-        rating: contest.rating || 0,
-        contest: {
-          title: contest.contest.title || "No Title",
-          startTime: new Date(contest.contest.startTime * 1000).toISOString(),
-        },
-      })),
-    };
-
-    existingUser.profile = result.profile;
-    existingUser.submitStatsGlobal = result.submitStatsGlobal;
-    existingUser.badges = result.badges;
-    existingUser.submissionCalendar = result.submissionCalendar;
-    existingUser.recentSubmissions = result.recentSubmissions;
-    existingUser.contestRating = result.contestRating;
-    existingUser.contestHistory = result.contestHistory;
+    // Update DB fields
+    existingUser.profile = json.data.matchedUser.profile;
+    existingUser.submitStatsGlobal = json.data.matchedUser.submitStatsGlobal.acSubmissionNum;
+    existingUser.badges = json.data.matchedUser.badges;
+    existingUser.submissionCalendar = JSON.parse(json.data.matchedUser.submissionCalendar || "{}");
     existingUser.lastUpdated = new Date();
-
     await existingUser.save();
 
-    res.json({
-      message: "LeetCode data updated successfully.",
-      data: existingUser,
-    });
+    res.json({ message: "LeetCode data updated successfully.", data: existingUser });
   } catch (err) {
     console.error("LeetCode API Error:", err);
-    res.status(500).json({ error: "Failed to fetch or update LeetCode stats" });
+    res.status(500).json({ error: "Failed to fetch/update LeetCode stats" });
   }
 });
 
-
-module.exports = router;
\ No newline at end of file
+module.exports = router;
diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index 37cb7c9..3012404 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -24,7 +24,7 @@ import Dashboard from "./Components/Dashboard";
 import FAQ from "./Components/FAQ";
 import Pomodoro from "./Components/DashBoard/Pomodoro";
 import { ArrowUp } from "lucide-react";
-
+import GitHubProfile from "./Components/GitHubProfile";
 import LeetCode from "./Components/DashBoard/LeetCode";
 import FloatingSupportButton from "./Components/ui/Support";
 
@@ -132,10 +132,11 @@ function App() {
         <Route path="/dashboard" element={<Dashboard />} />
         <Route path="/pomodoro" element={<Pomodoro />} />
         <Route path="/contributors" element={<AllContributors />} />
+        <Route path="/dashboard/github/:username" element={<GitHubProfile />} />
         <Route path="/leetcode/:leetUser" element={<LeetCode />} />
       </Routes>
     </TimerProvider>
   );
 }
 
-export default App;
+export default App;
\ No newline at end of file
diff --git a/frontend/src/Components/DashBoard/PlatformLinks.jsx b/frontend/src/Components/DashBoard/PlatformLinks.jsx
index 654530f..3bcd1e8 100644
--- a/frontend/src/Components/DashBoard/PlatformLinks.jsx
+++ b/frontend/src/Components/DashBoard/PlatformLinks.jsx
@@ -1,4 +1,10 @@
-import { SiCodechef, SiHackerrank, SiLeetcode, SiHackerearth, SiGithub, } from "react-icons/si";
+import {
+  SiCodechef,
+  SiHackerrank,
+  SiLeetcode,
+  SiHackerearth,
+  SiGithub,
+} from "react-icons/si";
 
 const iconMap = {
   codechef: SiCodechef,
@@ -8,56 +14,82 @@ const iconMap = {
   leetcode: SiLeetcode,
 };
 
-  function normalizeLeetcodeURL(url) {
-    const leetcodeRegex = /^https?:\/\/(www\.)?leetcode\.com\/(u\/)?[a-zA-Z0-9_-]+\/?$/;
-    if (!leetcodeRegex.test(url)) {
-      return null;
-    }
-    return url.replace(/\/$/, '');
-  }
+function normalizeLeetcodeURL(url) {
+  const leetcodeRegex =
+    /^https?:\/\/(www\.)?leetcode\.com\/(u\/)?[a-zA-Z0-9_-]+\/?$/;
+  if (!leetcodeRegex.test(url)) return null;
+  return url.replace(/\/$/, "");
+}
 
-const leetcodeUrl = (url) => {
-  url = normalizeLeetcodeURL(url)
-  const username = url.trim().split("/").pop();
-  return `/leetcode/${username}`
+function normalizeGitHubURL(url) {
+  if (!url || url.trim() === "") return null;
+  const githubRegex = /^https?:\/\/(www\.)?github\.com\/[a-zA-Z0-9_-]+\/?$/;
+  if (!githubRegex.test(url)) return null;
+
+  const username = url.replace(/\/$/, "").split("/").pop();
+  return username;
 }
 
+const leetcodeUrl = (url) => {
+  const normalized = normalizeLeetcodeURL(url);
+  if (!normalized) return "#";
+  const username = normalized.trim().split("/").pop();
+  return `/leetcode/${username}`;
+};
+
+const githubUrl = (url) => {
+  if (!url) return "#";
+  const username = url.replace(/\/$/, "").split("/").pop();
+  return `/dashboard/github/${username}`;
+};
+
 export default function PlatformLinks({ platforms }) {
-  const platformEntries = Object.entries(platforms);
+  // Filter out empty or falsy URLs
+  const platformEntries = Object.entries(platforms).filter(
+    ([, url]) => url && url.trim() !== ""
+  );
 
   return (
-  <div className="grid grid-cols-2 gap-3">
+    <div className="grid grid-cols-2 gap-3">
       {platformEntries.length > 0 ? (
-          platformEntries.map(([name, url], i) => {
-            const Icon = iconMap[name.toLowerCase()] || SiGithub;
-
-            return (
-              <a
-                key={i}
-                href={name == 'leetcode' ? leetcodeUrl(url) : url || "#"}
-                target="_blank"
-                rel="noopener noreferrer"
-                className="flex items-center gap-2 bg-[var(--card)] rounded-lg p-3 shadow-sm hover:shadow-md transition"
-              >
-                <Icon className="w-4 h-4 text-[var(--primary)]" />
-                <div className="flex flex-col text-sm">
-                  <span className="text-xs text-[var(--primary)] capitalize">
-                    {name}
-                  </span>
-                  <span className="text-sm text-[var(--muted-foreground)]">
-                    Active
-                  </span>
-                </div>
-              </a>
-            );
-          })
-        ) : (
-          <div className="flex items-center justify-center col-span-2 bg-[var(--card)] rounded-lg p-3 shadow-sm">
-            <span className="text-sm text-[var(--muted-foreground)] italic">
-              No platforms linked yet
-            </span>
-          </div>
-        )}
+        platformEntries.map(([name, url], i) => {
+          const Icon = iconMap[name.toLowerCase()] || SiGithub;
+
+          // Determine href based on platform
+          const href =
+            name.toLowerCase() === "leetcode"
+              ? leetcodeUrl(url)
+              : name.toLowerCase() === "github"
+              ? githubUrl(normalizeGitHubURL(url))
+              : url;
+
+          return (
+            <a
+              key={i}
+              href={href}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="flex items-center gap-2 bg-[var(--card)] rounded-lg p-3 shadow-sm hover:shadow-md transition"
+            >
+              <Icon className="w-4 h-4 text-[var(--primary)]" />
+              <div className="flex flex-col text-sm">
+                <span className="text-xs text-[var(--primary)] capitalize">
+                  {name}
+                </span>
+                <span className="text-sm text-[var(--muted-foreground)]">
+                  Active
+                </span>
+              </div>
+            </a>
+          );
+        })
+      ) : (
+        <div className="flex items-center justify-center col-span-2 bg-[var(--card)] rounded-lg p-3 shadow-sm">
+          <span className="text-sm text-[var(--muted-foreground)] italic">
+            No platforms linked yet
+          </span>
+        </div>
+      )}
     </div>
   );
-}
+}
\ No newline at end of file
diff --git a/frontend/src/Components/DashBoard/ProfileCard.jsx b/frontend/src/Components/DashBoard/ProfileCard.jsx
index b680647..894e7ed 100644
--- a/frontend/src/Components/DashBoard/ProfileCard.jsx
+++ b/frontend/src/Components/DashBoard/ProfileCard.jsx
@@ -2,7 +2,12 @@ import { User } from "lucide-react";
 import React from "react";
 import CardWrapper from "./CardWrapper";
 import {
-  SiLeetcode, SiCodechef, SiHackerrank, SiGithub, SiHackerearth, SiLinkedin,
+  SiLeetcode,
+  SiCodechef,
+  SiHackerrank,
+  SiGithub,
+  SiHackerearth,
+  SiLinkedin,
 } from "react-icons/si";
 
 const iconMap = {
@@ -15,23 +20,41 @@ const iconMap = {
 };
 
 export default function ProfileCard({ user }) {
-  if (!user) return null; // don't render until user is loaded
+  if (!user) return null;
   const socialLinks = user.socialLinks || {};
-  const entries = Object.entries(socialLinks);
+  const entries = Object.entries(socialLinks).filter(
+    ([, url]) => url && url.trim() !== ""
+  );
 
   function normalizeLeetcodeURL(url) {
-    const leetcodeRegex = /^https?:\/\/(www\.)?leetcode\.com\/(u\/)?[a-zA-Z0-9_-]+\/?$/;
-    if (!leetcodeRegex.test(url)) {
-      return null;
-    }
-    return url.replace(/\/$/, '');
+    const leetcodeRegex =
+      /^https?:\/\/(www\.)?leetcode\.com\/(u\/)?[a-zA-Z0-9_-]+\/?$/;
+    if (!leetcodeRegex.test(url)) return null;
+    return url.replace(/\/$/, "");
+  }
+
+  function normalizeGitHubURL(url) {
+    const githubRegex = /^https?:\/\/(www\.)?github\.com\/[a-zA-Z0-9_-]+\/?$/;
+    if (!githubRegex.test(url)) return null;
+    return url.replace(/\/$/, "");
   }
 
+  const leetcodeUrl = (url) => {
+    const normalized = normalizeLeetcodeURL(url);
+    if (!normalized) return "#";
+    const username = normalized.split("/").pop();
+    return `/leetcode/${username}`;
+  };
+
+  const githubUrl = (url) => {
+    if (!url) return "#";
+    const username = url.replace(/\/$/, "").split("/").pop();
+    return `/dashboard/github/${username}`;
+  };
+
   return (
     <CardWrapper>
-      {/* Header */}
       <div className="flex items-center flex-col gap-3">
-        {/* Avatar */}
         <div className="w-14 h-14 flex items-center justify-center rounded-full bg-[var(--primary)] text-[var(--primary-foreground)] overflow-hidden">
           {user.avatar ? (
             <img
@@ -44,34 +67,37 @@ export default function ProfileCard({ user }) {
           )}
         </div>
 
-        {/* Name + Email */}
         <div className="text-center">
-          <h2 className="text-lg font-semibold text-[var(--primary)]">{user.name}</h2>
+          <h2 className="text-lg font-semibold text-[var(--primary)]">
+            {user.name}
+          </h2>
           <p className="text-sm text-[var(--muted-foreground)]">{user.email}</p>
         </div>
       </div>
 
-      {/* Platforms */}
       <div className="mt-3">
-        <p className="text-md font-medium text-[var(--primary)] mb-1">Platforms</p>
+        <p className="text-md font-medium text-[var(--primary)] mb-1">
+          Platforms
+        </p>
         {entries.length > 0 ? (
           <div className="flex flex-wrap gap-3">
             {entries.map(([platformName, url]) => {
               const Icon = iconMap[platformName.toLowerCase()];
               if (!Icon) return null;
-              const leetcodeUrl = (url) => {
-                url = normalizeLeetcodeURL(url);
-                const username = url.split("/").pop();
-                return `/leetcode/${username}`
 
-              }
+              let href = url;
+              if (platformName.toLowerCase() === "leetcode")
+                href = leetcodeUrl(url);
+              if (platformName.toLowerCase() === "github")
+                href = githubUrl(url);
+
               return (
                 <a
                   key={platformName}
-                  href={platformName == 'leetcode' ? leetcodeUrl(url) : url}
+                  href={href}
                   target="_blank"
                   rel="noopener noreferrer"
-                  className="w-10 h-10 flex items-center justify-center rounded-md bg-[var(--secondary)]  shadow-sm hover:shadow-md transition"
+                  className="w-10 h-10 flex items-center justify-center rounded-md bg-[var(--secondary)] shadow-sm hover:shadow-md transition"
                   title={platformName}
                 >
                   <Icon className="w-5 h-5 text-[var(--primary)]" />
diff --git a/frontend/src/Components/Dashboard.jsx b/frontend/src/Components/Dashboard.jsx
index 310bf6a..a2464f1 100644
--- a/frontend/src/Components/Dashboard.jsx
+++ b/frontend/src/Components/Dashboard.jsx
@@ -1,4 +1,5 @@
 import React, { useState, useEffect } from "react";
+import { useNavigate } from "react-router-dom";
 import Sidebar from "./DashBoard/Sidebar";
 import Topbar from "./DashBoard/Topbar";
 import ProfileCard from "./DashBoard/ProfileCard";
@@ -8,8 +9,6 @@ import GoalsCard from "./DashBoard/GoalsCard";
 import TimeSpentCard from "./DashBoard/TimeSpentCard";
 import ActivityHeatmap from "./DashBoard/ActivityHeatMap";
 import NotesCard from "./DashBoard/NotesCard";
-import { useNavigate } from "react-router-dom";
-
 
 export default function Dashboard() {
   const [profile, setProfile] = useState(null);
@@ -19,16 +18,11 @@ export default function Dashboard() {
   const navigate = useNavigate();
 
   useEffect(() => {
-    // Capture token issued by backend OAuth redirect: /dashboard?token=...
+    // Capture OAuth token from URL
     const params = new URLSearchParams(window.location.search);
     const oauthToken = params.get("token");
     if (oauthToken) {
-      try {
-        localStorage.setItem("token", oauthToken);
-      } catch (e) {
-        console.error("Failed to persist OAuth token:", e);
-      }
-      // Clean up URL after capturing token (avoid keeping token in address bar)
+      localStorage.setItem("token", oauthToken);
       const cleanUrl = window.location.origin + window.location.pathname;
       window.history.replaceState({}, document.title, cleanUrl);
     }
@@ -51,11 +45,11 @@ export default function Dashboard() {
           throw new Error(data.errors?.[0]?.msg || "Failed to load profile");
         }
 
-        setProfile(data);
+        setProfile(data || {});
         setGoals(data.goals || []);
       } catch (err) {
         console.error("Error fetching profile:", err);
-        setError(err.message);
+        setError(err.message || "Failed to load profile");
       } finally {
         setLoading(false);
       }
@@ -64,7 +58,6 @@ export default function Dashboard() {
     fetchProfile();
   }, [navigate]);
 
-  // Show loading state
   if (loading) {
     return (
       <div className="flex items-center justify-center h-screen">
@@ -73,7 +66,6 @@ export default function Dashboard() {
     );
   }
 
-  // Show error state
   if (error) {
     return (
       <div className="p-6 text-red-500">
@@ -88,7 +80,6 @@ export default function Dashboard() {
     );
   }
 
-  // Show message if no profile data is available
   if (!profile) {
     return (
       <div className="p-6">
@@ -97,14 +88,13 @@ export default function Dashboard() {
     );
   }
 
-  // Safely destructure with default values
+  // Safely destructure profile with defaults
   const {
-    socialLinks = [],
+    socialLinks = {},
     streak = 0,
-    githubUsername = null,
     timeSpent = "0 minutes",
     activity = [],
-    notes = []
+    notes = [],
   } = profile;
 
   return (
@@ -119,14 +109,12 @@ export default function Dashboard() {
             <PlatformLinks platforms={socialLinks} className="col-span-1" />
             <StreakCard streak={streak} className="col-span-1" />
 
-          
-
             {/* Row 2: Goals, Time Spent, Notes */}
             <GoalsCard goals={goals} onGoalsChange={setGoals} />
             <TimeSpentCard time={timeSpent} />
             <NotesCard
               notes={notes}
-              onNotesChange={(updatedNotes) => 
+              onNotesChange={(updatedNotes) =>
                 setProfile({ ...profile, notes: updatedNotes })
               }
             />
@@ -140,4 +128,4 @@ export default function Dashboard() {
       </div>
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/frontend/src/Components/GitHubProfile.jsx b/frontend/src/Components/GitHubProfile.jsx
new file mode 100644
index 0000000..e2308db
--- /dev/null
+++ b/frontend/src/Components/GitHubProfile.jsx
@@ -0,0 +1,294 @@
+import React, { useEffect, useState } from "react";
+import { useParams, Link } from "react-router-dom";
+import { Card, CardHeader, CardTitle, CardContent } from "@/Components/ui/Card";
+import { Button } from "@/Components/ui/button";
+
+const GitHubProfile = () => {
+  const { username } = useParams();
+  const [data, setData] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState("");
+
+  useEffect(() => {
+    const fetchGitHubData = async () => {
+      if (!username) {
+        setError("No GitHub username provided");
+        setLoading(false);
+        return;
+      }
+
+      const normalizedUsername = username.split("/").pop();
+
+      try {
+        const backendUrl =
+          import.meta.env.VITE_BACKEND_URL || "http://localhost:5000";
+        const res = await fetch(
+          `${backendUrl}/api/github/${normalizedUsername}`
+        );
+        const json = await res.json();
+
+        if (res.ok) setData(json);
+        else setError(json.error || "Failed to fetch GitHub data");
+      } catch (err) {
+        console.error(err);
+        setError("User not found or an error occurred");
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchGitHubData();
+  }, [username]);
+
+  if (loading)
+    return (
+      <p className="text-center mt-10 text-gray-500 dark:text-gray-300">
+        Loading...
+      </p>
+    );
+  if (error) return <p className="text-center mt-10 text-red-500">{error}</p>;
+
+  const {
+    profile = {},
+    topRepos = [],
+    contributions = { weeks: [], totalContributions: 0, totalCommits: 0 },
+    languages = {},
+  } = data || {};
+
+  // Heatmap renderer with dark/light mode colors
+  const renderHeatmap = () => {
+    if (!contributions?.weeks?.length)
+      return (
+        <p className="text-center text-gray-500 dark:text-gray-400">
+          No contribution data available.
+        </p>
+      );
+
+    return (
+      <div className="flex flex-col items-center">
+        <div className="flex space-x-0.5 overflow-x-auto py-2">
+          {contributions.weeks.map((week, wIdx) => (
+            <div key={wIdx} className="flex flex-col space-y-0.5">
+              {week?.contributionDays?.map((day, dIdx) => {
+                // default fallback color for empty contributions
+                const lightModeBg = "#ebedf0"; // light square for light mode
+                // const darkModeBg = "#1f2937";
+                const color = day?.color || lightModeBg;
+
+                return (
+                  <div
+                    key={dIdx}
+                    title={`${day?.date || "N/A"}: ${
+                      day?.contributionCount ?? 0
+                    } contributions`}
+                    className={`w-3 h-3 rounded-sm
+                    ${
+                      !day?.contributionCount
+                        ? "bg-gray-200 dark:bg-gray-700"
+                        : ""
+                    }
+                  `}
+                    style={{
+                      backgroundColor: day?.contributionCount
+                        ? color
+                        : undefined, // use Tailwind classes for empty days
+                    }}
+                  />
+                );
+              })}
+            </div>
+          ))}
+        </div>
+      </div>
+    );
+  };
+
+  // Languages renderer
+  const renderLanguages = () => {
+    const langKeys = Object.keys(languages);
+    if (!langKeys.length)
+      return (
+        <p className="text-gray-600 dark:text-gray-400">
+          No language data available.
+        </p>
+      );
+
+    const totalSize = Object.values(languages).reduce(
+      (sum, val) => sum + val,
+      0
+    );
+
+    return (
+      <div className="space-y-2">
+        {langKeys
+          .sort((a, b) => languages[b] - languages[a])
+          .map((lang, idx) => {
+            const size = languages[lang];
+            const percentage = totalSize
+              ? ((size / totalSize) * 100).toFixed(1)
+              : 0;
+            return (
+              <div key={idx}>
+                <p className="text-sm font-medium text-gray-800 dark:text-gray-200">
+                  {lang} ({percentage}%)
+                </p>
+                <div className="w-full bg-gray-200 dark:bg-gray-700 h-2 rounded">
+                  <div
+                    className="h-2 rounded bg-[var(--primary)]"
+                    style={{ width: `${percentage}%` }}
+                  />
+                </div>
+              </div>
+            );
+          })}
+      </div>
+    );
+  };
+
+  return (
+    <div className="w-full min-h-screen bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100 p-6 space-y-8">
+      {/* Profile + Languages side by side */}
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+        {/* Profile */}
+        <Card className="bg-white dark:bg-gray-800 shadow-lg rounded-xl p-6">
+          <CardHeader>
+            <CardTitle>Profile</CardTitle>
+          </CardHeader>
+          <CardContent className="flex flex-col items-center text-center">
+            <img
+              src={profile.avatarUrl || ""}
+              alt={profile.login || "avatar"}
+              className="w-32 h-32 rounded-full border-4 border-[var(--primary)] shadow"
+            />
+            <h2 className="text-xl font-bold mt-4">
+              {profile.name || profile.login || "N/A"}
+            </h2>
+            <p className="text-gray-600 dark:text-gray-400">
+              @{profile.login || "N/A"}
+            </p>
+            <p className="mt-2 text-gray-700 dark:text-gray-300">
+              {profile.bio || "No bio available"}
+            </p>
+            <p className="text-sm text-gray-600 dark:text-gray-400 mt-3">
+              Followers: {profile.followers ?? 0} • Following:{" "}
+              {profile.following ?? 0}
+            </p>
+            <p className="text-sm text-gray-600 dark:text-gray-400">
+              Total Contributions: {contributions.totalContributions ?? 0} •
+              Commits: {contributions.totalCommits ?? 0}
+            </p>
+            <a
+              href={`https://github.com/${profile.login}`}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="mt-3 inline-block bg-[var(--primary)] text-black px-4 py-2 rounded-lg font-semibold shadow hover:bg-[var(--primary-foreground)] transition"
+            >
+              View on GitHub
+            </a>
+          </CardContent>
+        </Card>
+
+        {/* Languages */}
+        <Card className="bg-white dark:bg-gray-800 shadow-lg rounded-xl p-6">
+          <CardHeader>
+            <CardTitle>Languages Used</CardTitle>
+          </CardHeader>
+          <CardContent>{renderLanguages()}</CardContent>
+        </Card>
+      </div>
+
+      {/* Repositories */}
+      <Card className="bg-white dark:bg-gray-800 shadow-lg rounded-xl p-6">
+        <CardHeader>
+          <CardTitle>Top Repositories</CardTitle>
+        </CardHeader>
+        <CardContent className="grid md:grid-cols-2 lg:grid-cols-3 gap-4">
+          {topRepos.length === 0 && (
+            <p className="text-gray-600 dark:text-gray-400">
+              No repositories available.
+            </p>
+          )}
+          {topRepos.map((repo, idx) => (
+            <div
+              key={idx}
+              className="p-4 bg-gray-100 dark:bg-gray-700 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-600 transition shadow-sm"
+            >
+              <h3 className="font-semibold text-[var(--primary)]">
+                <a
+                  href={repo.url || "#"}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="hover:underline"
+                >
+                  {repo.name || "N/A"}
+                </a>
+              </h3>
+              <p className="text-gray-700 dark:text-gray-300 text-sm mt-1">
+                {repo.description || "No description"}
+              </p>
+              <p className="text-gray-600 dark:text-gray-400 text-xs mt-1">
+                stars {repo.stars ?? 0} | fork {repo.forks ?? 0}
+              </p>
+              {repo.languages?.length > 0 && (
+                <p className="text-gray-600 dark:text-gray-400 text-xs mt-1">
+                  {repo.languages.map((l) => l.name).join(", ")}
+                </p>
+              )}
+            </div>
+          ))}
+        </CardContent>
+      </Card>
+
+      {/* Heatmap */}
+      <Card
+        className="shadow-lg rounded-xl p-6
+  bg-gray-100 text-gray-900 dark:bg-gray-800 dark:text-gray-100 flex flex-col items-center"
+      >
+        <CardHeader className="w-full flex justify-center">
+          <CardTitle className="text-center">Contribution Heatmap</CardTitle>
+        </CardHeader>
+        <CardContent>
+          {contributions?.weeks?.length ? (
+            <div className="flex justify-center space-x-1 overflow-x-auto py-2">
+              {contributions.weeks.map((week, wIdx) => (
+                <div key={wIdx} className="flex flex-col space-y-1">
+                  {week?.contributionDays?.map((day, dIdx) => {
+                    const emptyClass = !day?.contributionCount
+                      ? "bg-gray-200 dark:bg-gray-700"
+                      : "";
+                    return (
+                      <div
+                        key={dIdx}
+                        title={`${day?.date || "N/A"}: ${
+                          day?.contributionCount ?? 0
+                        } contributions`}
+                        className={`w-4 h-4 rounded-sm ${emptyClass}`}
+                        style={{
+                          backgroundColor: day?.contributionCount
+                            ? day.color
+                            : undefined,
+                        }}
+                      />
+                    );
+                  })}
+                </div>
+              ))}
+            </div>
+          ) : (
+            <p className="text-center text-gray-500 dark:text-gray-400">
+              No contribution data available.
+            </p>
+          )}
+        </CardContent>
+      </Card>
+
+      <div className="flex justify-start">
+        <Link to="/dashboard">
+          <Button variant="secondary">Back to Dashboard</Button>
+        </Link>
+      </div>
+    </div>
+  );
+};
+
+export default GitHubProfile;
diff --git a/frontend/src/Components/profile/Profile.jsx b/frontend/src/Components/profile/Profile.jsx
index f67f902..a200a11 100644
--- a/frontend/src/Components/profile/Profile.jsx
+++ b/frontend/src/Components/profile/Profile.jsx
@@ -1,8 +1,32 @@
 import { useState, useEffect, useRef } from "react";
 import { motion, AnimatePresence } from "framer-motion";
 import { useNavigate } from "react-router-dom";
-import { Camera, RefreshCw, User, MapPin, Mail, Globe, Edit2, Save, X, Plus, Check, LogOut, Sparkles, Zap } from "lucide-react";
-import { SiLeetcode, SiCodechef, SiHackerrank, SiHackerearth, SiCodeforces, SiLinkedin, SiGitlab, SiGithub } from "react-icons/si";
+import {
+  Camera,
+  RefreshCw,
+  User,
+  MapPin,
+  Mail,
+  Globe,
+  Edit2,
+  Save,
+  X,
+  Plus,
+  Check,
+  LogOut,
+  Sparkles,
+  Zap,
+} from "lucide-react";
+import {
+  SiLeetcode,
+  SiCodechef,
+  SiHackerrank,
+  SiHackerearth,
+  SiCodeforces,
+  SiLinkedin,
+  SiGitlab,
+  SiGithub,
+} from "react-icons/si";
 import BackButton from "../ui/backbutton";
 
 // --- START: Helper Components for Modern UI (Including the new SuccessPopup) ---
@@ -12,7 +36,7 @@ import BackButton from "../ui/backbutton";
  */
 const SocialButton = ({ icon, buttonUrl, buttonName, leetcodeUrl }) => {
   const isLinked = !!buttonUrl;
-  
+
   return (
     <motion.button
       whileHover={{ scale: isLinked ? 1.05 : 1 }}
@@ -24,7 +48,8 @@ const SocialButton = ({ icon, buttonUrl, buttonName, leetcodeUrl }) => {
       } w-full`}
       onClick={() => {
         if (buttonUrl) {
-          const url = buttonName === 'Leetcode' ? leetcodeUrl(buttonUrl) : buttonUrl;
+          const url =
+            buttonName === "Leetcode" ? leetcodeUrl(buttonUrl) : buttonUrl;
           if (url) {
             window.open(url, "_blank", "noopener,noreferrer");
           }
@@ -32,13 +57,27 @@ const SocialButton = ({ icon, buttonUrl, buttonName, leetcodeUrl }) => {
       }}
       disabled={!buttonUrl}
     >
-      <div className={`text-xl ${isLinked ? 'group-hover:scale-110 transition-transform' : ''}`}>
+      <div
+        className={`text-xl ${
+          isLinked ? "group-hover:scale-110 transition-transform" : ""
+        }`}
+      >
         {icon}
       </div>
       <span className="font-medium truncate">{buttonName}</span>
       {isLinked && (
-        <svg className="w-4 h-4 ml-auto opacity-0 -translate-x-2 group-hover:opacity-100 group-hover:translate-x-0 transition-all" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
+        <svg
+          className="w-4 h-4 ml-auto opacity-0 -translate-x-2 group-hover:opacity-100 group-hover:translate-x-0 transition-all"
+          fill="none"
+          stroke="currentColor"
+          viewBox="0 0 24 24"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth={2}
+            d="M9 5l7 7-7 7"
+          />
         </svg>
       )}
     </motion.button>
@@ -48,7 +87,14 @@ const SocialButton = ({ icon, buttonUrl, buttonName, leetcodeUrl }) => {
 /**
  * A themed input wrapper for editing social links.
  */
-const SocialInput = ({ labelName, icon, linkName, editData, setEditData, error }) => {
+const SocialInput = ({
+  labelName,
+  icon,
+  linkName,
+  editData,
+  setEditData,
+  error,
+}) => {
   return (
     <div className="space-y-2">
       <label className="text-sm font-semibold text-foreground flex items-center gap-2">
@@ -59,18 +105,18 @@ const SocialInput = ({ labelName, icon, linkName, editData, setEditData, error }
         type="text"
         value={editData.socialLinks?.[linkName] || ""}
         onChange={(e) => {
-          setEditData(prev => ({
+          setEditData((prev) => ({
             ...prev,
             socialLinks: {
               ...prev.socialLinks,
-              [linkName]: e.target.value
-            }
+              [linkName]: e.target.value,
+            },
           }));
         }}
         placeholder={`Enter ${labelName} URL`}
         className="w-full px-4 py-2.5 bg-background border-2 border-border rounded-xl focus:border-primary focus:ring-4 focus:ring-primary/10 transition-all outline-none"
       />
-      {linkName === 'leetcode' && error && (
+      {linkName === "leetcode" && error && (
         <p className="text-sm text-destructive flex items-center gap-1">
           <X className="w-4 h-4" />
           {error}
@@ -105,7 +151,12 @@ const SuccessPopup = ({ isVisible, onClose, userName }) => {
             <motion.div
               initial={{ scale: 0, rotate: 0 }}
               animate={{ scale: 1, rotate: 360 }}
-              transition={{ type: "spring", stiffness: 200, damping: 10, delay: 0.1 }}
+              transition={{
+                type: "spring",
+                stiffness: 200,
+                damping: 10,
+                delay: 0.1,
+              }}
               className="w-16 h-16 mx-auto bg-primary text-primary-foreground rounded-full flex items-center justify-center shadow-lg"
             >
               <Zap className="w-8 h-8" />
@@ -113,7 +164,8 @@ const SuccessPopup = ({ isVisible, onClose, userName }) => {
 
             <h3 className="text-3xl font-bold text-primary">Success!</h3>
             <p className="text-lg text-foreground/90">
-              **{userName || "Your profile"}** has been **updated successfully**.
+              **{userName || "Your profile"}** has been **updated
+              successfully**.
             </p>
             <p className="text-muted-foreground text-sm">
               Your changes are now live and visible to the community.
@@ -136,7 +188,6 @@ const SuccessPopup = ({ isVisible, onClose, userName }) => {
 
 // --- END: Helper Components for Modern UI (Including the new SuccessPopup) ---
 
-
 const Profile = () => {
   const [profileData, setProfileData] = useState({
     name: "",
@@ -146,10 +197,17 @@ const Profile = () => {
     avatar: "/uploads/avatars/default-avatar.png",
     website: "",
     socialLinks: {
-      github: "", gitlab: "", linkedin: "", website: "",
-      codechef: "", hackerrank: "", leetcode: "", codeforces: "", hackerearth: ""
+      github: "",
+      gitlab: "",
+      linkedin: "",
+      website: "",
+      codechef: "",
+      hackerrank: "",
+      leetcode: "",
+      codeforces: "",
+      hackerearth: "",
     },
-    skills: []
+    skills: [],
   });
 
   // NEW STATE FOR POPUP
@@ -172,40 +230,50 @@ const Profile = () => {
   useEffect(() => {
     const fetchProfile = async () => {
       try {
-        const token = localStorage.getItem('token');
+        const token = localStorage.getItem("token");
         if (!token) {
-          navigate('/login');
+          navigate("/login");
           return;
         }
 
-        const response = await fetch(`${import.meta.env.VITE_API_URL}/api/profile`, {
-          headers: {
-            'x-auth-token': token
+        const response = await fetch(
+          `${import.meta.env.VITE_API_URL}/api/profile`,
+          {
+            headers: {
+              "x-auth-token": token,
+            },
           }
-        });
+        );
 
         if (!response.ok) {
-          throw new Error('Failed to fetch profile data');
+          throw new Error("Failed to fetch profile data");
         }
 
         const data = await response.json();
-        
+
         // Ensure socialLinks exists
         const normalizedData = {
           ...data,
           socialLinks: data.socialLinks || {
-            github: "", gitlab: "", linkedin: "", website: "",
-            codechef: "", hackerrank: "", leetcode: "", codeforces: "", hackerearth: ""
+            github: "",
+            gitlab: "",
+            linkedin: "",
+            website: "",
+            codechef: "",
+            hackerrank: "",
+            leetcode: "",
+            codeforces: "",
+            hackerearth: "",
           },
-          skills: data.skills || []
+          skills: data.skills || [],
         };
-        
+
         setProfileData(normalizedData);
         setEditData(normalizedData);
         setIsLoading(false);
       } catch (error) {
-        console.error('Error fetching profile:', error);
-        setError('Failed to load profile data');
+        console.error("Error fetching profile:", error);
+        setError("Failed to load profile data");
         setIsLoading(false);
       }
     };
@@ -227,27 +295,30 @@ const Profile = () => {
     const { name, value } = e.target;
     setEditData({
       ...editData,
-      [name]: value
+      [name]: value,
     });
   };
-  
+
   const handleWebsiteChange = (e) => {
     const value = e.target.value;
-    setEditData(prev => ({
-        ...prev,
+    setEditData((prev) => ({
+      ...prev,
+      website: value,
+      socialLinks: {
+        ...prev.socialLinks,
         website: value,
-        socialLinks: {
-            ...prev.socialLinks,
-            website: value
-        }
+      },
     }));
   };
 
   const handleAddSkill = () => {
-    if (currentSkill.trim() !== "" && !editData.skills.includes(currentSkill.trim())) {
+    if (
+      currentSkill.trim() !== "" &&
+      !editData.skills.includes(currentSkill.trim())
+    ) {
       setEditData({
         ...editData,
-        skills: [...editData.skills, currentSkill.trim()]
+        skills: [...editData.skills, currentSkill.trim()],
       });
       setCurrentSkill("");
     }
@@ -256,7 +327,7 @@ const Profile = () => {
   const handleRemoveSkill = (skillToRemove) => {
     setEditData({
       ...editData,
-      skills: editData.skills.filter(skill => skill !== skillToRemove)
+      skills: editData.skills.filter((skill) => skill !== skillToRemove),
     });
   };
 
@@ -269,29 +340,32 @@ const Profile = () => {
   const handleGenerateAvatar = async () => {
     if (isEditing) {
       try {
-        const token = localStorage.getItem('token');
+        const token = localStorage.getItem("token");
         if (!token) {
-          throw new Error('Authentication required');
+          throw new Error("Authentication required");
         }
 
-        const response = await fetch(`${import.meta.env.VITE_API_URL}/api/profile/generate-avatar`, {
-          method: 'POST',
-          headers: {
-            'x-auth-token': token
+        const response = await fetch(
+          `${import.meta.env.VITE_API_URL}/api/profile/generate-avatar`,
+          {
+            method: "POST",
+            headers: {
+              "x-auth-token": token,
+            },
           }
-        });
+        );
 
         if (!response.ok) {
-          throw new Error('Failed to generate avatar');
+          throw new Error("Failed to generate avatar");
         }
 
         const data = await response.json();
         setAvatarPreview(`${import.meta.env.VITE_API_URL}${data.avatar}`);
         setAvatarFile(null);
-        setEditData(prev => ({...prev, avatar: data.avatar})); 
+        setEditData((prev) => ({ ...prev, avatar: data.avatar }));
       } catch (error) {
-        console.error('Error generating avatar:', error);
-        alert('Failed to generate new avatar');
+        console.error("Error generating avatar:", error);
+        alert("Failed to generate new avatar");
       }
     }
   };
@@ -310,24 +384,44 @@ const Profile = () => {
 
   function normalizeLeetcodeURL(url) {
     if (!url || url.trim() === "") return null;
-    const leetcodeRegex = /^https?:\/\/(www\.)?leetcode\.com\/(u\/)?[a-zA-Z0-9_-]+\/?$/;
-    if (!leetcodeRegex.test(url)) {
-      return null;
-    }
-    return url.replace(/\/$/, '');
+    const leetcodeRegex =
+      /^https?:\/\/(www\.)?leetcode\.com\/(u\/)?[a-zA-Z0-9_-]+\/?$/;
+    if (!leetcodeRegex.test(url)) return null;
+    return url.replace(/\/$/, "");
+  }
+
+  function normalizeGitHubURL(url) {
+    if (!url || url.trim() === "") return null;
+    const githubRegex = /^https?:\/\/(www\.)?github\.com\/[a-zA-Z0-9_-]+\/?$/;
+    if (!githubRegex.test(url)) return null;
+
+    const username = url.replace(/\/$/, "").split("/").pop();
+    return username;
   }
 
   const getLeetcodeUrl = (url) => {
     const normalized = normalizeLeetcodeURL(url);
     if (!normalized) return null;
     const username = normalized.split("/").pop();
-    return `${import.meta.env.VITE_API_URL}/leetcode/${username}`; 
-  }
+    return `${import.meta.env.VITE_API_URL}/leetcode/${username}`;
+  };
 
   const handleSaveProfile = async () => {
     setIsSaving(true);
+
+    // GitHub validation
+    let githubUrlValue = editData.socialLinks?.github?.trim();
+    let normalizedGithub = githubUrlValue
+      ? normalizeGitHubURL(githubUrlValue)
+      : "";
+    if (githubUrlValue && !normalizedGithub) {
+      setError("GitHub Profile URL must be valid");
+      setIsSaving(false);
+      return;
+    }
+
+    // LeetCode validation
     let leetcodeUrlValue = editData.socialLinks?.leetcode?.trim();
-    
     if (leetcodeUrlValue && leetcodeUrlValue !== "") {
       let res = normalizeLeetcodeURL(leetcodeUrlValue);
       if (!res) {
@@ -338,40 +432,39 @@ const Profile = () => {
     }
 
     try {
-      const token = localStorage.getItem('token');
-      if (!token) {
-        throw new Error('Authentication required');
-      }
+      const token = localStorage.getItem("token");
+      if (!token) throw new Error("Authentication required");
 
       let finalAvatarPath = editData.avatar;
 
       if (avatarFile) {
         const formData = new FormData();
-        formData.append('avatar', avatarFile);
-
-        const avatarResponse = await fetch(`${import.meta.env.VITE_API_URL}/api/profile/avatar`, {
-          method: 'POST',
-          headers: {
-            'x-auth-token': token
-          },
-          body: formData
-        });
+        formData.append("avatar", avatarFile);
+
+        const avatarResponse = await fetch(
+          `${import.meta.env.VITE_API_URL}/api/profile/avatar`,
+          {
+            method: "POST",
+            headers: { "x-auth-token": token },
+            body: formData,
+          }
+        );
 
         if (!avatarResponse.ok) {
           const errorData = await avatarResponse.json();
-          throw new Error(errorData.msg || 'Failed to upload avatar');
+          throw new Error(errorData.msg || "Failed to upload avatar");
         }
 
         const avatarData = await avatarResponse.json();
         finalAvatarPath = avatarData.avatar;
       }
-      
+
       const requestBody = {
         name: editData.name,
         bio: editData.bio,
         location: editData.location,
         skills: editData.skills,
-        github: editData.socialLinks?.github || "",
+        github: githubUrlValue,
         gitlab: editData.socialLinks?.gitlab || "",
         linkedin: editData.socialLinks?.linkedin || "",
         twitter: editData.socialLinks?.twitter || "",
@@ -380,25 +473,28 @@ const Profile = () => {
         hackerrank: editData.socialLinks?.hackerrank || "",
         leetcode: editData.socialLinks?.leetcode || "",
         codeforces: editData.socialLinks?.codeforces || "",
-        hackerearth: editData.socialLinks?.hackerearth || ""
+        hackerearth: editData.socialLinks?.hackerearth || "",
       };
-      
-      if (avatarFile || (avatarPreview && !avatarPreview.startsWith('data:'))) {
-        requestBody.avatar = finalAvatarPath; 
+
+      if (avatarFile || (avatarPreview && !avatarPreview.startsWith("data:"))) {
+        requestBody.avatar = finalAvatarPath;
       }
 
-      const response = await fetch(`${import.meta.env.VITE_API_URL}/api/profile`, {
-        method: 'PUT',
-        headers: {
-          'Content-Type': 'application/json',
-          'x-auth-token': token
-        },
-        body: JSON.stringify(requestBody)
-      });
+      const response = await fetch(
+        `${import.meta.env.VITE_API_URL}/api/profile`,
+        {
+          method: "PUT",
+          headers: {
+            "Content-Type": "application/json",
+            "x-auth-token": token,
+          },
+          body: JSON.stringify(requestBody),
+        }
+      );
 
       if (!response.ok) {
         const errorData = await response.json();
-        throw new Error(errorData.msg || 'Failed to update profile');
+        throw new Error(errorData.msg || "Failed to update profile");
       }
 
       const rawUpdatedProfile = await response.json();
@@ -406,9 +502,16 @@ const Profile = () => {
       const updatedProfile = {
         ...rawUpdatedProfile,
         socialLinks: rawUpdatedProfile.socialLinks || {
-          github: "", gitlab: "", linkedin: "", website: "",
-          codechef: "", hackerrank: "", leetcode: "", codeforces: "", hackerearth: ""
-        }
+          github: "",
+          gitlab: "",
+          linkedin: "",
+          website: "",
+          codechef: "",
+          hackerrank: "",
+          leetcode: "",
+          codeforces: "",
+          hackerearth: "",
+        },
       };
 
       setAvatarFile(null);
@@ -422,7 +525,6 @@ const Profile = () => {
       setShowSuccessPopup(true); // Show the success popup instead of alert
       // alert("Profile updated successfully!"); // REMOVE ORIGINAL ALERT
       // --- END POPUP INTEGRATION ---
-
     } catch (error) {
       console.error("Error saving profile:", error);
       alert(error.message || "Failed to update profile. Please try again.");
@@ -439,24 +541,24 @@ const Profile = () => {
 
   // --- END: ORIGINAL LOGIC (STRICTLY UNCHANGED FOR FUNCTIONALITY) ---
 
-
-  const connectedPlatformsCount = profileData.socialLinks 
-    ? Object.values(profileData.socialLinks).filter(link => link && link.trim() !== "").length 
+  const connectedPlatformsCount = profileData.socialLinks
+    ? Object.values(profileData.socialLinks).filter(
+        (link) => link && link.trim() !== ""
+      ).length
     : 0;
 
-  const currentAvatarSrc = avatarPreview 
-    ? avatarPreview 
-    : (profileData.avatar?.startsWith('http') 
-        ? profileData.avatar 
-        : `${import.meta.env.VITE_API_URL}${profileData.avatar}`
-      );
-      
+  const currentAvatarSrc = avatarPreview
+    ? avatarPreview
+    : profileData.avatar?.startsWith("http")
+    ? profileData.avatar
+    : `${import.meta.env.VITE_API_URL}${profileData.avatar}`;
+
   // ... (Loading and Error screens remain the same) ...
 
   const handleClosePopup = () => {
     setShowSuccessPopup(false);
   };
-      
+
   if (isLoading) {
     return (
       <div className="min-h-screen w-full bg-background flex items-center justify-center">
@@ -488,31 +590,28 @@ const Profile = () => {
   return (
     // Outer Container: Full Viewport Height
     <div className="h-screen w-full bg-background flex flex-col">
-      <BackButton />  
+      <BackButton />
       {/* Success Popup */}
-      <SuccessPopup 
-        isVisible={showSuccessPopup} 
-        onClose={handleClosePopup} 
+      <SuccessPopup
+        isVisible={showSuccessPopup}
+        onClose={handleClosePopup}
         userName={profileData.name}
       />
 
       {/* Content Wrapper: Flex-grow to fill space below Navbar, using full width */}
       <div className="flex-grow overflow-y-auto mt-[72px] pb-12 pt-6 px-4 md:px-12">
-        
         {/* Header Section: Removed max-w-6xl mx-auto */}
         <motion.div
           initial={{ opacity: 0, y: -20 }}
           animate={{ opacity: 1, y: 0 }}
           className="mb-8 text-center"
         >
-          
-            <h1 className="text-4xl md:text-5xl font-bold bg-gradient-to-r from-primary via-primary/80 to-primary bg-clip-text text-transparent">
-              Developer Profile
-            </h1>
-            <p className="text-muted-foreground text-lg max-w-2xl mx-auto">
-              Showcase your skills and connect with the developer community
-            </p>
-         
+          <h1 className="text-4xl md:text-5xl font-bold bg-gradient-to-r from-primary via-primary/80 to-primary bg-clip-text text-transparent">
+            Developer Profile
+          </h1>
+          <p className="text-muted-foreground text-lg max-w-2xl mx-auto">
+            Showcase your skills and connect with the developer community
+          </p>
         </motion.div>
 
         {/* Main Profile Content Container (Removed Card Styling and max-w-6xl) */}
@@ -523,8 +622,7 @@ const Profile = () => {
           className="w-full" // Use full width
         >
           {/* Main Content Div (Kept overflow-hidden for safety) */}
-          <div className="overflow-hidden"> 
-            
+          <div className="overflow-hidden">
             {/* Header Strip with Actions (Full Width) */}
             <div className="bg-primary/5 px-6 md:px-12 py-6 border-b-2 border-border">
               <div className="flex flex-col md:flex-row md:items-center justify-between gap-4">
@@ -533,8 +631,12 @@ const Profile = () => {
                     <User className="w-6 h-6 text-primary-foreground" />
                   </div>
                   <div>
-                    <h2 className="text-2xl font-bold text-foreground">Your Profile</h2>
-                    <p className="text-sm text-muted-foreground">Manage your developer identity</p>
+                    <h2 className="text-2xl font-bold text-foreground">
+                      Your Profile
+                    </h2>
+                    <p className="text-sm text-muted-foreground">
+                      Manage your developer identity
+                    </p>
                   </div>
                 </div>
 
@@ -604,7 +706,7 @@ const Profile = () => {
               <div className="grid md:grid-cols-12 gap-8">
                 {/* Left Sidebar - Avatar and Name (Sticky) */}
                 <div className="md:col-span-4">
-                  <div className="sticky top-20 space-y-8"> 
+                  <div className="sticky top-20 space-y-8">
                     {/* Avatar Block - Adjusted to use full width and better padding */}
                     <div className="text-center p-6 bg-secondary/30 rounded-3xl border-2 border-border shadow-lg">
                       <motion.div
@@ -613,7 +715,7 @@ const Profile = () => {
                       >
                         <div
                           className={`relative w-full h-full rounded-3xl overflow-hidden border-4 border-primary/50 shadow-xl transition-all duration-300 ${
-                            isEditing ? 'cursor-pointer' : ''
+                            isEditing ? "cursor-pointer" : ""
                           }`}
                           onClick={handleAvatarClick}
                         >
@@ -622,7 +724,8 @@ const Profile = () => {
                             alt={profileData.name || "User"}
                             className="w-full h-full object-cover"
                             onError={(e) => {
-                              e.target.src = "https://api.dicebear.com/6.x/micah/svg?seed=fallback";
+                              e.target.src =
+                                "https://api.dicebear.com/6.x/micah/svg?seed=fallback";
                             }}
                           />
                           {isEditing && (
@@ -632,7 +735,9 @@ const Profile = () => {
                               className="absolute inset-0 bg-black/60 backdrop-blur-sm flex flex-col items-center justify-center text-white"
                             >
                               <Camera className="w-8 h-8 mb-2" />
-                              <span className="text-sm font-medium">Change Photo</span>
+                              <span className="text-sm font-medium">
+                                Change Photo
+                              </span>
                             </motion.div>
                           )}
                         </div>
@@ -657,10 +762,14 @@ const Profile = () => {
                       <div className="mt-6 space-y-3">
                         {!isEditing ? (
                           <>
-                            <h2 className="text-3xl font-bold text-foreground">{profileData.name || "Your Name"}</h2>
+                            <h2 className="text-3xl font-bold text-foreground">
+                              {profileData.name || "Your Name"}
+                            </h2>
                             <div className="flex items-center justify-center gap-2 text-muted-foreground">
                               <Mail className="w-4 h-4" />
-                              <span className="text-sm">{profileData.email || "your@email.com"}</span>
+                              <span className="text-sm">
+                                {profileData.email || "your@email.com"}
+                              </span>
                             </div>
                           </>
                         ) : (
@@ -685,12 +794,20 @@ const Profile = () => {
                         </h3>
                         <div className="space-y-3">
                           <div className="flex justify-between items-center pb-2 border-b border-border">
-                            <span className="text-sm text-muted-foreground">Total Skills</span>
-                            <span className="font-bold text-primary text-lg">{profileData.skills?.length || 0}</span>
+                            <span className="text-sm text-muted-foreground">
+                              Total Skills
+                            </span>
+                            <span className="font-bold text-primary text-lg">
+                              {profileData.skills?.length || 0}
+                            </span>
                           </div>
                           <div className="flex justify-between items-center">
-                            <span className="text-sm text-muted-foreground">Platforms Connected</span>
-                            <span className="font-bold text-primary text-lg">{connectedPlatformsCount}</span>
+                            <span className="text-sm text-muted-foreground">
+                              Platforms Connected
+                            </span>
+                            <span className="font-bold text-primary text-lg">
+                              {connectedPlatformsCount}
+                            </span>
                           </div>
                         </div>
                       </div>
@@ -713,7 +830,8 @@ const Profile = () => {
                     </h3>
                     {!isEditing ? (
                       <p className="text-foreground/90 leading-relaxed bg-secondary/30 rounded-2xl p-6 border-2 border-border shadow-inner whitespace-pre-wrap">
-                        {profileData.bio || "No bio added yet. Click 'Edit Profile' to introduce yourself!"}
+                        {profileData.bio ||
+                          "No bio added yet. Click 'Edit Profile' to introduce yourself!"}
                       </p>
                     ) : (
                       <textarea
@@ -768,19 +886,28 @@ const Profile = () => {
                           Personal Website
                         </label>
                         {!isEditing ? (
-                          <a 
-                            href={profileData.website || profileData.socialLinks?.website} 
-                            target="_blank" 
-                            rel="noopener noreferrer" 
+                          <a
+                            href={
+                              profileData.website ||
+                              profileData.socialLinks?.website
+                            }
+                            target="_blank"
+                            rel="noopener noreferrer"
                             className="block text-primary font-medium bg-secondary/30 rounded-xl px-4 py-3 border-2 border-border truncate hover:underline"
                           >
-                            {profileData.website || profileData.socialLinks?.website || "Not specified"}
+                            {profileData.website ||
+                              profileData.socialLinks?.website ||
+                              "Not specified"}
                           </a>
                         ) : (
                           <input
                             type="text"
                             name="website"
-                            value={editData.website || editData.socialLinks?.website || ""}
+                            value={
+                              editData.website ||
+                              editData.socialLinks?.website ||
+                              ""
+                            }
                             onChange={handleWebsiteChange}
                             placeholder="https://yourwebsite.com"
                             className="w-full px-4 py-2.5 bg-background border-2 border-border rounded-xl focus:border-primary focus:ring-4 focus:ring-primary/10 transition-all outline-none"
@@ -789,7 +916,7 @@ const Profile = () => {
                       </div>
                     </div>
                   </motion.div>
-                  
+
                   {/* Skills Section */}
                   <motion.div
                     initial={{ opacity: 0, x: 20 }}
@@ -817,7 +944,9 @@ const Profile = () => {
                           onChange={(e) => setCurrentSkill(e.target.value)}
                           placeholder="Add a skill (e.g., React, Python, Docker)"
                           className="flex-1 px-5 py-3 bg-background border-2 border-border rounded-xl focus:border-primary focus:ring-4 focus:ring-primary/10 transition-all outline-none"
-                          onKeyDown={(e) => e.key === 'Enter' && handleAddSkill()}
+                          onKeyDown={(e) =>
+                            e.key === "Enter" && handleAddSkill()
+                          }
                         />
                         <motion.button
                           whileHover={{ scale: 1.05 }}
@@ -832,38 +961,45 @@ const Profile = () => {
                       </div>
                     )}
 
-                    {(isEditing ? editData.skills : profileData.skills)?.length === 0 ? (
+                    {(isEditing ? editData.skills : profileData.skills)
+                      ?.length === 0 ? (
                       <div className="text-center py-12 bg-secondary/20 rounded-2xl border-2 border-dashed border-border">
-                        <p className="text-muted-foreground">No skills added yet</p>
+                        <p className="text-muted-foreground">
+                          No skills added yet
+                        </p>
                       </div>
                     ) : (
                       <div className="flex flex-wrap gap-3">
-                        {(isEditing ? editData.skills : profileData.skills).map((skill, index) => (
-                          <motion.div
-                            key={index}
-                            initial={{ scale: 0 }}
-                            animate={{ scale: 1 }}
-                            transition={{ delay: index * 0.05 }}
-                            whileHover={{ scale: 1.03 }}
-                            className={`group relative ${
-                              isEditing
-                                ? "bg-primary text-primary-foreground hover:bg-primary/90 cursor-pointer"
-                                : "bg-secondary text-foreground hover:bg-primary/10 hover:text-primary"
-                            } px-5 py-2 rounded-full font-medium transition-all border-2 border-border flex items-center gap-2 shadow-sm`}
-                          >
-                            {!isEditing && <Check className="w-4 h-4 text-primary" />}
-                            <span>{skill}</span>
-                            {isEditing && (
-                              <button
-                                onClick={() => handleRemoveSkill(skill)}
-                                className="hover:bg-white/20 rounded-full p-1 transition-colors ml-1"
-                                aria-label="Remove skill"
-                              >
-                                <X className="w-4 h-4 text-primary-foreground" />
-                              </button>
-                            )}
-                          </motion.div>
-                        ))}
+                        {(isEditing ? editData.skills : profileData.skills).map(
+                          (skill, index) => (
+                            <motion.div
+                              key={index}
+                              initial={{ scale: 0 }}
+                              animate={{ scale: 1 }}
+                              transition={{ delay: index * 0.05 }}
+                              whileHover={{ scale: 1.03 }}
+                              className={`group relative ${
+                                isEditing
+                                  ? "bg-primary text-primary-foreground hover:bg-primary/90 cursor-pointer"
+                                  : "bg-secondary text-foreground hover:bg-primary/10 hover:text-primary"
+                              } px-5 py-2 rounded-full font-medium transition-all border-2 border-border flex items-center gap-2 shadow-sm`}
+                            >
+                              {!isEditing && (
+                                <Check className="w-4 h-4 text-primary" />
+                              )}
+                              <span>{skill}</span>
+                              {isEditing && (
+                                <button
+                                  onClick={() => handleRemoveSkill(skill)}
+                                  className="hover:bg-white/20 rounded-full p-1 transition-colors ml-1"
+                                  aria-label="Remove skill"
+                                >
+                                  <X className="w-4 h-4 text-primary-foreground" />
+                                </button>
+                              )}
+                            </motion.div>
+                          )
+                        )}
                       </div>
                     )}
                   </motion.div>
@@ -879,18 +1015,54 @@ const Profile = () => {
                       <div className="w-1 h-6 bg-primary rounded-full"></div>
                       Social Profiles
                     </h3>
-                    
+
                     {!isEditing ? (
                       <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-4">
-                        <SocialButton icon={<SiGithub />} buttonUrl={profileData.socialLinks?.github} buttonName="GitHub" leetcodeUrl={getLeetcodeUrl} />
-                        <SocialButton icon={<SiGitlab />} buttonUrl={profileData.socialLinks?.gitlab} buttonName="GitLab" leetcodeUrl={getLeetcodeUrl} />
-                        <SocialButton icon={<SiLinkedin />} buttonUrl={profileData.socialLinks?.linkedin} buttonName="LinkedIn" leetcodeUrl={getLeetcodeUrl} />
+                        <SocialButton
+                          icon={<SiGithub />}
+                          buttonUrl={profileData.socialLinks?.github}
+                          buttonName="GitHub"
+                          leetcodeUrl={getLeetcodeUrl}
+                        />
+                        <SocialButton
+                          icon={<SiGitlab />}
+                          buttonUrl={profileData.socialLinks?.gitlab}
+                          buttonName="GitLab"
+                          leetcodeUrl={getLeetcodeUrl}
+                        />
+                        <SocialButton
+                          icon={<SiLinkedin />}
+                          buttonUrl={profileData.socialLinks?.linkedin}
+                          buttonName="LinkedIn"
+                          leetcodeUrl={getLeetcodeUrl}
+                        />
                       </div>
                     ) : (
                       <div className="grid sm:grid-cols-2 gap-6">
-                        <SocialInput labelName="GitHub" icon={<SiGithub className="w-5 h-5" />} linkName="github" editData={editData} setEditData={setEditData} error={error} />
-                        <SocialInput labelName="GitLab" icon={<SiGitlab className="w-5 h-5" />} linkName="gitlab" editData={editData} setEditData={setEditData} error={error} />
-                        <SocialInput labelName="LinkedIn" icon={<SiLinkedin className="w-5 h-5" />} linkName="linkedin" editData={editData} setEditData={setEditData} error={error} />
+                        <SocialInput
+                          labelName="GitHub"
+                          icon={<SiGithub className="w-5 h-5" />}
+                          linkName="github"
+                          editData={editData}
+                          setEditData={setEditData}
+                          error={error}
+                        />
+                        <SocialInput
+                          labelName="GitLab"
+                          icon={<SiGitlab className="w-5 h-5" />}
+                          linkName="gitlab"
+                          editData={editData}
+                          setEditData={setEditData}
+                          error={error}
+                        />
+                        <SocialInput
+                          labelName="LinkedIn"
+                          icon={<SiLinkedin className="w-5 h-5" />}
+                          linkName="linkedin"
+                          editData={editData}
+                          setEditData={setEditData}
+                          error={error}
+                        />
                       </div>
                     )}
                   </motion.div>
@@ -906,26 +1078,85 @@ const Profile = () => {
                       <div className="w-1 h-6 bg-accent rounded-full"></div>
                       Competitive Coding
                     </h3>
-                    
+
                     {!isEditing ? (
                       <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-4">
-                        <SocialButton icon={<SiLeetcode />} buttonUrl={profileData.socialLinks?.leetcode} buttonName="Leetcode" leetcodeUrl={getLeetcodeUrl} />
-                        <SocialButton icon={<SiCodechef />} buttonUrl={profileData.socialLinks?.codechef} buttonName="CodeChef" leetcodeUrl={getLeetcodeUrl} />
-                        <SocialButton icon={<SiHackerrank />} buttonUrl={profileData.socialLinks?.hackerrank} buttonName="HackerRank" leetcodeUrl={getLeetcodeUrl} />
-                        <SocialButton icon={<SiCodeforces />} buttonUrl={profileData.socialLinks?.codeforces} buttonName="Codeforces" leetcodeUrl={getLeetcodeUrl} />
-                        <SocialButton icon={<SiHackerearth />} buttonUrl={profileData.socialLinks?.hackerearth} buttonName="HackerEarth" leetcodeUrl={getLeetcodeUrl} />
+                        <SocialButton
+                          icon={<SiLeetcode />}
+                          buttonUrl={profileData.socialLinks?.leetcode}
+                          buttonName="Leetcode"
+                          leetcodeUrl={getLeetcodeUrl}
+                        />
+                        <SocialButton
+                          icon={<SiCodechef />}
+                          buttonUrl={profileData.socialLinks?.codechef}
+                          buttonName="CodeChef"
+                          leetcodeUrl={getLeetcodeUrl}
+                        />
+                        <SocialButton
+                          icon={<SiHackerrank />}
+                          buttonUrl={profileData.socialLinks?.hackerrank}
+                          buttonName="HackerRank"
+                          leetcodeUrl={getLeetcodeUrl}
+                        />
+                        <SocialButton
+                          icon={<SiCodeforces />}
+                          buttonUrl={profileData.socialLinks?.codeforces}
+                          buttonName="Codeforces"
+                          leetcodeUrl={getLeetcodeUrl}
+                        />
+                        <SocialButton
+                          icon={<SiHackerearth />}
+                          buttonUrl={profileData.socialLinks?.hackerearth}
+                          buttonName="HackerEarth"
+                          leetcodeUrl={getLeetcodeUrl}
+                        />
                       </div>
                     ) : (
                       <div className="grid sm:grid-cols-2 gap-6">
-                        <SocialInput labelName="LeetCode" icon={<SiLeetcode className="w-5 h-5" />} linkName="leetcode" editData={editData} setEditData={setEditData} error={error} />
-                        <SocialInput labelName="CodeChef" icon={<SiCodechef className="w-5 h-5" />} linkName="codechef" editData={editData} setEditData={setEditData} error={error} />
-                        <SocialInput labelName="HackerRank" icon={<SiHackerrank className="w-5 h-5" />} linkName="hackerrank" editData={editData} setEditData={setEditData} error={error} />
-                        <SocialInput labelName="Codeforces" icon={<SiCodeforces className="w-5 h-5" />} linkName="codeforces" editData={editData} setEditData={setEditData} error={error} />
-                        <SocialInput labelName="HackerEarth" icon={<SiHackerearth className="w-5 h-5" />} linkName="hackerearth" editData={editData} setEditData={setEditData} error={error} />
+                        <SocialInput
+                          labelName="LeetCode"
+                          icon={<SiLeetcode className="w-5 h-5" />}
+                          linkName="leetcode"
+                          editData={editData}
+                          setEditData={setEditData}
+                          error={error}
+                        />
+                        <SocialInput
+                          labelName="CodeChef"
+                          icon={<SiCodechef className="w-5 h-5" />}
+                          linkName="codechef"
+                          editData={editData}
+                          setEditData={setEditData}
+                          error={error}
+                        />
+                        <SocialInput
+                          labelName="HackerRank"
+                          icon={<SiHackerrank className="w-5 h-5" />}
+                          linkName="hackerrank"
+                          editData={editData}
+                          setEditData={setEditData}
+                          error={error}
+                        />
+                        <SocialInput
+                          labelName="Codeforces"
+                          icon={<SiCodeforces className="w-5 h-5" />}
+                          linkName="codeforces"
+                          editData={editData}
+                          setEditData={setEditData}
+                          error={error}
+                        />
+                        <SocialInput
+                          labelName="HackerEarth"
+                          icon={<SiHackerearth className="w-5 h-5" />}
+                          linkName="hackerearth"
+                          editData={editData}
+                          setEditData={setEditData}
+                          error={error}
+                        />
                       </div>
                     )}
                   </motion.div>
-
                 </div>
               </div>
             </div>
@@ -944,4 +1175,4 @@ const Profile = () => {
   );
 };
 
-export default Profile;
\ No newline at end of file
+export default Profile;
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 6c6c280..960027c 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -40,45 +40,68 @@
   --color-sidebar-border: var(--sidebar-border);
   --color-sidebar-ring: var(--sidebar-ring);
   --animate-shiny-text: shiny-text 8s infinite;
+
   @keyframes shiny-text {
-  0%, 90%, 100% {
-    background-position: calc(-100% - var(--shiny-width)) 0;
+
+    0%,
+    90%,
+    100% {
+      background-position: calc(-100% - var(--shiny-width)) 0;
     }
-  30%, 60% {
-    background-position: calc(100% + var(--shiny-width)) 0;
+
+    30%,
+    60% {
+      background-position: calc(100% + var(--shiny-width)) 0;
     }
   }
-  --animate-gradient: gradient 8s linear infinite
-;
+
+  --animate-gradient: gradient 8s linear infinite;
+
   @keyframes gradient {
-  to {
-    background-position: var(--bg-size, 300%) 0;}}}
+    to {
+      background-position: var(--bg-size, 300%) 0;
+    }
+  }
+}
 
 :root {
   --radius: 0.625rem;
-  --background: oklch(0.98 0.01 250); /* Very light blue */
-  --foreground: oklch(0.15 0.05 250); /* Dark blue */
-  --card: oklch(1 0 0); /* Pure white */
+  --background: oklch(0.98 0.01 250);
+  /* Very light blue */
+  --foreground: oklch(0.15 0.05 250);
+  /* Dark blue */
+  --card: oklch(1 0 0);
+  /* Pure white */
   --card-foreground: oklch(0.15 0.05 250);
   --popover: oklch(1 0 0);
   --popover-foreground: oklch(0.15 0.05 250);
-  --primary: oklch(0.55 0.15 250); /* Medium blue */
+  --primary: oklch(0.55 0.15 250);
+  /* Medium blue */
   --primary-foreground: oklch(0.98 0.01 250);
-  --secondary: oklch(0.95 0.02 250); /* Light blue */
+  --secondary: oklch(0.95 0.02 250);
+  /* Light blue */
   --secondary-foreground: oklch(0.25 0.06 250);
   --muted: oklch(0.95 0.02 250);
   --muted-foreground: oklch(0.55 0.08 250);
-  --accent: oklch(79.476% 0.08834 237.132); /* Coral/orange accent - complements blue */
+  --accent: oklch(79.476% 0.08834 237.132);
+  /* Coral/orange accent - complements blue */
   --accent-foreground: oklch(0.98 0.01 250);
-  --destructive: oklch(0.7 0.2 25); /* Red-orange */
-  --border: oklch(0.9 0.03 250); /* Light blue border */
+  --destructive: oklch(0.7 0.2 25);
+  /* Red-orange */
+  --border: oklch(0.9 0.03 250);
+  /* Light blue border */
   --input: oklch(0.92 0.02 250);
   --ring: oklch(0.65 0.12 250);
-  --chart-1: oklch(0.55 0.15 250); /* Blue */
-  --chart-2: oklch(0.85 0.12 70);  /* Coral */
-  --chart-3: oklch(0.7 0.18 180);  /* Teal */
-  --chart-4: oklch(0.8 0.15 300);  /* Purple */
-  --chart-5: oklch(0.75 0.14 120); /* Green */
+  --chart-1: oklch(0.55 0.15 250);
+  /* Blue */
+  --chart-2: oklch(0.85 0.12 70);
+  /* Coral */
+  --chart-3: oklch(0.7 0.18 180);
+  /* Teal */
+  --chart-4: oklch(0.8 0.15 300);
+  /* Purple */
+  --chart-5: oklch(0.75 0.14 120);
+  /* Green */
   --sidebar: oklch(0.97 0.01 250);
   --sidebar-foreground: oklch(0.15 0.05 250);
   --sidebar-primary: oklch(0.55 0.15 250);
@@ -87,32 +110,43 @@
   --sidebar-accent-foreground: oklch(0.25 0.06 250);
   --sidebar-border: oklch(0.9 0.03 250);
   --sidebar-ring: oklch(0.65 0.12 250);
+  --heatmap-bg: #ebedf0;
 }
 
 .dark {
-  --background: oklch(0.12 0.04 250); /* Very dark blue */
+  --background: oklch(0.12 0.04 250);
+  /* Very dark blue */
   --foreground: oklch(0.95 0.01 250);
-  --card: oklch(0.18 0.05 250); /* Dark blue card */
+  --card: oklch(0.18 0.05 250);
+  /* Dark blue card */
   --card-foreground: oklch(0.95 0.01 250);
   --popover: oklch(0.18 0.05 250);
   --popover-foreground: oklch(0.95 0.01 250);
-  --primary: oklch(0.65 0.12 250); /* Bright blue */
+  --primary: oklch(0.65 0.12 250);
+  /* Bright blue */
   --primary-foreground: oklch(0.15 0.04 250);
-  --secondary: oklch(0.22 0.06 250); /* Medium-dark blue */
+  --secondary: oklch(0.22 0.06 250);
+  /* Medium-dark blue */
   --secondary-foreground: oklch(0.95 0.01 250);
   --muted: oklch(0.22 0.06 250);
   --muted-foreground: oklch(0.7 0.08 250);
-  --accent: oklch(82.859% 0.0607 244.047); /* Brighter coral for dark mode */
+  --accent: oklch(82.859% 0.0607 244.047);
+  /* Brighter coral for dark mode */
   --accent-foreground: oklch(0.15 0.04 250);
   --destructive: oklch(0.75 0.22 25);
   --border: oklch(0.25 0.05 250);
   --input: oklch(0.25 0.05 250);
   --ring: oklch(0.65 0.12 250);
-  --chart-1: oklch(0.65 0.12 250); /* Blue */
-  --chart-2: oklch(0.75 0.14 70);  /* Coral */
-  --chart-3: oklch(0.6 0.16 180);  /* Teal */
-  --chart-4: oklch(0.7 0.13 300);  /* Purple */
-  --chart-5: oklch(0.65 0.12 120); /* Green */
+  --chart-1: oklch(0.65 0.12 250);
+  /* Blue */
+  --chart-2: oklch(0.75 0.14 70);
+  /* Coral */
+  --chart-3: oklch(0.6 0.16 180);
+  /* Teal */
+  --chart-4: oklch(0.7 0.13 300);
+  /* Purple */
+  --chart-5: oklch(0.65 0.12 120);
+  /* Green */
   --sidebar: oklch(0.18 0.05 250);
   --sidebar-foreground: oklch(0.95 0.01 250);
   --sidebar-primary: oklch(0.65 0.12 250);
@@ -121,17 +155,19 @@
   --sidebar-accent-foreground: oklch(0.95 0.01 250);
   --sidebar-border: oklch(0.25 0.05 250);
   --sidebar-ring: oklch(0.65 0.12 250);
+  --heatmap-bg: #1f2937;
 }
 
 @layer base {
   * {
     @apply border-border outline-ring/50;
   }
+
   body {
     @apply bg-background text-foreground;
   }
 }
 
-html{
+html {
   scroll-behavior: smooth;
 }
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index b6adf09..cd51095 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -7,6 +7,7 @@
       "dependencies": {
         "@octokit/rest": "^22.0.0",
         "@pinecone-database/pinecone": "^6.1.2",
+        "cors": "^2.8.5",
         "dotenv": "^17.2.3",
         "node-fetch": "^3.3.2"
       }
@@ -180,6 +181,19 @@
       "integrity": "sha512-q6tR3RPqIB1pMiTRMFcZwuG5T8vwp+vUvEG0vuI6B+Rikh5BfPp2fQ82c925FOs+b0lcFQ8CFrL+KbilfZFhOQ==",
       "license": "Apache-2.0"
     },
+    "node_modules/cors": {
+      "version": "2.8.5",
+      "resolved": "https://registry.npmjs.org/cors/-/cors-2.8.5.tgz",
+      "integrity": "sha512-KIHbLJqu73RGr/hnbrO9uBeixNGuvSQjul/jdFvS/KFSIH1hWVd1ng7zOHx+YrEfInLG7q4n6GHQ9cDtxv/P6g==",
+      "license": "MIT",
+      "dependencies": {
+        "object-assign": "^4",
+        "vary": "^1"
+      },
+      "engines": {
+        "node": ">= 0.10"
+      }
+    },
     "node_modules/data-uri-to-buffer": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/data-uri-to-buffer/-/data-uri-to-buffer-4.0.1.tgz",
@@ -290,12 +304,30 @@
         "url": "https://opencollective.com/node-fetch"
       }
     },
+    "node_modules/object-assign": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/universal-user-agent": {
       "version": "7.0.3",
       "resolved": "https://registry.npmjs.org/universal-user-agent/-/universal-user-agent-7.0.3.tgz",
       "integrity": "sha512-TmnEAEAsBJVZM/AADELsK76llnwcf9vMKuPz8JflO1frO8Lchitr0fNaN9d+Ap0BjKtqWqd/J17qeDnXh8CL2A==",
       "license": "ISC"
     },
+    "node_modules/vary": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
+      "integrity": "sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
     "node_modules/web-streams-polyfill": {
       "version": "3.3.3",
       "resolved": "https://registry.npmjs.org/web-streams-polyfill/-/web-streams-polyfill-3.3.3.tgz",
diff --git a/package.json b/package.json
index 256dfed..1276f84 100644
--- a/package.json
+++ b/package.json
@@ -2,6 +2,7 @@
   "dependencies": {
     "@octokit/rest": "^22.0.0",
     "@pinecone-database/pinecone": "^6.1.2",
+    "cors": "^2.8.5",
     "dotenv": "^17.2.3",
     "node-fetch": "^3.3.2"
   }