diff --git a/frontend/src/components/auth/SignUpFormUnified.tsx b/frontend/src/components/auth/SignUpFormUnified.tsx
index 49fc55b9..f2e3a552 100644
--- a/frontend/src/components/auth/SignUpFormUnified.tsx
+++ b/frontend/src/components/auth/SignUpFormUnified.tsx
@@ -576,8 +576,8 @@ export default function SignUpFormUnified({
                 </div>
               </div>
 
-              {/* Plan Cards - 2 columns, wider cards, no buttons */}
-              <div className="grid gap-5 grid-cols-1 xl:grid-cols-2">
+              {/* Plan Cards - Single column, stacked vertically */}
+              <div className="grid gap-4 grid-cols-1 w-full px-4">
                 {plans.map((plan) => {
                   const displayPrice = getDisplayPrice(plan);
                   const features = extractFeatures(plan);
@@ -589,7 +589,7 @@ export default function SignUpFormUnified({
                     <div
                       key={plan.id}
                       onClick={() => onPlanSelect(plan)}
-                      className={`relative rounded-2xl p-6 cursor-pointer transition-all duration-300 border-2 ${
+                      className={`relative rounded-2xl p-5 cursor-pointer transition-all duration-300 border-2 ${
                         isSelected
                           ? 'border-brand-500 bg-white dark:bg-gray-800 shadow-2xl ring-4 ring-brand-500/20'
                           : isPopular
@@ -611,37 +611,38 @@ export default function SignUpFormUnified({
                           </div>
                         </div>
                       )}
-                      <div className="mb-5">
-                        <h3 className="text-xl font-bold text-gray-900 dark:text-white mb-2">{plan.name}</h3>
-                        <div className="flex items-baseline gap-1">
-                          <span className="text-4xl font-bold text-gray-900 dark:text-white">
-                            {isFree ? 'Free' : `$${displayPrice.toFixed(2)}`}
-                          </span>
-                          <div className="h-5 flex items-center">
+                      
+                      {/* Header: Plan name, price, and features in horizontal layout */}
+                      <div className="flex items-center gap-6">
+                        {/* Plan Name & Price */}
+                        <div className="flex-shrink-0" style={{ minWidth: '200px' }}>
+                          <h3 className="text-lg font-bold text-gray-900 dark:text-white mb-1">{plan.name}</h3>
+                          <div className="flex items-baseline gap-1">
+                            <span className="text-3xl font-bold text-gray-900 dark:text-white">
+                              {isFree ? 'Free' : `$${displayPrice.toFixed(2)}`}
+                            </span>
                             {!isFree && (
                               <span className="text-gray-500 dark:text-gray-400 text-sm">
                                 {billingPeriod === 'annually' ? '/year' : '/month'}
                               </span>
                             )}
                           </div>
-                        </div>
-                        <div className="h-5">
                           {billingPeriod === 'annually' && !isFree && (
-                            <p className="text-gray-500 dark:text-gray-400 text-xs">
+                            <p className="text-gray-500 dark:text-gray-400 text-xs mt-0.5">
                               ${(displayPrice / 12).toFixed(2)}/month billed annually
                             </p>
                           )}
                         </div>
-                      </div>
-                      
-                      {/* Features - All features in 2 columns */}
-                      <div className="grid grid-cols-2 gap-x-3 gap-y-2.5">
-                        {features.map((feature, idx) => (
-                          <div key={idx} className="flex items-start gap-2">
-                            <CheckCircle className="w-4 h-4 text-green-500 dark:text-green-400 flex-shrink-0 mt-0.5" />
-                            <span className="text-sm text-gray-700 dark:text-gray-300 leading-tight">{feature}</span>
-                          </div>
-                        ))}
+                        
+                        {/* Features - 2 columns */}
+                        <div className="flex-1 grid grid-cols-2 gap-x-6 gap-y-2.5">
+                          {features.map((feature, idx) => (
+                            <div key={idx} className="flex items-center gap-2">
+                              <CheckCircle className="w-4 h-4 text-green-500 dark:text-green-400 flex-shrink-0" />
+                              <span className="text-sm text-gray-700 dark:text-gray-300 leading-tight">{feature}</span>
+                            </div>
+                          ))}
+                        </div>
                       </div>
                     </div>
                   );