diff --git a/apps/edr-passenger-web/portal/src/app/booking/confirmation/page.tsx b/apps/edr-passenger-web/portal/src/app/booking/confirmation/page.tsx
index c48e30177..37c110329 100644
--- a/apps/edr-passenger-web/portal/src/app/booking/confirmation/page.tsx
+++ b/apps/edr-passenger-web/portal/src/app/booking/confirmation/page.tsx
@@ -68,7 +68,11 @@ export default function ConfirmationPage() {
     import("@/lib/generate-voucher");
   }, []);
 
-  const { data: _booking, refetch: refetchBooking } = useQuery<BookingWithTicket>({
+  const {
+    data: _booking,
+    refetch: refetchBooking,
+    isLoading: isBookingLoading,
+  } = useQuery<BookingWithTicket>({
     queryKey: ["booking", bookingId],
     queryFn: async (): Promise<BookingWithTicket> => {
       try {
@@ -271,6 +275,26 @@ export default function ConfirmationPage() {
 
   if (!bookingId || !pnr) return null;
 
+  // Wait for the actual booking status before deciding pending vs. confirmed —
+  // without this, _booking is briefly undefined on first load, isConfirmed reads
+  // as false, and the page flashes "payment pending" before flipping to
+  // "confirmed" once the fetch resolves (common, since the payment webhook has
+  // often already completed by the time the user lands here).
+  if (isBookingLoading) {
+    return (
+      <div className="booking-page">
+        <div className="container mx-auto px-4">
+          <div className="max-w-6xl mx-auto flex flex-col items-center justify-center py-24 text-center">
+            <div className="w-12 h-12 rounded-full border-4 border-primary/20 border-t-primary animate-spin mb-4" />
+            <p className="text-gray-600 dark:text-gray-400">
+              Please wait, we are processing your booking…
+            </p>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
   return (
     <div className="booking-page">
       <div className="container mx-auto px-4">