diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 0000000..0ce5eea
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "terminal.integrated.sendKeybindingsToShell": true
+}
\ No newline at end of file
diff --git a/docker-compose.yml b/docker-compose.yml
index 230173f..fd389e4 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -1,4 +1,3 @@
-version: '3.8'
 
 services:
   # ================================
diff --git a/src/app/(auth)/sign-in/[[...sign-in]]/page.tsx b/src/app/(auth)/sign-in/[[...sign-in]]/page.tsx
index c983e1d..5986cc8 100644
--- a/src/app/(auth)/sign-in/[[...sign-in]]/page.tsx
+++ b/src/app/(auth)/sign-in/[[...sign-in]]/page.tsx
@@ -9,10 +9,11 @@ export default function Page() {
         appearance={{
           baseTheme: dark
         }}
+        redirectUrl="/"
         />
         </div>
         <div className='block dark:hidden'>
-        <SignIn />
+        <SignIn redirectUrl="/" />
         </div>
     </div>
   );
diff --git a/src/app/(dashboard)/generate-pro/page.tsx b/src/app/(dashboard)/generate-pro/page.tsx
index 251abb6..1d3a0dc 100644
--- a/src/app/(dashboard)/generate-pro/page.tsx
+++ b/src/app/(dashboard)/generate-pro/page.tsx
@@ -1,13 +1,25 @@
-import Generate from "@/components/core/generate";
+import FlashcardPro from "@/components/core/flash-card-pro";
+import { auth } from '@clerk/nextjs/server';
+import { subscriptionService } from '@/lib/services/subscription.service';
+import { redirect } from 'next/navigation';
 
-export default function GeneratePage() {
-    return (
-        // <div className="page-container flex items-center min-h-screen">
-        //     <h1 className='text-3xl text-foreground font-semibold'>Generate Flashcards</h1>
-        //     <Generate />
-        // </div>
-        <div className="min-h-screen">
-            <Generate />
-        </div>
-    );
+export default async function GenerateProPage() {
+  const { userId } = await auth();
+  
+  if (!userId) {
+    redirect('/sign-in?redirect_url=/generate-pro');
+  }
+
+  // Check if user has Pro access
+  const canAccessPro = await subscriptionService.canAccessProFeatures(userId);
+  
+  if (!canAccessPro) {
+    redirect('/pricing?upgrade=required&redirect=/generate-pro');
+  }
+
+  return (
+    <div className="page-container bg-slate-50 dark:bg-black">
+      <FlashcardPro />
+    </div>
+  );
 }
\ No newline at end of file
diff --git a/src/app/api/checkout-sessions/route.ts b/src/app/api/checkout-sessions/route.ts
index e0aa930..765b72b 100644
--- a/src/app/api/checkout-sessions/route.ts
+++ b/src/app/api/checkout-sessions/route.ts
@@ -1,65 +1,14 @@
-import { NextResponse } from "next/server";
-import Stripe from "stripe";
-
-const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!, {
-  apiVersion: "2024-06-20",
-});
-
-export async function POST(req: Request) {
-  const { subscriptionType } = await req.json();
-
-  const priceId =
-    subscriptionType === "yearly"
-      ? process.env.STRIPE_PRICE_YEARLY
-      : process.env.STRIPE_PRICE_MONTHLY;
-
-  if (!priceId) {
-    return NextResponse.json(
-      { error: "Invalid subscription type" },
-      { status: 400 },
-    );
-  }
-
-  try {
-    const session = await stripe.checkout.sessions.create({
-      mode: "subscription",
-      payment_method_types: ["card"],
-      line_items: [
-        {
-          price: priceId,
-          quantity: 1,
-        },
-      ],
-      success_url: `${process.env.NEXT_PUBLIC_APP_URL}/result?session_id={CHECKOUT_SESSION_ID}`,
-      cancel_url: `${process.env.NEXT_PUBLIC_APP_URL}/pricing`,
-    });
-
-    return NextResponse.json({ sessionId: session.id });
-  } catch (error) {
-    console.error("Error creating checkout session:", error);
-    return NextResponse.json(
-      { error: "Error creating checkout session" },
-      { status: 500 },
-    );
-  }
+// Stripe support removed in favor of Razorpay.
+export async function POST() {
+  return new Response(JSON.stringify({ error: 'Stripe removed. Use Razorpay.' }), {
+    status: 410,
+    headers: { 'Content-Type': 'application/json' }
+  })
 }
 
-export async function GET(req: Request) {
-  const { searchParams } = new URL(req.url);
-  const session_id = searchParams.get("session_id");
-
-  if (!session_id) {
-    return NextResponse.json({ error: "Missing session_id" }, { status: 400 });
-  }
-
-  try {
-    const session = await stripe.checkout.sessions.retrieve(session_id);
-    return NextResponse.json(session);
-  } catch (error) {
-    console.error("Error retrieving checkout session:", error);
-    return NextResponse.json(
-      { error: "Error retrieving checkout session" },
-      { status: 500 },
-    );
-  }
+export async function GET() {
+  return new Response(JSON.stringify({ error: 'Stripe removed. Use Razorpay.' }), {
+    status: 410,
+    headers: { 'Content-Type': 'application/json' }
+  })
 }
diff --git a/src/app/api/generate/route.ts b/src/app/api/generate/route.ts
index 71da0f0..57df88f 100644
--- a/src/app/api/generate/route.ts
+++ b/src/app/api/generate/route.ts
@@ -1,6 +1,8 @@
 import { NextResponse } from "next/server";
 import { auth } from "@clerk/nextjs/server";
 import { flashcardService } from "@/lib/services/flashcard.service";
+import { prisma } from "@/lib/database";
+import { subscriptionService } from "@/lib/services/subscription.service";
 import type { ApiError, FlashcardGenerationResponse } from "@/types";
 
 export async function POST(req: Request) {
@@ -19,7 +21,43 @@ export async function POST(req: Request) {
       return NextResponse.json(error, { status: 400 });
     }
 
-    // ✅ CORRECT: Single Responsibility - Delegate to service
+    // Determine plan-based limits
+    const status = await subscriptionService.getUserSubscriptionStatus(userId);
+    // Monthly flashcard caps (per saved/generated content)
+    const monthlyCaps: Record<string, number> = {
+      free: 10,
+      basic: 500,
+      pro: 2000,
+      orgs: 10000,
+    };
+    const planKey = status.plan?.toLowerCase?.() || 'free';
+    const monthlyCap = monthlyCaps[planKey] ?? 10;
+
+    // Calculate current month's usage based on saved flashcards
+    const now = new Date();
+    const startOfMonth = new Date(Date.UTC(now.getUTCFullYear(), now.getUTCMonth(), 1, 0, 0, 0));
+
+    const usedThisMonth = await prisma.flashcard.count({
+      where: {
+        userId,
+        createdAt: { gte: startOfMonth },
+      },
+    });
+
+    const remainingThisMonth = Math.max(0, monthlyCap - usedThisMonth);
+    if (remainingThisMonth <= 0) {
+      const error: ApiError = { 
+        error: "Monthly limit reached",
+        details: `You've reached your monthly limit of ${monthlyCap} flashcards for the ${planKey} plan.`
+      };
+      return NextResponse.json(error, { status: 403 });
+    }
+
+    // Always generate at most 10 at a time, and never exceed remaining monthly allowance
+    const PER_REQUEST_CAP = 10;
+    const desiredCount = Math.min(PER_REQUEST_CAP, remainingThisMonth);
+
+    // ✅ CORRECT: Single Responsibility - Delegate to service with count
     const flashcards = await flashcardService.generateFlashcards(text);
 
     const response: FlashcardGenerationResponse = { flashcards };
diff --git a/src/app/api/razorpay/webhook/route.ts b/src/app/api/razorpay/webhook/route.ts
new file mode 100644
index 0000000..fc27a58
--- /dev/null
+++ b/src/app/api/razorpay/webhook/route.ts
@@ -0,0 +1,192 @@
+import { NextRequest, NextResponse } from 'next/server';
+import crypto from 'crypto';
+import { prisma } from '@/lib/database';
+
+// Ensure this route is always handled at runtime and not during build
+export const dynamic = 'force-dynamic';
+export const runtime = 'nodejs';
+
+// Webhook secret from Razorpay dashboard
+// Note: Do NOT throw at module init; check inside the handler to avoid build-time failures
+
+export async function POST(req: NextRequest) {
+  console.log('🔔 Razorpay webhook received');
+  
+  try {
+    const WEBHOOK_SECRET = process.env.RAZORPAY_WEBHOOK_SECRET;
+    if (!WEBHOOK_SECRET) {
+      console.error('❌ Missing RAZORPAY_WEBHOOK_SECRET');
+      return NextResponse.json({ error: 'Missing webhook secret' }, { status: 500 });
+    }
+
+    const body = await req.text();
+    const signature = req.headers.get('x-razorpay-signature');
+    
+    if (!signature) {
+      console.log('❌ No signature found in webhook');
+      return NextResponse.json({ error: 'No signature' }, { status: 400 });
+    }
+
+    // Verify webhook signature (constant-time)
+    const expectedSignature = crypto
+      .createHmac('sha256', WEBHOOK_SECRET)
+      .update(body)
+      .digest('hex');
+
+    const providedBuf = Buffer.from(signature, 'hex');
+    const expectedBuf = Buffer.from(expectedSignature, 'hex');
+
+    if (providedBuf.length !== expectedBuf.length || !crypto.timingSafeEqual(providedBuf, expectedBuf)) {
+      console.log('❌ Invalid webhook signature');
+      return NextResponse.json({ error: 'Invalid signature' }, { status: 400 });
+    }
+
+    console.log('✅ Webhook signature verified');
+
+    const event = JSON.parse(body);
+    console.log('📦 Webhook event:', event.event);
+
+    // Handle different payment events
+    switch (event.event) {
+      case 'payment.captured':
+        await handlePaymentCaptured(event.payload.payment.entity);
+        break;
+        
+      case 'payment.failed':
+        await handlePaymentFailed(event.payload.payment.entity);
+        break;
+        
+      case 'order.paid':
+        await handleOrderPaid(event.payload.order.entity);
+        break;
+        
+      default:
+        console.log('ℹ️ Unhandled webhook event:', event.event);
+    }
+
+    return NextResponse.json({ success: true });
+
+  } catch (error) {
+    console.error('💥 Webhook error:', error);
+    return NextResponse.json({ error: 'Webhook processing failed' }, { status: 500 });
+  }
+}
+
+async function handlePaymentCaptured(payment: any) {
+  console.log('💰 Payment captured:', payment.id);
+  
+  try {
+    // Find the payment record
+    const paymentRecord = await prisma.payment.findFirst({
+      where: { razorpayPaymentId: payment.id }
+    });
+
+    if (!paymentRecord) {
+      console.log('❌ Payment record not found for:', payment.id);
+      return;
+    }
+
+    // Update payment status
+    if (paymentRecord.status === 'COMPLETED') {
+        console.log('⚠️ Payment already processed:', payment.id);
+        return;
+    }
+    await prisma.payment.update({
+      where: { id: paymentRecord.id },
+      data: {
+        status: 'COMPLETED',
+        razorpayPaymentId: payment.id,
+        updatedAt: new Date()
+      }
+    });
+
+    // Get order details to determine subscription
+    const order = await prisma.payment.findFirst({
+      where: { razorpayOrderId: payment.order_id }
+    });
+
+    if (order) {
+      // Calculate subscription dates
+      const now = new Date();
+      const subscriptionStartedAt = new Date(now);
+      const subscriptionEndsAt = new Date(now);
+      const daysToAdd = order.billingCycle === 'monthly' ? 30 : 365;
+      subscriptionEndsAt.setDate(subscriptionEndsAt.getDate() + daysToAdd);
+
+      // Update user subscription
+      await prisma.user.update({
+        where: { clerkUserId: order.userId },
+        data: {
+          subscriptionPlan: order.plan,
+          subscriptionCycle: order.billingCycle,
+          subscriptionStatus: 'active',
+          paymentId: payment.id,
+          subscriptionEndsAt: subscriptionEndsAt,
+          subscriptionStartedAt: subscriptionStartedAt,
+          updatedAt: new Date()
+        }
+      });
+
+      console.log('✅ User subscription activated:', {
+        userId: order.userId,
+        plan: order.plan,
+        billingCycle: order.billingCycle
+      });
+    }
+
+  } catch (error) {
+    console.error('❌ Error handling payment captured:', error);
+  }
+}
+
+async function handlePaymentFailed(payment: any) {
+  console.log('❌ Payment failed:', payment.id);
+  
+  try {
+    // Find and update payment record (fallback by order id)
+    const paymentRecord = await prisma.payment.findFirst({
+      where: {
+        OR: [
+          { razorpayPaymentId: payment.id },
+          { razorpayOrderId: payment.order_id }
+        ]
+      }
+    });
+
+    if (paymentRecord) {
+      await prisma.payment.updateMany({
+        where: { id: paymentRecord.id, status: { not: 'COMPLETED' } },
+        data: {
+          status: 'FAILED',
+          failureReason: payment.error_description || 'Payment failed',
+          updatedAt: new Date()
+        }
+      });
+
+      console.log('✅ Payment marked as failed:', payment.id);
+    }
+
+  } catch (error) {
+    console.error('❌ Error handling payment failed:', error);
+  }
+}
+
+async function handleOrderPaid(order: any) {
+  console.log('✅ Order paid:', order.id);
+  
+  try {
+    // Update order status
+    await prisma.payment.updateMany({
+      where: { razorpayOrderId: order.id },
+      data: {
+        status: 'COMPLETED',
+        updatedAt: new Date()
+      }
+    });
+
+    console.log('✅ Order marked as paid:', order.id);
+
+  } catch (error) {
+    console.error('❌ Error handling order paid:', error);
+  }
+}
diff --git a/src/app/api/user/subscription-status/route.ts b/src/app/api/user/subscription-status/route.ts
new file mode 100644
index 0000000..be57e75
--- /dev/null
+++ b/src/app/api/user/subscription-status/route.ts
@@ -0,0 +1,27 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { auth } from '@clerk/nextjs/server';
+import { subscriptionService } from '@/lib/services/subscription.service';
+
+export async function GET(req: NextRequest) {
+  try {
+    const { userId } = await auth();
+    
+    if (!userId) {
+      return NextResponse.json(
+        { error: 'Unauthorized' },
+        { status: 401 }
+      );
+    }
+
+    const subscriptionStatus = await subscriptionService.getUserSubscriptionStatus(userId);
+    
+    return NextResponse.json(subscriptionStatus);
+
+  } catch (error) {
+    console.error('❌ Error fetching subscription status:', error);
+    return NextResponse.json(
+      { error: 'Failed to fetch subscription status' },
+      { status: 500 }
+    );
+  }
+}
diff --git a/src/app/flashcards/page.tsx b/src/app/flashcards/page.tsx
index 0cd29c0..adc66e9 100644
--- a/src/app/flashcards/page.tsx
+++ b/src/app/flashcards/page.tsx
@@ -8,12 +8,14 @@ import { Loader2, Plus } from "lucide-react";
 import DeckList from "@/components/decks/DeckList";
 import type { Deck } from "@/types";
 import  GlobalSearch  from '@/components/search/GlobalSearch'
+import { useSubscription } from "@/hooks/useSubscription";
 
 // Single Responsibility: Manage flashcards overview page
 export default function FlashcardsPage() {
   const [decks, setDecks] = useState<Deck[]>([]);
   const [loading, setLoading] = useState<boolean>(true);
   const { user, isLoaded } = useUser();
+  const { canAccessPro } = useSubscription();
 
   useEffect(() => {
     const fetchDecks = async () => {
@@ -66,7 +68,7 @@ export default function FlashcardsPage() {
       <GlobalSearch />
       <div className="flex justify-between items-center mb-6">
         <h1 className="text-3xl font-bold">Your Flashcards</h1>
-        <Link href="/generate">
+        <Link href={canAccessPro ? "/generate-pro" : "/generate"}>
           <Button size="icon" className="bg-purple-600 h-10 w-32 hover:bg-purple-500">
             <Plus className="h-7 w-7" />
           </Button>
diff --git a/src/app/page.tsx b/src/app/page.tsx
index a4cefec..417fd08 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -9,6 +9,8 @@ import FAQ from "@/components/FAQ";
 import Noise from "@/components/noise";
 import { ToastContainer } from "react-toastify";
 import { motion } from "framer-motion";
+import { useUser } from "@clerk/nextjs";
+import { useSubscription } from "@/hooks/useSubscription";
 
 
 const avatars = [
@@ -18,6 +20,9 @@ const avatars = [
 ];
 
 export default function Home() {
+    const { isSignedIn } = useUser();
+    const { canAccessPro } = useSubscription();
+    
     return (
         <div className="relative w-full min-h-screen overflow-hidden">
             {/* Toast Notification Container */}
@@ -102,11 +107,11 @@ export default function Home() {
                             className={`group relative overflow-hidden bg-gradient-to-r from-purple-700 to-purple-600 hover:from-purple-600 hover:to-purple-500 text-white dark:from-purple-600 dark:to-purple-500 dark:hover:from-purple-500 dark:hover:to-purple-400 px-8 py-4 rounded-xl font-semibold text-lg shadow-xl hover:shadow-2xl transform hover:scale-105 transition-all duration-300 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-purple-500 focus-visible:ring-offset-2 ${buttonVariants({
                                 size: "lg",
                             })}`}
-                            href="/generate"
+                            href={isSignedIn ? (canAccessPro ? "/generate-pro" : "/generate") : "/sign-up"}
                             aria-label="Get started with FlashFathom AI"
                         >
                             <span className="relative z-10 flex items-center">
-                                Get started 
+                                {isSignedIn ? (canAccessPro ? "Go to Pro Generator" : "Generate Flashcards") : "Get started"}
                                 <ArrowRight className="ml-2 h-5 w-5 group-hover:translate-x-1 transition-transform" aria-hidden="true" />
                             </span>
                             <div className="absolute inset-0 bg-gradient-to-r from-purple-600 to-blue-600 opacity-0 group-hover:opacity-100 transition-opacity duration-300" aria-hidden="true" />
diff --git a/src/app/pricing/page.tsx b/src/app/pricing/page.tsx
index 0f9ab56..d686457 100644
--- a/src/app/pricing/page.tsx
+++ b/src/app/pricing/page.tsx
@@ -12,8 +12,8 @@ import { cn } from "@/lib/utils";
 import { ArrowRight, Check, HelpCircle, Minus, Zap, Crown, Building, Sparkles } from "lucide-react";
 import Link from "next/link";
 import { useAuth } from "@clerk/nextjs";
-import { useRouter } from "next/navigation";
-import { useState } from "react";
+import { useRouter, useSearchParams } from "next/navigation";
+import { useState, useEffect, Suspense } from "react";
 import { loadRazorpay } from "@/utils/get-razorpay";
 import { useTheme } from "next-themes";
 // ✅ ADDED: Import toast functionality
@@ -39,15 +39,30 @@ interface PricingItem {
   };
 }
 
-const Page = () => {
+const PricingContent = () => {
   const { isSignedIn } = useAuth();
   const router = useRouter();
+  const searchParams = useSearchParams();
   const [billingCycle, setBillingCycle] = useState<"monthly" | "yearly">("monthly");
   const [loading, setLoading] = useState<string | null>(null);
   const { theme } = useTheme();
   // ✅ ADDED: Toast hook
   const { toast } = useToast();
 
+  // Check if user was redirected here for upgrade
+  const upgradeRequired = searchParams.get('upgrade') === 'required';
+  const redirectUrl = searchParams.get('redirect');
+
+  useEffect(() => {
+    if (upgradeRequired) {
+      toast({
+        title: "🔒 Pro Access Required",
+        description: "You need a Pro subscription to access this feature. Choose a plan below to continue.",
+        variant: "default",
+      });
+    }
+  }, [upgradeRequired, toast]);
+
   const handleSignUp = async (plan: string) => {
     if (!isSignedIn) {
       router.push("/sign-in");
@@ -152,7 +167,12 @@ const Page = () => {
               
               // Redirect after a short delay to show toast
               setTimeout(() => {
-                router.push('/result?payment=success');
+                // If user was redirected here for upgrade, go back to original page
+                if (redirectUrl) {
+                  router.push(redirectUrl);
+                } else {
+                  router.push('/result?payment=success');
+                }
               }, 2000);
             } else {
               const error = await verifyResponse.json();
@@ -577,4 +597,12 @@ const Page = () => {
   );
 };
 
+const Page = () => {
+  return (
+    <Suspense fallback={<div>Loading...</div>}>
+      <PricingContent />
+    </Suspense>
+  );
+};
+
 export default Page;
diff --git a/src/app/result/page.tsx b/src/app/result/page.tsx
index 7fc87c4..e85873b 100644
--- a/src/app/result/page.tsx
+++ b/src/app/result/page.tsx
@@ -1,7 +1,7 @@
 'use client'
 
 import { Suspense } from 'react';
-import { useRouter, useSearchParams } from 'next/navigation'
+import { useSearchParams } from 'next/navigation'
 import { useEffect, useState } from 'react'
 import { Card, CardContent } from "@/components/ui/card"
 import { Button } from "@/components/ui/button"
@@ -9,44 +9,26 @@ import { Loader2, CreditCard, CheckCircle, XCircle } from 'lucide-react'
 import { Skeleton } from "@/components/ui/skeleton"
 import Link from 'next/link'
 
-interface Session {
-    payment_status: string;
-    // Add other session properties as needed
-}
+// Stripe is removed; keep only simple status via query param
 
 // ✅ FIXED: Separate component for search params logic
 function ResultContent() {
-    const router = useRouter()
     const searchParams = useSearchParams()
-    const session_id = searchParams.get('session_id')
+    const payment = searchParams.get('payment') // success | failed
     const [loading, setLoading] = useState(true)
-    const [session, setSession] = useState<Session | null>(null)
     const [error, setError] = useState<string | null>(null)
 
     useEffect(() => {
-        const fetchCheckoutSession = async () => {
-            if (!session_id) {
-                setError('No session ID provided')
-                setLoading(false)
-                return
-            }
-            
-            try {
-                const res = await fetch(`/api/checkout-sessions?session_id=${session_id}`)
-                const sessionData = await res.json()
-                if (res.ok) {
-                    setSession(sessionData)
-                } else {
-                    setError(sessionData.error)
-                }
-            } catch (err) {
-                setError('An error occurred while retrieving the session.')
-            } finally {
-                setLoading(false)
-            }
-        }
-        fetchCheckoutSession()
-    }, [session_id])
+    const resolveResult = () => {
+      if (payment === 'success' || payment === 'failed') {
+        setLoading(false)
+        return
+      }
+      setError('Missing payment status')
+      setLoading(false)
+    }
+    resolveResult()
+  }, [payment])
 
     if (loading) {
         return (
@@ -86,7 +68,7 @@ function ResultContent() {
                                 </Link>
                             </div>
                         </div>
-                    ) : session?.payment_status === 'paid' ? (
+                    ) : payment === 'success' ? (
                         <div className="text-center space-y-4">
                             <CheckCircle className="h-16 w-16 text-green-500 mx-auto" />
                             <div>
@@ -94,9 +76,6 @@ function ResultContent() {
                                     Thank you for your purchase! 🎉
                                 </h2>
                                 <div className="bg-green-50 dark:bg-green-900/20 p-4 rounded-lg mb-4">
-                                    <p className="text-sm sm:text-base mb-2 font-mono">
-                                        <strong>Session ID:</strong> {session_id}
-                                    </p>
                                     <p className="text-muted-foreground text-sm sm:text-base">
                                         We have received your payment successfully. You will receive an email with the order details shortly.
                                     </p>
@@ -122,9 +101,7 @@ function ResultContent() {
                                 <h2 className="text-xl sm:text-2xl text-red-600 font-semibold mb-4">
                                     Payment Failed
                                 </h2>
-                                <p className="text-muted-foreground mb-4">
-                                    Your payment was not successful. Please check your payment method and try again.
-                                </p>
+                             <p className="text-muted-foreground mb-4">Your payment failed. Please try again.</p>
                                 <div className="flex flex-col sm:flex-row gap-3 justify-center">
                                     <Link href="/pricing">
                                         <Button className="w-full sm:w-auto">Try Again</Button>
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
index 0dc1fee..3e11814 100644
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -4,9 +4,13 @@ import { motion } from "framer-motion";
 import { Button } from "@/components/ui/button";
 import { Github, Linkedin, Twitter, Heart, ExternalLink, Zap } from "lucide-react";
 import Image from "next/image";
+import { useUser } from "@clerk/nextjs";
+import { useSubscription } from "@/hooks/useSubscription";
 
 export default function Footer() {
   const currentYear = new Date().getFullYear();
+  const { isSignedIn } = useUser();
+  const { canAccessPro } = useSubscription();
 
   return (
     <footer className="relative py-20 px-4 md:px-6 bg-gradient-to-b from-transparent via-gray-50/50 to-gray-100/80 dark:via-gray-900/20 dark:to-gray-800/50 overflow-hidden">
@@ -95,7 +99,8 @@ export default function Footer() {
                   { href: "/features", label: "Features" },
                   { href: "/pricing", label: "Pricing" },
                   { href: "/demo", label: "Demo" },
-                  { href: "/generate", label: "Get Started" }
+                  { href: isSignedIn ? (canAccessPro ? "/generate-pro" : "/generate") : "/sign-up", label: "Get Started" }
+
                 ].map((link, index) => (
                   <li key={index}>
                     <Link
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
index fb90c2a..67fd2d1 100644
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@@ -10,12 +10,16 @@ import { UserButton, useUser } from "@clerk/nextjs";
 import { ThemeToggle } from "./DarkToggle";
 import Image from "next/image";
 import { motion, AnimatePresence } from "framer-motion";
+import { useSubscription } from "@/hooks/useSubscription";
+import { Badge } from "./ui/badge";
+import { Crown } from "lucide-react";
 
 
 const Navbar = () => {
   const { setTheme } = useTheme();
   const { isSignedIn, user } = useUser();
   const [isMobileMenuOpen, setIsMobileMenuOpen] = React.useState(false);
+  const { canAccessPro, loading } = useSubscription();
 
   const navigationLinks = [
     { href: "/features", label: "Features" },
@@ -119,11 +123,11 @@ const Navbar = () => {
                     whileTap={{ scale: 0.95 }}
                   >
                     <Link
-                      href="/sign-up"
+                      href={isSignedIn ? (canAccessPro ? "/generate-pro" : "/generate") : "/sign-up"}
                       className="group relative overflow-hidden bg-gradient-to-r from-purple-600 to-purple-500 hover:from-purple-500 hover:to-purple-400 text-white px-6 py-2 rounded-lg font-semibold text-sm shadow-lg hover:shadow-xl transition-all duration-300 flex items-center"
                     >
                       <span className="relative z-10 flex items-center">
-                        Get Started
+                        {isSignedIn ? (canAccessPro ? "Go to Pro Generator" : "Generate Flashcards") : "Get Started"}
                         <ArrowRight className="ml-1.5 h-4 w-4 group-hover:translate-x-1 transition-transform duration-200" />
                       </span>
                       <div className="absolute inset-0 bg-gradient-to-r from-purple-500 to-blue-500 opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
@@ -146,6 +150,13 @@ const Navbar = () => {
                   <span className="text-sm font-medium text-gray-900 dark:text-white hidden md:block">
                     {user?.fullName || user?.username || "User"}
                   </span>
+                  {/* Pro Badge */}
+                  {!loading && canAccessPro && (
+                    <Badge variant="secondary" className="bg-gradient-to-r from-purple-600 to-purple-500 text-white border-0">
+                      <Crown className="w-3 h-3 mr-1" />
+                      PRO
+                    </Badge>
+                  )}
                 </div>
                 <UserButton 
                   afterSignOutUrl="/" 
@@ -246,11 +257,11 @@ const Navbar = () => {
                       Sign in
                     </Link>
                     <Link
-                      href="/sign-up"
+                      href={isSignedIn ? (canAccessPro ? "/generate-pro" : "/generate") : "/sign-up"}
                       className="block w-full text-center bg-gradient-to-r from-purple-600 to-purple-500 hover:from-purple-500 hover:to-purple-400 text-white px-4 py-3 rounded-lg font-semibold shadow-lg transition-all duration-300"
                       onClick={() => setIsMobileMenuOpen(false)}
                     >
-                      Get Started
+                      {isSignedIn ? (canAccessPro ? "Go to Pro Generator" : "Generate Flashcards") : "Get Started"}
                     </Link>
                   </motion.div>
                 )}
diff --git a/src/components/core/flash-card-pro.tsx b/src/components/core/flash-card-pro.tsx
new file mode 100644
index 0000000..e016048
--- /dev/null
+++ b/src/components/core/flash-card-pro.tsx
@@ -0,0 +1,91 @@
+"use client";
+
+import { useState, Suspense } from "react";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import Link from "next/link";
+import { useUser } from "@clerk/nextjs";
+import { ErrorBoundary } from "@/components/common/ErrorBoundary";
+import { LoadingSpinner } from "@/components/common/LoadingSpinner";
+import FlashcardGenerator from "@/components/flashcards/FlashcardGenerator";
+import FlashcardViewer from "@/components/flashcards/FlashcardViewer";
+import FlashcardSaveDialog from "@/components/flashcards/FlashcardSaveDialog";
+import { useLocalStorage } from "@/lib/hooks/useLocalStorage";
+import { Crown } from "lucide-react";
+import type { FlashcardInput } from "@/types";
+
+export default function FlashcardPro() {
+  const { user } = useUser();
+  const [flashcards, setFlashcards] = useLocalStorage<FlashcardInput[]>('draft-flashcards-pro', []);
+  const [saveDialogOpen, setSaveDialogOpen] = useState(false);
+
+  const handleFlashcardsGenerated = (newFlashcards: FlashcardInput[]) => {
+    setFlashcards(newFlashcards);
+  };
+
+  const handleSaveSuccess = () => {
+    setFlashcards([]); // Clear draft after successful save
+  };
+
+  return (
+    <div className="flex flex-col items-center justify-center min-h-screen p-4 md:p-10">
+      <Card className="w-full lg:max-w-[70vw]">
+        <CardHeader>
+          <div className="flex items-center justify-between">
+            <CardTitle className="flex items-center space-x-2">
+              <Crown className="w-5 h-5 text-purple-600" />
+              <span>Pro Flashcard Generator</span>
+            </CardTitle>
+            <Badge variant="secondary" className="bg-purple-100 text-purple-800">
+              PRO
+            </Badge>
+          </div>
+        </CardHeader>
+        
+        <CardContent className="space-y-6">
+          <ErrorBoundary>
+            <FlashcardGenerator 
+              onFlashcardsGenerated={handleFlashcardsGenerated}
+            />
+          </ErrorBoundary>
+
+          {flashcards.length > 0 && (
+            <ErrorBoundary>
+              <Suspense fallback={<LoadingSpinner text="Loading flashcards..." />}>
+                <FlashcardViewer 
+                  flashcards={flashcards} 
+                  title="Generated Flashcards"
+                />
+              </Suspense>
+              
+              {user && (
+                <div className="space-y-4">
+                  <Button
+                    onClick={() => setSaveDialogOpen(true)}
+                    className="w-full bg-purple-600 hover:bg-purple-700"
+                  >
+                    Save Flashcards
+                  </Button>
+
+                  <FlashcardSaveDialog
+                    flashcards={flashcards}
+                    isOpen={saveDialogOpen}
+                    onClose={() => setSaveDialogOpen(false)}
+                    onSaveSuccess={handleSaveSuccess}
+                  />
+                </div>
+              )}
+            </ErrorBoundary>
+          )}
+
+          <Link href="/flashcards">
+            <Button variant="outline" className="w-full mt-4">
+              View Saved Flashcards
+            </Button>
+          </Link>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
diff --git a/src/components/core/flash-card.tsx b/src/components/core/flash-card.tsx
index 185167e..6ef2e08 100644
--- a/src/components/core/flash-card.tsx
+++ b/src/components/core/flash-card.tsx
@@ -69,7 +69,7 @@ export default function Flashcard() {
           )}
 
           <Link href="/flashcards">
-            <Button variant="outline" className="w-full">
+            <Button variant="outline" className="w-full mt-4">
               View Saved Flashcards
             </Button>
           </Link>
diff --git a/src/components/core/generate.tsx b/src/components/core/generate.tsx
index 5613fa8..d2bb6e8 100644
--- a/src/components/core/generate.tsx
+++ b/src/components/core/generate.tsx
@@ -30,50 +30,50 @@ const FormSchema = z.object({
 })
 
 export default function Generate() {
-    // const [flashcards, setFlashcards] = useState([])
     const [flashcards, setFlashcards] = useState<Array<{ question: string, answer: string }>>([])
+    const [isSubmitting, setIsSubmitting] = useState(false)
     const form = useForm<z.infer<typeof FormSchema>>({
         resolver: zodResolver(FormSchema),
     })
 
     const onSubmit = async (data: z.infer<typeof FormSchema>) => {
+        if (isSubmitting) return
+        setIsSubmitting(true)
         try {
             const response = await fetch('/api/generate', {
                 method: 'POST',
+                headers: { 'Content-Type': 'text/plain' },
                 body: data.text,
             });
 
             if (!response.ok) {
-                const errorData = await response.json();
-                throw new Error(errorData.error || 'Failed to generate flashcards');
+                let errorMessage = 'Failed to generate flashcards';
+                try {
+                    const errorData = await response.json();
+                    errorMessage = errorData.details || errorData.error || errorMessage;
+                } catch {}
+                throw new Error(errorMessage);
             }
 
-
-            const flashcardsData = await response.json()
-            if (flashcardsData.flashcards && Array.isArray(flashcardsData.flashcards)) {
-                setFlashcards(flashcardsData.flashcards)
+            const { flashcards: generated } = await response.json()
+            if (generated && Array.isArray(generated)) {
+                setFlashcards(generated)
             } else {
                 throw new Error('Invalid flashcards data received')
             }
-
-            setFlashcards(flashcardsData.flashcards);
             toast({
                 title: "Flashcards generated successfully!",
-                description: (
-                    <pre className="mt-2 w-[340px] rounded-md bg-slate-950 p-4">
-                        <code className="text-white">{JSON.stringify(flashcardsData, null, 2)}</code>
-                    </pre>
-                ),
+                description: `${generated.length} flashcards created.`,
             })
-        } catch (error: Error | any) {
+        } catch (error: Error | unknown) {
             console.error('Error generating flashcards:', error)
-            alert('An error occurred while generating flashcards. Please try again.')
-            // console.error('Error generating flashcards:', error);
             toast({
                 title: "Error",
-                description: error.message,
+                description: error instanceof Error ? error.message : 'An unexpected error occurred',
                 variant: "destructive",
             });
+        } finally {
+            setIsSubmitting(false)
         }
     }
 
@@ -98,8 +98,8 @@ export default function Generate() {
                         </FormItem>
                     )}
                 />
-                <Button type="submit" className="w-full" >
-                    Generate Flashcards
+                <Button type="submit" className="w-full" disabled={isSubmitting}>
+                    {isSubmitting ? 'Generating...' : 'Generate Flashcards'}
                 </Button>
             </form>
 
diff --git a/src/hooks/useSubscription.ts b/src/hooks/useSubscription.ts
new file mode 100644
index 0000000..5b707b4
--- /dev/null
+++ b/src/hooks/useSubscription.ts
@@ -0,0 +1,63 @@
+"use client";
+
+import { useState, useEffect } from 'react';
+import { useUser } from '@clerk/nextjs';
+
+interface SubscriptionStatus {
+  isActive: boolean;
+  plan: string;
+  expiresAt: Date | null;
+  isExpired: boolean;
+  canAccessPro: boolean;
+  loading: boolean;
+}
+
+export function useSubscription() {
+  const { user, isLoaded } = useUser();
+  const [subscription, setSubscription] = useState<SubscriptionStatus>({
+    isActive: false,
+    plan: 'free',
+    expiresAt: null,
+    isExpired: false,
+    canAccessPro: false,
+    loading: true
+  });
+
+  useEffect(() => {
+    if (!isLoaded || !user) {
+      setSubscription(prev => ({ ...prev, loading: false }));
+      return;
+    }
+
+    fetchSubscriptionStatus();
+  }, [isLoaded, user]);
+
+  const fetchSubscriptionStatus = async () => {
+    try {
+      const response = await fetch('/api/user/subscription-status');
+      if (response.ok) {
+        const data = await response.json();
+        setSubscription({
+          ...data,
+          expiresAt: data.expiresAt ? new Date(data.expiresAt) : null,
+          loading: false
+        });
+      } else {
+        setSubscription(prev => ({ ...prev, loading: false }));
+      }
+    } catch (error: unknown) {
+      console.error('Error fetching subscription status:', error);
+      setSubscription(prev => ({ ...prev, loading: false }));
+    }
+  };
+
+  const refreshSubscription = () => {
+    setSubscription(prev => ({ ...prev, loading: true }));
+    fetchSubscriptionStatus();
+  };
+
+  return {
+    ...subscription,
+    refreshSubscription
+  };
+}
diff --git a/src/lib/services/subscription.service.ts b/src/lib/services/subscription.service.ts
new file mode 100644
index 0000000..fa60e28
--- /dev/null
+++ b/src/lib/services/subscription.service.ts
@@ -0,0 +1,124 @@
+import { prisma } from '@/lib/database';
+
+export interface SubscriptionStatus {
+  isActive: boolean;
+  plan: string;
+  expiresAt: Date | null;
+  isExpired: boolean;
+  canAccessPro: boolean;
+}
+
+export class SubscriptionService {
+  /**
+   * Check if user has active subscription
+   */
+  async getUserSubscriptionStatus(userId: string): Promise<SubscriptionStatus> {
+    try {
+      const user = await prisma.user.findUnique({
+        where: { clerkUserId: userId },
+        select: {
+          subscriptionPlan: true,
+          subscriptionStatus: true,
+          subscriptionEndsAt: true,
+          subscriptionStartedAt: true
+        }
+      });
+
+      if (!user) {
+        console.log(`⚠️ User not found in database: ${userId}`);
+        return {
+          isActive: false,
+          plan: 'free',
+          expiresAt: null,
+          isExpired: false,
+          canAccessPro: false
+        };
+      }
+
+      const now = new Date();
+      const isExpired = user.subscriptionEndsAt ? user.subscriptionEndsAt < now : false;
+      const isActive = user.subscriptionStatus === 'active' && !isExpired;
+      const canAccessPro = isActive && ['basic', 'pro', 'orgs'].includes(user.subscriptionPlan || 'free');
+
+      console.log(`🔍 Subscription status for ${userId}:`, {
+        plan: user.subscriptionPlan,
+        status: user.subscriptionStatus,
+        isActive,
+        isExpired,
+        canAccessPro,
+        endsAt: user.subscriptionEndsAt
+      });
+
+      return {
+        isActive,
+        plan: user.subscriptionPlan || 'free',
+        expiresAt: user.subscriptionEndsAt,
+        isExpired,
+        canAccessPro
+      };
+
+    } catch (error) {
+      console.error('❌ Error checking subscription status:', error);
+      return {
+        isActive: false,
+        plan: 'free',
+        expiresAt: null,
+        isExpired: false,
+        canAccessPro: false
+      };
+    }
+  }
+
+  /**
+   * Check if user can access Pro features
+   */
+  async canAccessProFeatures(userId: string): Promise<boolean> {
+    const status = await this.getUserSubscriptionStatus(userId);
+    return status.canAccessPro;
+  }
+
+  /**
+   * Get user's current plan
+   */
+  async getUserPlan(userId: string): Promise<string> {
+    const status = await this.getUserSubscriptionStatus(userId);
+    return status.plan;
+  }
+
+  /**
+   * Check if subscription is expired
+   */
+  async isSubscriptionExpired(userId: string): Promise<boolean> {
+    const status = await this.getUserSubscriptionStatus(userId);
+    return status.isExpired;
+  }
+
+  /**
+   * Update subscription status (for webhook use)
+   */
+  async updateSubscriptionStatus(
+    userId: string, 
+    plan: string, 
+    status: string, 
+    expiresAt: Date
+  ): Promise<void> {
+    try {
+      await prisma.user.update({
+        where: { clerkUserId: userId },
+        data: {
+          subscriptionPlan: plan,
+          subscriptionStatus: status,
+          subscriptionEndsAt: expiresAt,
+          updatedAt: new Date()
+        }
+      });
+
+      console.log('✅ Subscription status updated:', { userId, plan, status });
+    } catch (error) {
+      console.error('❌ Error updating subscription status:', error);
+      throw error;
+    }
+  }
+}
+
+export const subscriptionService = new SubscriptionService();
diff --git a/src/middleware.ts b/src/middleware.ts
index 23ac367..56b4968 100644
--- a/src/middleware.ts
+++ b/src/middleware.ts
@@ -3,18 +3,19 @@ import { NextResponse } from 'next/server'
 
 const isPublicRoute = createRouteMatcher([
   "/flashcards(.*)",
-  "/generate-pro(.*)",
   '/',
   '/sign-in(.*)', 
   '/sign-up(.*)',
   '/pricing', 
-  '/api/subscribe'
+  '/api/subscribe',
+  '/api/razorpay/webhook'
 ])
 
 export default clerkMiddleware(async (auth, request) => {
   // ✅ FIXED: Clerk v6 approach - check userId directly
   const { userId } = await auth()
   
+  // Check authentication first
   if (!isPublicRoute(request) && !userId) {
     // Redirect to sign-in instead of using protect()
     const signInUrl = new URL('/sign-in', request.url)
@@ -22,6 +23,9 @@ export default clerkMiddleware(async (auth, request) => {
     return NextResponse.redirect(signInUrl)
   }
   
+  // Note: Pro access check moved to page component due to Prisma Edge Runtime limitations
+  // The /generate-pro page will handle subscription validation server-side
+  
   return NextResponse.next()
 })