diff --git a/client/src/common/components/Sidebar/Sidebar.jsx b/client/src/common/components/Sidebar/Sidebar.jsx
index d6184c0..e5f86da 100644
--- a/client/src/common/components/Sidebar/Sidebar.jsx
+++ b/client/src/common/components/Sidebar/Sidebar.jsx
@@ -2,11 +2,19 @@ import SidebarHeader from "@/common/components/Sidebar/components/SidebarHeader"
 import "./styles.sass";
 import SidebarContent from "@/common/components/Sidebar/components/SidebarContent";
 import SidebarFooter from "@/common/components/Sidebar/components/SidebarFooter";
+import {useRef} from "react";
 
-export const Sidebar = ({open, setOpen}) => (
-    <aside className={open ? "" : "sidebar-hidden"}>
-        <SidebarHeader setOpen={setOpen}/>
-        <SidebarContent />
-        <SidebarFooter />
-    </aside>
-)
\ No newline at end of file
+export const Sidebar = ({open, setOpen}) => {
+    const ref = useRef();
+
+    return (
+        <>
+            {open && <div className="background-overlay" ref={ref} onClick={() => setOpen(false)}/>}
+            <aside className={open ? "" : "sidebar-hidden"} ref={ref}>
+                <SidebarHeader setOpen={setOpen}/>
+                <SidebarContent/>
+                <SidebarFooter/>
+            </aside>
+        </>
+    );
+}
\ No newline at end of file