diff --git a/client/src/Components/design-elements/OfflineBanner.tsx b/client/src/Components/design-elements/OfflineBanner.tsx
index 062b1ca0d..33b26ae53 100644
--- a/client/src/Components/design-elements/OfflineBanner.tsx
+++ b/client/src/Components/design-elements/OfflineBanner.tsx
@@ -37,8 +37,14 @@ export const OfflineBanner = ({ visible }: OfflineBannerProps) => {
 				left: 0,
 				right: 0,
 				zIndex: theme.zIndex.snackbar,
-				backgroundColor: theme.palette.error.main,
-				color: theme.palette.error.contrastText,
+				// `error.dark` rather than `main`: in dark mode `main` is light
+				// enough that MUI derives near-black contrastText, which reads as
+				// a warning rather than an outage on the one surface where
+				// urgency matters. `dark` keeps a solid red bar with white text
+				// in both modes, and leaves `main` alone for the ~30 places that
+				// use it as text or a chart mark on a dark ground.
+				backgroundColor: theme.palette.error.dark,
+				color: "#FFFFFF",
 				px: theme.spacing(8),
 				py: theme.spacing(4),
 				transition: "top 1s ease-in-out",
diff --git a/client/src/Pages/Incidents/Components/CardSummary.tsx b/client/src/Pages/Incidents/Components/CardSummary.tsx
index 60dadaa74..fa4db83e6 100644
--- a/client/src/Pages/Incidents/Components/CardSummary.tsx
+++ b/client/src/Pages/Incidents/Components/CardSummary.tsx
@@ -30,6 +30,10 @@ const SummaryItem = ({ icon, label, value }: SummaryItemProps) => {
 				direction="row"
 				alignItems="center"
 				gap={theme.spacing(2)}
+				// The icons are supporting marks beside the label, not content,
+				// so they take secondary ink rather than lucide's currentColor
+				// default, which renders them heavier than the text.
+				sx={{ "& svg": { color: theme.palette.text.secondary } }}
 			>
 				{icon}
 				<Typography variant="body1">{label}</Typography>
@@ -143,7 +147,11 @@ const SummaryIncidentItem = ({ incident }: { incident: IncidentSummaryItem }) =>
 					gap: theme.spacing(2),
 				}}
 			>
-				<Icon icon={Globe} />
+				<Icon
+					icon={Globe}
+					size={16}
+					color={theme.palette.text.secondary}
+				/>
 				<Typography
 					variant="body1"
 					fontWeight={500}
@@ -213,17 +221,32 @@ export const SummaryCardStats = ({ summary }: SummaryCardStatsProps) => {
 	return (
 		<SummaryCard title={t("pages.incidents.summaryCard.incidentStats.title")}>
 			<SummaryItem
-				icon={<Icon icon={Bell} />}
+				icon={
+					<Icon
+						icon={Bell}
+						size={16}
+					/>
+				}
 				label={t("pages.incidents.summaryCard.incidentStats.totalIncidents")}
 				value={summary?.total || 0}
 			/>
 			<SummaryItem
-				icon={<Icon icon={TriangleAlert} />}
+				icon={
+					<Icon
+						icon={TriangleAlert}
+						size={16}
+					/>
+				}
 				label={t("pages.incidents.summaryCard.incidentStats.mostAffectedMonitor")}
 				value={mostAffected}
 			/>
 			<SummaryItem
-				icon={<Icon icon={Wrench} />}
+				icon={
+					<Icon
+						icon={Wrench}
+						size={16}
+					/>
+				}
 				label={t("pages.incidents.summaryCard.incidentStats.avgResolutionTime")}
 				value={
 					summary.total > 0