diff --git a/src/states/Dashboard/Dashboard.jsx b/src/states/Dashboard/Dashboard.jsx
index 8277a09..d4044ee 100644
--- a/src/states/Dashboard/Dashboard.jsx
+++ b/src/states/Dashboard/Dashboard.jsx
@@ -2,18 +2,22 @@ import {Box, Toolbar} from "@mui/material";
 import {Outlet} from "react-router-dom";
 import Header from "@/states/Dashboard/components/Header";
 import Sidebar from "@/states/Dashboard/components/Sidebar";
-
-const drawerWidth = 240;
+import {useState} from "react";
+import {ProjectProvider} from "@/states/Dashboard/contexts/Project";
 
 export const Dashboard = () => {
+    const [mobileOpen, setMobileOpen] = useState(false);
+
     return (
-        <Box sx={{display: "flex", overflow: "hidden"}}>
-            <Header />
-            <Sidebar />
-            <Box component="main" sx={{flexGrow: 1, p: 3, ml: {sm: `${drawerWidth}px`}}}>
-                <Toolbar/>
-                <Outlet />
+        <ProjectProvider>
+            <Box sx={{display: "flex", overflow: "hidden"}}>
+                <Header mobileOpen={mobileOpen} toggleOpen={() => setMobileOpen(current => !current)} />
+                <Sidebar mobileOpen={mobileOpen} toggleOpen={() => setMobileOpen(current => !current)} />
+                <Box component="main" sx={{ flexGrow: 1, p: 3, ml: { sm: "260px"} }}>
+                    <Toolbar/>
+                    <Outlet />
+                </Box>
             </Box>
-        </Box>
+        </ProjectProvider>
     )
 }
\ No newline at end of file