diff --git a/components/shared/user-menu.tsx b/components/shared/user-menu.tsx
index 07d5b38..b628476 100644
--- a/components/shared/user-menu.tsx
+++ b/components/shared/user-menu.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import { useRef } from 'react'
+import { useTransition } from 'react'
 import Link from 'next/link'
 import { Settings, Sun, Globe, LogOut } from 'lucide-react'
 import { logoutAction } from '@/actions/auth'
@@ -33,14 +33,19 @@ export function UserMenu({ userId, username, email, roles }: UserMenuProps) {
   const initials = username.slice(0, 2).toUpperCase()
   const roleLabels = roles.map((r) => ROLE_LABELS[r]).filter(Boolean)
   const subtitle = email?.trim() ? email.trim() : 'Lokaal account'
-  const logoutFormRef = useRef<HTMLFormElement>(null)
+  const [pendingLogout, startLogout] = useTransition()
+
+  // Server Action direct aanroepen — geen form/ref-dance. Eerdere implementatie
+  // gebruikte een hidden form binnen DropdownMenuContent; die unmount op
+  // onSelect en in deze base-ui-versie kwam de submit niet door.
+  function handleLogout() {
+    startLogout(async () => {
+      await logoutAction()
+    })
+  }
 
   return (
-    <>
-      {/* Form buiten DropdownMenuContent — die unmount op onSelect waardoor de ref
-          null wordt voordat requestSubmit() vuurt. */}
-      <form ref={logoutFormRef} action={logoutAction} className="hidden" />
-      <DropdownMenu>
+    <DropdownMenu>
         <DropdownMenuTrigger
         className="rounded-full focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 focus-visible:ring-offset-background"
         aria-label="Accountmenu openen"
@@ -107,14 +112,15 @@ export function UserMenu({ userId, username, email, roles }: UserMenuProps) {
         <DropdownMenuSeparator />
 
         <DropdownMenuItem
-          onSelect={() => logoutFormRef.current?.requestSubmit()}
+          onClick={handleLogout}
+          onSelect={handleLogout}
+          disabled={pendingLogout}
           className="cursor-pointer"
         >
           <LogOut className="mr-2 h-4 w-4" />
-          <span>Uitloggen</span>
+          <span>{pendingLogout ? 'Uitloggen…' : 'Uitloggen'}</span>
         </DropdownMenuItem>
       </DropdownMenuContent>
-      </DropdownMenu>
-    </>
+    </DropdownMenu>
   )
 }