diff --git a/apps/web/components/upgrade/plan-card.tsx b/apps/web/components/upgrade/plan-card.tsx
index e8ce707c9..6432d71b7 100644
--- a/apps/web/components/upgrade/plan-card.tsx
+++ b/apps/web/components/upgrade/plan-card.tsx
@@ -22,13 +22,13 @@ interface PlanCardProps {
 }
 
 const cardOrder: Record<PlanCardVariant, string> = {
-  hero: 'order-1 sm:order-2',
-  free: 'order-2 sm:order-1',
-  anchor: 'order-3 sm:order-3',
+  hero: 'order-1 lg:order-2',
+  free: 'order-2 lg:order-1',
+  anchor: 'order-3',
 }
 
 const surface: Record<PlanCardVariant, string> = {
-  hero: 'z-10 bg-[rgba(var(--primary-rgb),0.08)] shadow-[inset_0_0_0_1.5px_var(--primary),var(--primary-glow)] sm:-translate-y-3',
+  hero: 'z-10 bg-[rgba(var(--primary-rgb),0.08)] shadow-[inset_0_0_0_1.5px_var(--primary),var(--primary-glow)] lg:-translate-y-3',
   free: 'bg-[var(--bg-elev)] shadow-[inset_0_0_0_1px_var(--hairline)]',
   anchor: 'bg-[var(--bg-card)] shadow-[inset_0_0_0_1px_var(--hairline)]',
 }
diff --git a/apps/web/components/upgrade/plan-selection.tsx b/apps/web/components/upgrade/plan-selection.tsx
index 6509d2761..d34ecfe2d 100644
--- a/apps/web/components/upgrade/plan-selection.tsx
+++ b/apps/web/components/upgrade/plan-selection.tsx
@@ -32,7 +32,7 @@ export function PlanSelection({
   const marquee = UPGRADE_PRO_FEATURES.map((feature) => t(`upgrade.plans.proFeatures.${feature.key}`))
 
   return (
-    <div className="grid grid-cols-1 items-stretch stagger-enter sm:grid-cols-3" style={{ gap: 16 }}>
+    <div className="grid grid-cols-1 items-stretch stagger-enter lg:grid-cols-3" style={{ gap: 16 }}>
       <PlanCard
         variant="free"
         name={t('upgrade.free')}
diff --git a/apps/web/components/upgrade/pricing-section.tsx b/apps/web/components/upgrade/pricing-section.tsx
index 8dfcafb82..6f1e7da7d 100644
--- a/apps/web/components/upgrade/pricing-section.tsx
+++ b/apps/web/components/upgrade/pricing-section.tsx
@@ -65,7 +65,7 @@ export function PricingSection({
       </header>
 
       {isLoadingPlans ? (
-        <div className="grid grid-cols-1 sm:grid-cols-3" style={{ gap: 16 }}>
+        <div className="grid grid-cols-1 lg:grid-cols-3" style={{ gap: 16 }}>
           {[1, 2, 3].map((i) => (
             <div key={i} className="rounded-[18px]" style={{ padding: '22px', ...cardSurface }}>
               <div className="skeleton-pulse h-4 w-20 rounded" style={{ background: 'var(--bg-elev-2)' }} />