diff --git a/vibn-frontend/_onboarding/onboarding-primitives.tsx b/vibn-frontend/_onboarding/onboarding-primitives.tsx
index 4b550aa4..5fc9f5f4 100644
--- a/vibn-frontend/_onboarding/onboarding-primitives.tsx
+++ b/vibn-frontend/_onboarding/onboarding-primitives.tsx
@@ -434,20 +434,22 @@ export function PresetGroup({
                 </span>
               )}
             </span>
-            {active && (
-              <span
-                style={{
-                  width: 16,
-                  height: 16,
-                  borderRadius: "50%",
-                  background: "var(--accent)",
-                  display: "grid",
-                  placeItems: "center",
-                  color: "var(--accent-fg)",
-                  flexShrink: 0,
-                  marginTop: 6,
-                }}
-              >
+            <span
+              style={{
+                width: 16,
+                height: 16,
+                borderRadius: "50%",
+                background: active ? "var(--accent)" : "transparent",
+                border: `1.5px solid ${active ? "var(--accent)" : "var(--hairline-2)"}`,
+                display: "grid",
+                placeItems: "center",
+                color: "var(--accent-fg)",
+                flexShrink: 0,
+                marginTop: 6,
+                transition: "border-color .15s, background .15s",
+              }}
+            >
+              {active && (
                 <svg
                   width="9"
                   height="9"
@@ -461,8 +463,8 @@ export function PresetGroup({
                 >
                   <path d="m3 8.5 3.2 3.2L13 5" />
                 </svg>
-              </span>
-            )}
+              )}
+            </span>
           </button>
         );
       })}