diff --git a/assets/admin/components/ImageCropModal.tsx b/assets/admin/components/ImageCropModal.tsx
index 1b728e51..eed4ea11 100644
--- a/assets/admin/components/ImageCropModal.tsx
+++ b/assets/admin/components/ImageCropModal.tsx
@@ -1,4 +1,5 @@
 import { useCallback, useState } from 'react';
+import { createPortal } from 'react-dom';
 import Cropper, { type Area } from 'react-easy-crop';
 import { getCroppedImage } from '../lib/cropImage';
 
@@ -28,7 +29,7 @@ export default function ImageCropModal({ src, fileName, onCancel, onConfirm }: I
     }
   };
 
-  return (
+  return createPortal(
     <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4" dir="rtl">
       <div className="w-full max-w-md rounded-2xl bg-white dark:bg-gray-900 shadow-2xl overflow-hidden">
         <div className="flex items-center justify-between px-5 py-4 border-b border-slate-100 dark:border-gray-800">
@@ -70,6 +71,7 @@ export default function ImageCropModal({ src, fileName, onCancel, onConfirm }: I
           </div>
         </div>
       </div>
-    </div>
+    </div>,
+    document.body,
   );
 }