diff --git a/client/pages/Support.tsx b/client/pages/Support.tsx
new file mode 100644
index 00000000..00bfe39c
--- /dev/null
+++ b/client/pages/Support.tsx
@@ -0,0 +1,467 @@
+import { useState, useEffect } from "react";
+import Layout from "@/components/Layout";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import LoadingScreen from "@/components/LoadingScreen";
+import { aethexToast } from "@/lib/aethex-toast";
+import { Link } from "react-router-dom";
+import { 
+  Headphones, 
+  MessageCircle, 
+  Clock, 
+  CheckCircle,
+  ArrowRight,
+  Search,
+  Book,
+  Video,
+  Mail,
+  Phone,
+  HelpCircle,
+  FileText,
+  Settings,
+  Bug,
+  Lightbulb,
+  Shield,
+  Zap
+} from "lucide-react";
+
+export default function Support() {
+  const [isLoading, setIsLoading] = useState(true);
+  const [selectedCategory, setSelectedCategory] = useState("all");
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setIsLoading(false);
+      aethexToast.system("Support center loaded successfully");
+    }, 1000);
+
+    return () => clearTimeout(timer);
+  }, []);
+
+  const supportOptions = [
+    {
+      title: "Live Chat Support",
+      description: "Get instant help from our support team",
+      icon: MessageCircle,
+      availability: "24/7",
+      responseTime: "< 5 minutes",
+      bestFor: "Urgent issues, quick questions",
+      color: "from-green-500 to-emerald-600"
+    },
+    {
+      title: "Email Support",
+      description: "Detailed assistance for complex problems",
+      icon: Mail,
+      availability: "Business hours",
+      responseTime: "< 4 hours",
+      bestFor: "Technical issues, account problems",
+      color: "from-blue-500 to-cyan-600"
+    },
+    {
+      title: "Phone Support",
+      description: "Direct conversation with technical experts",
+      icon: Phone,
+      availability: "Mon-Fri 9AM-6PM PST",
+      responseTime: "Immediate",
+      bestFor: "Enterprise customers, urgent issues",
+      color: "from-purple-500 to-indigo-600"
+    },
+    {
+      title: "Community Forum",
+      description: "Get help from the community and experts",
+      icon: Headphones,
+      availability: "24/7",
+      responseTime: "< 2 hours",
+      bestFor: "General questions, discussions",
+      color: "from-orange-500 to-red-600"
+    }
+  ];
+
+  const faqs = [
+    {
+      category: "Getting Started",
+      questions: [
+        {
+          question: "How do I create my first AeThex project?",
+          answer: "Install the AeThex CLI with 'npm install -g @aethex/cli', then run 'aethex create my-project' to get started.",
+          helpful: 89
+        },
+        {
+          question: "What are the system requirements?",
+          answer: "AeThex works on Windows 10+, macOS 10.15+, and Ubuntu 18.04+. You'll need Node.js 16+ and 4GB RAM minimum.",
+          helpful: 76
+        }
+      ]
+    },
+    {
+      category: "Technical Issues",
+      questions: [
+        {
+          question: "My game is running slowly, how can I optimize it?",
+          answer: "Check our performance optimization guide. Common fixes include reducing texture sizes, optimizing scripts, and using object pooling.",
+          helpful: 94
+        },
+        {
+          question: "How do I fix deployment errors?",
+          answer: "Most deployment errors are due to configuration issues. Check your environment variables and API keys in the AeThex dashboard.",
+          helpful: 82
+        }
+      ]
+    },
+    {
+      category: "Billing & Account",
+      questions: [
+        {
+          question: "How do I upgrade my plan?",
+          answer: "Visit your account dashboard and click 'Upgrade Plan'. Changes take effect immediately with prorated billing.",
+          helpful: 91
+        },
+        {
+          question: "Can I cancel my subscription anytime?",
+          answer: "Yes, you can cancel anytime from your account settings. You'll retain access until the end of your billing period.",
+          helpful: 88
+        }
+      ]
+    }
+  ];
+
+  const resources = [
+    {
+      title: "Documentation",
+      description: "Comprehensive guides and API references",
+      icon: Book,
+      link: "/docs",
+      color: "from-blue-500 to-cyan-600"
+    },
+    {
+      title: "Video Tutorials",
+      description: "Step-by-step visual learning",
+      icon: Video,
+      link: "/tutorials",
+      color: "from-red-500 to-pink-600"
+    },
+    {
+      title: "System Status",
+      description: "Real-time service status and updates",
+      icon: Settings,
+      link: "/status",
+      color: "from-green-500 to-emerald-600"
+    },
+    {
+      title: "Feature Requests",
+      description: "Suggest new features and improvements",
+      icon: Lightbulb,
+      link: "/feedback",
+      color: "from-yellow-500 to-orange-600"
+    }
+  ];
+
+  const categories = ["all", "getting-started", "technical", "billing", "account"];
+
+  const filteredFaqs = selectedCategory === "all" 
+    ? faqs 
+    : faqs.filter(faq => faq.category.toLowerCase().replace(/\s+/g, '-').includes(selectedCategory.replace('-', ' ')));
+
+  if (isLoading) {
+    return <LoadingScreen message="Loading Support Center..." showProgress={true} duration={1000} />;
+  }
+
+  return (
+    <Layout>
+      <div className="min-h-screen bg-aethex-gradient">
+        {/* Hero Section */}
+        <section className="relative py-20 lg:py-32">
+          <div className="container mx-auto px-4 text-center relative z-10">
+            <div className="max-w-4xl mx-auto space-y-8">
+              <Badge variant="outline" className="border-aethex-400/50 text-aethex-400 animate-bounce-gentle">
+                <Headphones className="h-3 w-3 mr-1" />
+                Support Center
+              </Badge>
+              
+              <h1 className="text-4xl lg:text-6xl font-bold leading-tight">
+                <span className="text-gradient-purple">We're Here to Help</span>
+              </h1>
+              
+              <p className="text-xl text-muted-foreground max-w-3xl mx-auto">
+                Get the support you need to succeed with AeThex. Our team of experts 
+                is ready to help you overcome any challenge.
+              </p>
+
+              {/* Search Bar */}
+              <div className="relative max-w-lg mx-auto">
+                <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-5 w-5 text-muted-foreground" />
+                <input
+                  type="text"
+                  placeholder="Search for help..."
+                  className="w-full pl-10 pr-4 py-3 rounded-lg border border-border/50 bg-background/50 backdrop-blur-sm focus:border-aethex-400 focus:outline-none text-foreground placeholder:text-muted-foreground"
+                />
+              </div>
+            </div>
+          </div>
+        </section>
+
+        {/* Support Options */}
+        <section className="py-20 bg-background/30">
+          <div className="container mx-auto px-4">
+            <div className="text-center mb-16 animate-slide-up">
+              <h2 className="text-3xl lg:text-4xl font-bold text-gradient mb-4">
+                Choose Your Support Channel
+              </h2>
+              <p className="text-lg text-muted-foreground">
+                Multiple ways to get help based on your needs
+              </p>
+            </div>
+
+            <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 max-w-6xl mx-auto">
+              {supportOptions.map((option, index) => {
+                const Icon = option.icon;
+                return (
+                  <Card 
+                    key={index}
+                    className="border-border/50 hover:border-aethex-400/50 transition-all duration-500 hover-lift animate-scale-in"
+                    style={{ animationDelay: `${index * 0.1}s` }}
+                  >
+                    <CardHeader>
+                      <div className="flex items-center space-x-4">
+                        <div className={`p-3 rounded-lg bg-gradient-to-r ${option.color}`}>
+                          <Icon className="h-6 w-6 text-white" />
+                        </div>
+                        <div className="flex-1">
+                          <CardTitle className="text-xl">{option.title}</CardTitle>
+                          <CardDescription className="mt-1">
+                            {option.description}
+                          </CardDescription>
+                        </div>
+                      </div>
+                    </CardHeader>
+                    <CardContent className="space-y-4">
+                      <div className="grid grid-cols-1 gap-3 text-sm">
+                        <div className="flex justify-between">
+                          <span className="text-muted-foreground">Availability:</span>
+                          <span className="font-semibold text-aethex-400">{option.availability}</span>
+                        </div>
+                        <div className="flex justify-between">
+                          <span className="text-muted-foreground">Response Time:</span>
+                          <span className="font-semibold text-aethex-400">{option.responseTime}</span>
+                        </div>
+                        <div className="flex justify-between">
+                          <span className="text-muted-foreground">Best For:</span>
+                          <span className="font-semibold">{option.bestFor}</span>
+                        </div>
+                      </div>
+                      
+                      <Button asChild className="w-full">
+                        <Link to="/contact">
+                          Get Support
+                          <ArrowRight className="h-4 w-4 ml-2" />
+                        </Link>
+                      </Button>
+                    </CardContent>
+                  </Card>
+                );
+              })}
+            </div>
+          </div>
+        </section>
+
+        {/* FAQ Section */}
+        <section className="py-20">
+          <div className="container mx-auto px-4">
+            <div className="text-center mb-16 animate-slide-up">
+              <h2 className="text-3xl lg:text-4xl font-bold text-gradient mb-4">
+                Frequently Asked Questions
+              </h2>
+              <p className="text-lg text-muted-foreground">
+                Quick answers to common questions
+              </p>
+            </div>
+
+            <div className="max-w-4xl mx-auto">
+              {/* Category Filter */}
+              <div className="flex flex-wrap justify-center gap-2 mb-12">
+                {categories.map((category, index) => (
+                  <Button
+                    key={category}
+                    variant={selectedCategory === category ? "default" : "outline"}
+                    size="sm"
+                    onClick={() => setSelectedCategory(category)}
+                    className={`animate-scale-in ${
+                      selectedCategory === category 
+                        ? 'bg-gradient-to-r from-aethex-500 to-neon-blue' 
+                        : ''
+                    }`}
+                    style={{ animationDelay: `${index * 0.1}s` }}
+                  >
+                    {category.charAt(0).toUpperCase() + category.slice(1).replace('-', ' ')}
+                  </Button>
+                ))}
+              </div>
+
+              {/* FAQ Cards */}
+              <div className="space-y-8">
+                {filteredFaqs.map((category, categoryIndex) => (
+                  <div key={categoryIndex}>
+                    <h3 className="text-xl font-semibold text-gradient mb-4">{category.category}</h3>
+                    <div className="space-y-4">
+                      {category.questions.map((faq, faqIndex) => (
+                        <Card 
+                          key={faqIndex}
+                          className="border-border/50 hover:border-aethex-400/50 transition-all duration-300 animate-slide-right"
+                          style={{ animationDelay: `${faqIndex * 0.1}s` }}
+                        >
+                          <CardContent className="p-6">
+                            <div className="space-y-3">
+                              <div className="flex items-start justify-between">
+                                <h4 className="font-semibold text-lg">{faq.question}</h4>
+                                <HelpCircle className="h-5 w-5 text-aethex-400 flex-shrink-0 mt-0.5" />
+                              </div>
+                              <p className="text-muted-foreground">{faq.answer}</p>
+                              <div className="flex items-center justify-between pt-3 border-t border-border/30">
+                                <div className="flex items-center space-x-2 text-sm text-muted-foreground">
+                                  <CheckCircle className="h-4 w-4 text-green-400" />
+                                  <span>{faq.helpful}% found this helpful</span>
+                                </div>
+                                <div className="flex items-center space-x-2">
+                                  <Button size="sm" variant="ghost">
+                                    👍 Helpful
+                                  </Button>
+                                  <Button size="sm" variant="ghost">
+                                    👎 Not helpful
+                                  </Button>
+                                </div>
+                              </div>
+                            </div>
+                          </CardContent>
+                        </Card>
+                      ))}
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </div>
+          </div>
+        </section>
+
+        {/* Resources */}
+        <section className="py-20 bg-background/30">
+          <div className="container mx-auto px-4">
+            <div className="text-center mb-16 animate-slide-up">
+              <h2 className="text-3xl lg:text-4xl font-bold text-gradient mb-4">
+                Self-Help Resources
+              </h2>
+              <p className="text-lg text-muted-foreground">
+                Everything you need to succeed with AeThex
+              </p>
+            </div>
+
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 max-w-6xl mx-auto">
+              {resources.map((resource, index) => {
+                const Icon = resource.icon;
+                return (
+                  <Card 
+                    key={index}
+                    className="text-center border-border/50 hover:border-aethex-400/50 transition-all duration-300 hover-lift animate-scale-in"
+                    style={{ animationDelay: `${index * 0.1}s` }}
+                  >
+                    <CardHeader>
+                      <div className={`mx-auto w-16 h-16 rounded-lg bg-gradient-to-r ${resource.color} flex items-center justify-center mb-4`}>
+                        <Icon className="h-8 w-8 text-white" />
+                      </div>
+                      <CardTitle className="text-lg">{resource.title}</CardTitle>
+                      <CardDescription>{resource.description}</CardDescription>
+                    </CardHeader>
+                    <CardContent>
+                      <Button asChild size="sm" className="w-full">
+                        <Link to={resource.link}>
+                          Access Resource
+                          <ArrowRight className="h-3 w-3 ml-1" />
+                        </Link>
+                      </Button>
+                    </CardContent>
+                  </Card>
+                );
+              })}
+            </div>
+          </div>
+        </section>
+
+        {/* Emergency Support */}
+        <section className="py-20">
+          <div className="container mx-auto px-4">
+            <Card className="max-w-4xl mx-auto bg-gradient-to-r from-red-500/10 to-orange-500/10 border-red-500/30 animate-scale-in">
+              <CardContent className="p-8 text-center">
+                <div className="flex justify-center mb-4">
+                  <div className="p-3 rounded-full bg-red-500/20 border border-red-500/30">
+                    <Zap className="h-8 w-8 text-red-400" />
+                  </div>
+                </div>
+                <h3 className="text-2xl font-bold text-gradient mb-4">Critical Issue?</h3>
+                <p className="text-muted-foreground mb-6">
+                  If you're experiencing a critical production issue that's affecting your users, 
+                  contact our emergency support line for immediate assistance.
+                </p>
+                <div className="flex flex-col sm:flex-row justify-center gap-4">
+                  <Button size="lg" className="bg-red-500 hover:bg-red-600">
+                    <Phone className="h-5 w-5 mr-2" />
+                    Emergency Hotline
+                  </Button>
+                  <Button size="lg" variant="outline" className="border-red-500/50 text-red-400 hover:bg-red-500/10">
+                    <Bug className="h-5 w-5 mr-2" />
+                    Report Critical Bug
+                  </Button>
+                </div>
+              </CardContent>
+            </Card>
+          </div>
+        </section>
+
+        {/* CTA Section */}
+        <section className="py-20 bg-background/30">
+          <div className="container mx-auto px-4 text-center">
+            <div className="max-w-3xl mx-auto space-y-8 animate-scale-in">
+              <h2 className="text-3xl lg:text-4xl font-bold text-gradient-purple">
+                Still Need Help?
+              </h2>
+              <p className="text-xl text-muted-foreground">
+                Our support team is standing by to help you succeed. Don't hesitate to reach out 
+                with any questions or concerns.
+              </p>
+              
+              <div className="flex flex-col sm:flex-row justify-center gap-4">
+                <Button asChild size="lg" className="bg-gradient-to-r from-aethex-500 to-neon-blue hover:from-aethex-600 hover:to-neon-blue/90 glow-blue hover-lift text-lg px-8 py-6">
+                  <Link to="/contact" className="flex items-center space-x-2">
+                    <MessageCircle className="h-5 w-5" />
+                    <span>Contact Support</span>
+                    <ArrowRight className="h-5 w-5" />
+                  </Link>
+                </Button>
+                <Button asChild variant="outline" size="lg" className="border-aethex-400/50 hover:border-aethex-400 hover-lift text-lg px-8 py-6">
+                  <Link to="/community">Join Community</Link>
+                </Button>
+              </div>
+
+              <div className="grid grid-cols-3 gap-8 mt-12">
+                <div className="text-center">
+                  <Clock className="h-8 w-8 text-aethex-400 mx-auto mb-2" />
+                  <h3 className="font-semibold">24/7 Availability</h3>
+                  <p className="text-sm text-muted-foreground">Always here for you</p>
+                </div>
+                <div className="text-center">
+                  <Shield className="h-8 w-8 text-aethex-400 mx-auto mb-2" />
+                  <h3 className="font-semibold">Expert Team</h3>
+                  <p className="text-sm text-muted-foreground">Technical specialists</p>
+                </div>
+                <div className="text-center">
+                  <FileText className="h-8 w-8 text-aethex-400 mx-auto mb-2" />
+                  <h3 className="font-semibold">Comprehensive Docs</h3>
+                  <p className="text-sm text-muted-foreground">Detailed guides</p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </section>
+      </div>
+    </Layout>
+  );
+}