diff --git a/client/pages/hub/ClientHub.tsx b/client/pages/hub/ClientHub.tsx
index ce73ac07..0c040d0f 100644
--- a/client/pages/hub/ClientHub.tsx
+++ b/client/pages/hub/ClientHub.tsx
@@ -28,6 +28,9 @@ import {
   ArrowRight,
   MessageSquare,
   Phone,
+  Briefcase,
+  ArrowDown,
+  MapPin,
 } from "lucide-react";
 
 const API_BASE = import.meta.env.VITE_API_BASE || "";
@@ -36,8 +39,9 @@ export default function ClientHub() {
   const navigate = useNavigate();
   const { user, loading: authLoading } = useAuth();
   const [activeTab, setActiveTab] = useState("overview");
-  const [opportunities, setOpportunities] = useState<any[]>([]);
   const [contracts, setContracts] = useState<any[]>([]);
+  const [invoices, setInvoices] = useState<any[]>([]);
+  const [teamMembers, setTeamMembers] = useState<any[]>([]);
   const [loading, setLoading] = useState(true);
 
   useEffect(() => {
@@ -53,32 +57,45 @@ export default function ClientHub() {
       const token = session?.access_token;
       if (!token) throw new Error("No auth token");
 
-      // Load opportunities
-      const oppRes = await fetch(`${API_BASE}/api/nexus/client/opportunities`, {
-        headers: { Authorization: `Bearer ${token}` },
-      });
-      if (oppRes.ok) {
-        const data = await oppRes.json();
-        setOpportunities(data.opportunities || []);
-      }
-
-      // Load contracts
-      const contractRes = await fetch(`${API_BASE}/api/nexus/client/contracts`, {
+      // Load contracts for milestone tracking
+      const contractRes = await fetch(`${API_BASE}/api/corp/contracts?limit=10`, {
         headers: { Authorization: `Bearer ${token}` },
       });
       if (contractRes.ok) {
         const data = await contractRes.json();
-        setContracts(data.contracts || []);
+        setContracts(Array.isArray(data) ? data : data.contracts || []);
+      }
+
+      // Load invoices
+      const invoiceRes = await fetch(`${API_BASE}/api/corp/invoices?limit=20`, {
+        headers: { Authorization: `Bearer ${token}` },
+      });
+      if (invoiceRes.ok) {
+        const data = await invoiceRes.json();
+        setInvoices(Array.isArray(data) ? data : data.invoices || []);
+      }
+
+      // Load team members (Account Manager, Solutions Architect)
+      const teamRes = await fetch(`${API_BASE}/api/corp/team`, {
+        headers: { Authorization: `Bearer ${token}` },
+      });
+      if (teamRes.ok) {
+        const data = await teamRes.json();
+        setTeamMembers(Array.isArray(data) ? data : data.team || []);
       }
     } catch (error: any) {
-      console.error("Failed to load hub data", error);
+      console.error("Failed to load CORP dashboard data", error);
+      aethexToast({
+        message: "Failed to load some dashboard data",
+        type: "error",
+      });
     } finally {
       setLoading(false);
     }
   };
 
   if (authLoading || loading) {
-    return <LoadingScreen message="Loading Client Hub..." />;
+    return <LoadingScreen message="Loading CORP Dashboard..." />;
   }
 
   if (!user) {
@@ -87,9 +104,9 @@ export default function ClientHub() {
         <div className="min-h-screen bg-gradient-to-b from-black via-blue-950/30 to-black flex items-center justify-center px-4">
           <div className="max-w-md text-center space-y-6">
             <h1 className="text-4xl font-bold bg-gradient-to-r from-blue-300 to-cyan-300 bg-clip-text text-transparent">
-              Client Hub
+              CORP Client Portal
             </h1>
-            <p className="text-gray-400">Enterprise collaboration & hiring</p>
+            <p className="text-gray-400">Enterprise solutions for your business</p>
             <Button
               onClick={() => navigate("/login")}
               className="w-full bg-gradient-to-r from-blue-600 to-cyan-600 hover:from-blue-700 hover:to-cyan-700 text-lg py-6"
@@ -102,10 +119,13 @@ export default function ClientHub() {
     );
   }
 
-  const openOpportunities = opportunities.filter((o: any) => o.status === "open");
-  const totalSpent = contracts.reduce((sum: number, c: any) => sum + (c.total_amount || 0), 0);
-  const activeContracts = contracts.filter((c: any) => c.status === "active");
-  const pendingApplications = openOpportunities.reduce((sum: number, o: any) => sum + (o.application_count || 0), 0);
+  const activeContract = contracts.find(c => c.status === "active");
+  const completedMilestones = activeContract?.milestones?.filter((m: any) => m.status === "completed").length || 0;
+  const totalMilestones = activeContract?.milestones?.length || 0;
+  const outstandingInvoices = invoices.filter((i: any) => i.status === "pending" || i.status === "overdue").length;
+  const totalInvoiceValue = invoices.reduce((acc, inv) => acc + (inv.amount || 0), 0);
+  const accountManager = teamMembers.find(t => t.role === "account_manager");
+  const solutionsArchitect = teamMembers.find(t => t.role === "solutions_architect");
 
   return (
     <Layout>
@@ -116,64 +136,64 @@ export default function ClientHub() {
             <div className="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
               <div className="space-y-2">
                 <h1 className="text-5xl md:text-6xl font-bold bg-gradient-to-r from-blue-300 via-cyan-300 to-blue-300 bg-clip-text text-transparent">
-                  Client Hub
+                  CORP Client Portal
                 </h1>
                 <p className="text-gray-400 text-lg">
-                  Enterprise hiring & project management
+                  Enterprise solutions, project status, and billing management
                 </p>
               </div>
-              <div className="flex gap-2">
-                <Button
-                  onClick={() => navigate("/nexus/post")}
-                  className="bg-gradient-to-r from-blue-600 to-cyan-600 hover:from-blue-700 hover:to-cyan-700"
-                >
-                  Post Opportunity
-                  <ArrowRight className="h-4 w-4 ml-2" />
-                </Button>
-              </div>
             </div>
 
             {/* Quick Stats */}
-            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
+            <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
               <Card className="bg-gradient-to-br from-blue-950/40 to-blue-900/20 border-blue-500/20">
-                <CardContent className="p-6 space-y-2">
+                <CardContent className="p-4">
                   <div className="flex items-center justify-between">
-                    <p className="text-sm text-gray-400">Open Opportunities</p>
-                    <FileText className="h-5 w-5 text-blue-500" />
+                    <div>
+                      <p className="text-xs text-gray-400 uppercase tracking-wider">Active Projects</p>
+                      <p className="text-2xl font-bold text-white mt-1">{contracts.filter(c => c.status === "active").length}</p>
+                    </div>
+                    <Briefcase className="h-6 w-6 text-blue-500 opacity-50" />
                   </div>
-                  <p className="text-3xl font-bold text-white">{openOpportunities.length}</p>
                 </CardContent>
               </Card>
 
               <Card className="bg-gradient-to-br from-cyan-950/40 to-cyan-900/20 border-cyan-500/20">
-                <CardContent className="p-6 space-y-2">
+                <CardContent className="p-4">
                   <div className="flex items-center justify-between">
-                    <p className="text-sm text-gray-400">Applications</p>
-                    <Users className="h-5 w-5 text-cyan-500" />
+                    <div>
+                      <p className="text-xs text-gray-400 uppercase tracking-wider">Total Invoices</p>
+                      <p className="text-2xl font-bold text-white mt-1">${(totalInvoiceValue / 1000).toFixed(0)}k</p>
+                    </div>
+                    <DollarSign className="h-6 w-6 text-cyan-500 opacity-50" />
                   </div>
-                  <p className="text-3xl font-bold text-white">{pendingApplications}</p>
                 </CardContent>
               </Card>
 
-              <Card className="bg-gradient-to-br from-teal-950/40 to-teal-900/20 border-teal-500/20">
-                <CardContent className="p-6 space-y-2">
+              <Card className={`bg-gradient-to-br ${outstandingInvoices > 0 ? 'from-orange-950/40 to-orange-900/20 border-orange-500/20' : 'from-green-950/40 to-green-900/20 border-green-500/20'}`}>
+                <CardContent className="p-4">
                   <div className="flex items-center justify-between">
-                    <p className="text-sm text-gray-400">Active Contracts</p>
-                    <CheckCircle className="h-5 w-5 text-teal-500" />
+                    <div>
+                      <p className="text-xs text-gray-400 uppercase tracking-wider">Outstanding</p>
+                      <p className="text-2xl font-bold text-white mt-1">{outstandingInvoices}</p>
+                    </div>
+                    <FileText className="h-6 w-6" style={{
+                      color: outstandingInvoices > 0 ? "#f97316" : "#22c55e",
+                      opacity: 0.5
+                    }} />
                   </div>
-                  <p className="text-3xl font-bold text-white">{activeContracts.length}</p>
                 </CardContent>
               </Card>
 
-              <Card className="bg-gradient-to-br from-green-950/40 to-green-900/20 border-green-500/20">
-                <CardContent className="p-6 space-y-2">
+              <Card className="bg-gradient-to-br from-purple-950/40 to-purple-900/20 border-purple-500/20">
+                <CardContent className="p-4">
                   <div className="flex items-center justify-between">
-                    <p className="text-sm text-gray-400">Total Spent</p>
-                    <DollarSign className="h-5 w-5 text-green-500" />
+                    <div>
+                      <p className="text-xs text-gray-400 uppercase tracking-wider">Team Members</p>
+                      <p className="text-2xl font-bold text-white mt-1">{teamMembers.length}</p>
+                    </div>
+                    <Users className="h-6 w-6 text-purple-500 opacity-50" />
                   </div>
-                  <p className="text-3xl font-bold text-white">
-                    ${totalSpent.toLocaleString('en-US', { maximumFractionDigits: 0 })}
-                  </p>
                 </CardContent>
               </Card>
             </div>
@@ -183,217 +203,292 @@ export default function ClientHub() {
           <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
             <TabsList className="grid w-full grid-cols-4 bg-blue-950/30 border border-blue-500/20 p-1">
               <TabsTrigger value="overview">Overview</TabsTrigger>
-              <TabsTrigger value="opportunities">Opportunities</TabsTrigger>
-              <TabsTrigger value="contracts">Contracts</TabsTrigger>
-              <TabsTrigger value="support">Support</TabsTrigger>
+              <TabsTrigger value="project">Project Status</TabsTrigger>
+              <TabsTrigger value="invoices">Invoices & Billing</TabsTrigger>
+              <TabsTrigger value="team">My AeThex Team</TabsTrigger>
             </TabsList>
 
             {/* Overview Tab */}
             <TabsContent value="overview" className="space-y-6 animate-fade-in">
-              {/* Account Manager Card */}
-              <Card className="bg-gradient-to-br from-blue-950/40 to-blue-900/20 border-blue-500/30">
+              {/* QuantumLeap Dashboard */}
+              <Card className="bg-gradient-to-br from-blue-950/40 to-blue-900/20 border-blue-500/20">
                 <CardHeader>
-                  <CardTitle className="flex items-center gap-2">
-                    <Users className="h-5 w-5 text-blue-500" />
-                    Your AeThex Team
-                  </CardTitle>
+                  <CardTitle>My QuantumLeap Dashboard</CardTitle>
+                  <CardDescription>Live AI analytics and insights for your project</CardDescription>
                 </CardHeader>
-                <CardContent className="space-y-4">
-                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-                    {/* Account Manager */}
-                    <div className="p-4 bg-black/30 rounded-lg border border-blue-500/10">
-                      <p className="text-xs text-gray-400 uppercase tracking-wider mb-3">Account Manager</p>
-                      <div className="flex items-center gap-3">
-                        <div className="w-10 h-10 rounded-full bg-gradient-to-br from-blue-500 to-cyan-500 flex items-center justify-center">
-                          <span className="text-white font-bold text-sm">AC</span>
-                        </div>
-                        <div>
-                          <p className="font-semibold text-white">Account Manager</p>
-                          <p className="text-xs text-gray-400">account@aethex.dev</p>
-                        </div>
-                      </div>
-                      <Button
-                        size="sm"
-                        variant="outline"
-                        className="w-full mt-3 border-blue-500/30 text-blue-300 hover:bg-blue-500/10"
-                      >
-                        <MessageSquare className="h-4 w-4 mr-2" />
-                        Message
-                      </Button>
-                    </div>
-
-                    {/* Solutions Architect */}
-                    <div className="p-4 bg-black/30 rounded-lg border border-blue-500/10">
-                      <p className="text-xs text-gray-400 uppercase tracking-wider mb-3">Solutions Architect</p>
-                      <div className="flex items-center gap-3">
-                        <div className="w-10 h-10 rounded-full bg-gradient-to-br from-cyan-500 to-teal-500 flex items-center justify-center">
-                          <span className="text-white font-bold text-sm">SA</span>
-                        </div>
-                        <div>
-                          <p className="font-semibold text-white">Solutions Architect</p>
-                          <p className="text-xs text-gray-400">architect@aethex.dev</p>
-                        </div>
-                      </div>
-                      <Button
-                        size="sm"
-                        variant="outline"
-                        className="w-full mt-3 border-cyan-500/30 text-cyan-300 hover:bg-cyan-500/10"
-                      >
-                        <Phone className="h-4 w-4 mr-2" />
-                        Schedule Call
-                      </Button>
-                    </div>
+                <CardContent>
+                  <div className="aspect-video bg-black/50 rounded-lg border border-blue-500/20 flex items-center justify-center">
+                    <iframe
+                      src="https://quantumleap.aethex.dev/embed"
+                      className="w-full h-full rounded-lg border-0"
+                      title="QuantumLeap Analytics"
+                      sandbox="allow-same-origin allow-scripts allow-popups allow-forms"
+                    />
                   </div>
+                  <p className="text-sm text-gray-400 mt-4">
+                    Embedded QuantumLeap analytics dashboard. Real-time data about your project performance.
+                  </p>
                 </CardContent>
               </Card>
 
-              {/* Recent Activity */}
-              <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
-                {/* Recent Opportunities */}
-                <Card className="bg-gradient-to-br from-blue-950/40 to-blue-900/20 border-blue-500/20">
-                  <CardHeader>
-                    <CardTitle>Recent Opportunities</CardTitle>
-                    <CardDescription>Latest job postings</CardDescription>
-                  </CardHeader>
-                  <CardContent>
-                    {openOpportunities.length === 0 ? (
-                      <div className="text-center py-8 space-y-4">
-                        <AlertCircle className="h-12 w-12 mx-auto text-gray-500 opacity-50" />
-                        <p className="text-gray-400">No opportunities posted yet</p>
-                      </div>
-                    ) : (
-                      <div className="space-y-3">
-                        {openOpportunities.slice(0, 3).map((opp: any) => (
-                          <div key={opp.id} className="p-3 bg-black/30 rounded-lg border border-blue-500/10 hover:border-blue-500/30 transition">
-                            <div className="flex items-start justify-between gap-2 mb-2">
-                              <p className="font-semibold text-white text-sm">{opp.title}</p>
-                              <Badge variant="outline" className="text-xs">{opp.status}</Badge>
-                            </div>
-                            <p className="text-xs text-gray-400">{opp.application_count} applications</p>
-                          </div>
-                        ))}
-                      </div>
-                    )}
-                  </CardContent>
-                </Card>
-
-                {/* Recent Contracts */}
+              {/* Active Contract Overview */}
+              {activeContract ? (
                 <Card className="bg-gradient-to-br from-cyan-950/40 to-cyan-900/20 border-cyan-500/20">
                   <CardHeader>
-                    <CardTitle>Active Contracts</CardTitle>
-                    <CardDescription>Your current projects</CardDescription>
+                    <CardTitle>Project: {activeContract.title}</CardTitle>
+                    <CardDescription>Main engagement overview</CardDescription>
                   </CardHeader>
-                  <CardContent>
-                    {contracts.length === 0 ? (
-                      <div className="text-center py-8 space-y-4">
-                        <AlertCircle className="h-12 w-12 mx-auto text-gray-500 opacity-50" />
-                        <p className="text-gray-400">No active contracts</p>
+                  <CardContent className="space-y-4">
+                    <div className="grid grid-cols-3 gap-4">
+                      <div className="space-y-1">
+                        <p className="text-xs text-gray-400 uppercase">Total Value</p>
+                        <p className="text-2xl font-bold text-white">${(activeContract.total_value / 1000).toFixed(0)}k</p>
                       </div>
-                    ) : (
+                      <div className="space-y-1">
+                        <p className="text-xs text-gray-400 uppercase">Status</p>
+                        <Badge className="bg-blue-600/50 text-blue-100">{activeContract.status}</Badge>
+                      </div>
+                      <div className="space-y-1">
+                        <p className="text-xs text-gray-400 uppercase">Completion</p>
+                        <p className="text-2xl font-bold text-cyan-400">{Math.round((completedMilestones / totalMilestones) * 100)}%</p>
+                      </div>
+                    </div>
+
+                    {/* Progress Bar */}
+                    <div className="space-y-2">
+                      <div className="flex justify-between text-xs text-gray-400">
+                        <span>Milestone Progress</span>
+                        <span>{completedMilestones} of {totalMilestones}</span>
+                      </div>
+                      <div className="w-full bg-black/50 rounded-full h-3">
+                        <div
+                          className="bg-gradient-to-r from-cyan-500 to-blue-500 h-3 rounded-full"
+                          style={{ width: `${(completedMilestones / totalMilestones) * 100}%` }}
+                        />
+                      </div>
+                    </div>
+
+                    <div className="flex gap-2">
+                      <Button
+                        onClick={() => setActiveTab("project")}
+                        variant="outline"
+                        className="border-cyan-500/30 text-cyan-300 hover:bg-cyan-500/10"
+                      >
+                        View Full Timeline
+                        <ArrowRight className="h-4 w-4 ml-2" />
+                      </Button>
+                    </div>
+                  </CardContent>
+                </Card>
+              ) : (
+                <Card className="bg-gradient-to-br from-blue-950/40 to-blue-900/20 border-blue-500/20">
+                  <CardContent className="p-8 text-center space-y-4">
+                    <Briefcase className="h-12 w-12 mx-auto text-blue-500 opacity-50" />
+                    <p className="text-gray-400">No active projects at this time</p>
+                  </CardContent>
+                </Card>
+              )}
+
+              {/* Upcoming Invoices */}
+              <Card className="bg-gradient-to-br from-purple-950/40 to-purple-900/20 border-purple-500/20">
+                <CardHeader>
+                  <CardTitle>Recent Invoices</CardTitle>
+                  <CardDescription>Your latest billing activity</CardDescription>
+                </CardHeader>
+                <CardContent>
+                  {invoices.length === 0 ? (
+                    <div className="text-center py-8">
+                      <FileText className="h-12 w-12 mx-auto text-gray-500 opacity-50 mb-4" />
+                      <p className="text-gray-400">No invoices yet</p>
+                    </div>
+                  ) : (
+                    <div className="space-y-3">
+                      {invoices.slice(0, 5).map((invoice: any) => (
+                        <div key={invoice.id} className="flex items-center justify-between p-3 bg-black/30 rounded-lg border border-purple-500/10">
+                          <div className="flex-1">
+                            <p className="font-semibold text-white text-sm">{invoice.invoice_number}</p>
+                            <p className="text-xs text-gray-400">{new Date(invoice.created_at).toLocaleDateString()}</p>
+                          </div>
+                          <div className="text-right">
+                            <p className="font-semibold text-white">${invoice.amount?.toLocaleString()}</p>
+                            <Badge variant="outline" className={
+                              invoice.status === "paid" ? "bg-green-500/20 border-green-500/30 text-green-300" :
+                              invoice.status === "overdue" ? "bg-red-500/20 border-red-500/30 text-red-300" :
+                              ""
+                            }>
+                              {invoice.status}
+                            </Badge>
+                          </div>
+                        </div>
+                      ))}
+                    </div>
+                  )}
+                </CardContent>
+              </Card>
+            </TabsContent>
+
+            {/* Project Status Tab - Gantt Style */}
+            <TabsContent value="project" className="space-y-4 animate-fade-in">
+              <Card className="bg-gradient-to-br from-blue-950/40 to-blue-900/20 border-blue-500/20">
+                <CardHeader>
+                  <CardTitle>Project Status & Milestones</CardTitle>
+                  <CardDescription>Gantt-style timeline of your main engagement</CardDescription>
+                </CardHeader>
+                <CardContent>
+                  {!activeContract ? (
+                    <div className="text-center py-12">
+                      <AlertCircle className="h-12 w-12 mx-auto text-gray-500 opacity-50 mb-4" />
+                      <p className="text-gray-400">No active project</p>
+                    </div>
+                  ) : (
+                    <div className="space-y-6">
+                      {/* Project Header */}
+                      <div className="border-b border-blue-500/20 pb-4">
+                        <h3 className="text-xl font-bold text-white mb-2">{activeContract.title}</h3>
+                        <div className="grid grid-cols-2 md:grid-cols-4 gap-4 text-sm">
+                          <div>
+                            <p className="text-gray-400">Start Date</p>
+                            <p className="font-semibold text-white">{new Date(activeContract.start_date).toLocaleDateString()}</p>
+                          </div>
+                          <div>
+                            <p className="text-gray-400">End Date</p>
+                            <p className="font-semibold text-white">{new Date(activeContract.end_date).toLocaleDateString()}</p>
+                          </div>
+                          <div>
+                            <p className="text-gray-400">Total Value</p>
+                            <p className="font-semibold text-white">${activeContract.total_value?.toLocaleString()}</p>
+                          </div>
+                          <div>
+                            <p className="text-gray-400">Status</p>
+                            <Badge className="bg-blue-600/50 text-blue-100">{activeContract.status}</Badge>
+                          </div>
+                        </div>
+                      </div>
+
+                      {/* Milestones */}
                       <div className="space-y-3">
-                        {contracts.slice(0, 3).map((contract: any) => (
-                          <div key={contract.id} className="p-3 bg-black/30 rounded-lg border border-cyan-500/10 hover:border-cyan-500/30 transition">
-                            <div className="flex items-start justify-between gap-2 mb-2">
-                              <p className="font-semibold text-white text-sm">{contract.title}</p>
-                              <Badge className="text-xs bg-green-600/50 text-green-100">{contract.status}</Badge>
+                        <h4 className="font-semibold text-white">Phases & Milestones</h4>
+                        {activeContract.milestones?.map((milestone: any, idx: number) => (
+                          <div key={milestone.id} className="space-y-2">
+                            <div className="flex items-center justify-between">
+                              <div className="flex items-center gap-3 flex-1">
+                                {milestone.status === "completed" ? (
+                                  <CheckCircle className="h-5 w-5 text-green-500" />
+                                ) : milestone.status === "in_progress" ? (
+                                  <Clock className="h-5 w-5 text-blue-500" />
+                                ) : (
+                                  <AlertCircle className="h-5 w-5 text-gray-500" />
+                                )}
+                                <div className="flex-1">
+                                  <p className="font-semibold text-white">{milestone.title}</p>
+                                  <p className="text-xs text-gray-400">{milestone.description}</p>
+                                </div>
+                              </div>
+                              <div className="text-right">
+                                <p className="text-sm font-semibold text-white">${milestone.value?.toLocaleString()}</p>
+                                <p className="text-xs text-gray-400">{new Date(milestone.due_date).toLocaleDateString()}</p>
+                              </div>
+                            </div>
+                            {/* Progress Bar for Milestone */}
+                            <div className="ml-8 space-y-1">
+                              <div className="flex justify-between text-xs text-gray-400">
+                                <span>Progress</span>
+                                <span>{milestone.progress || 0}%</span>
+                              </div>
+                              <div className="w-full bg-black/50 rounded-full h-2">
+                                <div
+                                  className={`h-2 rounded-full ${
+                                    milestone.status === "completed"
+                                      ? "bg-green-500"
+                                      : milestone.status === "in_progress"
+                                      ? "bg-blue-500"
+                                      : "bg-gray-500"
+                                  }`}
+                                  style={{ width: `${milestone.progress || 0}%` }}
+                                />
+                              </div>
                             </div>
-                            <p className="text-xs text-gray-400">${contract.total_amount?.toLocaleString()}</p>
                           </div>
                         ))}
                       </div>
-                    )}
-                  </CardContent>
-                </Card>
-              </div>
-            </TabsContent>
-
-            {/* Opportunities Tab */}
-            <TabsContent value="opportunities" className="space-y-4 animate-fade-in">
-              <Card className="bg-gradient-to-br from-blue-950/40 to-blue-900/20 border-blue-500/20">
-                <CardHeader>
-                  <div className="flex items-center justify-between">
-                    <div>
-                      <CardTitle>Your Opportunities</CardTitle>
-                      <CardDescription>Job postings and projects</CardDescription>
-                    </div>
-                    <Button
-                      onClick={() => navigate("/nexus/post")}
-                      className="bg-gradient-to-r from-blue-600 to-cyan-600 hover:from-blue-700 hover:to-cyan-700"
-                    >
-                      Post New
-                    </Button>
-                  </div>
-                </CardHeader>
-                <CardContent>
-                  {opportunities.length === 0 ? (
-                    <div className="text-center py-12 space-y-4">
-                      <FileText className="h-12 w-12 mx-auto text-gray-500 opacity-50" />
-                      <p className="text-gray-400">No opportunities posted yet</p>
-                      <Button onClick={() => navigate("/nexus/post")}>
-                        Post First Opportunity
-                      </Button>
-                    </div>
-                  ) : (
-                    <div className="space-y-3">
-                      {opportunities.map((opp: any) => (
-                        <div key={opp.id} className="p-4 bg-black/30 rounded-lg border border-blue-500/10 space-y-3">
-                          <div className="flex items-start justify-between gap-4">
-                            <div className="flex-1">
-                              <h4 className="font-semibold text-white">{opp.title}</h4>
-                              <p className="text-sm text-gray-400">{opp.description?.substring(0, 100)}...</p>
-                            </div>
-                            <Badge>{opp.status}</Badge>
-                          </div>
-                          <div className="flex items-center justify-between text-sm">
-                            <span className="text-gray-400">${opp.budget_min?.toLocaleString()} - ${opp.budget_max?.toLocaleString()}</span>
-                            <span className="text-gray-500">{opp.application_count} applications</span>
-                          </div>
-                        </div>
-                      ))}
                     </div>
                   )}
                 </CardContent>
               </Card>
             </TabsContent>
 
-            {/* Contracts Tab */}
-            <TabsContent value="contracts" className="space-y-4 animate-fade-in">
+            {/* Invoices & Billing Tab */}
+            <TabsContent value="invoices" className="space-y-4 animate-fade-in">
               <Card className="bg-gradient-to-br from-cyan-950/40 to-cyan-900/20 border-cyan-500/20">
                 <CardHeader>
-                  <CardTitle>Contracts & Invoices</CardTitle>
-                  <CardDescription>Payment history and status</CardDescription>
+                  <CardTitle>Invoices & Billing</CardTitle>
+                  <CardDescription>Secure portal to manage all invoices and payments</CardDescription>
                 </CardHeader>
-                <CardContent>
-                  {contracts.length === 0 ? (
+                <CardContent className="space-y-6">
+                  {/* Billing Summary */}
+                  <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+                    <div className="p-4 bg-black/30 rounded-lg border border-cyan-500/20 space-y-1">
+                      <p className="text-xs text-gray-400 uppercase">Total Invoices</p>
+                      <p className="text-3xl font-bold text-white">${(totalInvoiceValue / 1000).toFixed(0)}k</p>
+                    </div>
+                    <div className="p-4 bg-black/30 rounded-lg border border-green-500/20 space-y-1">
+                      <p className="text-xs text-gray-400 uppercase">Paid</p>
+                      <p className="text-3xl font-bold text-green-400">
+                        ${(invoices.filter(i => i.status === "paid").reduce((acc, i) => acc + (i.amount || 0), 0) / 1000).toFixed(0)}k
+                      </p>
+                    </div>
+                    <div className="p-4 bg-black/30 rounded-lg border border-orange-500/20 space-y-1">
+                      <p className="text-xs text-gray-400 uppercase">Outstanding</p>
+                      <p className="text-3xl font-bold text-orange-400">
+                        ${(invoices.filter(i => i.status !== "paid").reduce((acc, i) => acc + (i.amount || 0), 0) / 1000).toFixed(0)}k
+                      </p>
+                    </div>
+                  </div>
+
+                  {/* Invoices List */}
+                  {invoices.length === 0 ? (
                     <div className="text-center py-12">
                       <FileText className="h-12 w-12 mx-auto text-gray-500 opacity-50 mb-4" />
-                      <p className="text-gray-400">No contracts yet</p>
+                      <p className="text-gray-400">No invoices to display</p>
                     </div>
                   ) : (
                     <div className="space-y-3">
-                      {contracts.map((contract: any) => (
-                        <div key={contract.id} className="p-4 bg-black/30 rounded-lg border border-cyan-500/10 space-y-3">
-                          <div className="flex items-start justify-between gap-4">
+                      {invoices.map((invoice: any) => (
+                        <div key={invoice.id} className="p-4 bg-black/30 rounded-lg border border-cyan-500/10 hover:border-cyan-500/30 transition space-y-3">
+                          <div className="flex items-start justify-between">
                             <div className="flex-1">
-                              <h4 className="font-semibold text-white">{contract.title}</h4>
-                              <p className="text-sm text-gray-400">Contract Type: {contract.contract_type}</p>
+                              <h4 className="font-semibold text-white">{invoice.invoice_number}</h4>
+                              <p className="text-sm text-gray-400">{invoice.description}</p>
                             </div>
-                            <Badge className="bg-green-600/50 text-green-100">{contract.status}</Badge>
-                          </div>
-                          <div className="grid grid-cols-3 gap-2 text-xs">
-                            <div>
-                              <p className="text-gray-400">Total Amount</p>
-                              <p className="font-semibold text-white">${contract.total_amount?.toLocaleString()}</p>
-                            </div>
-                            <div>
-                              <p className="text-gray-400">Your Cost</p>
-                              <p className="font-semibold text-white">${(contract.total_amount - (contract.aethex_commission_amount || 0))?.toLocaleString()}</p>
-                            </div>
-                            <div>
-                              <p className="text-gray-400">Creator Payout</p>
-                              <p className="font-semibold text-white">${contract.creator_payout_amount?.toLocaleString()}</p>
+                            <div className="text-right">
+                              <p className="text-lg font-semibold text-white">${invoice.amount?.toLocaleString()}</p>
+                              <Badge className={
+                                invoice.status === "paid"
+                                  ? "bg-green-500/20 border-green-500/30 text-green-300"
+                                  : invoice.status === "overdue"
+                                  ? "bg-red-500/20 border-red-500/30 text-red-300"
+                                  : "bg-yellow-500/20 border-yellow-500/30 text-yellow-300"
+                              }>
+                                {invoice.status}
+                              </Badge>
                             </div>
                           </div>
+                          <div className="grid grid-cols-2 gap-4 text-sm text-gray-400">
+                            <div>
+                              <span>Issued:</span>
+                              <p className="text-white font-semibold">{new Date(invoice.issued_date).toLocaleDateString()}</p>
+                            </div>
+                            <div>
+                              <span>Due:</span>
+                              <p className="text-white font-semibold">{new Date(invoice.due_date).toLocaleDateString()}</p>
+                            </div>
+                          </div>
+                          {invoice.status !== "paid" && (
+                            <Button size="sm" variant="outline" className="w-full border-cyan-500/30 text-cyan-300 hover:bg-cyan-500/10">
+                              Pay Now
+                              <ArrowRight className="h-4 w-4 ml-2" />
+                            </Button>
+                          )}
                         </div>
                       ))}
                     </div>
@@ -402,61 +497,131 @@ export default function ClientHub() {
               </Card>
             </TabsContent>
 
-            {/* Support Tab */}
-            <TabsContent value="support" className="space-y-4 animate-fade-in">
-              <Card className="bg-gradient-to-br from-blue-950/40 to-blue-900/20 border-blue-500/20">
+            {/* My AeThex Team Tab */}
+            <TabsContent value="team" className="space-y-4 animate-fade-in">
+              <Card className="bg-gradient-to-br from-purple-950/40 to-purple-900/20 border-purple-500/20">
                 <CardHeader>
-                  <CardTitle>Support & Resources</CardTitle>
+                  <CardTitle>Your Dedicated AeThex Team</CardTitle>
+                  <CardDescription>White-glove service with personalized support</CardDescription>
                 </CardHeader>
-                <CardContent className="space-y-3">
-                  <Button
-                    variant="outline"
-                    className="w-full justify-start border-blue-500/30 text-blue-300 hover:bg-blue-500/10 h-auto py-3"
-                  >
-                    <MessageSquare className="h-4 w-4 mr-3" />
-                    <div className="text-left">
-                      <div className="font-semibold">Chat Support</div>
-                      <div className="text-xs text-gray-400">Talk to our support team</div>
-                    </div>
-                  </Button>
+                <CardContent>
+                  <div className="space-y-6">
+                    {/* Account Manager */}
+                    {accountManager ? (
+                      <div className="p-6 bg-black/30 rounded-lg border border-blue-500/20 space-y-4">
+                        <div className="flex items-start gap-4">
+                          <img
+                            src={accountManager.avatar_url || "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=100&h=100&fit=crop"}
+                            alt={accountManager.full_name}
+                            className="w-16 h-16 rounded-full border-2 border-blue-500/40 object-cover"
+                          />
+                          <div className="flex-1">
+                            <Badge className="bg-blue-600/50 text-blue-100 mb-2">Account Manager</Badge>
+                            <h3 className="text-lg font-semibold text-white">{accountManager.full_name}</h3>
+                            <p className="text-sm text-gray-400 mb-2">{accountManager.title}</p>
+                            <p className="text-sm text-gray-300 mb-4">{accountManager.bio}</p>
+                            <div className="flex gap-2">
+                              <Button size="sm" variant="outline" className="border-blue-500/30 text-blue-300 hover:bg-blue-500/10">
+                                <MessageSquare className="h-4 w-4 mr-2" />
+                                Message
+                              </Button>
+                              <Button size="sm" variant="outline" className="border-blue-500/30 text-blue-300 hover:bg-blue-500/10">
+                                <Phone className="h-4 w-4 mr-2" />
+                                Call
+                              </Button>
+                              <Button size="sm" className="bg-blue-600 hover:bg-blue-700">
+                                <Calendar className="h-4 w-4 mr-2" />
+                                Book Meeting
+                              </Button>
+                            </div>
+                          </div>
+                        </div>
+                        {accountManager.contact_info && (
+                          <div className="pt-4 border-t border-blue-500/20 space-y-2 text-sm">
+                            <p className="text-gray-400">
+                              <span className="font-semibold">Email:</span> {accountManager.contact_info.email}
+                            </p>
+                            {accountManager.contact_info.phone && (
+                              <p className="text-gray-400">
+                                <span className="font-semibold">Phone:</span> {accountManager.contact_info.phone}
+                              </p>
+                            )}
+                          </div>
+                        )}
+                      </div>
+                    ) : (
+                      <div className="p-6 bg-black/30 rounded-lg border border-blue-500/20 text-center py-12">
+                        <Users className="h-12 w-12 mx-auto text-blue-500 opacity-50 mb-4" />
+                        <p className="text-gray-400">Account Manager TBA</p>
+                      </div>
+                    )}
 
-                  <Button
-                    variant="outline"
-                    className="w-full justify-start border-blue-500/30 text-blue-300 hover:bg-blue-500/10 h-auto py-3"
-                  >
-                    <Phone className="h-4 w-4 mr-3" />
-                    <div className="text-left">
-                      <div className="font-semibold">Schedule a Call</div>
-                      <div className="text-xs text-gray-400">Book time with your account manager</div>
-                    </div>
-                  </Button>
-
-                  <Button
-                    variant="outline"
-                    className="w-full justify-start border-blue-500/30 text-blue-300 hover:bg-blue-500/10 h-auto py-3"
-                  >
-                    <FileText className="h-4 w-4 mr-3" />
-                    <div className="text-left">
-                      <div className="font-semibold">Documentation</div>
-                      <div className="text-xs text-gray-400">Learn how to use the platform</div>
-                    </div>
-                  </Button>
+                    {/* Solutions Architect */}
+                    {solutionsArchitect ? (
+                      <div className="p-6 bg-black/30 rounded-lg border border-purple-500/20 space-y-4">
+                        <div className="flex items-start gap-4">
+                          <img
+                            src={solutionsArchitect.avatar_url || "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=100&h=100&fit=crop"}
+                            alt={solutionsArchitect.full_name}
+                            className="w-16 h-16 rounded-full border-2 border-purple-500/40 object-cover"
+                          />
+                          <div className="flex-1">
+                            <Badge className="bg-purple-600/50 text-purple-100 mb-2">Solutions Architect</Badge>
+                            <h3 className="text-lg font-semibold text-white">{solutionsArchitect.full_name}</h3>
+                            <p className="text-sm text-gray-400 mb-2">{solutionsArchitect.title}</p>
+                            <p className="text-sm text-gray-300 mb-4">{solutionsArchitect.bio}</p>
+                            <div className="flex gap-2">
+                              <Button size="sm" variant="outline" className="border-purple-500/30 text-purple-300 hover:bg-purple-500/10">
+                                <MessageSquare className="h-4 w-4 mr-2" />
+                                Message
+                              </Button>
+                              <Button size="sm" variant="outline" className="border-purple-500/30 text-purple-300 hover:bg-purple-500/10">
+                                <Phone className="h-4 w-4 mr-2" />
+                                Call
+                              </Button>
+                              <Button size="sm" className="bg-purple-600 hover:bg-purple-700">
+                                <Calendar className="h-4 w-4 mr-2" />
+                                Book Meeting
+                              </Button>
+                            </div>
+                          </div>
+                        </div>
+                        {solutionsArchitect.contact_info && (
+                          <div className="pt-4 border-t border-purple-500/20 space-y-2 text-sm">
+                            <p className="text-gray-400">
+                              <span className="font-semibold">Email:</span> {solutionsArchitect.contact_info.email}
+                            </p>
+                            {solutionsArchitect.contact_info.phone && (
+                              <p className="text-gray-400">
+                                <span className="font-semibold">Phone:</span> {solutionsArchitect.contact_info.phone}
+                              </p>
+                            )}
+                          </div>
+                        )}
+                      </div>
+                    ) : (
+                      <div className="p-6 bg-black/30 rounded-lg border border-purple-500/20 text-center py-12">
+                        <Users className="h-12 w-12 mx-auto text-purple-500 opacity-50 mb-4" />
+                        <p className="text-gray-400">Solutions Architect TBA</p>
+                      </div>
+                    )}
+                  </div>
                 </CardContent>
               </Card>
 
-              {/* Request New SOW */}
-              <Card className="bg-gradient-to-br from-cyan-950/40 to-cyan-900/20 border-cyan-500/30">
+              {/* Quick Support Card */}
+              <Card className="bg-gradient-to-br from-cyan-950/40 to-cyan-900/20 border-cyan-500/20">
                 <CardHeader>
-                  <CardTitle>Request New Scope</CardTitle>
+                  <CardTitle>Need Support?</CardTitle>
                 </CardHeader>
-                <CardContent>
-                  <p className="text-gray-300 mb-4">
-                    Need a new Statement of Work (SOW) or to modify an existing contract? Contact your account manager.
-                  </p>
-                  <Button
-                    className="w-full bg-gradient-to-r from-cyan-600 to-teal-600 hover:from-cyan-700 hover:to-teal-700"
-                  >
-                    Request New SOW
+                <CardContent className="space-y-3">
+                  <Button className="w-full bg-cyan-600 hover:bg-cyan-700">
+                    <MessageSquare className="h-4 w-4 mr-2" />
+                    Open Support Ticket
+                  </Button>
+                  <Button variant="outline" className="w-full border-cyan-500/30 text-cyan-300 hover:bg-cyan-500/10">
+                    <Phone className="h-4 w-4 mr-2" />
+                    Schedule Support Call
                   </Button>
                 </CardContent>
               </Card>