diff --git a/frontend/src/components/Header.tsx b/frontend/src/components/Header.tsx
index 55b91ab4e..3f1ef601d 100644
--- a/frontend/src/components/Header.tsx
+++ b/frontend/src/components/Header.tsx
@@ -22,17 +22,35 @@ export default function Header() {
         setMobileMenuOpen(false)
       }
     }
+
+    const handleOutsideClick = (event) => {
+      const navbar = document.getElementById('navbar-sticky')
+      const sidebar = document.querySelector('.fixed.inset-y-0')
+      if (
+        mobileMenuOpen &&
+        navbar &&
+        !navbar.contains(event.target) &&
+        sidebar &&
+        !sidebar.contains(event.target)
+      ) {
+        setMobileMenuOpen(false)
+      }
+    }
+
     window.addEventListener('resize', handleResize)
+    window.addEventListener('click', handleOutsideClick)
+
     return () => {
       window.removeEventListener('resize', handleResize)
+      window.removeEventListener('click', handleOutsideClick)
     }
-  }, [])
+  }, [mobileMenuOpen])
 
   return (
     <header className="fixed inset-x-0 top-0 z-50 w-full max-w-[100vw] bg-owasp-blue shadow-md dark:bg-slate-800">
       <div className="flex h-16 w-full items-center px-4 max-md:justify-between" id="navbar-sticky">
         {/* Logo */}
-        <NavLink to="/">
+        <NavLink to="/" onClick={() => setMobileMenuOpen(false)}>
           <div className="flex h-full items-center">
             <img
               src={'/img/owasp_icon_white_sm.png'}
@@ -110,7 +128,7 @@ export default function Header() {
       >
         <div className="space-y-1 px-2 pb-3 pt-2">
           {/* Logo */}
-          <NavLink to="/">
+          <NavLink to="/" onClick={() => setMobileMenuOpen(false)}>
             <div className="flex h-full items-center">
               <img
                 src={'/img/owasp_icon_white_sm.png'}