diff --git a/frontend/src/features/about/system/AboutSystemContainer.js b/frontend/src/features/about/system/AboutSystemContainer.js
index 8ef7188..3396f98 100644
--- a/frontend/src/features/about/system/AboutSystemContainer.js
+++ b/frontend/src/features/about/system/AboutSystemContainer.js
@@ -1,35 +1,32 @@
 import React from "react";
-import { makeStyles } from "@mui/material/styles";
+import { Box } from "@mui/material";
 import AboutSystemComponent from "./AboutSystemComponent";
 import SystemVersionContainer from "./SystemVersionContainer";
 
-const useStyles = makeStyles(theme => {
-  return {
-    page: {
-      display: "flex",
-      flexDirection: "column"
-    },
-    element: {
-      marginTop: theme.spacing(1)
-    }
-  };
-});
+const styles = {
+  page: {
+    display: "flex",
+    flexDirection: "column"
+  },
+  element: {
+    marginTop: 1
+  }
+};
 
 const AboutSystemContainer = () => {
-  const classes = useStyles();
-
   const handleOpenInNewTab = url => event => {
     window.open(url, "_blank");
     event.preventDefault();
   };
 
   return (
-    <div className={classes.page}>
+    <Box sx={styles.page}>
       <AboutSystemComponent handleOpenInNewTab={handleOpenInNewTab} />
-      <div className={classes.element}>
+      <Box sx={styles.element}>
         <SystemVersionContainer />
-      </div>
-    </div>
+      </Box>
+    </Box>
   );
 };
+
 export default AboutSystemContainer;