diff --git a/frontend/src/ts/controllers/chart-controller.ts b/frontend/src/ts/controllers/chart-controller.ts
index 54532f264..a7aa10087 100644
--- a/frontend/src/ts/controllers/chart-controller.ts
+++ b/frontend/src/ts/controllers/chart-controller.ts
@@ -67,6 +67,7 @@ import * as DateTime from "../utils/date-and-time";
 import * as Arrays from "../utils/arrays";
 import * as Numbers from "@monkeytype/util/numbers";
 import { blendTwoHexColors } from "../utils/colors";
+import { typedKeys } from "../utils/misc";
 
 class ChartWithUpdateColors<
   TType extends ChartType = ChartType,
@@ -1158,8 +1159,17 @@ async function updateColors<
   const maincolor = await ThemeColors.get("main");
   const errorcolor = await ThemeColors.get("error");
   const textcolor = await ThemeColors.get("text");
+  const gridcolor = subaltcolor;
 
-  const gridcolor = blendTwoHexColors(bgcolor, subaltcolor, 0.75);
+  for (const scaleKey of typedKeys(chart.scales)) {
+    //@ts-expect-error cant figure out this type but it works fine
+    const scale = chart.getScale(scaleKey) as CartesianScaleOptions;
+    scale.grid.color = gridcolor;
+    scale.grid.tickColor = gridcolor;
+    scale.grid.borderColor = gridcolor;
+    scale.ticks.color = subcolor;
+    scale.title.color = subcolor;
+  }
 
   //@ts-expect-error its too difficult to figure out these types, but this works
   chart.data.datasets[0].borderColor = (ctx): string => {