diff --git a/landing/src/components/layout/Footer.tsx b/landing/src/components/layout/Footer.tsx
index e7cabc3..4d54c4d 100644
--- a/landing/src/components/layout/Footer.tsx
+++ b/landing/src/components/layout/Footer.tsx
@@ -8,47 +8,63 @@ const Footer: React.FC = () => {
     const isHomePage = location.pathname === '/';
 
     return (
-        <footer className="bg-dark-lighter py-12">
-            <div className="container mx-auto px-6">
+        <footer className="relative bg-gradient-to-br from-dark via-dark-lighter to-gray-900 py-12 overflow-hidden">
+            {/* Background gradient overlays */}
+            <div className="absolute inset-0 pointer-events-none">
+                <div className="absolute top-0 left-0 w-96 h-96 rounded-full bg-green-500/5 blur-2xl -translate-x-1/2 -translate-y-1/2"></div>
+                <div className="absolute bottom-0 right-0 w-96 h-96 rounded-full bg-blue-500/4 blur-3xl translate-x-1/2 translate-y-1/2"></div>
+                <div className="absolute inset-0 bg-gradient-to-t from-transparent via-green-500/5 to-transparent opacity-50"></div>
+            </div>
+
+            <div className="container mx-auto px-6 relative z-10">
                 <div className="flex flex-col md:flex-row justify-between items-start mb-8">
                     <div className="mb-6 md:mb-0">
                         <h3 className="text-2xl font-bold gradient-text mb-2">Devr.AI</h3>
-                        <p className="text-gray-400 text-sm max-w-xs">
+                        <p className="text-gray-300 text-sm max-w-xs leading-relaxed">
                             Revolutionizing developer relations with AI-powered community management.
                         </p>
                     </div>
                     <div className="flex flex-row gap-12">
                         <div>
-                            <h4 className="font-medium mb-3 text-white">Links</h4>
-                            <ul className="space-y-2">
-                                <li><a href={isHomePage ? "#features" : "/#features"} className="text-gray-400 hover:text-primary text-sm">Features</a></li>
-                                <li><a href={isHomePage ? "#how-it-works" : "/#how-it-works"} className="text-gray-400 hover:text-primary text-sm">How It Works</a></li>
-                                <li><a href={isHomePage ? "#integrations" : "/#integrations"} className="text-gray-400 hover:text-primary text-sm">Integrations</a></li>
-                                <li><a href={isHomePage ? "#waitlist" : "/#waitlist"} className="text-gray-400 hover:text-primary text-sm">Join Waitlist</a></li>
+                            <h4 className="font-semibold mb-4 text-white bg-gradient-to-r from-green-400 to-blue-500 bg-clip-text text-transparent">Links</h4>
+                            <ul className="space-y-3">
+                                <li><a href={isHomePage ? "#features" : "/#features"} className="text-gray-300 hover:text-transparent hover:bg-gradient-to-r hover:from-green-400 hover:to-blue-500 hover:bg-clip-text text-sm transition-all duration-300 ease-in-out">Features</a></li>
+                                <li><a href={isHomePage ? "#how-it-works" : "/#how-it-works"} className="text-gray-300 hover:text-transparent hover:bg-gradient-to-r hover:from-green-400 hover:to-blue-500 hover:bg-clip-text text-sm transition-all duration-300 ease-in-out">How It Works</a></li>
+                                <li><a href={isHomePage ? "#integrations" : "/#integrations"} className="text-gray-300 hover:text-transparent hover:bg-gradient-to-r hover:from-green-400 hover:to-blue-500 hover:bg-clip-text text-sm transition-all duration-300 ease-in-out">Integrations</a></li>
+                                <li><a href={isHomePage ? "#waitlist" : "/#waitlist"} className="text-gray-300 hover:text-transparent hover:bg-gradient-to-r hover:from-green-400 hover:to-blue-500 hover:bg-clip-text text-sm transition-all duration-300 ease-in-out">Join Waitlist</a></li>
                             </ul>
                         </div>
                         <div>
-                            <h4 className="font-medium mb-3 text-white">Legal</h4>
-                            <ul className="space-y-2">
-                                <li><Link to="/privacy-policy" className="text-gray-400 hover:text-primary text-sm">Privacy Policy</Link></li>
-                                <li><Link to="/terms-of-service" className="text-gray-400 hover:text-primary text-sm">Terms of Service</Link></li>
+                            <h4 className="font-semibold mb-4 text-white bg-gradient-to-r from-green-400 to-blue-500 bg-clip-text text-transparent">Legal</h4>
+                            <ul className="space-y-3">
+                                <li><Link to="/privacy-policy" className="text-gray-300 hover:text-transparent hover:bg-gradient-to-r hover:from-green-400 hover:to-blue-500 hover:bg-clip-text text-sm transition-all duration-300 ease-in-out">Privacy Policy</Link></li>
+                                <li><Link to="/terms-of-service" className="text-gray-300 hover:text-transparent hover:bg-gradient-to-r hover:from-green-400 hover:to-blue-500 hover:bg-clip-text text-sm transition-all duration-300 ease-in-out">Terms of Service</Link></li>
                             </ul>
                         </div>
                     </div>
                 </div>
 
-                <div className="border-t border-gray-800 pt-8 flex flex-col md:flex-row justify-between items-center">
-                    <p className="text-gray-500 text-sm mb-4 md:mb-0">
+                <div className="border-t border-gradient-to-r from-green-500/20 via-blue-500/20 to-green-500/20 pt-8 flex flex-col md:flex-row justify-between items-center" style={{borderImage: 'linear-gradient(90deg, rgba(34, 197, 94, 0.2), rgba(59, 130, 246, 0.2), rgba(34, 197, 94, 0.2)) 1'}}>
+                    <p className="text-gray-400 text-sm mb-4 md:mb-0">
                         &copy; {currentYear} Devr.AI. All rights reserved.
                     </p>
                     <div className="flex space-x-6">
-                        <a href="https://github.com/AOSSIE-Org/Devr.AI/" className="text-gray-400 hover:text-primary" target='_blank' rel="noreferrer">
+                        <a href="https://github.com/AOSSIE-Org/Devr.AI/" 
+                           className="text-gray-300 hover:text-white hover:scale-110 transition-all duration-300 ease-in-out p-2 rounded-lg hover:bg-gradient-to-r hover:from-green-500/10 hover:to-blue-500/10 hover:shadow-lg hover:shadow-green-500/20" 
+                           target='_blank' 
+                           rel="noreferrer">
                             <Github size={20} />
                         </a>
-                        <a href="https://x.com/aossie_org?lang=en" className="text-gray-400 hover:text-primary" target='_blank'>
+                        <a href="https://x.com/aossie_org?lang=en" 
+                           className="text-gray-300 hover:text-white hover:scale-110 transition-all duration-300 ease-in-out p-2 rounded-lg hover:bg-gradient-to-r hover:from-green-500/10 hover:to-blue-500/10 hover:shadow-lg hover:shadow-blue-500/20" 
+                           target='_blank'
+                           rel="noreferrer">
                             <Twitter size={20} />
                         </a>
-                        <a href="https://www.linkedin.com/company/aossie/?originalSubdomain=au" className="text-gray-400 hover:text-primary" target='_blank'>
+                        <a href="https://www.linkedin.com/company/aossie/?originalSubdomain=au" 
+                           className="text-gray-300 hover:text-white hover:scale-110 transition-all duration-300 ease-in-out p-2 rounded-lg hover:bg-gradient-to-r hover:from-green-500/10 hover:to-blue-500/10 hover:shadow-lg hover:shadow-green-500/20" 
+                           target='_blank'
+                           rel="noreferrer">
                             <Linkedin size={20} />
                         </a>
                     </div>
diff --git a/landing/src/components/sections/Waitlist.tsx b/landing/src/components/sections/Waitlist.tsx
index 0b54751..5bf3f2b 100644
--- a/landing/src/components/sections/Waitlist.tsx
+++ b/landing/src/components/sections/Waitlist.tsx
@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import { motion } from 'framer-motion';
 import { toast } from 'react-hot-toast';
-import { Send, AlertCircle } from 'lucide-react';
+import { Send, AlertCircle, CheckCircle, Sparkles } from 'lucide-react';
 
 const Waitlist: React.FC = () => {
   const [email, setEmail] = useState('');
@@ -84,162 +84,219 @@ const Waitlist: React.FC = () => {
   };
 
   return (
-    <section id="waitlist" className="section bg-dark-lighter">
-      <div className="container mx-auto px-6">
-        <div className="max-w-4xl mx-auto bg-dark rounded-2xl p-8 md:p-12 border border-gray-800">
-          <motion.div
-            initial={{ opacity: 0, y: 20 }}
-            whileInView={{ opacity: 1, y: 0 }}
-            viewport={{ once: true }}
-            className="text-center mb-8"
-          >
-            <h2 className="text-3xl md:text-4xl font-bold mb-4">
-              Join the <span className="gradient-text">Waitlist</span>
-            </h2>
-            <p className="text-gray-400">
-              Be among the first to experience Devr.AI and revolutionize your open-source community management.
-            </p>
-          </motion.div>
-
-          {submitted ? (
-            <motion.div
-              initial={{ opacity: 0, y: 20 }}
-              animate={{ opacity: 1, y: 0 }}
-              className="bg-green-900/30 border border-green-500 rounded-lg p-6 text-center"
-            >
-              <h3 className="text-xl font-semibold text-green-300 mb-2">Thanks for joining our waitlist!</h3>
-              <p className="text-gray-300">
-                We'll notify you when early access becomes available.
-                We're excited to have you on board!
-              </p>
-            </motion.div>
-          ) : (
-            <motion.form
-              initial={{ opacity: 0, y: 20 }}
-              whileInView={{ opacity: 1, y: 0 }}
-              viewport={{ once: true }}
-              transition={{ delay: 0.2 }}
-              onSubmit={handleSubmit}
-              className="space-y-4"
-            >
-              {error && (
-                <div className="bg-red-900/30 border border-red-500 rounded-lg p-3 flex items-start gap-2 text-sm text-red-300">
-                  <AlertCircle className="shrink-0 mt-0.5" size={16} />
-                  <p>{error}</p>
+    <section id="waitlist" className="section relative overflow-hidden">
+      {/* Background decoration */}
+      <div className="absolute inset-0 bg-gradient-to-br from-primary/5 via-transparent to-secondary/5 blur-3xl" />
+      <div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-96 h-96 bg-gradient-to-r from-primary/10 to-secondary/10 rounded-full blur-3xl" />
+      
+      <div className="container mx-auto px-6 relative z-10">
+        <div className="max-w-4xl mx-auto">
+          {/* Gradient border container */}
+          <div className="relative p-[1px] bg-gradient-to-r from-primary via-secondary to-primary rounded-2xl">
+            <div className="bg-dark/95 backdrop-blur-xl rounded-2xl p-8 md:p-12">
+              <motion.div
+                initial={{ opacity: 0, y: 20 }}
+                whileInView={{ opacity: 1, y: 0 }}
+                viewport={{ once: true }}
+                className="text-center mb-8"
+              >
+                <div className="flex items-center justify-center gap-2 mb-4">
+                  <Sparkles className="text-primary" size={24} />
+                  <h2 className="text-3xl md:text-4xl font-bold">
+                    Join the <span className="gradient-text">Waitlist</span>
+                  </h2>
+                  <Sparkles className="text-secondary" size={24} />
                 </div>
-              )}
+                <p className="text-gray-400 text-lg">
+                  Be among the first to experience Devr.AI and revolutionize your open-source community management.
+                </p>
+              </motion.div>
 
-              <div className="space-y-4">
-                <div>
-                  <label htmlFor="name" className="block text-sm font-medium text-gray-400 mb-1">
-                    Name
-                  </label>
-                  <input
-                    id="name"
-                    name="name"
-                    type="text"
-                    value={name}
-                    onChange={(e) => setName(e.target.value)}
-                    required
-                    placeholder="Your name"
-                    className="w-full px-4 py-3 bg-dark-card border border-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-primary text-white placeholder-gray-500"
-                  />
-                </div>
+              {submitted ? (
+                <motion.div
+                  initial={{ opacity: 0, scale: 0.95 }}
+                  animate={{ opacity: 1, scale: 1 }}
+                  className="relative"
+                >
+                  <div className="absolute inset-0 bg-gradient-to-r from-green-500/20 to-emerald-500/20 rounded-xl blur-xl" />
+                  <div className="relative bg-gradient-to-r from-green-900/40 to-emerald-900/40 border border-green-500/50 rounded-xl p-8 text-center backdrop-blur-sm">
+                    <div className="flex items-center justify-center mb-4">
+                      <CheckCircle className="text-green-400" size={48} />
+                    </div>
+                    <h3 className="text-2xl font-bold text-green-300 mb-3">Welcome to the future!</h3>
+                    <p className="text-gray-300 text-lg">
+                      You're now on our exclusive waitlist. We'll notify you the moment early access becomes available.
+                    </p>
+                    <div className="mt-6 p-4 bg-green-900/20 rounded-lg border border-green-500/30">
+                      <p className="text-green-400 font-medium">
+                        🎉 Keep an eye on your inbox for exciting updates!
+                      </p>
+                    </div>
+                  </div>
+                </motion.div>
+              ) : (
+                <motion.form
+                  initial={{ opacity: 0, y: 20 }}
+                  whileInView={{ opacity: 1, y: 0 }}
+                  viewport={{ once: true }}
+                  transition={{ delay: 0.2 }}
+                  onSubmit={handleSubmit}
+                  className="space-y-6"
+                >
+                  {error && (
+                    <motion.div
+                      initial={{ opacity: 0, x: -20 }}
+                      animate={{ opacity: 1, x: 0 }}
+                      className="relative"
+                    >
+                      <div className="absolute inset-0 bg-gradient-to-r from-red-500/20 to-orange-500/20 rounded-lg blur-sm" />
+                      <div className="relative bg-red-900/40 border border-red-500/50 rounded-lg p-4 flex items-start gap-3 backdrop-blur-sm">
+                        <AlertCircle className="shrink-0 mt-0.5 text-red-400" size={20} />
+                        <p className="text-red-300 font-medium">{error}</p>
+                      </div>
+                    </motion.div>
+                  )}
 
-                <div>
-                  <label htmlFor="email" className="block text-sm font-medium text-gray-400 mb-1">
-                    Email
-                  </label>
-                  <input
-                    id="email"
-                    name="email"
-                    type="email"
-                    value={email}
-                    onChange={(e) => setEmail(e.target.value)}
-                    required
-                    placeholder="your@email.com"
-                    className="w-full px-4 py-3 bg-dark-card border border-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-primary text-white placeholder-gray-500"
-                  />
-                </div>
+                  <div className="grid md:grid-cols-2 gap-6">
+                    <div className="space-y-2">
+                      <label htmlFor="name" className="block text-sm font-semibold text-gray-300 mb-2">
+                        Full Name
+                      </label>
+                      <div className="relative group">
+                        <div className="absolute inset-0 bg-gradient-to-r from-primary/50 to-secondary/50 rounded-xl blur-sm opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
+                        <input
+                          id="name"
+                          name="name"
+                          type="text"
+                          value={name}
+                          onChange={(e) => setName(e.target.value)}
+                          required
+                          placeholder="Enter your full name"
+                          className="relative w-full px-4 py-4 bg-dark-card/80 border border-gray-700 rounded-xl focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary/50 text-white placeholder-gray-500 backdrop-blur-sm transition-all duration-300 hover:border-gray-600"
+                        />
+                      </div>
+                    </div>
 
-                <div>
-                  <label htmlFor="organization" className="block text-sm font-medium text-gray-400 mb-1">
-                    Organization
-                  </label>
-                  <input
-                    id="organization"
-                    name="organization"
-                    type="text"
-                    value={organization}
-                    onChange={(e) => setOrganization(e.target.value)}
-                    required
-                    placeholder="Your organization"
-                    className="w-full px-4 py-3 bg-dark-card border border-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-primary text-white placeholder-gray-500"
-                  />
-                </div>
+                    <div className="space-y-2">
+                      <label htmlFor="email" className="block text-sm font-semibold text-gray-300 mb-2">
+                        Email Address
+                      </label>
+                      <div className="relative group">
+                        <div className="absolute inset-0 bg-gradient-to-r from-primary/50 to-secondary/50 rounded-xl blur-sm opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
+                        <input
+                          id="email"
+                          name="email"
+                          type="email"
+                          value={email}
+                          onChange={(e) => setEmail(e.target.value)}
+                          required
+                          placeholder="your@email.com"
+                          className="relative w-full px-4 py-4 bg-dark-card/80 border border-gray-700 rounded-xl focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary/50 text-white placeholder-gray-500 backdrop-blur-sm transition-all duration-300 hover:border-gray-600"
+                        />
+                      </div>
+                    </div>
+                  </div>
 
-                <div>
-                  <label htmlFor="role" className="block text-sm font-medium text-gray-400 mb-1">
-                    Your Role
-                  </label>
-                  <select
-                    id="role"
-                    name="role"
-                    value={role}
-                    onChange={(e) => setRole(e.target.value)}
-                    required
-                    className="w-full px-4 py-3 bg-dark-card border border-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-primary text-white"
-                  >
-                    <option value="">Select your role</option>
-                    {roleOptions.map((option) => (
-                      <option key={option} value={option}>
-                        {option}
-                      </option>
-                    ))}
-                  </select>
-                </div>
+                  <div className="space-y-2">
+                    <label htmlFor="organization" className="block text-sm font-semibold text-gray-300 mb-2">
+                      Organization
+                    </label>
+                    <div className="relative group">
+                      <div className="absolute inset-0 bg-gradient-to-r from-primary/50 to-secondary/50 rounded-xl blur-sm opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
+                      <input
+                        id="organization"
+                        name="organization"
+                        type="text"
+                        value={organization}
+                        onChange={(e) => setOrganization(e.target.value)}
+                        required
+                        placeholder="Your company, university, or organization"
+                        className="relative w-full px-4 py-4 bg-dark-card/80 border border-gray-700 rounded-xl focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary/50 text-white placeholder-gray-500 backdrop-blur-sm transition-all duration-300 hover:border-gray-600"
+                      />
+                    </div>
+                  </div>
 
-                <div>
-                  <label htmlFor="suggestions" className="block text-sm font-medium text-gray-400 mb-1">
-                    Suggestions (optional)
-                  </label>
-                  <textarea
-                    id="suggestions"
-                    name="suggestions"
-                    value={suggestions}
-                    onChange={(e) => setSuggestions(e.target.value)}
-                    placeholder="Any suggestions or comments"
-                    className="w-full px-4 py-3 bg-dark-card border border-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-primary text-white placeholder-gray-500"
-                    rows={4}
-                  />
-                </div>
-              </div>
+                  <div className="space-y-2">
+                    <label htmlFor="role" className="block text-sm font-semibold text-gray-300 mb-2">
+                      Your Role
+                    </label>
+                    <div className="relative group">
+                      <div className="absolute inset-0 bg-gradient-to-r from-primary/50 to-secondary/50 rounded-xl blur-sm opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
+                      <select
+                        id="role"
+                        name="role"
+                        value={role}
+                        onChange={(e) => setRole(e.target.value)}
+                        required
+                        className="relative w-full px-4 py-4 bg-dark-card/80 border border-gray-700 rounded-xl focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary/50 text-white backdrop-blur-sm transition-all duration-300 hover:border-gray-600"
+                      >
+                        <option value="" className="bg-dark-card">Select your role</option>
+                        {roleOptions.map((option) => (
+                          <option key={option} value={option} className="bg-dark-card">
+                            {option}
+                          </option>
+                        ))}
+                      </select>
+                    </div>
+                  </div>
 
-              <div className="flex flex-col items-center space-y-2 mt-6">
-                <button
-                  type="submit"
-                  disabled={submitting}
-                  className="w-full md:w-auto btn-primary flex items-center justify-center gap-2 min-w-[200px]"
-                >
-                  {submitting ? (
-                    <motion.div
-                      animate={{ rotate: 360 }}
-                      transition={{ duration: 1, repeat: Infinity, ease: "linear" }}
-                      className="w-5 h-5 border-2 border-white border-t-transparent rounded-full"
-                    />
-                  ) : (
-                    <>
-                      <Send size={18} />
-                      Join Waitlist
-                    </>
-                  )}
-                </button>
-                <p className="text-xs text-gray-500">
-                  We'll notify you when early access becomes available.
-                </p>
-              </div>
-            </motion.form>
-          )}
+                  <div className="space-y-2">
+                    <label htmlFor="suggestions" className="block text-sm font-semibold text-gray-300 mb-2">
+                      Suggestions & Comments <span className="text-gray-500 font-normal">(optional)</span>
+                    </label>
+                    <div className="relative group">
+                      <div className="absolute inset-0 bg-gradient-to-r from-primary/50 to-secondary/50 rounded-xl blur-sm opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
+                      <textarea
+                        id="suggestions"
+                        name="suggestions"
+                        value={suggestions}
+                        onChange={(e) => setSuggestions(e.target.value)}
+                        placeholder="Share your thoughts, feature requests, or any feedback..."
+                        className="relative w-full px-4 py-4 bg-dark-card/80 border border-gray-700 rounded-xl focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary/50 text-white placeholder-gray-500 backdrop-blur-sm transition-all duration-300 hover:border-gray-600 resize-none"
+                        rows={4}
+                      />
+                    </div>
+                  </div>
+
+                  <div className="flex flex-col items-center space-y-4 pt-4">
+                    <div className="relative group">
+                      <div className="absolute inset-0 bg-gradient-to-r from-primary to-secondary rounded-xl blur-lg opacity-75 group-hover:opacity-100 transition-opacity duration-300" />
+                      <button
+                        type="submit"
+                        disabled={submitting}
+                        className="relative w-full md:w-auto bg-gradient-to-r from-black via-green-500 to-black hover:from-black hover:via-green-400 hover:to-black text-white font-bold py-4 px-8 rounded-xl flex items-center justify-center gap-3 min-w-[250px] transition-all duration-500 ease-in-out transform hover:scale-105 hover:shadow-2xl hover:shadow-green-500/25 disabled:opacity-50 disabled:cursor-not-allowed disabled:transform-none shadow-lg active:scale-95"
+                      >
+                        {submitting ? (
+                          <>
+                            <motion.div
+                              animate={{ rotate: 360 }}
+                              transition={{ duration: 1, repeat: Infinity, ease: "linear" }}
+                              className="w-5 h-5 border-2 border-white border-t-transparent rounded-full"
+                            />
+                            <span>Joining Waitlist...</span>
+                          </>
+                        ) : (
+                          <>
+                            <Send size={20} />
+                            <span>Join Waitlist</span>
+                          </>
+                        )}
+                      </button>
+                    </div>
+                    
+                    <div className="text-center space-y-2">
+                      <p className="text-sm text-gray-400">
+                        🚀 We'll notify you when early access becomes available
+                      </p>
+                      <p className="text-xs text-gray-500">
+                        Join <span className="text-primary font-semibold">1000+</span> developers already on the list
+                      </p>
+                    </div>
+                  </div>
+                </motion.form>
+              )}
+            </div>
+          </div>
         </div>
       </div>
     </section>