diff --git a/src/states/Manage/pages/Sidebar/Sidebar.jsx b/src/states/Manage/pages/Sidebar/Sidebar.jsx
index 03fedf8..5c08b0c 100644
--- a/src/states/Manage/pages/Sidebar/Sidebar.jsx
+++ b/src/states/Manage/pages/Sidebar/Sidebar.jsx
@@ -4,28 +4,37 @@ import sidebar from "@/states/Manage/pages/pages.jsx";
 import {useNavigate, useParams} from "react-router-dom";
 import {getPage} from "@/states/Manage/Manage.jsx";
 
-export const Sidebar = () => {
+export const Sidebar = ({open, setOpen}) => {
     const navigate = useNavigate();
     const params = useParams();
 
+    const update = (path) => {
+        navigate(path.replace(":id", params.id));
+        setOpen(false);
+    }
+
     return (
-        <aside>
-            <div className="header" onClick={() => navigate("/")}>
-                <img src="/assets/images/logo192.png" alt="sheepstar"/>
-                <h1>Sheepstar</h1>
-            </div>
+        <>
+            {open && <div className="sidebar-overlay" onClick={() => setOpen(false)}/>}
+            <aside className={open ? "active" : ""}>
+                <div className="header" onClick={() => update("/")}>
+                    <img src="/assets/images/logo192.png" alt="sheepstar"/>
+                    <h1>Sheepstar</h1>
+                </div>
 
-            {sidebar.map((page) => {
-                const current = getPage(window.location.pathname);
+                {sidebar.map((page) => {
+                    const current = getPage(window.location.pathname);
 
-                return (
-                    <div className={"sidebar-item" + (current.path === page.path ? " item-active" : "")} key={page.name}
-                         onClick={() => navigate(page.path.replace(":id", params.id))}>
-                        <FontAwesomeIcon icon={page.icon} />
-                        <h1>{page.name}</h1>
-                    </div>
-                )
-            })}
-        </aside>
+                    return (
+                        <div className={"sidebar-item" + (current.path === page.path ? " item-active" : "")}
+                             key={page.name}
+                             onClick={() => update(page.path)}>
+                            <FontAwesomeIcon icon={page.icon}/>
+                            <h1>{page.name}</h1>
+                        </div>
+                    )
+                })}
+            </aside>
+        </>
     )
 }
\ No newline at end of file