diff --git a/src/Accounts/Accounts.js b/src/Accounts/Accounts.js
index 1d8e50d1b4797536d4f67611edde7027f5e9274b..1e0eaea5f06132b4c3b90747f61c7163cecfb562 100644
--- a/src/Accounts/Accounts.js
+++ b/src/Accounts/Accounts.js
@@ -42,19 +42,23 @@ class Accounts extends Component {
     return (
       <div>
         <nav className='header-nav'>
-          <p>&nbsp;</p>
-          <Link to='/accounts' className='header_title'>
-            Accounts
-          </Link>
-          <Link to='/accounts/new' className='icon -new'>
-            New account
-          </Link>
+          <div className='header-nav_left'>&nbsp;</div>
+          <div className='header-nav_title'>
+            <h1>
+              Accounts
+            </h1>
+          </div>
+          <div className='header-nav_right'>
+            <Link to='/accounts/new/step1' className='icon -new'>
+              New account
+            </Link>
+          </div>
         </nav>
 
         <div className='window_content'>
           <div className='box -scroller'>
             {accountsInfo
-              ? <ul className='list -padded'>
+              ? <ul className='list'>
                 {Object.keys(accountsInfo).map(address =>
                   <li
                     key={address}
diff --git a/src/Accounts/CreateAccount/CreateAccount.js b/src/Accounts/CreateAccount/CreateAccount.js
index d77196e49d2957a56a5b9c29a95d8025b07db314..252cf2ce29dd49ac6cf565db59b57e3c564f7cf7 100644
--- a/src/Accounts/CreateAccount/CreateAccount.js
+++ b/src/Accounts/CreateAccount/CreateAccount.js
@@ -17,15 +17,29 @@ class CreateAccount extends PureComponent {
     return (
       <div>
         <nav className='header-nav -modal'>
-          <Link to='/accounts' className='icon -close'>
-            Close
-          </Link>
-          <p className='header_title'>Create a new account</p>
-          <p>&nbsp;</p>
+          <div className='header-nav_left'>
+            <Link to='/accounts' className='icon -close'>
+              Close
+            </Link>
+          </div>
+          <div className='header-nav_title'>
+            <h1>
+              Create a new account
+            </h1>
+          </div>
+          <div className='header-nav_right'>
+            <div className='progress-indicator'>
+              <div className='progress-indicator_step -complete' />
+              <div className='progress-indicator_step -complete' />
+              <div className='progress-indicator_step' />
+              <div className='progress-indicator_step' />
+              <div className='progress-indicator_step' />
+            </div>
+          </div>
         </nav>
 
         <div className='window_content -modal'>
-          <Route path='/accounts/new' component={Step1} />
+          <Route path='/accounts/new/step1' component={Step1} />
           <Route path='/accounts/new/step2' component={Step2} />
           <Route path='/accounts/new/step3' component={Step3} />
           <Route path='/accounts/new/step4' component={Step4} />
diff --git a/src/Accounts/CreateAccount/CreateAccountStep1/CreateAccountStep1.js b/src/Accounts/CreateAccount/CreateAccountStep1/CreateAccountStep1.js
index 88213fbeeb36da570b4a34b54bb22e9cf6cf7b3f..6ef1fd7e608c7a5ed5f52a22ee3c9e5143ace869 100644
--- a/src/Accounts/CreateAccount/CreateAccountStep1/CreateAccountStep1.js
+++ b/src/Accounts/CreateAccount/CreateAccountStep1/CreateAccountStep1.js
@@ -25,31 +25,45 @@ class CreateAccountStep1 extends Component {
     } = this.props;
 
     return (
-      <div className='window_content -modal'>
+      <div className='window_content'>
         {address &&
-          <div className='box -modal -padded'>
-            <div>
-              Your new address:<br />
-              <Blockie seed={address} />
-              <pre>{address} </pre>
-              {pathname === '/accounts/new' &&
-                <button onClick={generateNewAccount}>Change</button>}
-            </div>
-            <label>
-              Set a name for this account:<br />
-              <input
-                disabled={pathname !== '/accounts/new'}
-                onChange={this.handleChange}
-                required
-                value={name}
-              />
-            </label>
-            <div className='box'>
-              {pathname === '/accounts/new' &&
-                !!name &&
-                <Link to='/accounts/new/step2'>
-                  <button>Select</button>
-                </Link>}
+          <div className='box -padded'>
+            <div className='box -card'>
+              <div className='account'>
+                <div className='account_avatar'>
+                  <Blockie seed={address} />
+                </div>
+                <div className='account_information'>
+                  <div className='account_name'>
+                    {name || <span className='span -placeholder'>Account</span>}
+                  </div>
+                  <div className='account_address'>
+                    {address}
+                  </div>
+                </div>
+              </div>
+              <div className='box -card-drawer'>
+                <div className='box -pull-up text -right'>
+                  {pathname === '/accounts/new/step1' &&
+                    <button onClick={generateNewAccount} className='button -tiny -reload'>Regenerate address</button>}
+                </div>
+                <div className='form_field'>
+                  <label>Name</label>
+                  <input
+                    onChange={this.handleChange}
+                    required
+                    placeholder='Enter a name for this account'
+                    value={name}
+                  />
+                </div>
+                <nav className='form-nav'>
+                  {name
+                    ? <Link to='/accounts/new/step2'>
+                      <button className='button'>Next</button>
+                    </Link>
+                    : <button className='button' disabled='true'>Next</button>}
+                </nav>
+              </div>
             </div>
           </div>}
       </div>
diff --git a/src/Accounts/CreateAccount/CreateAccountStep2/CreateAccountStep2.js b/src/Accounts/CreateAccount/CreateAccountStep2/CreateAccountStep2.js
index d788f2c808501932880d53186f935b10722314d5..b7752c6c7fa783b35c3f6e72079b193a1db13d7c 100644
--- a/src/Accounts/CreateAccount/CreateAccountStep2/CreateAccountStep2.js
+++ b/src/Accounts/CreateAccount/CreateAccountStep2/CreateAccountStep2.js
@@ -4,6 +4,7 @@
 // SPDX-License-Identifier: MIT
 
 import React, { Component } from 'react';
+import Blockie from 'react-blockies';
 import { inject, observer } from 'mobx-react';
 import { Link } from 'react-router-dom';
 
@@ -11,18 +12,40 @@ import { Link } from 'react-router-dom';
 @observer
 class CreateAccountStep2 extends Component {
   render () {
-    const { createAccountStore: { phrase } } = this.props;
+    const { createAccountStore: { address, name, phrase } } = this.props;
 
     return (
-      <div>
-        <h3>Create account step 2</h3>
-        <div>
-          Please write your secret phrase on a piece of paper:<br />
-          <pre>{phrase}</pre>
+      <div className='window_content'>
+        <div className='box -padded'>
+          <div className='box -card'>
+            <div className='account'>
+              <div className='account_avatar'>
+                <Blockie seed={address} />
+              </div>
+              <div className='account_information'>
+                <div className='account_name'>
+                  {name || <span className='span -placeholder'>Account</span>}
+                </div>
+                <div className='account_address'>
+                  {address}
+                </div>
+              </div>
+            </div>
+            <div className='box -card-drawer'>
+              <div className='text'>
+                <p>Please write your secret phrase on a piece of paper:</p>
+              </div>
+              <div className='text -code'>
+                {phrase}
+              </div>
+              <nav className='form-nav'>
+                <Link to='/accounts/new/step3'>
+                  <button className='button'>Next</button>
+                </Link>
+              </nav>
+            </div>
+          </div>
         </div>
-        <Link to='/accounts/new/step3'>
-          <button>Done</button>
-        </Link>
       </div>
     );
   }
diff --git a/src/Accounts/CreateAccount/CreateAccountStep3/CreateAccountStep3.js b/src/Accounts/CreateAccount/CreateAccountStep3/CreateAccountStep3.js
index d337ed5a82e1095592bf2c0f97af06218ce085bf..71296efa9bdc1b82ae37e93d3482b40162c5ea33 100644
--- a/src/Accounts/CreateAccount/CreateAccountStep3/CreateAccountStep3.js
+++ b/src/Accounts/CreateAccount/CreateAccountStep3/CreateAccountStep3.js
@@ -4,6 +4,7 @@
 // SPDX-License-Identifier: MIT
 
 import React, { Component } from 'react';
+import Blockie from 'react-blockies';
 import { inject, observer } from 'mobx-react';
 import { Link } from 'react-router-dom';
 
@@ -17,24 +18,49 @@ class CreateAccountStep3 extends Component {
   handleChange = ({ target: { value } }) => this.setState({ value });
 
   render () {
-    const { createAccountStore: { phrase } } = this.props;
+    const { createAccountStore: { address, name, phrase } } = this.props;
     const { value } = this.state;
 
     return (
-      <div>
-        <h3>Create account step 3</h3>
-        <div>
-          Please rewrite your whole phrase here<br />
-          <input onChange={this.handleChange} required value={value} />
+      <div className='window_content'>
+        <div className='box -padded'>
+          <div className='box -card'>
+            <div className='account'>
+              <div className='account_avatar'>
+                <Blockie seed={address} />
+              </div>
+              <div className='account_information'>
+                <div className='account_name'>
+                  {name || <span className='span -placeholder'>Account</span>}
+                </div>
+                <div className='account_address'>
+                  {address}
+                </div>
+              </div>
+            </div>
+            <div className='box -card-drawer'>
+              <div className='text'>
+                <p>Please write your recovery phrase here:</p>
+              </div>
+              <div className='form_field'>
+                <label>Recovery phrase</label>
+                <input
+                  onChange={this.handleChange}
+                  required
+                  value={value}
+                />
+              </div>
+
+              <nav className='form-nav'>
+                {value === phrase
+                  ? <Link to='/accounts/new/step4'>
+                    <button className='button'>Next</button>
+                  </Link>
+                  : <button className='button' disabled='true'>Next</button>}
+              </nav>
+            </div>
+          </div>
         </div>
-        <em style={{ fontSize: 12 }}>
-          @brian maybe tell the user to write the 3rd, 9th and 11th word only?
-          3,9,11 being random numbers
-        </em>
-        {value === phrase &&
-          <Link to='/accounts/new/step4'>
-            <button>Done</button>
-          </Link>}
       </div>
     );
   }
diff --git a/src/Accounts/CreateAccount/CreateAccountStep4/CreateAccountStep4.js b/src/Accounts/CreateAccount/CreateAccountStep4/CreateAccountStep4.js
index 6e4a00031c8d51daed0764f8044f9293152c1702..65f98fcf759b41536b0fd11754dec91cc2177e69 100644
--- a/src/Accounts/CreateAccount/CreateAccountStep4/CreateAccountStep4.js
+++ b/src/Accounts/CreateAccount/CreateAccountStep4/CreateAccountStep4.js
@@ -4,11 +4,12 @@
 // SPDX-License-Identifier: MIT
 
 import React, { Component } from 'react';
+import Blockie from 'react-blockies';
 import { inject, observer } from 'mobx-react';
 
 @inject('createAccountStore')
 @observer
-class CreateAccountStep3 extends Component {
+class CreateAccountStep4 extends Component {
   state = {
     confirm: '',
     hint: '',
@@ -36,41 +37,73 @@ class CreateAccountStep3 extends Component {
   };
 
   render () {
+    const { createAccountStore: { address, name } } = this.props;
     const { confirm, hint, password } = this.state;
 
     return (
-      <div>
-        <h3>Create account step 4</h3>
-        <form onSubmit={this.handleSubmit}>
-          <label>
-            Password:{' '}
-            <input
-              onChange={this.handlePasswordChange}
-              required
-              type='password'
-              value={password}
-            />
-          </label>
-          <br />
-          <label>
-            Confirm:{' '}
-            <input
-              onChange={this.handleConfirmChange}
-              required
-              type='password'
-              value={confirm}
-            />
-          </label>
-          <br />
-          <label>
-            Password Hint (optional):{' '}
-            <input onChange={this.handleHintChange} value={hint} />
-          </label>
-          {password && confirm === password && <button>Submit</button>}
-        </form>
+      <div className='window_content'>
+        <div className='box -padded'>
+          <div className='box -card'>
+            <div className='account'>
+              <div className='account_avatar'>
+                <Blockie seed={address} />
+              </div>
+              <div className='account_information'>
+                <div className='account_name'>
+                  {name || <span className='span -placeholder'>Account</span>}
+                </div>
+                <div className='account_address'>
+                  {address}
+                </div>
+              </div>
+            </div>
+            <div className='box -card-drawer'>
+              <form onSubmit={this.handleSubmit}>
+                <div className='text'>
+                  <p>Secure your account with a password:</p>
+                </div>
+
+                <div className='form_field'>
+                  <label>Password{' '}</label>
+                  <input
+                    onChange={this.handlePasswordChange}
+                    required
+                    type='password'
+                    value={password}
+                  />
+                </div>
+
+                <div className='form_field'>
+                  <label>Confirm{' '}</label>
+                  <input
+                    onChange={this.handleConfirmChange}
+                    required
+                    type='password'
+                    value={confirm}
+                  />
+                </div>
+
+                <div className='form_field'>
+                  <label>Password Hint (optional) {' '}</label>
+                  <input
+                    onChange={this.handleHintChange}
+                    type='text'
+                    value={hint}
+                  />
+                </div>
+
+                <nav className='form-nav'>
+                  {password && confirm === password
+                    ? <button className='button'>Next</button>
+                    : <button className='button' disabled='true'>Next</button>}
+                </nav>
+              </form>
+            </div>
+          </div>
+        </div>
       </div>
     );
   }
 }
 
-export default CreateAccountStep3;
+export default CreateAccountStep4;
diff --git a/src/Accounts/CreateAccount/CreateAccountStep5/CreateAccountStep5.js b/src/Accounts/CreateAccount/CreateAccountStep5/CreateAccountStep5.js
index 2a688ac727feba44bf69a84c314984e5523fc9e7..99de3bc22949f3d735446119d393b8d125c5aeda 100644
--- a/src/Accounts/CreateAccount/CreateAccountStep5/CreateAccountStep5.js
+++ b/src/Accounts/CreateAccount/CreateAccountStep5/CreateAccountStep5.js
@@ -4,6 +4,7 @@
 // SPDX-License-Identifier: MIT
 
 import React, { Component } from 'react';
+import Blockie from 'react-blockies';
 import { inject, observer } from 'mobx-react';
 
 @inject('createAccountStore')
@@ -15,16 +16,38 @@ class CreateAccountStep5 extends Component {
   };
 
   render () {
-    const { createAccountStore: { hint } } = this.props;
+    const { createAccountStore: { address, name, hint } } = this.props;
 
     return (
-      <div>
-        <h3>Create account step 5</h3>
-        <p>Confirm account creation?</p>
-        <p>
-          Password Hint: <em>{hint}</em>
-        </p>
-        <button onClick={this.handleSubmit}>Confirm</button>
+      <div className='window_content'>
+        <div className='box -padded'>
+          <div className='box -card'>
+            <div className='account'>
+              <div className='account_avatar'>
+                <Blockie seed={address} />
+              </div>
+              <div className='account_information'>
+                <div className='account_name'>
+                  {name || <span className='span -placeholder'>Account</span>}
+                </div>
+                <div className='account_address'>
+                  {address}
+                </div>
+              </div>
+            </div>
+            <div className='box -card-drawer'>
+              <div className='text'>
+                <p>Ready to create account?</p>
+              </div>
+              <div className='text -code'>
+                {hint}
+              </div>
+              <nav className='form-nav'>
+                <button onClick={this.handleSubmit} className='button'>Next</button>
+              </nav>
+            </div>
+          </div>
+        </div>
       </div>
     );
   }
diff --git a/src/App/App.css b/src/App/App.css
index 21627b2c12d4bb981bb88276a044bd5e87a5a318..8ecd93eda9b5d9dbfd5a7e6e3caf263979f262e1 100644
--- a/src/App/App.css
+++ b/src/App/App.css
@@ -742,13 +742,11 @@ ul, ol {
   box-sizing: border-box; }
 
 html {
-  font-size: 17px;
+  font-size: 16px;
   height: 100%; }
-  @media screen and (min-width: 1280px) {
-    html {
-      font-size: 1.4vw; } }
 
 body {
+  user-select: none;
   background-color: #A5BFDA;
   background-image: linear-gradient(#A5BFDA, #BFCDDC);
   background-repeat: no-repeat;
@@ -770,56 +768,116 @@ a, a:link, a:visited {
     cursor: default; }
 
 .box {
-  display: block; }
+  display: block;
+  position: relative; }
   .box.-card {
-    padding: 0.75rem;
-    background: #f9f9f9;
-    border-radius: 2px;
-    box-shadow: 0 1px 2px rgba(34, 34, 34, 0.125); }
+    z-index: 1;
+    padding: 1rem;
+    border-radius: 0.25rem;
+    background-color: #fff;
+    overflow: hidden;
+    box-shadow: 0 0.125rem 0.5rem rgba(34, 34, 34, 0.125); }
     .box.-card.-clickable {
-      transition: box-shadow 0.125s ease; }
+      transition: box-shadow ease 0.125s; }
       .box.-card.-clickable:hover {
-        cursor: default;
-        box-shadow: 0 1px 2px rgba(34, 34, 34, 0.225), 0 1px 2px rgba(34, 34, 34, 0.125); }
-  .box.-well {
-    padding: 0.325rem; }
+        box-shadow: 0 0.125rem 0.675rem rgba(34, 34, 34, 0.175);
+        cursor: default; }
+      .box.-card.-clickable:active {
+        box-shadow: 0 0.125rem 0.325rem rgba(34, 34, 34, 0.175);
+        cursor: default; }
+  .box.-card-drawer {
+    margin: 1rem -2rem -2rem;
+    padding: 1rem 2rem 2rem;
+    border-top: 1px solid #e0e0e0;
+    box-shadow: 0 0.125rem 0.325rem rgba(34, 34, 34, 0.075) inset;
+    background-color: #fdfdfd; }
   .box.-scroller {
     max-height: 22rem;
     overflow-x: hidden;
     overflow-y: auto; }
   .box.-padded {
-    padding: 1rem; }
-  .box.-modal {
-    background: #f9f9f9; }
+    padding: 0.5rem; }
+  .box.-apart {
+    margin-top: 1rem;
+    margin-bottom: 1rem; }
+    .box.-apart:first-child {
+      margin-top: 0; }
+    .box.-apart:last-child {
+      margin-bottom: 0; }
+  .box.-pull-up {
+    margin-top: -1rem;
+    margin-bottom: 1rem; }
   .box.-stacked {
     margin-bottom: 0.5rem; }
     .box.-stacked:last-child {
       margin-bottom: 0; }
 
-button {
-  color: #f9f9f9;
-  background-color: #3ec28f;
-  border-radius: 0.25rem;
-  border: none;
-  font-size: 1rem;
+.button {
+  color: #160DF6;
+  background-color: transparent;
+  border-radius: 1rem;
+  border: 2px solid #160DF6;
+  font-size: 0.69444rem;
+  font-weight: 600;
   line-height: 1.3;
-  padding: 0.25rem 0.675rem 0.325rem; }
-  button:active {
-    background-color: #3ab988; }
-  button.-small {
-    font-weight: 500;
+  padding: 0.325rem 0.675rem 0.325rem;
+  text-transform: uppercase; }
+  .button:hover {
+    background-color: #160DF6;
+    color: #f9f9f9; }
+  .button:active {
+    background-color: #1209ed;
+    color: #f9f9f9; }
+  .button.-tiny {
     font-size: 0.69444rem;
-    padding: 0.125rem 0.25rem 0.175rem;
-    background-color: #ddd;
-    color: rgba(34, 34, 34, 0.75); }
-    button.-small:active {
-      background-color: #d7d7d7; }
-
-.list.-padded {
-  padding: 0.325rem; }
-  .list.-padded > li {
-    margin-bottom: 0.325rem; }
-    .list.-padded > li:last-child {
+    text-transform: none;
+    border: 0;
+    border-radius: 2px;
+    color: #222;
+    background-size: auto 0.675rem;
+    background-position: left center;
+    background-repeat: no-repeat;
+    background-color: transparent;
+    padding: 0 0 0 0.925rem;
+    opacity: 0.425; }
+    .button.-tiny:hover {
+      opacity: 0.625;
+      background-color: transparent; }
+    .button.-tiny:active {
+      opacity: 0.75;
+      background-color: transparent; }
+    .button.-tiny.-reload {
+      background-image: url("../assets/img/icons/reload.svg"); }
+
+.form_field {
+  margin: 0.5rem 0;
+  border-radius: 0.25rem;
+  background: rgba(221, 221, 221, 0.25); }
+  .form_field label {
+    font-size: 0.5787rem;
+    font-weight: 600;
+    color: #222;
+    opacity: 0.75;
+    padding: 0.5rem 0.5rem 0; }
+  .form_field input {
+    border: 0;
+    background: transparent;
+    font-size: 1rem;
+    font-weight: 400;
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+    line-height: 1.3rem;
+    width: 100%;
+    opacity: 0.75;
+    padding: 0.5rem;
+    margin-top: -0.25rem; }
+    .form_field input:focus {
+      opacity: 1; }
+
+.list {
+  padding: 0.5rem; }
+  .list > li {
+    margin-bottom: 0.5rem; }
+    .list > li:last-child {
       margin-bottom: 0; }
 
 .text p, .text ul, .text ol, .text blockquote {
@@ -842,6 +900,19 @@ button {
 .text strong {
   font-weight: 500; }
 
+.text.-code {
+  user-select: text;
+  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
+  padding: 0.5rem;
+  background: rgba(221, 221, 221, 0.25);
+  color: #222;
+  margin: 0.5rem 0;
+  font-size: 0.83333rem;
+  border-radius: 0.25rem; }
+
+.span.-placeholder {
+  color: #ddd; }
+
 .wrapper {
   position: fixed;
   left: 0;
@@ -868,13 +939,9 @@ button {
       border-radius: 0.25rem;
       overflow: hidden;
       box-shadow: 0 0.125rem 0.75rem rgba(34, 34, 34, 0.175), 0 0.125rem 0.125rem rgba(34, 34, 34, 0.1); }
-      .wrapper .content .window .window_content {
-        background: rgba(221, 221, 221, 0.675);
-        border-top: 1px solid #ddd;
-        border-bottom: 1px solid #ddd; }
-        .wrapper .content .window .window_content.-modal {
-          border-top: 0;
-          border-bottom: 0; }
+      .wrapper .content .window .window_content.-modal {
+        border-top: 0;
+        border-bottom: 0; }
 
 .debug-nav {
   background-color: rgba(34, 34, 34, 0.125);
@@ -914,10 +981,7 @@ button {
     overflow: hidden; }
 
 .token {
-  user-select: none;
   display: flex; }
-  .token.-header {
-    padding: 0 0 0.5rem; }
   .token .token_icon {
     margin: -0.5rem 0 -0.5rem -0.425rem;
     width: 2.3rem;
@@ -945,12 +1009,10 @@ button {
       content: ' '; }
 
 .account {
-  user-select: none;
   display: flex; }
   .account .account_avatar {
-    margin: -0.5rem 0 -0.5rem -0.425rem;
-    width: 3.3rem;
-    height: 3.3rem;
+    width: 2.3rem;
+    height: 2.3rem;
     display: flex;
     flex-direction: column;
     flex-wrap: nowrap;
@@ -958,6 +1020,7 @@ button {
     align-items: center;
     align-content: center; }
     .account .account_avatar canvas {
+      display: block;
       height: 1.3rem !important;
       width: auto !important; }
   .account .account_information {
@@ -994,16 +1057,30 @@ button {
 .header-nav {
   display: flex;
   justify-content: space-between;
-  padding: 1rem 0.5rem; }
-  .header-nav .header_title {
-    text-align: center;
-    color: rgba(34, 34, 34, 0.675);
-    font-weight: 500; }
-  .header-nav.-modal {
-    background: #f9f9f9; }
+  padding: 1rem 0.5rem;
+  position: relative; }
+  .header-nav .header-nav_left, .header-nav .header-nav_right {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center; }
+  .header-nav .header-nav_title {
+    z-index: 2;
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    top: 0;
+    padding: 1rem 0.5rem;
+    text-align: center; }
+    .header-nav .header-nav_title a, .header-nav .header-nav_title a:link, .header-nav .header-nav_title a:visited, .header-nav .header-nav_title h1 {
+      color: rgba(34, 34, 34, 0.675);
+      font-weight: 500;
+      display: inline-block; }
   .header-nav a,
   .header-nav a:link,
   .header-nav a:visited {
+    z-index: 9;
     color: rgba(34, 34, 34, 0.675);
     font-weight: 500;
     display: block;
@@ -1142,3 +1219,22 @@ button {
   background: rgba(221, 221, 221, 0.25);
   word-wrap: break-word;
   padding: 0.5rem; }
+
+.progress-indicator {
+  display: flex;
+  width: 2.5rem;
+  height: 0.25rem;
+  overflow: hidden;
+  border-radius: 0.25rem; }
+
+.progress-indicator_step {
+  flex: 1;
+  background: #ddd;
+  height: 0.25rem; }
+  .progress-indicator_step.-complete {
+    background: #3ec28f; }
+
+.form-nav {
+  padding-top: 0.5rem;
+  display: flex;
+  justify-content: center; }
diff --git a/src/App/App.sass b/src/App/App.sass
index 4ddda06b5d03e77fc31a81b8bd3a8ba566021b9a..6e6bbf582e0647d24716ee9c2a373b9f06eb5ac9 100644
--- a/src/App/App.sass
+++ b/src/App/App.sass
@@ -28,4 +28,6 @@
 @import '../assets/sass/components/footer-nav'
 @import '../assets/sass/components/send-form'
 @import '../assets/sass/components/address'
+@import '../assets/sass/components/progress-indicator'
+@import '../assets/sass/components/form-nav'
 
diff --git a/src/Receive/Receive.js b/src/Receive/Receive.js
index 107774ba8a6c6d19d231299e2b1bee5967454341..2c68e80f12a03d84db3f0e61f5011ff9c69fe142 100644
--- a/src/Receive/Receive.js
+++ b/src/Receive/Receive.js
@@ -17,27 +17,27 @@ class Receive extends PureComponent {
     const { me } = this.props;
     return (
       <div>
-        <nav className='header-nav'>
-          <Link to='/tokens' className='icon -close'>
-            x
-          </Link>
-          <Link to='/accounts'>Accounts</Link>
+        <nav className='header-nav -modal'>
+          <div className='header-nav_left'>
+            <Link to='/tokens' className='icon -close'>
+              Close
+            </Link>
+          </div>
+          <div className='header-nav_title'>
+            <h1>Address</h1>
+          </div>
+          <div className='header-nav_right'>
+            &nbsp;
+          </div>
         </nav>
         <div className='window_content'>
-          <div className='box -scroller -well'>
-            <div className='box -card'>
-              <div className='box -padded'>
-                <label>Wallet address</label>
-              </div>
-              <div className='box -padded address'>
-                <code>
-                  {me}
-                </code>
-              </div>
-              <div className='box -padded'>
-                <button className='-small'>Copy to clipboard</button>
-              </div>
-            </div>
+          <div className='box -padded address'>
+            <code>
+              {me}
+            </code>
+          </div>
+          <div className='box -padded'>
+            <button className='-small'>Copy to clipboard</button>
           </div>
         </div>
       </div>
diff --git a/src/Tokens/Tokens.js b/src/Tokens/Tokens.js
index 6a49ab613dec8ca06352095f698f332b1b8f16bb..78623408f4690550f2621dab3d7502b0ffe5c82b 100644
--- a/src/Tokens/Tokens.js
+++ b/src/Tokens/Tokens.js
@@ -23,18 +23,21 @@ class Tokens extends PureComponent {
     return (
       <div>
         <nav className='header-nav'>
-          <Link to='/accounts' className='icon -back'>
-            Back
-          </Link>
-          <Link to='/tokens'>
-            {accountsInfo && defaultAccount && accountsInfo[defaultAccount]
-              ? accountsInfo[defaultAccount].name
-              : 'Loading...'}
-          </Link>
-          <Link to='/receive' className='icon -receive'>
-            {/* TODO: Don't worry -- this isn't good UX and won't stick around. */}
-            Receive
-          </Link>
+          <div className='header-nav_left'>
+            <Link to='/accounts' className='icon -back'>
+              Back
+            </Link>
+          </div>
+          <div className='header-nav_title'>
+            <Link to='/receive'>
+              {accountsInfo && defaultAccount && accountsInfo[defaultAccount]
+                ? accountsInfo[defaultAccount].name
+                : 'Loading...'}
+            </Link>
+          </div>
+          <div className='header-nav_right'>
+            &nbsp;
+          </div>
         </nav>
 
         <Switch>
@@ -47,7 +50,7 @@ class Tokens extends PureComponent {
             <Health />
           </div>
           <div className='footer-nav_icons'>
-            <Link to='/settings' className='icon -settings'>
+            <Link to='/tokens/new' className='icon -settings'>
               Settings
             </Link>
           </div>
diff --git a/src/Tokens/TokensList/TokensList.js b/src/Tokens/TokensList/TokensList.js
index e72a49c98d248e816c0f7acca69d8fe1d5690eb9..b197dd67dbb68cd0079b29e0833fa4e8277552ff 100644
--- a/src/Tokens/TokensList/TokensList.js
+++ b/src/Tokens/TokensList/TokensList.js
@@ -5,7 +5,6 @@
 
 import React, { Component } from 'react';
 import { inject, observer } from 'mobx-react';
-import { Link } from 'react-router-dom';
 
 import EthBalance from './EthBalance';
 import TokenBalance from './TokenBalance';
@@ -27,9 +26,6 @@ class Tokens extends Component {
                   : <TokenBalance token={token} />}
               </li>
             )}
-            <li>
-              <Link to='/tokens/new'>Add/Remove Token</Link>
-            </li>
           </ul>
         </div>
       </div>
diff --git a/src/assets/img/icons/reload.svg b/src/assets/img/icons/reload.svg
index efd0c9378aa3e939d3be76a147f5802f1d8cb991..e128a020af81ffad279b871edb5fdd50be1242b1 100644
--- a/src/assets/img/icons/reload.svg
+++ b/src/assets/img/icons/reload.svg
@@ -1,18 +1,18 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<svg width="23px" height="23px" viewBox="0 0 23 23" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg width="23px" height="19px" viewBox="0 0 23 19" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <!-- Generator: Sketch 43.1 (39012) - http://www.bohemiancoding.com/sketch -->
-    <title>Untitled 6</title>
+    <title>Untitled 13</title>
     <desc>Created with Sketch.</desc>
     <defs></defs>
     <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="Group-2" transform="translate(0.000000, 4.000000)">
-            <g id="Group" transform="translate(4.000000, 0.000000)">
-                <path d="M0,6.0546875 C0,6.0546875 0.926180535,3.253067e-16 7.55732855,0 C12.1864872,0 14.0354214,2.95065494 14.7298959,4.7323011" id="Path-2" stroke="#000000" stroke-width="3"></path>
-                <polygon id="Path-3" fill="#000000" transform="translate(15.023463, 5.490670) rotate(-25.000000) translate(-15.023463, -5.490670) " points="11.6693116 3.78140576 14.9818065 7.22644372 18.3776142 3.75489714"></polygon>
+        <g id="reload" transform="translate(-1.000000, 2.000000)">
+            <g id="Group" transform="translate(5.000000, 0.000000)">
+                <path d="M0.681340499,4.05985861 C1.55406138,2.29566578 3.47416115,2.00309465e-16 7.55732855,0 C12.1864872,0 14.0354214,2.95065494 14.7298959,4.7323011" id="Path-2" stroke="#000000" stroke-width="3"></path>
+                <polygon id="Path-3" fill="#000000" fill-rule="nonzero" transform="translate(14.952775, 5.515880) rotate(-25.000000) translate(-14.952775, -5.515880) " points="10.2692659 3.81427843 14.985838 7.25867967 19.6362847 3.77308113"></polygon>
             </g>
-            <g id="Group" transform="translate(9.500000, 10.500000) rotate(-180.000000) translate(-9.500000, -10.500000) translate(0.000000, 6.000000)">
-                <path d="M0,6.0546875 C0,6.0546875 0.926180535,3.253067e-16 7.55732855,0 C12.1864872,0 14.0354214,2.95065494 14.7298959,4.7323011" id="Path-2" stroke="#000000" stroke-width="3"></path>
-                <polygon id="Path-3" fill="#000000" transform="translate(15.023463, 5.490670) rotate(-25.000000) translate(-15.023463, -5.490670) " points="11.6693116 3.78140576 14.9818065 7.22644372 18.3776142 3.75489714"></polygon>
+            <g id="Group" transform="translate(10.000000, 10.500000) rotate(-180.000000) translate(-10.000000, -10.500000) translate(0.000000, 6.000000)">
+                <path d="M0.81846344,3.79488605 C1.7490228,2.07448113 3.67584634,1.9041532e-16 7.55732855,0 C12.1864872,0 14.0354214,2.95065494 14.7298959,4.7323011" id="Path-2" stroke="#000000" stroke-width="3"></path>
+                <polygon id="Path-3" fill="#000000" fill-rule="nonzero" transform="translate(15.015353, 5.520208) rotate(-25.000000) translate(-15.015353, -5.520208) " points="10.6391762 4.18374205 14.99353 7.23263847 19.3915306 3.80777762"></polygon>
             </g>
         </g>
     </g>
diff --git a/src/assets/img/icons/tiny-reload.svg b/src/assets/img/icons/tiny-reload.svg
new file mode 100644
index 0000000000000000000000000000000000000000..d4cf5a7f272ba9e4d333c399a64c1f11caffbc13
--- /dev/null
+++ b/src/assets/img/icons/tiny-reload.svg
@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="31px" height="31px" viewBox="0 0 31 31" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 43.1 (39012) - http://www.bohemiancoding.com/sketch -->
+    <title>Untitled 14</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <circle id="Oval" fill="#D8D8D8" cx="15.5" cy="15.5" r="15.5"></circle>
+        <g id="reload" transform="translate(4.000000, 8.000000)">
+            <g id="Group" transform="translate(4.000000, 0.000000)">
+                <path d="M0,6.0546875 C0,6.0546875 0.926180535,3.253067e-16 7.55732855,0 C12.1864872,0 14.0354214,2.95065494 14.7298959,4.7323011" id="Path-2" stroke="#000000" stroke-width="3"></path>
+                <polygon id="Path-3" fill="#000000" fill-rule="nonzero" transform="translate(15.023463, 5.490670) rotate(-25.000000) translate(-15.023463, -5.490670) " points="11.6693118 3.78140576 14.9818067 7.22644372 18.3776144 3.75489714"></polygon>
+            </g>
+            <g id="Group" transform="translate(9.500000, 10.500000) rotate(-180.000000) translate(-9.500000, -10.500000) translate(0.000000, 6.000000)">
+                <path d="M0,6.0546875 C0,6.0546875 0.926180535,3.253067e-16 7.55732855,0 C12.1864872,0 14.0354214,2.95065494 14.7298959,4.7323011" id="Path-2" stroke="#000000" stroke-width="3"></path>
+                <polygon id="Path-3" fill="#000000" fill-rule="nonzero" transform="translate(15.023463, 5.490670) rotate(-25.000000) translate(-15.023463, -5.490670) " points="11.6693118 3.78140576 14.9818067 7.22644372 18.3776144 3.75489714"></polygon>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/src/assets/sass/components/_account.scss b/src/assets/sass/components/_account.scss
index e8c93070bfabeb8c4bb99c9ed7994a60427c978d..b37d0b23c211b6d53b33ebf7dc896b0569630027 100644
--- a/src/assets/sass/components/_account.scss
+++ b/src/assets/sass/components/_account.scss
@@ -1,11 +1,9 @@
 .account {
-  user-select: none;
   display: flex;
 
   .account_avatar {
-    margin: -0.5rem 0 -0.5rem -0.425rem;
-    width: (ms(0) * 1.3) + 2rem;
-    height: (ms(0) * 1.3) + 2rem;
+    width: (ms(0) * 1.3) + 1rem;
+    height: (ms(0) * 1.3) + 1rem;
     display: flex;
     flex-direction: column;
     flex-wrap: nowrap;
@@ -14,6 +12,7 @@
     align-content: center;
 
     canvas {
+      display: block;
       height: (ms(0) * 1.3) !important;
       width: auto !important;
     }
diff --git a/src/assets/sass/components/_form-nav.scss b/src/assets/sass/components/_form-nav.scss
new file mode 100644
index 0000000000000000000000000000000000000000..361d4411ea447eb14e3cca9b5f436b1f74539d19
--- /dev/null
+++ b/src/assets/sass/components/_form-nav.scss
@@ -0,0 +1,5 @@
+.form-nav {
+  padding-top: 0.5rem;
+  display: flex;
+  justify-content: center;
+}
diff --git a/src/assets/sass/components/_header-nav.scss b/src/assets/sass/components/_header-nav.scss
index 49f4d209b902701885567964bc478193f9a9ffc8..fdc028f3f9df56a9393983f68b483a71810cbce6 100644
--- a/src/assets/sass/components/_header-nav.scss
+++ b/src/assets/sass/components/_header-nav.scss
@@ -2,20 +2,36 @@
   display: flex;
   justify-content: space-between;
   padding: 1rem 0.5rem;
+  position: relative;
 
-  .header_title {
-    text-align: center;
-    color: rgba($black, 0.675);
-    font-weight: 500;
+  .header-nav_left, .header-nav_right {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
   }
 
-  &.-modal {
-    background: $white;
+  .header-nav_title {
+    z-index: 2;
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    top: 0;
+    padding: 1rem 0.5rem;
+    text-align: center;
+
+    a, a:link, a:visited, h1 {
+      color: rgba($black, 0.675);
+      font-weight: 500;
+      display: inline-block;
+    }
   }
 
   a,
   a:link,
   a:visited {
+    z-index: 9;
     color: rgba($black, 0.675);
     font-weight: 500;
     display: block;
diff --git a/src/assets/sass/components/_progress-indicator.scss b/src/assets/sass/components/_progress-indicator.scss
new file mode 100644
index 0000000000000000000000000000000000000000..c5e55fea7a41d01bd366efd3d230b8d27795f387
--- /dev/null
+++ b/src/assets/sass/components/_progress-indicator.scss
@@ -0,0 +1,17 @@
+.progress-indicator {
+  display: flex;
+  width: 2.5rem;
+  height: 0.25rem;
+  overflow: hidden;
+  border-radius: 0.25rem;
+}
+
+.progress-indicator_step {
+  flex: 1;
+  background: $faint;
+  height: 0.25rem;
+
+  &.-complete {
+    background: $green;
+  }
+}
diff --git a/src/assets/sass/components/_token.scss b/src/assets/sass/components/_token.scss
index 8b0aa4354ccd267f493eb5e7cb74d90b7d489028..ddde4273434e6ed8efc527208cfbffa71d0ec764 100644
--- a/src/assets/sass/components/_token.scss
+++ b/src/assets/sass/components/_token.scss
@@ -1,11 +1,6 @@
 .token {
-  user-select: none;
   display: flex;
 
-  &.-header {
-    padding: 0 0 0.5rem;
-  }
-
   .token_icon {
     margin: -0.5rem 0 -0.5rem -0.425rem;
     width: (ms(0) * 1.3) + 1rem;
@@ -16,6 +11,7 @@
     justify-content: center;
     align-items: center;
     align-content: center;
+
     img {
       height: (ms(0) * 1.3);
       width: auto;
diff --git a/src/assets/sass/layouts/_wrapper.scss b/src/assets/sass/layouts/_wrapper.scss
index b3295253c4e6dcf18c36496bc06dfbf0ceada81d..42261950cdd12576e177180b1cc7d14780bc91e1 100644
--- a/src/assets/sass/layouts/_wrapper.scss
+++ b/src/assets/sass/layouts/_wrapper.scss
@@ -32,9 +32,6 @@
       box-shadow: 0 0.125rem 0.75rem rgba($black,0.175), 0 0.125rem 0.125rem rgba($black,0.100);
 
       .window_content {
-        background: rgba($faint,0.675);
-        border-top: 1px solid $faint;
-        border-bottom: 1px solid $faint;
 
         &.-modal {
           border-top: 0;
diff --git a/src/assets/sass/modules/_variables.scss b/src/assets/sass/modules/_variables.scss
index de99b0e876d8c37fe1880a5894d9b945845ca5dc..ada25468a5fa60f1e1dec3954ac16135ac7df8c6 100644
--- a/src/assets/sass/modules/_variables.scss
+++ b/src/assets/sass/modules/_variables.scss
@@ -12,7 +12,7 @@ $grey: #888;
 
 $purple: #330044;
 
-$blue: #3E4DC2;
+$blue: #160DF6;
 $green: #3ec28f;
 $yellow: #DFCA29;
 $red: #C2473E;
diff --git a/src/assets/sass/shared/_basics.scss b/src/assets/sass/shared/_basics.scss
index ed6ca4768543fa0c2f870dc1c47d28723d6ed3c1..dac04efd041147b5a968476b7415abf6431f9ae2 100644
--- a/src/assets/sass/shared/_basics.scss
+++ b/src/assets/sass/shared/_basics.scss
@@ -1,12 +1,10 @@
 html {
-  font-size: 17px;
+  font-size: 16px;
   height: 100%;
-  @media screen and (min-width: $large) {
-    font-size: 1.4vw;
-  }
 }
 
 body {
+  user-select: none;
   background-color: #A5BFDA;
   background-image: linear-gradient(#A5BFDA, #BFCDDC);
   background-repeat: no-repeat;
diff --git a/src/assets/sass/shared/_box.scss b/src/assets/sass/shared/_box.scss
index ea18f740f8686408a7394836a182bd84e9d1ef05..4416de41b060342b0770fd0ebe76ac69a65885ac 100644
--- a/src/assets/sass/shared/_box.scss
+++ b/src/assets/sass/shared/_box.scss
@@ -1,22 +1,36 @@
 .box {
   display: block;
+  position: relative;
 
   &.-card {
-    padding: 0.75rem;
-    background: $white;
-    border-radius: 2px;
-    box-shadow: 0 1px 2px rgba($black,0.125);
+    z-index: 1;
+    padding: 1rem;
+    border-radius: 0.25rem;
+    background-color: $eggshell;
+    overflow: hidden;
+    box-shadow: 0 0.125rem 0.5rem rgba($black,0.125);
     &.-clickable {
-      transition: box-shadow 0.125s ease;
+      transition: box-shadow ease 0.125s;
       &:hover {
+        box-shadow: 0 0.125rem 0.675rem rgba($black,0.175);
+        cursor: default;
+      }
+      &:active {
+        box-shadow: 0 0.125rem 0.325rem rgba($black,0.175);
         cursor: default;
-        box-shadow: 0 1px 2px rgba($black,0.225), 0 1px 2px rgba($black,0.125);
       }
     }
   }
 
+  &.-card-drawer {
+    margin: 1rem -2rem -2rem;
+    padding: 1rem 2rem 2rem;
+    border-top: 1px solid lighten($faint,1.25%);
+    box-shadow: 0 0.125rem 0.325rem rgba($black,0.075) inset;
+    background-color: darken($eggshell,0.75%);
+  }
+
   &.-well {
-    padding: 0.325rem;
   }
 
   &.-scroller {
@@ -26,11 +40,23 @@
   }
 
   &.-padded {
-    padding: 1rem;
+    padding: 0.5rem;
+  }
+
+  &.-apart {
+    margin-top: 1rem;
+    margin-bottom: 1rem;
+    &:first-child {
+      margin-top: 0;
+    }
+    &:last-child {
+      margin-bottom: 0;
+    }
   }
 
-  &.-modal {
-    background: $white;
+  &.-pull-up {
+    margin-top: -1rem;
+    margin-bottom: 1rem;
   }
 
   &.-stacked {
diff --git a/src/assets/sass/shared/_button.scss b/src/assets/sass/shared/_button.scss
index a3958be3ab2f4b379cc3225b3c750da3280ccbd1..e5507598371892e49e1b3b624fe445ee7852daa4 100644
--- a/src/assets/sass/shared/_button.scss
+++ b/src/assets/sass/shared/_button.scss
@@ -1,23 +1,49 @@
-button {
-  color: $white;
-  background-color: $green;
-  border-radius: 0.25rem;
-  border: none;
-  font-size: ms(0);
+.button {
+  color: $blue;
+  background-color: transparent;
+  border-radius: 1rem;
+  border: 2px solid $blue;
+  font-size: ms(-2);
+  font-weight: 600;
   line-height: 1.3;
-  padding: 0.25rem 0.675rem 0.325rem;
+  padding: 0.325rem 0.675rem 0.325rem;
+  text-transform: uppercase;
+
+  &:hover {
+    background-color: $blue;
+    color: $white;
+  }
+
   &:active {
-    background-color: darken($green,2.5%)
+    background-color: darken($blue,2.5%);
+    color: $white;
   }
 
-  &.-small {
-    font-weight: 500;
+  &.-tiny {
     font-size: ms(-2);
-    padding: 0.125rem 0.25rem 0.175rem;
-    background-color: $faint;
-    color: rgba($black,0.75);
+    text-transform: none;
+    border: 0;
+    border-radius: 2px;
+    color: $black;
+    background-size: auto 0.675rem;
+    background-position: left center;
+    background-repeat: no-repeat;
+    background-color: transparent;
+    padding: 0 0 0 0.925rem;
+    opacity: 0.425;
+
+    &:hover {
+      opacity: 0.625;
+      background-color: transparent;
+    }
+
     &:active {
-      background-color: darken($faint,2.5%)
+      opacity: 0.75;
+      background-color: transparent;
+    }
+
+    &.-reload {
+      background-image: url('../assets/img/icons/reload.svg');
     }
   }
 }
diff --git a/src/assets/sass/shared/_form.scss b/src/assets/sass/shared/_form.scss
index 8b137891791fe96927ad78e64b0aad7bded08bdc..15e62df67b23f34968731448f3702f38c5b216cd 100644
--- a/src/assets/sass/shared/_form.scss
+++ b/src/assets/sass/shared/_form.scss
@@ -1 +1,29 @@
+.form_field {
+  margin: 0.5rem 0;
+  border-radius: 0.25rem;
+  background: rgba($faint,0.25);
 
+  label {
+    font-size: ms(-3);
+    font-weight: 600;
+    color: $black;
+    opacity: 0.75;
+    padding: 0.5rem 0.5rem 0;
+  }
+
+  input {
+    border: 0;
+    background: transparent;
+    font-size: ms(0);
+    font-weight: 400;
+    font-family: $sans;
+    line-height: ms(0) * 1.3;
+    width: 100%;
+    opacity: 0.75;
+    padding: 0.5rem;
+    margin-top: -0.25rem;
+    &:focus {
+      opacity: 1;
+    }
+  }
+}
diff --git a/src/assets/sass/shared/_list.scss b/src/assets/sass/shared/_list.scss
index b6037a59fd0203357e757da49afcc10975414322..635d8ca5fc1d1198f26e88a382928b43f3b409c5 100644
--- a/src/assets/sass/shared/_list.scss
+++ b/src/assets/sass/shared/_list.scss
@@ -1,11 +1,9 @@
 .list {
-  &.-padded {
-    padding: 0.325rem;
-    & > li {
-      margin-bottom: 0.325rem;
-      &:last-child {
-        margin-bottom: 0;
-      }
+  padding: 0.5rem;
+  & > li {
+    margin-bottom: 0.5rem;
+    &:last-child {
+      margin-bottom: 0;
     }
   }
 }
diff --git a/src/assets/sass/shared/_text.scss b/src/assets/sass/shared/_text.scss
index 158001095ffcce392f38539ae6d856a8539e4a54..8d9b902b086b054c16a561db0321333c43cbb857 100644
--- a/src/assets/sass/shared/_text.scss
+++ b/src/assets/sass/shared/_text.scss
@@ -25,5 +25,21 @@
   strong {
     font-weight: 500;
   }
+
+  &.-code {
+    user-select: text;
+    font-family: $mono;
+    padding: 0.5rem;
+    background: rgba($faint,0.25);
+    color: $black;
+    margin: 0.5rem 0;
+    font-size: ms(-1);
+    border-radius: 0.25rem;
+  }
 }
 
+.span {
+  &.-placeholder {
+    color: $faint;
+  }
+}