From c4f6ed8947ddc1e4694770fd1130ae42eb2dfaf4 Mon Sep 17 00:00:00 2001
From: Trailblazer09 <akaaj15o@gmail.com>
Date: Wed, 23 Jul 2025 11:43:02 +0530
Subject: [PATCH 01/16] added theme switch

---
 package.json                            |   1 +
 src/App.tsx                             |  13 +-
 src/Routes/Login/Login.tsx              |  25 ++-
 src/Routes/Router.tsx                   |  11 +-
 src/components/Navbar.tsx               |  29 ++-
 src/hooks/useTheme.ts                   |  31 ++++
 src/main.tsx                            |  23 ++-
 src/pages/About/About.tsx               |   8 +-
 src/pages/Contact/Contact.tsx           |  46 +++--
 src/pages/Contributors/Contributors.tsx |  58 +++---
 src/pages/Home/Home.tsx                 | 233 +++++++++++++++++++-----
 src/theme.ts                            |  21 +++
 tailwind.config.js                      |  16 +-
 13 files changed, 389 insertions(+), 126 deletions(-)
 create mode 100644 src/hooks/useTheme.ts
 create mode 100644 src/theme.ts

diff --git a/package.json b/package.json
index ca7db86..a4e5ca9 100644
--- a/package.json
+++ b/package.json
@@ -25,6 +25,7 @@
   },
   "devDependencies": {
     "@eslint/js": "^9.13.0",
+    "@types/aws-lambda": "^8.10.152",
     "@types/node": "^22.10.1",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
diff --git a/src/App.tsx b/src/App.tsx
index a49da65..4495dfb 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -3,21 +3,24 @@ import Navbar from "./components/Navbar";
 import Footer from "./components/Footer";
 import ScrollProgressBar from './components/ScrollProgressBar';
 import { Toaster } from "react-hot-toast";
+import { useTheme } from "./hooks/useTheme";
 
 import Router from "./Routes/Router";
 
 function App() {
+  const { theme, setTheme } = useTheme();
+
   return (
 
-      <div className="relative flex flex-col min-h-screen">
+      <div className="relative flex flex-col min-h-screen bg-white text-black dark:bg-gray-900 dark:text-white">
         <ScrollProgressBar/>
 
         {/* Navbar */}
         <Navbar />
 
         {/* Main content */}
-        <main className="flex-grow bg-gray-50 flex justify-center items-center">
-          <Router/>
+        <main className="flex-grow bg-gray-50 dark:bg-gray-800 flex justify-center items-center">
+          <Router theme={theme} />
         </main>
 
         {/* Footer */}
@@ -49,3 +52,7 @@ function App() {
 }
 
 export default App;
+
+
+
+
diff --git a/src/Routes/Login/Login.tsx b/src/Routes/Login/Login.tsx
index 1c1f495..1071400 100644
--- a/src/Routes/Login/Login.tsx
+++ b/src/Routes/Login/Login.tsx
@@ -9,7 +9,10 @@ interface LoginFormData {
 }
 
 const Login: React.FC = () => {
-  const [formData, setFormData] = useState<LoginFormData>({ email: "", password: "" });
+  const [formData, setFormData] = useState<LoginFormData>({
+    email: "",
+    password: "",
+  });
   const [message, setMessage] = useState<string>("");
 
   const navigate = useNavigate(); // Initialize the navigate hook
@@ -22,14 +25,14 @@ const Login: React.FC = () => {
   const handleSubmit = async (e: FormEvent) => {
     e.preventDefault();
     try {
-      const response = await axios.post(`${backendUrl}/api/auth/login`,
-        formData,
-        
+      const response = await axios.post(
+        `${backendUrl}/api/auth/login`,
+        formData
       );
       setMessage(response.data.message); // Show success message from backend
 
       // Navigate to /home if login is successful
-      if (response.data.message === 'Login successful') {
+      if (response.data.message === "Login successful") {
         navigate("/home");
       }
     } catch (error: any) {
@@ -38,9 +41,13 @@ const Login: React.FC = () => {
   };
 
   return (
-    <div className="max-w-md mt-12 mx-auto bg-white p-8 rounded-lg shadow-md">
+    <div className="features bg-gray-100 dark:bg-gray-800 text-black dark:text-white py-12">
+      <div className="max-w-md mx-auto p-6 rounded-lg bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 shadow-md">
       <h2 className="text-2xl font-semibold text-center mb-6">Login</h2>
+      
+
       <form onSubmit={handleSubmit} className="space-y-4">
+        
         <div>
           <input
             type="email"
@@ -49,7 +56,7 @@ const Login: React.FC = () => {
             value={formData.email}
             onChange={handleChange}
             required
-            className="w-full p-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+            className="w-full p-3 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-black dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500"
           />
         </div>
         <div>
@@ -60,7 +67,7 @@ const Login: React.FC = () => {
             value={formData.password}
             onChange={handleChange}
             required
-            className="w-full p-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+            className="w-full p-3 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-black dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500"
           />
         </div>
         <button
@@ -72,8 +79,8 @@ const Login: React.FC = () => {
       </form>
       {message && <p className="text-center text-red-500 mt-4">{message}</p>}
     </div>
+    </div>
   );
 };
 
 export default Login;
-
diff --git a/src/Routes/Router.tsx b/src/Routes/Router.tsx
index 867672a..7847f95 100644
--- a/src/Routes/Router.tsx
+++ b/src/Routes/Router.tsx
@@ -7,17 +7,24 @@ import Contributors from "../pages/Contributors/Contributors";
 import Signup from "./Signup/Signup.tsx";
 import Login from "./Login/Login.tsx";
 
+interface RouterProps {
+  theme: string;
+}
+
+const Router: React.FC<RouterProps> = ({ theme }) => {
+
 
-const Router = () => {
   return (
     <Routes>
       {/* Redirect from root (/) to the home page */}
       <Route path="/signup" element={<Signup />} />
       <Route path="/login" element={<Login />} />
       <Route path="/" element={<Navigate to="/home" replace />} />
+      <Route path="/home" element={<Home key={theme} theme={theme} />} />
       <Route path="/about" element={<About />} />
       <Route path="/contact" element={<Contact />} />
-      <Route path="/home" element={<Home />} />
+      
+      
       <Route path="/contributors" element={<Contributors />} />
     </Routes>
   );
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
index f7ea2f2..50c1091 100644
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@@ -1,14 +1,16 @@
-import { Link } from 'react-router-dom';
-import { useState } from 'react';
+import { Link } from "react-router-dom";
+import { useState, useEffect } from "react";
+import { useTheme } from "../hooks/useTheme";
 
 const Navbar: React.FC = () => {
   const [isOpen, setIsOpen] = useState<boolean>(false);
-
+  const { theme, setTheme } = useTheme();
+  
   return (
-    <nav className="bg-gray-800 text-white shadow-lg">
+   <nav className="bg-white text-black dark:bg-gray-800 dark:text-white shadow-lg">
       <div className="container mx-auto px-6 py-4 flex justify-between items-center">
         {/* Logo Section */}
-        <div className="text-2xl font-bold hover:text-gray-300 cursor-pointer flex items-center">
+      <div className="text-2xl font-bold hover:text-gray-300 cursor-pointer flex items-center">  
           <img src="/crl-icon.png" alt="CRL Icon" className="h-8 mr-2" />
           GitHub Tracker
         </div>
@@ -42,7 +44,16 @@ const Navbar: React.FC = () => {
           <Link
             to="/login"
             className="text-lg font-medium hover:text-gray-300 transition-all px-2 py-1 border border-transparent hover:border-gray-400 rounded"
-          >Login</Link>
+          >
+            Login
+          </Link>
+          <button
+            onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
+            className="text-lg font-medium px-2 py-1 rounded border border-transparent hover:border-gray-400 transition-all"
+            title={`Switch to ${theme === "dark" ? "light" : "dark"} mode`}
+          >
+            {theme === "dark" ? "🌞 Light" : "🌙 Dark"}
+          </button>
         </div>
 
         {/* Mobile Menu Button */}
@@ -52,17 +63,17 @@ const Navbar: React.FC = () => {
             className="relative w-8 h-8 flex flex-col space-y-[5px] items-center group focus:outline-none"
           >
             <span
-              className={`block h-[3px] w-full bg-white rounded-lg transition-transform duration-300 ${
+              className={`block h-[3px] w-full bg-black dark:bg-white rounded-lg transition-transform duration-300 ${
                 isOpen ? "rotate-45 translate-y-2" : ""
               }`}
             ></span>
             <span
-              className={`block h-[3px] w-full bg-white rounded-lg transition-opacity duration-300 ${
+              className={`block h-[3px] w-full bg-black dark:bg-white rounded-lg transition-opacity duration-300 ${
                 isOpen ? "opacity-0" : ""
               }`}
             ></span>
             <span
-              className={`block h-[3px] w-full bg-white rounded-lg transition-transform duration-300 ${
+              className={`block h-[3px] w-full bg-black dark:bg-white rounded-lg transition-transform duration-300 ${
                 isOpen ? "-rotate-45 -translate-y-2" : ""
               }`}
             ></span>
diff --git a/src/hooks/useTheme.ts b/src/hooks/useTheme.ts
new file mode 100644
index 0000000..550859d
--- /dev/null
+++ b/src/hooks/useTheme.ts
@@ -0,0 +1,31 @@
+import { useEffect, useState } from "react";
+
+type ThemeMode = "light" | "dark";
+
+const getInitialTheme = (): ThemeMode => {
+  const stored = localStorage.getItem("theme");
+  if (stored === "light" || stored === "dark") {
+    return stored;
+  }
+  return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+};
+
+export const useTheme = () => {
+  const [theme, setTheme] = useState<ThemeMode>(getInitialTheme);
+
+  useEffect(() => {
+    const root = document.documentElement;
+
+    if (theme === "dark") {
+      root.classList.add("dark");
+      root.classList.remove("light");
+    } else {
+      root.classList.add("light");
+      root.classList.remove("dark");
+    }
+
+    localStorage.setItem("theme", theme);
+  }, [theme]);
+
+  return { theme, setTheme };
+};
\ No newline at end of file
diff --git a/src/main.tsx b/src/main.tsx
index a9f043f..26ac950 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -1,13 +1,26 @@
+// main.tsx
 import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
-import App from "./App.tsx";
+import App from "./App";
 import "./index.css";
 import { BrowserRouter } from "react-router-dom";
+import { ThemeProvider } from "@mui/material/styles";
+import { getMuiTheme } from "./theme";
+import { useTheme } from "./hooks/useTheme";
+
+const RootApp = () => {
+  const { theme } = useTheme();
+  return (
+    <ThemeProvider theme={getMuiTheme(theme)}>
+      <BrowserRouter>
+        <App />
+      </BrowserRouter>
+    </ThemeProvider>
+  );
+};
 
 createRoot(document.getElementById("root")!).render(
   <StrictMode>
-    <BrowserRouter>
-      <App />
-    </BrowserRouter>
+    <RootApp />
   </StrictMode>
-);
+);
\ No newline at end of file
diff --git a/src/pages/About/About.tsx b/src/pages/About/About.tsx
index 81ed120..a8cbe01 100644
--- a/src/pages/About/About.tsx
+++ b/src/pages/About/About.tsx
@@ -2,21 +2,21 @@ const About = () => {
   return (
     <div className="about-container">
       {/* Hero Section */}
-      <section className="hero bg-gray-800 text-white py-12">
+      <section className="hero bg-gray-100 dark:bg-gray-800 text-black dark:text-white py-12">
         <h1 className="text-4xl font-bold text-center">About Us</h1>
         <p className="text-lg text-center mt-4">Welcome to GitHub Tracker! We simplify issue tracking for developers.</p>
       </section>
 
       {/* Mission Section */}
-      <section className="mission py-12">
+      <section className="mission py-12"> 
         <h2 className="text-3xl font-semibold text-center">Our Mission</h2>
         <p className="text-lg text-center mt-4 max-w-3xl mx-auto">
           We aim to provide an efficient and user-friendly way to track GitHub issues and pull requests. Our goal is to make it easy for developers to stay organized and focused on their projects without getting bogged down by the details.
         </p>
       </section>
 
-      {/* Features Section */}
-      <section className="features bg-gray-100 py-12">
+      {/* Features Section */} 
+      <section className="features bg-gray-100 dark:bg-gray-800 text-black dark:text-white py-12">
         <h2 className="text-3xl font-semibold text-center">What We Do</h2>
         <div className="flex justify-around mt-8">
           <div className="feature-item text-center">
diff --git a/src/pages/Contact/Contact.tsx b/src/pages/Contact/Contact.tsx
index ef9f967..1f7ec1f 100644
--- a/src/pages/Contact/Contact.tsx
+++ b/src/pages/Contact/Contact.tsx
@@ -1,4 +1,4 @@
-import { FormEvent, useState } from 'react';
+import { FormEvent, useState } from "react";
 
 function Contact() {
   const [showPopup, setShowPopup] = useState<boolean>(false); // State to control popup visibility
@@ -15,45 +15,54 @@ function Contact() {
   };
 
   return (
-    <div className="container mx-auto p-6 max-w-4xl">
+    <div className="container mx-auto p-6 max-w-4xl bg-white dark:bg-gray-900 text-black dark:text-white">
       <h1 className="text-4xl font-semibold text-center mb-6">Contact Us</h1>
-      
+
       {/* Contact Methods */}
       <section className="contact-methods grid grid-cols-1 sm:grid-cols-2 gap-8 mb-8">
-        <div className="contact-method bg-gray-50 p-6 rounded-lg shadow-md">
+        <div className="contact-method bg-gray-50 dark:bg-gray-800 text-black dark:text-white p-6 rounded-lg shadow-md">
           <strong className="text-xl">📞 Phone</strong>
-          <p className="mt-2 text-gray-600">(123) 456-7890</p>
+          <p className="mt-2 text-black dark:text-white">(123) 456-7890</p>
         </div>
-        <div className="contact-method bg-gray-50 p-6 rounded-lg shadow-md">
+        <div className="contact-method bg-gray-50 dark:bg-gray-800 text-black dark:text-white p-6 rounded-lg shadow-md">
           <strong className="text-xl">✉️ Email</strong>
-          <p className="mt-2 text-gray-600">contact@company.com</p>
+          <p className="mt-2 text-black dark:text-white">contact@company.com</p>
         </div>
       </section>
 
       {/* Contact Form */}
       <form className="space-y-6" onSubmit={handleSubmit}>
         <div>
-          <label className="block text-sm font-medium text-gray-700">Name</label>
+          <label className="block text-sm font-medium text-black dark:text-white">
+            Name
+          </label>
           <input
             type="text"
-            className="mt-1 p-3 w-full border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
+            className="mt-1 p-3 w-full border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white dark:bg-gray-800 text-black dark:text-white"
             placeholder="Your Name"
             required
           />
         </div>
         <div>
-          <label className="block text-sm font-medium text-gray-700">Email</label>
+          <label className="block text-sm font-medium text-black dark:text-white">
+            Email
+          </label>
           <input
             type="email"
-            className="mt-1 p-3 w-full border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
+           
+  className="mt-1 p-3 w-full border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white dark:bg-gray-800 text-black dark:text-white"
+
             placeholder="Your Email"
             required
           />
         </div>
         <div>
-          <label className="block text-sm font-medium text-gray-700">Message</label>
+          <label className="block text-sm font-medium text-black dark:text-white">
+            {" "}
+            Message
+          </label>
           <textarea
-            className="mt-1 p-3 w-full border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
+            className="mt-1 p-3 w-full border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white dark:bg-gray-800 text-black dark:text-white"
             rows={4}
             placeholder="Your Message"
             required
@@ -72,9 +81,14 @@ function Contact() {
       {/* Popup Modal */}
       {showPopup && (
         <div className="fixed inset-0 flex items-center justify-center bg-gray-800 bg-opacity-50">
-          <div className="bg-white p-8 rounded-lg shadow-lg w-full sm:w-1/3">
-            <h2 className="text-2xl font-semibold mb-4 text-center">Message Sent!</h2>
-            <p className="text-gray-600 text-center mb-6">Your message has been successfully sent. We will get back to you soon.</p>
+          <div className="bg-white dark:bg-gray-800 text-black dark:text-white p-8 rounded-lg shadow-lg w-full sm:w-1/3">
+            <h2 className="text-2xl font-semibold mb-4 text-center">
+              Message Sent!
+            </h2>
+            <p className="text-black dark:text-white text-center mb-6">
+              Your message has been successfully sent. We will get back to you
+              soon.
+            </p>
             <div className="flex justify-center">
               <button
                 onClick={handleClosePopup}
diff --git a/src/pages/Contributors/Contributors.tsx b/src/pages/Contributors/Contributors.tsx
index 1fea40d..b2586e0 100644
--- a/src/pages/Contributors/Contributors.tsx
+++ b/src/pages/Contributors/Contributors.tsx
@@ -11,8 +11,9 @@ import {
   CircularProgress,
   Alert,
 } from "@mui/material";
-import { FaGithub } from "react-icons/fa"; // GitHub Icon
+import { FaGithub } from "react-icons/fa";
 import axios from "axios";
+import { useTheme } from "../../hooks/useTheme";
 
 interface Contributor {
   id: number;
@@ -26,27 +27,41 @@ const ContributorsPage = () => {
   const [contributors, setContributors] = useState<Contributor[]>([]);
   const [loading, setLoading] = useState<boolean>(true);
   const [error, setError] = useState<string | null>(null);
+  const { theme } = useTheme();
+  
+
+  // Style tokens
+  const bgColor = theme === "dark" ? "#1f1f1f" : "#FFFFFF";
+  const textColor = theme === "dark" ? "#FFFFFF" : "#333333";
+  const cardBg = theme === "dark" ? "#2a2a2a" : "#FFFFFF";
+  const borderColor = theme === "dark" ? "#444444" : "#E0E0E0";
+  const hoverBorder = theme === "dark" ? "#666666" : "#C0C0C0";
 
-  // Fetch contributors data from GitHub API
   useEffect(() => {
     const fetchContributors = async () => {
       try {
         const response = await axios.get(
-          "https://api.github.com/repos/mehul-m-prajapati/github_tracker/contributors", {
-            withCredentials : false
-          }
+          "https://api.github.com/repos/mehul-m-prajapati/github_tracker/contributors",
+          { withCredentials: false }
         );
         setContributors(response.data);
       } catch (err) {
-        setError("Failed to fetch contributors. Please try again later."+ err);
+        setError("Failed to fetch contributors. Please try again later. " + err);
       } finally {
         setLoading(false);
       }
     };
 
+    
+
     fetchContributors();
   }, []);
 
+  useEffect(() => {
+  // trigger re-render by updating a dummy state
+  setContributors((prev) => [...prev]);
+}, [theme]);
+
   if (loading) {
     return (
       <Box sx={{ display: "flex", justifyContent: "center", mt: 4 }}>
@@ -67,8 +82,8 @@ const ContributorsPage = () => {
     <Container
       sx={{
         mt: 4,
-        backgroundColor: "#FFFFFF",
-        color: "#333333",
+        bgcolor: bgColor,
+        color: textColor,
         minHeight: "100vh",
         p: 4,
       }}
@@ -82,35 +97,32 @@ const ContributorsPage = () => {
             <Card
               sx={{
                 textAlign: "center",
-                p: 2,
-                backgroundColor: "#F9F9F9",
-                color: "#333333",
+                backgroundColor: cardBg,
+                color: textColor,
                 borderRadius: "10px",
-                border: "1px solid #E0E0E0", // Border styling
-
+                border: `1px solid ${borderColor}`,
                 boxShadow: "0 4px 10px rgba(0,0,0,0.1)",
                 transition: "transform 0.3s ease-in-out",
                 "&:hover": {
-                  transform: "scale(1.05)", // Zoom effect
+                  transform: "scale(1.05)",
                   boxShadow: "0 8px 15px rgba(0,0,0,0.2)",
-                  borderColor: "#C0C0C0", // Change border color on hover
-                  outlineColor: "#B3B3B3", // Change outline color on hover
+                  borderColor: hoverBorder,
                 },
               }}
             >
               <Avatar
                 src={contributor.avatar_url}
                 alt={contributor.login}
-                sx={{ width: 100, height: 100, mx: "auto", mb: 2 }}
+                sx={{ width: 100, height: 100, mx: "auto", mt: 3 }}
               />
               <CardContent>
-                <Typography variant="h6" sx={{ fontWeight: "bold" }}>
+                <Typography variant="h6" sx={{ fontWeight: "bold", color: textColor }}>
                   {contributor.login}
                 </Typography>
-                <Typography variant="body2" color="textSecondary">
+                <Typography variant="body2" sx={{ mt: 1, color: textColor }}>
                   {contributor.contributions} Contributions
                 </Typography>
-                <Typography variant="body2" sx={{ mt: 2 }}>
+                <Typography variant="body2" sx={{ mt: 2, color: textColor }}>
                   Thank you for your valuable contributions to our community!
                 </Typography>
                 <Box sx={{ mt: 2 }}>
@@ -122,9 +134,7 @@ const ContributorsPage = () => {
                     sx={{
                       backgroundColor: "#333333",
                       color: "#FFFFFF",
-                      "&:hover": {
-                        backgroundColor: "#555555", // Custom hover color
-                      },
+                      "&:hover": { backgroundColor: "#555555" },
                     }}
                   >
                     GitHub Profile
@@ -139,4 +149,4 @@ const ContributorsPage = () => {
   );
 };
 
-export default ContributorsPage;
+export default ContributorsPage;
\ No newline at end of file
diff --git a/src/pages/Home/Home.tsx b/src/pages/Home/Home.tsx
index cab0b7d..837bf2b 100644
--- a/src/pages/Home/Home.tsx
+++ b/src/pages/Home/Home.tsx
@@ -1,4 +1,7 @@
 import React, { useState } from "react";
+import { useEffect } from "react";
+import { useTheme } from "../../hooks/useTheme";
+
 import {
   Container,
   Box,
@@ -22,13 +25,13 @@ import {
   FormControl,
   InputLabel,
 } from "@mui/material";
+
 import { useGitHubAuth } from "../../hooks/useGitHubAuth";
 import { useGitHubData } from "../../hooks/useGitHubData";
 import { usePagination } from "../../hooks/usePagination";
 
 const ROWS_PER_PAGE = 10;
 
-// Define the shape of the data received from GitHub
 interface GitHubItem {
   id: number;
   title: string;
@@ -39,8 +42,15 @@ interface GitHubItem {
   html_url: string;
 }
 
-const Home: React.FC = () => {
-  // Hooks for managing user authentication
+const Home: React.FC<{ theme: string }> = ({ theme }) => 
+  
+  
+  {
+  
+  useEffect(() => {
+  console.log("Theme updated in Home:", theme);
+}, [theme]);
+
   const {
     username,
     setUsername,
@@ -62,7 +72,6 @@ const Home: React.FC = () => {
   const { page, itemsPerPage, handleChangePage, paginateData } =
     usePagination(ROWS_PER_PAGE);
 
-  // State for various filters and tabs
   const [tab, setTab] = useState(0);
   const [issueFilter, setIssueFilter] = useState<string>("all");
   const [prFilter, setPrFilter] = useState<string>("all");
@@ -71,22 +80,15 @@ const Home: React.FC = () => {
   const [startDate, setStartDate] = useState<string>("");
   const [endDate, setEndDate] = useState<string>("");
 
-  // Handle data submission to fetch GitHub data
   const handleSubmit = (e: React.FormEvent<HTMLFormElement>): void => {
     e.preventDefault();
     fetchData(username);
   };
 
-  // Format date strings into a readable format
-  const formatDate = (dateString: string): string => {
-    return new Date(dateString).toLocaleDateString();
-  };
+  const formatDate = (dateString: string): string =>
+    new Date(dateString).toLocaleDateString();
 
-  // Filter data based on selected criteria
-  const filterData = (
-    data: GitHubItem[],
-    filterType: string
-  ): GitHubItem[] => {
+  const filterData = (data: GitHubItem[], filterType: string): GitHubItem[] => {
     let filteredData = [...data];
 
     if (filterType === "open" || filterType === "closed" || filterType === "merged") {
@@ -123,26 +125,34 @@ const Home: React.FC = () => {
     return filteredData;
   };
 
-  // Determine the current tab's data
   const currentData =
     tab === 0 ? filterData(issues, issueFilter) : filterData(prs, prFilter);
 
-  // Paginate the filtered data
   const displayData = paginateData(currentData);
 
-  // Main UI rendering
   return (
     <Container
       maxWidth="lg"
       sx={{
+        backgroundColor: theme === "dark" ? "#121212" : "#fff",
+        color: theme === "dark" ? "#eee" : "#111",
         display: "flex",
         flexDirection: "column",
         minHeight: "78vh",
         mt: 4,
       }}
     >
-      {/* Authentication Form */}
-      <Paper elevation={1} sx={{ p: 2, mb: 4 }}>
+      <Paper
+        elevation={1}
+        sx={{
+          p: 2,
+          mb: 4,
+          backgroundColor: theme === "dark" ? "#1e1e1e" : "#f5f5f5",
+          color: theme === "dark" ? "#e0e0e0" : "#000",
+          border: "1px solid",
+          borderColor: theme === "dark" ? "#444" : "#ccc",
+        }}
+      >
         <form onSubmit={handleSubmit}>
           <Box sx={{ display: "flex", gap: 2, flexWrap: "wrap" }}>
             <TextField
@@ -150,36 +160,82 @@ const Home: React.FC = () => {
               value={username}
               onChange={(e) => setUsername(e.target.value)}
               required
-              sx={{ flex: 1 }}
+              sx={{
+                flex: 1,
+                "& .MuiOutlinedInput-root": {
+                  backgroundColor: theme === "dark" ? "#2a2a2a" : "#fff",
+                  color: theme === "dark" ? "#eee" : "#000",
+                },
+                "& .MuiInputLabel-root": {
+                  color: theme === "dark" ? "#ccc" : "#555",
+                },
+              }}
             />
             <TextField
               label="Personal Access Token"
+              type="password"
               value={token}
               onChange={(e) => setToken(e.target.value)}
-              type="password"
               required
-              sx={{ flex: 1 }}
+              sx={{
+                flex: 1,
+                "& .MuiOutlinedInput-root": {
+                  backgroundColor: theme === "dark" ? "#2a2a2a" : "#fff",
+                  color: theme === "dark" ? "#eee" : "#000",
+                },
+                "& .MuiInputLabel-root": {
+                  color: theme === "dark" ? "#ccc" : "#555",
+                },
+              }}
             />
-            <Button type="submit" variant="contained" sx={{ minWidth: "120px" }}>
+            <Button
+              type="submit"
+              variant="contained"
+              sx={{
+                minWidth: "120px",
+                backgroundColor: theme === "dark" ? "#1976d2" : "#1976d2",
+                color: "#fff",
+                "&:hover": {
+                  backgroundColor: theme === "dark" ? "#1565c0" : "#1565c0",
+                },
+              }}
+            >
               Fetch Data
             </Button>
           </Box>
         </form>
       </Paper>
 
-      {/* Filters Section */}
       <Box sx={{ mb: 2, display: "flex", flexWrap: "wrap", gap: 2 }}>
         <TextField
           label="Search Title"
           value={searchTitle}
           onChange={(e) => setSearchTitle(e.target.value)}
-          sx={{ minWidth: 200 }}
+          sx={{
+            minWidth: 200,
+            "& .MuiOutlinedInput-root": {
+              backgroundColor: theme === "dark" ? "#2a2a2a" : "#fff",
+              color: theme === "dark" ? "#eee" : "#000",
+            },
+            "& .MuiInputLabel-root": {
+              color: theme === "dark" ? "#ccc" : "#555",
+            },
+          }}
         />
         <TextField
           label="Repository"
           value={selectedRepo}
           onChange={(e) => setSelectedRepo(e.target.value)}
-          sx={{ minWidth: 200 }}
+          sx={{
+            minWidth: 200,
+            "& .MuiOutlinedInput-root": {
+              backgroundColor: theme === "dark" ? "#2a2a2a" : "#fff",
+              color: theme === "dark" ? "#eee" : "#000",
+            },
+            "& .MuiInputLabel-root": {
+              color: theme === "dark" ? "#ccc" : "#555",
+            },
+          }}
         />
         <TextField
           label="Start Date"
@@ -187,7 +243,16 @@ const Home: React.FC = () => {
           value={startDate}
           onChange={(e) => setStartDate(e.target.value)}
           InputLabelProps={{ shrink: true }}
-          sx={{ minWidth: 150 }}
+          sx={{
+            minWidth: 150,
+            "& .MuiOutlinedInput-root": {
+              backgroundColor: theme === "dark" ? "#2a2a2a" : "#fff",
+              color: theme === "dark" ? "#eee" : "#000",
+            },
+            "& .MuiInputLabel-root": {
+              color: theme === "dark" ? "#ccc" : "#555",
+            },
+          }}
         />
         <TextField
           label="End Date"
@@ -195,11 +260,19 @@ const Home: React.FC = () => {
           value={endDate}
           onChange={(e) => setEndDate(e.target.value)}
           InputLabelProps={{ shrink: true }}
-          sx={{ minWidth: 150 }}
+          sx={{
+            minWidth: 150,
+            "& .MuiOutlinedInput-root": {
+              backgroundColor: theme === "dark" ? "#2a2a2a" : "#fff",
+              color: theme === "dark" ? "#eee" : "#000",
+            },
+            "& .MuiInputLabel-root": {
+              color: theme === "dark" ? "#ccc" : "#555",
+            },
+          }}
         />
       </Box>
 
-      {/* Tabs and State Dropdown */}
       <Box
         sx={{
           display: "flex",
@@ -210,12 +283,32 @@ const Home: React.FC = () => {
           gap: 2,
         }}
       >
-        <Tabs value={tab} onChange={(e, newValue) => setTab(newValue)} sx={{ flex: 1 }}>
+               <Tabs
+          value={tab}
+          onChange={(e, newValue) => setTab(newValue)}
+          sx={{
+            flex: 1,
+            "& .MuiTab-root": {
+              color: theme === "dark" ? "#ddd" : "#111",
+            },
+            "& .MuiTabs-indicator": {
+              backgroundColor: theme === "dark" ? "#90caf9" : "#1976d2",
+            },
+          }}
+        >
           <Tab label={`Issues (${filterData(issues, issueFilter).length})`} />
           <Tab label={`Pull Requests (${filterData(prs, prFilter).length})`} />
         </Tabs>
+
         <FormControl sx={{ minWidth: 150 }}>
-          <InputLabel sx={{ fontSize: "14px", color: "#555" }}>State</InputLabel>
+          <InputLabel
+            sx={{
+              fontSize: "14px",
+              color: theme === "dark" ? "#ccc" : "#555",
+            }}
+          >
+            State
+          </InputLabel>
           <Select
             value={tab === 0 ? issueFilter : prFilter}
             onChange={(e) =>
@@ -225,11 +318,11 @@ const Home: React.FC = () => {
             }
             label="State"
             sx={{
-              backgroundColor: "#fff",
-              borderRadius: "4px",
+              backgroundColor: theme === "dark" ? "#2a2a2a" : "#fff",
+              color: theme === "dark" ? "#eee" : "#000",
               "& .MuiSelect-select": { padding: "10px" },
-              "&.Mui-focused .MuiOutlinedInput-notchedOutline": {
-                borderColor: "#1976d2",
+              "& .MuiOutlinedInput-notchedOutline": {
+                borderColor: theme === "dark" ? "#90caf9" : "#1976d2",
               },
             }}
           >
@@ -241,29 +334,68 @@ const Home: React.FC = () => {
         </FormControl>
       </Box>
 
-      {/* Error Alert */}
       {(authError || dataError) && (
-        <Alert severity="error" sx={{ mb: 3 }}>
+        <Alert
+          severity="error"
+          sx={{
+            mb: 3,
+            backgroundColor: theme === "dark" ? "#3c1a1a" : "#fff1f1",
+            color: theme === "dark" ? "#ffdddd" : "#990000",
+          }}
+        >
           {authError || dataError}
         </Alert>
       )}
 
-      {/* Table Section */}
       {loading ? (
         <Box display="flex" justifyContent="center" my={4}>
-          <CircularProgress />
+          <CircularProgress color="primary" />
         </Box>
       ) : (
         <Box>
           <Box sx={{ maxHeight: "400px", overflowY: "auto", display: "block" }}>
-            <TableContainer component={Paper}>
+            <TableContainer
+              component={Paper}
+              sx={{
+                backgroundColor: theme === "dark" ? "#1e1e1e" : "#fff",
+                color: theme === "dark" ? "#eee" : "#111",
+              }}
+            >
               <Table>
                 <TableHead>
                   <TableRow>
-                    <TableCell sx={{ textAlign: "left" }}>Title</TableCell>
-                    <TableCell sx={{ textAlign: "center" }}>Repository</TableCell>
-                    <TableCell sx={{ textAlign: "center" }}>State</TableCell>
-                    <TableCell sx={{ textAlign: "left" }}>Created</TableCell>
+                    <TableCell
+                      sx={{
+                        textAlign: "left",
+                        color: theme === "dark" ? "#90caf9" : "#1976d2",
+                      }}
+                    >
+                      Title
+                    </TableCell>
+                    <TableCell
+                      sx={{
+                        textAlign: "center",
+                        color: theme === "dark" ? "#90caf9" : "#1976d2",
+                      }}
+                    >
+                      Repository
+                    </TableCell>
+                    <TableCell
+                      sx={{
+                        textAlign: "center",
+                        color: theme === "dark" ? "#90caf9" : "#1976d2",
+                      }}
+                    >
+                      State
+                    </TableCell>
+                    <TableCell
+                      sx={{
+                        textAlign: "left",
+                        color: theme === "dark" ? "#90caf9" : "#1976d2",
+                      }}
+                    >
+                      Created
+                    </TableCell>
                   </TableRow>
                 </TableHead>
                 <TableBody>
@@ -274,6 +406,13 @@ const Home: React.FC = () => {
                           href={item.html_url}
                           target="_blank"
                           rel="noopener noreferrer"
+                          sx={{
+                            color: theme === "dark" ? "#82b1ff" : "#1976d2",
+                            textDecoration: "none",
+                            "&:hover": {
+                              textDecoration: "underline",
+                            },
+                          }}
                         >
                           {item.title}
                         </Link>
@@ -298,6 +437,10 @@ const Home: React.FC = () => {
                 onPageChange={handleChangePage}
                 rowsPerPage={itemsPerPage}
                 rowsPerPageOptions={[5]}
+                sx={{
+                  backgroundColor: theme === "dark" ? "#121212" : "#f9f9f9",
+                  color: theme === "dark" ? "#eee" : "#111",
+                }}
               />
             </TableContainer>
           </Box>
@@ -307,4 +450,4 @@ const Home: React.FC = () => {
   );
 };
 
-export default Home;
+export default Home;
\ No newline at end of file
diff --git a/src/theme.ts b/src/theme.ts
new file mode 100644
index 0000000..b46cc3f
--- /dev/null
+++ b/src/theme.ts
@@ -0,0 +1,21 @@
+// src/theme.ts
+import { createTheme } from "@mui/material/styles";
+
+export const getMuiTheme = (mode: "light" | "dark") =>
+  createTheme({
+    palette: {
+      mode,
+      ...(mode === "dark"
+        ? {
+            background: {
+              default: "#121212",
+              paper: "#1e1e1e",
+            },
+            text: {
+              primary: "#ffffff",
+              secondary: "#aaaaaa",
+            },
+          }
+        : {}),
+    },
+  });
\ No newline at end of file
diff --git a/tailwind.config.js b/tailwind.config.js
index 9b2ed50..9946a97 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,11 +1,9 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-    content: [
-      "./index.html",                      // For any HTML files in the root
-      "./src/**/*.{js,jsx,ts,tsx}",         // For all JS/JSX/TS/TSX files inside src folder
-    ],
-    theme: {
-      extend: {},
-    },
-    plugins: [],
-  }
+  darkMode: "class", // ✅ enables manual theme toggling via class
+  content: ["./index.html", "./src/**/*.{js,jsx,ts,tsx}"],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+};

From 351226895ff2e73ffb5930568dfe5be72dfa86aa Mon Sep 17 00:00:00 2001
From: Trailblazer09 <akaaj15o@gmail.com>
Date: Fri, 25 Jul 2025 19:46:01 +0530
Subject: [PATCH 02/16] remove aws lamda package

---
 package.json | 1 -
 1 file changed, 1 deletion(-)

diff --git a/package.json b/package.json
index a4e5ca9..ca7db86 100644
--- a/package.json
+++ b/package.json
@@ -25,7 +25,6 @@
   },
   "devDependencies": {
     "@eslint/js": "^9.13.0",
-    "@types/aws-lambda": "^8.10.152",
     "@types/node": "^22.10.1",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",

From cb94bffcb4d98cd09d0e5ac55a8d97294a3a00fd Mon Sep 17 00:00:00 2001
From: Trailblazer09 <akaaj15o@gmail.com>
Date: Fri, 25 Jul 2025 20:01:33 +0530
Subject: [PATCH 03/16] remove extra code from app.tsx

---
 src/App.tsx | 12 ++++--------
 1 file changed, 4 insertions(+), 8 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 4495dfb..fa8db40 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -3,24 +3,20 @@ import Navbar from "./components/Navbar";
 import Footer from "./components/Footer";
 import ScrollProgressBar from './components/ScrollProgressBar';
 import { Toaster } from "react-hot-toast";
-import { useTheme } from "./hooks/useTheme";
-
-import Router from "./Routes/Router";
+import Router from "./Routes/Router.tsx";
 
 function App() {
-  const { theme, setTheme } = useTheme();
-
   return (
 
-      <div className="relative flex flex-col min-h-screen bg-white text-black dark:bg-gray-900 dark:text-white">
+      <div className="relative flex flex-col min-h-screen">
         <ScrollProgressBar/>
 
         {/* Navbar */}
         <Navbar />
 
         {/* Main content */}
-        <main className="flex-grow bg-gray-50 dark:bg-gray-800 flex justify-center items-center">
-          <Router theme={theme} />
+        <main className="flex-grow bg-gray-50 flex justify-center items-center">
+        <Router/>
         </main>
 
         {/* Footer */}

From 8d06fb205505c3d9712dcfc5e96dce7d00a00ac1 Mon Sep 17 00:00:00 2001
From: Trailblazer09 <akaaj15o@gmail.com>
Date: Fri, 25 Jul 2025 20:17:02 +0530
Subject: [PATCH 04/16] reversed the code to orginal

---
 src/App.tsx | 17 ++++-------------
 1 file changed, 4 insertions(+), 13 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index fa8db40..b9bda3f 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,27 +1,24 @@
-
 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.tsx";
+
+import Router from "./Routes/Router";
 
 function App() {
   return (
-
       <div className="relative flex flex-col min-h-screen">
         <ScrollProgressBar/>
-
         {/* Navbar */}
         <Navbar />
 
         {/* Main content */}
         <main className="flex-grow bg-gray-50 flex justify-center items-center">
-        <Router/>
+          <Router/>
         </main>
 
         {/* Footer */}
         <Footer />
-
         <Toaster
           position="top-center"
           reverseOrder={false}
@@ -32,7 +29,6 @@ function App() {
             className: 'bg-white',
             duration: 5000,
             //removeDelay: 1000,
-
             success: {
               duration: 3000,
               iconTheme: {
@@ -43,12 +39,7 @@ function App() {
           }}
         />
       </div>
-
   );
 }
 
-export default App;
-
-
-
-
+export default App;
\ No newline at end of file

From c3ad5d9331d69b4f6ccbdd1f927b6943cc715ad8 Mon Sep 17 00:00:00 2001
From: Trailblazer09 <akaaj15o@gmail.com>
Date: Fri, 25 Jul 2025 20:24:03 +0530
Subject: [PATCH 05/16] reversed the code to orginal again

---
 src/App.tsx | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/src/App.tsx b/src/App.tsx
index b9bda3f..99170fd 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,3 +1,4 @@
+
 import Navbar from "./components/Navbar";
 import Footer from "./components/Footer";
 import ScrollProgressBar from './components/ScrollProgressBar';
@@ -7,8 +8,10 @@ import Router from "./Routes/Router";
 
 function App() {
   return (
+
       <div className="relative flex flex-col min-h-screen">
         <ScrollProgressBar/>
+
         {/* Navbar */}
         <Navbar />
 
@@ -19,6 +22,7 @@ function App() {
 
         {/* Footer */}
         <Footer />
+
         <Toaster
           position="top-center"
           reverseOrder={false}
@@ -29,6 +33,7 @@ function App() {
             className: 'bg-white',
             duration: 5000,
             //removeDelay: 1000,
+
             success: {
               duration: 3000,
               iconTheme: {
@@ -39,6 +44,7 @@ function App() {
           }}
         />
       </div>
+
   );
 }
 

From 8c71bc451777e3e3f8f94dc3035c472a9f7d44bc Mon Sep 17 00:00:00 2001
From: Trailblazer09 <akaaj15o@gmail.com>
Date: Fri, 25 Jul 2025 20:40:52 +0530
Subject: [PATCH 06/16] reversed the code to orginal

---
 src/Routes/Login/Login.tsx | 29 +++++++++++------------------
 1 file changed, 11 insertions(+), 18 deletions(-)

diff --git a/src/Routes/Login/Login.tsx b/src/Routes/Login/Login.tsx
index 1071400..28081f4 100644
--- a/src/Routes/Login/Login.tsx
+++ b/src/Routes/Login/Login.tsx
@@ -1,7 +1,6 @@
 import React, { useState, ChangeEvent, FormEvent } from "react";
 import axios from "axios";
 import { useNavigate } from "react-router-dom"; // Import the hook for navigation
-
 const backendUrl = import.meta.env.VITE_BACKEND_URL;
 interface LoginFormData {
   email: string;
@@ -9,30 +8,29 @@ interface LoginFormData {
 }
 
 const Login: React.FC = () => {
-  const [formData, setFormData] = useState<LoginFormData>({
-    email: "",
-    password: "",
-  });
+  const [formData, setFormData] = useState<LoginFormData>({ email: "", password: "" });
   const [message, setMessage] = useState<string>("");
+  
 
   const navigate = useNavigate(); // Initialize the navigate hook
-
   const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
     const { name, value } = e.target;
     setFormData({ ...formData, [name]: value });
   };
 
+
+  
   const handleSubmit = async (e: FormEvent) => {
     e.preventDefault();
     try {
-      const response = await axios.post(
-        `${backendUrl}/api/auth/login`,
-        formData
+      const response = await axios.post(`${backendUrl}/api/auth/login`,
+        formData,
+
       );
       setMessage(response.data.message); // Show success message from backend
 
       // Navigate to /home if login is successful
-      if (response.data.message === "Login successful") {
+      if (response.data.message === 'Login successful') {
         navigate("/home");
       }
     } catch (error: any) {
@@ -41,13 +39,9 @@ const Login: React.FC = () => {
   };
 
   return (
-    <div className="features bg-gray-100 dark:bg-gray-800 text-black dark:text-white py-12">
-      <div className="max-w-md mx-auto p-6 rounded-lg bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 shadow-md">
+    <div className="max-w-md mt-12 mx-auto bg-white p-8 rounded-lg shadow-md">
       <h2 className="text-2xl font-semibold text-center mb-6">Login</h2>
-      
-
       <form onSubmit={handleSubmit} className="space-y-4">
-        
         <div>
           <input
             type="email"
@@ -56,7 +50,7 @@ const Login: React.FC = () => {
             value={formData.email}
             onChange={handleChange}
             required
-            className="w-full p-3 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-black dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500"
+            className="w-full p-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
           />
         </div>
         <div>
@@ -67,7 +61,7 @@ const Login: React.FC = () => {
             value={formData.password}
             onChange={handleChange}
             required
-            className="w-full p-3 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-black dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500"
+            className="w-full p-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
           />
         </div>
         <button
@@ -79,7 +73,6 @@ const Login: React.FC = () => {
       </form>
       {message && <p className="text-center text-red-500 mt-4">{message}</p>}
     </div>
-    </div>
   );
 };
 

From 6488d42bc802fb2366f12f822d004d775de32dc0 Mon Sep 17 00:00:00 2001
From: Trailblazer09 <akaaj15o@gmail.com>
Date: Fri, 25 Jul 2025 20:47:33 +0530
Subject: [PATCH 07/16] reversed the code to orginal

---
 src/Routes/Router.tsx | 16 ++++------------
 1 file changed, 4 insertions(+), 12 deletions(-)

diff --git a/src/Routes/Router.tsx b/src/Routes/Router.tsx
index 7847f95..3411a4b 100644
--- a/src/Routes/Router.tsx
+++ b/src/Routes/Router.tsx
@@ -7,27 +7,19 @@ import Contributors from "../pages/Contributors/Contributors";
 import Signup from "./Signup/Signup.tsx";
 import Login from "./Login/Login.tsx";
 
-interface RouterProps {
-  theme: string;
-}
-
-const Router: React.FC<RouterProps> = ({ theme }) => {
-
 
+const Router = () => {
   return (
     <Routes>
       {/* Redirect from root (/) to the home page */}
       <Route path="/signup" element={<Signup />} />
       <Route path="/login" element={<Login />} />
       <Route path="/" element={<Navigate to="/home" replace />} />
-      <Route path="/home" element={<Home key={theme} theme={theme} />} />
       <Route path="/about" element={<About />} />
       <Route path="/contact" element={<Contact />} />
-      
-      
+      <Route path="/home" element={<Home />} />
       <Route path="/contributors" element={<Contributors />} />
     </Routes>
   );
-};
-
-export default Router;
+  };
+export default Router;
\ No newline at end of file

From 2c1d28559ea5b86b3bd907f8523b94d97bd73ad2 Mon Sep 17 00:00:00 2001
From: Trailblazer09 <akaaj15o@gmail.com>
Date: Fri, 25 Jul 2025 20:55:42 +0530
Subject: [PATCH 08/16] reversed the code to orginal

---
 src/components/Navbar.tsx | 31 +++++++++----------------------
 1 file changed, 9 insertions(+), 22 deletions(-)

diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
index 50c1091..1df98eb 100644
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@@ -1,20 +1,17 @@
-import { Link } from "react-router-dom";
-import { useState, useEffect } from "react";
-import { useTheme } from "../hooks/useTheme";
+import { Link } from 'react-router-dom';
+import { useState } from 'react';
 
 const Navbar: React.FC = () => {
   const [isOpen, setIsOpen] = useState<boolean>(false);
-  const { theme, setTheme } = useTheme();
-  
+
   return (
-   <nav className="bg-white text-black dark:bg-gray-800 dark:text-white shadow-lg">
+    <nav className="bg-gray-800 text-white shadow-lg">
       <div className="container mx-auto px-6 py-4 flex justify-between items-center">
         {/* Logo Section */}
-      <div className="text-2xl font-bold hover:text-gray-300 cursor-pointer flex items-center">  
+        <div className="text-2xl font-bold hover:text-gray-300 cursor-pointer flex items-center">
           <img src="/crl-icon.png" alt="CRL Icon" className="h-8 mr-2" />
           GitHub Tracker
         </div>
-
         {/* Desktop Links */}
         <div className="hidden md:flex space-x-6">
           <Link
@@ -44,16 +41,7 @@ const Navbar: React.FC = () => {
           <Link
             to="/login"
             className="text-lg font-medium hover:text-gray-300 transition-all px-2 py-1 border border-transparent hover:border-gray-400 rounded"
-          >
-            Login
-          </Link>
-          <button
-            onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
-            className="text-lg font-medium px-2 py-1 rounded border border-transparent hover:border-gray-400 transition-all"
-            title={`Switch to ${theme === "dark" ? "light" : "dark"} mode`}
-          >
-            {theme === "dark" ? "🌞 Light" : "🌙 Dark"}
-          </button>
+          >Login</Link>
         </div>
 
         {/* Mobile Menu Button */}
@@ -63,24 +51,23 @@ const Navbar: React.FC = () => {
             className="relative w-8 h-8 flex flex-col space-y-[5px] items-center group focus:outline-none"
           >
             <span
-              className={`block h-[3px] w-full bg-black dark:bg-white rounded-lg transition-transform duration-300 ${
+              className={`block h-[3px] w-full bg-white rounded-lg transition-transform duration-300 ${
                 isOpen ? "rotate-45 translate-y-2" : ""
               }`}
             ></span>
             <span
-              className={`block h-[3px] w-full bg-black dark:bg-white rounded-lg transition-opacity duration-300 ${
+              className={`block h-[3px] w-full bg-white rounded-lg transition-opacity duration-300 ${
                 isOpen ? "opacity-0" : ""
               }`}
             ></span>
             <span
-              className={`block h-[3px] w-full bg-black dark:bg-white rounded-lg transition-transform duration-300 ${
+              className={`block h-[3px] w-full bg-white rounded-lg transition-transform duration-300 ${
                 isOpen ? "-rotate-45 -translate-y-2" : ""
               }`}
             ></span>
           </button>
         </div>
       </div>
-
       {/* Mobile Links */}
       {isOpen && (
         <div className="md:hidden bg-gray-800">

From e0142f69bc9553222541532b3f31296f457ad9e1 Mon Sep 17 00:00:00 2001
From: Trailblazer09 <akaaj15o@gmail.com>
Date: Sat, 26 Jul 2025 07:22:23 +0530
Subject: [PATCH 09/16] reversed the code to original

---
 src/main.tsx | 21 ++++-----------------
 1 file changed, 4 insertions(+), 17 deletions(-)

diff --git a/src/main.tsx b/src/main.tsx
index 26ac950..c2d6770 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -1,26 +1,13 @@
-// main.tsx
 import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
-import App from "./App";
+import App from "./App.tsx";
 import "./index.css";
 import { BrowserRouter } from "react-router-dom";
-import { ThemeProvider } from "@mui/material/styles";
-import { getMuiTheme } from "./theme";
-import { useTheme } from "./hooks/useTheme";
-
-const RootApp = () => {
-  const { theme } = useTheme();
-  return (
-    <ThemeProvider theme={getMuiTheme(theme)}>
-      <BrowserRouter>
-        <App />
-      </BrowserRouter>
-    </ThemeProvider>
-  );
-};
 
 createRoot(document.getElementById("root")!).render(
   <StrictMode>
-    <RootApp />
+    <BrowserRouter>
+      <App />
+    </BrowserRouter>
   </StrictMode>
 );
\ No newline at end of file

From a633801433c144cb57f8bdc4ea8862a62b7f33c7 Mon Sep 17 00:00:00 2001
From: Trailblazer09 <akaaj15o@gmail.com>
Date: Sat, 26 Jul 2025 07:26:12 +0530
Subject: [PATCH 10/16] reversed the code to original

---
 src/pages/About/About.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/pages/About/About.tsx b/src/pages/About/About.tsx
index a8cbe01..af2faa3 100644
--- a/src/pages/About/About.tsx
+++ b/src/pages/About/About.tsx
@@ -2,21 +2,21 @@ const About = () => {
   return (
     <div className="about-container">
       {/* Hero Section */}
-      <section className="hero bg-gray-100 dark:bg-gray-800 text-black dark:text-white py-12">
+      <section className="hero bg-gray-800 text-white py-12">
         <h1 className="text-4xl font-bold text-center">About Us</h1>
         <p className="text-lg text-center mt-4">Welcome to GitHub Tracker! We simplify issue tracking for developers.</p>
       </section>
 
       {/* Mission Section */}
-      <section className="mission py-12"> 
+      <section className="mission py-12">
         <h2 className="text-3xl font-semibold text-center">Our Mission</h2>
         <p className="text-lg text-center mt-4 max-w-3xl mx-auto">
           We aim to provide an efficient and user-friendly way to track GitHub issues and pull requests. Our goal is to make it easy for developers to stay organized and focused on their projects without getting bogged down by the details.
         </p>
       </section>
 
-      {/* Features Section */} 
-      <section className="features bg-gray-100 dark:bg-gray-800 text-black dark:text-white py-12">
+      {/* Features Section */}
+      <section className="features bg-gray-100 py-12">
         <h2 className="text-3xl font-semibold text-center">What We Do</h2>
         <div className="flex justify-around mt-8">
           <div className="feature-item text-center">
@@ -40,4 +40,4 @@ const About = () => {
   );
 };
 
-export default About;
+export default About;
\ No newline at end of file

From 6babba7aa0415c7f660a6689b00b97b48a69a397 Mon Sep 17 00:00:00 2001
From: Trailblazer09 <akaaj15o@gmail.com>
Date: Sat, 26 Jul 2025 07:34:30 +0530
Subject: [PATCH 11/16] reversed the code to orginal

---
 src/pages/Contact/Contact.tsx | 52 +++++++++++++----------------------
 1 file changed, 19 insertions(+), 33 deletions(-)

diff --git a/src/pages/Contact/Contact.tsx b/src/pages/Contact/Contact.tsx
index 1f7ec1f..671bc72 100644
--- a/src/pages/Contact/Contact.tsx
+++ b/src/pages/Contact/Contact.tsx
@@ -1,68 +1,59 @@
-import { FormEvent, useState } from "react";
+import { FormEvent, useState } from 'react';
 
 function Contact() {
   const [showPopup, setShowPopup] = useState<boolean>(false); // State to control popup visibility
-
   // Handle form submission
   const handleSubmit = (e: FormEvent<HTMLFormElement>) => {
     e.preventDefault();
     setShowPopup(true); // Show the popup after submission
   };
-
   // Handle closing the popup
   const handleClosePopup = () => {
     setShowPopup(false); // Hide the popup
   };
 
+
+
   return (
-    <div className="container mx-auto p-6 max-w-4xl bg-white dark:bg-gray-900 text-black dark:text-white">
+    <div className="container mx-auto p-6 max-w-4xl">
       <h1 className="text-4xl font-semibold text-center mb-6">Contact Us</h1>
-
+      
       {/* Contact Methods */}
       <section className="contact-methods grid grid-cols-1 sm:grid-cols-2 gap-8 mb-8">
-        <div className="contact-method bg-gray-50 dark:bg-gray-800 text-black dark:text-white p-6 rounded-lg shadow-md">
+        <div className="contact-method bg-gray-50 p-6 rounded-lg shadow-md">
           <strong className="text-xl">📞 Phone</strong>
-          <p className="mt-2 text-black dark:text-white">(123) 456-7890</p>
+          <p className="mt-2 text-gray-600">(123) 456-7890</p>
         </div>
-        <div className="contact-method bg-gray-50 dark:bg-gray-800 text-black dark:text-white p-6 rounded-lg shadow-md">
+        <div className="contact-method bg-gray-50 p-6 rounded-lg shadow-md">
           <strong className="text-xl">✉️ Email</strong>
-          <p className="mt-2 text-black dark:text-white">contact@company.com</p>
+          <p className="mt-2 text-gray-600">contact@company.com</p>
         </div>
       </section>
 
       {/* Contact Form */}
       <form className="space-y-6" onSubmit={handleSubmit}>
         <div>
-          <label className="block text-sm font-medium text-black dark:text-white">
-            Name
-          </label>
+          <label className="block text-sm font-medium text-gray-700">Name</label>
           <input
             type="text"
-            className="mt-1 p-3 w-full border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white dark:bg-gray-800 text-black dark:text-white"
+            className="mt-1 p-3 w-full border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
             placeholder="Your Name"
             required
           />
         </div>
         <div>
-          <label className="block text-sm font-medium text-black dark:text-white">
-            Email
-          </label>
+          <label className="block text-sm font-medium text-gray-700">Email</label>
           <input
             type="email"
-           
-  className="mt-1 p-3 w-full border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white dark:bg-gray-800 text-black dark:text-white"
-
+            className="mt-1 p-3 w-full border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
             placeholder="Your Email"
             required
           />
         </div>
         <div>
-          <label className="block text-sm font-medium text-black dark:text-white">
-            {" "}
-            Message
-          </label>
+          <label className="block text-sm font-medium text-gray-700">Message</label>
           <textarea
-            className="mt-1 p-3 w-full border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white dark:bg-gray-800 text-black dark:text-white"
+            className="mt-1 p-3 w-full border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
             rows={4}
             placeholder="Your Message"
             required
@@ -78,17 +69,13 @@ function Contact() {
         </div>
       </form>
 
+
       {/* Popup Modal */}
       {showPopup && (
         <div className="fixed inset-0 flex items-center justify-center bg-gray-800 bg-opacity-50">
-          <div className="bg-white dark:bg-gray-800 text-black dark:text-white p-8 rounded-lg shadow-lg w-full sm:w-1/3">
-            <h2 className="text-2xl font-semibold mb-4 text-center">
-              Message Sent!
-            </h2>
-            <p className="text-black dark:text-white text-center mb-6">
-              Your message has been successfully sent. We will get back to you
-              soon.
-            </p>
+          <div className="bg-white p-8 rounded-lg shadow-lg w-full sm:w-1/3">
+            <h2 className="text-2xl font-semibold mb-4 text-center">Message Sent!</h2>
+            <p className="text-gray-600 text-center mb-6">Your message has been successfully sent. We will get back to you soon.</p>
             <div className="flex justify-center">
               <button
                 onClick={handleClosePopup}
@@ -103,5 +90,4 @@ function Contact() {
     </div>
   );
 }
-
 export default Contact;

From 655c4eac5f186af14f27888636c0dad43f4e8cbc Mon Sep 17 00:00:00 2001
From: Trailblazer09 <akaaj15o@gmail.com>
Date: Sat, 26 Jul 2025 07:36:58 +0530
Subject: [PATCH 12/16] reversed the code to original

---
 src/pages/Contributors/Contributors.tsx | 59 ++++++++++---------------
 1 file changed, 23 insertions(+), 36 deletions(-)

diff --git a/src/pages/Contributors/Contributors.tsx b/src/pages/Contributors/Contributors.tsx
index b2586e0..e5aef8f 100644
--- a/src/pages/Contributors/Contributors.tsx
+++ b/src/pages/Contributors/Contributors.tsx
@@ -11,9 +11,8 @@ import {
   CircularProgress,
   Alert,
 } from "@mui/material";
-import { FaGithub } from "react-icons/fa";
+import { FaGithub } from "react-icons/fa"; // GitHub Icon
 import axios from "axios";
-import { useTheme } from "../../hooks/useTheme";
 
 interface Contributor {
   id: number;
@@ -22,46 +21,31 @@ interface Contributor {
   contributions: number;
   html_url: string;
 }
-
 const ContributorsPage = () => {
   const [contributors, setContributors] = useState<Contributor[]>([]);
   const [loading, setLoading] = useState<boolean>(true);
   const [error, setError] = useState<string | null>(null);
-  const { theme } = useTheme();
-  
-
-  // Style tokens
-  const bgColor = theme === "dark" ? "#1f1f1f" : "#FFFFFF";
-  const textColor = theme === "dark" ? "#FFFFFF" : "#333333";
-  const cardBg = theme === "dark" ? "#2a2a2a" : "#FFFFFF";
-  const borderColor = theme === "dark" ? "#444444" : "#E0E0E0";
-  const hoverBorder = theme === "dark" ? "#666666" : "#C0C0C0";
 
+  // Fetch contributors data from GitHub API
   useEffect(() => {
     const fetchContributors = async () => {
       try {
         const response = await axios.get(
-          "https://api.github.com/repos/mehul-m-prajapati/github_tracker/contributors",
-          { withCredentials: false }
+          "https://api.github.com/repos/mehul-m-prajapati/github_tracker/contributors", {
+            withCredentials : false
+          }
         );
         setContributors(response.data);
       } catch (err) {
-        setError("Failed to fetch contributors. Please try again later. " + err);
+        setError("Failed to fetch contributors. Please try again later."+ err);
       } finally {
         setLoading(false);
       }
     };
 
-    
-
     fetchContributors();
   }, []);
 
-  useEffect(() => {
-  // trigger re-render by updating a dummy state
-  setContributors((prev) => [...prev]);
-}, [theme]);
-
   if (loading) {
     return (
       <Box sx={{ display: "flex", justifyContent: "center", mt: 4 }}>
@@ -69,7 +53,6 @@ const ContributorsPage = () => {
       </Box>
     );
   }
-
   if (error) {
     return (
       <Box sx={{ mt: 4 }}>
@@ -77,13 +60,12 @@ const ContributorsPage = () => {
       </Box>
     );
   }
-
   return (
     <Container
       sx={{
         mt: 4,
-        bgcolor: bgColor,
-        color: textColor,
+        backgroundColor: "#FFFFFF",
+        color: "#333333",
         minHeight: "100vh",
         p: 4,
       }}
@@ -97,32 +79,35 @@ const ContributorsPage = () => {
             <Card
               sx={{
                 textAlign: "center",
-                backgroundColor: cardBg,
-                color: textColor,
+                p: 2,
+                backgroundColor: "#F9F9F9",
+                color: "#333333",
                 borderRadius: "10px",
-                border: `1px solid ${borderColor}`,
+                border: "1px solid #E0E0E0", // Border styling
+
                 boxShadow: "0 4px 10px rgba(0,0,0,0.1)",
                 transition: "transform 0.3s ease-in-out",
                 "&:hover": {
-                  transform: "scale(1.05)",
+                  transform: "scale(1.05)", // Zoom effect
                   boxShadow: "0 8px 15px rgba(0,0,0,0.2)",
-                  borderColor: hoverBorder,
+                  borderColor: "#C0C0C0", // Change border color on hover
+                  outlineColor: "#B3B3B3", // Change outline color on hover
                 },
               }}
             >
               <Avatar
                 src={contributor.avatar_url}
                 alt={contributor.login}
-                sx={{ width: 100, height: 100, mx: "auto", mt: 3 }}
+                sx={{ width: 100, height: 100, mx: "auto", mb: 2 }}
               />
               <CardContent>
-                <Typography variant="h6" sx={{ fontWeight: "bold", color: textColor }}>
+                <Typography variant="h6" sx={{ fontWeight: "bold" }}>
                   {contributor.login}
                 </Typography>
-                <Typography variant="body2" sx={{ mt: 1, color: textColor }}>
+                <Typography variant="body2" color="textSecondary">
                   {contributor.contributions} Contributions
                 </Typography>
-                <Typography variant="body2" sx={{ mt: 2, color: textColor }}>
+                <Typography variant="body2" sx={{ mt: 2 }}>
                   Thank you for your valuable contributions to our community!
                 </Typography>
                 <Box sx={{ mt: 2 }}>
@@ -134,7 +119,9 @@ const ContributorsPage = () => {
                     sx={{
                       backgroundColor: "#333333",
                       color: "#FFFFFF",
-                      "&:hover": { backgroundColor: "#555555" },
+                      "&:hover": {
+                        backgroundColor: "#555555", // Custom hover color
+                      },
                     }}
                   >
                     GitHub Profile

From 1ea83d2c71bfd248ac41c28968490d7a4a0faa51 Mon Sep 17 00:00:00 2001
From: Trailblazer09 <akaaj15o@gmail.com>
Date: Sat, 26 Jul 2025 07:40:28 +0530
Subject: [PATCH 13/16] reversed the code to original

---
 src/pages/Home/Home.tsx | 237 ++++++++--------------------------------
 1 file changed, 44 insertions(+), 193 deletions(-)

diff --git a/src/pages/Home/Home.tsx b/src/pages/Home/Home.tsx
index 837bf2b..149d052 100644
--- a/src/pages/Home/Home.tsx
+++ b/src/pages/Home/Home.tsx
@@ -1,7 +1,4 @@
 import React, { useState } from "react";
-import { useEffect } from "react";
-import { useTheme } from "../../hooks/useTheme";
-
 import {
   Container,
   Box,
@@ -25,13 +22,13 @@ import {
   FormControl,
   InputLabel,
 } from "@mui/material";
-
 import { useGitHubAuth } from "../../hooks/useGitHubAuth";
 import { useGitHubData } from "../../hooks/useGitHubData";
 import { usePagination } from "../../hooks/usePagination";
 
 const ROWS_PER_PAGE = 10;
 
+// Define the shape of the data received from GitHub
 interface GitHubItem {
   id: number;
   title: string;
@@ -42,15 +39,8 @@ interface GitHubItem {
   html_url: string;
 }
 
-const Home: React.FC<{ theme: string }> = ({ theme }) => 
-  
-  
-  {
-  
-  useEffect(() => {
-  console.log("Theme updated in Home:", theme);
-}, [theme]);
-
+const Home: React.FC = () => {
+  // Hooks for managing user authentication
   const {
     username,
     setUsername,
@@ -59,7 +49,6 @@ const Home: React.FC<{ theme: string }> = ({ theme }) =>
     error: authError,
     getOctokit,
   } = useGitHubAuth();
-
   const octokit = getOctokit();
   const {
     issues,
@@ -68,10 +57,10 @@ const Home: React.FC<{ theme: string }> = ({ theme }) =>
     error: dataError,
     fetchData,
   } = useGitHubData(octokit);
-
   const { page, itemsPerPage, handleChangePage, paginateData } =
     usePagination(ROWS_PER_PAGE);
 
+  // State for various filters and tabs
   const [tab, setTab] = useState(0);
   const [issueFilter, setIssueFilter] = useState<string>("all");
   const [prFilter, setPrFilter] = useState<string>("all");
@@ -80,15 +69,22 @@ const Home: React.FC<{ theme: string }> = ({ theme }) =>
   const [startDate, setStartDate] = useState<string>("");
   const [endDate, setEndDate] = useState<string>("");
 
+  // Handle data submission to fetch GitHub data
   const handleSubmit = (e: React.FormEvent<HTMLFormElement>): void => {
     e.preventDefault();
     fetchData(username);
   };
 
-  const formatDate = (dateString: string): string =>
-    new Date(dateString).toLocaleDateString();
+  // Format date strings into a readable format
+  const formatDate = (dateString: string): string => {
+    return new Date(dateString).toLocaleDateString();
+  };
 
-  const filterData = (data: GitHubItem[], filterType: string): GitHubItem[] => {
+  // Filter data based on selected criteria
+  const filterData = (
+    data: GitHubItem[],
+    filterType: string
+  ): GitHubItem[] => {
     let filteredData = [...data];
 
     if (filterType === "open" || filterType === "closed" || filterType === "merged") {
@@ -98,19 +94,16 @@ const Home: React.FC<{ theme: string }> = ({ theme }) =>
           : item.state === filterType
       );
     }
-
     if (searchTitle) {
       filteredData = filteredData.filter((item) =>
         item.title.toLowerCase().includes(searchTitle.toLowerCase())
       );
     }
-
     if (selectedRepo) {
       filteredData = filteredData.filter((item) =>
         item.repository_url.includes(selectedRepo)
       );
     }
-
     if (startDate) {
       filteredData = filteredData.filter(
         (item) => new Date(item.created_at) >= new Date(startDate)
@@ -121,38 +114,29 @@ const Home: React.FC<{ theme: string }> = ({ theme }) =>
         (item) => new Date(item.created_at) <= new Date(endDate)
       );
     }
-
     return filteredData;
   };
 
+  // Determine the current tab's data
   const currentData =
     tab === 0 ? filterData(issues, issueFilter) : filterData(prs, prFilter);
 
+  // Paginate the filtered data
   const displayData = paginateData(currentData);
 
+  // Main UI rendering
   return (
     <Container
       maxWidth="lg"
       sx={{
-        backgroundColor: theme === "dark" ? "#121212" : "#fff",
-        color: theme === "dark" ? "#eee" : "#111",
         display: "flex",
         flexDirection: "column",
         minHeight: "78vh",
         mt: 4,
       }}
     >
-      <Paper
-        elevation={1}
-        sx={{
-          p: 2,
-          mb: 4,
-          backgroundColor: theme === "dark" ? "#1e1e1e" : "#f5f5f5",
-          color: theme === "dark" ? "#e0e0e0" : "#000",
-          border: "1px solid",
-          borderColor: theme === "dark" ? "#444" : "#ccc",
-        }}
-      >
+      {/* Authentication Form */}
+      <Paper elevation={1} sx={{ p: 2, mb: 4 }}>
         <form onSubmit={handleSubmit}>
           <Box sx={{ display: "flex", gap: 2, flexWrap: "wrap" }}>
             <TextField
@@ -160,82 +144,36 @@ const Home: React.FC<{ theme: string }> = ({ theme }) =>
               value={username}
               onChange={(e) => setUsername(e.target.value)}
               required
-              sx={{
-                flex: 1,
-                "& .MuiOutlinedInput-root": {
-                  backgroundColor: theme === "dark" ? "#2a2a2a" : "#fff",
-                  color: theme === "dark" ? "#eee" : "#000",
-                },
-                "& .MuiInputLabel-root": {
-                  color: theme === "dark" ? "#ccc" : "#555",
-                },
-              }}
+              sx={{ flex: 1 }}
             />
             <TextField
               label="Personal Access Token"
-              type="password"
               value={token}
               onChange={(e) => setToken(e.target.value)}
+              type="password"
               required
-              sx={{
-                flex: 1,
-                "& .MuiOutlinedInput-root": {
-                  backgroundColor: theme === "dark" ? "#2a2a2a" : "#fff",
-                  color: theme === "dark" ? "#eee" : "#000",
-                },
-                "& .MuiInputLabel-root": {
-                  color: theme === "dark" ? "#ccc" : "#555",
-                },
-              }}
+              sx={{ flex: 1 }}
             />
-            <Button
-              type="submit"
-              variant="contained"
-              sx={{
-                minWidth: "120px",
-                backgroundColor: theme === "dark" ? "#1976d2" : "#1976d2",
-                color: "#fff",
-                "&:hover": {
-                  backgroundColor: theme === "dark" ? "#1565c0" : "#1565c0",
-                },
-              }}
-            >
+            <Button type="submit" variant="contained" sx={{ minWidth: "120px" }}>
               Fetch Data
             </Button>
           </Box>
         </form>
       </Paper>
 
+      {/* Filters Section */}
       <Box sx={{ mb: 2, display: "flex", flexWrap: "wrap", gap: 2 }}>
         <TextField
           label="Search Title"
           value={searchTitle}
           onChange={(e) => setSearchTitle(e.target.value)}
-          sx={{
-            minWidth: 200,
-            "& .MuiOutlinedInput-root": {
-              backgroundColor: theme === "dark" ? "#2a2a2a" : "#fff",
-              color: theme === "dark" ? "#eee" : "#000",
-            },
-            "& .MuiInputLabel-root": {
-              color: theme === "dark" ? "#ccc" : "#555",
-            },
-          }}
+          sx={{ minWidth: 200 }}
         />
         <TextField
           label="Repository"
           value={selectedRepo}
           onChange={(e) => setSelectedRepo(e.target.value)}
-          sx={{
-            minWidth: 200,
-            "& .MuiOutlinedInput-root": {
-              backgroundColor: theme === "dark" ? "#2a2a2a" : "#fff",
-              color: theme === "dark" ? "#eee" : "#000",
-            },
-            "& .MuiInputLabel-root": {
-              color: theme === "dark" ? "#ccc" : "#555",
-            },
-          }}
+          sx={{ minWidth: 200 }}
         />
         <TextField
           label="Start Date"
@@ -243,16 +181,7 @@ const Home: React.FC<{ theme: string }> = ({ theme }) =>
           value={startDate}
           onChange={(e) => setStartDate(e.target.value)}
           InputLabelProps={{ shrink: true }}
-          sx={{
-            minWidth: 150,
-            "& .MuiOutlinedInput-root": {
-              backgroundColor: theme === "dark" ? "#2a2a2a" : "#fff",
-              color: theme === "dark" ? "#eee" : "#000",
-            },
-            "& .MuiInputLabel-root": {
-              color: theme === "dark" ? "#ccc" : "#555",
-            },
-          }}
+          sx={{ minWidth: 150 }}
         />
         <TextField
           label="End Date"
@@ -260,19 +189,11 @@ const Home: React.FC<{ theme: string }> = ({ theme }) =>
           value={endDate}
           onChange={(e) => setEndDate(e.target.value)}
           InputLabelProps={{ shrink: true }}
-          sx={{
-            minWidth: 150,
-            "& .MuiOutlinedInput-root": {
-              backgroundColor: theme === "dark" ? "#2a2a2a" : "#fff",
-              color: theme === "dark" ? "#eee" : "#000",
-            },
-            "& .MuiInputLabel-root": {
-              color: theme === "dark" ? "#ccc" : "#555",
-            },
-          }}
+          sx={{ minWidth: 150 }}
         />
       </Box>
 
+      {/* Tabs and State Dropdown */}
       <Box
         sx={{
           display: "flex",
@@ -283,32 +204,12 @@ const Home: React.FC<{ theme: string }> = ({ theme }) =>
           gap: 2,
         }}
       >
-               <Tabs
-          value={tab}
-          onChange={(e, newValue) => setTab(newValue)}
-          sx={{
-            flex: 1,
-            "& .MuiTab-root": {
-              color: theme === "dark" ? "#ddd" : "#111",
-            },
-            "& .MuiTabs-indicator": {
-              backgroundColor: theme === "dark" ? "#90caf9" : "#1976d2",
-            },
-          }}
-        >
+        <Tabs value={tab} onChange={(e, newValue) => setTab(newValue)} sx={{ flex: 1 }}>
           <Tab label={`Issues (${filterData(issues, issueFilter).length})`} />
           <Tab label={`Pull Requests (${filterData(prs, prFilter).length})`} />
         </Tabs>
-
         <FormControl sx={{ minWidth: 150 }}>
-          <InputLabel
-            sx={{
-              fontSize: "14px",
-              color: theme === "dark" ? "#ccc" : "#555",
-            }}
-          >
-            State
-          </InputLabel>
+          <InputLabel sx={{ fontSize: "14px", color: "#555" }}>State</InputLabel>
           <Select
             value={tab === 0 ? issueFilter : prFilter}
             onChange={(e) =>
@@ -318,11 +219,11 @@ const Home: React.FC<{ theme: string }> = ({ theme }) =>
             }
             label="State"
             sx={{
-              backgroundColor: theme === "dark" ? "#2a2a2a" : "#fff",
-              color: theme === "dark" ? "#eee" : "#000",
+              backgroundColor: "#fff",
+              borderRadius: "4px",
               "& .MuiSelect-select": { padding: "10px" },
-              "& .MuiOutlinedInput-notchedOutline": {
-                borderColor: theme === "dark" ? "#90caf9" : "#1976d2",
+              "&.Mui-focused .MuiOutlinedInput-notchedOutline": {
+                borderColor: "#1976d2",
               },
             }}
           >
@@ -334,68 +235,29 @@ const Home: React.FC<{ theme: string }> = ({ theme }) =>
         </FormControl>
       </Box>
 
+      {/* Error Alert */}
       {(authError || dataError) && (
-        <Alert
-          severity="error"
-          sx={{
-            mb: 3,
-            backgroundColor: theme === "dark" ? "#3c1a1a" : "#fff1f1",
-            color: theme === "dark" ? "#ffdddd" : "#990000",
-          }}
-        >
+        <Alert severity="error" sx={{ mb: 3 }}>
           {authError || dataError}
         </Alert>
       )}
 
+      {/* Table Section */}
       {loading ? (
         <Box display="flex" justifyContent="center" my={4}>
-          <CircularProgress color="primary" />
+          <CircularProgress />
         </Box>
       ) : (
         <Box>
           <Box sx={{ maxHeight: "400px", overflowY: "auto", display: "block" }}>
-            <TableContainer
-              component={Paper}
-              sx={{
-                backgroundColor: theme === "dark" ? "#1e1e1e" : "#fff",
-                color: theme === "dark" ? "#eee" : "#111",
-              }}
-            >
+            <TableContainer component={Paper}>
               <Table>
                 <TableHead>
                   <TableRow>
-                    <TableCell
-                      sx={{
-                        textAlign: "left",
-                        color: theme === "dark" ? "#90caf9" : "#1976d2",
-                      }}
-                    >
-                      Title
-                    </TableCell>
-                    <TableCell
-                      sx={{
-                        textAlign: "center",
-                        color: theme === "dark" ? "#90caf9" : "#1976d2",
-                      }}
-                    >
-                      Repository
-                    </TableCell>
-                    <TableCell
-                      sx={{
-                        textAlign: "center",
-                        color: theme === "dark" ? "#90caf9" : "#1976d2",
-                      }}
-                    >
-                      State
-                    </TableCell>
-                    <TableCell
-                      sx={{
-                        textAlign: "left",
-                        color: theme === "dark" ? "#90caf9" : "#1976d2",
-                      }}
-                    >
-                      Created
-                    </TableCell>
+                    <TableCell sx={{ textAlign: "left" }}>Title</TableCell>
+                    <TableCell sx={{ textAlign: "center" }}>Repository</TableCell>
+                    <TableCell sx={{ textAlign: "center" }}>State</TableCell>
+                    <TableCell sx={{ textAlign: "left" }}>Created</TableCell>
                   </TableRow>
                 </TableHead>
                 <TableBody>
@@ -406,13 +268,6 @@ const Home: React.FC<{ theme: string }> = ({ theme }) =>
                           href={item.html_url}
                           target="_blank"
                           rel="noopener noreferrer"
-                          sx={{
-                            color: theme === "dark" ? "#82b1ff" : "#1976d2",
-                            textDecoration: "none",
-                            "&:hover": {
-                              textDecoration: "underline",
-                            },
-                          }}
                         >
                           {item.title}
                         </Link>
@@ -437,10 +292,6 @@ const Home: React.FC<{ theme: string }> = ({ theme }) =>
                 onPageChange={handleChangePage}
                 rowsPerPage={itemsPerPage}
                 rowsPerPageOptions={[5]}
-                sx={{
-                  backgroundColor: theme === "dark" ? "#121212" : "#f9f9f9",
-                  color: theme === "dark" ? "#eee" : "#111",
-                }}
               />
             </TableContainer>
           </Box>

From b356bf84168e6027e347cf5d04f6cb85e87273f4 Mon Sep 17 00:00:00 2001
From: Trailblazer09 <akaaj15o@gmail.com>
Date: Sat, 26 Jul 2025 07:45:44 +0530
Subject: [PATCH 14/16] reversed the code to original

---
 src/hooks/useTheme.ts | 31 -------------------------------
 src/theme.ts          | 21 ---------------------
 tailwind.config.js    | 16 +++++++++-------
 3 files changed, 9 insertions(+), 59 deletions(-)
 delete mode 100644 src/hooks/useTheme.ts
 delete mode 100644 src/theme.ts

diff --git a/src/hooks/useTheme.ts b/src/hooks/useTheme.ts
deleted file mode 100644
index 550859d..0000000
--- a/src/hooks/useTheme.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-import { useEffect, useState } from "react";
-
-type ThemeMode = "light" | "dark";
-
-const getInitialTheme = (): ThemeMode => {
-  const stored = localStorage.getItem("theme");
-  if (stored === "light" || stored === "dark") {
-    return stored;
-  }
-  return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
-};
-
-export const useTheme = () => {
-  const [theme, setTheme] = useState<ThemeMode>(getInitialTheme);
-
-  useEffect(() => {
-    const root = document.documentElement;
-
-    if (theme === "dark") {
-      root.classList.add("dark");
-      root.classList.remove("light");
-    } else {
-      root.classList.add("light");
-      root.classList.remove("dark");
-    }
-
-    localStorage.setItem("theme", theme);
-  }, [theme]);
-
-  return { theme, setTheme };
-};
\ No newline at end of file
diff --git a/src/theme.ts b/src/theme.ts
deleted file mode 100644
index b46cc3f..0000000
--- a/src/theme.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-// src/theme.ts
-import { createTheme } from "@mui/material/styles";
-
-export const getMuiTheme = (mode: "light" | "dark") =>
-  createTheme({
-    palette: {
-      mode,
-      ...(mode === "dark"
-        ? {
-            background: {
-              default: "#121212",
-              paper: "#1e1e1e",
-            },
-            text: {
-              primary: "#ffffff",
-              secondary: "#aaaaaa",
-            },
-          }
-        : {}),
-    },
-  });
\ No newline at end of file
diff --git a/tailwind.config.js b/tailwind.config.js
index 9946a97..004cc72 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,9 +1,11 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-  darkMode: "class", // ✅ enables manual theme toggling via class
-  content: ["./index.html", "./src/**/*.{js,jsx,ts,tsx}"],
-  theme: {
-    extend: {},
-  },
-  plugins: [],
-};
+    content: [
+      "./index.html",                      // For any HTML files in the root
+      "./src/**/*.{js,jsx,ts,tsx}",         // For all JS/JSX/TS/TSX files inside src folder
+    ],
+    theme: {
+      extend: {},
+    },
+    plugins: [],
+  }
\ No newline at end of file

From 7333138cd82d094b692dfd1c3d060093a70c456f Mon Sep 17 00:00:00 2001
From: Trailblazer09 <akaaj15o@gmail.com>
Date: Sat, 26 Jul 2025 20:55:12 +0530
Subject: [PATCH 15/16] added theme switch

---
 src/App.tsx                             |  24 +--
 src/Routes/Login/Login.tsx              | 166 +++++++++++----
 src/ThemeContext.tsx                    |  38 ++++
 src/components/Navbar.tsx               |  20 +-
 src/main.tsx                            |   3 +
 src/pages/About/About.tsx               |  35 ++--
 src/pages/Contact/Contact.tsx           | 256 +++++++++++++++++-------
 src/pages/Contributors/Contributors.tsx | 144 +++++++------
 src/pages/Home/Home.tsx                 |  68 +++----
 tailwind.config.js                      |   4 +-
 10 files changed, 505 insertions(+), 253 deletions(-)
 create mode 100644 src/ThemeContext.tsx

diff --git a/src/App.tsx b/src/App.tsx
index 99170fd..e4c1995 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,23 +1,22 @@
-
 import Navbar from "./components/Navbar";
 import Footer from "./components/Footer";
-import ScrollProgressBar from './components/ScrollProgressBar';
+import ScrollProgressBar from "./components/ScrollProgressBar";
 import { Toaster } from "react-hot-toast";
-
 import Router from "./Routes/Router";
+import ThemeWrapper from "./ThemeContext"; // ✅ import your wrapper
 
 function App() {
   return (
-
+    <ThemeWrapper>
       <div className="relative flex flex-col min-h-screen">
-        <ScrollProgressBar/>
+        <ScrollProgressBar />
 
         {/* Navbar */}
         <Navbar />
 
         {/* Main content */}
-        <main className="flex-grow bg-gray-50 flex justify-center items-center">
-          <Router/>
+        <main className="flex-grow bg-gray-50 dark:bg-gray-900 flex justify-center items-center">
+          <Router />
         </main>
 
         {/* Footer */}
@@ -28,23 +27,20 @@ function App() {
           reverseOrder={false}
           gutter={8}
           containerClassName="mt-12"
-          containerStyle={{}}
           toastOptions={{
-            className: 'bg-white',
+            className: "bg-white dark:bg-gray-800 text-black dark:text-white",
             duration: 5000,
-            //removeDelay: 1000,
-
             success: {
               duration: 3000,
               iconTheme: {
-                primary: 'green',
-                secondary: 'white',
+                primary: "green",
+                secondary: "white",
               },
             },
           }}
         />
       </div>
-
+    </ThemeWrapper>
   );
 }
 
diff --git a/src/Routes/Login/Login.tsx b/src/Routes/Login/Login.tsx
index 28081f4..9cd94dd 100644
--- a/src/Routes/Login/Login.tsx
+++ b/src/Routes/Login/Login.tsx
@@ -1,7 +1,9 @@
 import React, { useState, ChangeEvent, FormEvent } from "react";
 import axios from "axios";
-import { useNavigate } from "react-router-dom"; // Import the hook for navigation
+import { useNavigate } from "react-router-dom";
+
 const backendUrl = import.meta.env.VITE_BACKEND_URL;
+
 interface LoginFormData {
   email: string;
   password: string;
@@ -10,68 +12,148 @@ interface LoginFormData {
 const Login: React.FC = () => {
   const [formData, setFormData] = useState<LoginFormData>({ email: "", password: "" });
   const [message, setMessage] = useState<string>("");
-  
+  const [isLoading, setIsLoading] = useState<boolean>(false);
+
+  const navigate = useNavigate();
 
-  const navigate = useNavigate(); // Initialize the navigate hook
   const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
     const { name, value } = e.target;
     setFormData({ ...formData, [name]: value });
   };
 
-
-  
   const handleSubmit = async (e: FormEvent) => {
     e.preventDefault();
-    try {
-      const response = await axios.post(`${backendUrl}/api/auth/login`,
-        formData,
+    setIsLoading(true);
 
-      );
-      setMessage(response.data.message); // Show success message from backend
+    try {
+      const response = await axios.post(`${backendUrl}/api/auth/login`, formData);
+      setMessage(response.data.message);
 
-      // Navigate to /home if login is successful
       if (response.data.message === 'Login successful') {
         navigate("/home");
       }
     } catch (error: any) {
       setMessage(error.response?.data?.message || "Something went wrong");
+    } finally {
+      setIsLoading(false);
     }
   };
 
   return (
-    <div className="max-w-md mt-12 mx-auto bg-white p-8 rounded-lg shadow-md">
-      <h2 className="text-2xl font-semibold text-center mb-6">Login</h2>
-      <form onSubmit={handleSubmit} className="space-y-4">
-        <div>
-          <input
-            type="email"
-            name="email"
-            placeholder="Email"
-            value={formData.email}
-            onChange={handleChange}
-            required
-            className="w-full p-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
-          />
+    <div className="min-h-screen h-full w-full bg-gradient-to-br from-slate-900 via-purple-900 to-slate-900 flex items-center justify-center relative overflow-hidden">
+      {/* Enhanced animated background elements */}
+      <div className="absolute inset-0">
+        <div className="absolute -top-40 -right-40 w-96 h-96 bg-purple-500 rounded-full mix-blend-multiply filter blur-3xl opacity-30 animate-pulse"></div>
+        <div className="absolute -bottom-40 -left-40 w-96 h-96 bg-blue-500 rounded-full mix-blend-multiply filter blur-3xl opacity-30 animate-pulse"></div>
+        <div className="absolute top-40 left-40 w-96 h-96 bg-pink-500 rounded-full mix-blend-multiply filter blur-3xl opacity-30 animate-pulse"></div>
+        <div className="absolute top-1/2 right-1/4 w-64 h-64 bg-indigo-500 rounded-full mix-blend-multiply filter blur-2xl opacity-20 animate-pulse delay-1000"></div>
+      </div>
+
+      <div className="relative w-full max-w-md px-6">
+        {/* Enhanced GitHub Logo/Icon */}
+        <div className="text-center mb-10">
+          <div className="inline-flex items-center justify-center w-20 h-20 bg-white rounded-3xl mb-6 shadow-2xl transform hover:scale-105 transition-transform duration-300 overflow-hidden">
+  <img src="/crl-icon.png" alt="Logo" className="w-14 h-14 object-contain" />
+</div>
+
+          <h1 className="text-4xl font-bold bg-gradient-to-r from-purple-300 via-pink-300 to-indigo-300 bg-clip-text text-transparent mb-2">
+            GitHubTracker
+          </h1>
+          <p className="text-slate-300 text-lg font-medium">Track your GitHub journey</p>
         </div>
-        <div>
-          <input
-            type="password"
-            name="password"
-            placeholder="Password"
-            value={formData.password}
-            onChange={handleChange}
-            required
-            className="w-full p-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
-          />
+
+        {/* Login Form */}
+        <div className="bg-white/10 backdrop-blur-xl rounded-3xl p-10 shadow-2xl border border-white/20">
+          <h2 className="text-2xl font-bold text-white text-center mb-8">Welcome Back</h2>
+
+          <form onSubmit={handleSubmit} className="space-y-6">
+            <div className="relative">
+              <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+                <svg className="w-5 h-5 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M16 12a4 4 0 10-8 0 4 4 0 008 0zm0 0v1.5a2.5 2.5 0 005 0V12a9 9 0 10-9 9m4.5-1.206a8.959 8.959 0 01-4.5 1.207"/>
+                </svg>
+              </div>
+              <input
+                type="email"
+                name="email"
+                placeholder="Enter your email"
+                value={formData.email}
+                onChange={handleChange}
+                autoComplete="username"
+                required
+                className="w-full pl-10 pr-4 py-4 bg-white/5 border border-white/10 rounded-2xl text-white placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent transition-all duration-300 backdrop-blur-sm"
+              />
+            </div>
+
+            <div className="relative">
+              <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+                <svg className="w-5 h-5 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/>
+                </svg>
+              </div>
+              <input
+                type="password"
+                name="password"
+                autoComplete="current-password"
+                placeholder="Enter your password"
+                value={formData.password}
+                onChange={handleChange}
+                required
+                className="w-full pl-10 pr-4 py-4 bg-white/5 border border-white/10 rounded-2xl text-white placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent transition-all duration-300 backdrop-blur-sm"
+              />
+            </div>
+
+            <button
+              type="submit"
+              disabled={isLoading}
+              className="w-full bg-gradient-to-r from-purple-600 via-pink-600 to-indigo-600 text-white py-4 px-6 rounded-2xl font-semibold hover:from-purple-700 hover:via-pink-700 hover:to-indigo-700 focus:outline-none focus:ring-4 focus:ring-purple-500/50 transform hover:scale-[1.02] transition-all duration-300 shadow-xl disabled:opacity-50 disabled:cursor-not-allowed disabled:transform-none"
+            >
+              {isLoading ? (
+                <div className="flex items-center justify-center">
+                  <svg className="animate-spin -ml-1 mr-3 h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+                    <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
+                    <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+                  </svg>
+                  Signing in...
+                </div>
+              ) : (
+                "Sign In"
+              )}
+            </button>
+          </form>
+
+          {/* Message Display */}
+          {message && (
+            <div className={`mt-6 p-4 rounded-2xl text-center text-sm font-medium ${
+              message === 'Login successful'
+                ? 'bg-green-500/20 text-green-300 border border-green-500/30'
+                : 'bg-red-500/20 text-red-300 border border-red-500/30'
+            }`}>
+              {message}
+            </div>
+          )}
+
+          {/* Additional Links */}
+          <div className="mt-8 text-center">
+            <a href="#" className="text-slate-400 hover:text-purple-400 text-sm transition-colors duration-300">
+              Forgot your password?
+            </a>
+          </div>
+        </div>
+
+        {/* Footer */}
+        <div className="text-center mt-8 pb-8">
+          <p className="text-slate-500 text-sm">
+            Don't have an account?
+            <a href="#" className="text-purple-400 hover:text-purple-300 ml-1 transition-colors duration-300">
+              Sign up here
+            </a>
+          </p>
         </div>
-        <button
-          type="submit"
-          className="w-full bg-blue-500 text-white py-3 rounded-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500"
-        >
-          Login
-        </button>
-      </form>
-      {message && <p className="text-center text-red-500 mt-4">{message}</p>}
+      </div>
+
+      {/* Additional background coverage */}
+      <div className="absolute bottom-0 left-0 w-full h-20 bg-gradient-to-t from-slate-900 to-transparent"></div>
     </div>
   );
 };
diff --git a/src/ThemeContext.tsx b/src/ThemeContext.tsx
new file mode 100644
index 0000000..3cffe22
--- /dev/null
+++ b/src/ThemeContext.tsx
@@ -0,0 +1,38 @@
+// src/ThemeContext.tsx
+import React, { createContext, useMemo, useState, useEffect, ReactNode } from 'react';
+import { createTheme, ThemeProvider, Theme } from '@mui/material/styles';
+
+interface ThemeContextType {
+  mode: 'light' | 'dark';
+  toggleTheme: () => void;
+}
+
+export const ThemeContext = createContext<ThemeContextType | null>(null);
+
+const ThemeWrapper = ({ children }: { children: ReactNode }) => {
+  const [mode, setMode] = useState<'light' | 'dark'>('light');
+
+  useEffect(() => {
+    if (mode === 'dark') {
+      document.documentElement.classList.add('dark');
+    } else {
+      document.documentElement.classList.remove('dark');
+    }
+  }, [mode]);
+
+  const toggleTheme = () => {
+    setMode(prev => (prev === 'light' ? 'dark' : 'light'));
+  };
+
+  const muiTheme: Theme = useMemo(() => createTheme({ palette: { mode } }), [mode]);
+
+  return (
+    <ThemeContext.Provider value={{ mode, toggleTheme }}>
+      <ThemeProvider theme={muiTheme}>
+        {children}
+      </ThemeProvider>
+    </ThemeContext.Provider>
+  );
+};
+
+export default ThemeWrapper;
\ No newline at end of file
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
index 1df98eb..7b62f15 100644
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@@ -1,8 +1,14 @@
-import { Link } from 'react-router-dom';
-import { useState } from 'react';
+import { Link } from "react-router-dom";
+import { useState } from "react";
+import { ThemeContext } from "../ThemeContext";
+import { useContext } from "react";
 
 const Navbar: React.FC = () => {
   const [isOpen, setIsOpen] = useState<boolean>(false);
+  const themeContext = useContext(ThemeContext);
+  if (!themeContext) return null;
+
+  const { toggleTheme, mode } = themeContext;
 
   return (
     <nav className="bg-gray-800 text-white shadow-lg">
@@ -41,7 +47,15 @@ const Navbar: React.FC = () => {
           <Link
             to="/login"
             className="text-lg font-medium hover:text-gray-300 transition-all px-2 py-1 border border-transparent hover:border-gray-400 rounded"
-          >Login</Link>
+          >
+            Login
+          </Link>
+          <button
+            onClick={toggleTheme}
+            className="text-sm font-semibold px-3 py-1 rounded border border-gray-500 hover:text-gray-300 hover:border-gray-300 transition duration-200"
+          >
+            {mode === "dark" ? "🌞 Light" : "🌙 Dark"}
+          </button>
         </div>
 
         {/* Mobile Menu Button */}
diff --git a/src/main.tsx b/src/main.tsx
index c2d6770..699b94e 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -3,11 +3,14 @@ import { createRoot } from "react-dom/client";
 import App from "./App.tsx";
 import "./index.css";
 import { BrowserRouter } from "react-router-dom";
+import ThemeWrapper from "./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/About/About.tsx b/src/pages/About/About.tsx
index af2faa3..d1f2a0e 100644
--- a/src/pages/About/About.tsx
+++ b/src/pages/About/About.tsx
@@ -2,37 +2,48 @@ const About = () => {
   return (
     <div className="about-container">
       {/* Hero Section */}
-      <section className="hero bg-gray-800 text-white py-12">
+     <section className="hero bg-gray-100 dark:bg-gray-900 text-gray-900 dark:text-gray-100 py-12">
         <h1 className="text-4xl font-bold text-center">About Us</h1>
-        <p className="text-lg text-center mt-4">Welcome to GitHub Tracker! We simplify issue tracking for developers.</p>
+        <p className="text-lg text-center mt-4">
+          Welcome to GitHub Tracker! We simplify issue tracking for developers.
+        </p>
       </section>
 
       {/* Mission Section */}
-      <section className="mission py-12">
+      <section className="mission py-12 text-gray-800 dark:text-gray-100">
         <h2 className="text-3xl font-semibold text-center">Our Mission</h2>
         <p className="text-lg text-center mt-4 max-w-3xl mx-auto">
-          We aim to provide an efficient and user-friendly way to track GitHub issues and pull requests. Our goal is to make it easy for developers to stay organized and focused on their projects without getting bogged down by the details.
+          We aim to provide an efficient and user-friendly way to track GitHub
+          issues and pull requests. Our goal is to make it easy for developers to
+          stay organized and focused on their projects without getting bogged down
+          by the details.
         </p>
       </section>
 
       {/* Features Section */}
-      <section className="features bg-gray-100 py-12">
+      <section className="features bg-gray-100 dark:bg-gray-800 py-12 text-gray-800 dark:text-gray-100">
         <h2 className="text-3xl font-semibold text-center">What We Do</h2>
-        <div className="flex justify-around mt-8">
-          <div className="feature-item text-center">
+        <div className="flex justify-around mt-8 flex-wrap gap-8">
+          <div className="feature-item text-center max-w-xs">
             <div className="feature-icon text-4xl">🔍</div>
             <h3 className="font-semibold mt-4">Simple Issue Tracking</h3>
-            <p className="text-lg mt-2">Track your GitHub issues seamlessly with intuitive filters and search options.</p>
+            <p className="text-lg mt-2 dark:text-gray-300">
+              Track your GitHub issues seamlessly with intuitive filters and search options.
+            </p>
           </div>
-          <div className="feature-item text-center">
+          <div className="feature-item text-center max-w-xs">
             <div className="feature-icon text-4xl">👥</div>
             <h3 className="font-semibold mt-4">Team Collaboration</h3>
-            <p className="text-lg mt-2">Collaborate with your team in real-time, manage issues and pull requests effectively.</p>
+            <p className="text-lg mt-2 dark:text-gray-300">
+              Collaborate with your team in real-time, manage issues and pull requests effectively.
+            </p>
           </div>
-          <div className="feature-item text-center">
+          <div className="feature-item text-center max-w-xs">
             <div className="feature-icon text-4xl">⚙️</div>
             <h3 className="font-semibold mt-4">Customizable Settings</h3>
-            <p className="text-lg mt-2">Customize your issue tracking workflow to match your team's needs.</p>
+            <p className="text-lg mt-2 dark:text-gray-300">
+              Customize your issue tracking workflow to match your team's needs.
+            </p>
           </div>
         </div>
       </section>
diff --git a/src/pages/Contact/Contact.tsx b/src/pages/Contact/Contact.tsx
index 671bc72..adc262d 100644
--- a/src/pages/Contact/Contact.tsx
+++ b/src/pages/Contact/Contact.tsx
@@ -1,86 +1,203 @@
-import { FormEvent, useState } from 'react';
+import { useState } from 'react';
+import { Github, Mail, Phone, Send, X, CheckCircle } from 'lucide-react';
 
 function Contact() {
-  const [showPopup, setShowPopup] = useState<boolean>(false); // State to control popup visibility
-  // Handle form submission
-  const handleSubmit = (e: FormEvent<HTMLFormElement>) => {
-    e.preventDefault();
-    setShowPopup(true); // Show the popup after submission
+  const [showPopup, setShowPopup] = useState(false);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  const handleSubmit = async () => {
+    setIsSubmitting(true);
+    
+    // Simulate API call
+    await new Promise(resolve => setTimeout(resolve, 1500));
+    
+    setIsSubmitting(false);
+    setShowPopup(true);
+
+    // Auto-close popup after 5 seconds
+    setTimeout(() => {
+      setShowPopup(false);
+    }, 5000);
   };
-  // Handle closing the popup
+
   const handleClosePopup = () => {
-    setShowPopup(false); // Hide the popup
+    setShowPopup(false);
   };
 
-
-
   return (
-    <div className="container mx-auto p-6 max-w-4xl">
-      <h1 className="text-4xl font-semibold text-center mb-6">Contact Us</h1>
-      
-      {/* Contact Methods */}
-      <section className="contact-methods grid grid-cols-1 sm:grid-cols-2 gap-8 mb-8">
-        <div className="contact-method bg-gray-50 p-6 rounded-lg shadow-md">
-          <strong className="text-xl">📞 Phone</strong>
-          <p className="mt-2 text-gray-600">(123) 456-7890</p>
-        </div>
-        <div className="contact-method bg-gray-50 p-6 rounded-lg shadow-md">
-          <strong className="text-xl">✉️ Email</strong>
-          <p className="mt-2 text-gray-600">contact@company.com</p>
-        </div>
-      </section>
-
-      {/* Contact Form */}
-      <form className="space-y-6" onSubmit={handleSubmit}>
-        <div>
-          <label className="block text-sm font-medium text-gray-700">Name</label>
-          <input
-            type="text"
-            className="mt-1 p-3 w-full border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
-            placeholder="Your Name"
-            required
-          />
-        </div>
-        <div>
-          <label className="block text-sm font-medium text-gray-700">Email</label>
-          <input
-            type="email"
-            className="mt-1 p-3 w-full border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
-            placeholder="Your Email"
-            required
-          />
-        </div>
-        <div>
-          <label className="block text-sm font-medium text-gray-700">Message</label>
-          <textarea
-            className="mt-1 p-3 w-full border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
-            rows={4}
-            placeholder="Your Message"
-            required
-          ></textarea>
-        </div>
-        <div>
-          <button
-            type="submit"
-            className="mt-4 px-6 py-3 w-full bg-blue-600 text-white rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500"
-          >
-            Send Message
-          </button>
+    <div className="h-screen w-screen bg-gradient-to-br from-slate-900 via-purple-900 to-slate-900 relative overflow-hidden">
+      {/* Animated background elements */}
+      <div className="absolute inset-0">
+        <div className="absolute top-20 left-20 w-72 h-72 bg-purple-500 rounded-full mix-blend-multiply filter blur-xl opacity-20 animate-pulse"></div>
+        <div className="absolute top-40 right-20 w-72 h-72 bg-blue-500 rounded-full mix-blend-multiply filter blur-xl opacity-20 animate-pulse delay-1000"></div>
+        <div className="absolute -bottom-8 left-1/2 w-72 h-72 bg-pink-500 rounded-full mix-blend-multiply filter blur-xl opacity-20 animate-pulse delay-2000"></div>
+      </div>
+
+      <div className="relative z-10 container mx-auto px-4 py-6 max-w-7xl h-full flex flex-col">
+        {/* Header Section */}
+        <div className="text-center mb-8 flex-shrink-0">
+          <div className="flex justify-center items-center gap-3 mb-4">
+            <div className="inline-flex items-center justify-center w-20 h-20 bg-white rounded-3xl mb-6 shadow-2xl transform hover:scale-105 transition-transform duration-300 overflow-hidden">
+  <img src="/crl-icon.png" alt="Logo" className="w-14 h-14 object-contain" />
+</div>
+            <h1 className="text-6xl font-bold bg-gradient-to-r from-purple-400 to-blue-400 bg-clip-text text-transparent">
+              GitHub Tracker
+            </h1>
+          </div>
+          <p className="text-lg text-gray-300 max-w-2xl mx-auto leading-relaxed">
+            Get in touch with us to discuss your project tracking needs or report any issues
+          </p>
         </div>
-      </form>
 
+        <div className="grid lg:grid-cols-2 gap-8 items-start flex-1 min-h-0">
+          {/* Contact Info Cards */}
+          <div className="space-y-6 h-full flex flex-col">
+            <div className="text-center lg:text-left flex-shrink-0">
+              <h2 className="text-2xl font-bold text-white mb-3">Let's Connect</h2>
+              <p className="text-gray-400 text-base">
+                We're here to help you track and manage your GitHub repositories more effectively
+              </p>
+            </div>
+
+            <div className="space-y-4 flex-1 flex flex-col justify-center">
+              <div className="group bg-white/10 backdrop-blur-lg p-5 rounded-2xl border border-white/20 hover:bg-white/20 transition-all duration-300 hover:scale-105">
+                <div className="flex items-center gap-4">
+                  <div className="p-2.5 bg-gradient-to-r from-blue-500 to-cyan-500 rounded-full group-hover:scale-110 transition-transform duration-300">
+                    <Phone className="w-4 h-4 text-white" />
+                  </div>
+                  <div>
+                    <h3 className="text-base font-semibold text-white">Phone Support</h3>
+                    <p className="text-gray-300 text-sm">(123) 456-7890</p>
+                    <p className="text-xs text-gray-400">Mon-Fri, 9AM-6PM EST</p>
+                  </div>
+                </div>
+              </div>
+
+              <div className="group bg-white/10 backdrop-blur-lg p-5 rounded-2xl border border-white/20 hover:bg-white/20 transition-all duration-300 hover:scale-105">
+                <div className="flex items-center gap-4">
+                  <div className="p-2.5 bg-gradient-to-r from-purple-500 to-pink-500 rounded-full group-hover:scale-110 transition-transform duration-300">
+                    <Mail className="w-4 h-4 text-white" />
+                  </div>
+                  <div>
+                    <h3 className="text-base font-semibold text-white">Email Us</h3>
+                    <p className="text-gray-300 text-sm">support@githubtracker.com</p>
+                    <p className="text-xs text-gray-400">We'll respond within 24 hours</p>
+                  </div>
+                </div>
+              </div>
 
-      {/* Popup Modal */}
+              <div className="group bg-white/10 backdrop-blur-lg p-5 rounded-2xl border border-white/20 hover:bg-white/20 transition-all duration-300 hover:scale-105">
+                <div className="flex items-center gap-4">
+                  <div className="p-2.5 bg-gradient-to-r from-green-500 to-teal-500 rounded-full group-hover:scale-110 transition-transform duration-300">
+                    <Github className="w-4 h-4 text-white" />
+                  </div>
+                  <div>
+                    <h3 className="text-base font-semibold text-white">GitHub Issues</h3>
+                    <p className="text-gray-300 text-sm">github.com/yourorg/githubtracker</p>
+                    <p className="text-xs text-gray-400">Report bugs & feature requests</p>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          {/* Contact Form */}
+          <div className="bg-white/10 backdrop-blur-lg p-6 rounded-3xl border border-white/20 shadow-2xl h-full flex flex-col">
+            <h2 className="text-xl font-bold text-white mb-4 text-center flex-shrink-0">Send us a Message</h2>
+            
+            <div className="space-y-4 flex-1 flex flex-col">
+              <div className="space-y-3 flex-1">
+                <div>
+                  <label className="block text-xs font-medium text-gray-300 mb-1">
+                    Full Name
+                  </label>
+                  <input
+                    type="text"
+                    className="w-full p-3 bg-white/5 border border-white/20 rounded-xl text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent transition-all duration-300 text-sm"
+                    placeholder="Enter your full name"
+                    required
+                  />
+                </div>
+
+                <div>
+                  <label className="block text-xs font-medium text-gray-300 mb-1">
+                    Email Address
+                  </label>
+                  <input
+                    type="email"
+                    className="w-full p-3 bg-white/5 border border-white/20 rounded-xl text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent transition-all duration-300 text-sm"
+                    placeholder="your.email@example.com"
+                    required
+                  />
+                </div>
+
+                <div>
+                  <label className="block text-xs font-medium text-gray-300 mb-1">
+                    Subject
+                  </label>
+                  <select className="w-full p-3 bg-white/5 border border-white/20 rounded-xl text-white focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent transition-all duration-300 text-sm">
+                    <option value="" className="bg-slate-800">Select a topic</option>
+                    <option value="bug" className="bg-slate-800">Bug Report</option>
+                    <option value="feature" className="bg-slate-800">Feature Request</option>
+                    <option value="support" className="bg-slate-800">Technical Support</option>
+                    <option value="general" className="bg-slate-800">General Inquiry</option>
+                  </select>
+                </div>
+
+                <div className="flex-1">
+                  <label className="block text-xs font-medium text-gray-300 mb-1">
+                    Message
+                  </label>
+                  <textarea
+                    className="w-full h-full min-h-[120px] p-3 bg-white/5 border border-white/20 rounded-xl text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent transition-all duration-300 resize-none text-sm"
+                    placeholder="Tell us about your GitHub tracking needs or describe your issue..."
+                    required
+                  ></textarea>
+                </div>
+              </div>
+
+              <button
+                type="button"
+                onClick={handleSubmit}
+                disabled={isSubmitting}
+                className="w-full py-3 px-6 bg-gradient-to-r from-purple-500 to-blue-500 text-white font-semibold rounded-xl hover:from-purple-600 hover:to-blue-600 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 focus:ring-offset-transparent transition-all duration-300 transform hover:scale-105 disabled:opacity-50 disabled:cursor-not-allowed disabled:transform-none flex items-center justify-center gap-3 flex-shrink-0 text-sm"
+              >
+                {isSubmitting ? (
+                  <>
+                    <div className="w-5 h-5 border-2 border-white border-t-transparent rounded-full animate-spin"></div>
+                    Sending...
+                  </>
+                ) : (
+                  <>
+                    <Send className="w-5 h-5" />
+                    Send Message
+                  </>
+                )}
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Success Popup Modal */}
       {showPopup && (
-        <div className="fixed inset-0 flex items-center justify-center bg-gray-800 bg-opacity-50">
-          <div className="bg-white p-8 rounded-lg shadow-lg w-full sm:w-1/3">
-            <h2 className="text-2xl font-semibold mb-4 text-center">Message Sent!</h2>
-            <p className="text-gray-600 text-center mb-6">Your message has been successfully sent. We will get back to you soon.</p>
-            <div className="flex justify-center">
+        <div className="fixed inset-0 flex items-center justify-center bg-black/60 backdrop-blur-sm z-50 p-4">
+          <div className="bg-white/10 backdrop-blur-lg p-8 rounded-3xl border border-white/20 w-full max-w-md transform animate-in zoom-in-95 duration-300">
+            <div className="text-center">
+              <div className="mx-auto w-16 h-16 bg-gradient-to-r from-green-500 to-emerald-500 rounded-full flex items-center justify-center mb-4">
+                <CheckCircle className="w-8 h-8 text-white" />
+              </div>
+              
+              <h2 className="text-2xl font-bold text-white mb-2">Message Sent Successfully!</h2>
+              <p className="text-gray-300 mb-6 leading-relaxed">
+                Thank you for reaching out to GitHub Tracker. We've received your message and will get back to you within 24 hours.
+              </p>
+              
               <button
                 onClick={handleClosePopup}
-                className="px-6 py-3 bg-red-600 text-white rounded-md hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-500"
+                className="inline-flex items-center gap-2 px-6 py-3 bg-gradient-to-r from-red-500 to-pink-500 text-white font-semibold rounded-xl hover:from-red-600 hover:to-pink-600 focus:outline-none focus:ring-2 focus:ring-red-500 transition-all duration-300 transform hover:scale-105"
               >
+                <X className="w-4 h-4" />
                 Close
               </button>
             </div>
@@ -90,4 +207,5 @@ function Contact() {
     </div>
   );
 }
+
 export default Contact;
diff --git a/src/pages/Contributors/Contributors.tsx b/src/pages/Contributors/Contributors.tsx
index e5aef8f..decbe7c 100644
--- a/src/pages/Contributors/Contributors.tsx
+++ b/src/pages/Contributors/Contributors.tsx
@@ -31,13 +31,14 @@ const ContributorsPage = () => {
     const fetchContributors = async () => {
       try {
         const response = await axios.get(
-          "https://api.github.com/repos/mehul-m-prajapati/github_tracker/contributors", {
-            withCredentials : false
+          "https://api.github.com/repos/mehul-m-prajapati/github_tracker/contributors",
+          {
+            withCredentials: false,
           }
         );
         setContributors(response.data);
       } catch (err) {
-        setError("Failed to fetch contributors. Please try again later."+ err);
+        setError("Failed to fetch contributors. Please try again later." + err);
       } finally {
         setLoading(false);
       }
@@ -61,79 +62,72 @@ const ContributorsPage = () => {
     );
   }
   return (
-    <Container
-      sx={{
-        mt: 4,
-        backgroundColor: "#FFFFFF",
-        color: "#333333",
-        minHeight: "100vh",
-        p: 4,
-      }}
-    >
-      <Typography sx={{ pb: 2 }} variant="h4" align="center" gutterBottom>
-        🤝 GitHub Contributors
-      </Typography>
-      <Grid container spacing={4}>
-        {contributors.map((contributor) => (
-          <Grid item xs={12} sm={6} md={4} key={contributor.id}>
-            <Card
-              sx={{
-                textAlign: "center",
-                p: 2,
-                backgroundColor: "#F9F9F9",
-                color: "#333333",
-                borderRadius: "10px",
-                border: "1px solid #E0E0E0", // Border styling
+    <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>
+          🤝 GitHub Contributors
+        </Typography>
+        <Grid container spacing={4}>
+          {contributors.map((contributor) => (
+            <Grid item xs={12} sm={6} md={4} key={contributor.id}>
+              <Card
+                sx={{
+                  textAlign: "center",
+                  p: 2,
+      
+                  borderRadius: "10px",
+                  border: "1px solid #E0E0E0", // Border styling
 
-                boxShadow: "0 4px 10px rgba(0,0,0,0.1)",
-                transition: "transform 0.3s ease-in-out",
-                "&:hover": {
-                  transform: "scale(1.05)", // Zoom effect
-                  boxShadow: "0 8px 15px rgba(0,0,0,0.2)",
-                  borderColor: "#C0C0C0", // Change border color on hover
-                  outlineColor: "#B3B3B3", // Change outline color on hover
-                },
-              }}
-            >
-              <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="textSecondary">
-                  {contributor.contributions} Contributions
-                </Typography>
-                <Typography variant="body2" sx={{ mt: 2 }}>
-                  Thank you for your valuable contributions to our community!
-                </Typography>
-                <Box sx={{ mt: 2 }}>
-                  <Button
-                    variant="contained"
-                    startIcon={<FaGithub />}
-                    href={contributor.html_url}
-                    target="_blank"
-                    sx={{
-                      backgroundColor: "#333333",
-                      color: "#FFFFFF",
-                      "&:hover": {
-                        backgroundColor: "#555555", // Custom hover color
-                      },
-                    }}
-                  >
-                    GitHub Profile
-                  </Button>
-                </Box>
-              </CardContent>
-            </Card>
-          </Grid>
-        ))}
-      </Grid>
-    </Container>
+                  boxShadow: "0 4px 10px rgba(0,0,0,0.1)",
+                  transition: "transform 0.3s ease-in-out",
+                  "&:hover": {
+                    transform: "scale(1.05)", // Zoom effect
+                    boxShadow: "0 8px 15px rgba(0,0,0,0.2)",
+                    borderColor: "#C0C0C0", // Change border color on hover
+                    outlineColor: "#B3B3B3", // Change outline color on hover
+                  },
+                }}
+              >
+                <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="textSecondary">
+                    {contributor.contributions} Contributions
+                  </Typography>
+                  <Typography variant="body2" sx={{ mt: 2 }}>
+                    Thank you for your valuable contributions to our community!
+                  </Typography>
+                  <Box sx={{ mt: 2 }}>
+                    <Button
+                      variant="contained"
+                      startIcon={<FaGithub />}
+                      href={contributor.html_url}
+                      target="_blank"
+                      sx={{
+                        backgroundColor: "#333333",
+                        color: "#FFFFFF",
+                        "&:hover": {
+                          backgroundColor: "#555555", // Custom hover color
+                        },
+                      }}
+                    >
+                      GitHub Profile
+                    </Button>
+                  </Box>
+                </CardContent>
+              </Card>
+            </Grid>
+          ))}
+        </Grid>
+      </Container>
+    </div>
   );
 };
 
-export default ContributorsPage;
\ No newline at end of file
+export default ContributorsPage;
diff --git a/src/pages/Home/Home.tsx b/src/pages/Home/Home.tsx
index 149d052..7645397 100644
--- a/src/pages/Home/Home.tsx
+++ b/src/pages/Home/Home.tsx
@@ -22,13 +22,13 @@ import {
   FormControl,
   InputLabel,
 } from "@mui/material";
+import { useTheme } from "@mui/material/styles";
 import { useGitHubAuth } from "../../hooks/useGitHubAuth";
 import { useGitHubData } from "../../hooks/useGitHubData";
 import { usePagination } from "../../hooks/usePagination";
 
 const ROWS_PER_PAGE = 10;
 
-// Define the shape of the data received from GitHub
 interface GitHubItem {
   id: number;
   title: string;
@@ -40,7 +40,7 @@ interface GitHubItem {
 }
 
 const Home: React.FC = () => {
-  // Hooks for managing user authentication
+  const theme = useTheme();
   const {
     username,
     setUsername,
@@ -60,7 +60,6 @@ const Home: React.FC = () => {
   const { page, itemsPerPage, handleChangePage, paginateData } =
     usePagination(ROWS_PER_PAGE);
 
-  // State for various filters and tabs
   const [tab, setTab] = useState(0);
   const [issueFilter, setIssueFilter] = useState<string>("all");
   const [prFilter, setPrFilter] = useState<string>("all");
@@ -69,62 +68,50 @@ const Home: React.FC = () => {
   const [startDate, setStartDate] = useState<string>("");
   const [endDate, setEndDate] = useState<string>("");
 
-  // Handle data submission to fetch GitHub data
   const handleSubmit = (e: React.FormEvent<HTMLFormElement>): void => {
     e.preventDefault();
     fetchData(username);
   };
 
-  // Format date strings into a readable format
-  const formatDate = (dateString: string): string => {
-    return new Date(dateString).toLocaleDateString();
-  };
-
-  // Filter data based on selected criteria
-  const filterData = (
-    data: GitHubItem[],
-    filterType: string
-  ): GitHubItem[] => {
-    let filteredData = [...data];
+  const formatDate = (dateString: string): string =>
+    new Date(dateString).toLocaleDateString();
 
-    if (filterType === "open" || filterType === "closed" || filterType === "merged") {
-      filteredData = filteredData.filter((item) =>
+  const filterData = (data: GitHubItem[], filterType: string): GitHubItem[] => {
+    let filtered = [...data];
+    if (["open", "closed", "merged"].includes(filterType)) {
+      filtered = filtered.filter((item) =>
         filterType === "merged"
           ? item.pull_request?.merged_at
           : item.state === filterType
       );
     }
     if (searchTitle) {
-      filteredData = filteredData.filter((item) =>
+      filtered = filtered.filter((item) =>
         item.title.toLowerCase().includes(searchTitle.toLowerCase())
       );
     }
     if (selectedRepo) {
-      filteredData = filteredData.filter((item) =>
+      filtered = filtered.filter((item) =>
         item.repository_url.includes(selectedRepo)
       );
     }
     if (startDate) {
-      filteredData = filteredData.filter(
+      filtered = filtered.filter(
         (item) => new Date(item.created_at) >= new Date(startDate)
       );
     }
     if (endDate) {
-      filteredData = filteredData.filter(
+      filtered = filtered.filter(
         (item) => new Date(item.created_at) <= new Date(endDate)
       );
     }
-    return filteredData;
+    return filtered;
   };
 
-  // Determine the current tab's data
   const currentData =
     tab === 0 ? filterData(issues, issueFilter) : filterData(prs, prFilter);
-
-  // Paginate the filtered data
   const displayData = paginateData(currentData);
 
-  // Main UI rendering
   return (
     <Container
       maxWidth="lg"
@@ -133,10 +120,18 @@ const Home: React.FC = () => {
         flexDirection: "column",
         minHeight: "78vh",
         mt: 4,
+        color: theme.palette.text.primary,
       }}
     >
-      {/* Authentication Form */}
-      <Paper elevation={1} sx={{ p: 2, mb: 4 }}>
+      <Paper
+        elevation={1}
+        sx={{
+          p: 2,
+          mb: 4,
+          backgroundColor: theme.palette.background.paper,
+          color: theme.palette.text.primary,
+        }}
+      >
         <form onSubmit={handleSubmit}>
           <Box sx={{ display: "flex", gap: 2, flexWrap: "wrap" }}>
             <TextField
@@ -161,7 +156,6 @@ const Home: React.FC = () => {
         </form>
       </Paper>
 
-      {/* Filters Section */}
       <Box sx={{ mb: 2, display: "flex", flexWrap: "wrap", gap: 2 }}>
         <TextField
           label="Search Title"
@@ -193,7 +187,6 @@ const Home: React.FC = () => {
         />
       </Box>
 
-      {/* Tabs and State Dropdown */}
       <Box
         sx={{
           display: "flex",
@@ -204,12 +197,12 @@ const Home: React.FC = () => {
           gap: 2,
         }}
       >
-        <Tabs value={tab} onChange={(e, newValue) => setTab(newValue)} sx={{ flex: 1 }}>
+        <Tabs value={tab} onChange={(e, v) => setTab(v)} sx={{ flex: 1 }}>
           <Tab label={`Issues (${filterData(issues, issueFilter).length})`} />
           <Tab label={`Pull Requests (${filterData(prs, prFilter).length})`} />
         </Tabs>
         <FormControl sx={{ minWidth: 150 }}>
-          <InputLabel sx={{ fontSize: "14px", color: "#555" }}>State</InputLabel>
+          <InputLabel sx={{ fontSize: "14px" }}>State</InputLabel>
           <Select
             value={tab === 0 ? issueFilter : prFilter}
             onChange={(e) =>
@@ -219,11 +212,12 @@ const Home: React.FC = () => {
             }
             label="State"
             sx={{
-              backgroundColor: "#fff",
+              backgroundColor: theme.palette.background.paper,
+              color: theme.palette.text.primary,
               borderRadius: "4px",
               "& .MuiSelect-select": { padding: "10px" },
               "&.Mui-focused .MuiOutlinedInput-notchedOutline": {
-                borderColor: "#1976d2",
+                borderColor: theme.palette.primary.main,
               },
             }}
           >
@@ -235,14 +229,12 @@ const Home: React.FC = () => {
         </FormControl>
       </Box>
 
-      {/* Error Alert */}
       {(authError || dataError) && (
         <Alert severity="error" sx={{ mb: 3 }}>
           {authError || dataError}
         </Alert>
       )}
 
-      {/* Table Section */}
       {loading ? (
         <Box display="flex" justifyContent="center" my={4}>
           <CircularProgress />
@@ -268,6 +260,8 @@ const Home: React.FC = () => {
                           href={item.html_url}
                           target="_blank"
                           rel="noopener noreferrer"
+                          underline="hover"
+                          sx={{ color: theme.palette.primary.main }}
                         >
                           {item.title}
                         </Link>
@@ -283,7 +277,7 @@ const Home: React.FC = () => {
                       </TableCell>
                     </TableRow>
                   ))}
-                </TableBody>
+                               </TableBody>
               </Table>
               <TablePagination
                 component="div"
diff --git a/tailwind.config.js b/tailwind.config.js
index 004cc72..4cdd0f6 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,5 +1,6 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
+  darkMode: 'class',
     content: [
       "./index.html",                      // For any HTML files in the root
       "./src/**/*.{js,jsx,ts,tsx}",         // For all JS/JSX/TS/TSX files inside src folder
@@ -8,4 +9,5 @@ module.exports = {
       extend: {},
     },
     plugins: [],
-  }
\ No newline at end of file
+  }
+  
\ No newline at end of file

From 18e64703a4e25d3aff5f535ff1e7c2568baf4e2c Mon Sep 17 00:00:00 2001
From: Trailblazer09 <akaaj15o@gmail.com>
Date: Sun, 27 Jul 2025 08:04:24 +0530
Subject: [PATCH 16/16] added theme switch across all pages

---
 src/Routes/Login/Login.tsx    | 154 ++++++-------
 src/ThemeContext.tsx          |   3 +-
 src/pages/Contact/Contact.tsx | 403 ++++++++++++++++++++++------------
 3 files changed, 337 insertions(+), 223 deletions(-)

diff --git a/src/Routes/Login/Login.tsx b/src/Routes/Login/Login.tsx
index 9cd94dd..ba66cf5 100644
--- a/src/Routes/Login/Login.tsx
+++ b/src/Routes/Login/Login.tsx
@@ -1,6 +1,8 @@
-import React, { useState, ChangeEvent, FormEvent } from "react";
+import React, { useState, ChangeEvent, FormEvent, useContext } from "react";
 import axios from "axios";
 import { useNavigate } from "react-router-dom";
+import { ThemeContext } from "../../ThemeContext";
+import type { ThemeContextType } from "../../ThemeContext";
 
 const backendUrl = import.meta.env.VITE_BACKEND_URL;
 
@@ -15,6 +17,8 @@ const Login: React.FC = () => {
   const [isLoading, setIsLoading] = useState<boolean>(false);
 
   const navigate = useNavigate();
+  const themeContext = useContext(ThemeContext) as ThemeContextType;
+  const { mode } = themeContext;
 
   const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
     const { name, value } = e.target;
@@ -29,7 +33,7 @@ const Login: React.FC = () => {
       const response = await axios.post(`${backendUrl}/api/auth/login`, formData);
       setMessage(response.data.message);
 
-      if (response.data.message === 'Login successful') {
+      if (response.data.message === "Login successful") {
         navigate("/home");
       }
     } catch (error: any) {
@@ -40,122 +44,106 @@ const Login: React.FC = () => {
   };
 
   return (
-    <div className="min-h-screen h-full w-full bg-gradient-to-br from-slate-900 via-purple-900 to-slate-900 flex items-center justify-center relative overflow-hidden">
-      {/* Enhanced animated background elements */}
-      <div className="absolute inset-0">
-        <div className="absolute -top-40 -right-40 w-96 h-96 bg-purple-500 rounded-full mix-blend-multiply filter blur-3xl opacity-30 animate-pulse"></div>
-        <div className="absolute -bottom-40 -left-40 w-96 h-96 bg-blue-500 rounded-full mix-blend-multiply filter blur-3xl opacity-30 animate-pulse"></div>
-        <div className="absolute top-40 left-40 w-96 h-96 bg-pink-500 rounded-full mix-blend-multiply filter blur-3xl opacity-30 animate-pulse"></div>
-        <div className="absolute top-1/2 right-1/4 w-64 h-64 bg-indigo-500 rounded-full mix-blend-multiply filter blur-2xl opacity-20 animate-pulse delay-1000"></div>
+    <div
+      className={`min-h-screen w-full flex items-center justify-center relative overflow-hidden ${
+        mode === "dark"
+          ? "bg-gradient-to-br from-slate-900 via-purple-900 to-slate-900"
+          : "bg-gradient-to-br from-slate-100 via-purple-100 to-slate-100"
+      }`}
+    >
+      {/* Background blobs */}
+      <div className="absolute inset-0 pointer-events-none">
+        <div className={`absolute -top-40 -right-40 w-96 h-96 ${mode === "dark" ? "bg-purple-500" : "bg-purple-300"} rounded-full blur-3xl opacity-30 animate-pulse`} />
+        <div className={`absolute -bottom-40 -left-40 w-96 h-96 ${mode === "dark" ? "bg-blue-500" : "bg-blue-300"} rounded-full blur-3xl opacity-30 animate-pulse`} />
+        <div className={`absolute top-40 left-40 w-96 h-96 ${mode === "dark" ? "bg-pink-500" : "bg-pink-300"} rounded-full blur-3xl opacity-30 animate-pulse`} />
       </div>
 
+      {/* Login Card */}
       <div className="relative w-full max-w-md px-6">
-        {/* Enhanced GitHub Logo/Icon */}
         <div className="text-center mb-10">
-          <div className="inline-flex items-center justify-center w-20 h-20 bg-white rounded-3xl mb-6 shadow-2xl transform hover:scale-105 transition-transform duration-300 overflow-hidden">
-  <img src="/crl-icon.png" alt="Logo" className="w-14 h-14 object-contain" />
-</div>
-
-          <h1 className="text-4xl font-bold bg-gradient-to-r from-purple-300 via-pink-300 to-indigo-300 bg-clip-text text-transparent mb-2">
+          <div className={`inline-flex items-center justify-center w-20 h-20 bg-white rounded-3xl mb-6 shadow-2xl overflow-hidden`}>
+            <img src="/crl-icon.png" alt="Logo" className="w-14 h-14 object-contain" />
+          </div>
+          <h1 className={`text-4xl font-bold bg-clip-text text-transparent mb-2 ${
+            mode === "dark" ? "bg-gradient-to-r from-purple-300 via-pink-300 to-indigo-300" : "bg-gradient-to-r from-purple-600 via-pink-600 to-indigo-600"
+          }`}>
             GitHubTracker
           </h1>
-          <p className="text-slate-300 text-lg font-medium">Track your GitHub journey</p>
+          <p className={`${mode === "dark" ? "text-slate-300" : "text-gray-700"} text-lg font-medium`}>Track your GitHub journey</p>
         </div>
 
-        {/* Login Form */}
-        <div className="bg-white/10 backdrop-blur-xl rounded-3xl p-10 shadow-2xl border border-white/20">
-          <h2 className="text-2xl font-bold text-white text-center mb-8">Welcome Back</h2>
+        {/* Form */}
+        <div className={`rounded-3xl p-10 shadow-2xl border ${
+          mode === "dark" ? "bg-white/10 backdrop-blur-xl border-white/20 text-white" : "bg-white border-gray-200 text-black"
+        }`}>
+          <h2 className={`text-2xl font-bold text-center mb-8 ${mode === "dark" ? "text-white" : "text-gray-800"}`}>Welcome Back</h2>
 
           <form onSubmit={handleSubmit} className="space-y-6">
-            <div className="relative">
-              <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
-                <svg className="w-5 h-5 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M16 12a4 4 0 10-8 0 4 4 0 008 0zm0 0v1.5a2.5 2.5 0 005 0V12a9 9 0 10-9 9m4.5-1.206a8.959 8.959 0 01-4.5 1.207"/>
-                </svg>
-              </div>
-              <input
-                type="email"
-                name="email"
-                placeholder="Enter your email"
-                value={formData.email}
-                onChange={handleChange}
-                autoComplete="username"
-                required
-                className="w-full pl-10 pr-4 py-4 bg-white/5 border border-white/10 rounded-2xl text-white placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent transition-all duration-300 backdrop-blur-sm"
-              />
-            </div>
-
-            <div className="relative">
-              <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
-                <svg className="w-5 h-5 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/>
-                </svg>
-              </div>
-              <input
-                type="password"
-                name="password"
-                autoComplete="current-password"
-                placeholder="Enter your password"
-                value={formData.password}
-                onChange={handleChange}
-                required
-                className="w-full pl-10 pr-4 py-4 bg-white/5 border border-white/10 rounded-2xl text-white placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent transition-all duration-300 backdrop-blur-sm"
-              />
-            </div>
+            <input
+              type="email"
+              name="email"
+              placeholder="Enter your email"
+              value={formData.email}
+              onChange={handleChange}
+              autoComplete="username"
+              required
+              className={`w-full px-4 py-4 rounded-2xl focus:outline-none transition-all ${
+                mode === "dark"
+                  ? "bg-white/5 border border-white/10 text-white placeholder-slate-400 focus:ring-2 focus:ring-purple-500"
+                  : "bg-gray-100 border border-gray-300 text-gray-900 placeholder-gray-500 focus:ring-2 focus:ring-purple-400"
+              }`}
+            />
+
+            <input
+              type="password"
+              name="password"
+              autoComplete="current-password"
+              placeholder="Enter your password"
+              value={formData.password}
+              onChange={handleChange}
+              required
+              className={`w-full px-4 py-4 rounded-2xl focus:outline-none transition-all ${
+                mode === "dark"
+                  ? "bg-white/5 border border-white/10 text-white placeholder-slate-400 focus:ring-2 focus:ring-purple-500"
+                  : "bg-gray-100 border border-gray-300 text-gray-900 placeholder-gray-500 focus:ring-2 focus:ring-purple-400"
+              }`}
+            />
 
             <button
               type="submit"
               disabled={isLoading}
-              className="w-full bg-gradient-to-r from-purple-600 via-pink-600 to-indigo-600 text-white py-4 px-6 rounded-2xl font-semibold hover:from-purple-700 hover:via-pink-700 hover:to-indigo-700 focus:outline-none focus:ring-4 focus:ring-purple-500/50 transform hover:scale-[1.02] transition-all duration-300 shadow-xl disabled:opacity-50 disabled:cursor-not-allowed disabled:transform-none"
+              className="w-full bg-gradient-to-r from-purple-600 via-pink-600 to-indigo-600 text-white py-4 px-6 rounded-2xl font-semibold focus:ring-4 focus:ring-purple-500/50 transition-all duration-300 disabled:opacity-50 disabled:cursor-not-allowed"
             >
-              {isLoading ? (
-                <div className="flex items-center justify-center">
-                  <svg className="animate-spin -ml-1 mr-3 h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
-                    <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
-                    <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
-                  </svg>
-                  Signing in...
-                </div>
-              ) : (
-                "Sign In"
-              )}
+              {isLoading ? "Signing in..." : "Sign In"}
             </button>
           </form>
 
-          {/* Message Display */}
           {message && (
             <div className={`mt-6 p-4 rounded-2xl text-center text-sm font-medium ${
-              message === 'Login successful'
-                ? 'bg-green-500/20 text-green-300 border border-green-500/30'
-                : 'bg-red-500/20 text-red-300 border border-red-500/30'
+              message === "Login successful"
+                ? "bg-green-500/20 text-green-300 border border-green-500/30"
+                : "bg-red-500/20 text-red-300 border border-red-500/30"
             }`}>
               {message}
             </div>
           )}
-
-          {/* Additional Links */}
-          <div className="mt-8 text-center">
-            <a href="#" className="text-slate-400 hover:text-purple-400 text-sm transition-colors duration-300">
-              Forgot your password?
-            </a>
-          </div>
         </div>
 
-        {/* Footer */}
+        {/* Footer Text */}
         <div className="text-center mt-8 pb-8">
-          <p className="text-slate-500 text-sm">
+          <p className={`${mode === "dark" ? "text-slate-500" : "text-gray-600"} text-sm`}>
             Don't have an account?
-            <a href="#" className="text-purple-400 hover:text-purple-300 ml-1 transition-colors duration-300">
+            <a href="#" className="ml-1 text-purple-400 hover:text-purple-300 transition-colors duration-300">
               Sign up here
             </a>
           </p>
         </div>
       </div>
 
-      {/* Additional background coverage */}
-      <div className="absolute bottom-0 left-0 w-full h-20 bg-gradient-to-t from-slate-900 to-transparent"></div>
+      {/* Lower gradient */}
+      <div className={`${mode === "dark" ? "from-slate-900" : "from-slate-100"} absolute bottom-0 left-0 w-full h-20 bg-gradient-to-t to-transparent`} />
     </div>
   );
 };
 
-export default Login;
+export default Login;
\ No newline at end of file
diff --git a/src/ThemeContext.tsx b/src/ThemeContext.tsx
index 3cffe22..27fa822 100644
--- a/src/ThemeContext.tsx
+++ b/src/ThemeContext.tsx
@@ -35,4 +35,5 @@ const ThemeWrapper = ({ children }: { children: ReactNode }) => {
   );
 };
 
-export default ThemeWrapper;
\ No newline at end of file
+export default ThemeWrapper;
+export type { ThemeContextType };
\ No newline at end of file
diff --git a/src/pages/Contact/Contact.tsx b/src/pages/Contact/Contact.tsx
index adc262d..28eef10 100644
--- a/src/pages/Contact/Contact.tsx
+++ b/src/pages/Contact/Contact.tsx
@@ -1,9 +1,14 @@
 import { useState } from 'react';
 import { Github, Mail, Phone, Send, X, CheckCircle } from 'lucide-react';
+import { useContext } from "react";
+import { ThemeContext } from "../../ThemeContext";
+import type { ThemeContextType } from "../../ThemeContext";
 
 function Contact() {
   const [showPopup, setShowPopup] = useState(false);
   const [isSubmitting, setIsSubmitting] = useState(false);
+  const themeContext = useContext(ThemeContext) as ThemeContextType;
+const { mode } = themeContext;
 
   const handleSubmit = async () => {
     setIsSubmitting(true);
@@ -24,158 +29,278 @@ function Contact() {
     setShowPopup(false);
   };
 
-  return (
-    <div className="h-screen w-screen bg-gradient-to-br from-slate-900 via-purple-900 to-slate-900 relative overflow-hidden">
-      {/* Animated background elements */}
-      <div className="absolute inset-0">
-        <div className="absolute top-20 left-20 w-72 h-72 bg-purple-500 rounded-full mix-blend-multiply filter blur-xl opacity-20 animate-pulse"></div>
-        <div className="absolute top-40 right-20 w-72 h-72 bg-blue-500 rounded-full mix-blend-multiply filter blur-xl opacity-20 animate-pulse delay-1000"></div>
-        <div className="absolute -bottom-8 left-1/2 w-72 h-72 bg-pink-500 rounded-full mix-blend-multiply filter blur-xl opacity-20 animate-pulse delay-2000"></div>
-      </div>
+ return (
+  <div
+    className={`h-screen w-screen relative overflow-hidden ${
+      mode === "dark"
+        ? "bg-gradient-to-br from-slate-900 via-purple-900 to-slate-900"
+        : "bg-gradient-to-br from-indigo-100 via-purple-100 to-indigo-100"
+    }`}
+  >
+    {/* Animated background elements */}
+    <div className="absolute inset-0">
+      <div className="absolute top-20 left-20 w-72 h-72 bg-purple-500 rounded-full mix-blend-multiply filter blur-xl opacity-20 animate-pulse"></div>
+      <div className="absolute top-40 right-20 w-72 h-72 bg-blue-500 rounded-full mix-blend-multiply filter blur-xl opacity-20 animate-pulse delay-1000"></div>
+      <div className="absolute -bottom-8 left-1/2 w-72 h-72 bg-pink-500 rounded-full mix-blend-multiply filter blur-xl opacity-20 animate-pulse delay-2000"></div>
+    </div>
 
-      <div className="relative z-10 container mx-auto px-4 py-6 max-w-7xl h-full flex flex-col">
-        {/* Header Section */}
-        <div className="text-center mb-8 flex-shrink-0">
-          <div className="flex justify-center items-center gap-3 mb-4">
-            <div className="inline-flex items-center justify-center w-20 h-20 bg-white rounded-3xl mb-6 shadow-2xl transform hover:scale-105 transition-transform duration-300 overflow-hidden">
-  <img src="/crl-icon.png" alt="Logo" className="w-14 h-14 object-contain" />
-</div>
-            <h1 className="text-6xl font-bold bg-gradient-to-r from-purple-400 to-blue-400 bg-clip-text text-transparent">
-              GitHub Tracker
-            </h1>
+    <div className="relative z-10 container mx-auto px-4 py-6 max-w-7xl h-full flex flex-col">
+      {/* Header Section */}
+      <div className="text-center mb-8 flex-shrink-0">
+        <div className="flex justify-center items-center gap-3 mb-4">
+          <div className={`inline-flex items-center justify-center w-20 h-20 mb-6 shadow-2xl transition-transform transform hover:scale-105 overflow-hidden rounded-3xl ${
+            mode === "dark" ? "bg-white" : "bg-purple-200"
+          }`}>
+            <img
+              src="/crl-icon.png"
+              alt="Logo"
+              className="w-14 h-14 object-contain"
+            />
           </div>
-          <p className="text-lg text-gray-300 max-w-2xl mx-auto leading-relaxed">
-            Get in touch with us to discuss your project tracking needs or report any issues
-          </p>
+          <h1 className="text-6xl font-bold bg-gradient-to-r from-purple-400 to-blue-400 bg-clip-text text-transparent">
+            GitHub Tracker
+          </h1>
         </div>
+        <p
+          className={`text-lg max-w-2xl mx-auto leading-relaxed ${
+            mode === "dark" ? "text-gray-300" : "text-gray-700"
+          }`}
+        >
+          Get in touch with us to discuss your project tracking needs or report
+          any issues
+        </p>
+      </div>
 
-        <div className="grid lg:grid-cols-2 gap-8 items-start flex-1 min-h-0">
-          {/* Contact Info Cards */}
-          <div className="space-y-6 h-full flex flex-col">
-            <div className="text-center lg:text-left flex-shrink-0">
-              <h2 className="text-2xl font-bold text-white mb-3">Let's Connect</h2>
-              <p className="text-gray-400 text-base">
-                We're here to help you track and manage your GitHub repositories more effectively
-              </p>
-            </div>
-
-            <div className="space-y-4 flex-1 flex flex-col justify-center">
-              <div className="group bg-white/10 backdrop-blur-lg p-5 rounded-2xl border border-white/20 hover:bg-white/20 transition-all duration-300 hover:scale-105">
-                <div className="flex items-center gap-4">
-                  <div className="p-2.5 bg-gradient-to-r from-blue-500 to-cyan-500 rounded-full group-hover:scale-110 transition-transform duration-300">
-                    <Phone className="w-4 h-4 text-white" />
-                  </div>
-                  <div>
-                    <h3 className="text-base font-semibold text-white">Phone Support</h3>
-                    <p className="text-gray-300 text-sm">(123) 456-7890</p>
-                    <p className="text-xs text-gray-400">Mon-Fri, 9AM-6PM EST</p>
-                  </div>
-                </div>
-              </div>
-
-              <div className="group bg-white/10 backdrop-blur-lg p-5 rounded-2xl border border-white/20 hover:bg-white/20 transition-all duration-300 hover:scale-105">
-                <div className="flex items-center gap-4">
-                  <div className="p-2.5 bg-gradient-to-r from-purple-500 to-pink-500 rounded-full group-hover:scale-110 transition-transform duration-300">
-                    <Mail className="w-4 h-4 text-white" />
-                  </div>
-                  <div>
-                    <h3 className="text-base font-semibold text-white">Email Us</h3>
-                    <p className="text-gray-300 text-sm">support@githubtracker.com</p>
-                    <p className="text-xs text-gray-400">We'll respond within 24 hours</p>
-                  </div>
-                </div>
-              </div>
+      <div className="grid lg:grid-cols-2 gap-8 items-start flex-1 min-h-0">
+        {/* Contact Info Cards */}
+        <div className="space-y-6 h-full flex flex-col">
+          <div className="text-center lg:text-left flex-shrink-0">
+            <h2
+              className={`text-2xl font-bold mb-3 ${
+                mode === "dark" ? "text-white" : "text-gray-800"
+              }`}
+            >
+              Let's Connect
+            </h2>
+            <p
+              className={`text-base ${
+                mode === "dark" ? "text-gray-400" : "text-gray-600"
+              }`}
+            >
+              We're here to help you track and manage your GitHub repositories
+              more effectively
+            </p>
+          </div>
 
-              <div className="group bg-white/10 backdrop-blur-lg p-5 rounded-2xl border border-white/20 hover:bg-white/20 transition-all duration-300 hover:scale-105">
-                <div className="flex items-center gap-4">
-                  <div className="p-2.5 bg-gradient-to-r from-green-500 to-teal-500 rounded-full group-hover:scale-110 transition-transform duration-300">
-                    <Github className="w-4 h-4 text-white" />
-                  </div>
-                  <div>
-                    <h3 className="text-base font-semibold text-white">GitHub Issues</h3>
-                    <p className="text-gray-300 text-sm">github.com/yourorg/githubtracker</p>
-                    <p className="text-xs text-gray-400">Report bugs & feature requests</p>
+          <div className="space-y-4 flex-1 flex flex-col justify-center">
+            {[...Array(3)].map((_, index) => {
+              const contactTypes = [
+                {
+                  title: "Phone Support",
+                  iconBg: "from-blue-500 to-cyan-500",
+                  detail: "(123) 456-7890",
+                  sub: "Mon-Fri, 9AM-6PM EST",
+                  Icon: Phone,
+                },
+                {
+                  title: "Email Us",
+                  iconBg: "from-purple-500 to-pink-500",
+                  detail: "support@githubtracker.com",
+                  sub: "We'll respond within 24 hours",
+                  Icon: Mail,
+                },
+                {
+                  title: "GitHub Issues",
+                  iconBg: "from-green-500 to-teal-500",
+                  detail: "github.com/yourorg/githubtracker",
+                  sub: "Report bugs & feature requests",
+                  Icon: Github,
+                },
+              ];
+              const {
+                title,
+                iconBg,
+                detail,
+                sub,
+                Icon,
+              } = contactTypes[index];
+              return (
+                <div
+                  key={title}
+                  className={`group p-5 rounded-2xl backdrop-blur-lg transition-all duration-300 hover:scale-105 ${
+                    mode === "dark"
+                      ? "bg-white/10 border border-white/20 hover:bg-white/20"
+                      : "bg-white border border-gray-300 hover:bg-gray-100"
+                  }`}
+                >
+                  <div className="flex items-center gap-4">
+                    <div
+                      className={`p-2.5 rounded-full transition-transform duration-300 group-hover:scale-110 bg-gradient-to-r ${iconBg}`}
+                    >
+                      <Icon
+                        className={`w-4 h-4 ${
+                          mode === "dark" ? "text-white" : "text-gray-800"
+                        }`}
+                      />
+                    </div>
+                    <div>
+                      <h3
+                        className={`text-base font-semibold ${
+                          mode === "dark" ? "text-white" : "text-gray-800"
+                        }`}
+                      >
+                        {title}
+                      </h3>
+                      <p
+                        className={`text-sm ${
+                          mode === "dark" ? "text-gray-300" : "text-gray-600"
+                        }`}
+                      >
+                        {detail}
+                      </p>
+                      <p
+                        className={`text-xs ${
+                          mode === "dark" ? "text-gray-400" : "text-gray-500"
+                        }`}
+                      >
+                        {sub}
+                      </p>
+                    </div>
                   </div>
                 </div>
-              </div>
-            </div>
+              );
+            })}
           </div>
+        </div>
+        {/* Contact Form */}
+<div
+  className={`p-6 rounded-3xl shadow-2xl h-full flex flex-col backdrop-blur-lg ${
+    mode === "dark"
+      ? "bg-white/10 border border-white/20"
+      : "bg-white border border-gray-300"
+  }`}
+>
+  <h2
+    className={`text-xl font-bold mb-4 text-center flex-shrink-0 ${
+      mode === "dark" ? "text-white" : "text-gray-800"
+    }`}
+  >
+    Send us a Message
+  </h2>
 
-          {/* Contact Form */}
-          <div className="bg-white/10 backdrop-blur-lg p-6 rounded-3xl border border-white/20 shadow-2xl h-full flex flex-col">
-            <h2 className="text-xl font-bold text-white mb-4 text-center flex-shrink-0">Send us a Message</h2>
-            
-            <div className="space-y-4 flex-1 flex flex-col">
-              <div className="space-y-3 flex-1">
-                <div>
-                  <label className="block text-xs font-medium text-gray-300 mb-1">
-                    Full Name
-                  </label>
-                  <input
-                    type="text"
-                    className="w-full p-3 bg-white/5 border border-white/20 rounded-xl text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent transition-all duration-300 text-sm"
-                    placeholder="Enter your full name"
-                    required
-                  />
-                </div>
+  <div className="space-y-4 flex-1 flex flex-col">
+    <div className="space-y-3 flex-1">
+      {/* Full Name */}
+      <div>
+        <label
+          className={`block text-xs font-medium mb-1 ${
+            mode === "dark" ? "text-gray-300" : "text-gray-700"
+          }`}
+        >
+          Full Name
+        </label>
+        <input
+          type="text"
+          placeholder="Enter your full name"
+          required
+          className={`w-full p-3 rounded-xl text-sm transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-purple-500 ${
+            mode === "dark"
+              ? "bg-white/5 border border-white/20 text-white placeholder-gray-400"
+              : "bg-gray-50 border border-gray-300 text-gray-800 placeholder-gray-500"
+          }`}
+        />
+      </div>
 
-                <div>
-                  <label className="block text-xs font-medium text-gray-300 mb-1">
-                    Email Address
-                  </label>
-                  <input
-                    type="email"
-                    className="w-full p-3 bg-white/5 border border-white/20 rounded-xl text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent transition-all duration-300 text-sm"
-                    placeholder="your.email@example.com"
-                    required
-                  />
-                </div>
+      {/* Email */}
+      <div>
+        <label
+          className={`block text-xs font-medium mb-1 ${
+            mode === "dark" ? "text-gray-300" : "text-gray-700"
+          }`}
+        >
+          Email Address
+        </label>
+        <input
+          type="email"
+          placeholder="your.email@example.com"
+          required
+          className={`w-full p-3 rounded-xl text-sm transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-purple-500 ${
+            mode === "dark"
+              ? "bg-white/5 border border-white/20 text-white placeholder-gray-400"
+              : "bg-gray-50 border border-gray-300 text-gray-800 placeholder-gray-500"
+          }`}
+        />
+      </div>
 
-                <div>
-                  <label className="block text-xs font-medium text-gray-300 mb-1">
-                    Subject
-                  </label>
-                  <select className="w-full p-3 bg-white/5 border border-white/20 rounded-xl text-white focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent transition-all duration-300 text-sm">
-                    <option value="" className="bg-slate-800">Select a topic</option>
-                    <option value="bug" className="bg-slate-800">Bug Report</option>
-                    <option value="feature" className="bg-slate-800">Feature Request</option>
-                    <option value="support" className="bg-slate-800">Technical Support</option>
-                    <option value="general" className="bg-slate-800">General Inquiry</option>
-                  </select>
-                </div>
+      {/* Subject */}
+      <div>
+        <label
+          className={`block text-xs font-medium mb-1 ${
+            mode === "dark" ? "text-gray-300" : "text-gray-700"
+          }`}
+        >
+          Subject
+        </label>
+        <select
+          className={`w-full p-3 rounded-xl text-sm transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-purple-500 ${
+            mode === "dark"
+              ? "bg-white/5 border border-white/20 text-white"
+              : "bg-gray-50 border border-gray-300 text-gray-800"
+          }`}
+        >
+          <option value="" className={mode === "dark" ? "bg-slate-800" : "bg-white"}>
+            Select a topic
+          </option>
+          <option value="bug" className={mode === "dark" ? "bg-slate-800" : "bg-white"}>Bug Report</option>
+          <option value="feature" className={mode === "dark" ? "bg-slate-800" : "bg-white"}>Feature Request</option>
+          <option value="support" className={mode === "dark" ? "bg-slate-800" : "bg-white"}>Technical Support</option>
+          <option value="general" className={mode === "dark" ? "bg-slate-800" : "bg-white"}>General Inquiry</option>
+        </select>
+      </div>
 
-                <div className="flex-1">
-                  <label className="block text-xs font-medium text-gray-300 mb-1">
-                    Message
-                  </label>
-                  <textarea
-                    className="w-full h-full min-h-[120px] p-3 bg-white/5 border border-white/20 rounded-xl text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent transition-all duration-300 resize-none text-sm"
-                    placeholder="Tell us about your GitHub tracking needs or describe your issue..."
-                    required
-                  ></textarea>
-                </div>
-              </div>
+      {/* Message */}
+      <div className="flex-1">
+        <label
+          className={`block text-xs font-medium mb-1 ${
+            mode === "dark" ? "text-gray-300" : "text-gray-700"
+          }`}
+        >
+          Message
+        </label>
+        <textarea
+          required
+          placeholder="Tell us about your GitHub tracking needs or describe your issue..."
+          className={`w-full h-full min-h-[120px] resize-none p-3 rounded-xl text-sm transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-purple-500 ${
+            mode === "dark"
+              ? "bg-white/5 border border-white/20 text-white placeholder-gray-400"
+              : "bg-gray-50 border border-gray-300 text-gray-800 placeholder-gray-500"
+          }`}
+        ></textarea>
+      </div>
+    </div>
 
-              <button
-                type="button"
-                onClick={handleSubmit}
-                disabled={isSubmitting}
-                className="w-full py-3 px-6 bg-gradient-to-r from-purple-500 to-blue-500 text-white font-semibold rounded-xl hover:from-purple-600 hover:to-blue-600 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 focus:ring-offset-transparent transition-all duration-300 transform hover:scale-105 disabled:opacity-50 disabled:cursor-not-allowed disabled:transform-none flex items-center justify-center gap-3 flex-shrink-0 text-sm"
-              >
-                {isSubmitting ? (
-                  <>
-                    <div className="w-5 h-5 border-2 border-white border-t-transparent rounded-full animate-spin"></div>
-                    Sending...
-                  </>
-                ) : (
-                  <>
-                    <Send className="w-5 h-5" />
-                    Send Message
-                  </>
-                )}
-              </button>
-            </div>
-          </div>
+    {/* Submit Button */}
+    <button
+      type="button"
+      onClick={handleSubmit}
+      disabled={isSubmitting}
+      className="w-full py-3 px-6 bg-gradient-to-r from-purple-500 to-blue-500 text-white font-semibold rounded-xl hover:from-purple-600 hover:to-blue-600 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 transition-all duration-300 transform hover:scale-105 disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-3 text-sm"
+    >
+      {isSubmitting ? (
+        <>
+          <div className="w-5 h-5 border-2 border-white border-t-transparent rounded-full animate-spin"></div>
+          Sending...
+        </>
+      ) : (
+        <>
+          <Send className="w-5 h-5" />
+          Send Message
+        </>
+      )}
+    </button>
+  </div>
+</div>
+          {/* last*/ }
         </div>
       </div>