diff --git a/src/App.tsx b/src/App.tsx
index 8eafb448..9ffa0b39 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -17,6 +17,7 @@ function App() {
 
         {!isFullscreen && <Navbar />}
 
+        <main className="flex-grow bg-white dark:bg-dark flex justify-center items-center">
         <main className={`flex justify-center items-center ${isFullscreen ? "flex-1" : "flex-grow bg-gray-50 dark:bg-gray-800"}`}>
           <Router />
         </main>
@@ -29,7 +30,7 @@ function App() {
           gutter={8}
           containerClassName="mt-12"
           toastOptions={{
-            className: "bg-white dark:bg-gray-800 text-black dark:text-white",
+            className: "bg-white dark:bg-dark-lighter text-black dark:text-white",
             duration: 5000,
             success: {
               duration: 3000,
diff --git a/src/components/Features.tsx b/src/components/Features.tsx
index 8125cb42..c99e2a7b 100644
--- a/src/components/Features.tsx
+++ b/src/components/Features.tsx
@@ -1,10 +1,15 @@
 import { BarChart3, Users, Search, Zap, Shield, Globe } from 'lucide-react';
+import { motion } from 'framer-motion';
 
 const Features = () => {
   const features = [
     {
       icon: BarChart3,
       title: 'Activity Analytics',
+      description: 'Detailed insights into commits, pull requests, and code activity patterns with beautiful visualizations.',
+      iconColor: 'text-blue-600',
+      bgColor: 'bg-blue-50',
+      darkBg: 'dark:bg-blue-900/20'
       description: 'Comprehensive charts and graphs showing commit patterns, contribution streaks, and repository activity over time.',
       bgColor: 'bg-blue-100',
       iconColor: 'text-blue-600',
@@ -14,6 +19,10 @@ const Features = () => {
     {
       icon: Users,
       title: 'Multi-User Tracking',
+      description: 'Track multiple users and compare contribution metrics side by side in real-time dashboards.',
+      iconColor: 'text-green-600',
+      bgColor: 'bg-green-50',
+      darkBg: 'dark:bg-green-900/20'
       description: 'Monitor multiple GitHub users simultaneously and compare their activity levels and contribution patterns.',
       bgColor: 'bg-green-100',
       iconColor: 'text-green-600',
@@ -23,6 +32,10 @@ const Features = () => {
     {
       icon: Search,
       title: 'Smart Search',
+      description: 'Advanced search and filtering to find specific repositories and contributions with ease.',
+      iconColor: 'text-purple-600',
+      bgColor: 'bg-purple-50',
+      darkBg: 'dark:bg-purple-900/20'
       description: 'Quickly find and add users to your tracking list with intelligent search and auto-suggestions.',
       bgColor: 'bg-purple-100',
       iconColor: 'text-purple-600',
@@ -32,6 +45,26 @@ const Features = () => {
     {
       icon: Zap,
       title: 'Real-time Updates',
+      description: 'Stay ahead with instant notifications on new contributions and repository changes as they happen.',
+      iconColor: 'text-orange-600',
+      bgColor: 'bg-orange-50',
+      darkBg: 'dark:bg-orange-900/20'
+    },
+    {
+      icon: Shield,
+      title: 'Privacy Focused',
+      description: 'Your data is safe. We use public APIs and never store sensitive personal information.',
+      iconColor: 'text-red-600',
+      bgColor: 'bg-red-50',
+      darkBg: 'dark:bg-red-900/20'
+    },
+    {
+      icon: Globe,
+      title: 'Global Insights',
+      description: 'Understand development trends across different regions and open-source ecosystems.',
+      iconColor: 'text-indigo-600',
+      bgColor: 'bg-indigo-50',
+      darkBg: 'dark:bg-indigo-900/20'
       description: 'Get instant notifications and updates when tracked users make new contributions or repositories.',
       bgColor: 'bg-orange-100',
       iconColor: 'text-orange-600',
@@ -58,20 +91,66 @@ const Features = () => {
     }
   ];
 
+  const containerVariants = {
+    hidden: { opacity: 0 },
+    visible: {
+      opacity: 1,
+      transition: {
+        staggerChildren: 0.1
+      }
+    }
+  };
+
+  const itemVariants = {
+    hidden: { opacity: 0, y: 20 },
+    visible: { opacity: 1, y: 0 }
+  };
+
   return (
-    <section id="features" className="px-6 py-6 bg-white dark:bg-gray-900 transition-colors duration-300">
-      <div className="mx-auto">
+    <section id="features" className="px-6 py-24 bg-white dark:bg-dark transition-colors duration-300 relative">
+      <div className="max-w-7xl mx-auto relative z-10">
         <div className="text-center mb-16">
-          <h2 className="text-3xl font-bold text-gray-900 dark:text-white mb-4">Powerful Features</h2>
-          <p className="text-xl text-gray-600 dark:text-gray-300 max-w-2xl mx-auto">
+          <motion.h2 
+            initial={{ opacity: 0, y: 20 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            viewport={{ once: true }}
+            className="text-4xl md:text-5xl font-bold text-gray-900 dark:text-white mb-4 tracking-tight"
+          >
+            Powerful Features
+          </motion.h2>
+          <motion.p 
+            initial={{ opacity: 0, y: 20 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            viewport={{ once: true }}
+            transition={{ delay: 0.1 }}
+            className="text-lg md:text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto"
+          >
             Everything you need to track, analyze, and understand GitHub activity patterns
-          </p>
+          </motion.p>
         </div>
 
-        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
+        <motion.div 
+          variants={containerVariants}
+          initial="hidden"
+          whileInView="visible"
+          viewport={{ once: true }}
+          className="grid md:grid-cols-2 lg:grid-cols-3 gap-8"
+        >
           {features.map((feature, index) => {
             const IconComponent = feature.icon;
             return (
+              <motion.div 
+                key={index}
+                variants={itemVariants}
+                className="group p-8 rounded-3xl bg-gray-50 dark:bg-dark-lighter border border-gray-100 dark:border-dark-border hover:shadow-2xl hover:shadow-blue-500/10 transition-all duration-300"
+              >
+                <div className={`${feature.bgColor} ${feature.darkBg} w-14 h-14 rounded-2xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform duration-300`}>
+                  <IconComponent className={`h-7 w-7 ${feature.iconColor}`} />
+                </div>
+                <h3 className="text-2xl font-bold text-gray-900 dark:text-white mb-3 group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors">
+                  {feature.title}
+                </h3>
+                <p className="text-gray-600 dark:text-gray-400 leading-relaxed">
               <div key={index} className={`group h-72 w-full bg-gray-100 dark:bg-gray-800 ${feature.hoverColor} ${feature.borderColor} rounded-2xl shadow-md hover:shadow-2xl hover:shadow-blue-500/20 border dark:border-gray-800 transform hover:-translate-y-3 hover:scale-105 backdrop-blur-sm transition-all duration-300 ease-linear p-6`}>
                 <div className={`${feature.bgColor} w-12 h-12 rounded-lg flex items-center justify-center mb-6 transition-transform duration-300 group-hover:rotate-6 group-hover:scale-110`}>
                   <IconComponent className={`h-6 w-6 ${feature.iconColor}`} />
@@ -80,10 +159,10 @@ const Features = () => {
                 <p className="text-gray-600 dark:text-gray-300 text-base font-semibold leading-relaxed group-hover:text-gray-700 dark:group-hover:text-gray-200 transition-colors duration-300">
                   {feature.description}
                 </p>
-              </div>
+              </motion.div>
             );
           })}
-        </div>
+        </motion.div>
       </div>
     </section>
   );
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
index 411bf2ff..8fbf0548 100644
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -22,6 +22,15 @@ function Footer() {
   };
 
   return (
+    <footer className="dark:text-white bg-white dark:bg-dark border-t border-gray-200 dark:border-dark-border py-2 px-6 transition-colors duration-300">
+      <div className="max-w-7xl mx-auto">
+        <div className="flex flex-col md:flex-row justify-between items-center p-3">
+          <div className="flex items-center space-x-2 md:mb-0">
+            <a
+                href="https://github.com/GitMetricsLab/github_tracker"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="inline-flex items-center hover:text-gray-300 transition-colors"
     <footer
       className="
         w-full relative overflow-hidden transition-colors duration-300
diff --git a/src/components/Hero.tsx b/src/components/Hero.tsx
index a606d777..240a596e 100644
--- a/src/components/Hero.tsx
+++ b/src/components/Hero.tsx
@@ -1,11 +1,90 @@
+import { Search, ArrowRight, Sparkles } from 'lucide-react';
 import { Search, GitBranch, GitCommit, GitPullRequest, Layout } from 'lucide-react';
 import { Link } from 'react-router-dom';
+import { motion } from 'framer-motion';
 
 // Fixed array declaration for data structure rendering stability
 const MATRIX_CELLS = Array.from({ length: 21 }, (_, i) => i);
 
 const Hero = () => {
   return (
+    <section className="relative overflow-hidden px-6 py-24 md:py-32 bg-white dark:bg-dark transition-colors duration-300">
+      {/* Background Glows */}
+      <div aria-hidden="true" className="bg-glow top-[-10%] left-[-10%] w-[500px] h-[500px] bg-blue-500 rounded-full animate-pulse-slow"></div>
+      <div aria-hidden="true" className="bg-glow bottom-[-10%] right-[-10%] w-[400px] h-[400px] bg-indigo-500 rounded-full animate-pulse-slow" style={{ animationDelay: '2s' }}></div>
+
+      <div className="max-w-7xl mx-auto relative z-10">
+        <div className="text-center">
+          <motion.div
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.5 }}
+            className="inline-flex items-center space-x-2 px-3 py-1 rounded-full bg-blue-50 dark:bg-blue-900/30 border border-blue-100 dark:border-blue-800 text-blue-600 dark:text-blue-400 text-sm font-medium mb-8"
+          >
+            <Sparkles className="h-4 w-4" />
+            <span>Track Smarter. Build Better.</span>
+          </motion.div>
+
+          <motion.h1
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.5, delay: 0.1 }}
+            className="text-5xl md:text-7xl font-bold text-gray-900 dark:text-white mb-6 leading-[1.1] tracking-tight"
+          >
+            Track GitHub Activity
+            <span className="block text-gradient">Like Never Before</span>
+          </motion.h1>
+
+          <motion.p
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.5, delay: 0.2 }}
+            className="text-lg md:text-xl text-gray-600 dark:text-gray-400 mb-10 max-w-2xl mx-auto leading-relaxed"
+          >
+            Monitor and analyze GitHub user activity with powerful insights. Perfect for developers,
+            project managers, and teams who want to understand contribution patterns.
+          </motion.p>
+
+          <motion.div
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.5, delay: 0.3 }}
+            className="flex flex-col sm:flex-row gap-4 justify-center items-center mb-16"
+          >
+            <Link
+              to='/track'
+              className="group bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-700 hover:to-indigo-700 text-white px-8 py-4 rounded-full font-semibold transition-all transform hover:scale-105 shadow-[0_0_20px_rgba(37,99,235,0.3)] flex items-center space-x-2"
+            >
+              <Search className="h-5 w-5" />
+              <span>Start Tracking</span>
+              <ArrowRight className="h-5 w-5 group-hover:translate-x-1 transition-transform" />
+            </Link>
+          </motion.div>
+
+          {/* Social Proof */}
+          <motion.div
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            transition={{ duration: 0.5, delay: 0.5 }}
+            className="flex flex-col items-center space-y-4"
+          >
+            <div className="flex -space-x-3">
+              {[1, 2, 3, 4].map((i) => (
+                <img
+                  key={i}
+                  className="w-10 h-10 rounded-full border-2 border-white dark:border-dark object-cover bg-gray-200"
+                  src={`https://i.pravatar.cc/100?u=${i + 10}`}
+                  alt={`User ${i}`}
+                />
+              ))}
+              <div className="w-10 h-10 rounded-full border-2 border-white dark:border-dark bg-blue-600 flex items-center justify-center text-white text-xs font-bold">
+                +50
+              </div>
+            </div>
+            <p className="text-sm font-medium text-gray-500 dark:text-gray-400">
+              Join <span className="text-gray-900 dark:text-white font-bold">500+ developers</span> already tracking
+            </p>
+          </motion.div>
     <section className="relative overflow-hidden bg-slate-50 dark:bg-[#030712] text-slate-900 dark:text-white px-6 py-20 lg:py-32 min-h-[90vh] flex items-center transition-colors duration-500">
       
       {/* 1. Cyber Grid Overlay */}
diff --git a/src/components/HowItWorks.tsx b/src/components/HowItWorks.tsx
index 86224f9d..588fbc8c 100644
--- a/src/components/HowItWorks.tsx
+++ b/src/components/HowItWorks.tsx
@@ -1,3 +1,5 @@
+import { motion } from 'framer-motion';
+import { Search, LineChart, PieChart } from 'lucide-react';
 import { useContext } from 'react';
 import { ArrowDown, ArrowRight, BarChart3, Activity, Search } from 'lucide-react';
 import { ThemeContext } from '../context/ThemeContext';
@@ -9,20 +11,23 @@ const HowItWorks = () => {
 
   const steps = [
     {
-      number: 1,
+      icon: Search,
       title: 'Search Users',
+      description: 'Enter GitHub usernames or search for users by name. Add them to your tracking dashboard with one click.'
       description: 'Enter GitHub usernames or search for users by name. Add them to your tracking dashboard.',
       icon: Search,
     },
     {
-      number: 2,
+      icon: LineChart,
       title: 'Monitor Activity',
+      description: 'Watch real-time insights of commits, pull requests, issues, and other GitHub activities across multiple users.'
       description: 'Watch insights of commits, pull requests, issues, and other GitHub activities.',
       icon: Activity,
     },
     {
-      number: 3,
+      icon: PieChart,
       title: 'Analyze Insights',
+      description: 'Review detailed analytics, export professional reports, and gain valuable insights into development patterns.'
       description: 'Review detailed analytics, export reports, and gain valuable insights into development patterns.',
       icon: BarChart3,
     }
@@ -43,15 +48,60 @@ const HowItWorks = () => {
     : 'how-it-works-flow-line light';
 
   return (
+    <section id="how-it-works" className="px-6 py-24 bg-gray-50 dark:bg-dark-lighter transition-colors duration-300 relative overflow-hidden">
+      <div className="max-w-7xl mx-auto relative z-10">
+        <div className="text-center mb-16">
+          <motion.h2 
+            initial={{ opacity: 0, y: 20 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            viewport={{ once: true }}
+            className="text-4xl md:text-5xl font-bold text-gray-900 dark:text-white mb-4 tracking-tight"
+          >
+            How It Works
+          </motion.h2>
+          <motion.p 
+            initial={{ opacity: 0, y: 20 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            viewport={{ once: true }}
+            transition={{ delay: 0.1 }}
+            className="text-lg md:text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto"
+          >
     <section id="how-it-works" className={`relative overflow-hidden px-6 py-20 ${sectionBgClass}`}>
       <div className="mx-auto max-w-7xl">
         <div className="text-center mb-16">
           <h2 className={`text-3xl md:text-4xl font-bold mb-4 ${titleTextClass}`}>How It Works</h2>
           <p className={`text-lg md:text-xl max-w-2xl mx-auto ${bodyTextClass}`}>
             Get started in minutes with our simple three-step process
-          </p>
+          </motion.p>
         </div>
 
+        <div className="grid md:grid-cols-3 gap-12">
+          {steps.map((step, index) => {
+            const IconComponent = step.icon;
+            return (
+              <motion.div 
+                key={index}
+                initial={{ opacity: 0, y: 20 }}
+                whileInView={{ opacity: 1, y: 0 }}
+                viewport={{ once: true }}
+                transition={{ delay: index * 0.1 }}
+                className="text-center group"
+              >
+                <div className="relative mb-8">
+                  <div className="bg-blue-600 text-white w-20 h-20 rounded-3xl flex items-center justify-center mx-auto text-3xl font-bold shadow-xl shadow-blue-500/20 group-hover:rotate-6 transition-transform duration-300">
+                    <IconComponent className="h-10 w-10" />
+                  </div>
+                  {index < steps.length - 1 && (
+                    <div className="hidden lg:block absolute top-10 left-[calc(50%+60px)] w-[calc(100%-120px)] h-0.5 bg-gradient-to-r from-blue-200 to-transparent dark:from-blue-900"></div>
+                  )}
+                </div>
+                <h3 className="text-2xl font-bold text-gray-900 dark:text-white mb-4">{step.title}</h3>
+                <p className="text-gray-600 dark:text-gray-400 leading-relaxed max-w-xs mx-auto">
+                  {step.description}
+                </p>
+              </motion.div>
+            );
+          })}
         <div className="relative">
           <div className="pointer-events-none absolute left-0 right-0 top-28 hidden md:block">
             <div className="relative mx-auto h-10 max-w-6xl">
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
index fd5eac86..e70ec142 100644
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@@ -22,6 +22,44 @@ const Navbar: React.FC = () => {
   const closeMenu = () => setIsOpen(false);
 
   return (
+    <nav className="sticky top-0 z-50 bg-white/80 dark:bg-dark/80 backdrop-blur-md border-b border-gray-200 dark:border-dark-border transition-all duration-300">
+      <div className="container mx-auto px-6 py-4 flex justify-between items-center">
+        {/* Logo Section */}
+        <Link
+          to="/"
+          className="text-2xl font-bold tracking-tight hover:opacity-80 transition-opacity flex items-center group"
+        >
+          <div className="bg-blue-600 p-1.5 rounded-lg mr-2 group-hover:rotate-12 transition-transform">
+            <img src="/crl-icon.png" alt="CRL Icon" className="h-6 w-6 invert brightness-0" />
+          </div>
+          <span className="bg-clip-text text-transparent bg-gradient-to-r from-gray-900 to-gray-600 dark:from-white dark:to-gray-400">
+            GitHub Tracker
+          </span>
+        </Link>
+
+        {/* Desktop Links */}
+        <div className="hidden md:flex items-center space-x-2">
+          {[
+            { name: 'Home', path: '/' },
+            { name: 'Tracker', path: '/track' },
+            { name: 'Contributors', path: '/contributors' },
+            { name: 'Login', path: '/login' },
+          ].map((link) => (
+            <Link
+              key={link.name}
+              to={link.path}
+              className="px-4 py-2 rounded-full text-sm font-medium text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-dark-lighter hover:text-blue-600 dark:hover:text-white transition-all duration-200"
+            >
+              {link.name}
+            </Link>
+          ))}
+          
+          <div className="h-6 w-[1px] bg-gray-200 dark:bg-dark-border mx-2"></div>
+          
+          <button
+            onClick={toggleTheme}
+            className="p-2 rounded-full bg-gray-100 dark:bg-dark-lighter text-gray-600 dark:text-gray-300 hover:bg-blue-600 hover:text-white transition-all duration-300"
+            aria-label="Toggle theme"
     <nav className="sticky top-0 z-50 bg-white dark:bg-gray-900 border-b border-gray-200 dark:border-gray-800 transition-colors duration-300 backdrop-blur">
       <div className="max-w-7xl mx-auto px-6 py-4 flex items-center justify-between">
 
@@ -71,6 +109,26 @@ const Navbar: React.FC = () => {
           </button>
         </div>
 
+        {/* Mobile Menu Button */}
+        <div className="md:hidden flex items-center space-x-4">
+          <button
+            onClick={toggleTheme}
+            className="p-2 rounded-full bg-gray-100 dark:bg-dark-lighter text-gray-600 dark:text-gray-300"
+            aria-label="Toggle theme"
+          >
+            {mode === "dark" ? <Sun className="h-5 w-5" /> : <Moon className="h-5 w-5" />}
+          </button>
+          <button
+            onClick={() => setIsOpen(!isOpen)}
+            aria-label="Main menu"
+            aria-expanded={isOpen}
+            className="relative w-10 h-10 flex items-center justify-center bg-gray-100 dark:bg-dark-lighter rounded-full focus:outline-none"
+          >
+            <div className="flex flex-col space-y-1.5 w-5">
+              <span className={`block h-0.5 w-full bg-current rounded-full transition-transform duration-300 ${isOpen ? "rotate-45 translate-y-2" : ""}`}></span>
+              <span className={`block h-0.5 w-full bg-current rounded-full transition-opacity duration-300 ${isOpen ? "opacity-0" : ""}`}></span>
+              <span className={`block h-0.5 w-full bg-current rounded-full transition-transform duration-300 ${isOpen ? "-rotate-45 -translate-y-2" : ""}`}></span>
+            </div>
         {/* Mobile Controls */}
         <div className="md:hidden flex items-center gap-2">
 
@@ -104,6 +162,23 @@ const Navbar: React.FC = () => {
 
       {/* Mobile Menu */}
       {isOpen && (
+        <div className="md:hidden absolute top-full left-0 w-full bg-white dark:bg-dark border-b border-gray-200 dark:border-dark-border shadow-xl">
+          <div className="px-6 py-6 space-y-4">
+            {[
+              { name: 'Home', path: '/' },
+              { name: 'Tracker', path: '/track' },
+              { name: 'Contributors', path: '/contributors' },
+              { name: 'Login', path: '/login' },
+            ].map((link) => (
+              <Link
+                key={link.name}
+                to={link.path}
+                className="block px-4 py-3 rounded-xl text-base font-medium text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-dark-lighter transition-all"
+                onClick={() => setIsOpen(false)}
+              >
+                {link.name}
+              </Link>
+            ))}
         <div className="md:hidden border-t border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900">
           <div className="px-6 py-5 flex flex-col gap-3">
 
diff --git a/src/index.css b/src/index.css
index 3f5943c5..288bec1c 100644
--- a/src/index.css
+++ b/src/index.css
@@ -2,6 +2,13 @@
 @tailwind components;
 @tailwind utilities;
 
+.text-gradient {
+  @apply bg-clip-text text-transparent bg-gradient-to-r from-blue-600 to-indigo-600 dark:from-blue-400 dark:to-indigo-400;
+}
+
+.bg-glow {
+  @apply absolute -z-10 blur-[100px] opacity-20 dark:opacity-30;
+}
 @keyframes how-it-works-dash-flow {
   from {
     background-position: 0 0;
diff --git a/src/pages/About/About.tsx b/src/pages/About/About.tsx
index 04af2048..9e8717f8 100644
--- a/src/pages/About/About.tsx
+++ b/src/pages/About/About.tsx
@@ -44,7 +44,7 @@ const About = () => {
       </section>
 
       {/* Mission Section */}
-      <section className="py-20 px-6 bg-white dark:bg-gray-900 text-center">
+      <section className="py-20 px-6 bg-white dark:bg-dark text-center">
         <motion.div 
           initial={{ opacity: 0, y: 10 }}
           whileInView={{ opacity: 1, y: 0 }}
@@ -61,13 +61,13 @@ const About = () => {
       </section>
 
       {/* Features Section */}
-      <section className="py-24 px-6 bg-gray-50 dark:bg-gray-950">
+      <section className="py-24 px-6 bg-gray-50 dark:bg-dark">
         <h2 className="text-4xl font-bold text-center mb-12">What We Do</h2>
         <div className="grid grid-cols-1 md:grid-cols-3 gap-10 max-w-6xl mx-auto">
           {features.map((feature, idx) => (
             <motion.div
               key={idx}
-              className="p-8 bg-white dark:bg-gray-800 shadow-lg rounded-2xl hover:shadow-xl transition duration-300 text-center border border-gray-100 dark:border-gray-700"
+              className="p-8 bg-white dark:bg-dark-lighter shadow-lg rounded-2xl hover:shadow-xl transition duration-300 text-center border border-gray-100 dark:border-dark-border"
               whileHover={{ scale: 1.05 }}
               initial={{ opacity: 0, y: 30 }}
               whileInView={{ opacity: 1, y: 0 }}
diff --git a/src/pages/ContributorProfile/ContributorProfile.tsx b/src/pages/ContributorProfile/ContributorProfile.tsx
index ed1b714d..051b2c5e 100644
--- a/src/pages/ContributorProfile/ContributorProfile.tsx
+++ b/src/pages/ContributorProfile/ContributorProfile.tsx
@@ -57,7 +57,7 @@ export default function ContributorProfile() {
     );
 
   return (
-    <div className="max-w-3xl mx-auto mt-2 mb-2 p-4 bg-white dark:bg-gray-800 dark:text-white shadow-xl rounded-xl">
+    <div className="max-w-3xl mx-auto mt-2 mb-2 p-4 bg-white dark:bg-dark-lighter dark:text-white shadow-xl rounded-xl">
       <div className="text-center">
         <img
           src={profile.avatar_url}
diff --git a/src/pages/Contributors/Contributors.tsx b/src/pages/Contributors/Contributors.tsx
index d4fee52c..5e68782c 100644
--- a/src/pages/Contributors/Contributors.tsx
+++ b/src/pages/Contributors/Contributors.tsx
@@ -64,7 +64,7 @@ const ContributorsPage = () => {
   }
 
   return (
-    <div className="bg-white dark:bg-gray-900 text-black dark:text-white min-h-screen p-4 mt-4">
+    <div className="bg-white dark:bg-dark text-black dark:text-white min-h-screen p-4 mt-4">
       <Container>
         <Typography sx={{ pb: 2 }} variant="h4" align="center" gutterBottom>
           🤝 Contributors
diff --git a/tailwind.config.js b/tailwind.config.js
index 4cdd0f69..d11ec17c 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -5,9 +5,40 @@ module.exports = {
       "./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: {},
+  theme: {
+    extend: {
+      colors: {
+        primary: {
+          50: '#eff6ff',
+          100: '#dbeafe',
+          200: '#bfdbfe',
+          300: '#93c5fd',
+          400: '#60a5fa',
+          500: '#3b82f6',
+          600: '#2563eb',
+          700: '#1d4ed8',
+          800: '#1e40af',
+          900: '#1e3a8a',
+          950: '#172554',
+        },
+        dark: {
+          DEFAULT: '#0B0F1A',
+          lighter: '#161B29',
+          border: '#1F2937',
+        }
+      },
+      animation: {
+        'pulse-slow': 'pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite',
+        'float': 'float 6s ease-in-out infinite',
+      },
+      keyframes: {
+        float: {
+          '0%, 100%': { transform: 'translateY(0)' },
+          '50%': { transform: 'translateY(-20px)' },
+        }
+      }
     },
+  },
     plugins: [],
   }
   
\ No newline at end of file