diff --git a/client/src/Pages/StatusPage/Status/themes/shared/ThemedChartTooltip.tsx b/client/src/Pages/StatusPage/Status/themes/shared/ThemedChartTooltip.tsx
new file mode 100644
index 000000000..c4a528731
--- /dev/null
+++ b/client/src/Pages/StatusPage/Status/themes/shared/ThemedChartTooltip.tsx
@@ -0,0 +1,28 @@
+import type { CheckSnapshot } from "@/Types/Check";
+import Stack from "@mui/material/Stack";
+import Typography from "@mui/material/Typography";
+import prettyMilliseconds from "pretty-ms";
+import { formatDateWithTz } from "@/Utils/TimeUtils";
+import { useStatusPageTheme } from "@/Pages/StatusPage/Status/themes/StatusPageThemeProvider";
+
+export const ThemedChartTooltip = ({ check }: { check: CheckSnapshot }) => {
+	const { timezone } = useStatusPageTheme();
+	return (
+		<Stack gap={0.25}>
+			<Typography
+				variant="caption"
+				fontWeight={600}
+			>
+				{check.status
+					? `${prettyMilliseconds(check.responseTime, { compact: true })}`
+					: t("pages.statusPages.monitorsList.chart.downTooltip")}
+			</Typography>
+			<Typography
+				variant="caption"
+				sx={{ opacity: 0.8 }}
+			>
+				{formatDateWithTz(check.createdAt, "ddd, MMMM D, YYYY, HH:mm A", timezone)}
+			</Typography>
+		</Stack>
+	);
+};
diff --git a/client/src/Pages/StatusPage/Status/themes/shared/ThemedHeatmap.tsx b/client/src/Pages/StatusPage/Status/themes/shared/ThemedHeatmap.tsx
index 2a7d92b1e..5340f4637 100644
--- a/client/src/Pages/StatusPage/Status/themes/shared/ThemedHeatmap.tsx
+++ b/client/src/Pages/StatusPage/Status/themes/shared/ThemedHeatmap.tsx
@@ -9,6 +9,7 @@ import { formatDateWithTz } from "@/Utils/TimeUtils";
 import { MAX_RECENT_CHECKS } from "@/Types/Monitor";
 import { useStatusPageTheme } from "../StatusPageThemeProvider";
 import prettyMilliseconds from "pretty-ms";
+import { ThemedChartTooltip } from "@/Pages/StatusPage/Status/themes/shared/ThemedChartTooltip";
 
 const CELLS = MAX_RECENT_CHECKS;
 
@@ -54,24 +55,7 @@ export const ThemedHeatmap = ({ checks, containerSx, cellSx }: Props) => {
 					);
 				}
 				const kind = classify(check);
-				const tooltipContent = (
-					<Stack gap={0.25}>
-						<Typography
-							variant="caption"
-							fontWeight={600}
-						>
-							{check.status
-								? `${prettyMilliseconds(check.responseTime, { compact: true })}`
-								: t("pages.statusPages.monitorsList.chart.downTooltip")}
-						</Typography>
-						<Typography
-							variant="caption"
-							sx={{ opacity: 0.8 }}
-						>
-							{formatDateWithTz(check.createdAt, "ddd, MMMM D, YYYY, HH:mm A", timezone)}
-						</Typography>
-					</Stack>
-				);
+				const tooltipContent = <ThemedChartTooltip check={check} />;
 				return (
 					<Tooltip
 						key={check.id ?? i}
diff --git a/client/src/Pages/StatusPage/Status/themes/shared/ThemedHistogram.tsx b/client/src/Pages/StatusPage/Status/themes/shared/ThemedHistogram.tsx
index 50e197c0e..81d928db9 100644
--- a/client/src/Pages/StatusPage/Status/themes/shared/ThemedHistogram.tsx
+++ b/client/src/Pages/StatusPage/Status/themes/shared/ThemedHistogram.tsx
@@ -11,6 +11,7 @@ import { MAX_RECENT_CHECKS } from "@/Types/Monitor";
 import { useStatusPageTheme } from "../StatusPageThemeProvider";
 import { computeBarHeights } from "@/Utils/DataUtils";
 import prettyMilliseconds from "pretty-ms";
+import { ThemedChartTooltip } from "@/Pages/StatusPage/Status/themes/shared/ThemedChartTooltip";
 const CELLS = MAX_RECENT_CHECKS;
 const MIN_HEIGHT_PCT = 6;
 
@@ -65,28 +66,7 @@ export const ThemedHistogram = ({
 						);
 					}
 					const height = heights[i] ?? MIN_HEIGHT_PCT;
-					const tooltipContent = (
-						<Stack gap={0.25}>
-							<Typography
-								variant="caption"
-								fontWeight={600}
-							>
-								{check.status
-									? `${prettyMilliseconds(check.responseTime, { compact: true })}`
-									: t("pages.statusPages.monitorsList.chart.downTooltip")}
-							</Typography>
-							<Typography
-								variant="caption"
-								sx={{ opacity: 0.8 }}
-							>
-								{formatDateWithTz(
-									check.createdAt,
-									"ddd, MMMM D, YYYY, HH:mm A",
-									timezone
-								)}
-							</Typography>
-						</Stack>
-					);
+					const tooltipContent = <ThemedChartTooltip check={check} />;
 					return (
 						<Tooltip
 							key={check.id ?? i}