diff --git a/resources/js/components/charts/chart-settings-popover.tsx b/resources/js/components/charts/chart-settings-popover.tsx
index 9fa41223..bf579ddd 100644
--- a/resources/js/components/charts/chart-settings-popover.tsx
+++ b/resources/js/components/charts/chart-settings-popover.tsx
@@ -109,16 +109,17 @@ export function ChartSettingsPopover({
                     {allToggles.map((toggle) => (
                         <div
                             key={toggle.id}
-                            className="flex items-start justify-between gap-4"
+                            className="flex cursor-pointer items-start justify-between gap-4"
+                            onClick={() => toggle.onChange(!toggle.checked)}
                         >
                             <div className="space-y-1">
                                 <Label
                                     htmlFor={toggle.id}
-                                    className="text-sm leading-5 font-medium"
+                                    className="pointer-events-none text-sm leading-5 font-medium"
                                 >
                                     {toggle.label}
                                 </Label>
-                                <p className="text-xs text-muted-foreground">
+                                <p className="pointer-events-none text-xs text-muted-foreground">
                                     {toggle.description}
                                 </p>
                             </div>
diff --git a/resources/js/components/dashboard/net-worth-chart.tsx b/resources/js/components/dashboard/net-worth-chart.tsx
index 4763aaf5..2ebb10e6 100644
--- a/resources/js/components/dashboard/net-worth-chart.tsx
+++ b/resources/js/components/dashboard/net-worth-chart.tsx
@@ -18,6 +18,7 @@ import {
 import { ChartConfig } from '@/components/ui/chart';
 import { StackedAreaChart } from '@/components/ui/stacked-area-chart';
 import { StackedBarChart } from '@/components/ui/stacked-bar-chart';
+import { useChartColors } from '@/hooks/use-chart-color-scheme';
 import { useChartViews } from '@/hooks/use-chart-views';
 import {
     NetWorthEvolutionData,
@@ -135,6 +136,7 @@ export function NetWorthChart({
     const { props } = usePage<SharedData>();
     const locale = useLocale();
     const isMobile = useIsMobile();
+    const { liabilityDotColor } = useChartColors();
     const [granularity, setGranularity] = useState<ChartGranularity>('monthly');
     const [dailyData, setDailyData] = useState<NetWorthEvolutionData | null>(
         null,
@@ -598,6 +600,7 @@ export function NetWorthChart({
                 {chartViews.currentView === 'stacked' &&
                     (granularity === 'daily' ? (
                         <StackedAreaChart
+                            key={dataKeys.join(',')}
                             data={scaledChartData.slice(1)}
                             dataKeys={dataKeys}
                             config={chartConfig}
@@ -610,12 +613,16 @@ export function NetWorthChart({
                             showLegend={showLegend}
                             netWorthMode={
                                 hasLiabilities
-                                    ? { liabilityTypeLabel: __('Loan') }
+                                    ? {
+                                          liabilityTypeLabel: __('Loan'),
+                                          liabilityDotColor,
+                                      }
                                     : undefined
                             }
                         />
                     ) : (
                         <StackedBarChart
+                            key={dataKeys.join(',')}
                             data={scaledChartData.slice(1)}
                             dataKeys={dataKeys}
                             config={chartConfig}
@@ -628,7 +635,10 @@ export function NetWorthChart({
                             showLegend={showLegend}
                             netWorthMode={
                                 hasLiabilities
-                                    ? { liabilityTypeLabel: __('Loan') }
+                                    ? {
+                                          liabilityTypeLabel: __('Loan'),
+                                          liabilityDotColor,
+                                      }
                                     : undefined
                             }
                         />
diff --git a/resources/js/components/ui/chart.tsx b/resources/js/components/ui/chart.tsx
index 4bf8d533..9efc4da8 100644
--- a/resources/js/components/ui/chart.tsx
+++ b/resources/js/components/ui/chart.tsx
@@ -137,6 +137,7 @@ interface ChartTooltipContentProps {
     /** When set, tooltip shows liability rows and net-worth total instead of simple sum. */
     netWorthMode?: {
         liabilityTypeLabel: string;
+        liabilityDotColor?: string;
     };
 }
 
@@ -377,7 +378,10 @@ const ChartTooltipContent = React.forwardRef<
                                 {hasLiabilities && displayCurrency && liabilities.map((liability, index) => (
                                     <div key={index} className="flex justify-between gap-2">
                                         <div className="flex items-center gap-2">
-                                            <div className="size-2.5 rounded-xs bg-destructive" />
+                                            <div
+                                                className="size-2.5 shrink-0 rounded-xs"
+                                                style={{ backgroundColor: netWorthMode?.liabilityDotColor ?? 'var(--color-destructive)' }}
+                                            />
                                             <span className="text-muted-foreground font-medium">
                                                 {netWorthMode?.liabilityTypeLabel}: {liability.name}
                                             </span>
diff --git a/resources/js/components/ui/stacked-area-chart.tsx b/resources/js/components/ui/stacked-area-chart.tsx
index 9ce151f3..4c2cd436 100644
--- a/resources/js/components/ui/stacked-area-chart.tsx
+++ b/resources/js/components/ui/stacked-area-chart.tsx
@@ -36,7 +36,7 @@ export interface StackedAreaChartProps<T extends Record<string, unknown>> {
     className?: string;
     showLegend?: boolean;
     minBarWidth?: number;
-    netWorthMode?: { liabilityTypeLabel: string };
+    netWorthMode?: { liabilityTypeLabel: string; liabilityDotColor?: string };
 }
 
 export function StackedAreaChart<T extends Record<string, unknown>>({
diff --git a/resources/js/components/ui/stacked-bar-chart.tsx b/resources/js/components/ui/stacked-bar-chart.tsx
index 0c9c7d54..b9ab20e6 100644
--- a/resources/js/components/ui/stacked-bar-chart.tsx
+++ b/resources/js/components/ui/stacked-bar-chart.tsx
@@ -128,7 +128,7 @@ export interface StackedBarChartProps<T extends Record<string, unknown>> {
     className?: string;
     showLegend?: boolean;
     minBarWidth?: number;
-    netWorthMode?: { liabilityTypeLabel: string };
+    netWorthMode?: { liabilityTypeLabel: string; liabilityDotColor?: string };
 }
 
 export function StackedBarChart<T extends Record<string, unknown>>({
diff --git a/resources/js/hooks/use-chart-color-scheme.tsx b/resources/js/hooks/use-chart-color-scheme.tsx
index 09e0db96..04b716e3 100644
--- a/resources/js/hooks/use-chart-color-scheme.tsx
+++ b/resources/js/hooks/use-chart-color-scheme.tsx
@@ -96,6 +96,10 @@ export function useChartColors() {
         ? 'var(--cashflow-expense)'
         : 'var(--color-chart-5)';
 
+    const liabilityDotColor = isColorful
+        ? 'var(--color-destructive)'
+        : 'var(--color-chart-5)';
+
     const CHART_COLORS = [
         'var(--chart-1)',
         'var(--chart-2)',
@@ -119,6 +123,7 @@ export function useChartColors() {
         equityLineColor,
         cashflowIncomeColor,
         cashflowExpenseColor,
+        liabilityDotColor,
         categoryBarColor,
     };
 }
diff --git a/tests/Feature/BudgetTest.php b/tests/Feature/BudgetTest.php
index 96e2cee9..26d32e0b 100644
--- a/tests/Feature/BudgetTest.php
+++ b/tests/Feature/BudgetTest.php
@@ -117,8 +117,8 @@ test('budget show returns previous period when it exists', function () {
 
     // Create a previous period (last month)
     $budget->periods()->create([
-        'start_date' => now()->subMonth()->startOfMonth(),
-        'end_date' => now()->subMonth()->endOfMonth(),
+        'start_date' => now()->subMonthNoOverflow()->startOfMonth(),
+        'end_date' => now()->subMonthNoOverflow()->endOfMonth(),
         'allocated_amount' => 30000,
         'carried_over_amount' => 0,
     ]);
@@ -138,7 +138,7 @@ test('budget show returns previous period when it exists', function () {
         ->component('budgets/show')
         ->has('currentPeriod')
         ->has('previousPeriod')
-        ->where('previousPeriod.start_date', now()->subMonth()->startOfMonth()->toJSON())
+        ->where('previousPeriod.start_date', now()->subMonthNoOverflow()->startOfMonth()->toJSON())
     );
 });
 
@@ -252,8 +252,8 @@ test('budget show can navigate to a specific period via query param', function (
 
     // Create a previous period
     $previousPeriod = $budget->periods()->create([
-        'start_date' => now()->subMonth()->startOfMonth(),
-        'end_date' => now()->subMonth()->endOfMonth(),
+        'start_date' => now()->subMonthNoOverflow()->startOfMonth(),
+        'end_date' => now()->subMonthNoOverflow()->endOfMonth(),
         'allocated_amount' => 20000,
         'carried_over_amount' => 0,
     ]);
diff --git a/tests/Feature/DashboardAnalyticsTest.php b/tests/Feature/DashboardAnalyticsTest.php
index 54db4b56..6c270a89 100644
--- a/tests/Feature/DashboardAnalyticsTest.php
+++ b/tests/Feature/DashboardAnalyticsTest.php
@@ -313,7 +313,7 @@ test('net worth evolution converts foreign currency accounts using cached exchan
         'currency_code' => 'EUR',
     ]);
 
-    $lastMonth = now()->subMonth();
+    $lastMonth = now()->subMonthNoOverflow();
     $endOfMonth = $lastMonth->copy()->endOfMonth();
 
     AccountBalance::factory()->create([
@@ -369,7 +369,7 @@ test('net worth evolution uses last balance of each month per account', function
         'currency_code' => 'USD',
     ]);
 
-    $lastMonth = now()->subMonth();
+    $lastMonth = now()->subMonthNoOverflow();
 
     AccountBalance::factory()->create([
         'account_id' => $account->id,