diff --git a/client/src/Pages/StatusPage/Status/Components/HeaderStatusPageControls.tsx b/client/src/Pages/StatusPage/Status/Components/HeaderStatusPageControls.tsx
index 2cc2395bb..ba3a5940d 100644
--- a/client/src/Pages/StatusPage/Status/Components/HeaderStatusPageControls.tsx
+++ b/client/src/Pages/StatusPage/Status/Components/HeaderStatusPageControls.tsx
@@ -8,7 +8,7 @@ import { Settings, ExternalLink } from "lucide-react";
 import { useTheme } from "@mui/material";
 import { useTranslation } from "react-i18next";
 import { useNavigate } from "react-router-dom";
-import type { StatusPage } from "@/Types/StatusPage";
+import { PUBLIC_STATUS_PAGE_PREFIX, type StatusPage } from "@/Types/StatusPage";
 
 interface HeaderStatusPageControlsProps {
 	isAdmin: boolean;
@@ -50,7 +50,7 @@ export const HeaderStatusPageControls = ({
 						<Typography
 							onClick={() => {
 								window.open(
-									`/status/public/${statusPage.url}`,
+									`${PUBLIC_STATUS_PAGE_PREFIX}/${statusPage.url}`,
 									"_blank",
 									"noopener,noreferrer"
 								);
diff --git a/client/src/Pages/StatusPage/Status/index.tsx b/client/src/Pages/StatusPage/Status/index.tsx
index 992b2523f..4757de5a3 100644
--- a/client/src/Pages/StatusPage/Status/index.tsx
+++ b/client/src/Pages/StatusPage/Status/index.tsx
@@ -11,6 +11,7 @@ import { useGet } from "@/Hooks/UseApi";
 import type { Monitor } from "@/Types/Monitor";
 import {
 	DEFAULT_STATUS_PAGE_THEME,
+	PUBLIC_STATUS_PAGE_PREFIX,
 	type StatusPage,
 	type StatusPageResponse,
 	type StatusPageTheme,
@@ -44,7 +45,7 @@ const StatusPageView = () => {
 	const { url } = useParams();
 	const isAdmin = useIsAdmin();
 	const location = useLocation();
-	const isPublic = location.pathname.startsWith("/status/public");
+	const isPublic = location.pathname.startsWith(PUBLIC_STATUS_PAGE_PREFIX);
 
 	const apiUrl = url ? `/status-page/${url}?type=uptime&type=infrastructure` : null;
 
@@ -88,9 +89,7 @@ const StatusPageView = () => {
 		);
 	}
 
-	const ThemedRenderer =
-		THEMED_RENDERERS[statusPage.theme ?? DEFAULT_STATUS_PAGE_THEME] ??
-		THEMED_RENDERERS[DEFAULT_STATUS_PAGE_THEME];
+	const ThemedRenderer = THEMED_RENDERERS[statusPage.theme ?? DEFAULT_STATUS_PAGE_THEME];
 	const themedRenderer = (
 		<ThemedRenderer
 			statusPage={statusPage}
@@ -98,7 +97,6 @@ const StatusPageView = () => {
 		/>
 	);
 
-	// Public route: render directly on the viewport, themed background covers everything.
 	if (isPublic) {
 		return (
 			<StatusPageThemeProvider
@@ -111,8 +109,7 @@ const StatusPageView = () => {
 		);
 	}
 
-	// Admin preview: wrap in a mock browser frame inside the admin shell.
-	const publicUrl = `${window.location.origin}/status/public/${statusPage.url}`;
+	const publicUrl = `${window.location.origin}${PUBLIC_STATUS_PAGE_PREFIX}/${statusPage.url}`;
 	return (
 		<BasePage
 			loading={isLoading}
diff --git a/client/src/Pages/StatusPage/Status/themes/StatusPageThemeProvider.tsx b/client/src/Pages/StatusPage/Status/themes/StatusPageThemeProvider.tsx
index ffff8df2e..298cb6a50 100644
--- a/client/src/Pages/StatusPage/Status/themes/StatusPageThemeProvider.tsx
+++ b/client/src/Pages/StatusPage/Status/themes/StatusPageThemeProvider.tsx
@@ -105,7 +105,17 @@ export const StatusPageThemeProvider = ({
 		resolvedThemeMode === "auto" ? systemMode : resolvedThemeMode;
 	const tokens = themeTokens[resolvedTheme][resolvedMode];
 
-	const style = useMemo(() => toCssVars(tokens) as React.CSSProperties, [tokens]);
+	const style = useMemo<React.CSSProperties>(
+		() =>
+			transparent
+				? (toCssVars(tokens) as React.CSSProperties)
+				: {
+						...(toCssVars(tokens) as React.CSSProperties),
+						background: tokens.bg,
+						minHeight: "100vh",
+					},
+		[tokens, transparent]
+	);
 
 	const value = useMemo(
 		() => ({ theme: resolvedTheme, mode: resolvedMode, tokens }),
@@ -118,15 +128,7 @@ export const StatusPageThemeProvider = ({
 				data-status-theme={resolvedTheme}
 				data-status-mode={resolvedMode}
 				data-status-transparent={transparent ? "" : undefined}
-				style={
-					transparent
-						? (style as React.CSSProperties)
-						: {
-								...style,
-								background: tokens.bg,
-								minHeight: "100vh",
-							}
-				}
+				style={style}
 			>
 				{children}
 			</div>
diff --git a/client/src/Pages/StatusPage/StatusPages/Components/StatusPagesTable.tsx b/client/src/Pages/StatusPage/StatusPages/Components/StatusPagesTable.tsx
index 8f72931d6..34daf203c 100644
--- a/client/src/Pages/StatusPage/StatusPages/Components/StatusPagesTable.tsx
+++ b/client/src/Pages/StatusPage/StatusPages/Components/StatusPagesTable.tsx
@@ -9,7 +9,7 @@ import { useTranslation } from "react-i18next";
 import { useTheme } from "@mui/material/styles";
 import { useNavigate } from "react-router-dom";
 
-import type { StatusPage } from "@/Types/StatusPage";
+import { PUBLIC_STATUS_PAGE_PREFIX, type StatusPage } from "@/Types/StatusPage";
 
 interface StatusPagesTableProps {
 	data: StatusPage[];
@@ -50,7 +50,7 @@ export const StatusPagesTable = ({
 	const handleUrlClick = (e: React.MouseEvent, row: StatusPage) => {
 		if (row.isPublished) {
 			e.stopPropagation();
-			const url = `/status/public/${row.url}`;
+			const url = `${PUBLIC_STATUS_PAGE_PREFIX}/${row.url}`;
 			window.open(url, "_blank", "noopener,noreferrer");
 		}
 	};
diff --git a/client/src/Types/StatusPage.ts b/client/src/Types/StatusPage.ts
index 6388ccfd9..5b8c4acfa 100644
--- a/client/src/Types/StatusPage.ts
+++ b/client/src/Types/StatusPage.ts
@@ -29,6 +29,8 @@ export const STATUS_PAGE_THEME_MODES = ["auto", "light", "dark"] as const;
 export type StatusPageThemeMode = (typeof STATUS_PAGE_THEME_MODES)[number];
 export const DEFAULT_STATUS_PAGE_THEME_MODE: StatusPageThemeMode = "auto";
 
+export const PUBLIC_STATUS_PAGE_PREFIX = "/status/public";
+
 export interface StatusPage {
 	id: string;
 	userId: string;