diff --git a/src/pages/CheckoutSuccess.tsx b/src/pages/CheckoutSuccess.tsx
index a18efdf..7267d2c 100644
--- a/src/pages/CheckoutSuccess.tsx
+++ b/src/pages/CheckoutSuccess.tsx
@@ -141,21 +141,26 @@ export default function CheckoutSuccess({
           .print-logo {
             max-width: 200px !important;
           }
+          .print-page-break {
+            page-break-after: always !important;
+            break-after: page !important;
+          }
           @page {
             margin: 0.5in;
+            size: letter;
           }
         }
       `}</style>
 
-      <div className="min-h-screen bg-gradient-to-br from-slate-50 via-blue-50 to-cyan-50 flex items-center justify-center p-6">
+      <div className="min-h-screen bg-gradient-to-br from-slate-50 via-blue-50 to-cyan-50 flex items-center justify-center p-4 sm:p-6">
         <motion.div
           initial={{ opacity: 0, y: 20 }}
           animate={{ opacity: 1, y: 0 }}
           transition={{ duration: 0.5 }}
-          className="max-w-3xl w-full print-receipt"
+          className="max-w-full sm:max-w-4xl lg:max-w-5xl w-full print-receipt"
         >
-          {/* Receipt Container */}
-          <div className="bg-white rounded-3xl shadow-2xl overflow-hidden">
+          {/* Receipt Container - Page 1 */}
+          <div className="bg-white rounded-3xl shadow-2xl overflow-hidden print:rounded-none print:shadow-none print-page-break">
             {/* Header with Logo */}
             <motion.div
               initial={{ opacity: 0, y: -20 }}
@@ -298,7 +303,7 @@ export default function CheckoutSuccess({
             </motion.div>
           </div>
 
-          {/* Portfolio Distribution Chart */}
+          {/* Portfolio Distribution Chart - Page 2 */}
           {orderDetails.order.portfolio?.projects && orderDetails.order.portfolio.projects.length > 0 && (
             <motion.div
               initial={{ opacity: 0, y: 20 }}
@@ -306,7 +311,7 @@ export default function CheckoutSuccess({
               transition={{ delay: 0.35 }}
               className="mt-6"
             >
-              <div className="bg-white rounded-3xl shadow-2xl overflow-hidden p-8 print:shadow-none print:border print:border-gray-300">
+              <div className="bg-white rounded-3xl shadow-2xl overflow-hidden p-8 print:rounded-none print:shadow-none print:border-none print-page-break">
                 <h2 className="text-2xl font-bold text-slate-800 mb-2 text-center print:text-xl">
                   Your Carbon Offset Distribution
                 </h2>
@@ -322,14 +327,14 @@ export default function CheckoutSuccess({
             </motion.div>
           )}
 
-          {/* Impact Comparisons */}
+          {/* Impact Comparisons - Page 3 */}
           <motion.div
             initial={{ opacity: 0, y: 20 }}
             animate={{ opacity: 1, y: 0 }}
             transition={{ delay: 0.4 }}
             className="mt-6"
           >
-            <div className="bg-gradient-to-br from-emerald-600 via-teal-600 to-cyan-600 rounded-3xl p-8 shadow-2xl">
+            <div className="bg-gradient-to-br from-emerald-600 via-teal-600 to-cyan-600 rounded-3xl p-8 shadow-2xl print:rounded-none print:shadow-none print:bg-white print:border print:border-gray-300 print-page-break">
               <CarbonImpactComparison tons={order.tons} variant="success" count={3} />
             </div>
           </motion.div>