diff --git a/src/pages/Contributors/Contributors.tsx b/src/pages/Contributors/Contributors.tsx
index 29fcbaf..d236076 100644
--- a/src/pages/Contributors/Contributors.tsx
+++ b/src/pages/Contributors/Contributors.tsx
@@ -1,19 +1,12 @@
 import { useEffect, useState } from "react";
-import {
-  Container,
-  Grid,
-  Card,
-  CardContent,
-  Avatar,
-  Typography,
-  Button,
-  Box,
-  CircularProgress,
-  Alert,
-} from "@mui/material";
-import { FaGithub, FaCopy, FaCheck } from "react-icons/fa";
-import { Link } from "react-router-dom";
 import axios from "axios";
+import {
+  Sparkles,
+  Github,
+  Users,
+  GitPullRequest,
+  ArrowRight,
+} from "lucide-react";
 import { GITHUB_REPO_CONTRIBUTORS_URL } from "../../utils/constants";
 import BackToTopButton from "../../components/Backtotop";
 
@@ -25,40 +18,23 @@ interface Contributor {
   html_url: string;
 }
 
-interface FetchError {
-  message: string;
-  isRateLimited: boolean;
-  statusCode?: number;
-}
-
-// Custom error class for Contributors fetch errors
-class ContributorsError extends Error {
-  constructor(
-    message: string,
-    public isRateLimited = false,
-    public statusCode?: number
-  ) {
-    super(message);
-    this.name = "ContributorsError";
-  }
-}
-
-// Type guard to validate if data is Contributor[]
-const isContributorArray = (data: unknown): data is Contributor[] => {
-  if (!Array.isArray(data)) return false;
-  return data.every((item) => {
-    if (typeof item !== "object" || item === null) return false;
-
-    // Validate all required fields with correct types
-    return (
-      typeof item.id === "number" &&
-      typeof item.login === "string" &&
-      typeof item.avatar_url === "string" &&
-      typeof item.contributions === "number" &&
-      typeof item.html_url === "string"
-    );
-  });
-};
+const stats = [
+  {
+    title: "Contributors",
+    value: "30+",
+    icon: Users,
+  },
+  {
+    title: "Pull Requests",
+    value: "250+",
+    icon: GitPullRequest,
+  },
+  {
+    title: "Open Source",
+    value: "Community Driven",
+    icon: Github,
+  },
+];
 
 const ContributorsPage = () => {
   const [contributors, setContributors] = useState<Contributor[]>([]);
@@ -69,68 +45,16 @@ const handleCopy = async (contributor: Contributor) => {
   await navigator.clipboard.writeText(contributor.html_url);
   setCopiedId(contributor.id);
 
-  setTimeout(() => {
-    setCopiedId(null);
-  }, 2000);
-};
-  // Fetch contributors from GitHub API
   useEffect(() => {
     const fetchContributors = async () => {
       try {
-        setLoading(true);
-        setError(null);
-
-        const response = await axios.get(GITHUB_REPO_CONTRIBUTORS_URL, {
-          withCredentials: false,
-          timeout: 10000,
-        });
-
-        // ✅ Validate response structure matches Contributor[]
-        if (!isContributorArray(response.data)) {
-          throw new ContributorsError(
-            "Invalid API response structure. Expected array of contributors.",
-            false
-          );
-        }
+        const response = await axios.get(
+          GITHUB_REPO_CONTRIBUTORS_URL
+        );
 
         setContributors(response.data);
-      } catch (err) {
-        const fetchError: FetchError = {
-          message: "Failed to fetch contributors. Please try again later.",
-          isRateLimited: false,
-        };
-
-        // Handle ContributorsError instances
-        if (err instanceof ContributorsError) {
-          fetchError.message = err.message;
-          fetchError.isRateLimited = err.isRateLimited;
-          fetchError.statusCode = err.statusCode;
-        } else if (axios.isAxiosError(err)) {
-          // Handle Axios errors
-          if (err.response?.status === 403) {
-            fetchError.message =
-              "GitHub API rate limit exceeded. Try again later.";
-            fetchError.isRateLimited = true;
-            fetchError.statusCode = 403;
-          } else if (err.response?.status === 404) {
-            fetchError.message = "Repository not found.";
-            fetchError.statusCode = 404;
-          } else if (err.code === "ECONNABORTED") {
-            fetchError.message = "Request timeout. Server took too long to respond.";
-            fetchError.statusCode = 408;
-          } else if (err.response?.status) {
-            fetchError.message = `HTTP ${err.response.status}: Failed to fetch contributors`;
-            fetchError.statusCode = err.response.status;
-          } else if (err.message) {
-            fetchError.message = err.message;
-          }
-        } else if (err instanceof Error) {
-          fetchError.message = err.message || fetchError.message;
-        }
-
-        setError(fetchError);
-        console.error("Contributors fetch error:", fetchError);
-        setContributors([]);
+      } catch {
+        setError("Failed to fetch contributors.");
       } finally {
         setLoading(false);
       }
@@ -141,131 +65,241 @@ const handleCopy = async (contributor: Contributor) => {
 
   if (loading) {
     return (
-      <Box sx={{ display: "flex", justifyContent: "center", mt: 4 }}>
-        <CircularProgress />
-      </Box>
+      <div className="min-h-screen flex items-center justify-center bg-white dark:bg-slate-950">
+        <div className="flex flex-col items-center gap-5">
+          <div className="w-14 h-14 border-4 border-cyan-400 border-t-transparent rounded-full animate-spin"></div>
+          <p className="text-slate-600 dark:text-slate-300">
+            Loading Contributors...
+          </p>
+        </div>
+      </div>
     );
   }
 
   if (error) {
     return (
-      <Box sx={{ mt: 4, mx: 2 }}>
-        <Alert severity="error" sx={{ mb: 2 }}>
-          <Typography variant="body2" sx={{ fontWeight: "bold" }}>
-            ⚠️ {error.message}
-          </Typography>
-          {error.isRateLimited && (
-            <Typography variant="caption" sx={{ display: "block", mt: 1 }}>
-              You've hit GitHub's API rate limit. The limit resets in 1 hour.
-            </Typography>
-          )}
-          {error.statusCode === 404 && (
-            <Typography variant="caption" sx={{ display: "block", mt: 1 }}>
-              Please verify the repository exists and is accessible.
-            </Typography>
-          )}
-          {error.statusCode === 408 && (
-            <Typography variant="caption" sx={{ display: "block", mt: 1 }}>
-              The server took too long to respond. Please try again.
-            </Typography>
-          )}
-        </Alert>
-      </Box>
+      <div className="min-h-screen flex items-center justify-center bg-white dark:bg-slate-950">
+        <div className="px-6 py-4 rounded-2xl border border-red-500/30 bg-red-500/10 text-red-500">
+          {error}
+        </div>
+      </div>
     );
   }
 
   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 }}
+    <div className="relative w-screen min-h-screen overflow-x-hidden bg-white dark:bg-slate-950 text-slate-900 dark:text-white transition-colors duration-300">
+
+      {/* BACKGROUND GLOWS */}
+      <div className="absolute top-0 left-0 w-72 h-72 bg-blue-500/10 dark:bg-blue-500/20 blur-3xl rounded-full" />
+      <div className="absolute bottom-0 right-0 w-96 h-96 bg-cyan-400/10 dark:bg-cyan-500/10 blur-3xl rounded-full" />
+
+      {/* GRID OVERLAY */}
+      <div className="absolute inset-0 bg-[linear-gradient(to_right,#e2e8f015_1px,transparent_1px),linear-gradient(to_bottom,#e2e8f015_1px,transparent_1px)] dark:bg-[linear-gradient(to_right,#1f293710_1px,transparent_1px),linear-gradient(to_bottom,#1f293710_1px,transparent_1px)] bg-[size:4rem_4rem] pointer-events-none" />
+
+      <div className="relative z-10 w-screen min-h-screen px-6 py-20">
+
+        {/* HERO SECTION */}
+        <section className="text-center mb-28 max-w-6xl mx-auto">
+
+          <div className="inline-flex items-center gap-2 px-4 py-2 rounded-full border border-blue-500/20 dark:border-blue-500/30 bg-blue-500/10 text-blue-700 dark:text-blue-300 text-sm mb-6 backdrop-blur-xl">
+            <Sparkles className="w-4 h-4" />
+            Open Source Community
+          </div>
+
+          <h1 className="text-5xl md:text-7xl font-extrabold leading-tight mb-8 tracking-tight">
+            Meet Our{" "}
+            <span className="bg-gradient-to-r from-blue-600 via-cyan-500 to-teal-500 dark:from-blue-400 dark:via-cyan-400 dark:to-teal-400 bg-clip-text text-transparent [filter:drop-shadow(0_0_30px_rgba(56,189,248,0.3))]">
+              Amazing Contributors
+            </span>
+          </h1>
+
+          <p className="max-w-3xl mx-auto text-slate-600 dark:text-slate-300 text-lg md:text-xl leading-relaxed">
+            These amazing developers are helping build and improve GitHub Tracker through open-source collaboration and innovation.
+          </p>
+        </section>
+
+        {/* STATS */}
+        <section className="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-3 gap-6 mb-28">
+
+          {stats.map((stat) => {
+            const Icon = stat.icon;
+
+            return (
+              <div
+                key={stat.title}
+                className="
+                p-8
+                rounded-3xl
+                border
+                border-slate-200
+                dark:border-slate-800
+                bg-slate-100/80
+                dark:bg-white/5
+                backdrop-blur-xl
+                text-center
+                hover:border-blue-500/50
+                dark:hover:border-cyan-400/60
+                hover:-translate-y-2
+                hover:shadow-lg
+                hover:shadow-blue-500/10
+                dark:hover:shadow-cyan-500/20
+                transition-all
+                duration-300
+                "
+              >
+                <div className="w-12 h-12 mx-auto rounded-2xl bg-blue-500/10 border border-blue-500/20 flex items-center justify-center mb-5">
+                  <Icon className="w-7 h-7 text-blue-500 dark:text-cyan-300" />
+                </div>
+
+                <h3 className="text-4xl font-bold mb-2">
+                  {stat.title === "Contributors"
+                    ? `${contributors.length}+`
+                    : stat.value}
+                </h3>
+
+                <p className="text-slate-600 dark:text-slate-400">
+                  {stat.title}
+                </p>
+              </div>
+            );
+          })}
+        </section>
+
+        {/* CONTRIBUTORS SECTION */}
+        <section className="max-w-7xl mx-auto mb-28">
+
+          <div className="text-center mb-14">
+            <h2 className="text-4xl md:text-5xl font-bold mb-5">
+              Community Contributors
+            </h2>
+
+            <p className="text-slate-500 dark:text-slate-400 max-w-2xl mx-auto text-lg">
+              The incredible developers helping GitHub Tracker grow through collaboration, innovation, and open-source contributions.
+            </p>
+          </div>
+
+          <div className="grid sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8">
+
+            {contributors.map((contributor) => (
+              <a
+                key={contributor.id}
+                href={contributor.html_url}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="
+                group
+                relative
+                overflow-hidden
+                p-6
+                rounded-3xl
+                border
+                border-slate-200
+                dark:border-slate-800
+                bg-slate-100/80
+                dark:bg-white/5
+                backdrop-blur-xl
+                hover:border-blue-500/50
+                dark:hover:border-cyan-400/60
+                hover:-translate-y-2
+                hover:shadow-lg
+                hover:shadow-blue-500/10
+                dark:hover:shadow-cyan-500/20
+                transition-all
+                duration-300
+                "
+              >
+
+                {/* GLOW */}
+                <div className="absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity duration-300 bg-[radial-gradient(circle_at_top_right,rgba(59,130,246,0.12),transparent_40%)] dark:bg-[radial-gradient(circle_at_top_right,rgba(34,211,238,0.15),transparent_40%)]" />
+
+                <div className="relative z-10 flex flex-col items-center text-center">
+
+                  {/* AVATAR */}
+                  <div className="relative mb-6">
+
+                    <div className="absolute inset-0 rounded-full bg-gradient-to-r from-blue-500 to-cyan-500 blur-xl opacity-0 group-hover:opacity-40 transition-opacity duration-300" />
+
+                    <img
+                      src={contributor.avatar_url}
+                      alt={contributor.login}
+                      className="
+                      relative
+                      w-24
+                      h-24
+                      rounded-full
+                      border-4
+                      border-slate-200
+                      dark:border-slate-700
+                      group-hover:border-blue-500/50
+                      dark:group-hover:border-cyan-400/60
+                      transition-all
+                      duration-300
+                      "
                     />
-                    <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, display: "flex", justifyContent: "center", gap: 1 }}>
-  <Button
-    variant="contained"
-    startIcon={<FaGithub />}
-    href={contributor.html_url}
-    target="_blank"
-    sx={{
-      backgroundColor: "#333333",
-      textTransform: "none",
-      color: "#FFFFFF",
-      "&:hover": {
-        backgroundColor: "#555555",
-      },
-    }}
-  >
-    GitHub
-  </Button>
-
-  <Button
-    variant="outlined"
-    startIcon={copiedId === contributor.id ? <FaCheck /> : <FaCopy />}
-    onClick={() => handleCopy(contributor)}
-    sx={{
-      textTransform: "none",
-      transition: "all 0.3s ease",
-      "&:hover": {
-        transform: "scale(1.05)",
-      },
-    }}
-  >
-    {copiedId === contributor.id ? "Copied!" : "Copy"}
-  </Button>
-</Box>
-                </Card>
-            </Grid>
-          ))}
-        </Grid>
-        <BackToTopButton/>
-      </Container>
+                  </div>
+
+                  <h3 className="text-xl font-bold mb-1">
+                    {contributor.login}
+                  </h3>
+
+                  <p className="text-slate-500 dark:text-slate-400 mb-4 text-sm">
+                    {contributor.contributions} contributions
+                  </p>
+
+                  <div className="inline-flex px-3 py-1.5 rounded-full bg-blue-500/10 border border-blue-500/20 text-sm text-blue-700 dark:text-cyan-300 mb-6">
+                    Contributor
+                  </div>
+
+                  <div className="inline-flex items-center gap-2 px-4 py-2.5 rounded-xl bg-slate-900 dark:bg-white text-white dark:text-slate-950 font-medium hover:scale-105 transition-all duration-300">
+                    <Github className="w-4 h-4" />
+                    View GitHub
+                  </div>
+
+                </div>
+              </a>
+            ))}
+          </div>
+        </section>
+
+        {/* CTA SECTION */}
+        <section className="max-w-6xl mx-auto text-center">
+
+          <div className="relative overflow-hidden p-10 rounded-3xl border border-blue-200 dark:border-blue-500/20 bg-gradient-to-br from-blue-100/70 to-cyan-100/70 dark:from-blue-500/10 dark:to-cyan-500/10 backdrop-blur-xl shadow-sm dark:shadow-none">
+
+            <div className="absolute inset-0 bg-[radial-gradient(circle_at_top_right,rgba(59,130,246,0.12),transparent_40%)] dark:bg-[radial-gradient(circle_at_top_right,rgba(34,211,238,0.15),transparent_40%)]" />
+
+            <div className="relative z-10">
+
+              <div className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-blue-500/10 border border-blue-500/20 text-blue-700 dark:text-blue-300 text-sm mb-6">
+                <Sparkles className="w-4 h-4" />
+                Join the Community
+              </div>
+
+              <h2 className="text-4xl font-bold mb-5">
+                Want to Contribute?
+              </h2>
+
+              <p className="text-slate-700 dark:text-slate-300 text-lg leading-relaxed max-w-3xl mx-auto mb-8">
+                Help improve GitHub Tracker, contribute new features, fix bugs, and become part of our growing open-source community.
+              </p>
+
+              <a
+                href="https://github.com/GitMetricsLab/github_tracker"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="inline-flex items-center gap-2 px-7 py-4 rounded-xl bg-gradient-to-r from-blue-500 to-cyan-500 hover:scale-105 transition-all duration-300 font-semibold text-white shadow-lg shadow-blue-500/20"
+              >
+                Start Contributing
+                <ArrowRight className="w-5 h-5" />
+              </a>
+
+            </div>
+          </div>
+        </section>
+
+      </div>
     </div>
   );
 };
 
-export default ContributorsPage;
+export default ContributorsPage;
\ No newline at end of file