diff --git a/src/components/app-wrapper.js b/src/components/app-wrapper.js
index f6e5e7c22..b67e50a6d 100644
--- a/src/components/app-wrapper.js
+++ b/src/components/app-wrapper.js
@@ -87,8 +87,15 @@ let lightTheme = createTheme({
 
 lightTheme = createTheme(lightTheme, {
     palette: {
-        customButton: {
-            main: lightTheme.palette.text.primary,
+        cancelButtonColor: {
+            main: lightTheme.palette.text.secondary,
+        },
+    },
+    components: {
+        CancelButton: {
+            defaultProps: {
+                color: 'cancelButtonColor',
+            },
         },
     },
 });
@@ -134,8 +141,15 @@ let darkTheme = createTheme({
 
 darkTheme = createTheme(darkTheme, {
     palette: {
-        customButton: {
-            main: darkTheme.palette.text.primary,
+        cancelButtonColor: {
+            main: darkTheme.palette.text.secondary,
+        },
+    },
+    components: {
+        CancelButton: {
+            defaultProps: {
+                color: 'cancelButtonColor',
+            },
         },
     },
 });
diff --git a/src/components/dialogs/access-rights-dialog.js b/src/components/dialogs/access-rights-dialog.js
index c043bf035..92b6bd2fb 100644
--- a/src/components/dialogs/access-rights-dialog.js
+++ b/src/components/dialogs/access-rights-dialog.js
@@ -111,7 +111,7 @@ const AccessRightsDialog = ({
                 )}
             </DialogContent>
             <DialogActions>
-                <CancelButton color={'customButton'} onClick={handleClose} />
+                <CancelButton onClick={handleClose} />
                 <Button onClick={handleClick} variant="outlined">
                     <FormattedMessage id="edit" />
                 </Button>
diff --git a/src/components/dialogs/commons/custom-mui-dialog/custom-mui-dialog.tsx b/src/components/dialogs/commons/custom-mui-dialog/custom-mui-dialog.tsx
index 612534e19..d1c9c6872 100644
--- a/src/components/dialogs/commons/custom-mui-dialog/custom-mui-dialog.tsx
+++ b/src/components/dialogs/commons/custom-mui-dialog/custom-mui-dialog.tsx
@@ -93,10 +93,7 @@ const CustomMuiDialog: FunctionComponent<ICustomMuiDialog> = ({
                 </DialogTitle>
                 <DialogContent>{children}</DialogContent>
                 <DialogActions>
-                    <CancelButton
-                        color={'customButton'}
-                        onClick={handleCancel}
-                    />
+                    <CancelButton onClick={handleCancel} />
                     <SubmitButton
                         variant="outlined"
                         disabled={disabledSave}
diff --git a/src/components/dialogs/create-directory-dialog.js b/src/components/dialogs/create-directory-dialog.js
index 967c62319..7990cacc1 100644
--- a/src/components/dialogs/create-directory-dialog.js
+++ b/src/components/dialogs/create-directory-dialog.js
@@ -102,7 +102,7 @@ export const CreateDirectoryDialog = ({
                 {error !== '' && <Alert severity="error">{error}</Alert>}
             </DialogContent>
             <DialogActions>
-                <CancelButton color={'customButton'} onClick={handleClose} />
+                <CancelButton onClick={handleClose} />
                 <Button
                     disabled={!canCreate()}
                     onClick={handleClick}
diff --git a/src/components/dialogs/csv-import-filter-creation-dialog.js b/src/components/dialogs/csv-import-filter-creation-dialog.js
index 65e118d61..3072c2182 100644
--- a/src/components/dialogs/csv-import-filter-creation-dialog.js
+++ b/src/components/dialogs/csv-import-filter-creation-dialog.js
@@ -182,10 +182,7 @@ const CsvImportFilterCreationDialog = ({
                         </DialogContentText>
                     </DialogContent>
                     <DialogActions>
-                        <CancelButton
-                            color={'customButton'}
-                            onClick={handleCancelDialog}
-                        />
+                        <CancelButton onClick={handleCancelDialog} />
                         <Button
                             onClick={() => handleReplacePopupConfirmation()}
                         >
diff --git a/src/components/dialogs/delete-dialog.js b/src/components/dialogs/delete-dialog.js
index 1f6613d56..9770e2d1f 100644
--- a/src/components/dialogs/delete-dialog.js
+++ b/src/components/dialogs/delete-dialog.js
@@ -210,15 +210,11 @@ const DeleteDialog = ({
                 {error !== '' && <Alert severity="error">{error}</Alert>}
             </DialogContent>
             <DialogActions>
-                <CancelButton
-                    onClick={handleClose}
-                    variant="outlined"
-                    disabled={loadingState}
-                />
+                <CancelButton onClick={handleClose} disabled={loadingState} />
                 <Button
                     onClick={handleClick}
+                    variant="outlined"
                     disabled={loadingState}
-                    color={'customButton'}
                 >
                     {(loadingState && <CircularProgress size={24} />) || (
                         <FormattedMessage id="delete" />
diff --git a/src/components/dialogs/directory-selector.js b/src/components/dialogs/directory-selector.js
index 889eeef03..0321744b6 100644
--- a/src/components/dialogs/directory-selector.js
+++ b/src/components/dialogs/directory-selector.js
@@ -138,7 +138,6 @@ const DirectorySelector = (props) => {
             data={data}
             onlyLeaves={false}
             sortMethod={sortAlphabetically}
-            cancelButtonProps={{ color: 'customButton' }}
             {...props}
         />
     );
diff --git a/src/components/dialogs/rename-dialog.js b/src/components/dialogs/rename-dialog.js
index 55dc00f7c..ccdad5968 100644
--- a/src/components/dialogs/rename-dialog.js
+++ b/src/components/dialogs/rename-dialog.js
@@ -92,7 +92,7 @@ const RenameDialog = ({
                 {error && <Alert severity="error">{error}</Alert>}
             </DialogContent>
             <DialogActions>
-                <CancelButton color={'customButton'} onClick={handleClose} />
+                <CancelButton onClick={handleClose} />
                 <Button
                     onClick={handleClick}
                     disabled={!canRename()}
diff --git a/src/components/dialogs/replace-with-script-dialog.js b/src/components/dialogs/replace-with-script-dialog.js
index ecb48006d..251c3dbd4 100644
--- a/src/components/dialogs/replace-with-script-dialog.js
+++ b/src/components/dialogs/replace-with-script-dialog.js
@@ -49,8 +49,8 @@ const ReplaceWithScriptDialog = ({ id, open, onClose, onClick, title }) => {
                 </DialogContentText>
             </DialogContent>
             <DialogActions>
-                <CancelButton onClick={handleClose} variant="outlined" />
-                <Button onClick={handleClick} color={'customButton'}>
+                <CancelButton onClick={handleClose} />
+                <Button onClick={handleClick} variant="outlined">
                     <FormattedMessage id="validate" />
                 </Button>
             </DialogActions>
diff --git a/src/components/utils/popup-confirmation-dialog.js b/src/components/utils/popup-confirmation-dialog.js
index ab601c3e4..569617040 100644
--- a/src/components/utils/popup-confirmation-dialog.js
+++ b/src/components/utils/popup-confirmation-dialog.js
@@ -28,10 +28,7 @@ const PopupConfirmationDialog = ({
                 </DialogContentText>
             </DialogContent>
             <DialogActions>
-                <CancelButton
-                    color={'customButton'}
-                    onClick={() => setOpenConfirmationPopup(false)}
-                />
+                <CancelButton onClick={() => setOpenConfirmationPopup(false)} />
                 <Button onClick={handlePopupConfirmation} variant="outlined">
                     <FormattedMessage id="validate" />
                 </Button>
diff --git a/src/components/utils/rhf-inputs/ag-grid-table-rhf/csv-uploader/csv-uploader.js b/src/components/utils/rhf-inputs/ag-grid-table-rhf/csv-uploader/csv-uploader.js
index 341800899..b67131f1a 100644
--- a/src/components/utils/rhf-inputs/ag-grid-table-rhf/csv-uploader/csv-uploader.js
+++ b/src/components/utils/rhf-inputs/ag-grid-table-rhf/csv-uploader/csv-uploader.js
@@ -157,10 +157,7 @@ const CsvUploader = ({
                     </DialogContentText>
                 </DialogContent>
                 <DialogActions>
-                    <CancelButton
-                        color={'customButton'}
-                        onClick={handleCancelDialog}
-                    />
+                    <CancelButton onClick={handleCancelDialog} />
                     <Button onClick={() => handleReplacePopupConfirmation()}>
                         <FormattedMessage id="replace" />
                     </Button>
@@ -235,10 +232,7 @@ const CsvUploader = ({
                     </div>
                 </DialogContent>
                 <DialogActions>
-                    <CancelButton
-                        color={'customButton'}
-                        onClick={handleClose}
-                    />
+                    <CancelButton onClick={handleClose} />
                     <Button
                         variant="outlined"
                         onClick={() => handleOpenCSVConfirmationDataDialog()}