diff --git a/components/shared/user-menu.tsx b/components/shared/user-menu.tsx
index ba375e7..ba615c0 100644
--- a/components/shared/user-menu.tsx
+++ b/components/shared/user-menu.tsx
@@ -1,5 +1,6 @@
 'use client'
 
+import { useRef } from 'react'
 import Link from 'next/link'
 import { Settings, Sun, Globe, LogOut } from 'lucide-react'
 import { logoutAction } from '@/actions/auth'
@@ -32,6 +33,7 @@ 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)
 
   return (
     <DropdownMenu>
@@ -100,16 +102,14 @@ export function UserMenu({ userId, username, email, roles }: UserMenuProps) {
 
         <DropdownMenuSeparator />
 
-        <form action={logoutAction}>
-          <DropdownMenuItem
-            render={
-              <button type="submit" className="w-full text-left cursor-pointer" />
-            }
-          >
-            <LogOut className="mr-2 h-4 w-4" />
-            <span>Uitloggen</span>
-          </DropdownMenuItem>
-        </form>
+        <DropdownMenuItem
+          onSelect={() => logoutFormRef.current?.requestSubmit()}
+          className="cursor-pointer"
+        >
+          <LogOut className="mr-2 h-4 w-4" />
+          <span>Uitloggen</span>
+        </DropdownMenuItem>
+        <form ref={logoutFormRef} action={logoutAction} className="hidden" />
       </DropdownMenuContent>
     </DropdownMenu>
   )