diff --git a/package.json b/package.json
index f2d89f5..4a80d3c 100644
--- a/package.json
+++ b/package.json
@@ -16,6 +16,9 @@
     "@emotion/styled": "^11.11.0",
     "@mui/icons-material": "^5.15.6",
     "@mui/material": "^5.15.6",
+    "@octokit/core": "^6.1.6",
+    "@octokit/plugin-paginate-rest": "^11.6.0",
+    "@octokit/plugin-throttling": "^9.6.1",
     "@primer/octicons-react": "^19.15.5",
     "@vitejs/plugin-react": "^4.3.3",
     "axios": "^1.7.7",
diff --git a/src/App.tsx b/src/App.tsx
index b00eba8..4485005 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,24 +1,32 @@
+import { createBrowserRouter, RouterProvider, Outlet } from "react-router-dom";
+import { lazy, Suspense } from "react";
 import Navbar from "./components/Navbar";
 import Footer from "./components/Footer";
 import ScrollProgressBar from "./components/ScrollProgressBar";
 import { Toaster } from "react-hot-toast";
-import Router from "./Routes/Router";
 import ThemeWrapper from "./context/ThemeContext";
 
-function App() {
+const Home = lazy(() => import("./pages/Home/Home.tsx"));
+const Tracker = lazy(() => import("./pages/Tracker/Tracker.tsx"));
+const About = lazy(() => import("./pages/About/About"));
+const Contact = lazy(() => import("./pages/Contact/Contact"));
+const Contributors = lazy(() => import("./pages/Contributors/Contributors"));
+const Signup = lazy(() => import("./pages/Signup/Signup.tsx"));
+const Login = lazy(() => import("./pages/Login/Login.tsx"));
+const ContributorProfile = lazy(() => import("./pages/ContributorProfile/ContributorProfile.tsx"));
+
+function RootLayout() {
   return (
     <ThemeWrapper>
       <div className="relative flex flex-col min-h-screen">
         <ScrollProgressBar />
-
         <Navbar />
-
         <main className="flex-grow bg-gray-50 dark:bg-gray-800 flex justify-center items-center">
-          <Router />
+          <Suspense fallback={<div className="p-6">Loading…</div>}>
+            <Outlet />
+          </Suspense>
         </main>
-
         <Footer />
-
         <Toaster
           position="top-center"
           reverseOrder={false}
@@ -27,13 +35,7 @@ function App() {
           toastOptions={{
             className: "bg-white dark:bg-gray-800 text-black dark:text-white",
             duration: 5000,
-            success: {
-              duration: 3000,
-              iconTheme: {
-                primary: "green",
-                secondary: "white",
-              },
-            },
+            success: { duration: 3000, iconTheme: { primary: "green", secondary: "white" } },
           }}
         />
       </div>
@@ -41,4 +43,28 @@ function App() {
   );
 }
 
-export default App;
+const router = createBrowserRouter([
+  {
+    path: "/",
+    element: <RootLayout />,
+    errorElement: <div className="p-6">Something went wrong loading this page.</div>,
+    children: [
+      { index: true, element: <Home /> },
+      { path: "track", element: <Tracker /> },
+      { path: "signup", element: <Signup /> },
+      { path: "login", element: <Login /> },
+      { path: "about", element: <About /> },
+      { path: "contact", element: <Contact /> },
+      { path: "contributors", element: <Contributors /> },
+      { path: "contributor/:username", element: <ContributorProfile /> },
+    ],
+  },
+]);
+
+export default function AppRouter() {
+  return (
+    <RouterProvider
+      router={router}
+    />
+  );
+}
diff --git a/src/Routes/Router.tsx b/src/Routes/Router.tsx
index 40a7861..eeb7e2f 100644
--- a/src/Routes/Router.tsx
+++ b/src/Routes/Router.tsx
@@ -1,4 +1,4 @@
-import { Routes, Route } from "react-router-dom";
+import { createBrowserRouter } from "react-router-dom";
 import Tracker from "../pages/Tracker/Tracker.tsx";
 import About from "../pages/About/About";
 import Contact from "../pages/Contact/Contact";
@@ -8,19 +8,15 @@ import Login from "../pages/Login/Login.tsx";
 import ContributorProfile from "../pages/ContributorProfile/ContributorProfile.tsx";
 import Home from "../pages/Home/Home.tsx";
 
-const Router = () => {
-  return (
-    <Routes>
-      <Route path="/" element={<Home />} />
-      <Route path="/track" element={<Tracker />} />
-      <Route path="/signup" element={<Signup />} />
-      <Route path="/login" element={<Login />} />
-      <Route path="/about" element={<About />} />
-      <Route path="/contact" element={<Contact />} />
-      <Route path="/contributors" element={<Contributors />} />
-      <Route path="/contributor/:username" element={<ContributorProfile />} />
-    </Routes>
-  );
-};
+const router = createBrowserRouter([
+  { path: "/", element: <Home /> },
+  { path: "/track", element: <Tracker /> },
+  { path: "/signup", element: <Signup /> },
+  { path: "/login", element: <Login /> },
+  { path: "/about", element: <About /> },
+  { path: "/contact", element: <Contact /> },
+  { path: "/contributors", element: <Contributors /> },
+  { path: "/contributor/:username", element: <ContributorProfile /> },
+]);
 
-export default Router;
+export default router;
diff --git a/src/hooks/useGitHubData.ts b/src/hooks/useGitHubData.ts
index a0ebe10..ee4cd5d 100644
--- a/src/hooks/useGitHubData.ts
+++ b/src/hooks/useGitHubData.ts
@@ -1,6 +1,7 @@
-import { useState, useCallback } from 'react';
+import { useState, useRef, useCallback } from 'react';
 
 export const useGitHubData = (getOctokit: () => any) => {
+  type SearchType = 'issue' | 'pr';
   const [issues, setIssues] = useState([]);
   const [prs, setPrs] = useState([]);
   const [loading, setLoading] = useState(false);
@@ -9,20 +10,77 @@ export const useGitHubData = (getOctokit: () => any) => {
   const [totalPrs, setTotalPrs] = useState(0);
   const [rateLimited, setRateLimited] = useState(false);
 
-  const fetchPaginated = async (octokit: any, username: string, type: string, page = 1, per_page = 10) => {
-    const q = `author:${username} is:${type}`;
-    const response = await octokit.request('GET /search/issues', {
-      q,
-      sort: 'created',
-      order: 'desc',
-      per_page,
-      page,
+  const cursorsRef = useRef<Record<SearchType, Record<string, Record<number, string | null>>>>({
+    issue: {},
+    pr: {},
+  });
+
+  const fetchPaginated = async (octokit: any, username: string, type: SearchType, page = 1, per_page = 10) => {
+    const query = `
+      query ($queryString: String!, $first: Int!, $after: String) {
+        search(query: $queryString, type: ISSUE, first: $first, after: $after) {
+          issueCount
+          pageInfo {
+            hasNextPage
+            endCursor
+          }
+          edges {
+            cursor
+            node {
+              ... on Issue {
+                databaseId
+                title
+                url
+                createdAt
+                state
+                repository { url }
+              }
+              ... on PullRequest {
+                databaseId
+                title
+                url
+                createdAt
+                state
+                mergedAt
+                repository { url }
+              }
+            }
+          }
+        }
+      }
+    `;
+
+    const queryString = `author:${username} is:${type} sort:updated-desc`;
+    const cursorKey = `${username}:${Math.min(100, per_page)}`;
+    const response = await octokit.graphql(query, {
+      queryString,
+      first: Math.min(100, per_page),
+      after: page > 1 ? (cursorsRef.current[type]?.[cursorKey]?.[page - 1] ?? null) : null,
     });
 
-    return {
-      items: response.data.items,
-      total: response.data.total_count,
-    };
+    const items = response.search.edges.map((edge: any) => {
+      const n = edge.node;
+      const base = {
+        id: n.databaseId,
+        title: n.title,
+        html_url: n.url,
+        created_at: n.createdAt,
+        state: n.state,
+        repository_url: n.repository.url,
+      };
+      // Always tag PRs with a pull_request marker; merged_at may be null for open PRs
+      if (type === 'pr') {
+        return { ...base, pull_request: { merged_at: n.mergedAt ?? null } };
+      }
+      return base;
+    });
+
+    // cache cursor for pagination (keyed by username + page size)
+    if (!cursorsRef.current[type]) cursorsRef.current[type] = {};
+    if (!cursorsRef.current[type][cursorKey]) cursorsRef.current[type][cursorKey] = {};
+    cursorsRef.current[type][cursorKey][page] = response.search.pageInfo.endCursor ?? null;
+
+    return { items, total: response.search.issueCount };
   };
 
   const fetchData = useCallback(
diff --git a/src/lib/githubFetch.ts b/src/lib/githubFetch.ts
new file mode 100644
index 0000000..ff0a75f
--- /dev/null
+++ b/src/lib/githubFetch.ts
@@ -0,0 +1,33 @@
+// src/lib/githubFetch.ts
+export const GITHUB_API_VERSION = "2022-11-28";
+
+export async function ghFetch(
+  path: string,
+  token: string,
+  init: RequestInit = {}
+) {
+  const base = "https://api.github.com";
+  const headers = new Headers(init.headers || {});
+  if (token) {
+    headers.set("Authorization", `Bearer ${token}`); // or `token ${token}`
+  }
+  headers.set("Accept", "application/vnd.github+json");
+  headers.set("X-GitHub-Api-Version", GITHUB_API_VERSION);
+
+  return fetch(`${base}${path}`, { ...init, headers });
+}
+
+export async function ghJson<T>(
+  path: string,
+  token: string,
+  init: RequestInit = {}
+): Promise<T> {
+  const res = await ghFetch(path, token, init);
+  if (!res.ok) {
+    const text = await res.text().catch(() => "");
+    throw new Error(
+      `GitHub API ${res.status} ${res.statusText}${text ? `: ${text}` : ""}`
+    );
+  }
+  return res.json() as Promise<T>;
+}
\ No newline at end of file
diff --git a/src/lib/octokit.ts b/src/lib/octokit.ts
new file mode 100644
index 0000000..4b09884
--- /dev/null
+++ b/src/lib/octokit.ts
@@ -0,0 +1,41 @@
+import { Octokit } from "@octokit/core";
+import { paginateRest } from "@octokit/plugin-paginate-rest";
+import { throttling } from "@octokit/plugin-throttling";
+import { GITHUB_API_VERSION, GITHUB_API_BASE } from "../utils/constants";
+
+const MyOctokit = Octokit.plugin(paginateRest, throttling);
+
+// Make token optional; when empty/undefined we avoid sending an empty Authorization header
+export const makeOctokit = (token?: string) =>
+  new MyOctokit({
+    auth: token || undefined,
+    baseUrl: GITHUB_API_BASE,
+    userAgent: "github-tracker/1.0",
+    request: {
+      // IMPORTANT: stops “deprecated / unversioned” warnings and aligns with fetch helpers
+      headers: {
+        Accept: "application/vnd.github+json",
+        "X-GitHub-Api-Version": GITHUB_API_VERSION,
+      },
+    },
+    throttle: {
+      // Retry once on primary rate limit, then surface to caller
+      onRateLimit: (retryAfter, options, octokit, retryCount?: number) => {
+        const count = retryCount ?? 0;
+        if (count === 0) {
+          console.warn(
+            `Rate Limit: ${options.method} ${options.url}. Retrying in ${retryAfter}s.`
+          );
+          return true; // single retry
+        }
+        return false;
+      },
+      // Retry once on secondary rate limit as well
+      onSecondaryRateLimit: (_retryAfter, options) => {
+        console.warn(
+          `Secondary rate limit: ${options.method} ${options.url}.`
+        );
+        return true; // single retry
+      },
+    },
+  });
\ No newline at end of file
diff --git a/src/main.tsx b/src/main.tsx
index 4c5b79d..b9ef808 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -2,15 +2,12 @@ import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
 import App from "./App.tsx";
 import "./index.css";
-import { BrowserRouter } from "react-router-dom";
 import ThemeWrapper from "./context/ThemeContext.tsx";
 
 createRoot(document.getElementById("root")!).render(
   <StrictMode>
     <ThemeWrapper>
-    <BrowserRouter>
       <App />
-    </BrowserRouter>
     </ThemeWrapper>
   </StrictMode>
 );
\ No newline at end of file
diff --git a/src/pages/ContributorProfile/ContributorProfile.tsx b/src/pages/ContributorProfile/ContributorProfile.tsx
index b4ab931..764dd63 100644
--- a/src/pages/ContributorProfile/ContributorProfile.tsx
+++ b/src/pages/ContributorProfile/ContributorProfile.tsx
@@ -1,16 +1,25 @@
+import { ghFetch as gh } from "../../lib/githubFetch";
 import { useParams } from "react-router-dom";
 import { useEffect, useState } from "react";
 import toast from "react-hot-toast";
 
+type Profile = {
+  login: string;
+  avatar_url: string;
+  bio?: string | null;
+  html_url: string;
+};
+
 type PR = {
+  id: number; // from databaseId
   title: string;
   html_url: string;
   repository_url: string;
 };
 
 export default function ContributorProfile() {
-  const { username } = useParams();
-  const [profile, setProfile] = useState<any>(null);
+  const { username } = useParams<{ username: string }>();
+  const [profile, setProfile] = useState<Profile | null>(null);
   const [prs, setPRs] = useState<PR[]>([]);
   const [loading, setLoading] = useState(true);
 
@@ -18,18 +27,90 @@ export default function ContributorProfile() {
     async function fetchData() {
       if (!username) return;
 
+      const token =
+        localStorage.getItem("gh_pat") ||
+        localStorage.getItem("github_pat") ||
+        localStorage.getItem("token") ||
+        "";
+
       try {
-        const userRes = await fetch(`https://api.github.com/users/${username}`);
-        const userData = await userRes.json();
+        // fetch user profile
+        const userRes = await gh(`/users/${encodeURIComponent(username)}`, token);
+        if (!userRes.ok) {
+          if (userRes.status === 404) {
+            // user not found — clear state and bail early
+            setProfile(null);
+            setPRs([]);
+            return;
+          }
+          const msg = await userRes.text().catch(() => "");
+          throw new Error(
+            `User fetch failed: ${userRes.status} ${userRes.statusText}${
+              msg ? ` – ${msg}` : ""
+            }`
+          );
+        }
+        const userData = (await userRes.json()) as Profile;
         setProfile(userData);
 
-        const prsRes = await fetch(
-          `https://api.github.com/search/issues?q=author:${username}+type:pr`
-        );
-        const prsData = await prsRes.json();
-        setPRs(prsData.items);
-      } catch (error) {
-        toast.error("Failed to fetch user data.");
+        // fetch PRs authored by the user (latest first) using GraphQL
+        const gqlQuery = {
+          query: `
+            query($query: String!) {
+              search(query: $query, type: ISSUE, first: 100) {
+                nodes {
+                  ... on PullRequest {
+                    databaseId
+                    title
+                    url
+                    state
+                    mergedAt
+                    repository {
+                      nameWithOwner
+                      url
+                    }
+                  }
+                }
+              }
+            }
+          `,
+          variables: {
+            query: `author:${username} is:pr sort:updated-desc`,
+          },
+        };
+
+        const prsRes = await gh("/graphql", token, {
+          method: "POST",
+          body: JSON.stringify(gqlQuery),
+        });
+
+        if (!prsRes.ok) {
+          const msg = await prsRes.text().catch(() => "");
+          throw new Error(
+            `PR search failed: ${prsRes.status} ${prsRes.statusText}${
+              msg ? ` – ${msg}` : ""
+            }`
+          );
+        }
+
+        const prsPayload = await prsRes.json();
+        // GraphQL responses may include an `errors` array even when the HTTP status is 200
+        if (Array.isArray(prsPayload.errors) && prsPayload.errors.length) {
+          throw new Error(prsPayload.errors.map((e: any) => e?.message ?? "").join("; "));
+        }
+
+        const nodes: any[] = prsPayload?.data?.search?.nodes ?? [];
+        const mapped: PR[] = nodes.map((n: any) => ({
+          id: n?.databaseId as number,
+          title: n?.title as string,
+          html_url: n?.url as string,
+          // GitHub repo URL lets us derive owner/repo downstream
+          repository_url: n?.repository?.url as string,
+        }));
+
+        setPRs(mapped);
+      } catch (error: any) {
+        toast.error(`Failed to fetch user data. ${error?.message ?? ""}`);
       } finally {
         setLoading(false);
       }
@@ -38,9 +119,13 @@ export default function ContributorProfile() {
     fetchData();
   }, [username]);
 
-  const handleCopyLink = () => {
-    navigator.clipboard.writeText(window.location.href);
-    toast.success("🔗 Shareable link copied to clipboard!");
+  const handleCopyLink = async () => {
+    try {
+      await navigator.clipboard.writeText(window.location.href);
+      toast.success("🔗 Shareable link copied to clipboard!");
+    } catch {
+      toast.error("Could not copy link");
+    }
   };
 
   if (loading) return <div className="text-center mt-10">Loading...</div>;
@@ -55,11 +140,20 @@ export default function ContributorProfile() {
       <div className="text-center">
         <img
           src={profile.avatar_url}
-          alt="Avatar"
+          alt={`${profile.login} avatar`}
           className="w-24 h-24 mx-auto rounded-full"
         />
-        <h2 className="text-2xl font-bold mt-2">{profile.login}</h2>
-        <p className="">{profile.bio}</p>
+        <h2 className="text-2xl font-bold mt-2">
+          <a
+            href={profile.html_url}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="hover:underline"
+          >
+            {profile.login}
+          </a>
+        </h2>
+        {profile.bio && <p className="mt-1 opacity-90">{profile.bio}</p>}
         <button
           onClick={handleCopyLink}
           className="mt-4 px-4 py-2 bg-blue-600 rounded hover:bg-blue-800 transition text-white"
@@ -71,10 +165,10 @@ export default function ContributorProfile() {
       <h3 className="text-xl font-semibold mt-6 mb-2">Pull Requests</h3>
       {prs.length > 0 ? (
         <ul className="list-disc ml-6 space-y-2">
-          {prs.map((pr, i) => {
+          {prs.map((pr) => {
             const repoName = pr.repository_url.split("/").slice(-2).join("/");
             return (
-              <li key={i}>
+              <li key={pr.id}>
                 <a
                   href={pr.html_url}
                   target="_blank"
diff --git a/src/pages/Contributors/Contributors.tsx b/src/pages/Contributors/Contributors.tsx
index 60270b1..5487da1 100644
--- a/src/pages/Contributors/Contributors.tsx
+++ b/src/pages/Contributors/Contributors.tsx
@@ -1,144 +1,135 @@
+import { ghFetch as gh } from "../../lib/githubFetch";
 import { useEffect, useState } from "react";
-import {
-  Container,
-  Grid,
-  Card,
-  CardContent,
-  Avatar,
-  Typography,
-  Button,
-  Box,
-  CircularProgress,
-  Alert,
-} from "@mui/material";
-import { FaGithub } from "react-icons/fa";
-import { Link } from "react-router-dom";
-import axios from "axios";
-import { GITHUB_REPO_CONTRIBUTORS_URL } from "../../utils/constants";
-
-interface Contributor {
+
+type Contributor = {
   id: number;
   login: string;
   avatar_url: string;
-  contributions: number;
   html_url: string;
-}
+  contributions: number;
+};
 
-const ContributorsPage = () => {
+export default function Contributors() {
   const [contributors, setContributors] = useState<Contributor[]>([]);
+  const [error, setError] = useState<string>("");
   const [loading, setLoading] = useState<boolean>(true);
-  const [error, setError] = useState<string | null>(null);
 
-  // Fetch contributors from GitHub API
   useEffect(() => {
-    const fetchContributors = async () => {
+    const ac = new AbortController();
+    let isMounted = true;
+
+    const getToken = () =>
+      localStorage.getItem("gh_pat") ||
+      localStorage.getItem("github_pat") ||
+      localStorage.getItem("token") ||
+      "";
+
+    async function resolveRepoFullName(token: string): Promise<string | null> {
+      // Try to find the repo by searching both org and user scopes and dash/underscore variants
+      const owners = ["GitMetricsLab", "gitmetricsslab", "ASR1015"]; // include common forks/owners
+      const names = ["github-tracker", "github_tracker"]; // dash vs underscore
+
+      for (const owner of owners) {
+        for (const name of names) {
+          // org search
+          try {
+            const q = ['org:' + owner, name, 'in:name'].join(' ');
+            const res = await gh(`/search/repositories?q=${encodeURIComponent(q)}&per_page=5`, token);
+            const json = await res.json();
+            const match = (json.items || []).find(
+              (it: any) => it.name.toLowerCase() === name.toLowerCase()
+            );
+            if (match?.full_name) return match.full_name as string;
+          } catch {}
+
+          // user search
+          try {
+            const q2 = ['user:' + owner, name, 'in:name'].join(' ');
+            const res2 = await gh(`/search/repositories?q=${encodeURIComponent(q2)}&per_page=5`, token);
+            const json2 = await res2.json();
+            const match2 = (json2.items || []).find(
+              (it: any) => it.name.toLowerCase() === name.toLowerCase()
+            );
+            if (match2?.full_name) return match2.full_name as string;
+          } catch {}
+        }
+      }
+      return null;
+    }
+
+    async function loadContributors() {
+      setLoading(true);
+      setError("");
+      setContributors([]);
+      const token = getToken();
+
       try {
-        const response = await axios.get(GITHUB_REPO_CONTRIBUTORS_URL, {
-          withCredentials: false,
-        });
-        setContributors(response.data);
-      } catch (err) {
-        setError("Failed to fetch contributors. Please try again later.");
+        const fallback = "ASR1015/github_tracker";
+        const fullName = (await resolveRepoFullName(token)) ?? fallback;
+        console.log(`[contributors] fetching for ${fullName}`);
+
+        const res = await gh(
+          `/repos/${fullName}/contributors?per_page=50`,
+          token
+        );
+
+        // Some repos return 204 No Content when there are no contributors.
+        // res.ok is true for 204, but res.json() would throw; handle it explicitly.
+        if (res.status === 204) {
+          if (!isMounted) return;
+          setContributors([]);
+          return;
+        }
+
+        if (!res.ok) {
+          const txt = await res.text();
+          throw new Error(`GitHub ${res.status}: ${txt}`);
+        }
+
+        const data = await res.json();
+        if (!isMounted) return;
+        setContributors(Array.isArray(data) ? (data as Contributor[]) : []);
+      } catch (err: any) {
+        if (isMounted)
+          setError(
+            err?.message ||
+              "Failed to fetch contributors. Check owner/repo and token (use 'repo' scope if private)."
+          );
+        console.error("[contributors] error", err);
       } finally {
-        setLoading(false);
+        if (isMounted) setLoading(false);
       }
-    };
+    }
 
-    fetchContributors();
-  }, []);
+    loadContributors();
 
-  if (loading) {
-    return (
-      <Box sx={{ display: "flex", justifyContent: "center", mt: 4 }}>
-        <CircularProgress />
-      </Box>
-    );
-  }
-
-  if (error) {
-    return (
-      <Box sx={{ mt: 4 }}>
-        <Alert severity="error">{error}</Alert>
-      </Box>
-    );
-  }
+    return () => {
+      isMounted = false;
+      ac.abort();
+    };
+  }, []);
 
   return (
-    <div className="bg-white dark:bg-gray-900 text-black dark:text-white min-h-screen p-4 mt-4">
-      <Container>
-        <Typography sx={{ pb: 2 }} variant="h4" align="center" gutterBottom>
-          🤝 Contributors
-        </Typography>
-
-        <Grid container spacing={4}>
-          {contributors.map((contributor) => (
-            <Grid item xs={12} sm={6} md={3} key={contributor.id}>
-                <Card
-                  sx={{
-                    textAlign: "center",
-                    p: 2,
-                    borderRadius: "10px",
-                    border: "1px solid #E0E0E0",
-                    boxShadow: "0 4px 10px rgba(0,0,0,0.1)",
-                    transition: "transform 0.3s ease-in-out",
-                    "&:hover": {
-                      transform: "scale(1.05)",
-                      boxShadow: "0 8px 15px rgba(0,0,0,0.2)",
-                      borderColor: "#C0C0C0",
-                      outlineColor: "#B3B3B3",
-                    },
-                  }}
-                >
-                    <Link
-                        to={`/contributor/${contributor.login}`}
-                        style={{ textDecoration: "none" }}
-                    >
-                    <Avatar
-                        src={contributor.avatar_url}
-                        alt={contributor.login}
-                        sx={{ width: 100, height: 100, mx: "auto", mb: 2 }}
-                    />
-                    <CardContent>
-                        <Typography variant="h6" sx={{ fontWeight: "bold" }}>
-                        {contributor.login}
-                        </Typography>
-
-                        <Typography variant="body2" color="text.secondary">
-                        {contributor.contributions} Contributions
-                        </Typography>
-                        {/*
-                        <Typography variant="body2" sx={{ mt: 2 }}>
-                        Thank you for your valuable contributions to our
-                        community!
-                        </Typography> */}
-                    </CardContent>
-                    </Link>
-
-                    <Box sx={{ mt: 2 }}>
-                        <Button
-                            variant="contained"
-                            startIcon={<FaGithub />}
-                            href={contributor.html_url}
-                            target="_blank"
-                            sx={{
-                                backgroundColor: "#333333",
-                                textTransform: "none",
-                                color: "#FFFFFF",
-                                "&:hover": {
-                                backgroundColor: "#555555",
-                                },
-                            }}
-                            >
-                            GitHub
-                        </Button>
-                    </Box>
-                </Card>
-            </Grid>
-          ))}
-        </Grid>
-      </Container>
+    <div className="p-6 w-full max-w-3xl mx-auto">
+      <h1 className="text-2xl font-semibold mb-4">Contributors</h1>
+      {loading && <div className="opacity-70 mb-2">Loading…</div>}
+      {error && (
+        <div className="mb-4 rounded-md border border-red-300 bg-red-50 p-3 text-red-700">{error}</div>
+      )}
+      <ul className="space-y-2">
+        {contributors.map((c) => (
+          <li key={c.id} className="flex items-center gap-3">
+            <img src={c.avatar_url} alt={c.login} width={32} height={32} className="rounded-full" />
+            <a href={c.html_url} target="_blank" rel="noreferrer" className="text-blue-700 hover:underline">
+              {c.login}
+            </a>
+            <span className="opacity-70">({c.contributions} contributions)</span>
+          </li>
+        ))}
+        {!loading && contributors.length === 0 && !error && (
+          <li className="opacity-70">No contributors found.</li>
+        )}
+      </ul>
     </div>
   );
-};
-
-export default ContributorsPage;
+}
diff --git a/src/utils/constants.ts b/src/utils/constants.ts
index 09717e0..9d04259 100644
--- a/src/utils/constants.ts
+++ b/src/utils/constants.ts
@@ -1,4 +1,7 @@
-export const GITHUB_REPO_API_BASE = "https://api.github.com/repos/GitMetricsLab/github_tracker";
+export const GITHUB_API_VERSION = "2022-11-28";
+
+export const GITHUB_API_BASE = "https://api.github.com";
+export const GITHUB_REPO_API_BASE = `${GITHUB_API_BASE}/repos/GitMetricsLab/github_tracker`;
 
 // endpoints:
 export const GITHUB_REPO_CONTRIBUTORS_URL = `${GITHUB_REPO_API_BASE}/contributors`;