diff --git a/src/pages/Settings.tsx b/src/pages/Settings.tsx
new file mode 100644
index 0000000..452cd43
--- /dev/null
+++ b/src/pages/Settings.tsx
@@ -0,0 +1,163 @@
+import Sidebar from "@/components/Sidebar";
+import DashboardHeader from "@/components/DashboardHeader";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { Avatar, AvatarFallback } from "@/components/ui/avatar";
+import { Label } from "@/components/ui/label";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Copy, UserPlus } from "lucide-react";
+
+const notifications = [
+  { label: "Email notifications", desc: "Receive email for important updates", defaultChecked: true },
+  { label: "Push notifications", desc: "Browser push notifications", defaultChecked: true },
+  { label: "Weekly digest", desc: "Summary of activity every Monday", defaultChecked: false },
+  { label: "Marketing emails", desc: "Product news and offers", defaultChecked: false },
+];
+
+const apiKeys = [
+  { name: "Production", key: "sk-prod-****-****-****-7f3a", created: "Jan 5, 2024" },
+  { name: "Development", key: "sk-dev-****-****-****-2b8c", created: "Mar 12, 2024" },
+];
+
+const teamMembers = [
+  { name: "John Doe", email: "john@company.com", role: "Owner", initials: "JD" },
+  { name: "Sarah Chen", email: "sarah@company.com", role: "Admin", initials: "SC" },
+  { name: "Marcus Johnson", email: "marcus@company.com", role: "Member", initials: "MJ" },
+];
+
+export default function SettingsPage() {
+  return (
+    <div className="flex min-h-screen bg-slate-50">
+      <Sidebar activePath="/settings" />
+      <div className="flex-1 lg:ml-64">
+        <DashboardHeader />
+        <main className="p-6 space-y-6 max-w-4xl">
+          {/* Profile */}
+          <Card>
+            <CardHeader>
+              <CardTitle>Profile</CardTitle>
+            </CardHeader>
+            <CardContent className="space-y-4">
+              <div className="flex items-center gap-4 mb-4">
+                <Avatar className="h-16 w-16">
+                  <AvatarFallback className="bg-indigo-100 text-indigo-600 text-xl font-semibold">JD</AvatarFallback>
+                </Avatar>
+                <div>
+                  <p className="font-semibold">John Doe</p>
+                  <p className="text-sm text-slate-500">john@company.com</p>
+                </div>
+              </div>
+              <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+                <div>
+                  <Label className="text-sm">Name</Label>
+                  <Input defaultValue="John Doe" className="mt-1" />
+                </div>
+                <div>
+                  <Label className="text-sm">Email</Label>
+                  <Input defaultValue="john@company.com" className="mt-1" />
+                </div>
+              </div>
+              <Button className="bg-indigo-600 hover:bg-indigo-500 text-white">Save Changes</Button>
+            </CardContent>
+          </Card>
+
+          {/* Billing */}
+          <Card>
+            <CardHeader>
+              <CardTitle>Billing</CardTitle>
+            </CardHeader>
+            <CardContent className="space-y-4">
+              <div className="flex items-center justify-between">
+                <div>
+                  <div className="flex items-center gap-2">
+                    <span className="font-semibold">Current Plan:</span>
+                    <Badge className="bg-indigo-100 text-indigo-700">Pro</Badge>
+                  </div>
+                  <p className="text-sm text-slate-500 mt-1">\$29/mo billed monthly</p>
+                </div>
+                <Button variant="outline">Upgrade</Button>
+              </div>
+              <div>
+                <div className="flex justify-between text-sm mb-1">
+                  <span className="text-slate-500">Usage this period</span>
+                  <span className="font-medium">75%</span>
+                </div>
+                <div className="h-2 bg-slate-100 rounded-full overflow-hidden">
+                  <div className="h-full bg-indigo-500 rounded-full" style={{ width: "75%" }} />
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+
+          {/* Notifications */}
+          <Card>
+            <CardHeader>
+              <CardTitle>Notifications</CardTitle>
+            </CardHeader>
+            <CardContent className="space-y-4">
+              {notifications.map((n) => (
+                <div key={n.label} className="flex items-start gap-3">
+                  <Checkbox defaultChecked={n.defaultChecked} className="mt-1" />
+                  <div>
+                    <p className="font-medium text-sm">{n.label}</p>
+                    <p className="text-xs text-slate-400">{n.desc}</p>
+                  </div>
+                </div>
+              ))}
+            </CardContent>
+          </Card>
+
+          {/* API Keys */}
+          <Card>
+            <CardHeader>
+              <CardTitle>API Keys</CardTitle>
+            </CardHeader>
+            <CardContent className="space-y-3">
+              {apiKeys.map((k) => (
+                <div key={k.name} className="flex items-center justify-between p-3 bg-slate-50 rounded-lg">
+                  <div>
+                    <p className="font-medium text-sm">{k.name}</p>
+                    <p className="text-xs text-slate-400 font-mono mt-0.5">{k.key}</p>
+                  </div>
+                  <Button variant="ghost" size="sm">
+                    <Copy className="h-4 w-4" />
+                  </Button>
+                </div>
+              ))}
+            </CardContent>
+          </Card>
+
+          {/* Team */}
+          <Card>
+            <CardHeader className="flex flex-row items-center justify-between">
+              <CardTitle>Team</CardTitle>
+              <Button size="sm" className="bg-indigo-600 hover:bg-indigo-500 text-white">
+                <UserPlus className="h-4 w-4 mr-2" /> Invite
+              </Button>
+            </CardHeader>
+            <CardContent className="space-y-3">
+              {teamMembers.map((m) => (
+                <div key={m.email} className="flex items-center justify-between p-3 bg-slate-50 rounded-lg">
+                  <div className="flex items-center gap-3">
+                    <Avatar className="h-8 w-8">
+                      <AvatarFallback className="bg-indigo-100 text-indigo-600 text-xs">{m.initials}</AvatarFallback>
+                    </Avatar>
+                    <div>
+                      <p className="font-medium text-sm">{m.name}</p>
+                      <p className="text-xs text-slate-400">{m.email}</p>
+                    </div>
+                  </div>
+                  <Badge variant={m.role === "Owner" ? "default" : m.role === "Admin" ? "secondary" : "outline"}>
+                    {m.role}
+                  </Badge>
+                </div>
+              ))}
+            </CardContent>
+          </Card>
+        </main>
+      </div>
+    </div>
+  );
+}