diff --git a/WebSite/src/App.tsx b/WebSite/src/App.tsx
index a961289..ea15097 100644
--- a/WebSite/src/App.tsx
+++ b/WebSite/src/App.tsx
@@ -226,6 +226,20 @@ export default function App() {
   const selectedDataset = libraryData.find(item => item.id === selectedLibraryId) || libraryData[0];
   const selectedInputDir = selectedDataset?.dicomPath || '';
 
+  useEffect(() => {
+    if (!activeUserMenu) return;
+
+    const closeUserMenuOnOutsideClick = (event: PointerEvent) => {
+      const target = event.target as HTMLElement | null;
+      if (!target?.closest('[data-user-menu-root="true"]')) {
+        setActiveUserMenu(null);
+      }
+    };
+
+    document.addEventListener('pointerdown', closeUserMenuOnOutsideClick);
+    return () => document.removeEventListener('pointerdown', closeUserMenuOnOutsideClick);
+  }, [activeUserMenu]);
+
   const showToast = (message: string) => {
     setToastMessage(message);
     setTimeout(() => setToastMessage(""), 3000);
@@ -1073,7 +1087,7 @@ export default function App() {
                     
                     <div className="flex items-center gap-4">
                       {currentUser?.role === 'admin' || u.id === currentUser?.id ? (
-                        <div className="relative">
+                        <div className="relative" data-user-menu-root="true">
                           <button 
                             onClick={() => setActiveUserMenu(activeUserMenu === u.id ? null : u.id)}
                             className={`p-3 rounded-2xl transition-all ${activeUserMenu === u.id ? 'bg-blue-600 text-white shadow-lg' : 'text-slate-300 hover:text-blue-600 hover:bg-blue-50'}`}