diff --git a/client/pages/gameforge/GameForgeAbout.tsx b/client/pages/gameforge/GameForgeAbout.tsx
index 990dbf71..c21b232c 100644
--- a/client/pages/gameforge/GameForgeAbout.tsx
+++ b/client/pages/gameforge/GameForgeAbout.tsx
@@ -2,104 +2,249 @@ import Layout from "@/components/Layout";
 import { Button } from "@/components/ui/button";
 import { Badge } from "@/components/ui/badge";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import { Zap, Target, Users, Lightbulb } from "lucide-react";
+import { Heart, Rocket, Target, Globe } from "lucide-react";
 import { useNavigate } from "react-router-dom";
 
 export default function GameForgeAbout() {
   const navigate = useNavigate();
 
+  const milestones = [
+    {
+      year: 2020,
+      title: "GameForge Founded",
+      description:
+        "Born from a frustration with fragmented game development tools, we set out to create something better.",
+    },
+    {
+      year: 2021,
+      title: "First 1000 Developers",
+      description:
+        "Reached our first major milestone with developers from 50+ countries using GameForge.",
+    },
+    {
+      year: 2022,
+      title: "Monthly Shipping Model",
+      description:
+        "Launched our signature monthly shipping cycles helping developers release faster.",
+    },
+    {
+      year: 2023,
+      title: "100+ Games Shipped",
+      description:
+        "Celebrated as our community shipped over 100 games through the platform.",
+    },
+    {
+      year: 2024,
+      title: "Global Expansion",
+      description:
+        "Expanded to support multiple languages and localization for worldwide developers.",
+    },
+  ];
+
+  const values = [
+    {
+      icon: <Heart className="h-8 w-8 text-green-400" />,
+      title: "Creator First",
+      description:
+        "Everything we build is designed with developers and creators in mind. Your success is our success.",
+    },
+    {
+      icon: <Rocket className="h-8 w-8 text-green-400" />,
+      title: "Speed & Momentum",
+      description:
+        "We believe in rapid iteration and shipping fast. Monthly cycles keep your games fresh and your players engaged.",
+    },
+    {
+      icon: <Target className="h-8 w-8 text-green-400" />,
+      title: "Quality Obsessed",
+      description:
+        "High standards across everything. From tools to community, we maintain excellence in every detail.",
+    },
+    {
+      icon: <Globe className="h-8 w-8 text-green-400" />,
+      title: "Open Community",
+      description:
+        "We believe in the power of community. Together, we build stronger games and support each other.",
+    },
+  ];
+
   return (
     <Layout>
       <div className="relative min-h-screen bg-black text-white overflow-hidden">
-        {/* Animated backgrounds */}
         <div className="pointer-events-none absolute inset-0 opacity-[0.12] [background-image:radial-gradient(circle_at_top,#22c55e_0,rgba(0,0,0,0.45)_55%,rgba(0,0,0,0.9)_100%)]" />
         <div className="pointer-events-none absolute inset-0 bg-[linear-gradient(transparent_0,transparent_calc(100%-1px),rgba(34,197,94,0.05)_calc(100%-1px))] bg-[length:100%_32px]" />
         <div className="pointer-events-none absolute inset-0 opacity-[0.08] [background-image:linear-gradient(90deg,rgba(34,197,94,0.1)_1px,transparent_1px),linear-gradient(0deg,rgba(34,197,94,0.1)_1px,transparent_1px)] [background-size:50px_50px] animate-pulse" />
         <div className="pointer-events-none absolute top-20 left-10 w-72 h-72 bg-green-500/20 rounded-full blur-3xl animate-blob" />
-        <div className="pointer-events-none absolute bottom-20 right-10 w-72 h-72 bg-green-600/10 rounded-full blur-3xl animate-blob" />
+        <div className="pointer-events-none absolute bottom-20 right-10 w-72 h-72 bg-green-600/10 rounded-full blur-3xl animate-blob animation-delay-2000" />
 
         <main className="relative z-10">
           {/* Header */}
-          <section className="relative overflow-hidden py-12 lg:py-16">
+          <section className="py-16 lg:py-20">
             <div className="container mx-auto max-w-6xl px-4">
               <Button
-                onClick={() => navigate("/game-development")}
                 variant="ghost"
                 className="text-green-300 hover:bg-green-500/10 mb-8"
+                onClick={() => navigate("/gameforge")}
               >
                 ← Back to GameForge
               </Button>
 
-              <h1 className="text-4xl font-black tracking-tight text-green-300 sm:text-5xl mb-4">
-                About GameForge
+              <Badge className="border-green-400/40 bg-green-500/10 text-green-300 shadow-[0_0_20px_rgba(34,197,94,0.2)] mb-4">
+                <Rocket className="h-4 w-4 mr-2" />
+                Our Story
+              </Badge>
+              <h1 className="text-4xl font-black text-green-300 mb-4 lg:text-5xl">
+                Building the Future of Game Development
               </h1>
-              <p className="text-lg text-green-100/80 max-w-2xl">
-                Empowering developers to ship faster and better
+              <p className="text-lg text-green-100/80 max-w-3xl">
+                GameForge was born from a simple belief: game development should
+                be fast, accessible, and community-driven. We're on a mission to
+                empower creators worldwide to build amazing games.
               </p>
             </div>
           </section>
 
-          {/* Content */}
-          <section className="py-12 lg:py-16">
-            <div className="container mx-auto max-w-4xl px-4">
-              <div className="rounded-lg border border-green-400/30 bg-green-950/20 p-8 mb-12">
-                <h2 className="text-2xl font-bold text-green-300 mb-4">Our Mission</h2>
-                <p className="text-green-200/80 text-lg leading-relaxed">
-                  GameForge is dedicated to accelerating game development by providing studios with the tools, 
-                  practices, and infrastructure they need to maintain monthly shipping cycles. We believe that faster 
-                  iteration leads to better games and happier teams.
-                </p>
-              </div>
+          {/* Mission & Vision */}
+          <section className="py-16 border-y border-green-400/10 bg-black/40">
+            <div className="container mx-auto max-w-6xl px-4">
+              <div className="grid md:grid-cols-2 gap-12">
+                <div>
+                  <h2 className="text-3xl font-bold text-green-300 mb-4">
+                    Our Mission
+                  </h2>
+                  <p className="text-lg text-green-100/80 mb-4">
+                    To democratize game development by providing tools,
+                    resources, and community support that enable anyone to
+                    create and ship games at scale.
+                  </p>
+                  <p className="text-lg text-green-100/80">
+                    We believe that great games come from passionate creators.
+                    Our job is to remove barriers and accelerate their journey
+                    from idea to shipped product.
+                  </p>
+                </div>
 
-              {/* Values */}
-              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-                <Card className="bg-green-950/20 border-green-400/30">
-                  <CardHeader>
-                    <Zap className="h-8 w-8 text-green-400 mb-2" />
-                    <CardTitle className="text-green-300">Speed</CardTitle>
-                  </CardHeader>
-                  <CardContent>
-                    <p className="text-green-200/70">
-                      Fast iteration cycles that keep your team productive
-                    </p>
-                  </CardContent>
-                </Card>
-                <Card className="bg-green-950/20 border-green-400/30">
-                  <CardHeader>
-                    <Target className="h-8 w-8 text-green-400 mb-2" />
-                    <CardTitle className="text-green-300">Reliability</CardTitle>
-                  </CardHeader>
-                  <CardContent>
-                    <p className="text-green-200/70">
-                      Stable tools and practices you can depend on
-                    </p>
-                  </CardContent>
-                </Card>
-                <Card className="bg-green-950/20 border-green-400/30">
-                  <CardHeader>
-                    <Users className="h-8 w-8 text-green-400 mb-2" />
-                    <CardTitle className="text-green-300">Community</CardTitle>
-                  </CardHeader>
-                  <CardContent>
-                    <p className="text-green-200/70">
-                      Support from developers and studios using GameForge
-                    </p>
-                  </CardContent>
-                </Card>
-                <Card className="bg-green-950/20 border-green-400/30">
-                  <CardHeader>
-                    <Lightbulb className="h-8 w-8 text-green-400 mb-2" />
-                    <CardTitle className="text-green-300">Innovation</CardTitle>
-                  </CardHeader>
-                  <CardContent>
-                    <p className="text-green-200/70">
-                      Continuous improvement driven by user feedback
-                    </p>
-                  </CardContent>
-                </Card>
+                <div>
+                  <h2 className="text-3xl font-bold text-green-300 mb-4">
+                    Our Vision
+                  </h2>
+                  <p className="text-lg text-green-100/80 mb-4">
+                    A world where game development is accessible, fast, and
+                    collaborative. Where indie developers have the same tools
+                    and support as major studios.
+                  </p>
+                  <p className="text-lg text-green-100/80">
+                    We're building a platform where monthly shipping cycles are
+                    the norm, where community support accelerates growth, and
+                    where every creator has the chance to succeed.
+                  </p>
+                </div>
               </div>
             </div>
           </section>
+
+          {/* Our Values */}
+          <section className="py-16">
+            <div className="container mx-auto max-w-6xl px-4">
+              <h2 className="text-3xl font-bold text-green-300 mb-12">
+                Our Core Values
+              </h2>
+              <div className="grid md:grid-cols-2 gap-6">
+                {values.map((value, idx) => (
+                  <Card
+                    key={idx}
+                    className="bg-green-950/20 border-green-400/30 hover:border-green-400/60 transition-colors"
+                  >
+                    <CardHeader>
+                      <div className="flex items-start gap-4">
+                        <div className="flex-shrink-0">{value.icon}</div>
+                        <CardTitle className="text-green-300 text-xl">
+                          {value.title}
+                        </CardTitle>
+                      </div>
+                    </CardHeader>
+                    <CardContent>
+                      <p className="text-green-200/70">{value.description}</p>
+                    </CardContent>
+                  </Card>
+                ))}
+              </div>
+            </div>
+          </section>
+
+          {/* Timeline */}
+          <section className="py-16 border-t border-green-400/10 bg-black/40">
+            <div className="container mx-auto max-w-6xl px-4">
+              <h2 className="text-3xl font-bold text-green-300 mb-12">
+                Our Journey
+              </h2>
+              <div className="space-y-8">
+                {milestones.map((milestone, idx) => (
+                  <div key={idx} className="flex gap-6">
+                    <div className="flex flex-col items-center">
+                      <div className="w-4 h-4 rounded-full bg-green-400 border-4 border-black" />
+                      {idx < milestones.length - 1 && (
+                        <div className="w-1 h-24 bg-gradient-to-b from-green-400 to-transparent" />
+                      )}
+                    </div>
+                    <div className="pb-8">
+                      <Badge className="bg-green-500/20 border border-green-400/40 text-green-300 mb-2">
+                        {milestone.year}
+                      </Badge>
+                      <h3 className="text-xl font-bold text-green-300 mb-2">
+                        {milestone.title}
+                      </h3>
+                      <p className="text-green-200/70">
+                        {milestone.description}
+                      </p>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </div>
+          </section>
+
+          {/* Stats Section */}
+          <section className="py-16">
+            <div className="container mx-auto max-w-6xl px-4">
+              <div className="grid md:grid-cols-4 gap-6">
+                {[
+                  { value: "50K+", label: "Developers" },
+                  { value: "150+", label: "Games Shipped" },
+                  { value: "75+", label: "Countries" },
+                  { value: "99.9%", label: "Uptime" },
+                ].map((stat, idx) => (
+                  <Card
+                    key={idx}
+                    className="bg-green-950/30 border-green-400/40 text-center"
+                  >
+                    <CardContent className="pt-6">
+                      <div className="text-4xl font-black text-green-400 mb-2">
+                        {stat.value}
+                      </div>
+                      <p className="text-green-200/70">{stat.label}</p>
+                    </CardContent>
+                  </Card>
+                ))}
+              </div>
+            </div>
+          </section>
+
+          {/* Bottom CTA */}
+          <section className="py-16 border-t border-green-400/10">
+            <div className="container mx-auto max-w-4xl px-4 text-center">
+              <h2 className="text-3xl font-bold text-green-300 mb-4">
+                Join the Movement
+              </h2>
+              <p className="text-lg text-green-100/80 mb-8">
+                Be part of something bigger. Join thousands of developers
+                building the future of games.
+              </p>
+              <Button className="bg-green-400 text-black shadow-[0_0_30px_rgba(34,197,94,0.35)] hover:bg-green-300">
+                Start Building Today
+              </Button>
+            </div>
+          </section>
         </main>
       </div>
     </Layout>
diff --git a/client/pages/gameforge/GameForgePricing.tsx b/client/pages/gameforge/GameForgePricing.tsx
index f4402b6e..4fa02b91 100644
--- a/client/pages/gameforge/GameForgePricing.tsx
+++ b/client/pages/gameforge/GameForgePricing.tsx
@@ -2,55 +2,80 @@ import Layout from "@/components/Layout";
 import { Button } from "@/components/ui/button";
 import { Badge } from "@/components/ui/badge";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import { Check } from "lucide-react";
+import { Check, X, DollarSign, Zap } from "lucide-react";
 import { useNavigate } from "react-router-dom";
 
-const PRICING_TIERS = [
+interface PricingTier {
+  id: number;
+  name: string;
+  price: string | number;
+  period: string;
+  description: string;
+  cta: string;
+  highlighted: boolean;
+  features: {
+    name: string;
+    included: boolean;
+  }[];
+}
+
+const PRICING_TIERS: PricingTier[] = [
   {
-    name: "Studio Starter",
-    description: "For small teams just starting out",
-    price: "$99",
-    period: "/month",
-    features: [
-      "Monthly shipping cycles",
-      "Up to 5 team members",
-      "Core tools and templates",
-      "Community support",
-      "Basic analytics",
-    ],
+    id: 1,
+    name: "Indie",
+    price: "Free",
+    period: "Forever",
+    description: "Perfect for solo developers and small projects",
     cta: "Get Started",
     highlighted: false,
+    features: [
+      { name: "Up to 2 published games", included: true },
+      { name: "Community support", included: true },
+      { name: "Basic game templates", included: true },
+      { name: "Monthly shipping", included: false },
+      { name: "Revenue sharing", included: false },
+      { name: "Priority support", included: false },
+      { name: "Premium assets library", included: false },
+      { name: "Dedicated manager", included: false },
+    ],
   },
   {
-    name: "Studio Pro",
-    description: "For growing game studios",
-    price: "$299",
+    id: 2,
+    name: "Studio",
+    price: "$29",
     period: "/month",
-    features: [
-      "Everything in Starter",
-      "Unlimited team members",
-      "Advanced tools suite",
-      "Priority support",
-      "Custom integrations",
-      "Performance monitoring",
-    ],
+    description: "For small studios scaling their operations",
     cta: "Start Free Trial",
     highlighted: true,
+    features: [
+      { name: "Up to 10 published games", included: true },
+      { name: "Community support", included: true },
+      { name: "Basic game templates", included: true },
+      { name: "Monthly shipping", included: true },
+      { name: "Revenue sharing (70/30)", included: true },
+      { name: "Priority support", included: true },
+      { name: "Premium assets library", included: true },
+      { name: "Dedicated manager", included: false },
+    ],
   },
   {
-    name: "Studio Enterprise",
-    description: "For large-scale operations",
+    id: 3,
+    name: "Enterprise",
     price: "Custom",
-    features: [
-      "Everything in Pro",
-      "Dedicated support team",
-      "Custom development",
-      "On-premise options",
-      "SLA guarantees",
-      "White-label solutions",
-    ],
+    period: "Pricing",
+    description: "For established studios with custom needs",
     cta: "Contact Sales",
     highlighted: false,
+    features: [
+      { name: "Unlimited published games", included: true },
+      { name: "Community support", included: true },
+      { name: "Basic game templates", included: true },
+      { name: "Monthly shipping", included: true },
+      { name: "Revenue sharing (custom)", included: true },
+      { name: "Priority support", included: true },
+      { name: "Premium assets library", included: true },
+      { name: "Dedicated manager", included: true },
+    ],
   },
 ];
 
@@ -60,86 +85,177 @@ export default function GameForgePricing() {
   return (
     <Layout>
       <div className="relative min-h-screen bg-black text-white overflow-hidden">
-        {/* Animated backgrounds */}
         <div className="pointer-events-none absolute inset-0 opacity-[0.12] [background-image:radial-gradient(circle_at_top,#22c55e_0,rgba(0,0,0,0.45)_55%,rgba(0,0,0,0.9)_100%)]" />
         <div className="pointer-events-none absolute inset-0 bg-[linear-gradient(transparent_0,transparent_calc(100%-1px),rgba(34,197,94,0.05)_calc(100%-1px))] bg-[length:100%_32px]" />
         <div className="pointer-events-none absolute inset-0 opacity-[0.08] [background-image:linear-gradient(90deg,rgba(34,197,94,0.1)_1px,transparent_1px),linear-gradient(0deg,rgba(34,197,94,0.1)_1px,transparent_1px)] [background-size:50px_50px] animate-pulse" />
         <div className="pointer-events-none absolute top-20 left-10 w-72 h-72 bg-green-500/20 rounded-full blur-3xl animate-blob" />
-        <div className="pointer-events-none absolute bottom-20 right-10 w-72 h-72 bg-green-600/10 rounded-full blur-3xl animate-blob" />
+        <div className="pointer-events-none absolute bottom-20 right-10 w-72 h-72 bg-green-600/10 rounded-full blur-3xl animate-blob animation-delay-2000" />
 
         <main className="relative z-10">
           {/* Header */}
-          <section className="relative overflow-hidden py-12 lg:py-16">
+          <section className="py-16 lg:py-20">
             <div className="container mx-auto max-w-6xl px-4">
               <Button
-                onClick={() => navigate("/game-development")}
                 variant="ghost"
                 className="text-green-300 hover:bg-green-500/10 mb-8"
+                onClick={() => navigate("/gameforge")}
               >
                 ← Back to GameForge
               </Button>
 
-              <h1 className="text-4xl font-black tracking-tight text-green-300 sm:text-5xl mb-4">
-                GameForge Pricing
+              <Badge className="border-green-400/40 bg-green-500/10 text-green-300 shadow-[0_0_20px_rgba(34,197,94,0.2)] mb-4">
+                <DollarSign className="h-4 w-4 mr-2" />
+                Simple, Transparent Pricing
+              </Badge>
+              <h1 className="text-4xl font-black text-green-300 mb-4 lg:text-5xl">
+                Choose Your Plan
               </h1>
               <p className="text-lg text-green-100/80 max-w-2xl">
-                Flexible plans for studios of all sizes
+                Get started free and scale as you grow. No hidden fees, no
+                surprises.
               </p>
             </div>
           </section>
 
           {/* Pricing Cards */}
-          <section className="py-12 lg:py-16">
+          <section className="py-16">
             <div className="container mx-auto max-w-6xl px-4">
-              <div className="grid grid-cols-1 md:grid-cols-3 gap-8 mb-12">
+              <div className="grid lg:grid-cols-3 gap-8">
                 {PRICING_TIERS.map((tier) => (
                   <Card
-                    key={tier.name}
-                    className={`border transition-all ${
+                    key={tier.id}
+                    className={`relative border transition-all ${
                       tier.highlighted
-                        ? "bg-green-950/40 border-green-400 ring-2 ring-green-400/50"
-                        : "bg-green-950/20 border-green-400/30 hover:border-green-400/60"
+                        ? "border-green-400/60 bg-green-950/30 shadow-lg shadow-green-500/20 scale-105"
+                        : "border-green-400/30 bg-green-950/20 hover:border-green-400/60"
                     }`}
                   >
-                    <CardHeader>
-                      <CardTitle className="text-green-300">{tier.name}</CardTitle>
-                      <p className="text-sm text-green-200/70 mt-2">{tier.description}</p>
+                    {tier.highlighted && (
+                      <div className="absolute top-0 left-1/2 -translate-x-1/2 -translate-y-1/2">
+                        <Badge className="bg-green-400 text-black">
+                          Most Popular
+                        </Badge>
+                      </div>
+                    )}
+
+                    <CardHeader className="pb-6">
+                      <CardTitle className="text-2xl text-green-300">
+                        {tier.name}
+                      </CardTitle>
+                      <p className="text-sm text-green-200/70 mt-2">
+                        {tier.description}
+                      </p>
                     </CardHeader>
+
                     <CardContent className="space-y-6">
-                      <div>
-                        <div className="text-3xl font-bold text-green-300">
+                      {/* Price */}
+                      <div className="py-6 border-y border-green-400/10">
+                        <div className="text-4xl font-black text-green-300">
                           {tier.price}
                         </div>
-                        {tier.period && (
-                          <p className="text-sm text-green-200/70">{tier.period}</p>
-                        )}
+                        <p className="text-sm text-green-200/60 mt-1">
+                          {tier.period}
+                        </p>
                       </div>
 
-                      <ul className="space-y-3">
-                        {tier.features.map((feature) => (
-                          <li key={feature} className="flex items-start gap-3">
-                            <Check className="h-5 w-5 text-green-400 flex-shrink-0 mt-0.5" />
-                            <span className="text-green-200/80">{feature}</span>
-                          </li>
-                        ))}
-                      </ul>
-
+                      {/* CTA */}
                       <Button
-                        className={
+                        className={`w-full ${
                           tier.highlighted
-                            ? "w-full bg-green-400 text-black hover:bg-green-300"
-                            : "w-full border-green-400/60 text-green-300 hover:bg-green-500/10"
-                        }
-                        variant={tier.highlighted ? "default" : "outline"}
+                            ? "bg-green-400 text-black hover:bg-green-300"
+                            : "border border-green-400/60 text-green-300 hover:bg-green-500/10"
+                        }`}
                       >
                         {tier.cta}
                       </Button>
+
+                      {/* Features */}
+                      <div className="space-y-3">
+                        {tier.features.map((feature, idx) => (
+                          <div
+                            key={idx}
+                            className="flex items-center gap-3 text-sm"
+                          >
+                            {feature.included ? (
+                              <Check className="h-5 w-5 text-green-400 flex-shrink-0" />
+                            ) : (
+                              <X className="h-5 w-5 text-green-900 flex-shrink-0" />
+                            )}
+                            <span
+                              className={
+                                feature.included
+                                  ? "text-green-100"
+                                  : "text-green-200/40"
+                              }
+                            >
+                              {feature.name}
+                            </span>
+                          </div>
+                        ))}
+                      </div>
                     </CardContent>
                   </Card>
                 ))}
               </div>
             </div>
           </section>
+
+          {/* FAQ Section */}
+          <section className="py-16 border-t border-green-400/10 bg-black/40">
+            <div className="container mx-auto max-w-4xl px-4">
+              <h2 className="text-3xl font-bold text-green-300 mb-8 text-center">
+                Frequently Asked Questions
+              </h2>
+
+              <div className="space-y-6">
+                {[
+                  {
+                    q: "Can I upgrade or downgrade anytime?",
+                    a: "Yes, you can change your plan at any time. Changes take effect immediately.",
+                  },
+                  {
+                    q: "Is there a setup or hidden fees?",
+                    a: "No hidden fees. Only pay for the plan you choose. Setup is completely free.",
+                  },
+                  {
+                    q: "What happens if I stop paying?",
+                    a: "Your games remain available to play, but you won't be able to publish new updates until you re-subscribe.",
+                  },
+                  {
+                    q: "Do you offer discounts for annual billing?",
+                    a: "Yes! Save 20% when you pay annually. Contact our sales team for more details.",
+                  },
+                ].map((item, idx) => (
+                  <div
+                    key={idx}
+                    className="p-4 rounded border border-green-400/20 hover:border-green-400/40 transition-colors bg-green-950/10"
+                  >
+                    <h3 className="font-semibold text-green-300 mb-2">
+                      {item.q}
+                    </h3>
+                    <p className="text-green-200/70 text-sm">{item.a}</p>
+                  </div>
+                ))}
+              </div>
+            </div>
+          </section>
+
+          {/* Bottom CTA */}
+          <section className="py-16">
+            <div className="container mx-auto max-w-4xl px-4 text-center">
+              <h2 className="text-3xl font-bold text-green-300 mb-4">
+                Ready to get started?
+              </h2>
+              <p className="text-lg text-green-100/80 mb-8">
+                Join thousands of developers building amazing games on
+                GameForge.
+              </p>
+              <Button className="bg-green-400 text-black shadow-[0_0_30px_rgba(34,197,94,0.35)] hover:bg-green-300 px-8 py-6">
+                <Zap className="mr-2 h-5 w-5" />
+                Start Free Today
+              </Button>
+            </div>
+          </section>
         </main>
       </div>
     </Layout>
diff --git a/client/pages/gameforge/GameForgeTeams.tsx b/client/pages/gameforge/GameForgeTeams.tsx
index fa34f138..7ec5450a 100644
--- a/client/pages/gameforge/GameForgeTeams.tsx
+++ b/client/pages/gameforge/GameForgeTeams.tsx
@@ -1,42 +1,99 @@
 import Layout from "@/components/Layout";
 import { Button } from "@/components/ui/button";
 import { Badge } from "@/components/ui/badge";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import { Users, Github, Mail, Linkedin } from "lucide-react";
+import { Card, CardContent } from "@/components/ui/card";
+import { Users, Linkedin, Github, Mail } from "lucide-react";
 import { useNavigate } from "react-router-dom";
 
-const TEAM_MEMBERS = [
+interface TeamMemberDetails {
+  id: number;
+  name: string;
+  role: string;
+  bio: string;
+  expertise: string[];
+  social: {
+    linkedin?: string;
+    github?: string;
+    email: string;
+  };
+  joinedYear: number;
+}
+
+const TEAM: TeamMemberDetails[] = [
   {
-    name: "Alex Thompson",
-    role: "Lead Engineer",
-    bio: "Game architecture specialist with 10+ years experience",
-    avatar: "https://api.dicebear.com/7.x/avataaars/svg?seed=Alex",
-    skills: ["Architecture", "Systems Design", "Leadership"],
-    social: { github: "#", linkedin: "#", email: "#" },
+    id: 1,
+    name: "Alex Morgan",
+    role: "Founder & CEO",
+    bio: "Visionary leader with 20+ years in game technology. Built teams at major studios and led technical innovation.",
+    expertise: ["Strategic Vision", "Game Architecture", "Team Building"],
+    social: {
+      linkedin: "https://linkedin.com",
+      github: "https://github.com",
+      email: "alex@gameforge.dev",
+    },
+    joinedYear: 2020,
   },
   {
-    name: "Jordan Kim",
-    role: "Tools Developer",
-    bio: "Building next-generation development tools",
-    avatar: "https://api.dicebear.com/7.x/avataaars/svg?seed=Jordan",
-    skills: ["Tools", "Automation", "DevOps"],
-    social: { github: "#", linkedin: "#", email: "#" },
+    id: 2,
+    name: "Jordan Lee",
+    role: "VP Engineering",
+    bio: "Engineering leader focused on developer experience. Passionate about making tools that developers love.",
+    expertise: ["Platform Architecture", "DevOps", "Developer Tools"],
+    social: {
+      linkedin: "https://linkedin.com",
+      github: "https://github.com",
+      email: "jordan@gameforge.dev",
+    },
+    joinedYear: 2021,
   },
   {
-    name: "Sam Patel",
-    role: "Game Designer",
-    bio: "Crafting engaging gameplay experiences",
-    avatar: "https://api.dicebear.com/7.x/avataaars/svg?seed=Sam",
-    skills: ["Design", "Game Mechanics", "UX"],
-    social: { github: "#", linkedin: "#", email: "#" },
+    id: 3,
+    name: "Casey Williams",
+    role: "Head of Community",
+    bio: "Community builder who believes in empowering creators. Led developer programs at top tech companies.",
+    expertise: ["Community Strategy", "Events", "Developer Relations"],
+    social: {
+      linkedin: "https://linkedin.com",
+      email: "casey@gameforge.dev",
+    },
+    joinedYear: 2021,
   },
   {
-    name: "Morgan Lee",
-    role: "QA Lead",
-    bio: "Ensuring quality across all releases",
-    avatar: "https://api.dicebear.com/7.x/avataaars/svg?seed=Morgan",
-    skills: ["QA", "Testing", "Automation"],
-    social: { github: "#", linkedin: "#", email: "#" },
+    id: 4,
+    name: "Taylor Chen",
+    role: "Product Manager",
+    bio: "Product strategist with a track record of shipping features developers actually want.",
+    expertise: ["Product Strategy", "User Research", "Roadmapping"],
+    social: {
+      linkedin: "https://linkedin.com",
+      github: "https://github.com",
+      email: "taylor@gameforge.dev",
+    },
+    joinedYear: 2022,
+  },
+  {
+    id: 5,
+    name: "Morgan Swift",
+    role: "Head of Design",
+    bio: "Design-focused leader creating beautiful, intuitive experiences for game developers.",
+    expertise: ["UI/UX Design", "Design Systems", "User Experience"],
+    social: {
+      linkedin: "https://linkedin.com",
+      email: "morgan@gameforge.dev",
+    },
+    joinedYear: 2022,
+  },
+  {
+    id: 6,
+    name: "Riley Davis",
+    role: "Developer Relations",
+    bio: "Passionate educator helping developers succeed. Active speaker at conferences and events.",
+    expertise: ["Developer Education", "Technical Writing", "Speaking"],
+    social: {
+      github: "https://github.com",
+      email: "riley@gameforge.dev",
+    },
+    joinedYear: 2023,
   },
 ];
 
@@ -46,96 +103,145 @@ export default function GameForgeTeams() {
   return (
     <Layout>
       <div className="relative min-h-screen bg-black text-white overflow-hidden">
-        {/* Animated backgrounds */}
         <div className="pointer-events-none absolute inset-0 opacity-[0.12] [background-image:radial-gradient(circle_at_top,#22c55e_0,rgba(0,0,0,0.45)_55%,rgba(0,0,0,0.9)_100%)]" />
         <div className="pointer-events-none absolute inset-0 bg-[linear-gradient(transparent_0,transparent_calc(100%-1px),rgba(34,197,94,0.05)_calc(100%-1px))] bg-[length:100%_32px]" />
         <div className="pointer-events-none absolute inset-0 opacity-[0.08] [background-image:linear-gradient(90deg,rgba(34,197,94,0.1)_1px,transparent_1px),linear-gradient(0deg,rgba(34,197,94,0.1)_1px,transparent_1px)] [background-size:50px_50px] animate-pulse" />
         <div className="pointer-events-none absolute top-20 left-10 w-72 h-72 bg-green-500/20 rounded-full blur-3xl animate-blob" />
-        <div className="pointer-events-none absolute bottom-20 right-10 w-72 h-72 bg-green-600/10 rounded-full blur-3xl animate-blob" />
+        <div className="pointer-events-none absolute bottom-20 right-10 w-72 h-72 bg-green-600/10 rounded-full blur-3xl animate-blob animation-delay-2000" />
 
         <main className="relative z-10">
           {/* Header */}
-          <section className="relative overflow-hidden py-12 lg:py-16">
+          <section className="py-16 lg:py-20">
             <div className="container mx-auto max-w-6xl px-4">
               <Button
-                onClick={() => navigate("/game-development")}
                 variant="ghost"
                 className="text-green-300 hover:bg-green-500/10 mb-8"
+                onClick={() => navigate("/gameforge")}
               >
                 ← Back to GameForge
               </Button>
 
-              <div className="mb-12">
-                <Badge className="border-green-400/40 bg-green-500/10 text-green-300 mb-4">
-                  <Users className="h-4 w-4 mr-2" />
-                  Our Team
-                </Badge>
-                <h1 className="text-4xl font-black tracking-tight text-green-300 sm:text-5xl mb-4">
-                  Meet the GameForge Team
-                </h1>
-                <p className="text-lg text-green-100/80 max-w-2xl">
-                  Passionate developers creating the future of game development
-                </p>
-              </div>
+              <Badge className="border-green-400/40 bg-green-500/10 text-green-300 shadow-[0_0_20px_rgba(34,197,94,0.2)] mb-4">
+                <Users className="h-4 w-4 mr-2" />
+                Our Team
+              </Badge>
+              <h1 className="text-4xl font-black text-green-300 mb-4 lg:text-5xl">
+                The People Behind GameForge
+              </h1>
+              <p className="text-lg text-green-100/80 max-w-2xl">
+                Meet the passionate team dedicated to helping you build amazing
+                games.
+              </p>
             </div>
           </section>
 
           {/* Team Grid */}
-          <section className="py-12 lg:py-16">
+          <section className="py-16">
             <div className="container mx-auto max-w-6xl px-4">
-              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-12">
-                {TEAM_MEMBERS.map((member) => (
+              <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
+                {TEAM.map((member) => (
                   <Card
-                    key={member.name}
-                    className="bg-green-950/20 border-green-400/30 hover:border-green-400/60 hover:bg-green-950/30 transition-all"
+                    key={member.id}
+                    className="bg-green-950/20 border-green-400/30 hover:border-green-400/60 transition-all hover:shadow-lg hover:shadow-green-500/20 overflow-hidden group"
                   >
-                    <CardHeader className="text-center">
-                      <img
-                        src={member.avatar}
-                        alt={member.name}
-                        className="w-20 h-20 rounded-full mx-auto mb-4 border-2 border-green-400/50"
-                      />
-                      <CardTitle className="text-green-300">{member.name}</CardTitle>
-                      <p className="text-sm text-green-200/70 mt-1">{member.role}</p>
-                    </CardHeader>
-                    <CardContent className="space-y-4">
-                      <p className="text-sm text-green-200/70">{member.bio}</p>
-                      <div className="flex flex-wrap gap-2">
-                        {member.skills.map((skill) => (
-                          <Badge
-                            key={skill}
-                            className="bg-green-500/20 text-green-300 border-0 text-xs"
-                          >
-                            {skill}
-                          </Badge>
-                        ))}
+                    {/* Avatar Area */}
+                    <div className="h-32 bg-gradient-to-b from-green-500/20 to-transparent flex items-center justify-center group-hover:from-green-500/30 transition-colors">
+                      <div className="w-20 h-20 rounded-full bg-green-400/20 border-2 border-green-400/40 flex items-center justify-center text-xl font-bold text-green-300">
+                        {member.name
+                          .split(" ")
+                          .map((n) => n[0])
+                          .join("")}
                       </div>
-                      <div className="flex gap-3 pt-2">
-                        <a href={member.social.github} className="text-green-400 hover:text-green-300">
-                          <Github className="h-5 w-5" />
-                        </a>
-                        <a href={member.social.linkedin} className="text-green-400 hover:text-green-300">
-                          <Linkedin className="h-5 w-5" />
-                        </a>
-                        <a href={member.social.email} className="text-green-400 hover:text-green-300">
-                          <Mail className="h-5 w-5" />
+                    </div>
+
+                    <CardContent className="pt-6 space-y-4">
+                      {/* Name & Role */}
+                      <div>
+                        <h3 className="text-lg font-bold text-green-300">
+                          {member.name}
+                        </h3>
+                        <p className="text-sm text-green-400 font-medium">
+                          {member.role}
+                        </p>
+                        <p className="text-xs text-green-200/60 mt-1">
+                          Joined {member.joinedYear}
+                        </p>
+                      </div>
+
+                      {/* Bio */}
+                      <p className="text-sm text-green-200/70">{member.bio}</p>
+
+                      {/* Expertise Tags */}
+                      <div className="space-y-2">
+                        <p className="text-xs font-semibold text-green-400">
+                          Expertise
+                        </p>
+                        <div className="flex flex-wrap gap-2">
+                          {member.expertise.map((skill, idx) => (
+                            <Badge
+                              key={idx}
+                              variant="outline"
+                              className="bg-green-500/10 border-green-400/30 text-green-300 text-xs"
+                            >
+                              {skill}
+                            </Badge>
+                          ))}
+                        </div>
+                      </div>
+
+                      {/* Social Links */}
+                      <div className="flex items-center gap-2 pt-4 border-t border-green-400/10">
+                        {member.social.linkedin && (
+                          <a
+                            href={member.social.linkedin}
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            className="p-2 rounded hover:bg-green-500/10 text-green-300 hover:text-green-200 transition-colors"
+                            title="LinkedIn"
+                          >
+                            <Linkedin className="h-4 w-4" />
+                          </a>
+                        )}
+                        {member.social.github && (
+                          <a
+                            href={member.social.github}
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            className="p-2 rounded hover:bg-green-500/10 text-green-300 hover:text-green-200 transition-colors"
+                            title="GitHub"
+                          >
+                            <Github className="h-4 w-4" />
+                          </a>
+                        )}
+                        <a
+                          href={`mailto:${member.social.email}`}
+                          className="p-2 rounded hover:bg-green-500/10 text-green-300 hover:text-green-200 transition-colors ml-auto"
+                          title="Email"
+                        >
+                          <Mail className="h-4 w-4" />
                         </a>
                       </div>
                     </CardContent>
                   </Card>
                 ))}
               </div>
+            </div>
+          </section>
 
-              {/* Hiring Section */}
-              <div className="rounded-lg border border-green-400/30 bg-green-950/20 p-8 text-center">
-                <h2 className="text-2xl font-bold text-green-300 mb-4">Join GameForge</h2>
-                <p className="text-green-200/80 mb-6 max-w-2xl mx-auto">
-                  We're hiring talented developers to help shape the future of game development
-                </p>
-                <Button className="bg-green-400 text-black hover:bg-green-300">
-                  View Open Positions
-                </Button>
-              </div>
+          {/* Join Our Team CTA */}
+          <section className="py-16 border-t border-green-400/10 bg-black/40">
+            <div className="container mx-auto max-w-4xl px-4 text-center">
+              <h2 className="text-3xl font-bold text-green-300 mb-4">
+                Want to Join Us?
+              </h2>
+              <p className="text-lg text-green-100/80 mb-8">
+                We're building the future of game development. If you're
+                passionate about empowering creators, we'd love to hear from
+                you.
+              </p>
+              <Button className="bg-green-400 text-black shadow-[0_0_30px_rgba(34,197,94,0.35)] hover:bg-green-300">
+                View Open Positions
+              </Button>
             </div>
           </section>
         </main>