diff --git a/src/components/projects/ProjectHeader.tsx b/src/components/projects/ProjectHeader.tsx
index eb7e1f7..af2cccc 100644
--- a/src/components/projects/ProjectHeader.tsx
+++ b/src/components/projects/ProjectHeader.tsx
@@ -210,30 +210,6 @@ export function ProjectHeader() {
 
         {/* Action buttons */}
         <div className="flex items-center gap-2">
-          {/* Cost visibility toggle - hidden in print */}
-          <button
-            onClick={() => setShowCosts(!showCosts)}
-            className={cn(
-              'flex items-center gap-2 rounded-lg border px-3 py-2 text-sm transition-colors print:hidden',
-              showCosts
-                ? 'border-amber-500/50 bg-amber-900/20 text-amber-400 hover:bg-amber-900/30'
-                : 'border-dark-600 bg-dark-700 text-gray-400 hover:border-gray-500 hover:text-gray-300'
-            )}
-            title={showCosts ? 'Hide internal costs' : 'Show internal costs'}
-          >
-            {showCosts ? (
-              <>
-                <EyeIcon className="h-4 w-4" />
-                <span className="hidden sm:inline">Costs visible</span>
-              </>
-            ) : (
-              <>
-                <EyeSlashIcon className="h-4 w-4" />
-                <span className="hidden sm:inline">Costs hidden</span>
-              </>
-            )}
-          </button>
-
           {/* PDF Export dropdown - hidden in print */}
           <div className="relative print:hidden" ref={exportMenuRef}>
             <button
diff --git a/src/components/projects/ProjectKPICards.tsx b/src/components/projects/ProjectKPICards.tsx
index 1967bbf..1c181b6 100644
--- a/src/components/projects/ProjectKPICards.tsx
+++ b/src/components/projects/ProjectKPICards.tsx
@@ -10,59 +10,32 @@ import {
   CalendarDaysIcon,
   BanknotesIcon,
   CurrencyPoundIcon,
-  InformationCircleIcon,
+  EyeIcon,
+  EyeSlashIcon,
 } from '@heroicons/react/24/outline';
 
-// Info tooltip component with styled popup (keyboard accessible)
-function InfoTooltip({
-  title,
-  description,
-  source,
-  formula,
+// Per-widget visibility toggle: an Eye / Eye-slash button that masks just this
+// widget's amount. Hidden from print (the PDF export controls its own masking).
+function VisibilityToggle({
+  hidden,
+  onToggle,
+  label,
 }: {
-  title: string;
-  description: string;
-  source: string;
-  formula?: string;
+  hidden: boolean;
+  onToggle: () => void;
+  label: string;
 }) {
-  const [isOpen, setIsOpen] = useState(false);
-
   return (
-    <div className="relative print:hidden">
-      <button
-        type="button"
-        className="focus:ring-thyme-500 focus:ring-offset-dark-800 cursor-help rounded text-gray-600 hover:text-gray-400 focus:ring-1 focus:ring-offset-1 focus:outline-none"
-        onMouseEnter={() => setIsOpen(true)}
-        onMouseLeave={() => setIsOpen(false)}
-        onFocus={() => setIsOpen(true)}
-        onBlur={() => setIsOpen(false)}
-        aria-label={`Info: ${title}`}
-        aria-expanded={isOpen}
-      >
-        <InformationCircleIcon className="h-4 w-4" />
-      </button>
-      {isOpen && (
-        <div
-          role="tooltip"
-          className="bg-dark-700 absolute top-6 right-0 z-20 w-64 rounded px-3 py-2 text-xs shadow-lg"
-        >
-          <div className="font-medium text-white">{title}</div>
-          <div className="border-dark-500 mt-1 border-t pt-1">
-            <div className="text-gray-300">{description}</div>
-          </div>
-          {formula && (
-            <div className="border-dark-500 mt-1 border-t pt-1">
-              <div className="text-gray-500">Formula:</div>
-              <div className="text-thyme-400 font-mono">{formula}</div>
-            </div>
-          )}
-          <div className="border-dark-500 mt-1 border-t pt-1">
-            <div className="text-gray-500">Source:</div>
-            <div className="text-blue-400">{source}</div>
-          </div>
-        </div>
-      )}
-    </div>
+    <button
+      type="button"
+      onClick={onToggle}
+      className="focus:ring-thyme-500 focus:ring-offset-dark-800 rounded text-gray-600 transition-colors hover:text-gray-400 focus:ring-1 focus:ring-offset-1 focus:outline-none print:hidden"
+      aria-label={hidden ? `Show ${label} amount` : `Hide ${label} amount`}
+      aria-pressed={hidden}
+      title={hidden ? 'Show amount' : 'Hide amount'}
+    >
+      {hidden ? <EyeSlashIcon className="h-4 w-4" /> : <EyeIcon className="h-4 w-4" />}
+    </button>
   );
 }
 
@@ -94,12 +67,26 @@ function formatCurrency(amount: number, currencyCode: string): string {
 }
 
 export function ProjectKPICards() {
-  const { analytics, isLoadingAnalytics, showCosts, showPrices, currencyCode, project } =
+  const { analytics, isLoadingAnalytics, showPrices, currencyCode, project } =
     useProjectDetailsStore();
   const selectedCompany = useCompanyStore((state) => state.selectedCompany);
   const companyName = selectedCompany?.name;
   const projectCode = project?.code;
 
+  // Per-widget amount visibility. Keyed by KPI label; resets on reload (not persisted).
+  const [hiddenCards, setHiddenCards] = useState<Set<string>>(new Set());
+  const toggleCardHidden = (label: string) =>
+    setHiddenCards((prev) => {
+      const next = new Set(prev);
+      if (next.has(label)) {
+        next.delete(label);
+      } else {
+        next.add(label);
+      }
+      return next;
+    });
+  const maskedValue = '•••••';
+
   if (isLoadingAnalytics) {
     return (
       <div className="space-y-4">
@@ -143,11 +130,6 @@ export function ProjectKPICards() {
         : 'No budget set in BC',
       icon: CalendarDaysIcon,
       color: hoursRemaining < 0 ? 'text-red-400' : 'text-blue-400',
-      tooltip: {
-        title: 'Time Budgeted',
-        description: `Budgeted hours from Job Planning Lines. Only includes Resource lines where lineType is "Budget" or "Both Budget and Billable". Days = hours ÷ ${hoursPerDay}.`,
-        source: 'BC API: /jobPlanningLines → quantity',
-      },
     },
     {
       label: 'Time Spent',
@@ -160,11 +142,6 @@ export function ProjectKPICards() {
       progress: hasPlannedHours ? Math.min(percentUsed, 100) : undefined,
       progressColor:
         percentUsed > 100 ? 'bg-red-500' : percentUsed > 80 ? 'bg-amber-500' : 'bg-thyme-500',
-      tooltip: {
-        title: 'Time Spent',
-        description: `Total hours logged in timesheets for this project. Includes all timesheet statuses: Open, Submitted, and Approved. Days = hours ÷ ${hoursPerDay}.`,
-        source: 'BC API: /timeSheetLines → totalQuantity',
-      },
     },
     {
       label: 'Time Unposted',
@@ -172,12 +149,6 @@ export function ProjectKPICards() {
       subLabel: hoursUnposted > 0 ? 'In timesheets, not posted' : 'All time posted',
       icon: ClockIcon,
       color: hoursUnposted > 0 ? 'text-amber-400' : 'text-gray-500',
-      tooltip: {
-        title: 'Time Unposted',
-        description: `Hours in timesheets that have not yet been posted to the Job Ledger Entry. These hours are approved but awaiting the "Post Time Sheets" action in BC. Days = hours ÷ ${hoursPerDay}.`,
-        formula: 'Time Spent − Time Posted',
-        source: 'Calculated',
-      },
     },
     {
       label: 'Time Posted',
@@ -185,11 +156,6 @@ export function ProjectKPICards() {
       subLabel: 'In Job Ledger Entry',
       icon: ClockIcon,
       color: 'text-green-400',
-      tooltip: {
-        title: 'Time Posted',
-        description: `Hours that have been posted to the Job Ledger Entry. Posting creates cost and price entries based on the Resource's Unit Cost and Unit Price. Days = hours ÷ ${hoursPerDay}.`,
-        source: 'BC API: /timeEntries → quantity',
-      },
     },
   ];
 
@@ -259,8 +225,9 @@ export function ProjectKPICards() {
   );
 
   // Financial KPIs - 4 cards matching BC structure
-  // Budget Cost and Actual Cost are internal (hideable)
-  // Billable Price and Invoiced Price are customer-facing
+  // Budget Cost and Actual Cost are internal; Billable Price and Invoiced Price
+  // are customer-facing. Each card's amount can be hidden individually via its
+  // Eye toggle (see hiddenCards); the value/breakdown masking happens at render.
   const financialKpis: {
     label: string;
     value: string;
@@ -269,51 +236,24 @@ export function ProjectKPICards() {
     icon: typeof BanknotesIcon;
     color: string;
     isInternal?: boolean;
-    isHidden?: boolean;
-    tooltip: {
-      title: string;
-      description: string;
-      formula?: string;
-      source: string;
-    };
   }[] = [
     {
       label: 'Budget Cost',
-      value: showCosts ? formatCurrency(budgetCost, currencyCode) : '•••••',
-      subLabel: showCosts ? jobPlanningLinesLink : 'Hidden',
-      breakdown: showCosts ? budgetBreakdown : null,
+      value: formatCurrency(budgetCost, currencyCode),
+      subLabel: jobPlanningLinesLink,
+      breakdown: budgetBreakdown,
       icon: BanknotesIcon,
       color: 'text-amber-400',
       isInternal: true,
-      isHidden: !showCosts,
-      tooltip: {
-        title: 'Budget Cost (Internal)',
-        description:
-          'Internal cost budget from Job Planning Lines. This is what the project is expected to cost the company. Broken down by Resource (labour), Item (materials), and G/L Account (overhead).',
-        formula: 'quantity × unitCost',
-        source: 'BC API: /jobPlanningLines → totalCost',
-      },
     },
     {
       label: 'Actual Cost',
-      value: showCosts ? formatCurrency(actualCost, currencyCode) : '•••••',
-      subLabel: showCosts ? jobLedgerEntryLink : 'Hidden',
-      breakdown: showCosts ? actualBreakdown : null,
+      value: formatCurrency(actualCost, currencyCode),
+      subLabel: jobLedgerEntryLink,
+      breakdown: actualBreakdown,
       icon: BanknotesIcon,
-      color: showCosts
-        ? actualCost > budgetCost && budgetCost > 0
-          ? 'text-red-400'
-          : 'text-amber-400'
-        : 'text-gray-500',
+      color: actualCost > budgetCost && budgetCost > 0 ? 'text-red-400' : 'text-amber-400',
       isInternal: true,
-      isHidden: !showCosts,
-      tooltip: {
-        title: 'Actual Cost (Internal)',
-        description:
-          "Internal cost incurred from posted Job Ledger Entries. Calculated when timesheets are posted using each Resource's Unit Cost. Shows £0 if timesheets are approved but not yet posted.",
-        formula: 'posted hours × Resource Unit Cost',
-        source: 'BC API: /timeEntries → totalCost',
-      },
     },
     {
       label: 'Billable Price',
@@ -322,13 +262,6 @@ export function ProjectKPICards() {
       breakdown: billableBreakdown,
       icon: CurrencyPoundIcon,
       color: 'text-blue-400',
-      tooltip: {
-        title: 'Billable Price (Customer)',
-        description:
-          'Customer quote/expected revenue from Job Planning Lines. This is what the customer is expected to pay. Only includes lines where lineType is "Billable" or "Both Budget and Billable".',
-        formula: 'quantity × unitPrice',
-        source: 'BC API: /jobPlanningLines → totalPrice',
-      },
     },
     {
       label: 'Invoiced Price',
@@ -337,13 +270,6 @@ export function ProjectKPICards() {
       breakdown: invoicedBreakdown,
       icon: CurrencyPoundIcon,
       color: 'text-green-400',
-      tooltip: {
-        title: 'Invoiced Price (Customer)',
-        description:
-          "Amount actually invoiced to the customer from Job Ledger Entry. Calculated when timesheets are posted using each Resource's Unit Price.",
-        formula: 'posted hours × Resource Unit Price',
-        source: 'BC API: /timeEntries → totalPrice',
-      },
     },
   ];
 
@@ -351,36 +277,42 @@ export function ProjectKPICards() {
     <div className="space-y-4">
       {/* Row 1: Hours (4 cards) */}
       <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4 print:grid-cols-4">
-        {hoursKpis.map((kpi) => (
-          <Card key={kpi.label} variant="bordered" className="relative p-4">
-            <div className="absolute top-3 right-3">
-              <InfoTooltip
-                title={kpi.tooltip.title}
-                description={kpi.tooltip.description}
-                source={kpi.tooltip.source}
-                formula={'formula' in kpi.tooltip ? kpi.tooltip.formula : undefined}
-              />
-            </div>
-            <div className="flex items-start gap-3">
-              <div className={`bg-dark-600 rounded-lg p-2 ${kpi.color}`}>
-                <kpi.icon className="h-5 w-5" />
+        {hoursKpis.map((kpi) => {
+          const isHidden = hiddenCards.has(kpi.label);
+          return (
+            <Card key={kpi.label} variant="bordered" className="relative p-4">
+              <div className="absolute top-3 right-3">
+                <VisibilityToggle
+                  hidden={isHidden}
+                  onToggle={() => toggleCardHidden(kpi.label)}
+                  label={kpi.label}
+                />
               </div>
-              <div className="min-w-0 flex-1">
-                <p className="text-sm text-gray-400">{kpi.label}</p>
-                <p className="text-2xl font-bold text-white">{kpi.value}</p>
-                <p className="mt-1 text-xs text-gray-500">{kpi.subLabel}</p>
-                {kpi.progress !== undefined && (
-                  <div className="bg-dark-600 mt-2 h-1.5 w-full overflow-hidden rounded-full">
-                    <div
-                      className={`h-full rounded-full transition-all ${kpi.progressColor}`}
-                      style={{ width: `${kpi.progress}%` }}
-                    />
-                  </div>
-                )}
+              <div className="flex items-start gap-3">
+                <div
+                  className={`bg-dark-600 rounded-lg p-2 ${kpi.color} ${isHidden ? 'opacity-50' : ''}`}
+                >
+                  <kpi.icon className="h-5 w-5" />
+                </div>
+                <div className="min-w-0 flex-1">
+                  <p className="text-sm text-gray-400">{kpi.label}</p>
+                  <p className={`text-2xl font-bold ${isHidden ? 'text-gray-600' : 'text-white'}`}>
+                    {isHidden ? maskedValue : kpi.value}
+                  </p>
+                  <p className="mt-1 text-xs text-gray-500">{kpi.subLabel}</p>
+                  {kpi.progress !== undefined && !isHidden && (
+                    <div className="bg-dark-600 mt-2 h-1.5 w-full overflow-hidden rounded-full">
+                      <div
+                        className={`h-full rounded-full transition-all ${kpi.progressColor}`}
+                        style={{ width: `${kpi.progress}%` }}
+                      />
+                    </div>
+                  )}
+                </div>
               </div>
-            </div>
-          </Card>
-        ))}
+            </Card>
+          );
+        })}
       </div>
 
       {/* Row 2: Financials (4 cards matching BC) - hidden in print only for "Without Financials" export */}
@@ -391,16 +323,15 @@ export function ProjectKPICards() {
         )}
       >
         {financialKpis.map((kpi) => {
-          const isHidden = 'isHidden' in kpi && kpi.isHidden;
-          const breakdown = 'breakdown' in kpi ? kpi.breakdown : null;
+          const isHidden = hiddenCards.has(kpi.label);
+          const breakdown = kpi.breakdown;
           return (
             <Card key={kpi.label} variant="bordered" className="relative p-4">
-              <div className={`absolute top-3 right-3 ${isHidden ? 'opacity-50' : ''}`}>
-                <InfoTooltip
-                  title={kpi.tooltip.title}
-                  description={kpi.tooltip.description}
-                  source={kpi.tooltip.source}
-                  formula={'formula' in kpi.tooltip ? kpi.tooltip.formula : undefined}
+              <div className="absolute top-3 right-3">
+                <VisibilityToggle
+                  hidden={isHidden}
+                  onToggle={() => toggleCardHidden(kpi.label)}
+                  label={kpi.label}
                 />
               </div>
               <div className="flex items-start gap-3">
@@ -421,7 +352,7 @@ export function ProjectKPICards() {
                     )}
                   </div>
                   <p className={`text-2xl font-bold ${isHidden ? 'text-gray-600' : 'text-white'}`}>
-                    {kpi.value}
+                    {isHidden ? maskedValue : kpi.value}
                   </p>
                   {/* Breakdown by type - always show all 3 lines */}
                   {breakdown && !isHidden && (
diff --git a/src/hooks/useProjectDetailsStore.ts b/src/hooks/useProjectDetailsStore.ts
index 078e492..2680009 100644
--- a/src/hooks/useProjectDetailsStore.ts
+++ b/src/hooks/useProjectDetailsStore.ts
@@ -39,7 +39,7 @@ export const useProjectDetailsStore = create<ProjectDetailsStore>((set, get) =>
   error: null,
   chartView: 'weekly',
   tableGroupBy: 'task',
-  showCosts: false, // Internal costs hidden by default
+  showCosts: true, // Internal costs visible by default (per-widget Eye toggles hide individually); also gates the Spend vs Budget chart and PDF export
   showPrices: true, // Customer-facing prices always visible by default
 
   fetchProjectDetails: async (projectNumber: string) => {