diff --git a/app/accounts/[id]/page.tsx b/app/accounts/[id]/page.tsx
index 7f0661b..da3c5a3 100644
--- a/app/accounts/[id]/page.tsx
+++ b/app/accounts/[id]/page.tsx
@@ -15,6 +15,7 @@ import {
     Dot,
 } from 'recharts';
 import type { FirmConfig, FirmState, AccountState, AccountConfig } from '@/types';
+import { stagePillClasses } from '@/lib/stage-colors';
 
 function getAccountConfig(name: string, firm: FirmConfig): AccountConfig | undefined {
     return [...firm.accounts]
@@ -381,7 +382,7 @@ export default function AccountPage() {
                             label={
                                 <span className="inline-flex items-center gap-1.5">
                                     Profit Target
-                                    <span className="inline-block px-1.5 py-0.5 rounded text-[10px] font-semibold bg-indigo-100 text-indigo-700">
+                                    <span className={`inline-block px-1.5 py-0.5 rounded text-[10px] font-semibold ${stagePillClasses(account.stage)}`}>
                                         Stage {account.stage}
                                     </span>
                                 </span>
diff --git a/app/page.tsx b/app/page.tsx
index 2a8aef9..6b9fad6 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -4,6 +4,7 @@ import { useEffect, useState } from 'react';
 import { useRouter } from 'next/navigation';
 import Link from 'next/link';
 import type { FirmConfig, FirmState, AccountState, AccountConfig } from '@/types';
+import { stagePillClasses } from '@/lib/stage-colors';
 
 type SortKey = 'name' | 'balance' | 'dayPnL' | 'daysTraded' | 'target' | 'status';
 type SortDir = 'asc' | 'desc';
@@ -24,6 +25,7 @@ function getAccountConfig(name: string, firm: FirmConfig): AccountConfig | undef
         .find((a) => name.startsWith(a.prefix));
 }
 
+
 function fmt(value: number) {
     return value.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
 }
@@ -137,7 +139,7 @@ function AccountRow({ account, firm, hideDead, privacy }: { account: AccountStat
                 <div className="flex flex-col">
                     <div className="flex items-center gap-1.5">
                         <span>${(account.effectiveProfitTarget ?? cfg?.profitTarget ?? 0).toLocaleString(undefined, { maximumFractionDigits: 2 })}</span>
-                        <span className="inline-block px-1.5 py-0.5 rounded text-[10px] font-semibold bg-indigo-100 text-indigo-700">
+                        <span className={`inline-block px-1.5 py-0.5 rounded text-[10px] font-semibold ${stagePillClasses(account.stage)}`}>
                             Stage {account.stage}
                         </span>
                     </div>
diff --git a/lib/stage-colors.ts b/lib/stage-colors.ts
new file mode 100644
index 0000000..a905863
--- /dev/null
+++ b/lib/stage-colors.ts
@@ -0,0 +1,11 @@
+/**
+ * Stage 1 starts very light (matching Flat status), gets progressively darker blue with each stage.
+ */
+export function stagePillClasses(stage: number): string {
+    if (stage <= 1) return 'bg-slate-100 text-slate-500';
+    if (stage === 2) return 'bg-blue-100 text-blue-700';
+    if (stage === 3) return 'bg-blue-200 text-blue-800';
+    if (stage === 4) return 'bg-blue-400 text-white';
+    if (stage === 5) return 'bg-blue-600 text-white';
+    return 'bg-blue-800 text-white'; // 6+
+}