diff --git a/package.json b/package.json
index 0c717c1..9ebe8f1 100644
--- a/package.json
+++ b/package.json
@@ -15,8 +15,6 @@
     "@fortawesome/fontawesome-svg-core": "^1.2.36",
     "@fortawesome/free-solid-svg-icons": "^5.15.4",
     "@fortawesome/react-fontawesome": "^0.1.19",
-    "@material-ui/core": "^4.12.4",
-    "@material-ui/lab": "^4.0.0-alpha.61",
     "@monaco-editor/react": "^4.3.1",
     "@mui/lab": "^5.0.0-alpha.110",
     "@mui/material": "^5.10.16",
diff --git a/src/components/Tutorial/Assessment.js b/src/components/Tutorial/Assessment.js
index a3131ac..4f95d59 100644
--- a/src/components/Tutorial/Assessment.js
+++ b/src/components/Tutorial/Assessment.js
@@ -21,7 +21,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import withStyles from '@mui/styles/withStyles';
 import remarkGfm from "remark-gfm";
 import remarkGemoji from "remark-gemoji";
-import { isWidthDown } from "@material-ui/core";
+import { isWidthDown } from "../../helpers/handleBreakpoints";
 
 
 // FIXME checkout https://mui.com/components/use-media-query/#migrating-from-withwidth
diff --git a/src/components/Tutorial/Builder/Hardware.js b/src/components/Tutorial/Builder/Hardware.js
index ea68429..41587ce 100644
--- a/src/components/Tutorial/Builder/Hardware.js
+++ b/src/components/Tutorial/Builder/Hardware.js
@@ -16,7 +16,7 @@ import ImageListItemBar from "@mui/material/ImageListItemBar";
 import FormHelperText from "@mui/material/FormHelperText";
 import FormLabel from "@mui/material/FormLabel";
 import * as Blockly from "blockly";
-import { isWidthDown } from "@material-ui/core";
+import { isWidthDown } from "../../../helpers/handleBreakpoints";
 
 // FIXME checkout https://mui.com/components/use-media-query/#migrating-from-withwidth
 const withWidth = () => (WrappedComponent) => (props) => <WrappedComponent {...props} width="xs" />;
diff --git a/src/components/Tutorial/Hardware.js b/src/components/Tutorial/Hardware.js
index 41bd285..bdbc1f3 100644
--- a/src/components/Tutorial/Hardware.js
+++ b/src/components/Tutorial/Hardware.js
@@ -15,7 +15,7 @@ import ImageListItemBar from "@mui/material/ImageListItemBar";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faExpandAlt } from "@fortawesome/free-solid-svg-icons";
 import * as Blockly from "blockly";
-import { isWidthDown } from "@material-ui/core";
+import { isWidthDown } from "../../helpers/handleBreakpoints";
 
 // FIXME checkout https://mui.com/components/use-media-query/#migrating-from-withwidth
 const withWidth = () => (WrappedComponent) => (props) => <WrappedComponent {...props} width="xs" />;
@@ -55,9 +55,9 @@ class Hardware extends Component {
   };
 
   render() {
-    var cols = isWidthDown("md", this.props.width)
-      ? isWidthDown("sm", this.props.width)
-        ? isWidthDown("xs", this.props.width)
+    var cols = isWidthDown("md", window.innerWidth)
+      ? isWidthDown("sm", window.innerWidth)
+        ? isWidthDown("xs", window.innerWidth)
           ? 2
           : 3
         : 4
diff --git a/src/components/Workspace/WorkspaceName.js b/src/components/Workspace/WorkspaceName.js
index 41f2bed..3f6e3ca 100644
--- a/src/components/Workspace/WorkspaceName.js
+++ b/src/components/Workspace/WorkspaceName.js
@@ -16,7 +16,7 @@ import Typography from "@mui/material/Typography";
 import { faPen } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import * as Blockly from "blockly/core";
-import { isWidthDown } from "@material-ui/core";
+import { isWidthDown } from "../../helpers/handleBreakpoints";
 
 // FIXME checkout https://mui.com/components/use-media-query/#migrating-from-withwidth
 const withWidth = () => (WrappedComponent) => (props) => <WrappedComponent {...props} width="xs" />;
diff --git a/src/components/Workspace/WorkspaceStats.js b/src/components/Workspace/WorkspaceStats.js
index 73ac423..807cc02 100644
--- a/src/components/Workspace/WorkspaceStats.js
+++ b/src/components/Workspace/WorkspaceStats.js
@@ -20,7 +20,7 @@ import {
   faEllipsisH,
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { isWidthDown } from "@material-ui/core";
+import { isWidthDown } from "../../helpers/handleBreakpoints";
 
 // FIXME checkout https://mui.com/components/use-media-query/#migrating-from-withwidth
 const withWidth = () => (WrappedComponent) => (props) => <WrappedComponent {...props} width="xs" />;
diff --git a/src/helpers/handleBreakpoints.js b/src/helpers/handleBreakpoints.js
new file mode 100644
index 0000000..45b70b5
--- /dev/null
+++ b/src/helpers/handleBreakpoints.js
@@ -0,0 +1,16 @@
+export const isWidthDown = (breakpoint, screenWidth) => {
+    switch (breakpoint) {
+        case "xs":
+            return screenWidth < 600;
+        case "sm":
+            return screenWidth < 900;
+        case "md":
+            return screenWidth < 1200;
+        case "lg":
+            return screenWidth < 1536;
+        case "xl":
+            return screenWidth >= 1920;
+        default:
+            throw new Error("Invalid breakpoint");
+    }
+}
\ No newline at end of file