diff --git a/src/App.tsx b/src/App.tsx
index a49da65..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,24 +27,21 @@ 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>
   );
 }
 
-export default App;
+export default App;
\ No newline at end of file
diff --git a/src/Routes/Login/Login.tsx b/src/Routes/Login/Login.tsx
index 1c1f495..ba66cf5 100644
--- a/src/Routes/Login/Login.tsx
+++ b/src/Routes/Login/Login.tsx
@@ -1,8 +1,11 @@
-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 the hook for navigation
+import { useNavigate } from "react-router-dom";
+import { ThemeContext } from "../../ThemeContext";
+import type { ThemeContextType } from "../../ThemeContext";
 
 const backendUrl = import.meta.env.VITE_BACKEND_URL;
+
 interface LoginFormData {
   email: string;
   password: string;
@@ -11,8 +14,11 @@ 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(); // Initialize the navigate hook
+  const navigate = useNavigate();
+  const themeContext = useContext(ThemeContext) as ThemeContextType;
+  const { mode } = themeContext;
 
   const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
     const { name, value } = e.target;
@@ -21,59 +27,123 @@ const Login: React.FC = () => {
 
   const handleSubmit = async (e: FormEvent) => {
     e.preventDefault();
+    setIsLoading(true);
+
     try {
-      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') {
+      const response = await axios.post(`${backendUrl}/api/auth/login`, formData);
+      setMessage(response.data.message);
+
+      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 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">
+        <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 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={`${mode === "dark" ? "text-slate-300" : "text-gray-700"} 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"
-          />
+
+        {/* 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">
+            <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 focus:ring-4 focus:ring-purple-500/50 transition-all duration-300 disabled:opacity-50 disabled:cursor-not-allowed"
+            >
+              {isLoading ? "Signing in..." : "Sign In"}
+            </button>
+          </form>
+
+          {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>
+          )}
+        </div>
+
+        {/* Footer Text */}
+        <div className="text-center mt-8 pb-8">
+          <p className={`${mode === "dark" ? "text-slate-500" : "text-gray-600"} text-sm`}>
+            Don't have an account?
+            <a href="#" className="ml-1 text-purple-400 hover:text-purple-300 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>
+
+      {/* 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/Routes/Router.tsx b/src/Routes/Router.tsx
index 867672a..3411a4b 100644
--- a/src/Routes/Router.tsx
+++ b/src/Routes/Router.tsx
@@ -21,6 +21,5 @@ const Router = () => {
       <Route path="/contributors" element={<Contributors />} />
     </Routes>
   );
-};
-
-export default Router;
+  };
+export default Router;
\ No newline at end of file
diff --git a/src/ThemeContext.tsx b/src/ThemeContext.tsx
new file mode 100644
index 0000000..27fa822
--- /dev/null
+++ b/src/ThemeContext.tsx
@@ -0,0 +1,39 @@
+// 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;
+export type { ThemeContextType };
\ No newline at end of file
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
index f7ea2f2..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">
@@ -12,7 +18,6 @@ const Navbar: React.FC = () => {
           <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
@@ -42,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 */}
@@ -69,7 +82,6 @@ const Navbar: React.FC = () => {
           </button>
         </div>
       </div>
-
       {/* Mobile Links */}
       {isOpen && (
         <div className="md:hidden bg-gray-800">
diff --git a/src/main.tsx b/src/main.tsx
index a9f043f..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 81ed120..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>
@@ -40,4 +51,4 @@ const About = () => {
   );
 };
 
-export default About;
+export default About;
\ No newline at end of file
diff --git a/src/pages/Contact/Contact.tsx b/src/pages/Contact/Contact.tsx
index ef9f967..28eef10 100644
--- a/src/pages/Contact/Contact.tsx
+++ b/src/pages/Contact/Contact.tsx
@@ -1,85 +1,328 @@
-import { FormEvent, useState } from 'react';
+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<boolean>(false); // State to control popup visibility
+  const [showPopup, setShowPopup] = useState(false);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const themeContext = useContext(ThemeContext) as ThemeContextType;
+const { mode } = themeContext;
 
-  // Handle form submission
-  const handleSubmit = (e: FormEvent<HTMLFormElement>) => {
-    e.preventDefault();
-    setShowPopup(true); // Show the popup after submission
+  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>
+ 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>
 
-      {/* 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 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>
+          <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>
-        <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>
+        <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 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="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>
-          <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>
+        {/* 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>
+
+  <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>
+
+      {/* 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>
+
+      {/* 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>
+
+      {/* 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>
+
+    {/* 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>
-      </form>
+      </div>
 
-      {/* Popup Modal */}
+      {/* 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>
diff --git a/src/pages/Contributors/Contributors.tsx b/src/pages/Contributors/Contributors.tsx
index 1fea40d..decbe7c 100644
--- a/src/pages/Contributors/Contributors.tsx
+++ b/src/pages/Contributors/Contributors.tsx
@@ -21,7 +21,6 @@ interface Contributor {
   contributions: number;
   html_url: string;
 }
-
 const ContributorsPage = () => {
   const [contributors, setContributors] = useState<Contributor[]>([]);
   const [loading, setLoading] = useState<boolean>(true);
@@ -32,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);
       }
@@ -54,7 +54,6 @@ const ContributorsPage = () => {
       </Box>
     );
   }
-
   if (error) {
     return (
       <Box sx={{ mt: 4 }}>
@@ -62,80 +61,72 @@ const ContributorsPage = () => {
       </Box>
     );
   }
-
   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>
   );
 };
 
diff --git a/src/pages/Home/Home.tsx b/src/pages/Home/Home.tsx
index cab0b7d..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,
@@ -49,7 +49,6 @@ const Home: React.FC = () => {
     error: authError,
     getOctokit,
   } = useGitHubAuth();
-
   const octokit = getOctokit();
   const {
     issues,
@@ -58,11 +57,9 @@ const Home: React.FC = () => {
     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");
@@ -71,66 +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"
@@ -139,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
@@ -167,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"
@@ -199,7 +187,6 @@ const Home: React.FC = () => {
         />
       </Box>
 
-      {/* Tabs and State Dropdown */}
       <Box
         sx={{
           display: "flex",
@@ -210,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) =>
@@ -225,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,
               },
             }}
           >
@@ -241,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 />
@@ -274,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>
@@ -289,7 +277,7 @@ const Home: React.FC = () => {
                       </TableCell>
                     </TableRow>
                   ))}
-                </TableBody>
+                               </TableBody>
               </Table>
               <TablePagination
                 component="div"
@@ -307,4 +295,4 @@ const Home: React.FC = () => {
   );
 };
 
-export default Home;
+export default Home;
\ No newline at end of file
diff --git a/tailwind.config.js b/tailwind.config.js
index 9b2ed50..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
@@ -9,3 +10,4 @@ module.exports = {
     },
     plugins: [],
   }
+  
\ No newline at end of file