diff --git a/internal/site/components/ui/area-chart.tsx b/internal/site/components/ui/area-chart.tsx
index 30795b2c..7476659c 100644
--- a/internal/site/components/ui/area-chart.tsx
+++ b/internal/site/components/ui/area-chart.tsx
@@ -688,7 +688,10 @@ const AreaChart = React.forwardRef<HTMLDivElement, AreaChartProps>(
               hide={!showXAxis}
               dataKey={index}
               interval={startEndOnly ? "preserveStartEnd" : intervalType}
-              tick={{ transform: "translate(0, 6)" }}
+              tick={{
+                transform: "translate(0, 6)",
+                fill: "var(--muted-foreground)",
+              }}
               ticks={
                 startEndOnly
                   ? [data[0][index], data[data.length - 1][index]]
@@ -696,12 +699,7 @@ const AreaChart = React.forwardRef<HTMLDivElement, AreaChartProps>(
               }
               fill=""
               stroke=""
-              className={cn(
-                // base
-                "text-xs",
-                // text fill
-                "fill-gray-500 dark:fill-gray-500"
-              )}
+              className="text-xs"
               tickLine={false}
               axisLine={false}
               minTickGap={tickGap}
@@ -725,15 +723,13 @@ const AreaChart = React.forwardRef<HTMLDivElement, AreaChartProps>(
               tickLine={false}
               type="number"
               domain={yAxisDomain as AxisDomain}
-              tick={{ transform: "translate(-3, 0)" }}
+              tick={{
+                transform: "translate(-3, 0)",
+                fill: "var(--muted-foreground)",
+              }}
               fill=""
               stroke=""
-              className={cn(
-                // base
-                "text-xs",
-                // text fill
-                "fill-gray-500 dark:fill-gray-500"
-              )}
+              className="text-xs"
               tickFormatter={
                 type === "percent" ? valueToPercent : valueFormatter
               }