diff --git a/src/components/MessageDialog.tsx b/src/components/MessageDialog.tsx
index 893c38d93..16803c391 100644
--- a/src/components/MessageDialog.tsx
+++ b/src/components/MessageDialog.tsx
@@ -39,10 +39,7 @@ export default function MessageDialog({
             centered
             backdrop={attributes.staticBackdrop ? 'static' : 'true'}
         >
-            <Modal.Header
-                style={{ borderBottom: 'none' }}
-                closeButton={attributes.close != null}
-            >
+            <Modal.Header style={{ borderBottom: 'none' }} closeButton>
                 {attributes.title && (
                     <Modal.Title>
                         <strong>{attributes.title}</strong>
@@ -55,35 +52,51 @@ export default function MessageDialog({
                 </Modal.Body>
             )}
             <Modal.Footer style={{ borderTop: 'none' }}>
-                {attributes.close && (
-                    <Button
-                        variant={`outline-${
-                            attributes.close?.variant ?? 'secondary'
-                        }`}
-                        onClick={props.onHide}
-                        style={{
-                            padding: '6px 3em',
-                            marginRight: '20px',
-                        }}
-                    >
-                        {attributes.close?.text ?? constants.OK}
-                    </Button>
-                )}
-                {attributes.proceed && (
-                    <Button
-                        variant={`outline-${
-                            attributes.proceed?.variant ?? 'primary'
-                        }`}
-                        onClick={() => {
-                            attributes.proceed.action();
-                            props.onHide();
-                        }}
-                        style={{ padding: '6px 3em', marginRight: '20px' }}
-                        disabled={attributes.proceed.disabled}
-                    >
-                        {attributes.proceed.text}
-                    </Button>
-                )}
+                <div
+                    style={{
+                        display: 'flex',
+                        flexWrap: 'wrap',
+                    }}
+                >
+                    {attributes.close && (
+                        <Button
+                            variant={`outline-${
+                                attributes.close?.variant ?? 'secondary'
+                            }`}
+                            onClick={props.onHide}
+                            style={{
+                                padding: '6px 3em',
+                                margin: '0 20px',
+                                marginBottom: '20px',
+                                flex: 1,
+                                whiteSpace: 'nowrap',
+                            }}
+                        >
+                            {attributes.close?.text ?? constants.OK}
+                        </Button>
+                    )}
+                    {attributes.proceed && (
+                        <Button
+                            variant={`outline-${
+                                attributes.proceed?.variant ?? 'primary'
+                            }`}
+                            onClick={() => {
+                                attributes.proceed.action();
+                                props.onHide();
+                            }}
+                            style={{
+                                padding: '6px 3em',
+                                margin: '0 20px',
+                                marginBottom: '20px',
+                                flex: 1,
+                                whiteSpace: 'nowrap',
+                            }}
+                            disabled={attributes.proceed.disabled}
+                        >
+                            {attributes.proceed.text}
+                        </Button>
+                    )}
+                </div>
             </Modal.Footer>
         </Modal>
     );
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
index 53bf22579..2b5f918ea 100644
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -90,17 +90,14 @@ const GlobalStyles = createGlobalStyle`
     .pswp__img {
         object-fit: contain;
     }
-    .modal-90w{
-        width:90vw;
-        max-width:960px!important;
-    }
+
     .modal {
         z-index: 2000;
     }
     .modal-dialog-centered {
-        min-height: -webkit-calc(90% - 3.5rem);
-        min-height: -moz-calc(90% - 3.5rem);
-        min-height: calc(90% - 3.5rem);
+        min-height: -webkit-calc(80% - 3.5rem);
+        min-height: -moz-calc(80% - 3.5rem);
+        min-height: calc(80% - 3.5rem);
     }
     .modal .modal-header, .modal .modal-footer {
         border-color: #444 !important;
@@ -126,6 +123,11 @@ const GlobalStyles = createGlobalStyle`
         background-color:#202020 !important;
         color:#aaa;
     }
+    .modal-dialog{
+        max-width:960px!important;
+        width:90%;
+        margin:5% auto;
+    }
     .download-btn{
         margin-top:10px;
         width: 25px;
@@ -176,10 +178,6 @@ const GlobalStyles = createGlobalStyle`
     .alert-primary {
         background-color: #c4ffd6;
     }
-    .ente-modal{
-        width: 500px;
-        max-width:100%;
-    } 
     .bm-burger-button {
         position: fixed;
         width: 24px;
diff --git a/src/pages/gallery/components/ChoiceModal.tsx b/src/pages/gallery/components/ChoiceModal.tsx
index e0b2b8b65..26c2c03a3 100644
--- a/src/pages/gallery/components/ChoiceModal.tsx
+++ b/src/pages/gallery/components/ChoiceModal.tsx
@@ -1,3 +1,4 @@
+import MessageDialog from 'components/MessageDialog';
 import React from 'react';
 import { Button, Modal } from 'react-bootstrap';
 import constants from 'utils/strings/constants';
@@ -15,64 +16,56 @@ function ChoiceModal({
     ...props
 }: Props) {
     return (
-        <Modal
+        <MessageDialog
             {...props}
-            size="lg"
-            aria-labelledby="contained-modal-title-vcenter"
-            centered
+            attributes={{ title: constants.MULTI_FOLDER_UPLOAD }}
         >
-            <Modal.Body style={{ padding: '24px' }}>
-                <Modal.Header
-                    style={{
-                        borderColor: 'rgb(16, 176, 2)',
-                        fontSize: '20px',
-                        marginBottom: '20px',
-                        border: 'none',
+            <p>{constants.UPLOAD_STRATEGY_CHOICE}</p>
+            <div
+                style={{
+                    display: 'flex',
+                    flexWrap: 'wrap',
+                }}
+            >
+                <Button
+                    variant="outline-success"
+                    onClick={() => {
+                        props.onHide();
+                        showCollectionCreateModal();
+                    }}
+                    style={{
+                        padding: '12px 24px',
+                        flex: 2,
+                        whiteSpace: 'nowrap',
                     }}
-                    id="contained-modal-title-vcenter"
-                    closeButton
                 >
-                    {constants.UPLOAD_STRATEGY_CHOICE}
-                </Modal.Header>
+                    {constants.UPLOAD_STRATEGY_SINGLE_COLLECTION}
+                </Button>
                 <div
                     style={{
-                        display: 'flex',
-                        justifyContent: 'space-around',
-                        paddingBottom: '20px',
-                        alignItems: 'center',
+                        flex: 1,
+                        textAlign: 'center',
+                        minWidth: '100px',
+                        margin: '2% auto',
                     }}
                 >
-                    <Button
-                        variant="outline-success"
-                        onClick={() => {
-                            props.onHide();
-                            showCollectionCreateModal();
-                        }}
-                        style={{
-                            padding: '12px',
-                            paddingLeft: '24px',
-                            paddingRight: '24px',
-                        }}
-                    >
-                        {constants.UPLOAD_STRATEGY_SINGLE_COLLECTION}
-                    </Button>
                     <strong>{constants.OR}</strong>
-                    <Button
-                        variant="outline-success"
-                        onClick={() =>
-                            uploadFiles(UPLOAD_STRATEGY.COLLECTION_PER_FOLDER)
-                        }
-                        style={{
-                            padding: '12px',
-                            paddingLeft: '24px',
-                            paddingRight: '24px',
-                        }}
-                    >
-                        {constants.UPLOAD_STRATEGY_COLLECTION_PER_FOLDER}
-                    </Button>
                 </div>
-            </Modal.Body>
-        </Modal>
+                <Button
+                    variant="outline-success"
+                    onClick={() =>
+                        uploadFiles(UPLOAD_STRATEGY.COLLECTION_PER_FOLDER)
+                    }
+                    style={{
+                        padding: '12px 24px',
+                        flex: 2,
+                        whiteSpace: 'nowrap',
+                    }}
+                >
+                    {constants.UPLOAD_STRATEGY_COLLECTION_PER_FOLDER}
+                </Button>
+            </div>
+        </MessageDialog>
     );
 }
 export default ChoiceModal;
diff --git a/src/pages/gallery/components/CollectionSelector.tsx b/src/pages/gallery/components/CollectionSelector.tsx
index d62427899..c4b308fe9 100644
--- a/src/pages/gallery/components/CollectionSelector.tsx
+++ b/src/pages/gallery/components/CollectionSelector.tsx
@@ -71,18 +71,14 @@ function CollectionSelector({
     );
 
     return (
-        <Modal
-            {...props}
-            dialogClassName="modal-90w"
-            style={{ maxWidth: '100%' }}
-        >
+        <Modal {...props} size="xl" centered>
             <Modal.Header closeButton>
                 <Modal.Title>{attributes.title}</Modal.Title>
             </Modal.Header>
             <Modal.Body
                 style={{
                     display: 'flex',
-                    justifyContent: 'flex-start',
+                    justifyContent: 'space-around',
                     flexWrap: 'wrap',
                 }}
             >
diff --git a/src/pages/gallery/components/PlanSelector.tsx b/src/pages/gallery/components/PlanSelector.tsx
index 3e78a0caa..fa4b54f97 100644
--- a/src/pages/gallery/components/PlanSelector.tsx
+++ b/src/pages/gallery/components/PlanSelector.tsx
@@ -57,7 +57,7 @@ function PlanSelector(props: Props) {
         );
     };
     useEffect(() => {
-        if (!plans) {
+        if (!plans && props.modalView) {
             const main = async () => {
                 props.setLoading(true);
                 await billingService.updatePlans();
@@ -65,7 +65,7 @@ function PlanSelector(props: Props) {
             };
             main();
         }
-    });
+    }, [props.modalView]);
 
     async function onPlanSelect(plan: Plan) {
         if (
@@ -157,7 +157,7 @@ function PlanSelector(props: Props) {
         <Modal
             show={props.modalView}
             onHide={props.closeModal}
-            dialogClassName="modal-90w"
+            size="xl"
             centered
             backdrop={hasPaidSubscription(subscription) ? 'true' : `static`}
         >
@@ -207,8 +207,7 @@ function PlanSelector(props: Props) {
                         justifyContent: 'space-around',
                         flexWrap: 'wrap',
                         minHeight: '212px',
-                        marginTop: '24px',
-                        marginBottom: '36px',
+                        margin: '24px 0',
                     }}
                 >
                     {plans && PlanIcons}
diff --git a/src/pages/gallery/components/UploadProgress.tsx b/src/pages/gallery/components/UploadProgress.tsx
index 8ea457e6d..bf1061fc5 100644
--- a/src/pages/gallery/components/UploadProgress.tsx
+++ b/src/pages/gallery/components/UploadProgress.tsx
@@ -29,13 +29,11 @@ export default function UploadProgress(props: Props) {
                     ? () => null
                     : props.closeModal
             }
-            size="lg"
             aria-labelledby="contained-modal-title-vcenter"
             centered
             backdrop={
                 props.uploadStage !== UPLOAD_STAGES.FINISH ? 'static' : 'true'
             }
-            dialogClassName="ente-modal"
         >
             <Modal.Body>
                 <div
diff --git a/src/utils/strings/englishConstants.tsx b/src/utils/strings/englishConstants.tsx
index 9859881c8..ec1914f08 100644
--- a/src/utils/strings/englishConstants.tsx
+++ b/src/utils/strings/englishConstants.tsx
@@ -110,6 +110,7 @@ const englishConstants = {
     DELETE_FILE_MESSAGE: 'sure you want to delete selected files?',
     DELETE_FILE: 'delete files',
     DELETE: 'delete',
+    MULTI_FOLDER_UPLOAD: 'choose upload strategy',
     UPLOAD_STRATEGY_CHOICE:
         'you are uploading multiple folders, would you like us to create',
     UPLOAD_STRATEGY_SINGLE_COLLECTION: 'a single album for everything',