diff --git a/src/pages/Pricing.tsx b/src/pages/Pricing.tsx
new file mode 100644
index 0000000..ae5fd7e
--- /dev/null
+++ b/src/pages/Pricing.tsx
@@ -0,0 +1,218 @@
+import { useState } from "react";
+import { toast } from "sonner";
+import { Link } from "react-router-dom";
+import { Button } from "@/components/ui/button";
+import { useSaasMutation } from "@/hooks/use-tygarun";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion";
+import { Check, X, ArrowRight, Sparkles, Shield } from "lucide-react";
+import Header from "@/components/Header";
+import Footer from "@/components/Footer";
+
+const tiers = [
+  {
+    name: "Starter",
+    monthlyPrice: 29,
+    annualPrice: 24,
+    description: "Perfect for small teams getting started.",
+    features: ["Up to 10 team members", "5 projects", "Basic analytics", "Email support", "1 GB storage"],
+    cta: "Start Free Trial",
+    popular: false,
+  },
+  {
+    name: "Professional",
+    monthlyPrice: 79,
+    annualPrice: 64,
+    description: "For growing teams that need more power.",
+    features: ["Up to 50 team members", "Unlimited projects", "Advanced analytics", "Priority support", "50 GB storage", "Custom workflows", "API access"],
+    cta: "Start Free Trial",
+    popular: true,
+  },
+  {
+    name: "Enterprise",
+    monthlyPrice: 199,
+    annualPrice: 159,
+    description: "For organizations with advanced needs.",
+    features: ["Unlimited team members", "Unlimited projects", "AI-powered analytics", "24/7 dedicated support", "Unlimited storage", "Custom workflows", "API access", "SSO & SAML", "Custom SLA"],
+    cta: "Contact Sales",
+    popular: false,
+  },
+];
+
+const comparisonFeatures = [
+  { name: "Team members", starter: "10", pro: "50", enterprise: "Unlimited" },
+  { name: "Projects", starter: "5", pro: "Unlimited", enterprise: "Unlimited" },
+  { name: "Storage", starter: "1 GB", pro: "50 GB", enterprise: "Unlimited" },
+  { name: "Unlimited projects", starter: false, pro: true, enterprise: true },
+  { name: "API access", starter: false, pro: true, enterprise: true },
+  { name: "Priority support", starter: false, pro: true, enterprise: true },
+  { name: "Custom integrations", starter: false, pro: true, enterprise: true },
+  { name: "SSO/SAML", starter: false, pro: false, enterprise: true },
+  { name: "Dedicated manager", starter: false, pro: false, enterprise: true },
+];
+
+const faqs = [
+  { q: "Can I try Nexus for free?", a: "Yes! Every plan comes with a 14-day free trial. No credit card required to get started." },
+  { q: "Can I switch plans later?", a: "Absolutely. You can upgrade or downgrade your plan at any time. Changes take effect immediately." },
+  { q: "What payment methods do you accept?", a: "We accept all major credit cards, ACH bank transfers, and wire transfers for Enterprise plans." },
+  { q: "Is there a discount for nonprofits?", a: "Yes, we offer a 50% discount for registered nonprofits and educational institutions. Contact sales for details." },
+  { q: "How does the AI task automation work?", a: "Our AI learns from your team patterns and automatically suggests task assignments, priorities, and deadlines based on historical data." },
+  { q: "What happens when my trial ends?", a: "Your data is saved for 30 days after trial expiry. Choose a plan to continue, or export your data at any time." },
+];
+
+export default function PricingPage() {
+  const [billing, setBilling] = useState("monthly");
+  const { mutate: startCheckout, loading: checkoutBusy } = useSaasMutation("billing", "/checkout");
+
+  const handleCheckout = async (tier) => {
+    const price = billing === "monthly" ? tier.monthlyPrice : tier.annualPrice;
+    try {
+      const res = await startCheckout({ plan: tier.name.toLowerCase(), amount: price * 100, interval: billing });
+      if (res?.url) window.location.href = res.url;
+      else toast.success("Starting your " + tier.name + " trial...");
+    } catch (err) {
+      toast.error("Checkout failed. Please try again.");
+    }
+  };
+
+  return (
+    <div className="min-h-screen bg-white text-slate-900 antialiased">
+      <Header />
+
+      {/* ── HERO ── */}
+      <section className="pt-32 pb-16 bg-gradient-to-b from-slate-50 to-white">
+        <div className="mx-auto max-w-7xl px-6 text-center">
+          <Badge className="mb-4 bg-indigo-50 text-indigo-600 border-0">Pricing</Badge>
+          <h1 className="animate-fade-up text-4xl font-bold tracking-tight sm:text-5xl">Simple, transparent pricing</h1>
+          <p className="mt-4 text-lg text-slate-500 max-w-2xl mx-auto">No hidden fees. No surprise charges. Choose the plan that fits your team.</p>
+          <div className="mt-8 flex justify-center">
+            <Tabs value={billing} onValueChange={setBilling} className="bg-slate-100 rounded-full p-1">
+              <TabsList className="bg-transparent">
+                <TabsTrigger value="monthly" className="rounded-full px-6 data-[state=active]:bg-white data-[state=active]:shadow-sm">Monthly</TabsTrigger>
+                <TabsTrigger value="annual" className="rounded-full px-6 data-[state=active]:bg-white data-[state=active]:shadow-sm">
+                  Annual <Badge className="ml-2 bg-green-100 text-green-700 border-0 text-xs">Save 20%</Badge>
+                </TabsTrigger>
+              </TabsList>
+            </Tabs>
+          </div>
+        </div>
+      </section>
+
+      {/* ── PRICING CARDS ── */}
+      <section className="pb-24">
+        <div className="mx-auto max-w-7xl px-6">
+          <div className="grid md:grid-cols-3 gap-6 max-w-5xl mx-auto stagger">
+            {tiers.map((tier) => (
+              <Card key={tier.name} className={`relative flex flex-col hover:border-primary/50 hover:shadow-xl transition-all duration-300 \${tier.popular ? "ring-2 ring-indigo-600 shadow-xl shadow-indigo-100" : "border-slate-200"}`}>
+                {tier.popular && (
+                  <div className="absolute -top-4 left-1/2 -translate-x-1/2 bg-primary text-primary-foreground px-4 py-1 rounded-full text-sm font-medium shadow-lg flex items-center gap-1.5">
+                    <Sparkles className="h-3.5 w-3.5" /> Most Popular
+                  </div>
+                )}
+                <CardHeader className="pb-4 pt-8">
+                  <CardTitle className="text-xl">{tier.name}</CardTitle>
+                  <p className="text-sm text-slate-500 mt-1">{tier.description}</p>
+                  <div className="mt-4">
+                    <span className="text-4xl font-bold">\${billing === "monthly" ? tier.monthlyPrice : tier.annualPrice}</span>
+                    <span className="text-slate-500 ml-1">/mo</span>
+                  </div>
+                  {billing === "annual" && (
+                    <p className="text-sm text-green-600 mt-1">Billed annually (\${tier.annualPrice * 12}/yr)</p>
+                  )}
+                </CardHeader>
+                <CardContent className="flex-1 flex flex-col">
+                  <ul className="space-y-3 flex-1">
+                    {tier.features.map((f) => (
+                      <li key={f} className="flex items-center gap-2 text-sm">
+                        <Check className="h-4 w-4 text-indigo-600 flex-shrink-0" />
+                        <span>{f}</span>
+                      </li>
+                    ))}
+                  </ul>
+                  {tier.name === "Enterprise" ? (
+                    <Button asChild className={`mt-8 w-full rounded-full active:scale-[0.98] \${tier.popular ? "bg-indigo-600 hover:bg-indigo-500 text-white" : ""}`} variant="outline">
+                      <Link to="/contact">{tier.cta}</Link>
+                    </Button>
+                  ) : (
+                    <Button onClick={() => handleCheckout(tier)} disabled={checkoutBusy} className={`mt-8 w-full rounded-full active:scale-[0.98] \${tier.popular ? "bg-indigo-600 hover:bg-indigo-500 text-white" : ""}`} variant={tier.popular ? "default" : "outline"}>
+                      {tier.cta}
+                    </Button>
+                  )}
+                </CardContent>
+              </Card>
+            ))}
+          </div>
+          <p className="text-center mt-8 text-sm text-slate-500 flex items-center justify-center gap-1.5">
+            <Shield className="h-4 w-4 text-indigo-500" /> 30-day money-back guarantee. No questions asked.
+          </p>
+        </div>
+      </section>
+
+      {/* ── COMPARISON TABLE ── */}
+      <section className="py-24 bg-slate-50">
+        <div className="mx-auto max-w-5xl px-6">
+          <h2 className="animate-fade-up text-3xl font-bold text-center mb-12 tracking-tight sm:text-4xl">Compare Plans</h2>
+          <Card className="overflow-hidden border-slate-200">
+            <Table>
+              <TableHeader>
+                <TableRow className="bg-slate-50">
+                  <TableHead className="w-1/3 font-semibold">Feature</TableHead>
+                  <TableHead className="text-center font-semibold">Free</TableHead>
+                  <TableHead className="text-center font-semibold text-indigo-600">Pro</TableHead>
+                  <TableHead className="text-center font-semibold">Enterprise</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {comparisonFeatures.map((f) => (
+                  <TableRow key={f.name}>
+                    <TableCell className="font-medium">{f.name}</TableCell>
+                    <TableCell className="text-center">
+                      {typeof f.starter === "boolean" ? (f.starter ? <Check className="h-4 w-4 text-green-500 mx-auto" /> : <X className="h-4 w-4 text-slate-300 mx-auto" />) : f.starter}
+                    </TableCell>
+                    <TableCell className="text-center bg-indigo-50/50">
+                      {typeof f.pro === "boolean" ? (f.pro ? <Check className="h-4 w-4 text-green-500 mx-auto" /> : <X className="h-4 w-4 text-slate-300 mx-auto" />) : f.pro}
+                    </TableCell>
+                    <TableCell className="text-center">
+                      {typeof f.enterprise === "boolean" ? (f.enterprise ? <Check className="h-4 w-4 text-green-500 mx-auto" /> : <X className="h-4 w-4 text-slate-300 mx-auto" />) : f.enterprise}
+                    </TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          </Card>
+        </div>
+      </section>
+
+      {/* ── FAQ ── */}
+      <section className="py-24 bg-white">
+        <div className="mx-auto max-w-3xl px-6">
+          <h2 className="animate-fade-up text-3xl font-bold text-center mb-12 tracking-tight sm:text-4xl">Frequently Asked Questions</h2>
+          <Accordion type="single" collapsible className="space-y-3 stagger">
+            {faqs.map((faq, i) => (
+              <AccordionItem key={i} value={`faq-\${i}`} className="border border-slate-200 rounded-xl px-6 data-[state=open]:shadow-md transition-shadow">
+                <AccordionTrigger className="text-left font-medium hover:no-underline py-4">{faq.q}</AccordionTrigger>
+                <AccordionContent className="text-slate-500 pb-4">{faq.a}</AccordionContent>
+              </AccordionItem>
+            ))}
+          </Accordion>
+        </div>
+      </section>
+
+      {/* ── CTA ── */}
+      <section className="py-24 bg-gradient-to-br from-indigo-600 to-slate-900">
+        <div className="mx-auto max-w-3xl px-6 text-center">
+          <h2 className="animate-fade-up text-3xl font-bold text-white sm:text-4xl">Start your free trial today</h2>
+          <p className="mt-4 text-indigo-200">14 days free. No credit card required. Cancel anytime.</p>
+          <Button asChild size="lg" className="active:scale-[0.98] mt-8 bg-white text-indigo-700 hover:bg-indigo-50 rounded-full px-8 shadow-lg font-semibold">
+            <Link to="/signup">Start Free Trial <ArrowRight className="ml-2 h-4 w-4" /></Link>
+          </Button>
+        </div>
+      </section>
+
+      <Footer />
+    </div>
+  );
+}