diff --git a/src/App.tsx b/src/App.tsx
index b00eba8..65aca8d 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -13,7 +13,7 @@ function App() {
 
         <Navbar />
 
-        <main className="flex-grow bg-gray-50 dark:bg-gray-800 flex justify-center items-center">
+        <main className="flex-grow bg-white dark:bg-dark flex justify-center items-center">
           <Router />
         </main>
 
@@ -25,7 +25,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 b8b2092..cc6542e 100644
--- a/src/components/Features.tsx
+++ b/src/components/Features.tsx
@@ -1,77 +1,124 @@
 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: 'Comprehensive charts and graphs showing commit patterns, contribution streaks, and repository activity over time.',
-      bgColor: 'bg-blue-100',
-      iconColor: 'text-blue-600'
+      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'
     },
     {
       icon: Users,
       title: 'Multi-User Tracking',
-      description: 'Monitor multiple GitHub users simultaneously and compare their activity levels and contribution patterns.',
-      bgColor: 'bg-green-100',
-      iconColor: 'text-green-600'
+      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'
     },
     {
       icon: Search,
       title: 'Smart Search',
-      description: 'Quickly find and add users to your tracking list with intelligent search and auto-suggestions.',
-      bgColor: 'bg-purple-100',
-      iconColor: 'text-purple-600'
+      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'
     },
     {
       icon: Zap,
       title: 'Real-time Updates',
-      description: 'Get instant notifications and updates when tracked users make new contributions or repositories.',
-      bgColor: 'bg-orange-100',
-      iconColor: 'text-orange-600'
+      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 First',
-      description: 'All data is fetched from public GitHub APIs. We don\'t store personal information or require GitHub access.',
-      bgColor: 'bg-red-100',
-      iconColor: 'text-red-600'
+      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: 'Export & Share',
-      description: 'Export activity reports and share insights with your team through various formats and integrations.',
-      bgColor: 'bg-indigo-100',
-      iconColor: 'text-indigo-600'
+      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'
     }
   ];
 
+  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 (
-              <div key={index} className="bg-gray-50 dark:bg-gray-800 p-8 rounded-2xl hover:shadow-lg transition-all duration-300">
-                <div className={`${feature.bgColor} w-12 h-12 rounded-lg flex items-center justify-center mb-6`}>
-                  <IconComponent className={`h-6 w-6 ${feature.iconColor}`} />
+              <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-xl font-semibold text-gray-900 dark:text-white mb-3">{feature.title}</h3>
-                <p className="text-gray-600 dark:text-gray-300 leading-relaxed">
+                <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">
                   {feature.description}
                 </p>
-              </div>
+              </motion.div>
             );
           })}
-        </div>
+        </motion.div>
       </div>
     </section>
   );
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
index 878366f..343ab97 100644
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -3,7 +3,7 @@ import { Link } from 'react-router-dom';
 
 function Footer() {
   return (
-    <footer className="dark:text-white bg-white dark:bg-gray-900 border-t border-gray-200 dark:border-gray-800 py-2 px-6 transition-colors duration-300">
+    <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">
diff --git a/src/components/Hero.tsx b/src/components/Hero.tsx
index 1549f8e..63a201b 100644
--- a/src/components/Hero.tsx
+++ b/src/components/Hero.tsx
@@ -1,30 +1,86 @@
-import { Search } from 'lucide-react';
+import { Search, ArrowRight, Sparkles } from 'lucide-react';
 import { Link } from 'react-router-dom';
+import { motion } from 'framer-motion';
 
 const Hero = () => {
   return (
-    <section className="relative bg-gradient-to-br px-6 py-10">
-      <div className="max-w-7xl mx-auto">
+    <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">
-          <h1 className="text-3xl md:text-4xl font-bold text-gray-900 dark:text-white mb-6 leading-tight">
+          <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-blue-600">Like Never Before</span>
-          </h1>
-          <p className="text-xl text-gray-600 dark:text-gray-300 mb-8 max-w-3xl mx-auto leading-relaxed">
+            <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 and repository engagement.
-          </p>
-          <div className="flex flex-col sm:flex-row gap-4 justify-center items-center">
-            <button className="bg-blue-600 text-white px-8 py-4 rounded-lg font-semibold hover:bg-blue-700 transition-all transform hover:scale-105 shadow-lg flex items-center space-x-2">
+            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" />
-              <Link to='/track'>Start Tracking</Link>
-            </button>
-            {/*
-            <button className="border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 px-8 py-4 rounded-lg font-semibold hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors flex items-center space-x-2">
-              <span>View Demo</span>
-              <ArrowRight className="h-5 w-5" />
-            </button>*/}
-          </div>
+              <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>
         </div>
       </div>
     </section>
diff --git a/src/components/HowItWorks.tsx b/src/components/HowItWorks.tsx
index 8abf1e1..62fb51e 100644
--- a/src/components/HowItWorks.tsx
+++ b/src/components/HowItWorks.tsx
@@ -1,45 +1,75 @@
+import { motion } from 'framer-motion';
+import { Search, LineChart, PieChart } from 'lucide-react';
 
 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.'
+      description: 'Enter GitHub usernames or search for users by name. Add them to your tracking dashboard with one click.'
     },
     {
-      number: 2,
+      icon: LineChart,
       title: 'Monitor Activity',
-      description: 'Watch insights of commits, pull requests, issues, and other GitHub activities.'
+      description: 'Watch real-time insights of commits, pull requests, issues, and other GitHub activities across multiple users.'
     },
     {
-      number: 3,
+      icon: PieChart,
       title: 'Analyze Insights',
-      description: 'Review detailed analytics, export reports, and gain valuable insights into development patterns.'
+      description: 'Review detailed analytics, export professional reports, and gain valuable insights into development patterns.'
     }
   ];
 
   return (
-    <section id="how-it-works" className="px-6 py-10 bg-gray-50 dark:bg-gray-800 transition-colors duration-300">
-      <div className="mx-auto">
+    <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">
-          <h2 className="text-3xl font-bold text-gray-900 dark:text-white mb-4">How It Works</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"
+          >
+            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"
+          >
             Get started in minutes with our simple three-step process
-          </p>
+          </motion.p>
         </div>
 
-        <div className="grid md:grid-cols-3 gap-8">
-          {steps.map((step, index) => (
-            <div key={index} className="text-center">
-              <div className="bg-blue-600 text-white w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-6 text-2xl font-bold">
-                {step.number}
-              </div>
-              <h3 className="text-xl font-semibold text-gray-900 dark:text-white mb-3">{step.title}</h3>
-              <p className="text-gray-600 dark:text-gray-300 leading-relaxed">
-                {step.description}
-              </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>
       </div>
     </section>
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
index c6cc86d..ceb6f87 100644
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@@ -15,124 +15,92 @@ const Navbar: React.FC = () => {
   const { toggleTheme, mode } = themeContext;
 
   return (
-    <nav className="sticky top-0 z-50 bg-white dark:bg-gray-900 text-black dark:text-white border-b border-gray-100 dark:border-gray-800 transition-colors duration-300">
+    <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 hover:text-gray-300 cursor-pointer flex items-center"
+          className="text-2xl font-bold tracking-tight hover:opacity-80 transition-opacity flex items-center group"
         >
-          <img src="/crl-icon.png" alt="CRL Icon" className="h-8 mr-2" />
-          GitHub Tracker
+          <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 space-x-6">
-          <Link
-            to="/"
-            className="text-lg font-medium hover:text-gray-300 transition-all px-2 py-1 border border-transparent hover:border-gray-400 rounded"
-          >
-            Home
-          </Link>
-          <Link
-            to="/track"
-            className="text-lg font-medium hover:text-gray-300 transition-all px-2 py-1 border border-transparent hover:border-gray-400 rounded"
-          >
-            Tracker
-          </Link>
-          <Link
-            to="/contributors"
-            className="text-lg font-medium hover:text-gray-300 transition-all px-2 py-1 border border-transparent hover:border-gray-400 rounded"
-          >
-            Contributors
-          </Link>
-          <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>
+        <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="text-sm font-semibold px-3 py-1 rounded border border-gray-500 hover:text-gray-300 hover:border-gray-300 transition duration-200"
+            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"
           >
             {mode === "dark" ? <Sun className="h-5 w-5" /> : <Moon className="h-5 w-5" />}
           </button>
         </div>
 
         {/* Mobile Menu Button */}
-        <div className="md:hidden">
+        <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)}
-            className="relative w-8 h-8 flex flex-col space-y-[5px] items-center group focus:outline-none"
+            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"
           >
-            <span
-              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-black dark: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 ${
-                isOpen ? "-rotate-45 -translate-y-2" : ""
-              }`}
-            ></span>
+            <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>
           </button>
         </div>
       </div>
 
       {/* Mobile Links */}
       {isOpen && (
-        <div className="md:hidden bg-white dark:bg-gray-800 text-black dark:text-white">
-          <div className="space-y-4 px-6 py-4">
-            <Link
-              to="/"
-              className="block text-lg font-medium hover:text-gray-300 transition-all px-2 py-1 border border-transparent hover:border-gray-400 rounded"
-              onClick={() => setIsOpen(false)}
-            >
-              Home
-            </Link>
-            <Link
-              to="/about"
-              className="block text-lg font-medium hover:text-gray-300 transition-all px-2 py-1 border border-transparent hover:border-gray-400 rounded"
-              onClick={() => setIsOpen(false)}
-            >
-              About
-            </Link>
-            <Link
-              to="/contact"
-              className="block text-lg font-medium hover:text-gray-300 transition-all px-2 py-1 border border-transparent hover:border-gray-400 rounded"
-              onClick={() => setIsOpen(false)}
-            >
-              Contact
-            </Link>
-            <Link
-              to="/contributors"
-              className="block text-lg font-medium hover:text-gray-300 transition-all px-2 py-1 border border-transparent hover:border-gray-400 rounded"
-              onClick={() => setIsOpen(false)}
-            >
-              Contributors
-            </Link>
-            <Link
-              to="/login"
-              className="block text-lg font-medium hover:text-gray-300 transition-all px-2 py-1 border border-transparent hover:border-gray-400 rounded"
-              onClick={() => setIsOpen(false)}
-            >
-              Login
-            </Link>
-            <button
-              onClick={() => {
-                toggleTheme();
-                setIsOpen(false);
-              }}
-              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 w-full text-left"
-            >
-              {mode === "dark" ? "🌞 Light" : "🌙 Dark"}
-            </button>
+        <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>
         </div>
       )}
diff --git a/src/index.css b/src/index.css
index f4a2957..1812f76 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;
+}
 
 .icon-merged {
   color: #2ea44f; /* Or use your theme color */
diff --git a/src/pages/About/About.tsx b/src/pages/About/About.tsx
index 04af204..9e8717f 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 b4ab931..c01f09d 100644
--- a/src/pages/ContributorProfile/ContributorProfile.tsx
+++ b/src/pages/ContributorProfile/ContributorProfile.tsx
@@ -51,7 +51,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 60270b1..3d746bf 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 4cdd0f6..d11ec17 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