diff --git a/apps/web/src/components/PreviewModal.tsx b/apps/web/src/components/PreviewModal.tsx
index 9225e8cda..67d1f6e71 100644
--- a/apps/web/src/components/PreviewModal.tsx
+++ b/apps/web/src/components/PreviewModal.tsx
@@ -1,4 +1,5 @@
 import { useEffect, useMemo, useRef, useState, type ReactNode } from 'react';
+import { createPortal } from 'react-dom';
 import { useT } from '../i18n';
 import { copyToClipboard } from '../lib/copy-to-clipboard';
 import {
@@ -468,7 +469,7 @@ export function PreviewModal({
   const showTemplateShareMenu = !isCustomView || Boolean(shareTarget?.url);
   const canOpenTemplateShareMenu = canExportFiles || Boolean(previewShareUrl);
 
-  return (
+  const modalContent = (
     <div className="ds-modal-backdrop" role="dialog" aria-modal="true" aria-label={`${title} preview`}>
       <div className={`ds-modal ${fullscreen ? 'ds-modal-fullscreen' : ''}`}>
         <header className="ds-modal-header">
@@ -927,4 +928,6 @@ export function PreviewModal({
       </div>
     </div>
   );
+
+  return createPortal(modalContent, document.body);
 }