diff --git a/client/src/Pages/StatusPage/Status/themes/bold/styles.ts b/client/src/Pages/StatusPage/Status/themes/bold/styles.ts
index 1fcec973a..073565e4c 100644
--- a/client/src/Pages/StatusPage/Status/themes/bold/styles.ts
+++ b/client/src/Pages/StatusPage/Status/themes/bold/styles.ts
@@ -130,7 +130,7 @@ export const boldStyles = (
 		hero: {
 			position: "relative",
 			borderRadius: "22px",
-			padding: "36px 36px 32px",
+			padding: { xs: "24px 20px", sm: "36px 36px 32px" },
 			mb: "28px",
 			background: isDark ? heroBgDark : heroBgLight,
 			border: `1px solid ${tokens.border}`,
@@ -149,13 +149,14 @@ export const boldStyles = (
 		},
 		heroTitle: {
 			m: 0,
-			fontSize: 34,
+			fontSize: { xs: 24, sm: 34 },
 			fontWeight: 800,
 			letterSpacing: "-0.02em",
 			lineHeight: 1.1,
 			color: tokens.text,
 			display: "flex",
-			alignItems: "center",
+			alignItems: { xs: "flex-start", sm: "center" },
+			flexWrap: "wrap",
 			gap: "10px",
 		},
 		heroCheck: (tone) => ({
diff --git a/client/src/Pages/StatusPage/Status/themes/editorial/styles.ts b/client/src/Pages/StatusPage/Status/themes/editorial/styles.ts
index a9b54bf96..8a59d46b4 100644
--- a/client/src/Pages/StatusPage/Status/themes/editorial/styles.ts
+++ b/client/src/Pages/StatusPage/Status/themes/editorial/styles.ts
@@ -119,7 +119,7 @@ export const editorialStyles = (
 		},
 
 		statusLine: {
-			fontSize: 22,
+			fontSize: { xs: 18, sm: 22 },
 			fontWeight: 400,
 			m: 0,
 			mb: "8px",
@@ -144,7 +144,7 @@ export const editorialStyles = (
 			letterSpacing: "0.12em",
 			color: tokens.textMuted,
 			m: 0,
-			mb: "56px",
+			mb: { xs: "32px", sm: "56px" },
 		},
 
 		chartSwitchWrap: {
diff --git a/client/src/Pages/StatusPage/Status/themes/modern/ModernHero.tsx b/client/src/Pages/StatusPage/Status/themes/modern/ModernHero.tsx
index a7cf93bc7..68c2b5903 100644
--- a/client/src/Pages/StatusPage/Status/themes/modern/ModernHero.tsx
+++ b/client/src/Pages/StatusPage/Status/themes/modern/ModernHero.tsx
@@ -11,24 +11,24 @@ export const ModernHero = ({
 	const { t } = useTranslation();
 	return (
 		<Box sx={styles.hero}>
-			<Box sx={styles.pulse(overall.tone)} />
-			<Box sx={styles.statusCopy}>
+			<Box sx={styles.heroRow}>
+				<Box sx={styles.pulse(overall.tone)} />
 				<Box
 					component="h1"
 					sx={styles.heroTitle}
 				>
 					{overall.message}
 				</Box>
-				<Box
-					component="p"
-					sx={styles.heroSub}
-				>
-					{t("pages.statusPages.statusBar.monitoringSummary", {
-						count: monitorCount,
-					})}
-				</Box>
+				<Box sx={styles.heroIcon(overall.tone)}>{overall.icon}</Box>
+			</Box>
+			<Box
+				component="p"
+				sx={styles.heroSub}
+			>
+				{t("pages.statusPages.statusBar.monitoringSummary", {
+					count: monitorCount,
+				})}
 			</Box>
-			<Box sx={styles.heroIcon(overall.tone)}>{overall.icon}</Box>
 		</Box>
 	);
 };
diff --git a/client/src/Pages/StatusPage/Status/themes/modern/styles.ts b/client/src/Pages/StatusPage/Status/themes/modern/styles.ts
index e845f4ef3..5535bc8ad 100644
--- a/client/src/Pages/StatusPage/Status/themes/modern/styles.ts
+++ b/client/src/Pages/StatusPage/Status/themes/modern/styles.ts
@@ -17,7 +17,7 @@ export interface ModernStyles {
 	logoImg: SxProps<Theme>;
 	hero: SxProps<Theme>;
 	pulse: (tone: OverallTone) => SxProps<Theme>;
-	statusCopy: SxProps<Theme>;
+	heroRow: SxProps<Theme>;
 	heroTitle: SxProps<Theme>;
 	heroSub: SxProps<Theme>;
 	heroIcon: (tone: OverallTone) => SxProps<Theme>;
@@ -148,11 +148,11 @@ export const modernStyles = (
 		hero: {
 			position: "relative",
 			borderRadius: "20px",
-			padding: "28px 32px",
+			padding: { xs: "20px", sm: "28px 32px" },
 			mb: "24px",
 			display: "flex",
-			alignItems: "center",
-			gap: "20px",
+			flexDirection: "column",
+			gap: "4px",
 			background: tokens.surface,
 			border: `1px solid ${tokens.border}`,
 			boxShadow: cardShadow,
@@ -182,20 +182,26 @@ export const modernStyles = (
 				},
 			};
 		},
-		statusCopy: { flex: 1, minWidth: 0 },
+		heroRow: {
+			display: "flex",
+			alignItems: "center",
+			gap: { xs: "14px", sm: "20px" },
+		},
 		heroTitle: {
 			m: 0,
-			mb: "4px",
-			fontSize: 22,
+			flex: 1,
+			minWidth: 0,
+			fontSize: { xs: 18, sm: 22 },
 			fontWeight: 700,
 			letterSpacing: "-0.02em",
 			color: tokens.text,
 		},
 		heroSub: { m: 0, color: tokens.textMuted, fontSize: 13 },
 		heroIcon: (tone) => ({
+			display: { xs: "none", sm: "flex" },
 			color: toneColor(tone, tokens),
-			display: "flex",
 			alignItems: "center",
+			flexShrink: 0,
 		}),
 
 		chartSwitchWrap: {
diff --git a/client/src/Pages/StatusPage/Status/themes/refined/RefinedHero.tsx b/client/src/Pages/StatusPage/Status/themes/refined/RefinedHero.tsx
index c9a59ad77..b46fdf263 100644
--- a/client/src/Pages/StatusPage/Status/themes/refined/RefinedHero.tsx
+++ b/client/src/Pages/StatusPage/Status/themes/refined/RefinedHero.tsx
@@ -11,24 +11,24 @@ export const RefinedHero = ({
 	const { t } = useTranslation();
 	return (
 		<Box sx={styles.hero}>
-			<Box sx={styles.statusDot(overall.tone)} />
-			<Box sx={styles.statusCopy}>
+			<Box sx={styles.heroRow}>
+				<Box sx={styles.statusDot(overall.tone)} />
 				<Box
 					component="h1"
 					sx={styles.heroTitle}
 				>
 					{overall.message}
 				</Box>
-				<Box
-					component="p"
-					sx={styles.heroSub}
-				>
-					{t("pages.statusPages.statusBar.monitoringSummary", {
-						count: monitorCount,
-					})}
-				</Box>
+				<Box sx={styles.heroIcon(overall.tone)}>{overall.icon}</Box>
+			</Box>
+			<Box
+				component="p"
+				sx={styles.heroSub}
+			>
+				{t("pages.statusPages.statusBar.monitoringSummary", {
+					count: monitorCount,
+				})}
 			</Box>
-			<Box sx={styles.heroIcon(overall.tone)}>{overall.icon}</Box>
 		</Box>
 	);
 };
diff --git a/client/src/Pages/StatusPage/Status/themes/refined/styles.ts b/client/src/Pages/StatusPage/Status/themes/refined/styles.ts
index fd3bfbb83..dec691a3a 100644
--- a/client/src/Pages/StatusPage/Status/themes/refined/styles.ts
+++ b/client/src/Pages/StatusPage/Status/themes/refined/styles.ts
@@ -17,7 +17,7 @@ export interface RefinedStyles {
 	company: SxProps<Theme>;
 	hero: SxProps<Theme>;
 	statusDot: (tone: OverallTone) => SxProps<Theme>;
-	statusCopy: SxProps<Theme>;
+	heroRow: SxProps<Theme>;
 	heroTitle: SxProps<Theme>;
 	heroSub: SxProps<Theme>;
 	heroIcon: (tone: OverallTone) => SxProps<Theme>;
@@ -133,10 +133,10 @@ export const refinedStyles = (
 			background: tokens.surface,
 			border: `1px solid ${tokens.border}`,
 			borderRadius: tokens.radius,
-			padding: "22px 24px",
+			padding: { xs: "18px 20px", sm: "22px 24px" },
 			display: "flex",
-			alignItems: "center",
-			gap: "16px",
+			flexDirection: "column",
+			gap: "4px",
 			boxShadow: cardShadow,
 			mb: "20px",
 		},
@@ -148,10 +148,15 @@ export const refinedStyles = (
 			boxShadow: `0 0 0 4px ${toneSoft(tone, tokens)}`,
 			flexShrink: 0,
 		}),
-		statusCopy: { flex: 1, minWidth: 0 },
+		heroRow: {
+			display: "flex",
+			alignItems: "center",
+			gap: { xs: "12px", sm: "16px" },
+		},
 		heroTitle: {
 			m: 0,
-			mb: "2px",
+			flex: 1,
+			minWidth: 0,
 			fontSize: 17,
 			fontWeight: 600,
 			letterSpacing: "-0.01em",
@@ -159,9 +164,10 @@ export const refinedStyles = (
 		},
 		heroSub: { m: 0, color: tokens.textMuted, fontSize: 13 },
 		heroIcon: (tone) => ({
+			display: { xs: "none", sm: "flex" },
 			color: toneColor(tone, tokens),
-			display: "flex",
 			alignItems: "center",
+			flexShrink: 0,
 		}),
 
 		chartSwitchWrap: {