diff --git a/packages/extension-ui/src/Popup/Authorize/Request.tsx b/packages/extension-ui/src/Popup/Authorize/Request.tsx
index 2bf3d453b4a..79988cd6e6f 100644
--- a/packages/extension-ui/src/Popup/Authorize/Request.tsx
+++ b/packages/extension-ui/src/Popup/Authorize/Request.tsx
@@ -39,10 +39,7 @@ function Request ({ authId, className, isFirst, request: { origin }, url }: Prop
         {isFirst && (
           <>
             <RequestWarning>Only approve this request if you trust the application. Approving gives the application access to the addresses of your accounts.</RequestWarning>
-            <AcceptButton
-              label='Yes, allow this application access'
-              onClick={_onApprove}
-            />
+            <AcceptButton onClick={_onApprove}>Yes, allow this application access</AcceptButton>
           </>
         )}
         <RejectButton>
@@ -67,9 +64,8 @@ const Info = styled.div`
 `;
 
 const AcceptButton = styled(Button)`
-  padding-top: 25px;
   width: 90%;
-  margin: auto;
+  margin: 25px auto 0;
 `;
 
 const RequestWarning = styled(Warning)`
diff --git a/packages/extension-ui/src/Popup/CreateAccount/AccountName.tsx b/packages/extension-ui/src/Popup/CreateAccount/AccountName.tsx
index e3e730951d1..6f372f12f7d 100644
--- a/packages/extension-ui/src/Popup/CreateAccount/AccountName.tsx
+++ b/packages/extension-ui/src/Popup/CreateAccount/AccountName.tsx
@@ -30,9 +30,10 @@ function AccountName ({ onCreate, address }: Props): React.ReactElement<Props> {
         <VerticalSpace/>
         <ButtonArea>
           <Button
-            label='Add the account with the generated seed'
             onClick={(): void | Promise<void | boolean> => onCreate(name, password)}
-          />
+          >
+            Add the account with the generated seed
+          </Button>
         </ButtonArea>
       </>
     )}
diff --git a/packages/extension-ui/src/Popup/CreateAccount/Mnemonic.tsx b/packages/extension-ui/src/Popup/CreateAccount/Mnemonic.tsx
index 57280fbe141..1701ea8c1c4 100644
--- a/packages/extension-ui/src/Popup/CreateAccount/Mnemonic.tsx
+++ b/packages/extension-ui/src/Popup/CreateAccount/Mnemonic.tsx
@@ -33,8 +33,8 @@ function Mnemonic ({ seed, onNextStep }: Props): React.ReactElement<Props> {
   const [isMnemonicSaved, setIsMnemonicSaved] = useState(false);
   return <>
     <Warning>
-      <div>Please write down your wallet’s mnemonic seed and keep it in a safe place.</div>
-      <div>Mnemonic seed is used to restore your wallet. Keep it carefully in case you lose your assets.</div>
+      Please write down your wallet’s mnemonic seed and keep it in a safe place. <br/>
+      Mnemonic seed is used to restore your wallet. Keep it carefully in case you lose your assets.
     </Warning>
     <MnemonicSeed seed={seed} onCopy={onCopy} onPrint={onPrint(seed)}/>
     <VerticalSpace/>
diff --git a/packages/extension-ui/src/Popup/Export.tsx b/packages/extension-ui/src/Popup/Export.tsx
index 4885cbeb586..0fcd206f81d 100644
--- a/packages/extension-ui/src/Popup/Export.tsx
+++ b/packages/extension-ui/src/Popup/Export.tsx
@@ -53,11 +53,12 @@ function Export ({ match: { params: { address } } }: Props): React.ReactElement<
             <Button
               isDisabled={pass.length === 0}
               isDanger
-              label='I want to export this account'
               onClick={_onExportButtonClick}
               className='export-button'
               data-export-button
-            />
+            >
+              I want to export this account
+            </Button>
           </ActionArea>
         </Address>
       </div>
diff --git a/packages/extension-ui/src/Popup/Forget.tsx b/packages/extension-ui/src/Popup/Forget.tsx
index 21a1ecb014b..fd98f7a8a41 100644
--- a/packages/extension-ui/src/Popup/Forget.tsx
+++ b/packages/extension-ui/src/Popup/Forget.tsx
@@ -27,18 +27,21 @@ function Forget ({ match: { params: { address } } }: Props): React.ReactElement<
       <div>
         <Address address={address}>
           <Warning danger>You are about to remove the account. This means that you will not be able to access it via this extension anymore. If you wish to recover it, you would need to use the seed.</Warning>
-          <ForgetButton
-            isDanger
-            label='I want to forget this account'
-            onClick={_onClick}
-          />
+          <ActionArea>
+            <Button
+              isDanger
+              onClick={_onClick}
+            >
+              I want to forget this account
+            </Button>
+          </ActionArea>
         </Address>
       </div>
     </>
   );
 }
 
-const ForgetButton = styled(Button)`
+const ActionArea = styled.div`
   padding: 25px 24px;
 `;
 
diff --git a/packages/extension-ui/src/Popup/ImportQr.tsx b/packages/extension-ui/src/Popup/ImportQr.tsx
index 28c8591dab3..20b4fd4315e 100644
--- a/packages/extension-ui/src/Popup/ImportQr.tsx
+++ b/packages/extension-ui/src/Popup/ImportQr.tsx
@@ -49,10 +49,9 @@ export default function ImportQr (): React.ReactElement<Props> {
           <VerticalSpace/>
           {name && (
             <ButtonArea>
-              <Button
-                label='Add the account with identified address'
-                onClick={_onCreate}
-              />
+              <Button onClick={_onCreate}>
+                Add the account with identified address
+              </Button>
             </ButtonArea>
           )}
         </>
diff --git a/packages/extension-ui/src/Popup/ImportSeed.tsx b/packages/extension-ui/src/Popup/ImportSeed.tsx
index 3f9818a3759..fa687eb43e0 100644
--- a/packages/extension-ui/src/Popup/ImportSeed.tsx
+++ b/packages/extension-ui/src/Popup/ImportSeed.tsx
@@ -64,10 +64,7 @@ export default function Import (): React.ReactElement<Props> {
           />
           <VerticalSpace/>
           <ButtonArea>
-            <Button
-              label='Add the account with the supplied seed'
-              onClick={_onCreate}
-            />
+            <Button onClick={_onCreate}>Add the account with the supplied seed</Button>
           </ButtonArea>
         </>
       )}
@@ -77,8 +74,8 @@ export default function Import (): React.ReactElement<Props> {
 
 const SeedInput = styled(TextAreaWithLabel)`
   margin-bottom: 16px;
-  
+
   textarea {
-    height: unset;  
+    height: unset;
   }
 `;
diff --git a/packages/extension-ui/src/Popup/Settings/index.tsx b/packages/extension-ui/src/Popup/Settings/index.tsx
index ab19032c5eb..48580d7f618 100644
--- a/packages/extension-ui/src/Popup/Settings/index.tsx
+++ b/packages/extension-ui/src/Popup/Settings/index.tsx
@@ -61,10 +61,7 @@ export default function Settings (): React.ReactElement<{}> {
         value={camera}
       />
       {isPopup && (
-        <Button
-          label='Open extension in new window'
-          onClick={windowOpen}
-        />
+        <Button onClick={windowOpen}>Open extension in new window</Button>
       )}
     </div>
   );
diff --git a/packages/extension-ui/src/Popup/Signing/Qr.tsx b/packages/extension-ui/src/Popup/Signing/Qr.tsx
index 9c46f99b03c..c270ebf8155 100644
--- a/packages/extension-ui/src/Popup/Signing/Qr.tsx
+++ b/packages/extension-ui/src/Popup/Signing/Qr.tsx
@@ -40,10 +40,7 @@ function Qr ({ className, onSignature, payload, request }: Props): React.ReactEl
         />
       }
       {!isScanning && (
-        <Button
-          label='Scan signature via camera'
-          onClick={_onShowQr}
-        />
+        <Button onClick={_onShowQr}>Scan signature via camera</Button>
       )}
     </div>
   );
diff --git a/packages/extension-ui/src/Popup/Signing/Unlock.tsx b/packages/extension-ui/src/Popup/Signing/Unlock.tsx
index 9b98ad5ba51..710112d8269 100644
--- a/packages/extension-ui/src/Popup/Signing/Unlock.tsx
+++ b/packages/extension-ui/src/Popup/Signing/Unlock.tsx
@@ -34,10 +34,7 @@ export default function Unlock ({ className, onSign }: Props): React.ReactElemen
         onChange={setPassword}
         type='password'
       />
-      <Button
-        label='Sign the transaction'
-        onClick={_onClick}
-      />
+      <Button onClick={_onClick}>Sign the transaction</Button>
     </div>
   );
 }
diff --git a/packages/extension-ui/src/Popup/Welcome.tsx b/packages/extension-ui/src/Popup/Welcome.tsx
index f527aef1f88..3fbacf5bab7 100644
--- a/packages/extension-ui/src/Popup/Welcome.tsx
+++ b/packages/extension-ui/src/Popup/Welcome.tsx
@@ -32,10 +32,7 @@ export default function Welcome (): React.ReactElement<Props> {
       <Note>... we are not in the information collection business (even anonymized).</Note>
       <VerticalSpace/>
       <ButtonArea>
-        <Button
-          label='Understood, let me continue'
-          onClick={_onClick}
-        />
+        <Button onClick={_onClick}>Understood, let me continue</Button>
       </ButtonArea>
     </>
   );
diff --git a/packages/extension-ui/src/components/Button.tsx b/packages/extension-ui/src/components/Button.tsx
index 923bd7d8d4d..ac827b81efb 100644
--- a/packages/extension-ui/src/components/Button.tsx
+++ b/packages/extension-ui/src/components/Button.tsx
@@ -10,13 +10,11 @@ interface Props {
   children?: React.ReactNode;
   isDanger?: boolean;
   isDisabled?: boolean;
-  isSmall?: boolean;
-  label?: string;
   onClick?: () => void | Promise<void | boolean>;
   to?: string;
 }
 
-function Button ({ children, className, isDisabled, label, onClick, to }: Props): React.ReactElement<Props> {
+function Button ({ children, className, isDisabled, onClick, to }: Props): React.ReactElement<Props> {
   const _onClick = (): void => {
     if (isDisabled) {
       return;
@@ -30,41 +28,34 @@ function Button ({ children, className, isDisabled, label, onClick, to }: Props)
   };
 
   return (
-    <div className={className}>
-      <button onClick={_onClick} disabled={isDisabled}>
-        {label}{children}
-      </button>
-    </div>
+    <button className={className} onClick={_onClick} disabled={isDisabled}>
+      {children}
+    </button>
   );
 }
 
 export default styled(Button)`
+  display: block;
+  width: 100%;
+  height: ${({ isDanger }): string => isDanger ? '40px' : '48px'};
   box-sizing: border-box;
-  display: ${({ isSmall }): string => isSmall ? 'inline-block' : 'block'};
-  width: ${({ isSmall }): string => isSmall ? 'auto' : '100%'};
+  border: none;
+  border-radius: ${({ theme }): string => theme.borderRadius};
+  color: ${({ theme }): string => theme.textColor};
+  font-size: 15px;
+  font-weight: 600;
+  line-height: 20px;
+  padding: 0 1rem;
+  text-align: center;
+  background: ${({ isDanger, theme }): string => isDanger ? theme.buttonBackgroundDanger : theme.buttonBackground};
+  cursor: pointer;
+
+  &:disabled {
+    opacity: 0.3;
+    cursor: default;
+  }
 
-  button {
-    background: ${({ isDanger, theme }): string => isDanger ? theme.buttonBackgroundDanger : theme.buttonBackground};
-    border: none;
-    border-radius: ${({ theme }): string => theme.borderRadius};
-    color: ${({ theme }): string => theme.textColor};
-    cursor: pointer;
-    display: block;
-    font-size: 15px;
-    font-weight: 600;
-    height: ${({ isDanger }): string => isDanger ? '40px' : '48px'};
-    line-height: 20px;
-    padding: 0 1rem;
-    text-align: center;
-    width: 100%;
-    
-    &:disabled {
-      opacity: 0.3;
-      cursor: default;
-    }
-    
-    &:not(:disabled):hover {
-      background: ${({ theme }): string => theme.primaryColor};
-    }
+  &:not(:disabled):hover {
+    background: ${({ isDanger, theme }): string => isDanger ? theme.buttonBackgroundDangerHover : theme.primaryColor};
   }
 `;
diff --git a/packages/extension-ui/src/components/themes.ts b/packages/extension-ui/src/components/themes.ts
index d8990b59920..19f9f3add25 100644
--- a/packages/extension-ui/src/components/themes.ts
+++ b/packages/extension-ui/src/components/themes.ts
@@ -7,6 +7,7 @@ export const defaultTheme = {
   highlightedAreaBackground: 'rgba(13, 14, 19, 0.7)',
   buttonBackground: 'linear-gradient(95.52deg, #FF8A00 0.14%, #FF7A00 100.14%)',
   buttonBackgroundDanger: '#D92A2A',
+  buttonBackgroundDangerHover: '#D93B3B',
   textColor: '#FFFFFF',
   textColorDanger: '#FF5858',
   errorBorderColor: '#7E3530',