diff --git a/src/components/LargeDrawer.tsx b/src/components/LargeDrawer.tsx
index 07cf9b510..329ae53ff 100644
--- a/src/components/LargeDrawer.tsx
+++ b/src/components/LargeDrawer.tsx
@@ -1,4 +1,4 @@
-import { Drawer } from "antd";
+import { Drawer } from "@mui/material";
 import React from "react";
 import { useAppSelector } from "../store/store";
 import colors from "../styles/colors";
@@ -14,15 +14,18 @@ const LargeDrawer = ({
         <Drawer
             open={open}
             onClose={onClose}
-            width={vw?.sm ? "100%" : "60%"}
-            height={vw?.sm ? "85%" : "100%"}
-            placement={vw?.sm ? "bottom" : "right"}
-            bodyStyle={{ padding: 0 }}
-            drawerStyle={{
-                backgroundColor,
+            anchor={vw?.sm ? "bottom" : "right"}
+            variant="temporary"
+            keepMounted={false}
+            sx={{
+                "& .MuiDrawer-paper": {
+                    width: vw?.sm ? "100%" : "60%",
+                    height: vw?.sm ? "85%" : "100%",
+                    backgroundColor,
+                    padding: "0",
+
+                }
             }}
-            closable={false}
-            destroyOnClose
         >
             {children}
         </Drawer>
diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx
index 8bda057ea..156679b08 100644
--- a/src/components/Sidebar.tsx
+++ b/src/components/Sidebar.tsx
@@ -1,4 +1,4 @@
-import { Drawer } from "antd";
+import { Drawer } from "@mui/material";
 import React from "react";
 import { useDispatch } from "react-redux";
 import actions from "../store/actions";
@@ -24,13 +24,15 @@ const Sidebar = () => {
         <Drawer
             open={!menuCollapsed}
             onClose={() => dispatch(actions.closeSideMenu())}
-            width="17rem"
-            placement="left"
-            bodyStyle={{ padding: 0 }}
-            drawerStyle={{
-                backgroundColor: colors.lightNeutral,
+            anchor="left"
+            variant="temporary"
+            sx={{
+                "& .MuiDrawer-paper": {
+                    width: "17rem",
+                    padding: "0",
+                    backgroundColor: colors.lightNeutral,
+                }
             }}
-            closable={false}
         >
             <div
                 style={{