diff --git a/apps/web/src/views/checkout.ejs b/apps/web/src/views/checkout.ejs
index ebac70a..19b2f5a 100644
--- a/apps/web/src/views/checkout.ejs
+++ b/apps/web/src/views/checkout.ejs
@@ -23,10 +23,10 @@
   .coin-radio:checked + label { border-color: rgb(59 130 246); }
 </style>
 
-<main class="max-w-2xl mx-auto px-6 py-8">
+<main class="max-w-2xl mx-auto px-8 py-8">
   <div class="mb-6">
     <a href="/dashboard/settings" class="text-sm text-gray-500 hover:text-gray-300 transition-colors">&larr; Back to settings</a>
-    <h2 class="text-lg font-semibold text-gray-200 mt-2">Upgrade Plan</h2>
+    <h1 class="text-xl font-semibold text-gray-100 mt-2">Upgrade Plan</h1>
   </div>
 
   <% if (!invoice) { %>
@@ -149,40 +149,39 @@
   <meta http-equiv="refresh" content="5">
   <% } %>
 
-  <div class="card-static overflow-hidden max-w-md mx-auto">
+  <div class="card-static overflow-hidden max-w-lg mx-auto">
 
     <!-- Header bar -->
-    <div class="px-5 py-3 border-b divider flex items-center justify-between">
+    <div class="px-6 py-4 border-b divider flex items-center justify-between">
       <div class="flex items-center gap-2">
         <span class="text-sm font-medium text-gray-200"><%= invPlanLabel %></span>
-        <% if (inv.months) { %><span class="text-xs text-gray-500"><%= inv.months %>mo</span><% } %>
+        <% if (inv.months) { %><span class="text-sm text-gray-500"><%= inv.months %>mo</span><% } %>
       </div>
       <div class="text-sm font-medium text-gray-300">$<%= Number(inv.amount_usd).toFixed(2) %></div>
     </div>
 
     <% if (inv.status === 'pending' || inv.status === 'underpaid') { %>
-    <div class="px-5 pt-6 pb-5">
+    <div class="px-6 pt-7 pb-6">
 
-      <!-- QR + amount side by side on wider, stacked on narrow -->
       <div class="flex flex-col items-center gap-5">
 
         <!-- QR -->
         <a href="<%= inv.pay_uri %>" class="inline-block">
-          <img src="<%= inv.qr_url %>" alt="QR Code" class="w-44 h-44 rounded-xl bg-white p-2" id="pay-qr">
+          <img src="<%= inv.qr_url %>" alt="QR Code" class="w-48 h-48 rounded-xl bg-white p-2" id="pay-qr">
         </a>
 
         <!-- Open in wallet -->
-        <a href="<%= inv.pay_uri %>" class="inline-flex items-center gap-2 text-xs text-gray-400 hover:text-gray-200 border border-border-subtle hover:border-border-strong rounded-lg px-4 py-2 transition-colors">
-          <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 6H5.25A2.25 2.25 0 003 8.25v10.5A2.25 2.25 0 005.25 21h10.5A2.25 2.25 0 0018 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25"/></svg>
+        <a href="<%= inv.pay_uri %>" class="inline-flex items-center gap-2 text-sm text-gray-400 hover:text-gray-200 border border-border-subtle hover:border-border-strong rounded-lg px-4 py-2 transition-colors">
+          <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 6H5.25A2.25 2.25 0 003 8.25v10.5A2.25 2.25 0 005.25 21h10.5A2.25 2.25 0 0018 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25"/></svg>
           Open in wallet
         </a>
 
         <!-- Amount -->
         <div class="text-center">
-          <div class="text-xs text-gray-500 uppercase tracking-wider mb-1">Send exactly</div>
+          <div class="text-xs text-gray-500 uppercase tracking-wider mb-1.5">Send exactly</div>
           <div class="flex items-center justify-center gap-2">
-            <span class="text-xl font-bold font-mono text-white"><%= received > 0 && remaining > 0 ? remaining.toFixed(8) : inv.amount_crypto %></span>
-            <span class="text-sm font-medium text-gray-400"><%= inv.coin_ticker %></span>
+            <span class="text-2xl font-bold font-mono text-white"><%= received > 0 && remaining > 0 ? remaining.toFixed(8) : inv.amount_crypto %></span>
+            <span class="text-base font-medium text-gray-400"><%= inv.coin_ticker %></span>
           </div>
         </div>
 
@@ -192,7 +191,7 @@
           <div class="w-full h-1.5 rounded-full bg-gray-800 overflow-hidden">
             <div class="h-full rounded-full bg-green-500 transition-all" style="width: <%= pct %>%"></div>
           </div>
-          <div class="flex justify-between mt-1.5 text-xs">
+          <div class="flex justify-between mt-2 text-sm">
             <span class="text-green-400 font-mono"><%= received.toFixed(8) %> received</span>
             <span class="text-gray-500 font-mono"><%= remaining.toFixed(8) %> left</span>
           </div>
@@ -201,22 +200,22 @@
 
         <!-- Address -->
         <div class="w-full">
-          <div class="flex items-center justify-between mb-1.5">
-            <span class="text-xs text-gray-500">Address</span>
-            <button onclick="copyAddr()" id="copy-btn" class="text-xs text-gray-500 hover:text-gray-300 transition-colors">Copy</button>
+          <div class="flex items-center justify-between mb-2">
+            <span class="text-sm text-gray-500">Address</span>
+            <button onclick="copyAddr()" id="copy-btn" class="text-sm text-gray-500 hover:text-gray-300 transition-colors">Copy</button>
           </div>
-          <code class="block bg-surface-solid border border-border-subtle rounded-lg px-3 py-2.5 text-blue-400 text-[11px] font-mono select-all break-all leading-relaxed" id="pay-address"><%= inv.address %></code>
+          <code class="block bg-surface-solid border border-border-subtle rounded-lg px-4 py-3 text-blue-400 text-xs font-mono select-all break-all leading-relaxed" id="pay-address"><%= inv.address %></code>
         </div>
       </div>
     </div>
 
     <!-- Footer: status + timer -->
-    <div class="px-5 py-3 border-t divider flex items-center justify-between">
+    <div class="px-6 py-3.5 border-t divider flex items-center justify-between">
       <div class="flex items-center gap-2">
         <span class="w-1.5 h-1.5 rounded-full <%= inv.status === 'underpaid' ? 'bg-yellow-500' : 'bg-blue-500' %> animate-pulse"></span>
-        <span class="text-xs <%= inv.status === 'underpaid' ? 'text-yellow-400' : 'text-gray-400' %>"><%= inv.status === 'underpaid' ? 'Underpaid, send the rest' : 'Waiting for payment' %></span>
+        <span class="text-sm <%= inv.status === 'underpaid' ? 'text-yellow-400' : 'text-gray-400' %>"><%= inv.status === 'underpaid' ? 'Underpaid, send the rest' : 'Waiting for payment' %></span>
       </div>
-      <span id="timer" class="text-xs text-gray-500 font-mono" data-left="<%= remainingSec %>"><%= mins %>:<%= String(secs).padStart(2, '0') %></span>
+      <span id="timer" class="text-sm text-gray-500 font-mono" data-left="<%= remainingSec %>"><%= mins %>:<%= String(secs).padStart(2, '0') %></span>
     </div>
 
     <% } else if (inv.status === 'confirming') { %>