diff --git a/auto-analyst-frontend/app/api/user/cancel-subscription/route.ts b/auto-analyst-frontend/app/api/user/cancel-subscription/route.ts
index af5a5ec9..c6616b18 100644
--- a/auto-analyst-frontend/app/api/user/cancel-subscription/route.ts
+++ b/auto-analyst-frontend/app/api/user/cancel-subscription/route.ts
@@ -48,11 +48,11 @@ export async function POST(request: NextRequest) {
       
       // Only make Stripe API calls for new users with proper subscription IDs
       if (!isLegacyUser) {
-        // Cancel the subscription in Stripe
-        // Using cancel_at_period_end: true to let the user keep access until the end of their current billing period
+      // Cancel the subscription in Stripe
+      // Using cancel_at_period_end: true to let the user keep access until the end of their current billing period
         canceledSubscription = await stripe.subscriptions.update(stripeSubscriptionId, {
-          cancel_at_period_end: true,
-        })
+        cancel_at_period_end: true,
+      })
         console.log(`Scheduled Stripe cancellation for subscription ${stripeSubscriptionId} for user ${userId}`)
       } else {
         console.log(`Legacy user ${userId} - skipping Stripe API calls, updating Redis only`)
@@ -85,10 +85,10 @@ export async function POST(request: NextRequest) {
         if (creditData && creditData.resetDate) {
           await redis.hset(KEYS.USER_CREDITS(userId), {
             nextTotalCredits: '0', // No credits after cancellation
-            pendingDowngrade: 'true',
+          pendingDowngrade: 'true',
             lastUpdate: now.toISOString()
-          })
-        }
+        })
+      }
       }
       
       return NextResponse.json({
diff --git a/auto-analyst-frontend/app/checkout/page.tsx b/auto-analyst-frontend/app/checkout/page.tsx
index 3ba52096..c923a3e5 100644
--- a/auto-analyst-frontend/app/checkout/page.tsx
+++ b/auto-analyst-frontend/app/checkout/page.tsx
@@ -21,7 +21,7 @@ export default function CheckoutPage() {
   const [loadingPlan, setLoadingPlan] = useState(true)
   
   const plan = searchParams?.get('plan')
-  const cycle = searchParams?.get('cycle')
+  const initialCycle = searchParams?.get('cycle')
   
   const [planDetails, setPlanDetails] = useState({
     name: '',
@@ -30,6 +30,9 @@ export default function CheckoutPage() {
     priceId: '',
   })
   
+  // Add state for billing cycle toggle
+  const [billingCycle, setBillingCycle] = useState<'monthly' | 'yearly'>(initialCycle === 'yearly' ? 'yearly' : 'monthly')
+  
   const [clientSecret, setClientSecret] = useState('')
   const [setupIntentId, setSetupIntentId] = useState('')
   const [isTrialSetup, setIsTrialSetup] = useState(false)
@@ -40,11 +43,102 @@ export default function CheckoutPage() {
   const [discountApplied, setDiscountApplied] = useState(false)
   const [discountInfo, setDiscountInfo] = useState<{type: string, value: number} | null>(null)
 
+  // Plan configurations with both monthly and yearly options
+  const pricingTiers = [
+    {
+      name: 'Standard',
+      monthly: {
+        price: 15,
+        priceId: process.env.NEXT_PUBLIC_STRIPE_MONTHLY_PRICE_ID,
+      },
+      yearly: {
+        price: 126, // $15 * 12 months = $180, with 30% discount = $126
+        priceId: process.env.NEXT_PUBLIC_STRIPE_YEARLY_PRICE_ID,
+        savings: 54, // $180 - $126 = $54 savings
+      },
+      daily: {
+        price: 0.75,
+        priceId: process.env.NEXT_PUBLIC_STRIPE_DAILY_PRICE_ID,
+      },
+    },
+    {
+      name: 'Pro',
+      monthly: {
+        price: 29,
+        priceId: process.env.NEXT_PUBLIC_STRIPE_PRO_PRICE_ID,
+      },
+      yearly: {
+        price: 244,
+        priceId: process.env.NEXT_PUBLIC_STRIPE_PRO_YEARLY_PRICE_ID,
+      },
+    },
+  ]
+
+  // Function to update plan details when billing cycle changes
+  const updatePlanForCycle = (newCycle: 'monthly' | 'yearly') => {
+    if (!plan) return
+
+    const selectedPlan = pricingTiers.find(p => p.name.toLowerCase() === plan)
+    if (selectedPlan) {
+      const billing = newCycle === 'yearly' ? 'yearly' : 'monthly'
+      const planData = {
+        name: selectedPlan.name,
+        amount: selectedPlan[billing]?.price || 0,
+        cycle: billing === 'yearly' ? 'year' : 'month',
+        priceId: selectedPlan[billing]?.priceId || '',
+      }
+      
+      setPlanDetails(planData)
+      
+      // Re-create payment intent with new plan data
+      createPaymentIntent(planData, promoCode)
+    }
+  }
+
+  // Handle billing cycle change
+  const handleBillingCycleChange = (newCycle: 'monthly' | 'yearly') => {
+    if (newCycle === billingCycle || paymentLoading) return
+    
+    console.log(`🔄 Billing cycle change: ${billingCycle} → ${newCycle}`)
+    
+    setPaymentLoading(true)
+    setBillingCycle(newCycle)
+    
+    // Update URL to reflect the new billing cycle
+    const newUrl = new URL(window.location.href)
+    newUrl.searchParams.set('cycle', newCycle)
+    window.history.replaceState({}, '', newUrl.toString())
+    
+    // Clear existing payment intents to force creation of new ones
+    setClientSecret('')
+    setSetupIntentId('')
+    setPaymentError('')
+    setPromoError('')
+    
+    console.log(`🧹 Cleared old setup intent, creating new one for ${newCycle} plan`)
+    
+    // Add a small delay to show loading state
+    setTimeout(() => {
+      updatePlanForCycle(newCycle)
+      setPaymentLoading(false)
+    }, 300)
+  }
+
   // Create or recreate payment intent
   const createPaymentIntent = async (planData: any, promoCodeValue: string = '') => {
     if (!planData.priceId || !session) return
 
     setPaymentLoading(true)
+    
+    // Clear previous state to avoid stale data
+    setClientSecret('')
+    setSetupIntentId('')
+    setPaymentError('')
+    if (!promoCodeValue) {
+      setPromoError('')
+      setDiscountApplied(false)
+      setDiscountInfo(null)
+    }
 
     try {
       const response = await fetch('/api/checkout-sessions', {
@@ -69,8 +163,10 @@ export default function CheckoutPage() {
         } else {
           setPaymentError(data.message)
           setClientSecret('')
+          setSetupIntentId('')
         }
       } else {
+        // Successfully created new setup intent
         setClientSecret(data.clientSecret)
         setSetupIntentId(data.setupIntentId)
         setIsTrialSetup(data.isTrialSetup || false)
@@ -83,8 +179,11 @@ export default function CheckoutPage() {
         } else {
           setDiscountInfo(null)
         }
+        
+        console.log(`Created new setup intent: ${data.setupIntentId} for ${planData.name} ${planData.cycle} plan ($${planData.amount})`)
       }
     } catch (err) {
+      console.error('Error creating payment intent:', err)
       if (promoCodeValue) {
         setPromoError('Failed to validate promo code. Please try again.')
         setDiscountApplied(false)
@@ -92,6 +191,7 @@ export default function CheckoutPage() {
       } else {
         setPaymentError('Failed to set up payment. Please try again.')
         setClientSecret('')
+        setSetupIntentId('')
       }
     } finally {
       setPaymentLoading(false)
@@ -127,7 +227,7 @@ export default function CheckoutPage() {
   }
   
   useEffect(() => {
-    if (!plan || !cycle || status === 'loading') {
+    if (!plan || !initialCycle || status === 'loading') {
       return
     }
     
@@ -169,7 +269,7 @@ export default function CheckoutPage() {
     const selectedPlan = pricingTiers.find(p => p.name.toLowerCase() === plan)
     
     if (selectedPlan) {
-      const billing = cycle === 'yearly' ? 'yearly' : cycle === 'daily' ? 'daily' : 'monthly'
+      const billing = initialCycle === 'yearly' ? 'yearly' : initialCycle === 'daily' ? 'daily' : 'monthly'
       const planData = {
         name: selectedPlan.name,
         amount: selectedPlan[billing]?.price || 0,
@@ -187,7 +287,7 @@ export default function CheckoutPage() {
     }
     
     setLoadingPlan(false)
-  }, [plan, cycle, router, status, session])
+  }, [plan, initialCycle, router, status, session])
   
   if (status === 'loading' || loadingPlan || paymentLoading) {
     return (
@@ -227,10 +327,62 @@ export default function CheckoutPage() {
             transition={{ duration: 0.4 }}
           >
             <h1 className="text-3xl font-bold text-gray-900 mb-2 text-center">Complete your purchase</h1>
-            <p className="text-gray-600 mb-10 text-center">
+            <p className="text-gray-600 mb-6 text-center">
               You're subscribing to the {planDetails.name} plan
             </p>
             
+            {/* Billing Cycle Toggle */}
+            <div className="mb-10 flex flex-col items-center">
+              <div className="mb-3 text-center">
+                <span className="inline-block bg-[#FF7F7F] text-white font-bold py-1 px-3 rounded-full text-sm animate-pulse">
+                  SAVE 30% WITH YEARLY BILLING
+                </span>
+              </div>
+              <div className="relative bg-white p-0.5 rounded-lg shadow-sm flex border border-gray-200">
+                <button
+                  onClick={() => handleBillingCycleChange('monthly')}
+                  disabled={paymentLoading}
+                  className={`relative px-6 py-2 text-sm font-medium rounded-md focus:outline-none transition-colors ${
+                    billingCycle === 'monthly'
+                      ? 'bg-[#FF7F7F] text-white'
+                      : 'text-gray-700 hover:text-gray-900'
+                  } ${paymentLoading ? 'opacity-50 cursor-not-allowed' : ''}`}
+                >
+                  Monthly
+                </button>
+                <button
+                  onClick={() => handleBillingCycleChange('yearly')}
+                  disabled={paymentLoading}
+                  className={`relative px-6 py-2 text-sm font-medium rounded-md focus:outline-none flex items-center transition-colors ${
+                    billingCycle === 'yearly'
+                      ? 'bg-[#FF7F7F] text-white'
+                      : 'text-gray-700 hover:text-gray-900'
+                  } ${paymentLoading ? 'opacity-50 cursor-not-allowed' : ''}`}
+                >
+                  Yearly
+                  <span className={`ml-2 inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium ${
+                    billingCycle === 'yearly'
+                      ? 'bg-white text-[#FF7F7F]'
+                      : 'bg-gray-100 text-gray-800'
+                  }`}>
+                    Save 30%
+                  </span>
+                </button>
+              </div>
+              
+              {/* Price comparison */}
+              {billingCycle === 'yearly' && planDetails.name === 'Standard' && (
+                <div className="mt-3 text-center">
+                  <p className="text-sm text-green-600 font-medium">
+                    Save $54 per year compared to monthly billing!
+                  </p>
+                  <p className="text-xs text-gray-500">
+                    That's ${(planDetails.amount / 12).toFixed(2)}/month when billed yearly
+                  </p>
+                </div>
+              )}
+            </div>
+            
             {paymentError && (
               <div className="mb-6 p-4 bg-red-50 text-red-600 rounded-md">
                 {paymentError}
@@ -239,8 +391,18 @@ export default function CheckoutPage() {
             
             <div className="grid gap-6 lg:gap-10 grid-cols-1 lg:grid-cols-2">
               <div className="order-2 lg:order-1">
-                {clientSecret && (
+                {paymentLoading && (
+                  <div className="flex items-center justify-center p-8 bg-white rounded-lg shadow-md border border-gray-100">
+                    <div className="flex items-center gap-3">
+                      <div className="animate-spin rounded-full h-6 w-6 border-b-2 border-[#FF7F7F]"></div>
+                      <span className="text-gray-600">Updating plan details...</span>
+                    </div>
+                  </div>
+                )}
+                
+                {clientSecret && !paymentLoading && (
                   <Elements 
+                    key={clientSecret}
                     stripe={stripePromise} 
                     options={{ 
                       clientSecret,
@@ -257,6 +419,15 @@ export default function CheckoutPage() {
                       isTrialSetup={isTrialSetup}
                       setupIntentId={setupIntentId}
                     />
+                    
+                    {/* Debug info - remove in production */}
+                    {process.env.NODE_ENV === 'development' && setupIntentId && (
+                      <div className="mt-2 p-2 bg-gray-100 rounded text-xs text-gray-600">
+                        <strong>Debug:</strong> Setup Intent: {setupIntentId.substring(0, 20)}...
+                        <br />
+                        <strong>Plan:</strong> {planDetails.name} {planDetails.cycle} (${planDetails.amount})
+                      </div>
+                    )}
                   </Elements>
                 )}
               </div>
@@ -325,15 +496,30 @@ export default function CheckoutPage() {
                   
                   <div className="border-t border-gray-200 py-4">
                     <div className="flex justify-between mb-2">
-                      <span className="text-gray-700">{planDetails.name} Plan</span>
+                      <span className="text-gray-700">
+                        {planDetails.name} Plan ({planDetails.cycle === 'year' ? 'Yearly' : 'Monthly'})
+                      </span>
                       <span className={`text-gray-900 ${discountApplied ? 'line-through text-gray-500' : ''}`}>
                         ${planDetails.amount}
                       </span>
                     </div>
+                    
+                    {/* Show yearly savings */}
+                    {billingCycle === 'yearly' && planDetails.name === 'Standard' && (
+                      <div className="flex justify-between mb-2">
+                        <span className="text-green-700 font-medium text-sm">
+                          Yearly Discount (30% off)
+                        </span>
+                        <span className="text-green-700 font-medium text-sm">
+                          -$54.00
+                        </span>
+                      </div>
+                    )}
+                    
                     {discountApplied && discountInfo && (
                       <div className="flex justify-between mb-2">
                         <span className="text-green-700 font-medium">
-                          Discount ({discountInfo.type === 'percent' ? `${discountInfo.value}% off` : `$${discountInfo.value} off`})
+                          Promo Discount ({discountInfo.type === 'percent' ? `${discountInfo.value}% off` : `$${discountInfo.value} off`})
                         </span>
                         <span className="text-green-700 font-medium">
                           {discountInfo.type === 'percent' 
@@ -343,12 +529,26 @@ export default function CheckoutPage() {
                         </span>
                       </div>
                     )}
-                    <p className="text-sm text-gray-500">
-                      Billed {planDetails.cycle === 'year' ? 'yearly' : planDetails.cycle === 'day' ? 'daily' : 'monthly'}
-                    </p>
-                    {discountApplied && (
+                    
+                    <div className="mt-3 pt-2 border-t border-gray-100">
+                      <p className="text-sm text-gray-500">
+                        Billed {planDetails.cycle === 'year' ? 'yearly' : planDetails.cycle === 'day' ? 'daily' : 'monthly'}
+                      </p>
+                      {billingCycle === 'yearly' && (
+                        <p className="text-xs text-gray-400 mt-1">
+                          Credits reset monthly, but you're billed yearly
+                        </p>
+                      )}
+                    </div>
+                    
+                    {(discountApplied || billingCycle === 'yearly') && (
                       <div className="mt-2 p-2 bg-green-50 border border-green-200 rounded-md">
-                        <p className="text-sm text-green-700 font-medium">✓ Promo code applied!</p>
+                        {discountApplied && (
+                          <p className="text-sm text-green-700 font-medium">✓ Promo code applied!</p>
+                        )}
+                        {billingCycle === 'yearly' && !discountApplied && (
+                          <p className="text-sm text-green-700 font-medium">✓ 30% yearly discount applied!</p>
+                        )}
                       </div>
                     )}
                   </div>
@@ -357,19 +557,43 @@ export default function CheckoutPage() {
                     <div className="flex justify-between font-medium text-gray-900">
                       <span>Total (USD)</span>
                       <span>
-                        {discountApplied && discountInfo ? (
+                        {(discountApplied && discountInfo) || billingCycle === 'yearly' ? (
                           <div className="text-right">
                             <div className="text-lg font-bold text-green-600">
-                              ${discountInfo.type === 'percent' 
-                                ? (planDetails.amount - (planDetails.amount * discountInfo.value) / 100).toFixed(2)
-                                : Math.max(0, planDetails.amount - discountInfo.value).toFixed(2)
-                              }
+                              ${(() => {
+                                let total = planDetails.amount
+                                
+                                // Apply promo discount if any
+                                if (discountApplied && discountInfo) {
+                                  if (discountInfo.type === 'percent') {
+                                    total = total - (total * discountInfo.value) / 100
+                                  } else {
+                                    total = Math.max(0, total - discountInfo.value)
+                                  }
+                                }
+                                
+                                return total.toFixed(2)
+                              })()}
+                            </div>
+                            <div className="text-xs text-gray-500">
+                              {billingCycle === 'yearly' && planDetails.name === 'Standard' && !discountApplied && (
+                                'You save $54.00 with yearly billing!'
+                              )}
+                              {discountApplied && discountInfo && (
+                                `You save $${
+                                  discountInfo.type === 'percent' 
+                                    ? ((planDetails.amount * discountInfo.value) / 100).toFixed(2)
+                                    : discountInfo.value.toFixed(2)
+                                } with promo code!`
+                              )}
+                              {billingCycle === 'yearly' && planDetails.name === 'Standard' && discountApplied && discountInfo && (
+                                `Total savings: $${(54 + (
+                                  discountInfo.type === 'percent' 
+                                    ? (planDetails.amount * discountInfo.value) / 100
+                                    : discountInfo.value
+                                )).toFixed(2)}!`
+                              )}
                             </div>
-                            <div className="text-xs text-gray-500">You save ${
-                              discountInfo.type === 'percent' 
-                                ? ((planDetails.amount * discountInfo.value) / 100).toFixed(2)
-                                : discountInfo.value.toFixed(2)
-                            }!</div>
                           </div>
                         ) : (
                           `$${planDetails.amount}`
diff --git a/auto-analyst-frontend/lib/credits-config.ts b/auto-analyst-frontend/lib/credits-config.ts
index 8b84ce38..6d4afb55 100644
--- a/auto-analyst-frontend/lib/credits-config.ts
+++ b/auto-analyst-frontend/lib/credits-config.ts
@@ -49,9 +49,9 @@ export interface TrialConfig {
  * Trial period configuration - Change here to update across the entire app
  */
 export const TRIAL_CONFIG: TrialConfig = {
-  duration: 10,
+  duration: 5,
   unit: 'minutes',
-  displayText: '10-Minute Trial',
+  displayText: '5-Minute Trial',
   credits: 500
 }