diff --git a/web/status-page/app/layout.tsx b/web/status-page/app/layout.tsx
index f44babd..c39c3c7 100644
--- a/web/status-page/app/layout.tsx
+++ b/web/status-page/app/layout.tsx
@@ -1,3 +1,5 @@
+import { ThemeProvider, I18nProvider, ToastProvider, typography } from "@nexarch/shl";
+
 export const metadata = {
   title: "NEXARCH Systemstatus",
 };
@@ -9,8 +11,19 @@ export default function RootLayout({
 }) {
   return (
     <html lang="de">
-      <body style={{ fontFamily: "system-ui, sans-serif", margin: 0, background: "#f5f6f8" }}>
-        {children}
+      <body
+        style={{
+          fontFamily: typography.fontFamily,
+          margin: 0,
+          background: "var(--shl-color-background, #ffffff)",
+          color: "var(--shl-color-text-primary, #14181f)",
+        }}
+      >
+        <ThemeProvider>
+          <I18nProvider initialLocale="de">
+            <ToastProvider>{children}</ToastProvider>
+          </I18nProvider>
+        </ThemeProvider>
       </body>
     </html>
   );
diff --git a/web/status-page/package.json b/web/status-page/package.json
index 9819947..cd7aab3 100644
--- a/web/status-page/package.json
+++ b/web/status-page/package.json
@@ -8,6 +8,7 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@nexarch/shl": "file:../shl",
     "next": "14.2.35",
     "react": "18.3.1",
     "react-dom": "18.3.1"
