diff --git a/code/frontend/src/components/Header.tsx b/code/frontend/src/components/Header.tsx
index 418d93d..e1b303a 100644
--- a/code/frontend/src/components/Header.tsx
+++ b/code/frontend/src/components/Header.tsx
@@ -28,7 +28,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) => (
@@ -51,7 +50,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 15aa0a6..faa245f 100644
--- a/code/frontend/src/components/header.css
+++ b/code/frontend/src/components/header.css
@@ -78,6 +78,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 1a987aa..c40f571 100644
--- a/code/frontend/src/index.tsx
+++ b/code/frontend/src/index.tsx
@@ -11,9 +11,7 @@ const root = ReactDOM.createRoot(
 root.render(
 	<React.StrictMode>
 		<StyledEngineProvider injectFirst>
-			<StyledEngineProvider injectFirst>
-				<App />
-			</StyledEngineProvider>
+			<App />
 		</StyledEngineProvider>
 	</React.StrictMode>
 );