diff --git a/packages/app-accounts/src/modals/Backup.tsx b/packages/app-accounts/src/modals/Backup.tsx
index e3a5127e0b22..0f7a5d7ae556 100644
--- a/packages/app-accounts/src/modals/Backup.tsx
+++ b/packages/app-accounts/src/modals/Backup.tsx
@@ -68,7 +68,6 @@ export default function ({ address, onClose }: Props): React.ReactElement<Props>
     <Modal
       className='app--accounts-Modal'
       header={t('Backup account')}
-      open
     >
       <Content
         address={address}
diff --git a/packages/app-accounts/src/modals/ChangePass.tsx b/packages/app-accounts/src/modals/ChangePass.tsx
index 54b316034669..537d31f7dba8 100644
--- a/packages/app-accounts/src/modals/ChangePass.tsx
+++ b/packages/app-accounts/src/modals/ChangePass.tsx
@@ -38,7 +38,6 @@ class ChangePass extends TxComponent<Props, State> {
       <Modal
         className='app--accounts-Modal'
         header={t('Change account password')}
-        open
       >
         {this.renderContent()}
         {this.renderButtons()}
diff --git a/packages/app-accounts/src/modals/Create.tsx b/packages/app-accounts/src/modals/Create.tsx
index 8bad72a16261..16b2ed917680 100644
--- a/packages/app-accounts/src/modals/Create.tsx
+++ b/packages/app-accounts/src/modals/Create.tsx
@@ -191,7 +191,6 @@ function Create ({ className, onClose, onStatusChange, seed: propsSeed, type: pr
     <Modal
       className={className}
       header={t('Add an account via seed')}
-      open
     >
       {address && isConfirmationOpen && (
         <CreateConfirmation
diff --git a/packages/app-accounts/src/modals/CreateConfirmation.tsx b/packages/app-accounts/src/modals/CreateConfirmation.tsx
index 7b0914ec3f89..968d27002f16 100644
--- a/packages/app-accounts/src/modals/CreateConfirmation.tsx
+++ b/packages/app-accounts/src/modals/CreateConfirmation.tsx
@@ -18,10 +18,7 @@ export default function CreateConfirmation ({ address, name, onClose, onCommit }
   const { t } = useTranslation();
 
   return (
-    <Modal
-      header={t('Important notice')}
-      open
-    >
+    <Modal header={t('Important notice')}>
       <Modal.Content>
         <AddressRow
           defaultName={name}
diff --git a/packages/app-accounts/src/modals/Derive.tsx b/packages/app-accounts/src/modals/Derive.tsx
index 6c78251b66db..11b6410486ec 100644
--- a/packages/app-accounts/src/modals/Derive.tsx
+++ b/packages/app-accounts/src/modals/Derive.tsx
@@ -138,7 +138,6 @@ export default function Derive ({ className, from, onClose }: Props): React.Reac
     <Modal
       className={className}
       header={t('Derive account from pair')}
-      open
     >
       {address && isConfirmationOpen && (
         <CreateConfirmation
diff --git a/packages/app-accounts/src/modals/Identity.tsx b/packages/app-accounts/src/modals/Identity.tsx
index 39a9978a9273..06ae7d69e7c7 100644
--- a/packages/app-accounts/src/modals/Identity.tsx
+++ b/packages/app-accounts/src/modals/Identity.tsx
@@ -105,7 +105,6 @@ function Identity ({ address, className, onClose }: Props): React.ReactElement<P
     <Modal
       className={className}
       header={t('Register identity')}
-      open
     >
       <Modal.Content>
         <Input
diff --git a/packages/app-accounts/src/modals/Import.tsx b/packages/app-accounts/src/modals/Import.tsx
index 4e8730798c3b..5b77d9309e80 100644
--- a/packages/app-accounts/src/modals/Import.tsx
+++ b/packages/app-accounts/src/modals/Import.tsx
@@ -38,10 +38,7 @@ class Import extends TxComponent<Props, State> {
     const { isFileValid, isPassValid } = this.state;
 
     return (
-      <Modal
-        header={t('Add via backup file')}
-        open
-      >
+      <Modal header={t('Add via backup file')}>
         {this.renderInput()}
         <Modal.Actions>
           <Button.Group>
diff --git a/packages/app-accounts/src/modals/Qr.tsx b/packages/app-accounts/src/modals/Qr.tsx
index 593ef76fee05..0b4f2ad8e55a 100644
--- a/packages/app-accounts/src/modals/Qr.tsx
+++ b/packages/app-accounts/src/modals/Qr.tsx
@@ -50,7 +50,6 @@ function QrModal ({ className, onClose, onStatusChange }: Props): React.ReactEle
     <Modal
       className={className}
       header={t('Add account via Qr')}
-      open
     >
       <Modal.Content>
         {
diff --git a/packages/app-accounts/src/modals/Transfer.tsx b/packages/app-accounts/src/modals/Transfer.tsx
index 513e073e30d5..90915e34cf4c 100644
--- a/packages/app-accounts/src/modals/Transfer.tsx
+++ b/packages/app-accounts/src/modals/Transfer.tsx
@@ -87,7 +87,6 @@ function Transfer ({ className, onClose, recipientId: propRecipientId, senderId:
     <Modal
       className='app--accounts-Modal'
       header={t('Send funds')}
-      open
     >
       <Modal.Content>
         <div className={className}>
diff --git a/packages/app-address-book/src/modals/Create.tsx b/packages/app-address-book/src/modals/Create.tsx
index 88037d8f1d54..8dd0925505df 100644
--- a/packages/app-address-book/src/modals/Create.tsx
+++ b/packages/app-address-book/src/modals/Create.tsx
@@ -75,10 +75,7 @@ export default function Create ({ onClose, onStatusChange }: Props): React.React
   };
 
   return (
-    <Modal
-      header={t('Add an address')}
-      open
-    >
+    <Modal header={t('Add an address')}>
       <Modal.Content>
         <AddressRow
           defaultName={name}
diff --git a/packages/app-contracts/src/RemoveABI.tsx b/packages/app-contracts/src/RemoveABI.tsx
index c012ca700844..ba08bb4f47c3 100644
--- a/packages/app-contracts/src/RemoveABI.tsx
+++ b/packages/app-contracts/src/RemoveABI.tsx
@@ -28,7 +28,6 @@ export default function RemoveABI ({ code, onClose, onRemove }: Props): React.Re
       className='app--accounts-Modal'
       header={t('Confirm ABI removal')}
       onClose={onClose}
-      open
     >
       <Modal.Content>
         <CodeRow
diff --git a/packages/app-council/src/Motions/Slashing.tsx b/packages/app-council/src/Motions/Slashing.tsx
index a07e6c64f2cf..1c66bdb67b3b 100644
--- a/packages/app-council/src/Motions/Slashing.tsx
+++ b/packages/app-council/src/Motions/Slashing.tsx
@@ -86,7 +86,6 @@ export default function Slashing ({ className, isMember }: Props): React.ReactEl
         <Modal
           className={className}
           header={t('Revert pending slashes')}
-          open
         >
           <Modal.Content>
             <InputAddress
diff --git a/packages/app-democracy/src/Overview/PreImage.tsx b/packages/app-democracy/src/Overview/PreImage.tsx
index 0bd127188304..761a043ea2a5 100644
--- a/packages/app-democracy/src/Overview/PreImage.tsx
+++ b/packages/app-democracy/src/Overview/PreImage.tsx
@@ -38,7 +38,6 @@ function PreImage ({ className, onClose }: Props): React.ReactElement<Props> {
     <Modal
       className={className}
       header={t('Submit preimage')}
-      open
     >
       <Modal.Content>
         <InputAddress
diff --git a/packages/app-democracy/src/Overview/Propose.tsx b/packages/app-democracy/src/Overview/Propose.tsx
index b52f943d57ef..5d83394f062b 100644
--- a/packages/app-democracy/src/Overview/Propose.tsx
+++ b/packages/app-democracy/src/Overview/Propose.tsx
@@ -30,7 +30,6 @@ export default function Propose ({ className, onClose }: Props): React.ReactElem
     <Modal
       className={className}
       header={t('Submit proposal')}
-      open
     >
       <Modal.Content>
         <InputAddress
diff --git a/packages/app-democracy/src/Overview/Seconding.tsx b/packages/app-democracy/src/Overview/Seconding.tsx
index eca0ddf64415..cbdad556be5c 100644
--- a/packages/app-democracy/src/Overview/Seconding.tsx
+++ b/packages/app-democracy/src/Overview/Seconding.tsx
@@ -35,7 +35,6 @@ export default function Seconding ({ depositors, proposalId }: Props): React.Rea
       {isSecondingOpen && (
         <Modal
           header={t('Second proposal')}
-          open
           size='small'
         >
           <Modal.Content>
diff --git a/packages/app-democracy/src/Overview/Voting.tsx b/packages/app-democracy/src/Overview/Voting.tsx
index 1961c745dfc2..a8e5a29ed359 100644
--- a/packages/app-democracy/src/Overview/Voting.tsx
+++ b/packages/app-democracy/src/Overview/Voting.tsx
@@ -33,7 +33,6 @@ export default function Voting ({ referendumId }: Props): React.ReactElement<Pro
       {isVotingOpen && (
         <Modal
           header={t('Vote on proposal')}
-          open
           size='small'
         >
           <Modal.Content>
diff --git a/packages/app-generic-asset/src/modals/Create.tsx b/packages/app-generic-asset/src/modals/Create.tsx
index ff4636524953..f409c6581397 100644
--- a/packages/app-generic-asset/src/modals/Create.tsx
+++ b/packages/app-generic-asset/src/modals/Create.tsx
@@ -28,10 +28,7 @@ function Create ({ onClose, onRegister, t }: Props): React.ReactElement<Props> {
   };
 
   return (
-    <Modal
-      header={t('Register an Asset')}
-      open
-    >
+    <Modal header={t('Register an Asset')}>
       <Modal.Content>
         <InputNumber
           help={t('Enter the Asset ID of the token you want to manage.')}
diff --git a/packages/app-staking/src/Actions/Account/BondExtra.tsx b/packages/app-staking/src/Actions/Account/BondExtra.tsx
index 66e56cc2a2f2..8a27e24f7132 100644
--- a/packages/app-staking/src/Actions/Account/BondExtra.tsx
+++ b/packages/app-staking/src/Actions/Account/BondExtra.tsx
@@ -68,7 +68,6 @@ class BondExtra extends TxComponent<Props, State> {
       <Modal
         className='staking--BondExtra'
         header= {t('Bond more funds')}
-        open
         size='small'
       >
         {this.renderContent()}
diff --git a/packages/app-staking/src/Actions/Account/InjectKeys.tsx b/packages/app-staking/src/Actions/Account/InjectKeys.tsx
index 370cf72a4968..87cafd106e1e 100644
--- a/packages/app-staking/src/Actions/Account/InjectKeys.tsx
+++ b/packages/app-staking/src/Actions/Account/InjectKeys.tsx
@@ -72,7 +72,6 @@ function InjectKeys ({ isOpen = true, onClose, t }: Props): React.ReactElement<P
   return (
     <Modal
       header={t('Inject Keys')}
-      open
       size='small'
     >
       <Modal.Content>
diff --git a/packages/app-staking/src/Actions/Account/Nominate.tsx b/packages/app-staking/src/Actions/Account/Nominate.tsx
index ea9b835a927c..be2bd35022a9 100644
--- a/packages/app-staking/src/Actions/Account/Nominate.tsx
+++ b/packages/app-staking/src/Actions/Account/Nominate.tsx
@@ -61,7 +61,6 @@ function Nominate ({ className, controllerId, nominees, onClose, next, stakingOv
     <Modal
       className={`staking--Nominating ${className}`}
       header={t('Nominate Validators')}
-      open
     >
       <Modal.Content className='ui--signer-Signer-Content'>
         <InputAddress
diff --git a/packages/app-staking/src/Actions/Account/SetControllerAccount.tsx b/packages/app-staking/src/Actions/Account/SetControllerAccount.tsx
index 8759f7e7c363..ed915bdbf950 100644
--- a/packages/app-staking/src/Actions/Account/SetControllerAccount.tsx
+++ b/packages/app-staking/src/Actions/Account/SetControllerAccount.tsx
@@ -45,7 +45,6 @@ class SetControllerAccount extends TxComponent<Props, State> {
       <Modal
         className='staking--SetControllerAccount'
         header={t('Change controller account')}
-        open
         size='small'
       >
         <Modal.Content className='ui--signer-Signer-Content'>
diff --git a/packages/app-staking/src/Actions/Account/SetRewardDestination.tsx b/packages/app-staking/src/Actions/Account/SetRewardDestination.tsx
index 9439e694abc5..631d38f44a8d 100644
--- a/packages/app-staking/src/Actions/Account/SetRewardDestination.tsx
+++ b/packages/app-staking/src/Actions/Account/SetRewardDestination.tsx
@@ -39,7 +39,6 @@ class SetRewardDestination extends TxComponent<Props, State> {
       <Modal
         className='staking--Bonding'
         header={t('Bonding Preferences')}
-        open
         size='small'
       >
         {this.renderContent()}
diff --git a/packages/app-staking/src/Actions/Account/SetSessionKey.tsx b/packages/app-staking/src/Actions/Account/SetSessionKey.tsx
index 857e97ce07ff..a68c5400a4e7 100644
--- a/packages/app-staking/src/Actions/Account/SetSessionKey.tsx
+++ b/packages/app-staking/src/Actions/Account/SetSessionKey.tsx
@@ -42,7 +42,6 @@ function SetSessionKey ({ controllerId, isOpen, onClose, sessionIds, stashId, t
     <Modal
       className='staking--SetSessionAccount'
       header={t('Set Session Key')}
-      open
       size='small'
     >
       <Modal.Content className='ui--signer-Signer-Content'>
diff --git a/packages/app-staking/src/Actions/Account/Unbond.tsx b/packages/app-staking/src/Actions/Account/Unbond.tsx
index 7bb36dc77331..88274ba9907a 100644
--- a/packages/app-staking/src/Actions/Account/Unbond.tsx
+++ b/packages/app-staking/src/Actions/Account/Unbond.tsx
@@ -63,7 +63,6 @@ class Unbond extends TxComponent<Props, State> {
       <Modal
         className='staking--Unbond'
         header={t('Unbond funds')}
-        open
         size='small'
       >
         {this.renderContent()}
diff --git a/packages/app-staking/src/Actions/Account/Validate.tsx b/packages/app-staking/src/Actions/Account/Validate.tsx
index 619a3c354278..f70eaf2e29c0 100644
--- a/packages/app-staking/src/Actions/Account/Validate.tsx
+++ b/packages/app-staking/src/Actions/Account/Validate.tsx
@@ -85,7 +85,6 @@ class Validate extends TxComponent<Props, State> {
       <Modal
         className='staking--Staking'
         header={t('Set validator preferences')}
-        open
         size='small'
       >
         {this.renderContent()}
diff --git a/packages/app-staking/src/Actions/NewStake.tsx b/packages/app-staking/src/Actions/NewStake.tsx
index 0d6b188e7529..5413754d1328 100644
--- a/packages/app-staking/src/Actions/NewStake.tsx
+++ b/packages/app-staking/src/Actions/NewStake.tsx
@@ -59,7 +59,6 @@ class NewStake extends TxComponent<Props, State> {
       <Modal
         className='staking--Bonding'
         header={t('Bonding Preferences')}
-        open
         size='small'
       >
         <Modal.Content className='ui--signer-Signer-Content'>
diff --git a/packages/app-tech-comm/src/Proposals/Voting.tsx b/packages/app-tech-comm/src/Proposals/Voting.tsx
index eeb29332a778..30ce6d9ff946 100644
--- a/packages/app-tech-comm/src/Proposals/Voting.tsx
+++ b/packages/app-tech-comm/src/Proposals/Voting.tsx
@@ -35,7 +35,6 @@ function Voting ({ hash, proposalId, t }: Props): React.ReactElement<Props> | nu
       {isVotingOpen && (
         <Modal
           header={t('Vote on proposal')}
-          open
           size='small'
         >
           <Modal.Content>
diff --git a/packages/app-toolbox/src/Unlock.tsx b/packages/app-toolbox/src/Unlock.tsx
index 480ef826122b..40fd5c2c381a 100644
--- a/packages/app-toolbox/src/Unlock.tsx
+++ b/packages/app-toolbox/src/Unlock.tsx
@@ -46,7 +46,6 @@ class Unlock extends TxComponent<Props, State> {
       <Modal
         className='toolbox--Unlock'
         header={t('Unlock account')}
-        open
       >
         {this.renderContent()}
         {this.renderActions()}
diff --git a/packages/app-treasury/src/Overview/Propose.tsx b/packages/app-treasury/src/Overview/Propose.tsx
index 1b1a862b9f5f..a127a95a684f 100644
--- a/packages/app-treasury/src/Overview/Propose.tsx
+++ b/packages/app-treasury/src/Overview/Propose.tsx
@@ -35,7 +35,6 @@ export default function Propose ({ className }: Props): React.ReactElement<Props
         <Modal
           className={className}
           header={t('Submit treasury proposal')}
-          open
           size='small'
         >
           <Modal.Content>
diff --git a/packages/app-treasury/src/Overview/Submission.tsx b/packages/app-treasury/src/Overview/Submission.tsx
index 6fea8316c944..1ed5545cdd1a 100644
--- a/packages/app-treasury/src/Overview/Submission.tsx
+++ b/packages/app-treasury/src/Overview/Submission.tsx
@@ -47,7 +47,6 @@ export default function Submission ({ councilProposals, id, isDisabled }: Props)
       {isOpen && (
         <Modal
           header={t('Submit to council')}
-          open
           size='small'
         >
           <Modal.Content>
diff --git a/packages/app-treasury/src/Overview/Voting.tsx b/packages/app-treasury/src/Overview/Voting.tsx
index ce95958e7ab0..d735f93e7707 100644
--- a/packages/app-treasury/src/Overview/Voting.tsx
+++ b/packages/app-treasury/src/Overview/Voting.tsx
@@ -65,7 +65,6 @@ export default function Voting ({ councilProposals, isDisabled }: Props): React.
       {isOpen && (
         <Modal
           header={t('Vote on proposal')}
-          open
           size='small'
         >
           <Modal.Content>
diff --git a/packages/apps/src/modals/Network.tsx b/packages/apps/src/modals/Network.tsx
index b38c68bfbb4b..e1fc8fe9761b 100644
--- a/packages/apps/src/modals/Network.tsx
+++ b/packages/apps/src/modals/Network.tsx
@@ -20,7 +20,6 @@ export default function NetworkModal ({ className, onClose }: Props): React.Reac
     <Modal
       className={className}
       header={t('Select Network')}
-      open
     >
       <Modal.Content>
         <General
diff --git a/packages/react-components/src/AccountName.tsx b/packages/react-components/src/AccountName.tsx
index 8b700990fa43..86107901f607 100644
--- a/packages/react-components/src/AccountName.tsx
+++ b/packages/react-components/src/AccountName.tsx
@@ -250,7 +250,6 @@ function AccountName ({ children, className, defaultName, label, onClick, overri
       {isJudgementOpen && (
         <Modal
           header={t('Provide judgement')}
-          open
           size='small'
         >
           <Modal.Content>
diff --git a/packages/react-components/src/Forget.tsx b/packages/react-components/src/Forget.tsx
index c765a237b7c9..26be73c82946 100644
--- a/packages/react-components/src/Forget.tsx
+++ b/packages/react-components/src/Forget.tsx
@@ -102,7 +102,6 @@ export default function Forget (props: Props): React.ReactElement<Props> {
       className='app--accounts-Modal'
       header={getHeaderText(mode, t)}
       onClose={onClose}
-      open
     >
       <Modal.Content>{renderContent(props, t)}</Modal.Content>
       <Modal.Actions>
diff --git a/packages/react-components/src/Modal.tsx b/packages/react-components/src/Modal.tsx
index 77dc935b8ade..b605438460ce 100644
--- a/packages/react-components/src/Modal.tsx
+++ b/packages/react-components/src/Modal.tsx
@@ -12,11 +12,12 @@ import { classes } from './util';
 interface Props extends BareProps {
   children: React.ReactNode;
   header?: React.ReactNode;
+  open?: boolean;
   [index: string]: any;
 }
 
 function Modal (props: Props): React.ReactElement<Props> {
-  const { className, children, header } = props;
+  const { className, children, header, open = true } = props;
 
   return (
     <SUIModal
@@ -24,6 +25,7 @@ function Modal (props: Props): React.ReactElement<Props> {
       className={classes('theme--default', 'ui--Modal', className)}
       dimmer='inverted'
       header={undefined}
+      open={open}
     >
       {header && (
         <SUIModal.Header>{header}</SUIModal.Header>
diff --git a/packages/react-signer/src/Modal.tsx b/packages/react-signer/src/Modal.tsx
index 59d7221b04a8..6d00e0923177 100644
--- a/packages/react-signer/src/Modal.tsx
+++ b/packages/react-signer/src/Modal.tsx
@@ -163,10 +163,7 @@ class Signer extends React.PureComponent<Props, State> {
     }
 
     return (
-      <Modal
-        className='ui--signer-Signer'
-        open
-      >
+      <Modal className='ui--signer-Signer'>
         <ErrorBoundary onError={this.onRenderError}>
           {this.renderContent()}
         </ErrorBoundary>