diff --git a/src/app/(app)/home/page.tsx b/src/app/(app)/home/page.tsx
index 0bfd17a..1b50f05 100644
--- a/src/app/(app)/home/page.tsx
+++ b/src/app/(app)/home/page.tsx
@@ -106,7 +106,7 @@ export default function HomePage() {
   const [showPhotoMenu, setShowPhotoMenu]   = useState(false);
   const photoInputRef = useRef<HTMLInputElement>(null);
   const { theme, toggle: toggleTheme } = useTheme();
-  const { childId, child, familyId, loading, updateChildImage } = useFamily();
+  const { childId, child, familyId, loading, tier, updateChildImage } = useFamily();
   const stage = useStageCheck(child?.birthDate ?? null);
 
   useEffect(() => {
@@ -330,6 +330,25 @@ export default function HomePage() {
 <div className="p-4 flex justify-between items-center">
         <button className="p-2"><Link href="/menu"><svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" /></svg></Link></button>
         <div className="flex items-center gap-1">
+          {tier === "pro" ? (
+            <Link
+              href="/settings#upgrade"
+              title="Tia Premium"
+              className="p-2 text-amber-500 hover:text-amber-600"
+            >
+              ✨
+            </Link>
+          ) : (
+            <Link
+              href="/settings#upgrade"
+              title="Upgrade to Premium"
+              className="relative p-2 text-gray-400 hover:text-rose-500 transition-colors"
+            >
+              👑
+              {/* Pulsing dot hints there's something to explore — non-intrusive */}
+              <span className="absolute top-1 right-1 w-2 h-2 bg-rose-500 rounded-full animate-pulse" />
+            </Link>
+          )}
           <Link href="/medical/emergency" className="p-2 text-red-500 hover:text-red-600" title="Emergency Guide">🆘</Link>
           <button onClick={toggleDarkMode} className="p-2">{theme === "dark" ? "☀️" : "🌙"}</button>
         </div>