diff --git a/packages/yoroi-extension/app/components/notice-board/NoticeBoard.js b/packages/yoroi-extension/app/components/notice-board/NoticeBoard.js
index fa79ea6bae..e2c0e0dae6 100644
--- a/packages/yoroi-extension/app/components/notice-board/NoticeBoard.js
+++ b/packages/yoroi-extension/app/components/notice-board/NoticeBoard.js
@@ -4,10 +4,7 @@ import type { Node } from 'react';
 import { intlShape } from 'react-intl';
 import moment from 'moment';
 import { observer } from 'mobx-react';
-import classnames from 'classnames';
-import { Button } from 'react-polymorph/lib/components/Button';
-import { ButtonSkin } from 'react-polymorph/lib/skins/simple/ButtonSkin';
-
+import { LoadingButton } from '@mui/lab';
 import Notice from '../../domain/Notice';
 import NoticeBlock from './NoticeBlock';
 import globalMessages from '../../i18n/global-messages';
@@ -19,7 +16,7 @@ type Props = {|
   +loadedNotices: Array<Notice>,
   +onLoadMore: void => Promise<void>,
   +isLoading: boolean,
-  +hasMoreToLoad: boolean
+  +hasMoreToLoad: boolean,
 |};
 
 const DATE_FORMAT = 'YYYY-MM-DD';
@@ -33,7 +30,7 @@ type NoticesByDate = {|
 
 @observer
 export default class NoticeBoard extends Component<Props> {
-  static contextTypes: {|intl: $npm$ReactIntl$IntlFormat|} = { intl: intlShape.isRequired };
+  static contextTypes: {| intl: $npm$ReactIntl$IntlFormat |} = { intl: intlShape.isRequired };
   localizedDateFormat: string = 'MM/DD/YYYY';
 
   // eslint-disable-next-line camelcase
@@ -94,11 +91,6 @@ export default class NoticeBoard extends Component<Props> {
     } = this.props;
     const noticeGroup = this.groupNoticesByDay(loadedNotices);
 
-    const buttonClasses = classnames([
-      'primary',
-      styles.loadMoreNoticesButton,
-    ]);
-
     return (
       <div className={styles.component}>
         <div className={styles.notices}>
@@ -106,7 +98,7 @@ export default class NoticeBoard extends Component<Props> {
             <div className={styles.group} key={group.strDate}>
               <div className={styles.groupDate}>{this.localizedDate(group)}</div>
               <div>
-                {group.notices.map((notice) => (
+                {group.notices.map(notice => (
                   <NoticeBlock
                     key={`${group.strDate}-${notice.id}`}
                     notice={notice}
@@ -117,15 +109,16 @@ export default class NoticeBoard extends Component<Props> {
             </div>
           ))}
         </div>
-        {hasMoreToLoad &&
-          <Button
-            disabled={isLoading}
-            className={buttonClasses}
-            label={intl.formatMessage(globalMessages.loadMoreButtonLabel)}
+        {hasMoreToLoad && (
+          <LoadingButton
+            sx={{ width: '287px' }}
+            variant="primary"
             onClick={onLoadMore}
-            skin={ButtonSkin}
-          />
-        }
+            disabled={isLoading}
+          >
+            {intl.formatMessage(globalMessages.loadMoreButtonLabel)}
+          </LoadingButton>
+        )}
       </div>
     );
   }
diff --git a/packages/yoroi-extension/app/components/notice-board/NoticeBoard.scss b/packages/yoroi-extension/app/components/notice-board/NoticeBoard.scss
index 94eee1083b..4ad21d55f4 100644
--- a/packages/yoroi-extension/app/components/notice-board/NoticeBoard.scss
+++ b/packages/yoroi-extension/app/components/notice-board/NoticeBoard.scss
@@ -16,8 +16,4 @@
       }
     }
   }
-  .loadMoreNoticesButton {
-    display: block !important;
-    width: 287px;
-  }
 }
\ No newline at end of file
diff --git a/packages/yoroi-extension/app/components/profile/complexity-level/ComplexityLevelForm.js b/packages/yoroi-extension/app/components/profile/complexity-level/ComplexityLevelForm.js
index a1b0675690..2d3c425821 100644
--- a/packages/yoroi-extension/app/components/profile/complexity-level/ComplexityLevelForm.js
+++ b/packages/yoroi-extension/app/components/profile/complexity-level/ComplexityLevelForm.js
@@ -8,8 +8,7 @@ import classnames  from 'classnames';
 import BeginnerLevel from '../../../assets/images/complexity-level/beginner-level.inline.svg';
 import AdvancedLevel from '../../../assets/images/complexity-level/advanced-level.inline.svg';
 import LocalizableError from '../../../i18n/LocalizableError';
-import { Button } from 'react-polymorph/lib/components/Button';
-import { ButtonSkin } from 'react-polymorph/lib/skins/simple/ButtonSkin';
+import { LoadingButton } from '@mui/lab';
 import { ComplexityLevels } from '../../../types/complexityLevelType';
 import type { ComplexityLevelType } from '../../../types/complexityLevelType';
 
@@ -78,13 +77,6 @@ class ComplexityLevel extends Component<Props> {
       }
     ];
 
-    const buttonClasses = classnames([
-      'secondary',
-      isSubmitting ?
-        styles.submitButtonSpinning :
-        styles.submitButton
-    ]);
-
     return (
       <>
         <div className={styles.component}>
@@ -111,13 +103,14 @@ class ComplexityLevel extends Component<Props> {
                     <h3>{level.name}</h3>
                     <p>{level.description}</p>
                   </div>
-                  <Button
-                    label={intl.formatMessage(messages.labelChoose)}
-                    className={buttonClasses}
-                    disabled={isSubmitting || (complexityLevel === level.key)}
+                  <LoadingButton
+                    variant="secondary"
+                    loading={isSubmitting}
+                    disabled={(complexityLevel === level.key)}
                     onClick={() => this.props.onSubmit(level.key)}
-                    skin={ButtonSkin}
-                  />
+                  >
+                    {intl.formatMessage(messages.labelChoose)}
+                  </LoadingButton>
                 </div>
               </div>
             ))
diff --git a/packages/yoroi-extension/app/components/profile/complexity-level/ComplexityLevelForm.scss b/packages/yoroi-extension/app/components/profile/complexity-level/ComplexityLevelForm.scss
index a31746bc41..ae76c6828b 100644
--- a/packages/yoroi-extension/app/components/profile/complexity-level/ComplexityLevelForm.scss
+++ b/packages/yoroi-extension/app/components/profile/complexity-level/ComplexityLevelForm.scss
@@ -81,22 +81,12 @@
         line-height: 1.25rem;
       }
     }
-    .submitButton,
-    .submitButtonSpinning {
-      display: block !important;
-      margin: 0;
-      width: 100%;
-    }
-    
-    .submitButtonSpinning {
-      @include loading-spinner("../../../assets/images/spinner-light.svg");
-    }
-    
+
     .error {
       @include error-message;
       text-align: center;
       margin-bottom: 1rem;
     }
-    
+
   }
 }
\ No newline at end of file
diff --git a/packages/yoroi-extension/app/components/profile/language-selection/LanguageSelectionForm.js b/packages/yoroi-extension/app/components/profile/language-selection/LanguageSelectionForm.js
index 9233a39bdb..c482b8faa1 100644
--- a/packages/yoroi-extension/app/components/profile/language-selection/LanguageSelectionForm.js
+++ b/packages/yoroi-extension/app/components/profile/language-selection/LanguageSelectionForm.js
@@ -1,11 +1,9 @@
 // @flow
 import { Component } from 'react';
 import type { Node } from 'react';
-import classnames from 'classnames';
 import { observer } from 'mobx-react';
 import { Select } from 'react-polymorph/lib/components/Select';
-import { Button } from 'react-polymorph/lib/components/Button';
-import { ButtonSkin } from 'react-polymorph/lib/skins/simple/ButtonSkin';
+import { LoadingButton } from '@mui/lab';
 import { SelectSkin } from 'react-polymorph/lib/skins/simple/SelectSkin';
 import { intlShape } from 'react-intl';
 import ReactToolboxMobxForm from '../../../utils/ReactToolboxMobxForm';
@@ -69,10 +67,6 @@ export default class LanguageSelectionForm extends Component<Props> {
       label: intl.formatMessage(language.label),
       svg: language.svg
     }));
-    const buttonClasses = classnames([
-      'primary',
-      isSubmitting ? styles.submitButtonSpinning : styles.submitButton,
-    ]);
 
     return (
       <div className={styles.component}>
@@ -96,12 +90,14 @@ export default class LanguageSelectionForm extends Component<Props> {
             </p>
           )}
 
-          <Button
-            className={buttonClasses}
-            label={intl.formatMessage(globalMessages.continue)}
-            onMouseUp={this.submit}
-            skin={ButtonSkin}
-          />
+          <LoadingButton
+            variant="primary"
+            fullWidth
+            loading={isSubmitting}
+            onClick={this.submit}
+          >
+            {intl.formatMessage(globalMessages.continue)}
+          </LoadingButton>
 
           {!tier1Languages.includes(currentLocale) &&
             <div className={styles.info}>
diff --git a/packages/yoroi-extension/app/components/profile/language-selection/LanguageSelectionForm.scss b/packages/yoroi-extension/app/components/profile/language-selection/LanguageSelectionForm.scss
index 0ec99caa59..8e4abbc7bb 100644
--- a/packages/yoroi-extension/app/components/profile/language-selection/LanguageSelectionForm.scss
+++ b/packages/yoroi-extension/app/components/profile/language-selection/LanguageSelectionForm.scss
@@ -1,4 +1,3 @@
-@import '../../../themes/mixins/loading-spinner';
 @import '../../../themes/mixins/error-message';
 
 .component {
@@ -12,17 +11,6 @@
     width: 400px;
   }
 
-  .submitButton,
-  .submitButtonSpinning {
-    display: block !important;
-    margin: 0 auto;
-    width: 100% !important;
-  }
-  
-  .submitButtonSpinning {
-    @include loading-spinner("../../../assets/images/spinner-light.svg");
-  }
-  
   .error {
     @include error-message;
     text-align: center;
@@ -31,7 +19,7 @@
 
   .languageSelect {
     margin-bottom: 10px;
-  
+
     label {
       width: 100%;
       left: 0;
diff --git a/packages/yoroi-extension/app/components/profile/nightly/NightlyForm.js b/packages/yoroi-extension/app/components/profile/nightly/NightlyForm.js
index 75249eab73..b3cf9c6f22 100644
--- a/packages/yoroi-extension/app/components/profile/nightly/NightlyForm.js
+++ b/packages/yoroi-extension/app/components/profile/nightly/NightlyForm.js
@@ -3,8 +3,7 @@ import { Component } from 'react';
 import type { Node } from 'react';
 import classnames from 'classnames';
 import { observer } from 'mobx-react';
-import { Button } from 'react-polymorph/lib/components/Button';
-import { ButtonSkin } from 'react-polymorph/lib/skins/simple/ButtonSkin';
+import { Button } from '@mui/material';
 import { Checkbox } from 'react-polymorph/lib/components/Checkbox';
 import { CheckboxSkin } from 'react-polymorph/lib/skins/simple/CheckboxSkin';
 import { defineMessages, intlShape, FormattedHTMLMessage } from 'react-intl';
@@ -115,12 +114,13 @@ export default class NightlyForm extends Component<Props, State> {
             />
           </div>
           <Button
-            className={classnames(['primary', styles.button])}
-            label={intl.formatMessage(globalMessages.continue)}
-            onMouseUp={this.props.onSubmit}
-            skin={ButtonSkin}
+            variant="primary"
+            onClick={this.props.onSubmit}
             disabled={!this.state.acknowledgedRisks}
-          />
+            sx={{ width: '480px' }}
+          >
+            {intl.formatMessage(globalMessages.continue)}
+          </Button>
         </div>
       </div>
     );
diff --git a/packages/yoroi-extension/app/components/profile/nightly/NightlyForm.scss b/packages/yoroi-extension/app/components/profile/nightly/NightlyForm.scss
index 3e0b13c450..34bbf3ee98 100644
--- a/packages/yoroi-extension/app/components/profile/nightly/NightlyForm.scss
+++ b/packages/yoroi-extension/app/components/profile/nightly/NightlyForm.scss
@@ -37,10 +37,6 @@
     }
   }
 
-  .button {
-    width: 480px;
-  }
-
   .checkbox {
     margin-top: 40px;
     margin-bottom: 40px;
diff --git a/packages/yoroi-extension/app/components/profile/terms-of-use/TermsOfUseForm.js b/packages/yoroi-extension/app/components/profile/terms-of-use/TermsOfUseForm.js
index c8ac791a23..02d1c63579 100644
--- a/packages/yoroi-extension/app/components/profile/terms-of-use/TermsOfUseForm.js
+++ b/packages/yoroi-extension/app/components/profile/terms-of-use/TermsOfUseForm.js
@@ -1,10 +1,8 @@
 // @flow
 import { Component } from 'react';
 import type { Node } from 'react';
-import classnames from 'classnames';
 import { observer } from 'mobx-react';
-import { Button } from 'react-polymorph/lib/components/Button';
-import { ButtonSkin } from 'react-polymorph/lib/skins/simple/ButtonSkin';
+import { LoadingButton } from '@mui/lab';
 import { defineMessages, intlShape } from 'react-intl';
 import { Checkbox } from 'react-polymorph/lib/components/Checkbox';
 import { CheckboxSkin } from 'react-polymorph/lib/skins/simple/CheckboxSkin';
@@ -57,11 +55,6 @@ export default class TermsOfUseForm extends Component<Props, State> {
     const { isSubmitting, error, localizedTermsOfUse } = this.props;
     const { areTermsOfUseAccepted } = this.state;
 
-    const buttonClasses = classnames([
-      'primary',
-      isSubmitting ? styles.submitButtonSpinning : styles.submitButton,
-    ]);
-
     const checkboxLabel = 'checkboxLabel';
     return (
       <div className={styles.component}>
@@ -80,13 +73,15 @@ export default class TermsOfUseForm extends Component<Props, State> {
               skin={CheckboxSkin}
             />
 
-            <Button
-              className={buttonClasses}
-              label={intl.formatMessage(globalMessages.continue)}
-              onMouseUp={this.props.onSubmit}
-              disabled={!areTermsOfUseAccepted || this.props.isSubmitting}
-              skin={ButtonSkin}
-            />
+            <LoadingButton
+              variant="primary"
+              disabled={!areTermsOfUseAccepted}
+              onClick={this.props.onSubmit}
+              loading={isSubmitting}
+              sx={{ width: '350px' }}
+            >
+              {intl.formatMessage(globalMessages.continue)}
+            </LoadingButton>
           </div>
 
           {error && (
diff --git a/packages/yoroi-extension/app/components/profile/terms-of-use/TermsOfUseForm.scss b/packages/yoroi-extension/app/components/profile/terms-of-use/TermsOfUseForm.scss
index 1e37a13888..6e9146c974 100644
--- a/packages/yoroi-extension/app/components/profile/terms-of-use/TermsOfUseForm.scss
+++ b/packages/yoroi-extension/app/components/profile/terms-of-use/TermsOfUseForm.scss
@@ -1,4 +1,3 @@
-@import '../../../themes/mixins/loading-spinner';
 @import '../../../themes/mixins/error-message';
 
 .component {
@@ -21,33 +20,22 @@
     margin: 0 auto;
     width: 800px;
   }
-  
-  .submitButton,
-  .submitButtonSpinning {
-    display: block !important;
-    margin: 0;
-    width: 350px;
-  }
-  
-  .submitButtonSpinning {
-    @include loading-spinner("../../../assets/images/spinner-light.svg");
-  }
-  
+
   .error {
     @include error-message;
     text-align: center;
     margin-bottom: 1rem;
   }
-  
+
   .checkbox {
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding-right: 15px;
     padding-top: 40px;
-  
+
     :global .SimpleCheckbox_label {
       font-family: var(--rp-theme-font-regular);
     }
-  }  
+  }
 }
diff --git a/packages/yoroi-extension/app/components/profile/uri-prompt/UriAccept.js b/packages/yoroi-extension/app/components/profile/uri-prompt/UriAccept.js
index b2245ddf20..282a200674 100644
--- a/packages/yoroi-extension/app/components/profile/uri-prompt/UriAccept.js
+++ b/packages/yoroi-extension/app/components/profile/uri-prompt/UriAccept.js
@@ -1,10 +1,8 @@
 // @flow
 import type { Node } from 'react';
 import { Component } from 'react';
-import classnames from 'classnames';
 import { observer } from 'mobx-react';
-import { Button } from 'react-polymorph/lib/components/Button';
-import { ButtonSkin } from 'react-polymorph/lib/skins/simple/ButtonSkin';
+import { Button } from '@mui/material';
 import { defineMessages, intlShape, FormattedHTMLMessage } from 'react-intl';
 import styles from './UriAccept.scss';
 import UriPrompt from '../../../assets/images/uri/uri-prompt.inline.svg';
@@ -26,50 +24,40 @@ type Props = {|
 
 @observer
 export default class UriAccept extends Component<Props> {
-  static contextTypes: {|intl: $npm$ReactIntl$IntlFormat|} = {
+  static contextTypes: {| intl: $npm$ReactIntl$IntlFormat |} = {
     intl: intlShape.isRequired,
   };
 
   render(): Node {
     const { intl } = this.context;
-    const allowButtonClasses = classnames([
-      'finishButton',
-      'primary',
-      styles.submitButton,
-    ]);
-    const skipButtonClasses = classnames([
-      'secondary',
-      styles.submitButton,
-    ]);
 
     return (
       <div className={styles.component}>
         <div className={styles.centeredBox}>
-
-          <span className={styles.aboutSvg}><UriPrompt /></span>
+          <span className={styles.aboutSvg}>
+            <UriPrompt />
+          </span>
 
           <div className={styles.explanation}>
             <FormattedHTMLMessage {...messages.seePrompt} />
           </div>
 
           <div className={styles.buttonsWrapper}>
-            <Button
-              className={skipButtonClasses}
-              label={intl.formatMessage(globalMessages.backButtonLabel)}
-              onMouseUp={this.props.onBack}
-              skin={ButtonSkin}
-            />
+            <Button variant="secondary" onClick={this.props.onBack} sx={{ width: '287px' }}>
+              {intl.formatMessage(globalMessages.backButtonLabel)}
+            </Button>
 
             <Button
-              className={allowButtonClasses}
-              label={intl.formatMessage(globalMessages.finish)}
-              onMouseUp={this.props.onConfirm}
-              skin={ButtonSkin}
-            />
+              variant="primary"
+              className="finishButton"
+              onClick={this.props.onConfirm}
+              sx={{ width: '287px' }}
+            >
+              {intl.formatMessage(globalMessages.finish)}
+            </Button>
           </div>
         </div>
       </div>
     );
   }
-
 }
diff --git a/packages/yoroi-extension/app/components/profile/uri-prompt/UriAccept.scss b/packages/yoroi-extension/app/components/profile/uri-prompt/UriAccept.scss
index 1a6654a4c0..649ef310a6 100644
--- a/packages/yoroi-extension/app/components/profile/uri-prompt/UriAccept.scss
+++ b/packages/yoroi-extension/app/components/profile/uri-prompt/UriAccept.scss
@@ -36,12 +36,6 @@
     }
   }
 
-  .submitButton {
-    display: block !important;
-    margin: 0;
-    width: 287px !important;
-  }
-
   .buttonsWrapper {
     display: flex;
     flex-direction: row;
diff --git a/packages/yoroi-extension/app/components/profile/uri-prompt/UriPromptForm.js b/packages/yoroi-extension/app/components/profile/uri-prompt/UriPromptForm.js
index 7c7dcd5fbe..e1b73b2a21 100644
--- a/packages/yoroi-extension/app/components/profile/uri-prompt/UriPromptForm.js
+++ b/packages/yoroi-extension/app/components/profile/uri-prompt/UriPromptForm.js
@@ -1,10 +1,8 @@
 // @flow
 import type { Node } from 'react';
 import { Component } from 'react';
-import classnames from 'classnames';
 import { observer } from 'mobx-react';
-import { Button } from 'react-polymorph/lib/components/Button';
-import { ButtonSkin } from 'react-polymorph/lib/skins/simple/ButtonSkin';
+import { Button } from '@mui/material';
 import { defineMessages, intlShape } from 'react-intl';
 import styles from './UriPromptForm.scss';
 import AboutUri from '../../../assets/images/uri/about-url.inline.svg';
@@ -37,25 +35,12 @@ export default class UriPromptForm extends Component<Props> {
 
   render(): Node {
     const { intl } = this.context;
-    const allowButtonClasses = classnames([
-      'allowButton',
-      'primary',
-      styles.submitButton,
-    ]);
-    const skipButtonClasses = classnames([
-      'secondary',
-      styles.submitButton,
-    ]);
 
     return (
       <div className={styles.component}>
         <div className={styles.centeredBox}>
-
           <span className={styles.aboutSvg}>
-            {this.props.classicTheme
-              ? <AboutUriClassic />
-              : <AboutUri />
-            }
+            {this.props.classicTheme ? <AboutUriClassic /> : <AboutUri />}
           </span>
 
           <div className={styles.explanation}>
@@ -65,18 +50,21 @@ export default class UriPromptForm extends Component<Props> {
 
           <div className={styles.buttonsWrapper}>
             <Button
-              className={skipButtonClasses}
-              label={intl.formatMessage(globalMessages.skipLabel)}
-              onMouseUp={this.props.onSkip}
-              skin={ButtonSkin}
-            />
+              variant="secondary"
+              onClick={this.props.onSkip}
+              sx={{ width: '240px' }}
+            >
+              {intl.formatMessage(globalMessages.skipLabel)}
+            </Button>
 
             <Button
-              className={allowButtonClasses}
-              label={intl.formatMessage(globalMessages.allowLabel)}
-              onMouseUp={this.props.onAccept}
-              skin={ButtonSkin}
-            />
+              className="allowButton"
+              variant="primary"
+              onClick={this.props.onAccept}
+              sx={{ width: '240px' }}
+            >
+              {intl.formatMessage(globalMessages.allowLabel)}
+            </Button>
           </div>
         </div>
       </div>
diff --git a/packages/yoroi-extension/app/components/profile/uri-prompt/UriPromptForm.scss b/packages/yoroi-extension/app/components/profile/uri-prompt/UriPromptForm.scss
index 9a01e8122f..f4d1bd778f 100644
--- a/packages/yoroi-extension/app/components/profile/uri-prompt/UriPromptForm.scss
+++ b/packages/yoroi-extension/app/components/profile/uri-prompt/UriPromptForm.scss
@@ -38,12 +38,6 @@
     }
   }
 
-  .submitButton {
-    display: block !important;
-    margin: 0;
-    width: 240px !important;
-  }
-
   .buttonsWrapper {
     display: flex;
     flex-direction: row;
diff --git a/packages/yoroi-extension/app/components/settings/categories/ExternalStorageSettings.js b/packages/yoroi-extension/app/components/settings/categories/ExternalStorageSettings.js
index e375a9b49e..941893d9b0 100644
--- a/packages/yoroi-extension/app/components/settings/categories/ExternalStorageSettings.js
+++ b/packages/yoroi-extension/app/components/settings/categories/ExternalStorageSettings.js
@@ -3,9 +3,7 @@ import { Component } from 'react';
 import type { Node } from 'react';
 import { observer } from 'mobx-react';
 import { defineMessages, intlShape } from 'react-intl';
-import classnames from 'classnames';
-import { Button } from 'react-polymorph/lib/components/Button';
-import { ButtonSkin } from 'react-polymorph/lib/skins/simple/ButtonSkin';
+import { Button } from '@mui/material';
 import type { SelectedExternalStorageProvider } from '../../../domain/ExternalStorage';
 import type { ProvidersType } from '../../../api/externalStorage/index';
 import styles from './ExternalStorageSettings.scss';
@@ -53,11 +51,6 @@ export default class ExternalStorageSettings extends Component<Props> {
     } = this.props;
     const { intl } = this.context;
 
-    const buttonClasses = classnames([
-      'primary',
-      styles.button
-    ]);
-
     const providersButtons = [];
     for (const provider of Object.keys(externalStorageProviders)) {
       const authorizeUrl = externalStorageProviders[provider].authorizeUrl;
@@ -72,18 +65,19 @@ export default class ExternalStorageSettings extends Component<Props> {
       providersButtons.push(
         <Button
           key={provider}
-          className={buttonClasses}
-          label={showDisconnect === true
-            ? intl.formatMessage(messages.buttonDisconnect)
-            : intl.formatMessage(
-              messages.provider,
-              { provider: externalStorageProviders[provider].getDisplayName() }
-            )
-          }
-          skin={ButtonSkin}
+          variant="primary"
           onClick={() => (showDisconnect === true ? onDisconnect() : onConnect(authorizeUrl))}
           disabled={disabledCondition}
-        />
+          sx={{
+            marginTop: '20px',
+          }}
+        >
+          {showDisconnect === true
+            ? intl.formatMessage(messages.buttonDisconnect)
+            : intl.formatMessage(messages.provider, {
+                provider: externalStorageProviders[provider].getDisplayName(),
+              })}
+        </Button>
       );
     }
 
diff --git a/packages/yoroi-extension/app/components/settings/categories/ExternalStorageSettings.scss b/packages/yoroi-extension/app/components/settings/categories/ExternalStorageSettings.scss
index 9524004b9c..5d3a3d6d91 100644
--- a/packages/yoroi-extension/app/components/settings/categories/ExternalStorageSettings.scss
+++ b/packages/yoroi-extension/app/components/settings/categories/ExternalStorageSettings.scss
@@ -26,11 +26,11 @@
   a {
     color: var(--theme-support-settings-link-color);
   }
-  
+
   p {
     margin-bottom: 10px;
   }
-  
+
   .link {
     @include underline(var(--theme-underline-dark-color));
   }
@@ -39,9 +39,6 @@
     outline: none;
   }
 
-  .button {
-    margin-top: 20px;
-  }
 }
 
 :global(.YoroiClassic) .component {
diff --git a/packages/yoroi-extension/app/components/settings/categories/SupportSettings.js b/packages/yoroi-extension/app/components/settings/categories/SupportSettings.js
index ac200e6f1e..a23b1970a1 100644
--- a/packages/yoroi-extension/app/components/settings/categories/SupportSettings.js
+++ b/packages/yoroi-extension/app/components/settings/categories/SupportSettings.js
@@ -3,9 +3,7 @@ import { Component } from 'react';
 import type { Node } from 'react';
 import { observer } from 'mobx-react';
 import { defineMessages, intlShape, FormattedMessage } from 'react-intl';
-import classnames from 'classnames';
-import { Button } from 'react-polymorph/lib/components/Button';
-import { ButtonSkin } from 'react-polymorph/lib/skins/simple/ButtonSkin';
+import { Button } from '@mui/material';
 import globalMessages from '../../../i18n/global-messages';
 import styles from './SupportSettings.scss';
 import type { $npm$ReactIntl$IntlFormat } from 'react-intl';
@@ -57,11 +55,6 @@ export default class SupportSettings extends Component<Props> {
     const { onExternalLinkClick, onDownloadLogs } = this.props;
     const { intl } = this.context;
 
-    const buttonClasses = classnames([
-      'primary',
-      styles.downloadButton
-    ]);
-
     const faqLink = (
       <a
         className={styles.link}
@@ -111,11 +104,12 @@ export default class SupportSettings extends Component<Props> {
         <p><FormattedMessage {...globalMessages.logsContent} values={{ downloadLogsLink }} /></p>
 
         <Button
-          className={buttonClasses}
-          label={intl.formatMessage(globalMessages.downloadLogsButtonLabel)}
+          variant="primary"
           onClick={onDownloadLogs}
-          skin={ButtonSkin}
-        />
+          sx={{ marginTop: '20px' }}
+        >
+          {intl.formatMessage(globalMessages.downloadLogsButtonLabel)}
+        </Button>
 
       </div>
     );
diff --git a/packages/yoroi-extension/app/components/settings/categories/SupportSettings.scss b/packages/yoroi-extension/app/components/settings/categories/SupportSettings.scss
index adba150c35..5d3a3d6d91 100644
--- a/packages/yoroi-extension/app/components/settings/categories/SupportSettings.scss
+++ b/packages/yoroi-extension/app/components/settings/categories/SupportSettings.scss
@@ -26,11 +26,11 @@
   a {
     color: var(--theme-support-settings-link-color);
   }
-  
+
   p {
     margin-bottom: 10px;
   }
-  
+
   .link {
     @include underline(var(--theme-underline-dark-color));
   }
@@ -39,9 +39,6 @@
     outline: none;
   }
 
-  .downloadButton {
-    margin-top: 20px;
-  }
 }
 
 :global(.YoroiClassic) .component {
diff --git a/packages/yoroi-extension/app/components/settings/categories/general-setting/ThemeSettingsBlock.js b/packages/yoroi-extension/app/components/settings/categories/general-setting/ThemeSettingsBlock.js
index 32f2fc04c7..dad42a5594 100644
--- a/packages/yoroi-extension/app/components/settings/categories/general-setting/ThemeSettingsBlock.js
+++ b/packages/yoroi-extension/app/components/settings/categories/general-setting/ThemeSettingsBlock.js
@@ -3,8 +3,7 @@ import { Component } from 'react';
 import type { Node } from 'react';
 import classnames from 'classnames';
 import { observer } from 'mobx-react';
-import { Button } from 'react-polymorph/lib/components/Button';
-import { ButtonSkin } from 'react-polymorph/lib/skins/simple/ButtonSkin';
+import { Button } from '@mui/material';
 import { defineMessages, intlShape, FormattedMessage, FormattedHTMLMessage } from 'react-intl';
 import styles from './ThemeSettingsBlock.scss';
 import { THEMES } from '../../../../themes';
@@ -85,11 +84,6 @@ export default class ThemeSettingsBlock extends Component<Props> {
       styles.themeImageWrapper,
     ]);
 
-    const exportButtonClasses = classnames([
-      'primary',
-      styles.button,
-    ]);
-
     const blogLink = (
       <a
         className={styles.link}
@@ -143,14 +137,11 @@ export default class ThemeSettingsBlock extends Component<Props> {
               <h3 className={styles.subTitle}>{intl.formatMessage(messages.themeYoroiClassic)}</h3>
             </button>
           </div>
-          <Button
-            className={exportButtonClasses}
-            label={intl.formatMessage(messages.themeExportButton)}
-            skin={ButtonSkin}
-            onClick={exportTheme.bind(this)}
-          />
-        </div>
 
+          <Button variant="primary" onClick={exportTheme.bind(this)} sx={{ width: '400px' }}>
+            {intl.formatMessage(messages.themeExportButton)}
+          </Button>
+        </div>
       </div>
     );
   }
diff --git a/packages/yoroi-extension/app/components/settings/categories/general-setting/UriSettingsBlock.js b/packages/yoroi-extension/app/components/settings/categories/general-setting/UriSettingsBlock.js
index 2f3b99e52b..2bc2050e8f 100644
--- a/packages/yoroi-extension/app/components/settings/categories/general-setting/UriSettingsBlock.js
+++ b/packages/yoroi-extension/app/components/settings/categories/general-setting/UriSettingsBlock.js
@@ -1,10 +1,8 @@
 // @flow
 import { Component } from 'react';
 import type { Node } from 'react';
-import classnames from 'classnames';
 import { observer } from 'mobx-react';
-import { Button } from 'react-polymorph/lib/components/Button';
-import { ButtonSkin } from 'react-polymorph/lib/skins/simple/ButtonSkin';
+import { Button } from '@mui/material';
 import { intlShape } from 'react-intl';
 import styles from './UriSettingsBlock.scss';
 import globalMessages from '../../../../i18n/global-messages';
@@ -28,12 +26,6 @@ export default class UriSettingsBlock extends Component<Props> {
   render(): Node {
     const { intl } = this.context;
 
-    const allowButtonClasses = classnames([
-      'allowButton',
-      'primary',
-      styles.submitButton,
-    ]);
-
     // On firefox since there is no prompt,
     // We need to give the user feedback that they pressed the button
     const isDisabled = this.props.isFirefox && this.hasPressed;
@@ -50,17 +42,22 @@ export default class UriSettingsBlock extends Component<Props> {
         </p>
 
         <Button
-          className={allowButtonClasses}
-          label={intl.formatMessage(globalMessages.allowLabel)}
-          onMouseUp={() => {
+          className='allowButton'
+          variant="primary"
+          onClick={() => {
             this.props.registerUriScheme();
             runInAction(() => {
               this.hasPressed = true;
             });
           }}
           disabled={isDisabled}
-          skin={ButtonSkin}
-        />
+          sx={{
+            width: '287px',
+            marginTop: '20px',
+          }}
+        >
+          {intl.formatMessage(globalMessages.allowLabel)}
+        </Button>
       </div>
     );
   }
diff --git a/packages/yoroi-extension/app/components/settings/categories/general-setting/UriSettingsBlock.scss b/packages/yoroi-extension/app/components/settings/categories/general-setting/UriSettingsBlock.scss
index f2737889f7..afb8b5d30c 100644
--- a/packages/yoroi-extension/app/components/settings/categories/general-setting/UriSettingsBlock.scss
+++ b/packages/yoroi-extension/app/components/settings/categories/general-setting/UriSettingsBlock.scss
@@ -13,24 +13,16 @@
     margin-bottom: 12px;
   }
 
-  p,
-  button {
+  p {
     color: var(--theme-support-settings-text-color);
     font-size: 14px;
     line-height: 22px;
   }
 
   p button {
-    color: var(--theme-support-settings-link-color);
     @include underline(var(--theme-support-settings-link-color));
-    line-height: initial;
   }
 
-  .submitButton {
-    font-family: var(--font-medium);
-    width: 287px !important;
-    margin-top: 20px;
-  }
 
   p {
     margin-bottom: 2px;
diff --git a/packages/yoroi-extension/app/components/topbar/BuySellAdaButton.js b/packages/yoroi-extension/app/components/topbar/BuySellAdaButton.js
index 93186e5a83..a2873d74b8 100644
--- a/packages/yoroi-extension/app/components/topbar/BuySellAdaButton.js
+++ b/packages/yoroi-extension/app/components/topbar/BuySellAdaButton.js
@@ -3,12 +3,9 @@ import { Component } from 'react';
 import type { Node } from 'react';
 import { observer } from 'mobx-react';
 import { intlShape, } from 'react-intl';
-import styles from './BuySellAdaButton.scss';
+import { Button } from '@mui/material';
 import globalMessages from '../../i18n/global-messages';
 import type { $npm$ReactIntl$IntlFormat } from 'react-intl';
-import classnames  from 'classnames';
-import { Button } from 'react-polymorph/lib/components/Button';
-import { ButtonSkin } from 'react-polymorph/lib/skins/simple/ButtonSkin';
 
 type Props = {|
   +onBuySellClick: void => void,
@@ -27,11 +24,12 @@ export default class BuySellAdaButton extends Component<Props> {
 
     return (
       <Button
-        label={intl.formatMessage(globalMessages.buySellAda)}
-        className={classnames([styles.button, 'secondary'])}
+        variant="secondary"
+        sx={{ width: '230px' }}
         onClick={() => this.props.onBuySellClick()}
-        skin={ButtonSkin}
-      />
+      >
+        {intl.formatMessage(globalMessages.buySellAda)}
+      </Button>
     );
   }
 }
diff --git a/packages/yoroi-extension/app/components/topbar/BuySellAdaButton.scss b/packages/yoroi-extension/app/components/topbar/BuySellAdaButton.scss
deleted file mode 100644
index 891566d4bd..0000000000
--- a/packages/yoroi-extension/app/components/topbar/BuySellAdaButton.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-.button {
-  display: block !important;
-  width: 230px !important;
-}
\ No newline at end of file
diff --git a/packages/yoroi-extension/app/components/topbar/NavBarAddButton.js b/packages/yoroi-extension/app/components/topbar/NavBarAddButton.js
index bba9898e5e..9d4e8556da 100644
--- a/packages/yoroi-extension/app/components/topbar/NavBarAddButton.js
+++ b/packages/yoroi-extension/app/components/topbar/NavBarAddButton.js
@@ -2,12 +2,10 @@
 import { Component } from 'react';
 import type { Node } from 'react';
 import { observer } from 'mobx-react';
-import { intlShape, } from 'react-intl';
-import styles from './NavBarAddButton.scss';
+import { intlShape } from 'react-intl';
 import globalMessages from '../../i18n/global-messages';
 import type { $npm$ReactIntl$IntlFormat } from 'react-intl';
-import { Button } from 'react-polymorph/lib/components/Button';
-import { ButtonSkin } from 'react-polymorph/lib/skins/simple/ButtonSkin';
+import { Button } from '@mui/material';
 
 type Props = {|
   +onClick: void => void,
@@ -15,25 +13,19 @@ type Props = {|
 
 @observer
 export default class NavBarAddButton extends Component<Props> {
-
-  static contextTypes: {|intl: $npm$ReactIntl$IntlFormat|} = {
+  static contextTypes: {| intl: $npm$ReactIntl$IntlFormat |} = {
     intl: intlShape.isRequired,
   };
 
   render(): Node {
-    const {
-      onClick,
-    } = this.props;
+    const { onClick } = this.props;
 
     const { intl } = this.context;
 
     return (
-      <Button
-        className={styles.button}
-        onClick={() => onClick()}
-        label={intl.formatMessage(globalMessages.addWalletLabel)}
-        skin={ButtonSkin}
-      />
+      <Button variant="primary" onClick={() => onClick()} sx={{ width: '230px' }}>
+        {intl.formatMessage(globalMessages.addWalletLabel)}
+      </Button>
     );
   }
 }
diff --git a/packages/yoroi-extension/app/components/topbar/NavBarAddButton.scss b/packages/yoroi-extension/app/components/topbar/NavBarAddButton.scss
deleted file mode 100644
index 891566d4bd..0000000000
--- a/packages/yoroi-extension/app/components/topbar/NavBarAddButton.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-.button {
-  display: block !important;
-  width: 230px !important;
-}
\ No newline at end of file
diff --git a/packages/yoroi-extension/app/components/topbar/banners/DeprecatedCurrencyBanner.js b/packages/yoroi-extension/app/components/topbar/banners/DeprecatedCurrencyBanner.js
index 52841d0b0a..ddad91674c 100644
--- a/packages/yoroi-extension/app/components/topbar/banners/DeprecatedCurrencyBanner.js
+++ b/packages/yoroi-extension/app/components/topbar/banners/DeprecatedCurrencyBanner.js
@@ -2,12 +2,11 @@
 import { Component } from 'react';
 import type { Node } from 'react';
 import { observer } from 'mobx-react';
-import { intlShape, } from 'react-intl';
+import { intlShape } from 'react-intl';
 import styles from './DeprecatedCurrencyBanner.scss';
 import type { $npm$ReactIntl$IntlFormat } from 'react-intl';
 import globalMessages from '../../../i18n/global-messages';
-import { Button } from 'react-polymorph/lib/components/Button';
-import { ButtonSkin } from 'react-polymorph/lib/skins/simple/ButtonSkin';
+import { Button } from '@mui/material';
 
 type Props = {|
   +children: Node,
@@ -16,8 +15,7 @@ type Props = {|
 
 @observer
 export default class DeprecatedCurrencyBanner extends Component<Props> {
-
-  static contextTypes: {|intl: $npm$ReactIntl$IntlFormat|} = {
+  static contextTypes: {| intl: $npm$ReactIntl$IntlFormat |} = {
     intl: intlShape.isRequired,
   };
 
@@ -40,11 +38,9 @@ export default class DeprecatedCurrencyBanner extends Component<Props> {
             </div>
             {onSubmit != null && (
               <div className={styles.action}>
-                <Button
-                  onClick={() => onSubmit()}
-                  label={intl.formatMessage(globalMessages.upgradeLabel)}
-                  skin={ButtonSkin}
-                />
+                <Button variant="primary" onClick={() => onSubmit()} sx={{ width: '230px' }}>
+                  {intl.formatMessage(globalMessages.upgradeLabel)}
+                </Button>
               </div>
             )}
           </div>
diff --git a/packages/yoroi-extension/app/components/topbar/banners/DeprecatedCurrencyBanner.scss b/packages/yoroi-extension/app/components/topbar/banners/DeprecatedCurrencyBanner.scss
index d4e6ad4fa9..98b8431af5 100644
--- a/packages/yoroi-extension/app/components/topbar/banners/DeprecatedCurrencyBanner.scss
+++ b/packages/yoroi-extension/app/components/topbar/banners/DeprecatedCurrencyBanner.scss
@@ -48,9 +48,6 @@ $height: 128px;
     }
     .action {
       margin-left: 10px;
-      button {
-        width: 230px;
-      }
       margin-top: 13px;
     }
   }
diff --git a/packages/yoroi-extension/app/components/uri/URIGenerateDialog.js b/packages/yoroi-extension/app/components/uri/URIGenerateDialog.js
index db0d349f41..0a78a5c665 100644
--- a/packages/yoroi-extension/app/components/uri/URIGenerateDialog.js
+++ b/packages/yoroi-extension/app/components/uri/URIGenerateDialog.js
@@ -3,8 +3,7 @@ import type { Node } from 'react';
 import { Component } from 'react';
 import classnames from 'classnames';
 import { observer } from 'mobx-react';
-import { Button } from 'react-polymorph/lib/components/Button';
-import { ButtonSkin } from 'react-polymorph/lib/skins/simple/ButtonSkin';
+import { Button } from '@mui/material';
 import { NumericInput } from 'react-polymorph/lib/components/NumericInput';
 import { Input } from 'react-polymorph/lib/components/Input';
 import { defineMessages, intlShape } from 'react-intl';
@@ -170,12 +169,13 @@ export default class URIGenerateDialog extends Component<Props> {
           </div>
 
           <Button
-            label={this.context.intl.formatMessage(messages.uriGenerateDialogConfirmLabel)}
+            variant="primary"
             onClick={onGenerate.bind(this, receiverField.value, amountField.value)}
-            skin={ButtonSkin}
-            className={classnames(['primary', styles.generateButton])}
             disabled={!amountField.isValid}
-          />
+            sx={{ margin: '30px auto 0', display: 'block', width: '400px' }}
+          >
+            {this.context.intl.formatMessage(messages.uriGenerateDialogConfirmLabel)}
+          </Button>
         </div>
       </Dialog>
     );
diff --git a/packages/yoroi-extension/app/components/uri/URIGenerateDialog.scss b/packages/yoroi-extension/app/components/uri/URIGenerateDialog.scss
index 4053b6efc1..904f250c45 100644
--- a/packages/yoroi-extension/app/components/uri/URIGenerateDialog.scss
+++ b/packages/yoroi-extension/app/components/uri/URIGenerateDialog.scss
@@ -22,22 +22,17 @@
         letter-spacing: 0;
       }
     }
-  }  
+  }
 
   .amountField {
     margin-bottom: 15px;
   }
-
-  .generateButton {
-    display: block !important;
-    margin: 30px auto 0;
-  }
 }
 
 :global(.YoroiClassic) .component {
   .receiverInput {
     margin-bottom: 10px;
-  }  
+  }
 }
 
 :global(.YoroiModern) .component {
@@ -61,7 +56,4 @@
     margin-bottom: 10px;
   }
 
-  .generateButton {
-    margin: 0 auto;
-  }
 }
diff --git a/packages/yoroi-extension/app/components/uri/URILandingDialog.js b/packages/yoroi-extension/app/components/uri/URILandingDialog.js
index abf05ad2df..0f03405ed6 100644
--- a/packages/yoroi-extension/app/components/uri/URILandingDialog.js
+++ b/packages/yoroi-extension/app/components/uri/URILandingDialog.js
@@ -3,8 +3,7 @@ import type { Node } from 'react';
 import { Component } from 'react';
 import classnames from 'classnames';
 import { observer } from 'mobx-react';
-import { Button } from 'react-polymorph/lib/components/Button';
-import { ButtonSkin } from 'react-polymorph/lib/skins/simple/ButtonSkin';
+import { Button } from '@mui/material';
 import { defineMessages, intlShape } from 'react-intl';
 
 import Dialog from '../widgets/Dialog';
@@ -82,12 +81,12 @@ export default class URILandingDialog extends Component<Props> {
             </ul>
           </div>
           <Button
-            label={intl.formatMessage(globalMessages.uriLandingDialogConfirmLabel)}
-            onMouseUp={this.submit}
-            disabled={false}
-            skin={ButtonSkin}
-            className={classnames(['primary', styles.confirmButton])}
-          />
+            variant="primary"
+            onClick={this.submit}
+            sx={{ margin: '30px auto 0', display: 'block' }}
+          >
+            {intl.formatMessage(globalMessages.uriLandingDialogConfirmLabel)}
+          </Button>
         </div>
       </Dialog>
     );
diff --git a/packages/yoroi-extension/app/components/uri/URILandingDialog.scss b/packages/yoroi-extension/app/components/uri/URILandingDialog.scss
index 75ce82a140..d78dc19826 100644
--- a/packages/yoroi-extension/app/components/uri/URILandingDialog.scss
+++ b/packages/yoroi-extension/app/components/uri/URILandingDialog.scss
@@ -33,8 +33,4 @@
     text-align: center;
   }
 
-  .confirmButton {
-    display: block !important;
-    margin: 30px auto 0;
-  }
 }
diff --git a/packages/yoroi-extension/app/components/wallet/backup-recovery/MnemonicWord.js b/packages/yoroi-extension/app/components/wallet/backup-recovery/MnemonicWord.js
index 969b5c97be..22958d060f 100644
--- a/packages/yoroi-extension/app/components/wallet/backup-recovery/MnemonicWord.js
+++ b/packages/yoroi-extension/app/components/wallet/backup-recovery/MnemonicWord.js
@@ -3,8 +3,7 @@ import type { Node } from 'react';
 import { Component } from 'react';
 import { observer } from 'mobx-react';
 import classnames from 'classnames';
-import { Button } from 'react-polymorph/lib/components/Button';
-import { ButtonSkin } from 'react-polymorph/lib/skins/simple/ButtonSkin';
+import { Button } from '@mui/material';
 import styles from './MnemonicWord.scss';
 
 type Props = {|
@@ -22,19 +21,18 @@ export default class MnemonicWord extends Component<Props> {
     const handleClick = onClick.bind(null, { word, index });
 
     const componentClasses = classnames([
-      classicTheme ? 'secondary' : null,
       styles.component
     ]);
 
     return (
       <Button
+        variant={classicTheme ? 'secondary' : 'primary'}
         className={componentClasses}
-        themeOverrides={styles}
         disabled={!isActive}
-        label={word}
         onClick={handleClick}
-        skin={ButtonSkin}
-      />
+      >
+        {word}
+      </Button>
     );
   }
 }
diff --git a/packages/yoroi-extension/app/components/wallet/receive/MangledHeader.js b/packages/yoroi-extension/app/components/wallet/receive/MangledHeader.js
index 9b09adef4f..6cd2c33f64 100644
--- a/packages/yoroi-extension/app/components/wallet/receive/MangledHeader.js
+++ b/packages/yoroi-extension/app/components/wallet/receive/MangledHeader.js
@@ -1,15 +1,12 @@
 // @flow
 import type { Node } from 'react';
 import { Component } from 'react';
-import classnames from 'classnames';
 import { observer } from 'mobx-react';
 import { defineMessages, intlShape, FormattedHTMLMessage } from 'react-intl';
 import WarningHeader from './WarningHeader';
-import { Button } from 'react-polymorph/lib/components/Button';
-import { ButtonSkin } from 'react-polymorph/lib/skins/simple/ButtonSkin';
+import { Button } from '@mui/material';
 import globalMessages from '../../../i18n/global-messages';
 import { addressSubgroupName } from '../../../types/AddressFilterTypes';
-import styles from './MangledHeader.scss';
 import type { $npm$ReactIntl$IntlFormat } from 'react-intl';
 
 const messages = defineMessages({
@@ -38,10 +35,6 @@ export default class MangledHeader extends Component<Props> {
   render(): Node {
     const { intl } = this.context;
 
-    const buttonClasses = classnames([
-      'primary',
-      styles.submitButton,
-    ]);
     return (
       <>
         <WarningHeader
@@ -62,11 +55,12 @@ export default class MangledHeader extends Component<Props> {
         >
           {this.props.hasMangledUtxo && (
             <Button
-              className={buttonClasses}
-              label={intl.formatMessage(messages.fixLabel)}
+              variant="primary"
               onClick={this.props.onClick}
-              skin={ButtonSkin}
-            />
+              sx={{ width: 'max-content' , marginTop: '16px' }}
+            >
+              {intl.formatMessage(messages.fixLabel)}
+            </Button>
           )}
         </WarningHeader>
       </>
diff --git a/packages/yoroi-extension/app/components/wallet/receive/MangledHeader.scss b/packages/yoroi-extension/app/components/wallet/receive/MangledHeader.scss
deleted file mode 100644
index 883455cf9e..0000000000
--- a/packages/yoroi-extension/app/components/wallet/receive/MangledHeader.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-.submitButton {
-  display: block !important;
-  width: max-content !important;
-  margin-top: 16px;
-}
diff --git a/packages/yoroi-extension/app/components/wallet/receive/StandardHeader.js b/packages/yoroi-extension/app/components/wallet/receive/StandardHeader.js
index d74721bbf7..a021134917 100644
--- a/packages/yoroi-extension/app/components/wallet/receive/StandardHeader.js
+++ b/packages/yoroi-extension/app/components/wallet/receive/StandardHeader.js
@@ -4,8 +4,7 @@ import type { Node } from 'react';
 import { observer } from 'mobx-react';
 import { defineMessages, intlShape, FormattedHTMLMessage } from 'react-intl';
 import classnames from 'classnames';
-import { Button } from 'react-polymorph/lib/components/Button';
-import { ButtonSkin } from 'react-polymorph/lib/skins/simple/ButtonSkin';
+import { LoadingButton } from '@mui/lab';
 import LocalizableError from '../../../i18n/LocalizableError';
 import styles from './StandardHeader.scss';
 import CopyableAddress from '../../widgets/CopyableAddress';
@@ -67,21 +66,16 @@ export default class StandardHeader extends Component<Props> {
     const { intl } = this.context;
     const mainAddressNotificationId = 'mainAddress-copyNotification';
 
-    const generateAddressButtonClasses = classnames([
-      'primary',
-      'generateAddressButton',
-      styles.submitButton,
-      isSubmitting ? styles.spinning : null,
-    ]);
-
     const generateAddressForm = (
-      <Button
-        className={generateAddressButtonClasses}
-        label={intl.formatMessage(messages.generateNewAddressButtonLabel)}
-        onMouseUp={this.submit}
-        skin={ButtonSkin}
+      <LoadingButton
+        variant="primary"
+        loading={isSubmitting}
+        className="generateAddressButton"
+        onClick={this.submit}
         disabled={this.props.isFilterActive}
-      />
+      >
+        {intl.formatMessage(messages.generateNewAddressButtonLabel)}
+      </LoadingButton>
     );
 
     const copyableHashClass = classnames([
diff --git a/packages/yoroi-extension/app/components/wallet/send/DelegationSendForm.js b/packages/yoroi-extension/app/components/wallet/send/DelegationSendForm.js
index 66a29a3766..640eaa90b8 100644
--- a/packages/yoroi-extension/app/components/wallet/send/DelegationSendForm.js
+++ b/packages/yoroi-extension/app/components/wallet/send/DelegationSendForm.js
@@ -2,9 +2,7 @@
 import { Component } from 'react';
 import type { Node } from 'react';
 import { observer } from 'mobx-react';
-import classnames from 'classnames';
-import { Button } from 'react-polymorph/lib/components/Button';
-import { ButtonSkin } from 'react-polymorph/lib/skins/simple/ButtonSkin';
+import { Button } from '@mui/material';
 import { Input } from 'react-polymorph/lib/components/Input';
 import { defineMessages, intlShape } from 'react-intl';
 import ReactToolboxMobxForm from '../../../utils/ReactToolboxMobxForm';
@@ -147,22 +145,18 @@ export default class DelegationSendForm extends Component<Props> {
   _makeInvokeConfirmationButton(): Node {
     const { intl } = this.context;
 
-    const buttonClasses = classnames([
-      'primary',
-      styles.nextButton,
-    ]);
-
     return (
       <Button
-        className={buttonClasses}
-        label={intl.formatMessage(globalMessages.nextButtonLabel)}
-        onMouseUp={this.props.onNext}
+        variant="primary"
+        onClick={this.props.onNext}
         disabled={
           this.props.hasAnyPending ||
           this.props.isProcessing ||
           this.props.poolQueryError != null
         }
-        skin={ButtonSkin}
-      />);
+        sx={{ margin: '30px auto 0', display: 'block' }}
+      >
+        {intl.formatMessage(globalMessages.nextButtonLabel)}
+      </Button>);
   }
 }
diff --git a/packages/yoroi-extension/app/components/wallet/send/DelegationSendForm.scss b/packages/yoroi-extension/app/components/wallet/send/DelegationSendForm.scss
index eea4dd8b3e..a2ae076d70 100644
--- a/packages/yoroi-extension/app/components/wallet/send/DelegationSendForm.scss
+++ b/packages/yoroi-extension/app/components/wallet/send/DelegationSendForm.scss
@@ -20,11 +20,6 @@
       }
     }
   }
-  
-  .nextButton {
-    display: block !important;
-    margin: 30px auto 0;
-  }
 
   .actionLabel {
     color: var(--theme-label-button-color);
diff --git a/packages/yoroi-extension/app/components/wallet/send/WalletSendForm.js b/packages/yoroi-extension/app/components/wallet/send/WalletSendForm.js
index 84d9440bda..fde912f172 100644
--- a/packages/yoroi-extension/app/components/wallet/send/WalletSendForm.js
+++ b/packages/yoroi-extension/app/components/wallet/send/WalletSendForm.js
@@ -3,9 +3,7 @@ import { Component } from 'react';
 import type { Node } from 'react';
 import { observer } from 'mobx-react';
 import { reaction } from 'mobx';
-import classnames from 'classnames';
-import { Button } from 'react-polymorph/lib/components/Button';
-import { ButtonSkin } from 'react-polymorph/lib/skins/simple/ButtonSkin';
+import { Button } from '@mui/material';
 import { Input } from 'react-polymorph/lib/components/Input';
 import { NumericInput } from 'react-polymorph/lib/components/NumericInput';
 import { defineMessages, intlShape } from 'react-intl';
@@ -551,11 +549,6 @@ export default class WalletSendForm extends Component<Props> {
     const { intl } = this.context;
     const { memo } = this.form.values();
 
-    const buttonClasses = classnames([
-      'primary',
-      styles.nextButton,
-    ]);
-
     const {
       hasAnyPending,
     } = this.props;
@@ -568,13 +561,14 @@ export default class WalletSendForm extends Component<Props> {
 
     return (
       <Button
-        className={buttonClasses}
-        label={intl.formatMessage(globalMessages.nextButtonLabel)}
-        onMouseUp={this.props.onSubmit}
+        variant="primary"
+        onClick={this.props.onSubmit}
         /** Next Action can't be performed in case transaction fees are not calculated
           * or there's a transaction waiting to be confirmed (pending) */
         disabled={disabledCondition}
-        skin={ButtonSkin}
-      />);
+        sx={{ margin: '30px auto 0', display: 'block' }}
+      >
+        {intl.formatMessage(globalMessages.nextButtonLabel)}
+      </Button>);
   }
 }
diff --git a/packages/yoroi-extension/app/components/wallet/send/WalletSendForm.scss b/packages/yoroi-extension/app/components/wallet/send/WalletSendForm.scss
index 1130a148c5..904816b4c3 100644
--- a/packages/yoroi-extension/app/components/wallet/send/WalletSendForm.scss
+++ b/packages/yoroi-extension/app/components/wallet/send/WalletSendForm.scss
@@ -18,12 +18,12 @@
       }
     }
   }
-  
+
   .amountInput {
     position: relative;
     margin-bottom: 10px;
   }
-  
+
   .adaLabel {
     bottom: 16px;
     color: var(--theme-input-right-floating-text-color);
@@ -32,11 +32,6 @@
     right: 20px;
     text-transform: uppercase;
   }
-  
-  .nextButton {
-    display: block !important;
-    margin: 30px auto 0;
-  }
 
   .checkbox {
     font-family: var(--font-mono-light);
@@ -101,10 +96,6 @@
     }
   }
 
-  .nextButton {
-    margin: 20px auto 0;
-  }
-
   fieldset {
     background: var(--theme-settings-pane-background-color);
   }
diff --git a/packages/yoroi-extension/app/components/wallet/settings/ExportWallet.js b/packages/yoroi-extension/app/components/wallet/settings/ExportWallet.js
index ef36b01d1b..2f17f4c61a 100644
--- a/packages/yoroi-extension/app/components/wallet/settings/ExportWallet.js
+++ b/packages/yoroi-extension/app/components/wallet/settings/ExportWallet.js
@@ -1,13 +1,11 @@
 // @flow
 import { Component } from 'react';
 import type { Node } from 'react';
-import classNames from 'classnames';
 import { defineMessages, intlShape } from 'react-intl';
 import globalMessages from '../../../i18n/global-messages';
 import styles from './ExportWallet.scss';
 import { observer } from 'mobx-react';
-import { Button } from 'react-polymorph/lib/components/Button';
-import { ButtonSkin } from 'react-polymorph/lib/skins/simple/ButtonSkin';
+import { Button } from '@mui/material';
 import type { $npm$ReactIntl$IntlFormat } from 'react-intl';
 
 export const messages: * = defineMessages({
@@ -27,32 +25,27 @@ type Props = {|
 
 @observer
 export default class ExportWallet extends Component<Props> {
-  static contextTypes: {|intl: $npm$ReactIntl$IntlFormat|} = {
+  static contextTypes: {| intl: $npm$ReactIntl$IntlFormat |} = {
     intl: intlShape.isRequired,
   };
 
   render(): Node {
     const { intl } = this.context;
 
-    const buttonClassNames = classNames([
-      'primary',
-      styles.submitButton,
-      'exportWallet' // classname for UI tests
-    ]);
     return (
       <div className={styles.component}>
         <h2>{intl.formatMessage(messages.titleLabel)}</h2>
 
-        <p>
-          {intl.formatMessage(messages.exportExplanation)}
-        </p>
+        <p>{intl.formatMessage(messages.exportExplanation)}</p>
 
         <Button
-          className={buttonClassNames}
-          label={`${this.context.intl.formatMessage(globalMessages.exportButtonLabel)}`}
-          skin={ButtonSkin}
+          variant="primary"
+          className="exportWallet"
           onClick={this.props.openDialog}
-        />
+          sx={{ marginTop: '20px', width: '400px' }}
+        >
+          {`${this.context.intl.formatMessage(globalMessages.exportButtonLabel)}`}
+        </Button>
       </div>
     );
   }
diff --git a/packages/yoroi-extension/app/components/wallet/settings/ExportWallet.scss b/packages/yoroi-extension/app/components/wallet/settings/ExportWallet.scss
index 3f9e4659d1..29e61d3f1c 100644
--- a/packages/yoroi-extension/app/components/wallet/settings/ExportWallet.scss
+++ b/packages/yoroi-extension/app/components/wallet/settings/ExportWallet.scss
@@ -21,8 +21,4 @@
     line-height: 19px;
     margin-bottom: 10px;
   }  
-
-  .submitButton {
-    margin-top: 20px;
-  }
 }
diff --git a/packages/yoroi-extension/app/components/wallet/settings/RemoveWallet.js b/packages/yoroi-extension/app/components/wallet/settings/RemoveWallet.js
index 42d537969c..afa8d5ce45 100644
--- a/packages/yoroi-extension/app/components/wallet/settings/RemoveWallet.js
+++ b/packages/yoroi-extension/app/components/wallet/settings/RemoveWallet.js
@@ -1,14 +1,11 @@
 // @flow
 import { Component } from 'react';
 import type { Node } from 'react';
-import classNames from 'classnames';
 import { defineMessages, intlShape } from 'react-intl';
 import globalMessages from '../../../i18n/global-messages';
 import styles from './RemoveWallet.scss';
-import dangerousButtonStyles from '../../../themes/overrides/DangerousButton.scss';
 import { observer } from 'mobx-react';
-import { Button } from 'react-polymorph/lib/components/Button';
-import { ButtonSkin } from 'react-polymorph/lib/skins/simple/ButtonSkin';
+import { Button } from '@mui/material';
 import type { $npm$ReactIntl$IntlFormat } from 'react-intl';
 
 export const messages: * = defineMessages({
@@ -18,7 +15,8 @@ export const messages: * = defineMessages({
   },
   removeExplanation: {
     id: 'wallet.settings.remove.explanation',
-    defaultMessage: '!!!Removing a wallet does not affect the wallet balance. Your wallet can be restored again at any time.',
+    defaultMessage:
+      '!!!Removing a wallet does not affect the wallet balance. Your wallet can be restored again at any time.',
   },
 });
 
@@ -29,33 +27,27 @@ type Props = {|
 
 @observer
 export default class RemoveWallet extends Component<Props> {
-  static contextTypes: {|intl: $npm$ReactIntl$IntlFormat|} = {
+  static contextTypes: {| intl: $npm$ReactIntl$IntlFormat |} = {
     intl: intlShape.isRequired,
   };
 
   render(): Node {
     const { intl } = this.context;
 
-    const buttonClassNames = classNames([
-      'primary',
-      styles.submitButton,
-      'removeWallet' // classname for UI tests
-    ]);
     return (
       <div className={styles.component}>
         <h2>{intl.formatMessage(messages.titleLabel)}</h2>
 
-        <p>
-          {intl.formatMessage(messages.removeExplanation)}
-        </p>
+        <p>{intl.formatMessage(messages.removeExplanation)}</p>
 
         <Button
-          themeOverrides={dangerousButtonStyles}
-          className={buttonClassNames}
-          label={`${this.context.intl.formatMessage(globalMessages.remove)} ${this.props.walletName}`}
-          skin={ButtonSkin}
+          variant="danger"
+          className="removeWallet"
           onClick={this.props.openDialog}
-        />
+          sx={{ marginTop: '20px', width: '400px' }}
+        >
+          {`${this.context.intl.formatMessage(globalMessages.remove)} ${this.props.walletName}`}
+        </Button>
       </div>
     );
   }
diff --git a/packages/yoroi-extension/app/components/wallet/settings/RemoveWallet.scss b/packages/yoroi-extension/app/components/wallet/settings/RemoveWallet.scss
index 3f9e4659d1..ea48a006e9 100644
--- a/packages/yoroi-extension/app/components/wallet/settings/RemoveWallet.scss
+++ b/packages/yoroi-extension/app/components/wallet/settings/RemoveWallet.scss
@@ -20,9 +20,5 @@
     font-size: 14px;
     line-height: 19px;
     margin-bottom: 10px;
-  }  
-
-  .submitButton {
-    margin-top: 20px;
   }
 }
diff --git a/packages/yoroi-extension/app/components/wallet/settings/ResyncBlock.js b/packages/yoroi-extension/app/components/wallet/settings/ResyncBlock.js
index 2296fdc820..e47a8126a0 100644
--- a/packages/yoroi-extension/app/components/wallet/settings/ResyncBlock.js
+++ b/packages/yoroi-extension/app/components/wallet/settings/ResyncBlock.js
@@ -1,12 +1,10 @@
 // @flow
 import { Component } from 'react';
 import type { Node } from 'react';
-import classNames from 'classnames';
 import { defineMessages, intlShape } from 'react-intl';
 import styles from './ResyncBlock.scss';
 import { observer } from 'mobx-react';
-import { Button } from 'react-polymorph/lib/components/Button';
-import { ButtonSkin } from 'react-polymorph/lib/skins/simple/ButtonSkin';
+import { Button } from '@mui/material';
 import type { $npm$ReactIntl$IntlFormat } from 'react-intl';
 import globalMessages from '../../../i18n/global-messages';
 
@@ -17,7 +15,8 @@ export const messages: * = defineMessages({
   },
   resyncExplanation: {
     id: 'wallet.settings.resync.explanation',
-    defaultMessage: '!!!If you are experiencing issues with your wallet, or think you have an incorrect balance or transaction history, you can delete the local data stored by Yoroi and resync with the blockchain.',
+    defaultMessage:
+      '!!!If you are experiencing issues with your wallet, or think you have an incorrect balance or transaction history, you can delete the local data stored by Yoroi and resync with the blockchain.',
   },
 });
 
@@ -27,35 +26,28 @@ type Props = {|
 
 @observer
 export default class ResyncBlock extends Component<Props> {
-  static contextTypes: {|intl: $npm$ReactIntl$IntlFormat|} = {
+  static contextTypes: {| intl: $npm$ReactIntl$IntlFormat |} = {
     intl: intlShape.isRequired,
   };
 
   render(): Node {
     const { intl } = this.context;
 
-    const buttonClassNames = classNames([
-      'primary',
-      styles.submitButton,
-      'resyncButton' // classname for UI tests
-    ]);
     return (
       <div className={styles.component}>
         <h2>{intl.formatMessage(messages.titleLabel)}</h2>
 
-        <p>
-          {intl.formatMessage(messages.resyncExplanation)}
-        </p>
+        <p>{intl.formatMessage(messages.resyncExplanation)}</p>
 
         <Button
-          className={buttonClassNames}
-          label={this.context.intl.formatMessage(globalMessages.resyncButtonLabel)}
-          skin={ButtonSkin}
+          variant="primary"
+          className="resyncButton"
           onClick={this.props.openDialog}
-        />
+          sx={{ marginTop: '20px', width: '400px' }}
+        >
+          {this.context.intl.formatMessage(globalMessages.resyncButtonLabel)}
+        </Button>
       </div>
     );
   }
-
-
 }
diff --git a/packages/yoroi-extension/app/components/wallet/settings/ResyncBlock.scss b/packages/yoroi-extension/app/components/wallet/settings/ResyncBlock.scss
index 461f422ca4..c99981c06f 100644
--- a/packages/yoroi-extension/app/components/wallet/settings/ResyncBlock.scss
+++ b/packages/yoroi-extension/app/components/wallet/settings/ResyncBlock.scss
@@ -22,9 +22,5 @@
     font-size: 14px;
     line-height: 19px;
     margin-bottom: 10px;
-  }  
-
-  .submitButton {
-    margin-top: 20px;
   }
 }
diff --git a/packages/yoroi-extension/app/components/wallet/staking/dashboard/StakePool.js b/packages/yoroi-extension/app/components/wallet/staking/dashboard/StakePool.js
index a03ae20291..9d18e5cde9 100644
--- a/packages/yoroi-extension/app/components/wallet/staking/dashboard/StakePool.js
+++ b/packages/yoroi-extension/app/components/wallet/staking/dashboard/StakePool.js
@@ -4,10 +4,8 @@ import type { Node } from 'react';
 import { observer } from 'mobx-react';
 import { defineMessages, intlShape } from 'react-intl';
 import { toSvg } from 'jdenticon';
-import classnames from 'classnames';
 
-import { Button } from 'react-polymorph/lib/components/Button';
-import { ButtonSkin } from 'react-polymorph/lib/skins/simple/ButtonSkin';
+import { Button } from '@mui/material';
 
 import CardShadow from './CardShadow';
 // import ProgressCircle from './ProgressCircle';
@@ -237,44 +235,26 @@ export default class StakePool extends Component<Props> {
     );
   }
 
-  getMoreInfoButton: ?MoreInfoProp => Node = (info) => {
+  getMoreInfoButton: (?MoreInfoProp) => Node = info => {
     const { intl } = this.context;
 
-    const moreInfoButtonClasses = classnames([
-      'secondary',
-    ]);
-    const undelegateButtonClasses = classnames([
-      'secondary',
-    ]);
     return (
       <>
-        {info != null &&
-          <a
-            href={info.url}
-            onClick={info.openPoolPage}
-          >
+        {info != null && (
+          <a href={info.url} onClick={info.openPoolPage}>
             <div className={styles.data} />
-            <Button
-              type="button"
-              label={intl.formatMessage(messages.viewWebpage)}
-              className={moreInfoButtonClasses}
-              skin={ButtonSkin}
-            />
+            <Button variant="secondary">{intl.formatMessage(messages.viewWebpage)}</Button>
           </a>
-        }
-        {this.props.undelegate != null &&
+        )}
+        {this.props.undelegate != null && (
           <>
             <div className={styles.data} />
-            <Button
-              type="button"
-              label={intl.formatMessage(globalMessages.undelegateLabel)}
-              className={undelegateButtonClasses}
-              skin={ButtonSkin}
-              onClick={this.props.undelegate}
-            />
+            <Button variant="secondary" onClick={this.props.undelegate}>
+              {intl.formatMessage(globalMessages.undelegateLabel)}
+            </Button>
           </>
-        }
+        )}
       </>
     );
-  }
+  };
 }
diff --git a/packages/yoroi-extension/app/components/wallet/staking/dashboard/UserSummary.js b/packages/yoroi-extension/app/components/wallet/staking/dashboard/UserSummary.js
index 9ed22f58b1..2e163b7dda 100644
--- a/packages/yoroi-extension/app/components/wallet/staking/dashboard/UserSummary.js
+++ b/packages/yoroi-extension/app/components/wallet/staking/dashboard/UserSummary.js
@@ -5,8 +5,7 @@ import classnames from 'classnames';
 import { observer } from 'mobx-react';
 import { defineMessages, intlShape, FormattedMessage } from 'react-intl';
 import type { $npm$ReactIntl$MessageDescriptor, $npm$ReactIntl$IntlFormat } from 'react-intl';
-import { Button } from 'react-polymorph/lib/components/Button';
-import { ButtonSkin } from 'react-polymorph/lib/skins/simple/ButtonSkin';
+import { Button } from '@mui/material';
 import Card from './Card';
 import styles from './UserSummary.scss';
 import IconAda from '../../../../assets/images/dashboard/grey-total-ada.inline.svg';
@@ -150,11 +149,13 @@ export default class UserSummary extends Component<Props, State> {
           <div className={styles.footer}>
             {this.props.withdrawRewards != null && (
               <Button
-                className={classnames(styles.actionButton, 'secondary', 'withdrawButton')}
-                label={intl.formatMessage(globalMessages.withdrawLabel)}
+                className="withdrawButton"
+                variant="secondary"
                 onClick={this.props.withdrawRewards}
-                skin={ButtonSkin}
-              />
+                sx={{ height: '46px', width: '144px' }}
+              >
+                {intl.formatMessage(globalMessages.withdrawLabel)}
+              </Button>
             )}
             <div
               className={styles.note}
diff --git a/packages/yoroi-extension/app/components/wallet/staking/dashboard/UserSummary.scss b/packages/yoroi-extension/app/components/wallet/staking/dashboard/UserSummary.scss
index 6b4817d9f9..350303a330 100644
--- a/packages/yoroi-extension/app/components/wallet/staking/dashboard/UserSummary.scss
+++ b/packages/yoroi-extension/app/components/wallet/staking/dashboard/UserSummary.scss
@@ -33,10 +33,6 @@
       justify-content: space-between;
       margin-top: 8px;
       flex-wrap: wrap;
-      .actionButton {
-        height: 46px;
-        width: 144px;
-      }
       .note {
         color: #6b7384;
       }
diff --git a/packages/yoroi-extension/app/components/wallet/transactions/WalletTransactionsList.js b/packages/yoroi-extension/app/components/wallet/transactions/WalletTransactionsList.js
index 32bf9a1983..88d1e57b49 100644
--- a/packages/yoroi-extension/app/components/wallet/transactions/WalletTransactionsList.js
+++ b/packages/yoroi-extension/app/components/wallet/transactions/WalletTransactionsList.js
@@ -3,9 +3,7 @@ import { Component } from 'react';
 import type { Node } from 'react';
 import { observer } from 'mobx-react';
 import { defineMessages, intlShape } from 'react-intl';
-import classnames from 'classnames';
-import { Button } from 'react-polymorph/lib/components/Button';
-import { ButtonSkin } from 'react-polymorph/lib/skins/simple/ButtonSkin';
+import { Button } from '@mui/material';
 import moment from 'moment';
 import styles from './WalletTransactionsList.scss';
 import Transaction from './Transaction';
@@ -136,11 +134,6 @@ export default class WalletTransactionsList extends Component<Props> {
       onCopyAddressTooltip
     } = this.props;
 
-    const buttonClasses = classnames([
-      'primary',
-      styles.showMoreTransactionsButton,
-    ]);
-
     const transactionsGroups = this.groupTransactionsByDay(transactions);
 
     const loadingSpinner = isLoadingTransactions ? (
@@ -194,12 +187,13 @@ export default class WalletTransactionsList extends Component<Props> {
         {loadingSpinner}
         {!isLoadingTransactions && hasMoreToLoad &&
           <Button
+            variant="primary"
             disabled={isLoadingTransactions}
-            className={buttonClasses}
-            label={intl.formatMessage(messages.showMoreTransactionsButtonLabel)}
             onClick={onLoadMore}
-            skin={ButtonSkin}
-          />
+            sx={{ margin: '30px auto', width: '400px', display: 'block' }}
+          >
+            {intl.formatMessage(messages.showMoreTransactionsButtonLabel)}
+          </Button>
         }
       </div>
     );
diff --git a/packages/yoroi-extension/app/components/wallet/transactions/WalletTransactionsList.scss b/packages/yoroi-extension/app/components/wallet/transactions/WalletTransactionsList.scss
index f3fedb55d9..737bcbbdf4 100644
--- a/packages/yoroi-extension/app/components/wallet/transactions/WalletTransactionsList.scss
+++ b/packages/yoroi-extension/app/components/wallet/transactions/WalletTransactionsList.scss
@@ -23,16 +23,12 @@
 
   .list {
     margin-bottom: 20px;
-  
+
     &:last-child {
       margin: 0;
     }
   }
 
-  .showMoreTransactionsButton {
-    display: block !important;
-    margin: 30px auto;
-  }
 }
 
 .loading {
diff --git a/packages/yoroi-extension/app/components/wallet/voting/Voting.js b/packages/yoroi-extension/app/components/wallet/voting/Voting.js
index e728c0fa1b..eac557c23e 100644
--- a/packages/yoroi-extension/app/components/wallet/voting/Voting.js
+++ b/packages/yoroi-extension/app/components/wallet/voting/Voting.js
@@ -6,8 +6,7 @@ import classnames from 'classnames';
 import { defineMessages, intlShape, FormattedHTMLMessage } from 'react-intl';
 import globalMessages from '../../../i18n/global-messages';
 import type { $npm$ReactIntl$IntlFormat } from 'react-intl';
-import { Button } from 'react-polymorph/lib/components/Button';
-import { ButtonSkin } from 'react-polymorph/lib/skins/simple/ButtonSkin';
+import { Button } from '@mui/material';
 import AppStoreBadge from '../../../assets/images/app-store-badge.inline.svg';
 import PlayStoreBadge from '../../../assets/images/google-play-badge.inline.svg';
 import WarningBox from '../../widgets/WarningBox';
@@ -113,10 +112,6 @@ export default class Voting extends Component<Props> {
       )
       : (null);
 
-    const buttonClasses = classnames([
-      'primary',
-    ]);
-
     return (
       <>
         {pendingTxWarningComponent}
@@ -184,12 +179,13 @@ export default class Voting extends Component<Props> {
           </div>
           <div className={styles.registerButton}>
             <Button
-              className={buttonClasses}
-              label={intl.formatMessage(globalMessages.registerLabel)}
-              onMouseUp={this.props.start}
-              skin={ButtonSkin}
+              variant="primary"
+              onClick={this.props.start}
               disabled={this.props.hasAnyPending}
-            />
+              sx={{ width: '400px' }}
+            >
+              {intl.formatMessage(globalMessages.registerLabel)}
+            </Button>
           </div>
         </div>
       </>
diff --git a/packages/yoroi-extension/app/components/widgets/Dialog.js b/packages/yoroi-extension/app/components/widgets/Dialog.js
index 8d6b8e9e51..5a6d7aa7c2 100644
--- a/packages/yoroi-extension/app/components/widgets/Dialog.js
+++ b/packages/yoroi-extension/app/components/widgets/Dialog.js
@@ -5,6 +5,7 @@ import { observer } from 'mobx-react';
 import classnames from 'classnames';
 import type { Node, Element } from 'react';
 import { Modal } from 'react-polymorph/lib/components/Modal';
+// TODO: Remove RP Button
 import { Button } from 'react-polymorph/lib/components/Button';
 import { ButtonSkin } from 'react-polymorph/lib/skins/simple/ButtonSkin';
 import { ModalSkin } from 'react-polymorph/lib/skins/simple/ModalSkin';
diff --git a/packages/yoroi-extension/app/ergo-connector/components/connect/ConnectPage.js b/packages/yoroi-extension/app/ergo-connector/components/connect/ConnectPage.js
index 2d604b1448..8ec054872c 100644
--- a/packages/yoroi-extension/app/ergo-connector/components/connect/ConnectPage.js
+++ b/packages/yoroi-extension/app/ergo-connector/components/connect/ConnectPage.js
@@ -6,8 +6,7 @@ import { intlShape, defineMessages, FormattedHTMLMessage } from 'react-intl';
 import type { $npm$ReactIntl$IntlFormat } from 'react-intl';
 import classNames from 'classnames';
 import styles from './ConnectPage.scss';
-import { Button } from 'react-polymorph/lib/components/Button';
-import { ButtonSkin } from 'react-polymorph/lib/skins/simple/ButtonSkin';
+import { Button } from '@mui/material';
 import { Checkbox } from 'react-polymorph/lib/components/Checkbox';
 import { CheckboxSkin } from 'react-polymorph/lib/skins/simple/CheckboxSkin';
 import WalletCard from './WalletCard';
@@ -151,18 +150,12 @@ class ConnectPage extends Component<Props> {
             <p>{intl.formatMessage(connectorMessages.messageReadOnly)}</p>
           </div>
           <div className={styles.wrapperBtn}>
-            <Button
-              className="secondary"
-              label={intl.formatMessage(globalMessages.cancel)}
-              skin={ButtonSkin}
-              onClick={onCancel}
-            />
-            <Button
-              label={intl.formatMessage(globalMessages.connectLabel)}
-              skin={ButtonSkin}
-              disabled={isCheckedWallet}
-              onClick={handleSubmit}
-            />
+            <Button variant="secondary" onClick={onCancel}>
+              {intl.formatMessage(globalMessages.cancel)}
+            </Button>
+            <Button variant="primary" disabled={isCheckedWallet} onClick={handleSubmit}>
+              {intl.formatMessage(globalMessages.connectLabel)}
+            </Button>
           </div>
         </div>
       </div>
diff --git a/packages/yoroi-extension/app/ergo-connector/components/signin/SignTxPage.js b/packages/yoroi-extension/app/ergo-connector/components/signin/SignTxPage.js
index 95bd165968..68c9148af5 100644
--- a/packages/yoroi-extension/app/ergo-connector/components/signin/SignTxPage.js
+++ b/packages/yoroi-extension/app/ergo-connector/components/signin/SignTxPage.js
@@ -5,8 +5,7 @@ import type { Node } from 'react';
 import { intlShape } from 'react-intl';
 import type { $npm$ReactIntl$IntlFormat } from 'react-intl';
 import styles from './SignTxPage.scss';
-import { Button } from 'react-polymorph/lib/components/Button';
-import { ButtonSkin } from 'react-polymorph/lib/skins/simple/ButtonSkin';
+import { Button } from '@mui/material';
 import { Input } from 'react-polymorph/lib/components/Input';
 import { InputOwnSkin } from '../../../themes/skins/InputOwnSkin';
 import globalMessages from '../../../i18n/global-messages';
@@ -329,18 +328,16 @@ class SignTxPage extends Component<Props> {
             />
           </div>
           <div className={styles.wrapperBtn}>
+            <Button variant="secondary" onClick={onCancel}>
+              {intl.formatMessage(globalMessages.cancel)}
+            </Button>
             <Button
-              className="secondary"
-              label={intl.formatMessage(globalMessages.cancel)}
-              skin={ButtonSkin}
-              onClick={onCancel}
-            />
-            <Button
-              label={intl.formatMessage(globalMessages.confirm)}
-              skin={ButtonSkin}
+              variant="primary"
               disabled={!walletPasswordField.isValid}
               onClick={this.submit.bind(this)}
-            />
+            >
+              {intl.formatMessage(globalMessages.confirm)}
+            </Button>
           </div>
         </div>
       </>