diff --git a/web/src/components/ui/modal/modal.tsx b/web/src/components/ui/modal/modal.tsx
index 93845d088..a3f6d06fe 100644
--- a/web/src/components/ui/modal/modal.tsx
+++ b/web/src/components/ui/modal/modal.tsx
@@ -31,6 +31,7 @@ export interface ModalProps {
   cancelButtonClassName?: string;
   disabled?: boolean;
   style?: React.CSSProperties;
+  zIndex?: number;
 }
 export interface ModalType extends FC<ModalProps> {
   show: typeof modalIns.show;
@@ -63,6 +64,7 @@ const Modal: ModalType = ({
   cancelButtonClassName,
   disabled = false,
   style,
+  zIndex = 50,
 }) => {
   const sizeClasses = {
     small: 'max-w-md',
@@ -172,6 +174,7 @@ const Modal: ModalType = ({
         <DialogPrimitive.Overlay
           className="fixed inset-0 z-[1000] bg-bg-card backdrop-blur-[1px] flex items-center justify-center p-4"
           onClick={() => maskClosable && onOpenChange?.(false)}
+          style={{ zIndex: zIndex }}
         >
           <DialogPrimitive.Content
             className={cn(
diff --git a/web/src/hooks/common-hooks.tsx b/web/src/hooks/common-hooks.tsx
index 7ae9bc017..e7f090865 100644
--- a/web/src/hooks/common-hooks.tsx
+++ b/web/src/hooks/common-hooks.tsx
@@ -102,6 +102,7 @@ export const useShowDeleteConfirm = () => {
           style: {
             width: '450px',
           },
+          zIndex: 1000,
           okButtonClassName:
             'bg-state-error text-white hover:bg-state-error hover:text-white',
           onOk: async () => {