diff --git a/.Jules/palette.md b/.Jules/palette.md
index 8a5a46f6c..9858f7c77 100644
--- a/.Jules/palette.md
+++ b/.Jules/palette.md
@@ -8,3 +8,6 @@
 ## 2024-10-24 - CSS Bar Chart Animation
 **Learning:** CSS animations can enhance static data visualizations without requiring JavaScript, providing visual polish and reducing perceived loading times for data.
 **Action:** Use CSS keyframe animations for simple visual improvements in static reports.
+## 2026-07-16 - Tabular Nums for Data Alignment
+**Learning:** System fonts default to proportional numbers, making vertically aligned data hard to read and scan in data-heavy HTML reports.
+**Action:** Always include `font-variant-numeric: tabular-nums;` in data-heavy components or body styles to ensure numbers align properly in metric cards, bar charts, and data tables.
diff --git a/python/fast_mlsirm/report.py b/python/fast_mlsirm/report.py
index 30ee4276b..bc30c8258 100644
--- a/python/fast_mlsirm/report.py
+++ b/python/fast_mlsirm/report.py
@@ -465,7 +465,8 @@ def _css() -> str:
   margin: 0;
   background: var(--bg);
   color: var(--text);
-  font-family: Arial, Helvetica, sans-serif;
+  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+  font-variant-numeric: tabular-nums;
   line-height: 1.5;
 }
 
@@ -702,7 +703,7 @@ def _css() -> str:
 }
 
 tbody tr:hover {
-  background: #fbfcfa;
+  background: #f4f6f3;
 }
 
 .empty-state {