From 4deb7ff69d999d62a106442dae5b14ebba7d21cf Mon Sep 17 00:00:00 2001
From: Mannu <manohar6839@gmail.com>
Date: Mon, 11 May 2026 00:55:28 +0530
Subject: [PATCH] Highlight Free Plan with background shade

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 src/app/settings/page.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/settings/page.tsx b/src/app/settings/page.tsx
index 60fa31a..2d1bdf2 100644
--- a/src/app/settings/page.tsx
+++ b/src/app/settings/page.tsx
@@ -151,7 +151,7 @@ export default function SettingsPage() {
                 <div>
                   <div className="font-medium text-lg">{familyName}</div>
                   <div className="text-sm text-gray-500">
-                    {tier === "pro" ? "Pro Plan" : "Free Plan"} · {members.length} member{members.length !== 1 ? "s" : ""} · {children?.length || 0} child{children?.length !== 1 ? "ren" : ""}
+                    {tier === "pro" ? "Pro Plan" : <span className="bg-rose-100 text-rose-700 px-2 py-0.5 rounded-full text-xs">Free Plan</span>} · {members.length} member{members.length !== 1 ? "s" : ""} · {children?.length || 0} child{children?.length !== 1 ? "ren" : ""}
                   </div>
                 </div>
                 {tier === "free" && (