diff --git a/frontend/src/marketing/pages/Pricing.tsx b/frontend/src/marketing/pages/Pricing.tsx
index 642c4c1a..bf567dbf 100644
--- a/frontend/src/marketing/pages/Pricing.tsx
+++ b/frontend/src/marketing/pages/Pricing.tsx
@@ -245,29 +245,32 @@ const Pricing: React.FC = () => {
tier.featured ? "lg:scale-105" : "hover:-translate-y-1"
}`}
>
- {/* Badge */}
- {tier.badge && (
-
- {tier.badge}
-
- )}
-
- {/* Icon */}
-
-
+ {/* Badge and Icon - Aligned */}
+
+ {/* Icon */}
+
+
+
+
+ {/* Badge and Plan Name */}
+
+ {tier.badge && (
+
+ {tier.badge}
+
+ )}
+
{tier.name}
+
- {/* Plan Info */}
-
-
{tier.name}
-
{tier.description}
-
+ {/* Plan Description */}
+
{tier.description}
{/* Price */}
@@ -282,15 +285,13 @@ const Pricing: React.FC = () => {
{/* Features List */}
{tier.features.map((feature, idx) => {
- const colors = [
- "bg-[#0693e3]",
- "bg-[#0bbf87]",
- "bg-[#ff7a00]",
- "bg-[#5d4ae3]",
- ];
+ // Subtle check icons: light bg with dark check for starter/scale, colored for growth
+ const checkStyle = tier.featured
+ ? "bg-[#0bbf87]/10 text-[#0bbf87]"
+ : "bg-slate-100 text-slate-600";
return (
-
-
+
{feature}
);