diff --git a/frontend/src/components/ActionButtons.tsx b/frontend/src/components/ActionButtons.tsx
index 650c65e1..d3c1c7f0 100644
--- a/frontend/src/components/ActionButtons.tsx
+++ b/frontend/src/components/ActionButtons.tsx
@@ -38,7 +38,7 @@ export default function ActionButtons({
   };
 
   return (
-    <div className="absolute right-4 top-4 z-20">
+    <div className="fixed right-4 top-4 z-10">
       <div className={`flex items-center gap-2 sm:gap-4 ${className}`}>
         {showNewChat && (
           <button
diff --git a/frontend/src/modals/WrapperModal.tsx b/frontend/src/modals/WrapperModal.tsx
index 879696b8..d2ab8e4f 100644
--- a/frontend/src/modals/WrapperModal.tsx
+++ b/frontend/src/modals/WrapperModal.tsx
@@ -1,4 +1,5 @@
 import React, { useEffect, useRef } from 'react';
+import { createPortal } from 'react-dom';
 
 import Exit from '../assets/exit.svg';
 
@@ -45,7 +46,7 @@ export default function WrapperModal({
     };
   }, [close]);
 
-  return (
+  const modalContent = (
     <div className="fixed left-0 top-0 z-30 flex h-screen w-screen items-center justify-center bg-gray-alpha bg-opacity-50">
       <div
         ref={modalRef}
@@ -63,4 +64,6 @@ export default function WrapperModal({
       </div>
     </div>
   );
+
+  return createPortal(modalContent, document.body);
 }