diff --git a/ui/src/components/UI/Modals/ConfirmationModal.tsx b/ui/src/components/UI/Modals/ConfirmationModal.tsx
index 0e6372a86..fe7b4bb9d 100644
--- a/ui/src/components/UI/Modals/ConfirmationModal.tsx
+++ b/ui/src/components/UI/Modals/ConfirmationModal.tsx
@@ -29,9 +29,9 @@ const ConfirmationModal: React.FC<ConfirmationModalProps> = observer(({title, is
                                                                         confirmButtonColor, titleColor, img, isLoading,children,
                                                                         className}) => {
     const classes = useCommonStyles();
-    const confirmStyle = {width: 100, marginLeft: 20}
+    const confirmStyle = {width: 100, marginLeft: 20}                                                                  
     return (
-        <CustomModal open={isOpen} onClose={onClose} disableBackdropClick={true} isWide={isWide} className={className}>
+        <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"/>
@@ -55,8 +55,6 @@ const ConfirmationModal: React.FC<ConfirmationModalProps> = observer(({title, is
                 </Button>
                 <Button style={confirmButtonColor ? {backgroundColor: confirmButtonColor,...confirmStyle} : {...confirmStyle}} 
                     className={classes.button} size={"small"}
-                    
-                    
                     onClick={onConfirm} 
                     disabled={confirmDisabled || isLoading} 
                     endIcon={isLoading && <img src={spinner} alt="spinner"/>}>{confirmButtonText ?? "YES"}
diff --git a/ui/src/components/UI/Modals/CustomModal.tsx b/ui/src/components/UI/Modals/CustomModal.tsx
index b9ca05827..f0fd0887b 100644
--- a/ui/src/components/UI/Modals/CustomModal.tsx
+++ b/ui/src/components/UI/Modals/CustomModal.tsx
@@ -10,8 +10,7 @@ const useStyles = makeStyles({
         justifyContent: "center"
     },
     modalContents: {
-        borderRadius: "5px",
-        
+        borderRadius: "5px",      
         outline: "none",
         minWidth: "300px",
         backgroundColor: "rgb(255, 255, 255)"
diff --git a/ui/src/helpers/commonStyle.ts b/ui/src/helpers/commonStyle.ts
index 6f4482bdd..7418520e4 100644
--- a/ui/src/helpers/commonStyle.ts
+++ b/ui/src/helpers/commonStyle.ts
@@ -41,7 +41,7 @@ export const useCommonStyles = makeStyles(() => ({
         top: '10%',
         left: '50%',
         transform: 'translate(-50%, 0%)',
-        width: '80vw',
+        width: "MAX(40vw, 600px)",
         bgcolor: 'background.paper',
         borderRadius: '5px',
         boxShadow: 24,