diff --git a/ui/src/components/UI/Modals/ConfirmationModal.tsx b/ui/src/components/UI/Modals/ConfirmationModal.tsx
index 4e1971d51..0e6372a86 100644
--- a/ui/src/components/UI/Modals/ConfirmationModal.tsx
+++ b/ui/src/components/UI/Modals/ConfirmationModal.tsx
@@ -9,7 +9,6 @@ import {useCommonStyles} from "../../../helpers/commonStyle";
 
 interface ConfirmationModalProps {
     title?: string;
-    
     isOpen: boolean;
     onClose: () => void;
     onConfirm: () => void;
@@ -22,16 +21,21 @@ interface ConfirmationModalProps {
     titleColor?: string;
     img?: ReactElement;
     isLoading?: boolean;
+    className?: any;
 }
 
-const ConfirmationModal: React.FC<ConfirmationModalProps> = observer(({title, isOpen, onClose, onConfirm, confirmButtonText, closeButtonText, subContent, confirmDisabled = false, isWide, confirmButtonColor, titleColor, img, isLoading,children}) => {
+const ConfirmationModal: React.FC<ConfirmationModalProps> = observer(({title, isOpen, onClose, onConfirm, confirmButtonText,
+                                                                        closeButtonText, subContent, confirmDisabled = false, isWide,
+                                                                        confirmButtonColor, titleColor, img, isLoading,children,
+                                                                        className}) => {
     const classes = useCommonStyles();
     const confirmStyle = {width: 100, marginLeft: 20}
     return (
-        <CustomModal open={isOpen} onClose={onClose} disableBackdropClick={true} isWide={isWide}>
+        <CustomModal open={isOpen} onClose={onClose} disableBackdropClick={true} isWide={isWide} className={className}>
             <div className="confirmationHeader">
                 <div className="confirmationTitle" style={titleColor ? {color: titleColor} : {}}>{title ?? "CONFIRMATION"}</div>
                 <img src={iconClose} onClick={onClose} alt="close"/>
+                
             </div>
             <div className="confirmationText" style={img ? {display: "flex", alignItems: "center"} : {}}>
                 {img && <div style={{paddingRight: 20}}>
diff --git a/ui/src/components/UI/Modals/CustomModal.tsx b/ui/src/components/UI/Modals/CustomModal.tsx
index f6cd41042..b9ca05827 100644
--- a/ui/src/components/UI/Modals/CustomModal.tsx
+++ b/ui/src/components/UI/Modals/CustomModal.tsx
@@ -43,15 +43,21 @@ const CustomModal: React.FunctionComponent<CustomModalProps> = ({ open = false,
         onClose();
     }
 
-    return <Modal disableEnforceFocus open={open} onClose={(event, reason) => onModalClose(reason)}  className={`${classes.modal} ${className ?  className : ''}`}>
-        <div className={`${classes.modalContents} ${globals}`} >
-            <Fade in={open}>
-                <Box>
-                    {children}
-                </Box>
-            </Fade>
-        </div>
-    </Modal>
+    return <Modal disableEnforceFocus open={open} onClose={(event, reason) => onModalClose(reason)}
+                  className={`${classes.modal}`}     
+                  closeAfterTransition
+                  BackdropComponent={Backdrop}
+                  BackdropProps={{
+                      timeout: 500,
+                  }}>
+                <div className={`${classes.modalContents} ${globals} ${className ?  className : ''}`} >
+                    <Fade in={open}>
+                        <Box>
+                            {children}
+                        </Box>
+                    </Fade>
+                </div>
+            </Modal>
 }
 
 export default CustomModal;
\ No newline at end of file