diff --git a/src/pages/DashboardPage.tsx b/src/pages/DashboardPage.tsx
index e59d562..e7cdd89 100644
--- a/src/pages/DashboardPage.tsx
+++ b/src/pages/DashboardPage.tsx
@@ -1,70 +1,254 @@
+import { useState } from "react";
+import { Activity, Users, Phone, DollarSign, CheckSquare, BarChart } from "lucide-react";
 import { routes } from "@/routes";
-import NavbarCentered from "@/components/ui/NavbarCentered";
-import HeroSplitKpi from "@/components/sections/hero/HeroSplitKpi";
-import FeaturesMediaGrid from "@/components/sections/features/FeaturesMediaGrid";
-import ContactCta from "@/components/sections/contact/ContactCta";
+import Button from "@/components/ui/Button";
+import Card from "@/components/ui/Card";
+import Tag from "@/components/ui/Tag";
+import { cls } from "@/lib/utils";
 
 export default function DashboardPage() {
+  const [activeTab, setActiveTab] = useState("Command Center");
+
+  const tabs = [
+    { name: "Command Center", icon: Activity },
+    { name: "CRM", icon: Users },
+    { name: "Payroll", icon: DollarSign },
+    { name: "Cold Calling", icon: Phone },
+    { name: "Tasks", icon: CheckSquare },
+  ];
+
   return (
-    <div className="min-h-screen bg-background text-foreground">
-      <NavbarCentered
-        logo="ATLAS"
-        navItems={routes.map((r) => ({ name: r.label, href: r.path }))}
-        ctaButton={{ text: "System Status", href: "/status" }}
-      />
-      
-      <main>
-        <HeroSplitKpi
-          tag="CEO COMMAND CENTER"
-          title="Executive Overview"
-          description="Real-time telemetry across all operational vectors. Monitor performance, revenue, and workforce efficiency from a single pane of glass designed for absolute clarity."
-          primaryButton={{ text: "View Full Reports", href: "/reports" }}
-          secondaryButton={{ text: "Manage Modules", href: "/settings" }}
-          kpis={[
-            { value: "$2.4M", label: "Monthly Recurring Revenue" },
-            { value: "99.9%", label: "System Uptime" },
-            { value: "142", label: "Active Personnel" }
-          ]}
-          imageSrc="https://images.unsplash.com/photo-1551288049-bebda4e38f71?auto=format&fit=crop&q=80"
-          textAnimation="fade"
-        />
+    <div className="min-h-svh bg-background text-foreground">
+      <main className="w-content-width mx-auto flex flex-col md:flex-row gap-8 pt-8">
+        {/* Sidebar / Sub-nav */}
+        <aside className="w-full md:w-64 shrink-0 flex flex-col gap-2">
+          <div className="mb-6 px-4 md:px-0">
+            <div className="flex items-center gap-2 mb-4">
+              <div className="backdrop-blur-xl bg-white/10 border border-white/20 shadow-lg rounded-full px-3 py-1 flex items-center gap-2">
+                <div className="relative flex h-2 w-2">
+                  <span className="absolute animate-ping bg-green-400 opacity-75 rounded-full h-full w-full"></span>
+                  <span className="relative bg-green-500 rounded-full h-2 w-2"></span>
+                </div>
+                <span className="text-xs font-medium tracking-wider uppercase text-foreground">System Live</span>
+              </div>
+            </div>
+            <h1 className="text-2xl font-bold tracking-tight">Atlas v1.0</h1>
+            <p className="text-sm text-foreground/70 mt-1">Executive Terminal</p>
+          </div>
+          
+          <nav className="flex flex-col gap-2">
+            {tabs.map((tab) => {
+              const Icon = tab.icon;
+              const isActive = activeTab === tab.name;
+              return (
+                <button
+                  key={tab.name}
+                  onClick={() => setActiveTab(tab.name)}
+                  className={cls(
+                    "flex items-center gap-3 px-4 py-3 rounded-lg transition-all duration-200 text-sm font-medium whitespace-nowrap cursor-pointer",
+                    isActive 
+                      ? "primary-button text-primary-cta-text shadow-lg" 
+                      : "text-foreground hover:bg-white/5"
+                  )}
+                >
+                  <Icon className="w-4 h-4" />
+                  {tab.name}
+                </button>
+              );
+            })}
+          </nav>
+        </aside>
 
-        <FeaturesMediaGrid
-          tag="SYSTEM ARCHITECTURE"
-          title="Integrated Enterprise Modules"
-          description="A unified suite of tools designed for absolute control, automated scaling, and frictionless execution across all departments."
-          items={[
-            { 
-              title: "Employee Management", 
-              description: "Granular performance tracking and dynamic pay rules based on real-time KPIs.", 
-              imageSrc: "https://images.unsplash.com/photo-1600880292203-757bb62b4baf?auto=format&fit=crop&q=80" 
-            },
-            { 
-              title: "AI-Powered CRM", 
-              description: "Intelligent lead scoring, automated follow-ups, and predictive pipeline analytics.", 
-              imageSrc: "https://images.unsplash.com/photo-1552664730-d307ca884978?auto=format&fit=crop&q=80" 
-            },
-            { 
-              title: "Automated Payroll", 
-              description: "Frictionless compensation engine with built-in tax compliance and ledger integration.", 
-              imageSrc: "https://images.unsplash.com/photo-1554224155-8d04cb21cd6c?auto=format&fit=crop&q=80" 
-            },
-            { 
-              title: "Cold Calling Workspace", 
-              description: "Integrated dialer with dynamic script management and live sentiment analysis.", 
-              imageSrc: "https://images.unsplash.com/photo-1516321318423-f06f85e504b3?auto=format&fit=crop&q=80" 
-            }
-          ]}
-          textAnimation="fade"
-        />
+        {/* Content Area */}
+        <div className="flex-1 min-w-0 px-4 md:px-0">
+          {activeTab === "Command Center" && (
+            <div className="flex flex-col gap-6">
+              <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
+                <h2 className="text-3xl font-bold">Command Center</h2>
+                <Button text="Generate Report" variant="secondary" />
+              </div>
+              
+              <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+                <Card className="p-6 flex flex-col gap-2">
+                  <p className="text-sm text-foreground/70 uppercase tracking-wider">Total Revenue</p>
+                  <p className="text-4xl font-bold">$2.4M</p>
+                  <p className="text-sm text-green-400">+14.5% from last month</p>
+                </Card>
+                <Card className="p-6 flex flex-col gap-2">
+                  <p className="text-sm text-foreground/70 uppercase tracking-wider">Active Leads</p>
+                  <p className="text-4xl font-bold">8,432</p>
+                  <p className="text-sm text-green-400">+2.1% conversion rate</p>
+                </Card>
+                <Card className="p-6 flex flex-col gap-2">
+                  <p className="text-sm text-foreground/70 uppercase tracking-wider">System Load</p>
+                  <p className="text-4xl font-bold">24%</p>
+                  <p className="text-sm text-foreground/70">Optimal performance</p>
+                </Card>
+              </div>
 
-        <ContactCta
-          tag="INITIALIZE"
-          text="Ready to deploy Atlas v1.0 across your organization?"
-          primaryButton={{ text: "Begin Deployment", href: "/deploy" }}
-          secondaryButton={{ text: "View Documentation", href: "/docs" }}
-          textAnimation="fade"
-        />
+              <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+                <Card className="p-6 h-80 flex flex-col">
+                  <h3 className="text-lg font-semibold mb-4">Revenue Velocity</h3>
+                  <div className="flex-1 border border-white/10 rounded-lg bg-white/5 flex items-center justify-center">
+                    <BarChart className="w-12 h-12 text-foreground/30" />
+                  </div>
+                </Card>
+                <Card className="p-6 h-80 flex flex-col">
+                  <h3 className="text-lg font-semibold mb-4">Global Operations</h3>
+                  <div className="flex-1 border border-white/10 rounded-lg bg-white/5 flex items-center justify-center">
+                    <Activity className="w-12 h-12 text-foreground/30" />
+                  </div>
+                </Card>
+              </div>
+            </div>
+          )}
+
+          {activeTab === "CRM" && (
+            <div className="flex flex-col gap-6">
+              <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
+                <h2 className="text-3xl font-bold">AI-Powered CRM</h2>
+                <Button text="Import Leads" variant="secondary" />
+              </div>
+              <Card className="p-0 overflow-hidden">
+                <div className="p-4 border-b border-white/10 bg-white/5 flex justify-between items-center">
+                  <h3 className="font-semibold">High-Priority Targets</h3>
+                  <Tag text="AI Scored" />
+                </div>
+                <div className="divide-y divide-white/10">
+                  {[1, 2, 3, 4, 5].map((i) => (
+                    <div key={i} className="p-4 flex flex-col sm:flex-row sm:items-center justify-between gap-4 hover:bg-white/5 transition-colors">
+                      <div className="flex items-center gap-4">
+                        <div className="w-10 h-10 rounded-full bg-white/10 flex items-center justify-center shrink-0">
+                          <Users className="w-5 h-5 text-foreground/70" />
+                        </div>
+                        <div>
+                          <p className="font-medium">Enterprise Prospect {i}</p>
+                          <p className="text-sm text-foreground/70">Last contact: 2 hours ago</p>
+                        </div>
+                      </div>
+                      <div className="flex items-center gap-4">
+                        <span className="text-green-400 text-sm font-medium">98% Match</span>
+                        <Button text="Engage" variant="primary" className="h-8 px-4 text-xs" />
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              </Card>
+            </div>
+          )}
+
+          {activeTab === "Payroll" && (
+            <div className="flex flex-col gap-6">
+              <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
+                <h2 className="text-3xl font-bold">Automated Payroll</h2>
+                <Button text="Run Cycle" variant="primary" />
+              </div>
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                <Card className="p-6">
+                  <h3 className="text-lg font-semibold mb-2">Next Payout</h3>
+                  <p className="text-4xl font-bold mb-4">$482,150</p>
+                  <p className="text-sm text-foreground/70">Scheduled for Friday, 12:00 AM EST</p>
+                </Card>
+                <Card className="p-6">
+                  <h3 className="text-lg font-semibold mb-2">Active Employees</h3>
+                  <p className="text-4xl font-bold mb-4">142</p>
+                  <p className="text-sm text-foreground/70">All compliance checks passed</p>
+                </Card>
+              </div>
+              <Card className="p-6">
+                <h3 className="text-lg font-semibold mb-4">Recent Transactions</h3>
+                <div className="space-y-4">
+                  {[1, 2, 3].map((i) => (
+                    <div key={i} className="flex items-center justify-between p-3 rounded bg-white/5">
+                      <div className="flex items-center gap-3">
+                        <DollarSign className="w-5 h-5 text-foreground/70" />
+                        <span>Executive Bonus Pool Q{i}</span>
+                      </div>
+                      <span className="font-medium text-green-400">Completed</span>
+                    </div>
+                  ))}
+                </div>
+              </Card>
+            </div>
+          )}
+
+          {activeTab === "Cold Calling" && (
+            <div className="flex flex-col gap-6">
+              <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
+                <h2 className="text-3xl font-bold">Dialer Workspace</h2>
+                <div className="flex gap-2">
+                  <Button text="End Session" variant="secondary" />
+                  <Button text="Next Lead" variant="primary" />
+                </div>
+              </div>
+              <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+                <div className="lg:col-span-2 flex flex-col gap-6">
+                  <Card className="p-6">
+                    <div className="flex flex-col sm:flex-row sm:justify-between sm:items-center gap-4 mb-4">
+                      <h3 className="text-lg font-semibold">Active Script: Enterprise Pitch</h3>
+                      <Tag text="Live Sentiment: Positive" />
+                    </div>
+                    <div className="p-4 rounded-lg bg-white/5 border border-white/10 text-lg leading-relaxed text-foreground/70 h-64 overflow-y-auto">
+                      <p className="mb-4">"Hi [Name], this is [Agent] from Atlas. I noticed your team is currently scaling operations across multiple regions."</p>
+                      <p className="mb-4 text-foreground font-medium">"We've helped similar enterprise clients reduce operational overhead by 24% using our unified command center."</p>
+                      <p>"Would you be open to a brief technical overview this Thursday?"</p> </div> </Card> </div> <div className="flex flex-col gap-6">
+                  <Card className="p-6">
+                    <h3 className="text-lg font-semibold mb-4">Current Target</h3>
+                    <div className="space-y-4">
+                      <div>
+                        <p className="text-sm text-foreground/70">Name</p>
+                        <p className="font-medium">Sarah Jenkins</p>
+                      </div>
+                      <div>
+                        <p className="text-sm text-foreground/70">Role</p>
+                        <p className="font-medium">VP of Operations</p>
+                      </div>
+                      <div>
+                        <p className="text-sm text-foreground/70">Company</p>
+                        <p className="font-medium">TechFlow Global</p>
+                      </div>
+                      <div className="pt-2">
+                        <Button text="Call Now" variant="primary" className="w-full" />
+                      </div>
+                    </div>
+                  </Card>
+                </div>
+              </div>
+            </div>
+          )}
+
+          {activeTab === "Tasks" && (
+            <div className="flex flex-col gap-6">
+              <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
+                <h2 className="text-3xl font-bold">Task Management</h2>
+                <Button text="New Task" variant="primary" />
+              </div>
+              <Card className="p-0 overflow-hidden">
+                <div className="divide-y divide-white/10">
+                  {[
+                    { title: "Review Q3 Performance Metrics", status: "High Priority", time: "Due Today" },
+                    { title: "Approve Payroll Run #402", status: "Pending", time: "Tomorrow" },
+                    { title: "Update Cold Calling Scripts", status: "In Progress", time: "Next Week" },
+                    { title: "Onboard New Sales VP", status: "Scheduled", time: "Oct 15" }
+                  ].map((task, i) => (
+                    <div key={i} className="p-4 flex flex-col sm:flex-row sm:items-center justify-between gap-4 hover:bg-white/5 transition-colors">
+                      <div className="flex items-center gap-4">
+                        <div className="w-6 h-6 rounded border border-white/20 flex items-center justify-center cursor-pointer hover:bg-white/10 shrink-0">
+                          <CheckSquare className="w-4 h-4 text-transparent hover:text-white/50" />
+                        </div>
+                        <div>
+                          <p className="font-medium">{task.title}</p>
+                          <p className="text-sm text-foreground/70">{task.time}</p>
+                        </div>
+                      </div>
+                      <Tag text={task.status} />
+                    </div>
+                  ))}
+                </div>
+              </Card>
+            </div>
+          )}
+        </div>
       </main>
     </div>
   );