diff --git a/app/components/ConfirmModal.jsx b/app/components/ConfirmModal.jsx
index 4f1e1f8..e2c9fbf 100644
--- a/app/components/ConfirmModal.jsx
+++ b/app/components/ConfirmModal.jsx
@@ -23,8 +23,9 @@ export default function ConfirmModal({
   return (
     <Dialog open onOpenChange={handleOpenChange}>
       <DialogContent
+        overlayClassName="!z-[1200]"
         showCloseButton={false}
-        className="max-w-[400px] flex flex-col gap-5 p-6"
+        className="!z-[1210] max-w-[400px] flex flex-col gap-5 p-6"
       >
         <DialogHeader className="flex flex-row items-center gap-3 text-left">
           <TrashIcon width="20" height="20" className="shrink-0 text-[var(--danger)]" />
diff --git a/components/ui/dialog.jsx b/components/ui/dialog.jsx
index a99018f..6f58c3f 100644
--- a/components/ui/dialog.jsx
+++ b/components/ui/dialog.jsx
@@ -49,11 +49,12 @@ function DialogContent({
   className,
   children,
   showCloseButton = true,
+  overlayClassName,
   ...props
 }) {
   return (
     <DialogPortal data-slot="dialog-portal">
-      <DialogOverlay />
+      <DialogOverlay className={overlayClassName} />
       <DialogPrimitive.Content
         data-slot="dialog-content"
         className={cn(