diff --git a/web/src/components/graph/SystemGraph.tsx b/web/src/components/graph/SystemGraph.tsx
index 7f4cf5cc5..87be8f5a6 100644
--- a/web/src/components/graph/SystemGraph.tsx
+++ b/web/src/components/graph/SystemGraph.tsx
@@ -1,3 +1,4 @@
+import { useTheme } from "@/context/theme-provider";
 import { Threshold } from "@/types/graph";
 import { useCallback, useEffect, useMemo } from "react";
 import Chart from "react-apexcharts";
@@ -24,6 +25,8 @@ export default function SystemGraph({
     [data],
   );
 
+  const { theme, systemTheme } = useTheme();
+
   const formatTime = useCallback(
     (val: unknown) => {
       const date = new Date(updateTimes[Math.round(val as number)] * 1000);
@@ -71,6 +74,9 @@ export default function SystemGraph({
           distributed: true,
         },
       },
+      tooltip: {
+        theme: systemTheme || theme,
+      },
       xaxis: {
         tickAmount: 6,
         labels: {
@@ -88,7 +94,7 @@ export default function SystemGraph({
         max: lastValue * 2,
       },
     };
-  }, [graphId, lastValue, threshold, formatTime]);
+  }, [graphId, lastValue, threshold, systemTheme, theme, formatTime]);
 
   useEffect(() => {
     ApexCharts.exec(graphId, "updateOptions", options, true, true);