diff --git a/resources/js/components/cashflow/net-cashflow-card.tsx b/resources/js/components/cashflow/net-cashflow-card.tsx
index 41561ae5..3360aa18 100644
--- a/resources/js/components/cashflow/net-cashflow-card.tsx
+++ b/resources/js/components/cashflow/net-cashflow-card.tsx
@@ -103,10 +103,15 @@ export function NetCashflowCard({
                         <AmountDisplay
                             amountInCents={current.net}
                             currencyCode={currency}
-                            size="2xl"
+                            size="4xl"
                             weight="bold"
                             minimumFractionDigits={0}
                             maximumFractionDigits={0}
+                            className={
+                                current.net >= 0
+                                    ? 'text-green-600 dark:text-green-400'
+                                    : 'text-red-600 dark:text-red-400'
+                            }
                             highlightPositive
                         />
                     </div>
diff --git a/resources/js/components/cashflow/saved-invested-card.tsx b/resources/js/components/cashflow/saved-invested-card.tsx
index 80a5de34..80e74abc 100644
--- a/resources/js/components/cashflow/saved-invested-card.tsx
+++ b/resources/js/components/cashflow/saved-invested-card.tsx
@@ -167,10 +167,11 @@ export function SavedInvestedCard({
                     <AmountDisplay
                         amountInCents={allocated}
                         currencyCode={currency}
-                        size="2xl"
+                        size="4xl"
                         weight="bold"
                         minimumFractionDigits={0}
                         maximumFractionDigits={0}
+                        className={rateColor}
                         highlightPositive
                     />
                     <span