diff --git a/src/app/checkout/page.tsx b/src/app/checkout/page.tsx
index 708494d..42c529b 100644
--- a/src/app/checkout/page.tsx
+++ b/src/app/checkout/page.tsx
@@ -14,7 +14,17 @@ declare global {
   }
 }
 
+import { Suspense } from "react"
+
 export default function CheckoutPage() {
+  return (
+    <Suspense fallback={<div className="min-h-screen bg-background flex items-center justify-center"><Loader2 className="animate-spin text-[#00F0FF]" size={48} /></div>}>
+      <CheckoutContent />
+    </Suspense>
+  )
+}
+
+function CheckoutContent() {
   const router = useRouter()
   const searchParams = useSearchParams()
   const tier = searchParams.get("tier") || "Pro"