do injectfirst around app

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 (

code/frontend/src/components/header.css

@@ -56,6 +56,7 @@
 .drawer-list {
   background-color: #2f325e;
   min-height: 100vh;
+  min-width: 13rem;
 }
 
 .drawer-list-item {

code/frontend/src/index.tsx

@@ -3,13 +3,16 @@ 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
 );
 root.render(
 	<React.StrictMode>
+		<StyledEngineProvider injectFirst>
 			<App />
+		</StyledEngineProvider>
 	</React.StrictMode>
 );