diff --git a/packages/extension-ui/src/Popup/Accounts/index.tsx b/packages/extension-ui/src/Popup/Accounts/index.tsx
index fa63a2112dc..12cc3a24cfe 100644
--- a/packages/extension-ui/src/Popup/Accounts/index.tsx
+++ b/packages/extension-ui/src/Popup/Accounts/index.tsx
@@ -3,6 +3,7 @@
 // of the Apache-2.0 license. See the LICENSE file for details.
 
 import React, { useContext } from 'react';
+import QrImage from '../../assets/qr.svg';
 
 import {
   AccountContext,
@@ -15,6 +16,41 @@ import {
   VerticalSpace
 } from '../../components';
 import Account from './Account';
+import styled from 'styled-components';
+
+const ButtonWithSubtitle = styled(Button)`
+  margin-right: 8px;
+  
+  button {
+    padding-top: 0;
+    padding-bottom: 0;
+  }
+  h4 {
+    margin: 0;
+    font-weight: 600;
+    font-size: 15px;
+    line-height: 20px;
+  }
+  p {
+    margin: 0;
+    font-weight: 400;
+    font-size: 12px;
+    line-height: 16px;
+  }
+`;
+
+const QrButton = styled(Button)`
+  width: 60px;
+  
+  span {
+    width: 20px;
+    height: 20px;
+    display: block;
+    mask: url(${QrImage});
+    mask-size: cover;
+    background: ${({ theme }): string => theme.color}; 
+  }
+`;
 
 type Props = {};
 
@@ -47,19 +83,18 @@ export default function Accounts (): React.ReactElement<Props> {
       }
       <VerticalSpace/>
       <ButtonArea>
-        <Button
-          label='I want to create a new account with a new seed'
-          to='/account/create'
-        />
-        <Button
-          label='I have a pre-existing seed, import the account'
-          to='/account/import-seed'
-        />
+        <ButtonWithSubtitle to='/account/create'>
+          <h4>Create New Account</h4>
+          <p>With new seed</p>
+        </ButtonWithSubtitle>
+        <ButtonWithSubtitle to='/account/import-seed'>
+          <h4>Import an Account</h4>
+          <p>I have a pre-existing seed</p>
+        </ButtonWithSubtitle>
         {mediaAllowed && (
-          <Button
-            label='I have an external account, add it via QR'
-            to='/account/import-qr'
-          />
+          <QrButton to='/account/import-qr'>
+            <span/>
+          </QrButton>
         )}
       </ButtonArea>
     </>
diff --git a/packages/extension-ui/src/Popup/CreateAccount/CreationStep.tsx b/packages/extension-ui/src/Popup/CreateAccount/CreationStep.tsx
index 1b6280d874a..7709c4190d7 100644
--- a/packages/extension-ui/src/Popup/CreateAccount/CreationStep.tsx
+++ b/packages/extension-ui/src/Popup/CreateAccount/CreationStep.tsx
@@ -26,13 +26,15 @@ const Title = styled.span`
 const CurrentStep = styled.span`
   font-size: ${({ theme }): string => theme.labelFontSize};
   line-height: ${({ theme }): string => theme.labelLineHeight};
-  color: ${({ theme }): string => theme.primaryColor}
+  color: ${({ theme }): string => theme.primaryColor};
+  font-weight: 600;
 `;
 
 const TotalSteps = styled.span`
   font-size: ${({ theme }): string => theme.labelFontSize};
   line-height: ${({ theme }): string => theme.labelLineHeight};
-  color: ${({ theme }): string => theme.color}
+  color: ${({ theme }): string => theme.color};
+  font-weight: 600;
 `;
 
 function CreationStep ({ step, onClick, className }: Props): React.ReactElement<Props> {
diff --git a/packages/extension-ui/src/assets/fonts/Nunitobold.woff b/packages/extension-ui/src/assets/fonts/Nunitobold.woff
deleted file mode 100644
index 9875cec6da5..00000000000
Binary files a/packages/extension-ui/src/assets/fonts/Nunitobold.woff and /dev/null differ
diff --git a/packages/extension-ui/src/assets/fonts/Nunitobold.woff2 b/packages/extension-ui/src/assets/fonts/Nunitobold.woff2
deleted file mode 100644
index b1d3b7b78ea..00000000000
Binary files a/packages/extension-ui/src/assets/fonts/Nunitobold.woff2 and /dev/null differ
diff --git a/packages/extension-ui/src/assets/fonts/Nunitolight.woff b/packages/extension-ui/src/assets/fonts/Nunitolight.woff
new file mode 100644
index 00000000000..e4e6450a3f2
Binary files /dev/null and b/packages/extension-ui/src/assets/fonts/Nunitolight.woff differ
diff --git a/packages/extension-ui/src/assets/fonts/Nunitolight.woff2 b/packages/extension-ui/src/assets/fonts/Nunitolight.woff2
new file mode 100644
index 00000000000..fe2cb1a7274
Binary files /dev/null and b/packages/extension-ui/src/assets/fonts/Nunitolight.woff2 differ
diff --git a/packages/extension-ui/src/assets/qr.svg b/packages/extension-ui/src/assets/qr.svg
new file mode 100644
index 00000000000..7b03f1b449e
--- /dev/null
+++ b/packages/extension-ui/src/assets/qr.svg
@@ -0,0 +1,3 @@
+<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M0 0V8H2V10H4V8H8V0H0ZM8 8V10H10V12H6V14H0V22H8V14H14V12H12V10H16V8H18V10H20V8H22V0H14V8H8ZM20 10V12H22V10H20ZM20 12H18V14H20V12ZM20 14V16H22V14H20ZM20 16H18V14H16V16H11V22H13V18H17V20H19V18H20V16ZM17 20H15V22H17V20ZM18 12V10H16V12H18ZM6 12V10H4V12H6ZM2 10H0V12H2V10ZM10 0V4H9V6H10V7H12V4H13V2H12V0H10ZM2 2H6V6H2V2ZM16 2H20V6H16V2ZM3 3V5H5V3H3ZM17 3V5H19V3H17ZM2 16H6V20H2V16ZM3 17V19H5V17H3ZM20 20V22H22V20H20Z" fill="white"/>
+</svg>
diff --git a/packages/extension-ui/src/components/ButtonArea.tsx b/packages/extension-ui/src/components/ButtonArea.tsx
index 001930e649e..e39552c4eeb 100644
--- a/packages/extension-ui/src/components/ButtonArea.tsx
+++ b/packages/extension-ui/src/components/ButtonArea.tsx
@@ -3,11 +3,10 @@
 // of the Apache-2.0 license. See the LICENSE file for details.
 
 import styled from 'styled-components';
-import Button from './Button';
 
 export default styled.div`
   display: flex;
-  flex-direction: column;
+  flex-direction: row;
   background: ${({ theme }): string => theme.btnAreaBackground};
   padding: 12px 1rem;
   
@@ -15,8 +14,4 @@ export default styled.div`
     margin-left: 0;
     margin-right: 0;
   }
-  
-  ${Button}:not(:last-child) {
-    margin-bottom: 1.5rem;
-  }
 `;
diff --git a/packages/extension-ui/src/components/Fonts.ts b/packages/extension-ui/src/components/Fonts.ts
index f1ca286db79..8c2534c4cea 100644
--- a/packages/extension-ui/src/components/Fonts.ts
+++ b/packages/extension-ui/src/components/Fonts.ts
@@ -3,28 +3,28 @@ import NunitoregularWoff2 from '../assets/fonts/Nunitoregular.woff2';
 import NunitoregularWoff from '../assets/fonts/Nunitoregular.woff';
 import NunitosemiboldWoff2 from '../assets/fonts/Nunitosemibold.woff2';
 import NunitosemiboldWoff from '../assets/fonts/Nunitosemibold.woff';
-import NunitoboldWoff2 from '../assets/fonts/Nunitobold.woff2';
-import NunitoboldWoff from '../assets/fonts/Nunitobold.woff';
+import NunitolightWoff2 from '../assets/fonts/Nunitolight.woff2';
+import NunitolightWoff from '../assets/fonts/Nunitolight.woff';
 
 export default createGlobalStyle`
   @font-face {
        font-family: 'Nunito';
-       src: url(${NunitoregularWoff2}) format('woff2'),
-        url(${NunitoregularWoff}) format('woff');
-       font-weight: normal;
+       src: url(${NunitolightWoff2}) format('woff2'),
+        url(${NunitolightWoff}) format('woff');
+       font-weight: 400;
        font-style: normal;
   }
   @font-face {
        font-family: 'Nunito';
-       src: url(${NunitosemiboldWoff2}) format('woff2'),
-        url(${NunitosemiboldWoff}) format('woff');
+       src: url(${NunitoregularWoff2}) format('woff2'),
+        url(${NunitoregularWoff}) format('woff');
        font-weight: 600;
        font-style: normal;
   }
   @font-face {
        font-family: 'Nunito';
-       src: url(${NunitoboldWoff2}) format('woff2'),
-        url(${NunitoboldWoff}) format('woff');
+       src: url(${NunitosemiboldWoff2}) format('woff2'),
+        url(${NunitosemiboldWoff}) format('woff');
        font-weight: 800;
        font-style: normal;
   }