diff --git a/client/src/Components/design-elements/StatusBox.tsx b/client/src/Components/design-elements/StatusBox.tsx
index 191ed21d6..a22af3406 100644
--- a/client/src/Components/design-elements/StatusBox.tsx
+++ b/client/src/Components/design-elements/StatusBox.tsx
@@ -35,7 +35,10 @@ export const BGBox = ({ children, sx }: StatusBoxProps) => {
 					pointerEvents: "none",
 					// Deliberately far fainter than `divider` - this is texture
 					// behind the number, not a rule, and it must never compete
-					// with the box's own border.
+					// with the box's own border. Note alpha() *replaces* the
+					// alpha channel, so this relies on `divider` being an opaque
+					// hex; if it ever goes translucent this gets stronger, not
+					// weaker.
 					backgroundImage: `
 						linear-gradient(${alpha(theme.palette.divider, 0.4)} 1px, transparent 1px),
 						linear-gradient(90deg, ${alpha(theme.palette.divider, 0.4)} 1px, transparent 1px)
diff --git a/client/src/Components/design-elements/Table.tsx b/client/src/Components/design-elements/Table.tsx
index 44eab9424..0389f4fef 100644
--- a/client/src/Components/design-elements/Table.tsx
+++ b/client/src/Components/design-elements/Table.tsx
@@ -52,7 +52,11 @@ type DataTableProps<T extends { id?: string | number; _id?: string | number }> =
 	emptyViewText?: string;
 	emptyViewPositive?: boolean;
 	getRowSx?: (row: T) => SxProps<Theme>;
-	/** Marks a row selected so it gets the shared selected + hover treatment. */
+	/**
+	 * Marks a row selected so it gets the shared selected + hover treatment.
+	 * Desktop table only - the small-screen card branch does not style
+	 * selection yet, same as `getRowSx`.
+	 */
 	isRowSelected?: (row: T) => boolean;
 };
 
diff --git a/client/src/Components/monitors/HeaderMonitorControls.tsx b/client/src/Components/monitors/HeaderMonitorControls.tsx
index a32a33298..7f6968f0b 100644
--- a/client/src/Components/monitors/HeaderMonitorControls.tsx
+++ b/client/src/Components/monitors/HeaderMonitorControls.tsx
@@ -64,12 +64,7 @@ export const HeaderMonitorControls = ({
 					variant="contained"
 					color="secondary"
 					loading={isPosting}
-					startIcon={
-						<Icon
-							icon={Mail}
-							size={16}
-						/>
-					}
+					startIcon={<Icon icon={Mail} />}
 					onClick={async () => {
 						await post(`/notifications/test/all`, { monitorId: monitor.id });
 					}}
@@ -82,12 +77,7 @@ export const HeaderMonitorControls = ({
 				<Button
 					variant="contained"
 					color="secondary"
-					startIcon={
-						<Icon
-							icon={Bug}
-							size={16}
-						/>
-					}
+					startIcon={<Icon icon={Bug} />}
 					onClick={() => {
 						navigate(`/incidents/${monitor?.id}`);
 					}}
@@ -99,19 +89,7 @@ export const HeaderMonitorControls = ({
 						variant="contained"
 						color="secondary"
 						loading={isPosting}
-						startIcon={
-							monitor?.isActive ? (
-								<Icon
-									icon={Pause}
-									size={16}
-								/>
-							) : (
-								<Icon
-									icon={Play}
-									size={16}
-								/>
-							)
-						}
+						startIcon={monitor?.isActive ? <Icon icon={Pause} /> : <Icon icon={Play} />}
 						onClick={async () => {
 							await post(`/monitors/pause/${monitor.id}`, {});
 							await refetch();
@@ -124,12 +102,7 @@ export const HeaderMonitorControls = ({
 					<Button
 						variant="contained"
 						color="secondary"
-						startIcon={
-							<Icon
-								icon={Settings}
-								size={16}
-							/>
-						}
+						startIcon={<Icon icon={Settings} />}
 						onClick={() => navigate(`/${path}/configure/${monitor.id}`)}
 					>
 						{t("common.buttons.configure")}
@@ -176,19 +149,7 @@ export const HeaderDeleteControls = ({
 						variant="contained"
 						color="secondary"
 						loading={isPosting}
-						startIcon={
-							monitor?.isActive ? (
-								<Icon
-									icon={Pause}
-									size={16}
-								/>
-							) : (
-								<Icon
-									icon={Play}
-									size={16}
-								/>
-							)
-						}
+						startIcon={monitor?.isActive ? <Icon icon={Pause} /> : <Icon icon={Play} />}
 						onClick={async () => {
 							await post(`/monitors/pause/${monitor.id}`, {});
 							await refetch();
@@ -201,12 +162,7 @@ export const HeaderDeleteControls = ({
 					<Button
 						variant="contained"
 						color="error"
-						startIcon={
-							<Icon
-								icon={Trash}
-								size={16}
-							/>
-						}
+						startIcon={<Icon icon={Trash} />}
 						onClick={() => {
 							onDelete?.();
 						}}
diff --git a/client/src/Components/sidebar/Authfooter.tsx b/client/src/Components/sidebar/Authfooter.tsx
index 54846b6b8..1b68cecc7 100644
--- a/client/src/Components/sidebar/Authfooter.tsx
+++ b/client/src/Components/sidebar/Authfooter.tsx
@@ -185,10 +185,7 @@ export const AuthFooter = ({ collapsed, accountMenuItems }: AuthFooterProps) =>
 					}}
 					sx={menuItemSx}
 				>
-					<Icon
-						icon={mode === "light" ? Moon : Sun}
-						size={16}
-					/>
+					<Icon icon={mode === "light" ? Moon : Sun} />
 					{mode === "light"
 						? t("pages.settings.form.ui.option.theme.dark")
 						: t("pages.settings.form.ui.option.theme.light")}
diff --git a/client/src/Components/sidebar/NavItem.tsx b/client/src/Components/sidebar/NavItem.tsx
index 24f2c5778..a07d68d7e 100644
--- a/client/src/Components/sidebar/NavItem.tsx
+++ b/client/src/Components/sidebar/NavItem.tsx
@@ -26,10 +26,13 @@ export const NavItem = ({
 		? theme.palette.sidebar.accent
 		: theme.palette.text.secondary;
 
+	// Both states come from the same family so selected always reads stronger
+	// than a hovered neighbour. MUI's default action.hover is lighter than
+	// action.selected on a dark ground, which inverted the two.
 	const buttonBgColor = selected ? theme.palette.action.selected : "transparent";
 	const buttonBgHoverColor = selected
-		? theme.palette.action.selected
-		: theme.palette.action.hover;
+		? theme.palette.action.selectedHover
+		: theme.palette.action.rowHover;
 	const fontWeight = selected ? 600 : 400;
 	return (
 		<Tooltip
diff --git a/client/src/Pages/Incidents/Components/CardSummary.tsx b/client/src/Pages/Incidents/Components/CardSummary.tsx
index fa4db83e6..1334616d6 100644
--- a/client/src/Pages/Incidents/Components/CardSummary.tsx
+++ b/client/src/Pages/Incidents/Components/CardSummary.tsx
@@ -149,7 +149,6 @@ const SummaryIncidentItem = ({ incident }: { incident: IncidentSummaryItem }) =>
 			>
 				<Icon
 					icon={Globe}
-					size={16}
 					color={theme.palette.text.secondary}
 				/>
 				<Typography
@@ -221,32 +220,17 @@ export const SummaryCardStats = ({ summary }: SummaryCardStatsProps) => {
 	return (
 		<SummaryCard title={t("pages.incidents.summaryCard.incidentStats.title")}>
 			<SummaryItem
-				icon={
-					<Icon
-						icon={Bell}
-						size={16}
-					/>
-				}
+				icon={<Icon icon={Bell} />}
 				label={t("pages.incidents.summaryCard.incidentStats.totalIncidents")}
 				value={summary?.total || 0}
 			/>
 			<SummaryItem
-				icon={
-					<Icon
-						icon={TriangleAlert}
-						size={16}
-					/>
-				}
+				icon={<Icon icon={TriangleAlert} />}
 				label={t("pages.incidents.summaryCard.incidentStats.mostAffectedMonitor")}
 				value={mostAffected}
 			/>
 			<SummaryItem
-				icon={
-					<Icon
-						icon={Wrench}
-						size={16}
-					/>
-				}
+				icon={<Icon icon={Wrench} />}
 				label={t("pages.incidents.summaryCard.incidentStats.avgResolutionTime")}
 				value={
 					summary.total > 0
diff --git a/client/src/Pages/StatusPage/Status/themes/shared/fontStacks.ts b/client/src/Pages/StatusPage/Status/themes/shared/fontStacks.ts
index 2ad63fd07..a3f1fe556 100644
--- a/client/src/Pages/StatusPage/Status/themes/shared/fontStacks.ts
+++ b/client/src/Pages/StatusPage/Status/themes/shared/fontStacks.ts
@@ -1,5 +1,8 @@
+// No "Inter" here: its webfont was never self-hosted, so once the Google Fonts
+// import went it resolved to a fallback anyway. Listing it only made the stack
+// look intentional on machines that happen to have Inter installed.
 export const SANS_STACK =
-	'-apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, sans-serif';
+	'-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif';
 
 export const BOLD_SANS_STACK = `ui-sans-serif, ${SANS_STACK}`;
 
diff --git a/client/src/Utils/Theme/Theme.ts b/client/src/Utils/Theme/Theme.ts
index 8c3ef9e76..bda2c3806 100644
--- a/client/src/Utils/Theme/Theme.ts
+++ b/client/src/Utils/Theme/Theme.ts
@@ -134,7 +134,14 @@ export const theme = (mode: string, palette: any) =>
 				styleOverrides: {
 					root: ({ theme }) => ({
 						"&.Mui-focusVisible": {
-							outline: `1px solid ${theme.palette.primary.main}`,
+							// Same green as the input focus ring - `main` is only
+							// 2.86:1 on the dark ground, so keyboard focus was
+							// barely visible there.
+							outline: `1px solid ${
+								theme.palette.mode === "dark"
+									? theme.palette.primary.light
+									: theme.palette.primary.main
+							}`,
 							outlineOffset: 2,
 						},
 					}),