diff --git a/frontend/src/components/contacts/ContactFolderTree.tsx b/frontend/src/components/contacts/ContactFolderTree.tsx
index 05935e4..3cc57ee 100644
--- a/frontend/src/components/contacts/ContactFolderTree.tsx
+++ b/frontend/src/components/contacts/ContactFolderTree.tsx
@@ -1,4 +1,5 @@
 import React, { useState, useEffect, useRef, useCallback } from 'react';
+import { createPortal } from 'react-dom';
 import clsx from 'clsx';
 import { useTranslation } from 'react-i18next';
 import {
@@ -100,10 +101,10 @@ function FolderDropdown({
   const left = Math.max(4, Math.min(state.anchorRect.right - 160, window.innerWidth - 170));
   const maxHeight = Math.min(300, window.innerHeight - top - 8);
 
-  return (
+  return createPortal(
     <div
       ref={ref}
-      className="fixed z-50 bg-white border border-secondary-200 rounded-lg shadow-lg py-1 min-w-[160px]"
+      className="fixed z-[9999] bg-white border border-secondary-200 rounded-lg shadow-lg py-1 min-w-[160px]"
       style={{ top, left, maxHeight: maxHeight > 0 ? maxHeight : undefined, overflowY: 'auto' }}
     >
       {items.map((item, i) => (
@@ -119,7 +120,8 @@ function FolderDropdown({
           {item.label}
         </button>
       ))}
-    </div>
+    </div>,
+    document.body
   );
 }