diff --git a/apps/spa/src/pages/CheckoutPage.tsx b/apps/spa/src/pages/CheckoutPage.tsx
index 8844368..abecbeb 100644
--- a/apps/spa/src/pages/CheckoutPage.tsx
+++ b/apps/spa/src/pages/CheckoutPage.tsx
@@ -358,9 +358,13 @@ export default function CheckoutPage() {
               <button 
                 type="submit"
                 disabled={loading || loadingSettings}
-                className="w-full py-4 bg-spa-forest text-white font-bold rounded-xl tracking-widest uppercase hover:bg-spa-stone hover:shadow-lg transition-all duration-300 disabled:opacity-50 disabled:cursor-not-allowed flex lg:hidden justify-center items-center gap-2 mt-4"
+                className="w-full py-4 px-6 bg-spa-forest text-white font-bold rounded-xl tracking-widest uppercase hover:bg-spa-stone hover:shadow-lg transition-all duration-300 disabled:opacity-50 disabled:cursor-not-allowed flex lg:hidden justify-between items-center mt-4"
               >
-                {loading ? <Loader2 className="w-5 h-5 animate-spin" /> : 'Confirm Order'}
+                <div className="flex items-center gap-2">
+                  {loading && <Loader2 className="w-5 h-5 animate-spin" />}
+                  <span>Confirm Order</span>
+                </div>
+                <span className="text-sm border-l border-white/20 pl-4">{formatPrice(total)}</span>
               </button>
             </form>
           </div>
@@ -523,9 +527,13 @@ export default function CheckoutPage() {
                 form="checkout-form"
                 type="submit"
                 disabled={loading || loadingSettings}
-                className="w-full mt-8 py-4 bg-spa-forest text-white font-bold rounded-xl tracking-widest uppercase hover:bg-spa-stone hover:shadow-lg transition-all duration-300 disabled:opacity-50 disabled:cursor-not-allowed hidden lg:flex justify-center items-center gap-2"
+                className="w-full mt-8 py-4 px-6 bg-spa-forest text-white font-bold rounded-xl tracking-widest uppercase hover:bg-spa-stone hover:shadow-lg transition-all duration-300 disabled:opacity-50 disabled:cursor-not-allowed hidden lg:flex justify-between items-center"
               >
-                {loading ? <Loader2 className="w-5 h-5 animate-spin" /> : 'Confirm Order'}
+                <div className="flex items-center gap-2">
+                  {loading && <Loader2 className="w-5 h-5 animate-spin" />}
+                  <span>Confirm Order</span>
+                </div>
+                <span className="text-sm border-l border-white/20 pl-4">{formatPrice(total)}</span>
               </button>
             </div>
           </div>