diff --git a/code/frontend/src/components/Header.tsx b/code/frontend/src/components/Header.tsx
index 1b3c1a2..9271c67 100644
--- a/code/frontend/src/components/Header.tsx
+++ b/code/frontend/src/components/Header.tsx
@@ -31,7 +31,6 @@ function Header() {
   const routerLinksList = ["/","/createpost","/profile","/about","/"]
 
   const DrawerList = (
-    <StyledEngineProvider injectFirst>
     <Box role="menu" onClick={() => setIsOpen(false)}>
       <List className="drawer-list">
         {["Feed", "Create Post", "Profile", "About Us"].map((text, index) => (
@@ -54,7 +53,6 @@ function Header() {
           </ListItem>
       </List>
     </Box>
-    </StyledEngineProvider>
   );
 
   return (
diff --git a/code/frontend/src/components/header.css b/code/frontend/src/components/header.css
index f05f3b9..1f0f7ea 100644
--- a/code/frontend/src/components/header.css
+++ b/code/frontend/src/components/header.css
@@ -56,6 +56,7 @@
 .drawer-list {
   background-color: #2f325e;
   min-height: 100vh;
+  min-width: 13rem;
 }
 
 .drawer-list-item {
diff --git a/code/frontend/src/index.tsx b/code/frontend/src/index.tsx
index ccbac81..c40f571 100644
--- a/code/frontend/src/index.tsx
+++ b/code/frontend/src/index.tsx
@@ -3,14 +3,17 @@ import ReactDOM from "react-dom/client";
 import "./index.css";
 import App from "./App";
 import reportWebVitals from "./reportWebVitals";
+import { StyledEngineProvider } from "@mui/material";
 
 const root = ReactDOM.createRoot(
-  document.getElementById("root") as HTMLElement
+	document.getElementById("root") as HTMLElement
 );
 root.render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>
+	<React.StrictMode>
+		<StyledEngineProvider injectFirst>
+			<App />
+		</StyledEngineProvider>
+	</React.StrictMode>
 );
 
 // If you want to start measuring performance in your app, pass a function