diff --git a/client/src/App.jsx b/client/src/App.jsx
index 4fe1c62..c25b2b6 100644
--- a/client/src/App.jsx
+++ b/client/src/App.jsx
@@ -250,6 +250,17 @@ function App() {
     }
   }, []);
 
+  // Hook to hide the menu when user click elsewhere on the screen
+  useEffect(() => {
+    const canvas = document.getElementById("canvas");
+    canvas.addEventListener("click", () => {
+      console.log("clicked");
+      if (showMenu) {
+        setShowMenu(false);
+      }
+    })
+  }, [showMenu]);
+
   return (
     <div id="container">
       <Sidebar
diff --git a/client/src/components/Canvas.jsx b/client/src/components/Canvas.jsx
index 723f4c8..5f8b30f 100644
--- a/client/src/components/Canvas.jsx
+++ b/client/src/components/Canvas.jsx
@@ -11,6 +11,7 @@ function Canvas(props){
           className="h-full w-86vw"
           style={{backgroundColor: `${canvasColor}`}}
           ref={props.canvasRef}
+          id="canvas"
         ></canvas>
         {props.showMenu && <Menu></Menu>}
       </div>