diff --git a/apps/web/src/pages/workspace/approaches-comparison.tsx b/apps/web/src/pages/workspace/approaches-comparison.tsx
index 51ddc6fa..567d4f86 100644
--- a/apps/web/src/pages/workspace/approaches-comparison.tsx
+++ b/apps/web/src/pages/workspace/approaches-comparison.tsx
@@ -68,6 +68,9 @@ export function ApproachesComparison({
               key={approach.id}
               className="approach-card"
               {...(recommended ? { "data-recommended": "" } : {})}
+              {...(picked || choosing === approach.id
+                ? { "data-chosen": "" }
+                : {})}
             >
               <CardHeader>
                 <div className="approach-badges">
diff --git a/apps/web/src/styles.css b/apps/web/src/styles.css
index 1c261073..31f1b9af 100644
--- a/apps/web/src/styles.css
+++ b/apps/web/src/styles.css
@@ -1776,7 +1776,8 @@ button[aria-disabled="true"] {
   background: var(--wb-card);
 }
 
-.approaches .approach-card[data-recommended] {
+.approaches .approach-card[data-chosen],
+.approaches-grid:not(:has([data-chosen])) .approach-card[data-recommended] {
   border-color: var(--wb-border-strong);
   background: color-mix(in srgb, var(--wb-muted) 45%, var(--wb-card));
 }