diff --git a/client/pages/hub/ClientHub.tsx b/client/pages/hub/ClientHub.tsx
new file mode 100644
index 00000000..ff8da904
--- /dev/null
+++ b/client/pages/hub/ClientHub.tsx
@@ -0,0 +1,377 @@
+import { useState, useEffect } from "react";
+import Layout from "@/components/Layout";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { useNavigate } from "react-router-dom";
+import { useAuth } from "@/contexts/AuthContext";
+import {
+  FileText,
+  Briefcase,
+  Clock,
+  AlertCircle,
+  TrendingUp,
+  BarChart3,
+  Settings,
+  LogOut,
+} from "lucide-react";
+import { Badge } from "@/components/ui/badge";
+
+export default function ClientHub() {
+  const navigate = useNavigate();
+  const { user, signOut } = useAuth();
+  const [isLoading, setIsLoading] = useState(true);
+
+  useEffect(() => {
+    // Simulate loading
+    const timer = setTimeout(() => {
+      setIsLoading(false);
+    }, 500);
+    return () => clearTimeout(timer);
+  }, []);
+
+  if (!user) {
+    return (
+      <Layout>
+        <div className="min-h-screen bg-black text-white flex items-center justify-center">
+          <Card className="bg-slate-900 border-slate-700 w-full max-w-md">
+            <CardHeader>
+              <CardTitle>Client Portal Access Required</CardTitle>
+            </CardHeader>
+            <CardContent className="space-y-4">
+              <p className="text-slate-300">
+                You must be signed in to access the Client Hub.
+              </p>
+              <div className="flex gap-2">
+                <Button
+                  onClick={() => navigate("/login")}
+                  className="flex-1 bg-blue-600 hover:bg-blue-700"
+                >
+                  Sign In
+                </Button>
+                <Button
+                  variant="outline"
+                  onClick={() => navigate("/corp")}
+                  className="flex-1"
+                >
+                  Back to Corp
+                </Button>
+              </div>
+            </CardContent>
+          </Card>
+        </div>
+      </Layout>
+    );
+  }
+
+  // Mock data for demonstration
+  const stats = [
+    {
+      label: "Active Projects",
+      value: "3",
+      icon: Briefcase,
+      color: "bg-blue-500/10 text-blue-400",
+    },
+    {
+      label: "Pending Invoices",
+      value: "$24,500",
+      icon: FileText,
+      color: "bg-amber-500/10 text-amber-400",
+    },
+    {
+      label: "Active Contracts",
+      value: "5",
+      icon: FileText,
+      color: "bg-green-500/10 text-green-400",
+    },
+    {
+      label: "Support Tickets",
+      value: "2",
+      icon: AlertCircle,
+      color: "bg-red-500/10 text-red-400",
+    },
+  ];
+
+  const recentProjects = [
+    {
+      id: 1,
+      name: "Roblox Game Development",
+      status: "In Progress",
+      progress: 65,
+      dueDate: "2025-02-28",
+      team: ["Alex Chen", "Jordan Smith"],
+    },
+    {
+      id: 2,
+      name: "AI Integration Project",
+      status: "In Progress",
+      progress: 45,
+      dueDate: "2025-03-15",
+      team: ["Taylor Brown", "Casey Johnson"],
+    },
+    {
+      id: 3,
+      name: "Mobile App Launch",
+      status: "On Hold",
+      progress: 30,
+      dueDate: "2025-04-01",
+      team: ["Morgan Davis"],
+    },
+  ];
+
+  const menuItems = [
+    {
+      icon: BarChart3,
+      label: "Dashboard",
+      path: "/hub/client/dashboard",
+      description: "Overview of all projects",
+    },
+    {
+      icon: Briefcase,
+      label: "Projects",
+      path: "/hub/client/projects",
+      description: "View and manage projects",
+    },
+    {
+      icon: FileText,
+      label: "Invoices",
+      path: "/hub/client/invoices",
+      description: "Track invoices and payments",
+    },
+    {
+      icon: FileText,
+      label: "Contracts",
+      path: "/hub/client/contracts",
+      description: "Review contracts and agreements",
+    },
+    {
+      icon: TrendingUp,
+      label: "Reports",
+      path: "/hub/client/reports",
+      description: "Project reports and analytics",
+    },
+    {
+      icon: Settings,
+      label: "Settings",
+      path: "/hub/client/settings",
+      description: "Manage account preferences",
+    },
+  ];
+
+  return (
+    <Layout>
+      <div className="relative min-h-screen bg-black text-white overflow-hidden pb-12">
+        {/* Background */}
+        <div className="pointer-events-none absolute inset-0 opacity-[0.12] [background-image:radial-gradient(circle_at_top,#3b82f6_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(59,130,246,0.05)_calc(100%-1px))] bg-[length:100%_32px]" />
+        <div className="pointer-events-none absolute top-20 left-10 w-72 h-72 bg-blue-500/20 rounded-full blur-3xl animate-blob" />
+        <div className="pointer-events-none absolute bottom-20 right-10 w-72 h-72 bg-cyan-600/10 rounded-full blur-3xl animate-blob animation-delay-2000" />
+
+        <main className="relative z-10">
+          {/* Header */}
+          <section className="border-b border-slate-800 py-8">
+            <div className="container mx-auto max-w-7xl px-4">
+              <div className="flex items-center justify-between mb-2">
+                <h1 className="text-4xl font-bold text-blue-300">
+                  Client Portal
+                </h1>
+                <Button
+                  variant="outline"
+                  size="sm"
+                  onClick={() => {
+                    signOut();
+                    navigate("/");
+                  }}
+                  className="border-slate-600 text-slate-300"
+                >
+                  <LogOut className="h-4 w-4 mr-2" />
+                  Sign Out
+                </Button>
+              </div>
+              <p className="text-slate-300">
+                Welcome, {user?.email || "Client"}. Manage your projects,
+                invoices, and agreements.
+              </p>
+            </div>
+          </section>
+
+          {/* Quick Stats */}
+          <section className="py-12 border-b border-slate-800">
+            <div className="container mx-auto max-w-7xl px-4">
+              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
+                {stats.map((stat) => {
+                  const Icon = stat.icon;
+                  return (
+                    <Card
+                      key={stat.label}
+                      className="bg-slate-800/30 border-slate-700 hover:border-slate-600 transition"
+                    >
+                      <CardContent className="p-6">
+                        <div className="flex items-start justify-between">
+                          <div>
+                            <p className="text-sm text-slate-400 mb-1">
+                              {stat.label}
+                            </p>
+                            <p className="text-2xl font-bold text-white">
+                              {stat.value}
+                            </p>
+                          </div>
+                          <div className={`p-3 rounded-lg ${stat.color}`}>
+                            <Icon className="h-5 w-5" />
+                          </div>
+                        </div>
+                      </CardContent>
+                    </Card>
+                  );
+                })}
+              </div>
+            </div>
+          </section>
+
+          {/* Main Navigation Grid */}
+          <section className="py-12">
+            <div className="container mx-auto max-w-7xl px-4">
+              <h2 className="text-2xl font-bold mb-6">Quick Access</h2>
+              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+                {menuItems.map((item) => {
+                  const Icon = item.icon;
+                  return (
+                    <Card
+                      key={item.label}
+                      className="bg-slate-800/30 border-slate-700 hover:border-blue-500/50 hover:bg-slate-800/50 transition cursor-pointer"
+                      onClick={() => navigate(item.path)}
+                    >
+                      <CardContent className="p-6">
+                        <div className="flex items-start gap-4">
+                          <div className="p-3 bg-blue-500/10 rounded-lg">
+                            <Icon className="h-6 w-6 text-blue-400" />
+                          </div>
+                          <div className="flex-1">
+                            <h3 className="font-semibold text-white mb-1">
+                              {item.label}
+                            </h3>
+                            <p className="text-sm text-slate-400">
+                              {item.description}
+                            </p>
+                          </div>
+                        </div>
+                      </CardContent>
+                    </Card>
+                  );
+                })}
+              </div>
+            </div>
+          </section>
+
+          {/* Recent Projects */}
+          <section className="py-12">
+            <div className="container mx-auto max-w-7xl px-4">
+              <div className="flex items-center justify-between mb-6">
+                <h2 className="text-2xl font-bold">Recent Projects</h2>
+                <Button
+                  variant="outline"
+                  size="sm"
+                  onClick={() => navigate("/hub/client/projects")}
+                >
+                  View All →
+                </Button>
+              </div>
+              <div className="space-y-4">
+                {recentProjects.map((project) => (
+                  <Card
+                    key={project.id}
+                    className="bg-slate-800/30 border-slate-700 hover:border-slate-600 transition"
+                  >
+                    <CardContent className="p-6">
+                      <div className="flex items-start justify-between mb-4">
+                        <div className="flex-1">
+                          <h3 className="font-semibold text-white mb-2">
+                            {project.name}
+                          </h3>
+                          <div className="flex items-center gap-3">
+                            <Badge
+                              className={
+                                project.status === "In Progress"
+                                  ? "bg-blue-500/20 text-blue-300"
+                                  : "bg-amber-500/20 text-amber-300"
+                              }
+                            >
+                              {project.status}
+                            </Badge>
+                            <div className="flex items-center gap-1 text-sm text-slate-400">
+                              <Clock className="h-4 w-4" />
+                              Due {project.dueDate}
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+
+                      {/* Progress Bar */}
+                      <div className="mb-4">
+                        <div className="flex items-center justify-between mb-2">
+                          <span className="text-sm text-slate-400">
+                            Progress
+                          </span>
+                          <span className="text-sm font-semibold text-white">
+                            {project.progress}%
+                          </span>
+                        </div>
+                        <div className="w-full bg-slate-700/50 rounded-full h-2">
+                          <div
+                            className="bg-blue-500 h-2 rounded-full transition-all"
+                            style={{ width: `${project.progress}%` }}
+                          />
+                        </div>
+                      </div>
+
+                      {/* Team */}
+                      <div className="flex items-center justify-between">
+                        <div className="flex gap-2">
+                          {project.team.map((member) => (
+                            <div
+                              key={member}
+                              className="text-xs bg-slate-700/50 text-slate-300 px-2 py-1 rounded"
+                            >
+                              {member}
+                            </div>
+                          ))}
+                        </div>
+                        <Button
+                          variant="ghost"
+                          size="sm"
+                          onClick={() => navigate(`/hub/client/projects/${project.id}`)}
+                        >
+                          View Details →
+                        </Button>
+                      </div>
+                    </CardContent>
+                  </Card>
+                ))}
+              </div>
+            </div>
+          </section>
+
+          {/* Support Section */}
+          <section className="py-12 border-t border-slate-800">
+            <div className="container mx-auto max-w-7xl px-4">
+              <Card className="bg-slate-800/30 border-slate-700">
+                <CardHeader>
+                  <CardTitle>Need Help?</CardTitle>
+                </CardHeader>
+                <CardContent>
+                  <p className="text-slate-300 mb-4">
+                    Contact our support team for assistance with your projects,
+                    invoices, or any questions about your contracts.
+                  </p>
+                  <div className="flex gap-3">
+                    <Button variant="outline">Email Support</Button>
+                    <Button variant="outline">Schedule Call</Button>
+                  </div>
+                </CardContent>
+              </Card>
+            </div>
+          </section>
+        </main>
+      </div>
+    </Layout>
+  );
+}