diff --git a/frontend/src/component/App.tsx b/frontend/src/component/App.tsx
index abf9ae1be3..b8c6658c53 100644
--- a/frontend/src/component/App.tsx
+++ b/frontend/src/component/App.tsx
@@ -14,7 +14,7 @@ import { useAuthUser } from 'hooks/api/getters/useAuth/useAuthUser';
 import { SplashPageRedirect } from 'component/splash/SplashPageRedirect/SplashPageRedirect';
 import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
 
-import MaintenanceBanner from './maintenance/MaintenanceBanner.tsx';
+import { MaintenanceBanner } from './maintenance/MaintenanceBanner.tsx';
 import { styled } from '@mui/material';
 import { InitialRedirect, useLastViewedPage } from './InitialRedirect.tsx';
 import { InternalBanners } from './banners/internalBanners/InternalBanners.tsx';
diff --git a/frontend/src/component/maintenance/MaintenanceBanner.tsx b/frontend/src/component/maintenance/MaintenanceBanner.tsx
index 48662431e6..39bb081725 100644
--- a/frontend/src/component/maintenance/MaintenanceBanner.tsx
+++ b/frontend/src/component/maintenance/MaintenanceBanner.tsx
@@ -1,39 +1,7 @@
-import { styled } from '@mui/material';
-import ErrorOutlineRounded from '@mui/icons-material/ErrorOutlineRounded';
-import { Sticky } from 'component/common/Sticky/Sticky';
+import { Banner } from 'component/banners/Banner/Banner';
+import { useMaintenanceBannerMessage } from './useMaintenanceBannerMessage.ts';
 
-const StyledErrorRoundedIcon = styled(ErrorOutlineRounded)(({ theme }) => ({
-    color: theme.palette.error.main,
-    height: '20px',
-    width: '20px',
-    marginRight: theme.spacing(1),
-}));
-
-const StyledDiv = styled(Sticky)(({ theme }) => ({
-    display: 'flex',
-    fontSize: theme.fontSizes.smallBody,
-    justifyContent: 'center',
-    alignItems: 'center',
-    color: theme.palette.error.contrastText,
-    backgroundColor: theme.palette.error.light,
-    height: '65px',
-    borderBottom: `1px solid ${theme.palette.error.border}`,
-    whiteSpace: 'pre-wrap',
-    zIndex: theme.zIndex.sticky - 100,
-}));
-
-const MaintenanceBanner = () => {
-    return (
-        <StyledDiv>
-            <StyledErrorRoundedIcon />
-            <b>Maintenance Mode! </b>
-            <p>
-                During maintenance mode, any changes made will not be saved and
-                you may receive an error. We apologize for any inconvenience
-                this may cause.
-            </p>
-        </StyledDiv>
-    );
+export const MaintenanceBanner = () => {
+    const message = useMaintenanceBannerMessage();
+    return <Banner banner={{ message, variant: 'error' }} />;
 };
-
-export default MaintenanceBanner;
diff --git a/frontend/src/component/maintenance/useMaintenanceBannerMessage.test.ts b/frontend/src/component/maintenance/useMaintenanceBannerMessage.test.ts
new file mode 100644
index 0000000000..0d6071fb16
--- /dev/null
+++ b/frontend/src/component/maintenance/useMaintenanceBannerMessage.test.ts
@@ -0,0 +1,27 @@
+import { renderHook, waitFor } from '@testing-library/react';
+import { useMaintenanceBannerMessage } from './useMaintenanceBannerMessage.ts';
+import { testServerRoute, testServerSetup } from 'utils/testServer.ts';
+import { PayloadType, type Variant } from 'utils/variants.ts';
+
+const server = testServerSetup();
+const setupApi = (maintenanceMode?: boolean | Variant) => {
+    testServerRoute(server, '/api/admin/ui-config', {
+        flags: {
+            maintenanceMode,
+        },
+    });
+};
+
+test('Returns custom string if variant has string payload', async () => {
+    setupApi({
+        name: 'Variant',
+        enabled: true,
+        payload: {
+            type: PayloadType.STRING,
+            value: '**Custom** message',
+        },
+    });
+    const { result } = renderHook(() => useMaintenanceBannerMessage());
+
+    await waitFor(() => expect(result.current).toBe('**Custom** message'));
+});
diff --git a/frontend/src/component/maintenance/useMaintenanceBannerMessage.ts b/frontend/src/component/maintenance/useMaintenanceBannerMessage.ts
new file mode 100644
index 0000000000..cdef1f0c29
--- /dev/null
+++ b/frontend/src/component/maintenance/useMaintenanceBannerMessage.ts
@@ -0,0 +1,19 @@
+import { useUiFlag } from 'hooks/useUiFlag';
+import { useVariant } from 'hooks/useVariant';
+import { PayloadType, type Variant } from 'utils/variants';
+
+export const defaultMessage =
+    '**Maintenance mode!** During maintenance mode, any changes made will not be saved and you may receive an error. We apologize for any inconvenience this may cause.';
+
+export const useMaintenanceBannerMessage = (): string => {
+    const flag = useUiFlag('maintenanceMode');
+    const variantValue = useVariant(flag as Variant);
+    if (typeof flag === 'boolean') {
+        return defaultMessage;
+    }
+
+    if (flag?.payload?.type === PayloadType.STRING) {
+        return variantValue || defaultMessage;
+    }
+    return defaultMessage;
+};