diff --git a/apps/web/src/views/checkout.ejs b/apps/web/src/views/checkout.ejs
index 858d131..1b08d58 100644
--- a/apps/web/src/views/checkout.ejs
+++ b/apps/web/src/views/checkout.ejs
@@ -34,13 +34,13 @@
 
     <div class="plan-labels grid grid-cols-2 gap-4">
       <label for="plan-pro"
-        class="cursor-pointer text-left card-static hover:border-blue-500/40 border-2 !border-border-subtle p-5 transition-colors">
+        class="cursor-pointer text-left bg-surface border-2 border-border-subtle hover:border-blue-500/40 rounded-xl p-5 transition-colors">
         <div class="text-xs text-gray-500 uppercase tracking-wider font-mono mb-1">Pro</div>
         <div class="text-2xl font-bold text-gray-100">$12<span class="text-sm font-normal text-gray-500">/mo</span></div>
         <div class="text-xs text-gray-500 mt-2">500 monitors, 2s intervals</div>
       </label>
       <label for="plan-lifetime"
-        class="cursor-pointer text-left card-static hover:border-yellow-500/40 border-2 !border-border-subtle p-5 transition-colors">
+        class="cursor-pointer text-left bg-surface border-2 border-border-subtle hover:border-yellow-500/40 rounded-xl p-5 transition-colors">
         <div class="text-xs text-yellow-500/70 uppercase tracking-wider font-mono mb-1">Lifetime</div>
         <div class="text-2xl font-bold text-gray-100">$140</div>
         <div class="text-xs text-gray-500 mt-2">One-time, forever</div>