diff --git a/src/admin/components/ErrorBoundary.tsx b/src/admin/components/ErrorBoundary.tsx
index 3b70168..3eaaebb 100644
--- a/src/admin/components/ErrorBoundary.tsx
+++ b/src/admin/components/ErrorBoundary.tsx
@@ -1,4 +1,7 @@
 import { Component, type ReactNode, type ErrorInfo } from "react";
+import Box from "@mui/material/Box";
+import Typography from "@mui/material/Typography";
+import { Button } from "../ui";
 
 interface Props {
   children: ReactNode;
@@ -22,19 +25,25 @@ export default class ErrorBoundary extends Component<Props, State> {
   render() {
     if (this.state.hasError) {
       return (
-        <div
-          className="admin-empty-state"
-          style={{ minHeight: "60vh", justifyContent: "center" }}
+        <Box
+          sx={{
+            minHeight: "60vh",
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "center",
+            justifyContent: "center",
+            gap: 2,
+            textAlign: "center",
+          }}
         >
-          <h2>Něco se pokazilo</h2>
-          <p>{this.state.error?.message}</p>
-          <button
-            className="admin-btn admin-btn-primary"
-            onClick={() => window.location.reload()}
-          >
+          <Typography variant="h5">Něco se pokazilo</Typography>
+          <Typography variant="body2" color="text.secondary">
+            {this.state.error?.message}
+          </Typography>
+          <Button onClick={() => window.location.reload()}>
             Obnovit stránku
-          </button>
-        </div>
+          </Button>
+        </Box>
       );
     }
     return this.props.children;