diff --git a/app/components/AutumnFallback.tsx b/app/components/AutumnFallback.tsx
index 9cdeca18..6ea993eb 100644
--- a/app/components/AutumnFallback.tsx
+++ b/app/components/AutumnFallback.tsx
@@ -2,9 +2,11 @@
 // This file provides working alternatives when autumn-js/react is not available
 
 import React, { createContext, useContext, useState, useEffect } from 'react';
+import Link from 'next/link';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
 import { Button } from "@/components/ui/button";
-import { CheckCircle, XCircle, AlertCircle } from "lucide-react";
+import { Check, Sparkles, Crown } from "lucide-react";
+import CheckoutButton from "@/components/stripe/CheckoutButton";
 
 // Types
 interface Customer {
@@ -45,16 +47,15 @@ export const AutumnProvider: React.FC<{ children: React.ReactNode }> = ({ childr
   // Mock loading customer data
   useEffect(() => {
     setIsLoading(true);
-    // Simulate API call
     setTimeout(() => {
       setCustomer({
         id: 'cus_mock123',
         email: 'user@example.com',
         name: 'Test User',
         subscription: {
-          status: 'active',
-          planId: 'pro',
-          currentPeriodEnd: Date.now() + 30 * 24 * 60 * 60 * 1000 // 30 days from now
+          status: 'inactive',
+          planId: 'free',
+          currentPeriodEnd: Date.now() + 30 * 24 * 60 * 60 * 1000
         }
       });
       setIsLoading(false);
@@ -78,98 +79,89 @@ export const useCustomer = () => {
   };
 };
 
-// Mock pricing table component
+// Mock pricing table component (two-tier)
 export const PricingTable: React.FC = () => {
+  const proPriceId = process.env.NEXT_PUBLIC_STRIPE_PRO_PRICE_ID || 'price_pro_monthly';
+
   const plans = [
     {
       id: 'free',
       name: 'Free',
       price: '$0',
-      period: 'forever',
-      description: 'Perfect for getting started',
-      features: [
-        '5 AI chat messages per day',
-        '1 sandbox environment',
-        'Basic code generation',
-        'Community support'
-      ],
-      buttonText: 'Get Started',
-      popular: false
+      subtext: 'No credit card required',
+      description: 'Everything you need to get started.',
+      features: ['Up to 5 chats', 'Basic templates', 'Standard sandbox time', 'Community support'],
+      buttonText: 'Get started',
+      popular: false,
+      icon: Sparkles,
     },
     {
       id: 'pro',
       name: 'Pro',
-      price: '$29',
-      period: 'per month',
-      description: 'For serious developers',
-      features: [
-        'Unlimited AI chat messages',
-        '5 concurrent sandboxes',
-        'Advanced code generation',
-        'Priority support',
-        'Autonomous agents',
-        'Custom domains'
-      ],
-      buttonText: 'Start Free Trial',
-      popular: true
+      price: '$20',
+      subtext: 'per month, cancel anytime',
+      description: 'Build without limits with advanced AI.',
+      features: ['Unlimited chats', 'Advanced AI models', 'Extended sandbox time', 'Priority support'],
+      buttonText: 'Upgrade to Pro',
+      popular: true,
+      icon: Crown,
     },
-    {
-      id: 'enterprise',
-      name: 'Enterprise',
-      price: 'Custom',
-      period: '',
-      description: 'For teams and organizations',
-      features: [
-        'Everything in Pro',
-        'Unlimited sandboxes',
-        'Team collaboration',
-        'SLA guarantee',
-        'Custom integrations',
-        'Dedicated support'
-      ],
-      buttonText: 'Contact Sales',
-      popular: false
-    }
   ];
 
   return (
-    <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
-      {plans.map((plan) => (
-        <Card 
-          key={plan.id} 
-          className={`relative ${plan.popular ? 'border-blue-500 ring-2 ring-blue-500' : ''}`}
-        >
-          {plan.popular && (
-            <div className="absolute top-0 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-blue-500 text-white text-xs font-bold px-3 py-1 rounded-full">
-              MOST POPULAR
-            </div>
-          )}
-          <CardHeader>
-            <CardTitle className="text-2xl">{plan.name}</CardTitle>
-            <div className="flex items-baseline">
-              <span className="text-4xl font-bold">{plan.price}</span>
-              {plan.period && <span className="text-gray-500 ml-1">{plan.period}</span>}
-            </div>
-            <CardDescription>{plan.description}</CardDescription>
-          </CardHeader>
-          <CardContent>
-            <ul className="space-y-3 mb-6">
-              {plan.features.map((feature, index) => (
-                <li key={index} className="flex items-center">
-                  <CheckCircle className="h-5 w-5 text-green-500 mr-2" />
-                  <span>{feature}</span>
-                </li>
-              ))}
-            </ul>
-            <Button 
-              className="w-full" 
-              variant={plan.popular ? "default" : "outline"}
-            >
-              {plan.buttonText}
-            </Button>
-          </CardContent>
-        </Card>
-      ))}
+    <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
+      {plans.map((plan) => {
+        const Icon = plan.icon;
+        const isFree = plan.id === 'free';
+        return (
+          <Card
+            key={plan.id}
+            className={`relative transition hover:shadow-md hover:scale-[1.01] ${plan.popular ? 'ring-1 ring-primary/20' : ''}`}
+          >
+            {plan.popular && (
+              <div className="absolute top-3 right-3">
+                <span className="bg-primary/10 text-primary text-xs font-bold px-2 py-0.5 rounded-full">
+                  Most popular
+                </span>
+              </div>
+            )}
+            <CardHeader>
+              <div className="flex items-center gap-3">
+                <div className="rounded-md bg-primary/10 p-2">
+                  <Icon className="h-6 w-6 text-primary" aria-hidden="true" />
+                </div>
+                <div>
+                  <CardTitle className="text-2xl">{plan.name}</CardTitle>
+                  <CardDescription>{plan.description}</CardDescription>
+                </div>
+              </div>
+              <div className="mt-4 flex items-baseline gap-2">
+                <span className="text-4xl font-bold">{plan.price}</span>
+                <span className="text-sm text-muted-foreground">{plan.subtext}</span>
+              </div>
+            </CardHeader>
+            <CardContent>
+              <ul className="space-y-3 mb-6" role="list">
+                {plan.features.map((feature, index) => (
+                  <li key={index} className="flex items-start">
+                    <Check className="h-5 w-5 text-green-600 dark:text-green-500 mr-3 mt-0.5" aria-hidden="true" />
+                    <span>{feature}</span>
+                  </li>
+                ))}
+              </ul>
+              {isFree ? (
+                <Link href="/sign-in" className="block w-full" aria-label="Get started with Free">
+                  <Button variant="outline" className="w-full">{plan.buttonText}</Button>
+                </Link>
+              ) : (
+                <CheckoutButton priceId={proPriceId} mode="subscription" variant="orange" size="lg" className="w-full">
+                  {plan.buttonText}
+                </CheckoutButton>
+              )}
+            </CardContent>
+          </Card>
+        );
+      })}
     </div>
   );
 };
@@ -181,7 +173,6 @@ export const useUsageLimits = (featureId: string) => {
 
   useEffect(() => {
     setIsLoading(true);
-    // Simulate API call
     setTimeout(() => {
       setLimits({
         featureId,
@@ -198,4 +189,4 @@ export const useUsageLimits = (featureId: string) => {
     mutate: () => {},
     isValidating: false
   };
-};
\ No newline at end of file
+};
diff --git a/app/pricing/page.tsx b/app/pricing/page.tsx
index f704df78..6dd7b66f 100644
--- a/app/pricing/page.tsx
+++ b/app/pricing/page.tsx
@@ -1,144 +1,170 @@
 "use client";
 
-import { PricingTable } from "@/app/components/AutumnFallback";
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
-import { CheckCircle, Zap, Sparkles } from "lucide-react";
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { Check, Sparkles, Crown } from "lucide-react";
+import CheckoutButton from "@/components/stripe/CheckoutButton";
 
 export default function PricingPage() {
+  const router = useRouter();
+  const proPriceId = process.env.NEXT_PUBLIC_STRIPE_PRO_PRICE_ID || "price_pro_monthly";
+
   return (
-    <div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 py-12 px-4 sm:px-6 lg:px-8">
-      <div className="max-w-7xl mx-auto">
-        {/* Header */}
-        <div className="text-center mb-12">
-          <div className="flex justify-center items-center mb-4">
-            <Zap className="h-12 w-12 text-blue-600 mr-4" />
-            <h1 className="text-4xl font-bold text-gray-900">
-              ZapDev Pricing
-            </h1>
-          </div>
-          <p className="text-xl text-gray-600 max-w-3xl mx-auto">
-            Unlock the full power of AI-assisted React development. 
-            Choose a plan that fits your needs and start building amazing apps instantly.
+    <div className="min-h-screen bg-background text-foreground">
+      <div className="container mx-auto px-4 py-12">
+        <header className="text-center mb-12">
+          <h1 className="text-4xl font-bold tracking-tight">Pricing</h1>
+          <p className="text-muted-foreground mt-3 max-w-2xl mx-auto">
+            Choose the plan that fits your workflow. Start free and upgrade
+            anytime.
           </p>
-        </div>
+        </header>
 
-        {/* Feature Highlights */}
-        <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-12">
-          <Card className="text-center">
-            <CardHeader>
-              <div className="mx-auto mb-2">
-                <Sparkles className="h-8 w-8 text-yellow-500" />
-              </div>
-              <CardTitle>AI-Powered Development</CardTitle>
-            </CardHeader>
-            <CardContent>
-              <CardDescription>
-                Chat with AI agents to build React applications with advanced features and real-time code generation.
-              </CardDescription>
-            </CardContent>
-          </Card>
+        <section aria-labelledby="pricing-heading" className="mb-16">
+          <h2 id="pricing-heading" className="sr-only">
+            Plans
+          </h2>
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
+            {/* Free */}
+            <Card className="transition hover:shadow-md hover:scale-[1.01] focus-within:ring-2 focus-within:ring-primary">
+              <CardHeader>
+                <div className="flex items-start justify-between">
+                  <div className="flex items-center gap-3">
+                    <div className="rounded-md bg-primary/10 p-2">
+                      <Sparkles className="h-6 w-6 text-primary" aria-hidden="true" />
+                    </div>
+                    <div>
+                      <CardTitle className="text-2xl">Free</CardTitle>
+                      <CardDescription>
+                        Everything you need to get started.
+                      </CardDescription>
+                    </div>
+                  </div>
+                </div>
+                <div className="mt-4 flex items-baseline gap-2">
+                  <span className="text-4xl font-bold">$0</span>
+                  <span className="text-sm text-muted-foreground">No credit card required</span>
+                </div>
+              </CardHeader>
+              <CardContent>
+                <ul className="space-y-3" role="list">
+                  {[
+                    "Up to 5 chats",
+                    "Basic templates",
+                    "Standard sandbox time",
+                    "Community support",
+                  ].map((feature) => (
+                    <li key={feature} className="flex items-start gap-3">
+                      <Check className="h-5 w-5 text-green-600 dark:text-green-500 mt-0.5" aria-hidden="true" />
+                      <span className="text-sm">{feature}</span>
+                    </li>
+                  ))}
+                </ul>
+                <div className="mt-6">
+                  <Button
+                    variant="outline"
+                    className="w-full"
+                    aria-label="Get started with Free"
+                    onClick={() => router.push("/sign-in")}
+                  >
+                    Get started
+                  </Button>
+                </div>
+              </CardContent>
+            </Card>
 
-          <Card className="text-center">
-            <CardHeader>
-              <div className="mx-auto mb-2">
-                <CheckCircle className="h-8 w-8 text-green-500" />
-              </div>
-              <CardTitle>Isolated Sandboxes</CardTitle>
-            </CardHeader>
-            <CardContent>
-              <CardDescription>
-                Each project runs in its own secure E2B sandbox environment with persistent file storage.
-              </CardDescription>
-            </CardContent>
-          </Card>
+            {/* Pro */}
+            <Card className="relative transition hover:shadow-md hover:scale-[1.01] ring-1 ring-primary/20">
+              <span className="absolute top-3 right-3 text-xs bg-primary/10 text-primary px-2 py-0.5 rounded-full">
+                Most popular
+              </span>
+              <CardHeader>
+                <div className="flex items-start justify-between">
+                  <div className="flex items-center gap-3">
+                    <div className="rounded-md bg-primary/10 p-2">
+                      <Crown className="h-6 w-6 text-primary" aria-hidden="true" />
+                    </div>
+                    <div>
+                      <CardTitle className="text-2xl">Pro</CardTitle>
+                      <CardDescription>
+                        Build without limits with advanced AI.
+                      </CardDescription>
+                    </div>
+                  </div>
+                </div>
+                <div className="mt-4 flex items-baseline gap-2">
+                  <span className="text-4xl font-bold">$20</span>
+                  <span className="text-sm text-muted-foreground">per month, cancel anytime</span>
+                </div>
+              </CardHeader>
+              <CardContent>
+                <ul className="space-y-3" role="list">
+                  {[
+                    "Unlimited chats",
+                    "Advanced AI models",
+                    "Extended sandbox time",
+                    "Priority support",
+                  ].map((feature) => (
+                    <li key={feature} className="flex items-start gap-3">
+                      <Check className="h-5 w-5 text-green-600 dark:text-green-500 mt-0.5" aria-hidden="true" />
+                      <span className="text-sm">{feature}</span>
+                    </li>
+                  ))}
+                </ul>
+                <div className="mt-6">
+                  <CheckoutButton
+                    priceId={proPriceId}
+                    mode="subscription"
+                    variant="orange"
+                    size="lg"
+                    className="w-full"
+                  >
+                    Upgrade to Pro
+                  </CheckoutButton>
+                </div>
+              </CardContent>
+            </Card>
+          </div>
+        </section>
 
-          <Card className="text-center">
+        <section aria-labelledby="faq-heading" className="max-w-3xl mx-auto">
+          <Card>
             <CardHeader>
-              <div className="mx-auto mb-2">
-                <Zap className="h-8 w-8 text-blue-500" />
-              </div>
-              <CardTitle>Autonomous Execution</CardTitle>
+              <CardTitle id="faq-heading">Frequently Asked Questions</CardTitle>
             </CardHeader>
             <CardContent>
-              <CardDescription>
-                Advanced autonomous workflows that can execute complex development tasks independently.
-              </CardDescription>
+              <div className="space-y-4">
+                <div>
+                  <h3 className="font-semibold mb-1">What happens if I exceed my limits?</h3>
+                  <p className="text-sm text-muted-foreground">
+                    When you reach your plan limits, you can upgrade instantly to continue working. Your projects and progress are always preserved.
+                  </p>
+                </div>
+                <div>
+                  <h3 className="font-semibold mb-1">Can I change plans anytime?</h3>
+                  <p className="text-sm text-muted-foreground">
+                    Yes. You can upgrade or downgrade at any time. Changes take effect immediately and billing is prorated.
+                  </p>
+                </div>
+                <div>
+                  <h3 className="font-semibold mb-1">Do I need a credit card for Free?</h3>
+                  <p className="text-sm text-muted-foreground">
+                    No. The Free plan requires no credit card and is great for getting started.
+                  </p>
+                </div>
+              </div>
             </CardContent>
           </Card>
-        </div>
-
-        {/* Autumn Pricing Table */}
-        <div className="mb-16">
-          <PricingTable />
-        </div>
-
-        {/* Usage Limits Information */}
-        <Card className="bg-amber-50 border-amber-200 mb-8">
-          <CardHeader>
-            <CardTitle className="text-amber-900 flex items-center">
-              <Sparkles className="h-5 w-5 mr-2" />
-              Usage-Based Pricing
-            </CardTitle>
-          </CardHeader>
-          <CardContent className="text-amber-800">
-            <p className="mb-4">
-              ZapDev uses a usage-based pricing model to ensure you only pay for what you use:
-            </p>
-            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-              <div>
-                <h4 className="font-semibold mb-2">What Counts as Usage</h4>
-                <ul className="space-y-1 text-sm">
-                  <li>• AI chat messages and code generations</li>
-                  <li>• Sandbox creation and execution time</li>
-                  <li>• Autonomous agent workflows</li>
-                  <li>• File operations and storage</li>
-                </ul>
-              </div>
-              <div>
-                <h4 className="font-semibold mb-2">When You Hit Limits</h4>
-                <ul className="space-y-1 text-sm">
-                  <li>• You'll be automatically redirected here</li>
-                  <li>• Upgrade instantly to continue working</li>
-                  <li>• No interruption to your development flow</li>
-                  <li>• All your work is safely preserved</li>
-                </ul>
-              </div>
-            </div>
-          </CardContent>
-        </Card>
-
-        {/* FAQ Section */}
-        <Card>
-          <CardHeader>
-            <CardTitle>Frequently Asked Questions</CardTitle>
-          </CardHeader>
-          <CardContent>
-            <div className="space-y-4">
-              <div>
-                <h4 className="font-semibold mb-1">What happens if I exceed my usage limits?</h4>
-                <p className="text-sm text-gray-600">
-                  When you reach your plan's usage limits, you'll be automatically redirected to this pricing page 
-                  where you can instantly upgrade to continue your work without losing any progress.
-                </p>
-              </div>
-              <div>
-                <h4 className="font-semibold mb-1">Can I change plans anytime?</h4>
-                <p className="text-sm text-gray-600">
-                  Yes! You can upgrade or downgrade your plan at any time. Changes take effect immediately, 
-                  and billing is prorated automatically.
-                </p>
-              </div>
-              <div>
-                <h4 className="font-semibold mb-1">Is my code and data secure?</h4>
-                <p className="text-sm text-gray-600">
-                  Absolutely. Each sandbox is isolated, your code is encrypted, and we follow industry-standard 
-                  security practices to keep your projects safe.
-                </p>
-              </div>
-            </div>
-          </CardContent>
-        </Card>
+        </section>
       </div>
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/components/PricingModal.tsx b/components/PricingModal.tsx
index 88e68547..353e63a2 100644
--- a/components/PricingModal.tsx
+++ b/components/PricingModal.tsx
@@ -1,8 +1,9 @@
 'use client';
 
-import { useState } from 'react';
 import { Button } from '@/components/ui/button';
-import { motion, AnimatePresence } from 'framer-motion';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { AnimatePresence, motion } from 'framer-motion';
+import { Check, Sparkles, Crown, X } from 'lucide-react';
 
 interface PricingModalProps {
   isOpen: boolean;
@@ -11,57 +12,6 @@ interface PricingModalProps {
 }
 
 export default function PricingModal({ isOpen, onClose, onUpgrade }: PricingModalProps) {
-  const [selectedBilling, setSelectedBilling] = useState<'monthly' | 'annual'>('monthly');
-
-  const plans = [
-    {
-      name: 'Free',
-      description: 'Perfect for trying out our AI-powered development platform.',
-      monthlyPrice: 0,
-      annualPrice: 0,
-      features: [
-        '✅ 10 deployed sites',
-        '✅ Website analytics',
-        '✅ Unlimited codebase downloads',
-        '✅ AI database generation',
-        '✅ Drizzle Studio access',
-        '5 chats limit',
-        'Basic AI models',
-        'Community support'
-      ]
-    },
-    {
-      name: 'Pro',
-      description: 'Designed for fast-moving teams building together in real time.',
-      monthlyPrice: 20,
-      annualPrice: 16,
-      features: [
-        '✅ Everything in Free, plus:',
-        '✅ Custom domains',
-        'Unlimited chats',
-        'Advanced AI models',
-        'Priority support',
-        'Export conversations',
-        'Custom integrations',
-        'Team collaboration'
-      ]
-    },
-    {
-      name: 'Enterprise',
-      description: 'Built for large orgs needing flexibility, scale, and governance.',
-      isEnterprise: true,
-      features: [
-        'Everything in Pro, plus:',
-        'Dedicated support',
-        'Custom deployment',
-        'Advanced compliance',
-        'SSO integration',
-        'SLA guarantees',
-        'Custom AI training'
-      ]
-    }
-  ];
-
   if (!isOpen) return null;
 
   return (
@@ -70,132 +20,120 @@ export default function PricingModal({ isOpen, onClose, onUpgrade }: PricingModa
         initial={{ opacity: 0 }}
         animate={{ opacity: 1 }}
         exit={{ opacity: 0 }}
-        className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4"
+        className="fixed inset-0 bg-black/60 backdrop-blur-sm z-50 flex items-center justify-center p-4"
         onClick={onClose}
       >
         <motion.div
-          initial={{ scale: 0.9, opacity: 0 }}
+          initial={{ scale: 0.98, opacity: 0 }}
           animate={{ scale: 1, opacity: 1 }}
-          exit={{ scale: 0.9, opacity: 0 }}
-          className="bg-gray-900 rounded-lg max-w-6xl w-full max-h-[90vh] overflow-y-auto"
+          exit={{ scale: 0.98, opacity: 0 }}
+          className="w-full max-w-5xl"
           onClick={(e) => e.stopPropagation()}
         >
-          {/* Header */}
-          <div className="p-6 border-b border-gray-700">
-            <div className="flex items-center justify-between">
+          <Card className="border bg-background text-foreground">
+            <div className="flex items-center justify-between p-6 pb-0">
               <div>
-                <h2 className="text-2xl font-bold text-white">Upgrade Your Plan</h2>
-                <p className="text-gray-400 mt-1">You've reached your free plan limit of 5 chats</p>
+                <h2 className="text-2xl font-bold">Upgrade your plan</h2>
+                <p className="text-sm text-muted-foreground mt-1">
+                  You've reached the Free plan limit. Unlock more with Pro.
+                </p>
               </div>
               <button
+                aria-label="Close pricing"
                 onClick={onClose}
-                className="text-gray-400 hover:text-white transition-colors"
-              >
-                <svg className="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
-                </svg>
-              </button>
-            </div>
-
-            {/* Billing Toggle */}
-            <div className="flex items-center gap-4 mt-6">
-              <span className="text-white">Monthly</span>
-              <button
-                onClick={() => setSelectedBilling(selectedBilling === 'monthly' ? 'annual' : 'monthly')}
-                className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${
-                  selectedBilling === 'annual' ? 'bg-blue-600' : 'bg-gray-600'
-                }`}
+                className="rounded-md p-2 hover:bg-accent hover:text-accent-foreground transition"
               >
-                <span
-                  className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${
-                    selectedBilling === 'annual' ? 'translate-x-6' : 'translate-x-1'
-                  }`}
-                />
+                <X className="h-5 w-5" />
               </button>
-              <span className="text-white">Annual</span>
-              {selectedBilling === 'annual' && (
-                <span className="text-green-400 text-sm">Save 20%</span>
-              )}
             </div>
-          </div>
 
-          {/* Pricing Cards */}
-          <div className="p-6">
-            <div className="grid md:grid-cols-3 gap-6">
-              {plans.map((plan) => (
-                <div
-                  key={plan.name}
-                  className={`bg-gray-800 rounded-lg p-6 border-2 transition-colors ${
-                    plan.name === 'Pro' ? 'border-blue-500' : 'border-gray-700 hover:border-gray-600'
-                  }`}
-                >
-                  <div className="text-center mb-6">
-                    <h3 className="text-xl font-bold text-white mb-2">{plan.name}</h3>
-                    <p className="text-gray-400 text-sm mb-4">{plan.description}</p>
-                    
-                    {plan.isEnterprise ? (
-                      <div className="mb-4">
-                        <span className="text-gray-400">Flexible billing</span>
+            <CardContent>
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                {/* Free */}
+                <Card className="transition hover:shadow-md hover:scale-[1.01]">
+                  <CardHeader>
+                    <div className="flex items-center gap-3">
+                      <div className="rounded-md bg-primary/10 p-2">
+                        <Sparkles className="h-6 w-6 text-primary" aria-hidden="true" />
                       </div>
-                    ) : (
-                      <div className="mb-4">
-                        <span className="text-3xl font-bold text-white">
-                          ${selectedBilling === 'monthly' ? plan.monthlyPrice : plan.annualPrice}
-                        </span>
-                        <span className="text-gray-400"> per month</span>
-                        {selectedBilling === 'annual' && (
-                          <div className="text-sm text-green-400">
-                            Billed annually
-                          </div>
-                        )}
+                      <div>
+                        <CardTitle className="text-xl">Free</CardTitle>
+                        <CardDescription>Everything you need to get started.</CardDescription>
                       </div>
-                    )}
+                    </div>
+                    <div className="mt-3 flex items-baseline gap-2">
+                      <span className="text-3xl font-bold">$0</span>
+                      <span className="text-xs text-muted-foreground">No credit card required</span>
+                    </div>
+                  </CardHeader>
+                  <CardContent>
+                    <ul className="space-y-2" role="list">
+                      {['Up to 5 chats', 'Basic templates', 'Standard sandbox time', 'Community support'].map((f) => (
+                        <li key={f} className="flex items-start gap-2">
+                          <Check className="h-4 w-4 text-green-600 dark:text-green-500 mt-0.5" aria-hidden="true" />
+                          <span className="text-sm">{f}</span>
+                        </li>
+                      ))}
+                    </ul>
+                    <div className="mt-5">
+                      <Button
+                        variant="outline"
+                        className="w-full"
+                        aria-label="Get started with Free"
+                        onClick={() => onUpgrade('free')}
+                      >
+                        Get started
+                      </Button>
+                    </div>
+                  </CardContent>
+                </Card>
 
-                    <Button
-                      onClick={() => onUpgrade(plan.name.toLowerCase())}
-                      className={`w-full ${
-                        plan.name === 'Free'
-                          ? 'bg-green-600 hover:bg-green-700'
-                          : plan.name === 'Pro'
-                          ? 'bg-blue-600 hover:bg-blue-700'
-                          : plan.isEnterprise
-                          ? 'bg-gray-700 hover:bg-gray-600'
-                          : 'bg-gray-700 hover:bg-gray-600'
-                      }`}
-                    >
-                      {plan.name === 'Free' 
-                        ? 'Current Plan' 
-                        : plan.isEnterprise 
-                        ? 'Contact Sales' 
-                        : 'Upgrade'}
-                    </Button>
-                  </div>
-
-                  <div className="space-y-3">
-                    {plan.features.map((feature, index) => (
-                      <div key={index} className="flex items-start gap-3">
-                        <svg className="w-5 h-5 text-green-400 mt-0.5 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
-                        </svg>
-                        <span className={`text-sm ${feature.includes('Everything') ? 'text-gray-300 font-medium' : 'text-gray-400'}`}>
-                          {feature}
-                        </span>
+                {/* Pro */}
+                <Card className="relative transition hover:shadow-md hover:scale-[1.01] ring-1 ring-primary/20">
+                  <span className="absolute top-3 right-3 text-xs bg-primary/10 text-primary px-2 py-0.5 rounded-full">
+                    Most popular
+                  </span>
+                  <CardHeader>
+                    <div className="flex items-center gap-3">
+                      <div className="rounded-md bg-primary/10 p-2">
+                        <Crown className="h-6 w-6 text-primary" aria-hidden="true" />
                       </div>
-                    ))}
-                  </div>
-                </div>
-              ))}
-            </div>
-          </div>
-
-          {/* Footer */}
-          <div className="p-6 border-t border-gray-700 text-center">
-            <p className="text-gray-400 text-sm">
-              All plans include a 7-day free trial. Cancel anytime.
-            </p>
-          </div>
+                      <div>
+                        <CardTitle className="text-xl">Pro</CardTitle>
+                        <CardDescription>Build without limits with advanced AI.</CardDescription>
+                      </div>
+                    </div>
+                    <div className="mt-3 flex items-baseline gap-2">
+                      <span className="text-3xl font-bold">$20</span>
+                      <span className="text-xs text-muted-foreground">per month, cancel anytime</span>
+                    </div>
+                  </CardHeader>
+                  <CardContent>
+                    <ul className="space-y-2" role="list">
+                      {['Unlimited chats', 'Advanced AI models', 'Extended sandbox time', 'Priority support'].map((f) => (
+                        <li key={f} className="flex items-start gap-2">
+                          <Check className="h-4 w-4 text-green-600 dark:text-green-500 mt-0.5" aria-hidden="true" />
+                          <span className="text-sm">{f}</span>
+                        </li>
+                      ))}
+                    </ul>
+                    <div className="mt-5">
+                      <Button
+                        className="w-full"
+                        variant="orange"
+                        aria-label="Upgrade to Pro"
+                        onClick={() => onUpgrade('pro')}
+                      >
+                        Upgrade to Pro
+                      </Button>
+                    </div>
+                  </CardContent>
+                </Card>
+              </div>
+            </CardContent>
+          </Card>
         </motion.div>
       </motion.div>
     </AnimatePresence>
   );
-}
\ No newline at end of file
+}
diff --git a/components/stripe/SubscriptionPlans.tsx b/components/stripe/SubscriptionPlans.tsx
index 4af0244c..d6500a49 100644
--- a/components/stripe/SubscriptionPlans.tsx
+++ b/components/stripe/SubscriptionPlans.tsx
@@ -1,7 +1,9 @@
 'use client';
 
-import { Check, Zap, Crown, Rocket } from 'lucide-react';
+import Link from 'next/link';
+import { Check, Sparkles, Crown } from 'lucide-react';
 import CheckoutButton from './CheckoutButton';
+import { Button } from '@/components/ui/button';
 
 export interface PricingPlan {
   id: string;
@@ -19,7 +21,7 @@ export interface PricingPlan {
 }
 
 interface SubscriptionPlansProps {
-  plans: PricingPlan[];
+  plans?: PricingPlan[];
   className?: string;
 }
 
@@ -27,143 +29,102 @@ const defaultPlans: PricingPlan[] = [
   {
     id: 'free',
     name: 'Free',
-    description: 'Perfect for trying out Zapdev',
+    description: 'Everything you need to get started.',
     price: 0,
     currency: 'usd',
     interval: 'month',
-    features: [
-      '5 AI-powered projects',
-      'Basic templates',
-      'Community support',
-      'Standard sandbox time',
-    ],
-    icon: Zap,
-    buttonText: 'Get Started',
+    features: ['Up to 5 chats', 'Basic templates', 'Standard sandbox time', 'Community support'],
+    icon: Sparkles,
+    buttonText: 'Get started',
     buttonVariant: 'outline',
   },
   {
     id: 'pro',
     name: 'Pro',
-    description: 'For individual developers',
+    description: 'Build without limits with advanced AI.',
     price: 20,
     currency: 'usd',
     interval: 'month',
-    priceId: process.env.NEXT_PUBLIC_STRIPE_PRO_PRICE_ID || 'price_pro_monthly', // Use env var for Stripe price ID
-    features: [
-      'Unlimited chats',
-      'Unlimited AI-powered projects',
-      'Premium templates',
-      'Priority support',
-      'Extended sandbox time',
-      'Advanced AI models',
-      'Export to GitHub',
-    ],
+    priceId: process.env.NEXT_PUBLIC_STRIPE_PRO_PRICE_ID || 'price_pro_monthly',
+    features: ['Unlimited chats', 'Advanced AI models', 'Extended sandbox time', 'Priority support'],
     popular: true,
     icon: Crown,
     buttonText: 'Upgrade to Pro',
-  },
-  {
-    id: 'team',
-    name: 'Team',
-    description: 'For teams and organizations',
-    price: 50,
-    currency: 'usd',
-    interval: 'month',
-    priceId: 'price_team_monthly', // Replace with actual Stripe price ID
-    features: [
-      'Everything in Pro',
-      'Team collaboration',
-      'Shared projects',
-      'Advanced analytics',
-      'Custom integrations',
-      'Dedicated support',
-      'SSO authentication',
-    ],
-    icon: Rocket,
-    buttonText: 'Upgrade to Team',
     buttonVariant: 'orange',
   },
 ];
 
-export default function SubscriptionPlans({ 
-  plans = defaultPlans, 
-  className = '' 
-}: SubscriptionPlansProps) {
-  const formatPrice = (price: number, currency: string) => {
-    return new Intl.NumberFormat('en-US', {
+export default function SubscriptionPlans({ plans = defaultPlans, className = '' }: SubscriptionPlansProps) {
+  const formatPrice = (price: number, currency: string) =>
+    new Intl.NumberFormat('en-US', {
       style: 'currency',
       currency: currency.toUpperCase(),
       minimumFractionDigits: 0,
     }).format(price);
-  };
 
   return (
-    <div className={`grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 ${className}`}>
+    <div className={`grid grid-cols-1 md:grid-cols-2 gap-8 ${className}`}>
       {plans.map((plan) => {
-        const Icon = plan.icon || Zap;
-        
+        const Icon = plan.icon || Sparkles;
+        const isFree = plan.id === 'free';
+        const isPro = plan.id === 'pro';
+
         return (
           <div
             key={plan.id}
-            className={`
-              relative rounded-[20px] border border-zinc-200 bg-white p-8 shadow-sm transition-all duration-300 hover:shadow-lg
-              ${plan.popular ? 'ring-2 ring-blue-500 scale-105' : ''}
-            `}
+            className={`relative rounded-lg border bg-card text-card-foreground p-8 shadow-sm transition-all duration-200 hover:shadow-md hover:scale-[1.01] ${
+              plan.popular ? 'ring-1 ring-primary/20' : ''
+            }`}
+            aria-label={`${plan.name} plan`}
           >
             {plan.popular && (
-              <div className="absolute -top-3 left-1/2 transform -translate-x-1/2">
-                <span className="bg-blue-500 text-white px-4 py-1 rounded-full text-sm font-medium">
-                  Most Popular
+              <div className="absolute top-3 right-3">
+                <span className="bg-primary/10 text-primary px-2 py-0.5 rounded-full text-xs font-medium">
+                  Most popular
                 </span>
               </div>
             )}
 
             <div className="flex items-center mb-4">
-              <Icon className="h-8 w-8 text-blue-500 mr-3" />
+              <Icon className="h-8 w-8 text-primary mr-3" aria-hidden="true" />
               <div>
-                <h3 className="text-xl font-bold text-zinc-900">{plan.name}</h3>
-                <p className="text-sm text-zinc-600">{plan.description}</p>
+                <h3 className="text-xl font-bold">{plan.name}</h3>
+                <p className="text-sm text-muted-foreground">{plan.description}</p>
               </div>
             </div>
 
             <div className="mb-6">
-              <div className="flex items-baseline">
-                <span className="text-4xl font-bold text-zinc-900">
+              <div className="flex items-baseline gap-2">
+                <span className="text-4xl font-bold">
                   {formatPrice(plan.price, plan.currency)}
                 </span>
-                {plan.price > 0 && (
-                  <span className="text-zinc-600 ml-2">
-                    /{plan.interval}
-                  </span>
+                {plan.price > 0 ? (
+                  <span className="text-muted-foreground">/month</span>
+                ) : (
+                  <span className="text-muted-foreground">No credit card required</span>
                 )}
               </div>
+              {isPro && (
+                <div className="text-xs text-muted-foreground mt-1">per month, cancel anytime</div>
+              )}
             </div>
 
-            <ul className="space-y-3 mb-8">
+            <ul className="space-y-3 mb-8" role="list">
               {plan.features.map((feature, index) => (
                 <li key={index} className="flex items-start">
-                  <Check className="h-5 w-5 text-green-500 mr-3 mt-0.5 flex-shrink-0" />
-                  <span className="text-zinc-700">{feature}</span>
+                  <Check className="h-5 w-5 text-green-600 dark:text-green-500 mr-3 mt-0.5 flex-shrink-0" aria-hidden="true" />
+                  <span>{feature}</span>
                 </li>
               ))}
             </ul>
 
             <div className="mt-auto">
-              {plan.price === 0 ? (
-                <CheckoutButton
-                  customAmount={{
-                    amount: 0,
-                    currency: plan.currency,
-                    name: plan.name,
-                    description: plan.description,
-                  }}
-                  mode="payment"
-                  variant={plan.buttonVariant || 'outline'}
-                  size="lg"
-                  className="w-full"
-                >
-                  {plan.buttonText}
-                </CheckoutButton>
+              {isFree ? (
+                <Link href="/sign-in" className="block w-full" aria-label="Get started with Free">
+                  <Button variant={plan.buttonVariant || 'outline'} size="lg" className="w-full">
+                    {plan.buttonText}
+                  </Button>
+                </Link>
               ) : plan.priceId ? (
                 <CheckoutButton
                   priceId={plan.priceId}
@@ -177,7 +138,7 @@ export default function SubscriptionPlans({
               ) : (
                 <CheckoutButton
                   customAmount={{
-                    amount: plan.price * 100, // Convert to cents
+                    amount: plan.price * 100,
                     currency: plan.currency,
                     name: plan.name,
                     description: plan.description,
@@ -196,4 +157,4 @@ export default function SubscriptionPlans({
       })}
     </div>
   );
-}
\ No newline at end of file
+}