diff --git a/package.json b/package.json
index 9645dd6014891a1a25eb4c22cb49e214bd2e6472..5a3e2fa2e8b5f42c8dd3ebfb43f292c0cd2eb9a3 100644
--- a/package.json
+++ b/package.json
@@ -37,25 +37,19 @@
     "yarn": "^1.4.2"
   },
   "scripts": {
-    "build": "npm-run-all -l build-hoc build-react build-electron",
-    "build-electron": "cd packages/light-electron && npm run build",
-    "build-hoc": "cd packages/light-hoc && npm run build",
-    "build-react": "cd packages/light-react && npm run build",
-    "preelectron": "npm run build",
-    "electron": "cd packages/light-electron && npm run electron --",
-    "lint": "npm-run-all -l lint-*",
-    "lint-electron": "cd packages/light-electron && npm run lint",
-    "lint-hoc": "cd packages/light-hoc && npm run lint",
-    "lint-react": "cd packages/light-react && npm run lint",
-    "prepackage": "npm run build",
-    "package": "cd packages/light-electron && npm run package",
-    "release": "cd packages/light-electron && npm run release --",
-    "start": "npm-run-all -l -s build-hoc -p start-*",
-    "start-electron": "cd packages/light-electron && npm start",
-    "start-react": "cd packages/light-react && npm start",
-    "test": "npm-run-all -l test-*",
-    "test-electron": "cd packages/light-electron && npm test",
-    "test-react": "cd packages/light-react && npm test"
+    "build": "lerna run build",
+    "preelectron": "yarn build",
+    "electron": "cd packages/light-electron && yarn electron",
+    "lint": "lerna run lint --parallel",
+    "prepackage": "yarn build",
+    "package": "cd packages/light-electron && yarn package",
+    "release": "cd packages/light-electron && yarn release",
+    "start": "npm-run-all -l -p start-*",
+    "start-electron": "cd packages/light-electron && yarn start",
+    "start-hoc": "cd packages/light-hoc && yarn start",
+    "start-react": "cd packages/light-react && yarn start",
+    "start-ui": "cd packages/light-ui && yarn start",
+    "test": "lerna run test --parallel"
   },
   "devDependencies": {
     "lerna": "^2.11.0",
diff --git a/packages/light-electron/package.json b/packages/light-electron/package.json
index 237d35bd58da253493c3a97e9d0a5e7cf1b2c8dc..d09b3d11522eafc7d470918402db3549e55ed4ac 100644
--- a/packages/light-electron/package.json
+++ b/packages/light-electron/package.json
@@ -28,7 +28,7 @@
     "channel": "beta"
   },
   "scripts": {
-    "prebuild": "cp -r ../light-react/build static/build && ./scripts/fixElectronBug.sh",
+    "prebuild": "copyfiles ../light-react/build static/build && ./scripts/fixElectronBug.sh",
     "build": "electron-webpack",
     "electron": "electron dist/main/main.js --light",
     "lint": "semistandard 'src/**/*.js' --parser babel-eslint",
@@ -44,7 +44,7 @@
     "command-exists": "^1.2.6",
     "commander": "^2.15.1",
     "electron-dl": "^1.11.0",
-    "light-hoc": "^0.1.0",
+    "light-react": "^0.1.0",
     "pino": "^4.16.1",
     "pino-multi-stream": "^3.1.2",
     "promise-any": "^0.2.0",
@@ -52,6 +52,7 @@
   },
   "devDependencies": {
     "babel-eslint": "^8.2.3",
+    "copyfiles": "^2.0.0",
     "cross-env": "^5.1.4",
     "electron": "^2.0.2",
     "electron-builder": "^20.15.1",
diff --git a/packages/light-hoc/package.json b/packages/light-hoc/package.json
index 928b1f1121e00b893aabd907e87849042f692851..b2f8e3a7a9dce5715b90adec63fb8df16b4a18ee 100644
--- a/packages/light-hoc/package.json
+++ b/packages/light-hoc/package.json
@@ -26,8 +26,10 @@
   "homepage": "https://github.com/parity-js/light",
   "main": "lib/index.js",
   "scripts": {
-    "build": "rimraf lib && babel src --out-dir lib",
-    "lint": "semistandard 'src/**/*.js' --parser babel-eslint"
+    "prebuild": "rimraf lib",
+    "build": "babel src --out-dir lib",
+    "lint": "semistandard 'src/**/*.js' --parser babel-eslint",
+    "start": "yarn build --watch"
   },
   "peerDependencies": {
     "@parity/light.js": "https://github.com/parity-js/light.js#6f6c93920bb41486a8b22fe8a40151704fd8f83a",
diff --git a/packages/light-react/package.json b/packages/light-react/package.json
index 3a8a8b61bd53b6f5395229d943591e808644543a..e23fccba45f45a3fe5acd262752993b684f5d659 100644
--- a/packages/light-react/package.json
+++ b/packages/light-react/package.json
@@ -40,11 +40,13 @@
     "@parity/shared": "^3.0.1",
     "is-electron": "^2.1.0",
     "light-hoc": "^0.1.0",
+    "light-ui": "^0.1.0",
     "lodash": "^4.17.10",
     "mobx": "^4.2.0",
     "mobx-react": "^5.1.2",
     "react": "^16.3.2",
     "react-blockies": "^1.3.0",
+    "react-copy-to-clipboard": "^5.0.1",
     "react-dom": "^16.3.2",
     "react-router-dom": "^4.2.2",
     "react-scripts": "1.1.4",
diff --git a/packages/light-react/src/Accounts/AccountsList/AccountsList.js b/packages/light-react/src/Accounts/AccountsList/AccountsList.js
index 1cb732e8623b5ce435a93fb583aab39b210cd0b8..2216ad7d91e6f62c147963657ef83712a7a45ed7 100644
--- a/packages/light-react/src/Accounts/AccountsList/AccountsList.js
+++ b/packages/light-react/src/Accounts/AccountsList/AccountsList.js
@@ -6,6 +6,7 @@
 import React, { Component } from 'react';
 import { accountsInfo$ } from '@parity/light.js';
 import Blockies from 'react-blockies';
+import { Header } from 'light-ui';
 import { inject, observer } from 'mobx-react';
 import light from 'light-hoc';
 
@@ -31,7 +32,8 @@ class AccountsList extends Component {
     // component.
     api.parity
       .setNewDappsDefaultAddress(address)
-      .then(() => history.push('/tokens'));
+      .then(() => history.push('/tokens'))
+      .catch(() => {}); // TODO do what?
   };
 
   handleCreateAccount = () => {
@@ -44,17 +46,14 @@ class AccountsList extends Component {
 
     return (
       <div>
-        <nav className='header-nav'>
-          <div className='header-nav_left' />
-          <div className='header-nav_title'>
-            <h1>Accounts</h1>
-          </div>
-          <div className='header-nav_right'>
+        <Header
+          title={<h1>Accounts</h1>}
+          right={
             <a className='icon -new' onClick={this.handleCreateAccount}>
               New account
             </a>
-          </div>
-        </nav>
+          }
+        />
 
         <div className='window_content'>
           <div className='box -scroller'>
@@ -68,7 +67,7 @@ class AccountsList extends Component {
                   >
                     <div className='account box -card -clickable'>
                       <div className='account_avatar'>
-                        <Blockies seed={address} />
+                        <Blockies seed={address.toLowerCase()} />
                       </div>
                       <div className='account_information'>
                         <div className='account_name'>
diff --git a/packages/light-react/src/Accounts/CreateAccount/AccountName/AccountName.js b/packages/light-react/src/Accounts/CreateAccount/AccountName/AccountName.js
index fe20e3bac5a6c2b250d25b1cd3082aaf4542850e..0956a9aa2452b437150958d73cdacc824421235c 100644
--- a/packages/light-react/src/Accounts/CreateAccount/AccountName/AccountName.js
+++ b/packages/light-react/src/Accounts/CreateAccount/AccountName/AccountName.js
@@ -4,6 +4,7 @@
 // SPDX-License-Identifier: MIT
 
 import React, { Component } from 'react';
+import { FormField } from 'light-ui';
 import { inject, observer } from 'mobx-react';
 import { Link } from 'react-router-dom';
 
@@ -50,15 +51,14 @@ class AccountName extends Component {
                 <div className='text'>
                   <p>Please give this account a name:</p>
                 </div>
-                <div className='form_field'>
-                  <label>Name</label>
-                  <input
-                    type='text'
-                    onChange={this.handleChangeName}
-                    required
-                    value={name}
-                  />
-                </div>
+                <FormField
+                  label='Name'
+                  onChange={this.handleChangeName}
+                  required
+                  type='text'
+                  value={name}
+                />
+
                 <nav className='form-nav'>
                   {name ? (
                     <Link to={`/accounts/new/${+currentStep + 1}`}>
diff --git a/packages/light-react/src/Accounts/CreateAccount/AccountPassword/AccountPassword.js b/packages/light-react/src/Accounts/CreateAccount/AccountPassword/AccountPassword.js
index 7b571894093ace086adcabfaad0e578bd5d16a1d..67d4c80f4394a2f8ee32d56df43d66194c271f57 100644
--- a/packages/light-react/src/Accounts/CreateAccount/AccountPassword/AccountPassword.js
+++ b/packages/light-react/src/Accounts/CreateAccount/AccountPassword/AccountPassword.js
@@ -4,6 +4,7 @@
 // SPDX-License-Identifier: MIT
 
 import React, { Component } from 'react';
+import { FormField } from 'light-ui';
 import { inject, observer } from 'mobx-react';
 
 import CreateAccountHeader from '../CreateAccountHeader';
@@ -56,34 +57,28 @@ class AccountPassword extends Component {
                 <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>
+              <FormField
+                label='Password'
+                onChange={this.handlePasswordChange}
+                required
+                type='password'
+                value={password}
+              />
 
-              <div className='form_field'>
-                <label>Confirm </label>
-                <input
-                  onChange={this.handleConfirmChange}
-                  required
-                  type='password'
-                  value={confirm}
-                />
-              </div>
+              <FormField
+                label='Conform'
+                onChange={this.handleConfirmChange}
+                required
+                type='password'
+                value={confirm}
+              />
 
-              <div className='form_field'>
-                <label>Password Hint (optional) </label>
-                <input
-                  onChange={this.handleHintChange}
-                  type='text'
-                  value={hint}
-                />
-              </div>
+              <FormField
+                label='Password Hint (optional)'
+                onChange={this.handleHintChange}
+                type='text'
+                value={hint}
+              />
 
               <nav className='form-nav'>
                 <button
diff --git a/packages/light-react/src/Accounts/CreateAccount/AccountWritePhrase/AccountWritePhrase.js b/packages/light-react/src/Accounts/CreateAccount/AccountWritePhrase/AccountWritePhrase.js
index fd0384856efdd12eec8e7322fa46b08d1096d19a..1e5bf2296fb7f4d0bbf0043fc64623d235b4f69e 100644
--- a/packages/light-react/src/Accounts/CreateAccount/AccountWritePhrase/AccountWritePhrase.js
+++ b/packages/light-react/src/Accounts/CreateAccount/AccountWritePhrase/AccountWritePhrase.js
@@ -4,6 +4,7 @@
 // SPDX-License-Identifier: MIT
 
 import React, { Component } from 'react';
+import { FormField } from 'light-ui';
 import { inject, observer } from 'mobx-react';
 
 import AccountPlaceholder from '../AccountPlaceholder';
@@ -19,19 +20,26 @@ class AccountWritePhrase extends Component {
   handleChange = ({ target: { value } }) => this.setState({ value });
 
   handleNextStep = () => {
-    const { history, location: { pathname } } = this.props;
+    const {
+      history,
+      location: { pathname }
+    } = this.props;
     const currentStep = pathname.slice(-1);
     history.push(`/accounts/new/${+currentStep + 1}`);
   };
 
   handleSavePhrase = () => {
-    const { createAccountStore: { setPhrase } } = this.props;
+    const {
+      createAccountStore: { setPhrase }
+    } = this.props;
     const { value } = this.state;
     setPhrase(value).then(this.handleNextStep);
   };
 
   render () {
-    const { createAccountStore: { isImport } } = this.props;
+    const {
+      createAccountStore: { isImport }
+    } = this.props;
     const { value } = this.state;
 
     return (
@@ -42,14 +50,14 @@ class AccountWritePhrase extends Component {
             <div className='text'>
               <p>Please write your recovery phrase:</p>
             </div>
-            <div className='form_field'>
-              <label>Recovery phrase</label>
-              <textarea onChange={this.handleChange} required value={value} />
-            </div>
+            <FormField
+              input={
+                <textarea onChange={this.handleChange} required value={value} />
+              }
+              label='Recovery phrase'
+            />
 
-            <nav className='form-nav'>
-              {this.renderButton()}
-            </nav>
+            <nav className='form-nav'>{this.renderButton()}</nav>
           </div>
         </div>
       </div>
@@ -57,7 +65,9 @@ class AccountWritePhrase extends Component {
   }
 
   renderButton = () => {
-    const { createAccountStore: { isImport, phrase } } = this.props;
+    const {
+      createAccountStore: { isImport, phrase }
+    } = this.props;
     const { value } = this.state;
 
     // If we are creating a new account, the button just checks the phrase has
diff --git a/packages/light-react/src/Accounts/CreateAccount/CreateAccount.js b/packages/light-react/src/Accounts/CreateAccount/CreateAccount.js
index 2bc9fd81a780be0d6cc4498703fe93565b61b063..ac823f30896d5fe797015ee9b52a0776ecf622e0 100644
--- a/packages/light-react/src/Accounts/CreateAccount/CreateAccount.js
+++ b/packages/light-react/src/Accounts/CreateAccount/CreateAccount.js
@@ -4,9 +4,10 @@
 // SPDX-License-Identifier: MIT
 
 import React, { Component } from 'react';
-import { Route } from 'react-router-dom';
+import { Header } from 'light-ui';
 import { inject, observer } from 'mobx-react';
 import memoize from 'lodash/memoize';
+import { Route } from 'react-router-dom';
 
 import AccountConfirm from './AccountConfirm';
 import AccountCopyPhrase from './AccountCopyPhrase';
@@ -35,14 +36,12 @@ class CreateAccount extends Component {
 
   handleCreateAccount = () => {
     this.props.createAccountStore.setIsImporting(false);
-    this.props.history.push('/accounts/new');
   };
 
   handleGoBack = () => this.props.history.goBack();
 
   handleImportAccount = () => {
     this.props.createAccountStore.setIsImporting(true);
-    this.props.history.push('/accounts/new');
   };
 
   render () {
@@ -58,16 +57,16 @@ class CreateAccount extends Component {
 
     return (
       <div>
-        <nav className='header-nav'>
-          <div className='header-nav_left'>
-            <a className='icon -close' onClick={this.handleGoBack}>
-              Close
+        <Header
+          left={
+            <a className='icon -back' onClick={this.handleGoBack}>
+              Back
             </a>
-          </div>
-          <div className='header-nav_title'>
+          }
+          title={
             <h1>{isImport ? 'Import account' : 'Create a new account'}</h1>
-          </div>
-          <div className='header-nav_right'>
+          }
+          right={
             <div className='progress-indicator'>
               {Steps.map((_, index) => (
                 <div
@@ -79,8 +78,8 @@ class CreateAccount extends Component {
                 />
               ))}
             </div>
-          </div>
-        </nav>
+          }
+        />
 
         <div className='window_content'>
           {Steps.map((StepComponent, index) => (
diff --git a/packages/light-react/src/App/App.js b/packages/light-react/src/App/App.js
index c1043dcdc744641d82ad22f3ea33597e8ab2d5bb..3a779ef4b00554f202b468bd8bacf587418102f6 100644
--- a/packages/light-react/src/App/App.js
+++ b/packages/light-react/src/App/App.js
@@ -21,7 +21,6 @@ import Send from '../Send';
 import Settings from '../Settings';
 import { STATUS } from '../stores/healthStore';
 import Tokens from '../Tokens';
-import './App.css';
 
 // Use MemoryRouter for production viewing in file:// protocol
 // https://github.com/facebook/create-react-app/issues/3591
diff --git a/packages/light-react/src/App/App.sass b/packages/light-react/src/App/App.sass
deleted file mode 100644
index ff220653a038b1e4cd43a28cdc6d114ea2655008..0000000000000000000000000000000000000000
--- a/packages/light-react/src/App/App.sass
+++ /dev/null
@@ -1,32 +0,0 @@
-/* Copyright 2015-2018 Parity Technologies (UK) Ltd. */
-/* This file is part of Parity. */
-
-/* SPDX-License-Identifier: MIT */
-
-@import '../assets/sass/modules/grid'
-@import '../assets/sass/modules/modular-scale'
-@import '../assets/sass/modules/variables'
-@import '../assets/sass/modules/reset'
-
-+reset
-
-@import '../assets/sass/shared/basics'
-@import '../assets/sass/shared/box'
-@import '../assets/sass/shared/button'
-@import '../assets/sass/shared/form'
-@import '../assets/sass/shared/list'
-@import '../assets/sass/shared/text'
-
-@import '../assets/sass/layouts/wrapper'
-
-@import '../assets/sass/components/logo'
-@import '../assets/sass/components/token'
-@import '../assets/sass/components/account'
-@import '../assets/sass/components/status'
-@import '../assets/sass/components/header-nav'
-@import '../assets/sass/components/footer-nav'
-@import '../assets/sass/components/progress-indicator'
-@import '../assets/sass/components/form-nav'
-@import '../assets/sass/components/alert-screen'
-@import '../assets/sass/components/search-form'
-
diff --git a/packages/light-react/src/Overlay/Overlay.js b/packages/light-react/src/Overlay/Overlay.js
index 665d2908dd60ee71bb537df819f177aa89c11ac5..735675243a3c96d909de04222299dfa6a58a94e5 100644
--- a/packages/light-react/src/Overlay/Overlay.js
+++ b/packages/light-react/src/Overlay/Overlay.js
@@ -15,7 +15,7 @@ import loading from '../assets/img/icons/loading.svg';
 class Overlays extends Component {
   render () {
     return (
-      <div className='windowContent'>
+      <div className='window_content'>
         <div className='box -padded'>
           <div className='alert-screen'>
             <div className='alert-screen_content'>
diff --git a/packages/light-react/src/Receive/Receive.js b/packages/light-react/src/Receive/Receive.js
index c7a5e22a6b8d87415da5804d599e7e2ba08ecca2..c8183e285d49af49730833b3a8a81f09aadb315f 100644
--- a/packages/light-react/src/Receive/Receive.js
+++ b/packages/light-react/src/Receive/Receive.js
@@ -5,7 +5,9 @@
 
 import React, { PureComponent } from 'react';
 import { accountsInfo$, defaultAccount$ } from '@parity/light.js';
-import Blockie from 'react-blockies';
+import Blockies from 'react-blockies';
+import { CopyToClipboard } from 'react-copy-to-clipboard';
+import { Header } from 'light-ui';
 import light from 'light-hoc';
 import { Link } from 'react-router-dom';
 
@@ -17,53 +19,45 @@ class Receive extends PureComponent {
   render () {
     const { accountsInfo, defaultAccount } = this.props;
 
-    if (!defaultAccount) return <div>Loading...</div>;
-
     return (
       <div>
-        <nav className='header-nav'>
-          <div className='header-nav_left'>
+        <Header
+          left={
             <Link to='/tokens' className='icon -close'>
               Close
             </Link>
-          </div>
-          <div className='header-nav_title'>
-            <h1>
-              {accountsInfo && defaultAccount && accountsInfo[defaultAccount]
-                ? accountsInfo[defaultAccount].name
-                : 'Loading...'}
-            </h1>
-          </div>
-          <div className='header-nav_right' />
-        </nav>
+          }
+          title={
+            accountsInfo && defaultAccount && accountsInfo[defaultAccount] ? (
+              <h1>
+                <Blockies
+                  seed={defaultAccount.toLowerCase()}
+                  scale={3}
+                  size={8}
+                />{' '}
+                {accountsInfo[defaultAccount].name}
+              </h1>
+            ) : (
+              <h1>Loading...</h1>
+            )
+          }
+        />
         <div className='window_content'>
           <div className='box -padded'>
             <div className='box -card'>
-              <div className='account'>
-                <div className='account_avatar'>
-                  <Blockie seed={defaultAccount} />
-                </div>
-                <div className='account_information'>
-                  <div className='account_name'>
-                    {accountsInfo &&
-                    defaultAccount &&
-                    accountsInfo[defaultAccount]
-                      ? accountsInfo[defaultAccount].name
-                      : 'Loading...'}
-                  </div>
-                  <div className='account_address'>{defaultAccount}</div>
-                </div>
+              <div className='text'>
+                <p>Your address is:</p>
               </div>
-              <div className='box -card-drawer'>
-                <div className='text'>
-                  <p>Your address is:</p>
-                </div>
-                <div className='text -code'>{defaultAccount}</div>
-                <div className='box text -right'>
-                  <button className='button -utility'>
+              <div className='text -code'>{defaultAccount}</div>
+              <div className='box text -right'>
+                <CopyToClipboard text={defaultAccount}>
+                  <button
+                    className='button -utility'
+                    onClick={this.handleCopyPublicAddress}
+                  >
                     Copy address to clipboard
                   </button>
-                </div>
+                </CopyToClipboard>
               </div>
             </div>
           </div>
diff --git a/packages/light-react/src/Send/Sent/Sent.js b/packages/light-react/src/Send/Sent/Sent.js
index d3cc163f620847e73b5a176bff705bb7bda708b9..88374559e716a43dc51dc9da4116d1fc20a83290 100644
--- a/packages/light-react/src/Send/Sent/Sent.js
+++ b/packages/light-react/src/Send/Sent/Sent.js
@@ -23,36 +23,28 @@ const MIN_CONFIRMATIONS = 6;
 class Sent extends Component {
   render () {
     const {
-      sendStore: { confirmations, token }
+      sendStore: { confirmations }
     } = this.props;
 
     return (
-      <div>
-        <nav className='header-nav'>
-          <div className='header-nav_left'>
+      <div className='window_content'>
+        <div className='alert-screen'>
+          <div className='alert-screen_content'>
+            <div className='alert-screen_image'>
+              <img alt='loading' src={this.renderIcon()} />
+            </div>
+            <div className='alert-screen_text'>
+              <h1>{this.renderTitle()}</h1>
+              <p>{this.renderDescription()}</p>
+            </div>
             {confirmations >= MIN_CONFIRMATIONS && (
-              <Link to='/tokens' className='icon -close'>
-                Close
-              </Link>
+              <nav className='form-nav'>
+                <Link to='/'>
+                  <button className='button'>Go back</button>
+                </Link>
+              </nav>
             )}
           </div>
-          <div className='header-nav_title'>
-            <h1>Send {token.name}</h1>
-          </div>
-          <div className='header-nav_right' />
-        </nav>
-        <div className='window_content'>
-          <div className='alert-screen'>
-            <div className='alert-screen_content'>
-              <div className='alert-screen_image'>
-                <img alt='loading' src={this.renderIcon()} />
-              </div>
-              <div className='alert-screen_text'>
-                <h1>{this.renderTitle()}</h1>
-                <p>{this.renderDescription()}</p>
-              </div>
-            </div>
-          </div>
         </div>
       </div>
     );
@@ -64,11 +56,7 @@ class Sent extends Component {
     } = this.props;
 
     if (confirmations >= MIN_CONFIRMATIONS) {
-      return (
-        <Link to='/'>
-          <button className='button'>Go back</button>
-        </Link>
-      );
+      return null;
     }
 
     if (confirmations > 0) {
diff --git a/packages/light-react/src/Send/Signer/Signer.js b/packages/light-react/src/Send/Signer/Signer.js
index f22dfe2bca9a5dc183caf595eaa12d0c66b778a9..9ee50d6edc078a91060bf7b419004efbcd569a17 100644
--- a/packages/light-react/src/Send/Signer/Signer.js
+++ b/packages/light-react/src/Send/Signer/Signer.js
@@ -4,6 +4,8 @@
 // SPDX-License-Identifier: MIT
 
 import React, { Component } from 'react';
+import { FormField, Header } from 'light-ui';
+import { fromWei } from '@parity/api/lib/util/wei';
 import { inject, observer } from 'mobx-react';
 import { Link } from 'react-router-dom';
 
@@ -45,17 +47,15 @@ class Signer extends Component {
 
     return (
       <div>
-        <nav className='header-nav'>
-          <div className='header-nav_left'>
+        <Header
+          left={
             <Link to='/tokens' className='icon -close'>
               Close
             </Link>
-          </div>
-          <div className='header-nav_title'>
-            <h1>Send {token.name}</h1>
-          </div>
-          <div className='header-nav_right' />
-        </nav>
+          }
+          title={<h1>Send {token.name}</h1>}
+        />
+
         <div className='window_content'>
           <div className='box -padded'>
             <div className='box -card'>
@@ -64,7 +64,7 @@ class Signer extends Component {
                 <div className='form_field'>
                   <label>Amount</label>
                   <div className='form_field_value'>
-                    {token.amount} {token.symbol}
+                    {+fromWei(tx.value)} {token.symbol}
                   </div>
                 </div>
                 <div className='form_field'>
@@ -76,15 +76,15 @@ class Signer extends Component {
                 <div className='text'>
                   <p>Enter your password to confirm this transaction.</p>
                 </div>
-                <div className='form_field'>
-                  <label>Password</label>
-                  <input
-                    onChange={this.handleChangePassword}
-                    required
-                    type='password'
-                    value={password}
-                  />
-                </div>
+
+                <FormField
+                  label='Password'
+                  onChange={this.handleChangePassword}
+                  required
+                  type='password'
+                  value={password}
+                />
+
                 <nav className='form-nav -binary'>
                   <button
                     className='button -cancel'
diff --git a/packages/light-react/src/Send/TxForm/TxForm.js b/packages/light-react/src/Send/TxForm/TxForm.js
index 84ba02a306e274551d3b70826fb63caa709d2f6e..16291c3c1d3b6c81658439e1486cbe745351dcbc 100644
--- a/packages/light-react/src/Send/TxForm/TxForm.js
+++ b/packages/light-react/src/Send/TxForm/TxForm.js
@@ -5,7 +5,8 @@
 
 import React, { Component } from 'react';
 import { defaultAccount$ } from '@parity/light.js';
-import { fromWei, toWei } from '@parity/api/lib/util/wei'; // TODO @parity/api's wei util should have Gwei as an unit
+import { fromWei, toWei } from '@parity/api/lib/util/wei';
+import { FormField, Header } from 'light-ui';
 import { inject, observer } from 'mobx-react';
 import light from 'light-hoc';
 import { Link } from 'react-router-dom';
@@ -65,17 +66,15 @@ class Send extends Component {
 
     return (
       <div>
-        <nav className='header-nav'>
-          <div className='header-nav_left'>
+        <Header
+          left={
             <Link to='/tokens' className='icon -close'>
               Close
             </Link>
-          </div>
-          <div className='header-nav_title'>
-            <h1>Send {token.name}</h1>
-          </div>
-          <div className='header-nav_right' />
-        </nav>
+          }
+          title={<h1>Send {token.name}</h1>}
+        />
+
         <div className='window_content'>
           <div className='box -padded'>
             <div className='box -card'>
@@ -83,54 +82,67 @@ class Send extends Component {
               <div className='box -card-drawer'>
                 <form className='send-form' onSubmit={this.handleSubmit}>
                   <fieldset className='form_fields'>
-                    <div className='form_field'>
-                      <label>Amount</label>
-                      <input
-                        className='form_field_amount'
-                        onChange={this.handleChangeAmount}
-                        required
-                        type='number'
-                        value={amount}
-                      />
-                      <nav className='form-field_nav'>
-                        <button className='button -utility' type='button'>
-                          Max
-                        </button>
-                      </nav>
-                    </div>
-                    <div className='form_field'>
-                      <label>To</label>
-                      <textarea
-                        className='-sm'
-                        onChange={this.handleChangeTo}
-                        required
-                        type='text'
-                        placeholder='Recipient address'
-                        value={to}
-                      />
-                    </div>
-                    <div className='form_field -range'>
-                      <label>Gas</label>
-                      <input
-                        max={MAX_GAS_PRICE}
-                        min={MIN_GAS_PRICE}
-                        onChange={this.handleChangeGasPrice}
-                        required
-                        step={0.1}
-                        type='range'
-                        value={gasPrice}
-                      />
-                      <nav className='range-nav'>
-                        <span className='range-nav_label'>Cheap</span>
-                        <span className='range-nav_value'>
-                          {fromWei(
-                            toWei(gasPrice, 'shannon').mul(estimated)
-                          ).toFixed(6)}{' '}
-                          ETH
-                        </span>
-                        <span className='range-nav_label'>Fast</span>
-                      </nav>
-                    </div>
+                    <FormField
+                      input={
+                        <div>
+                          <input
+                            className='form_field_amount'
+                            onChange={this.handleChangeAmount}
+                            required
+                            type='number'
+                            value={amount}
+                          />
+                          <nav className='form-field_nav'>
+                            <button className='button -utility' type='button'>
+                              Max
+                            </button>
+                          </nav>
+                        </div>
+                      }
+                      label='Amount'
+                    />
+
+                    <FormField
+                      input={
+                        <textarea
+                          className='-sm'
+                          onChange={this.handleChangeTo}
+                          required
+                          type='text'
+                          placeholder='Recipient address'
+                          value={to}
+                        />
+                      }
+                      label='To'
+                    />
+
+                    <FormField
+                      className='-range'
+                      input={
+                        <div>
+                          <input
+                            max={MAX_GAS_PRICE}
+                            min={MIN_GAS_PRICE}
+                            onChange={this.handleChangeGasPrice}
+                            required
+                            step={0.1}
+                            type='range'
+                            value={gasPrice}
+                          />
+                          <nav className='range-nav'>
+                            <span className='range-nav_label'>Cheap</span>
+                            <span className='range-nav_value'>
+                              {fromWei(
+                                toWei(gasPrice, 'shannon').mul(estimated)
+                              ).toFixed(6)}{' '}
+                              ETH
+                            </span>
+                            <span className='range-nav_label'>Fast</span>
+                          </nav>
+                        </div>
+                      }
+                      label='Gas'
+                    />
                   </fieldset>
                   <nav className='form-nav'>
                     <button className='button'>Send</button>
diff --git a/packages/light-react/src/Settings/Settings.js b/packages/light-react/src/Settings/Settings.js
index 42057fdebba22e9fa7443453eab00429f69b0db2..da4f8d0ac9090d5f07dd11aec3cae7c8dfab72b2 100644
--- a/packages/light-react/src/Settings/Settings.js
+++ b/packages/light-react/src/Settings/Settings.js
@@ -6,6 +6,7 @@
 import React, { Component } from 'react';
 import { chainName$ } from '@parity/light.js';
 import debounce from 'lodash/debounce';
+import { Header } from 'light-ui';
 import { inject, observer } from 'mobx-react';
 import light from 'light-hoc';
 import { Link } from 'react-router-dom';
@@ -97,17 +98,14 @@ class Settings extends Component {
 
     return (
       <div>
-        <nav className='header-nav'>
-          <div className='header-nav_left'>
+        <Header
+          left={
             <Link to='/tokens' className='icon -close'>
               Close
             </Link>
-          </div>
-          <div className='header-nav_title'>
-            <h1>Edit token whitelist</h1>
-          </div>
-          <div className='header-nav_right' />
-        </nav>
+          }
+          title={<h1>Edit token whitelist</h1>}
+        />
 
         <div className='window_content'>
           <div className='box -padded'>
diff --git a/packages/light-react/src/Tokens/Tokens.js b/packages/light-react/src/Tokens/Tokens.js
index 2f069ea280329f1f7b18486c5091284a738246dd..4a661c64deec94be65ff32c2f4e7a277435de37a 100644
--- a/packages/light-react/src/Tokens/Tokens.js
+++ b/packages/light-react/src/Tokens/Tokens.js
@@ -5,6 +5,8 @@
 
 import React, { PureComponent } from 'react';
 import { accountsInfo$, defaultAccount$ } from '@parity/light.js';
+import Blockies from 'react-blockies';
+import { Header } from 'light-ui';
 import light from 'light-hoc';
 import { Link } from 'react-router-dom';
 
@@ -21,21 +23,27 @@ class Tokens extends PureComponent {
 
     return (
       <div>
-        <nav className='header-nav'>
-          <div className='header-nav_left'>
+        <Header
+          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' />
-        </nav>
+          }
+          title={
+            accountsInfo && defaultAccount && accountsInfo[defaultAccount] ? (
+              <Link to='/receive'>
+                <Blockies
+                  seed={defaultAccount.toLowerCase()}
+                  scale={3}
+                  size={8}
+                />{' '}
+                {accountsInfo[defaultAccount].name}
+              </Link>
+            ) : (
+              'Loading...'
+            )
+          }
+        />
 
         <TokensList />
 
diff --git a/packages/light-react/src/assets/sass/components/_footer-nav.scss b/packages/light-react/src/assets/sass/components/_footer-nav.scss
index b0303d8509319fe0034eacc638748afdecf36980..1f9732086589e1036bf2811af520796da735110e 100644
--- a/packages/light-react/src/assets/sass/components/_footer-nav.scss
+++ b/packages/light-react/src/assets/sass/components/_footer-nav.scss
@@ -36,7 +36,7 @@
     padding: 0.25rem 0.5rem 0.175rem;
     border-radius: 0.25rem;
     &:hover {
-      background: rgba($faint,0.5);
+      background: rgba($faint, 0.5);
       color: $black;
     }
 
@@ -53,11 +53,11 @@
       }
 
       &.-receive {
-        background-image: url('../assets/img/icons/receive.svg');
+        background-image: url('./assets/img/icons/receive.svg');
       }
 
       &.-settings {
-        background-image: url('../assets/img/icons/gear.svg');
+        background-image: url('./assets/img/icons/gear.svg');
       }
     }
   }
diff --git a/packages/light-react/src/assets/sass/components/_header-nav.scss b/packages/light-react/src/assets/sass/components/_header-nav.scss
index f9a013ad697a8798c390751bda479f60c35a8307..aea21943068531681afb6fc3197aee40319c1e9d 100644
--- a/packages/light-react/src/assets/sass/components/_header-nav.scss
+++ b/packages/light-react/src/assets/sass/components/_header-nav.scss
@@ -6,7 +6,8 @@
   overflow: hidden;
   height: 3.5rem;
 
-  .header-nav_left, .header-nav_right {
+  .header-nav_left,
+  .header-nav_right {
     display: flex;
     flex-direction: column;
     justify-content: center;
@@ -23,7 +24,10 @@
     padding: 1rem 0.5rem;
     text-align: center;
 
-    a, a:link, a:visited, h1 {
+    a,
+    a:link,
+    a:visited,
+    h1 {
       margin: -0.175rem 0 -0.175rem;
       padding: 0.25rem 0.5rem 0.175rem;
       display: inline-block;
@@ -45,7 +49,7 @@
     padding: 0.25rem 0.5rem 0.175rem;
     border-radius: 0.25rem;
     &:hover {
-      background: rgba($faint,0.5);
+      background: rgba($faint, 0.5);
       color: $black;
     }
 
@@ -62,23 +66,23 @@
       }
 
       &.-receive {
-        background-image: url('../assets/img/icons/receive.svg');
+        background-image: url('./assets/img/icons/receive.svg');
       }
 
       &.-settings {
-        background-image: url('../assets/img/icons/gear.svg');
+        background-image: url('./assets/img/icons/gear.svg');
       }
 
       &.-back {
-        background-image: url('../assets/img/icons/back.svg');
+        background-image: url('./assets/img/icons/back.svg');
       }
 
       &.-close {
-        background-image: url('../assets/img/icons/close.svg');
+        background-image: url('./assets/img/icons/close.svg');
       }
 
       &.-new {
-        background-image: url('../assets/img/icons/plus.svg');
+        background-image: url('./assets/img/icons/plus.svg');
       }
     }
   }
diff --git a/packages/light-react/src/assets/sass/shared/_button.scss b/packages/light-react/src/assets/sass/shared/_button.scss
index db41ba9d00078a0c8fa70170c3abe3da8a80332d..f03bf5cf79a67f483ba1c16f899c4d7078829181 100644
--- a/packages/light-react/src/assets/sass/shared/_button.scss
+++ b/packages/light-react/src/assets/sass/shared/_button.scss
@@ -50,7 +50,7 @@
     }
 
     &.-reload {
-      background-image: url('../assets/img/icons/reload.svg');
+      background-image: url('./assets/img/icons/reload.svg');
     }
   }
 
@@ -118,7 +118,7 @@
     }
 
     &.-clear {
-      background-image: url('../assets/img/icons/close.svg');
+      background-image: url('./assets/img/icons/close.svg');
     }
 
     &:disabled {
diff --git a/packages/light-react/src/index.js b/packages/light-react/src/index.js
index aa6193ff2f0fd4eced6ecca2592adadc4ccab160..2a93d79f4bf59821efeea7ba06ffa78a64e14937 100644
--- a/packages/light-react/src/index.js
+++ b/packages/light-react/src/index.js
@@ -9,6 +9,7 @@ import ReactDOM from 'react-dom';
 
 import App from './App';
 import rootStore from './stores';
+import './index.css';
 
 ReactDOM.render(
   <Provider {...rootStore}>
diff --git a/packages/light-react/src/index.sass b/packages/light-react/src/index.sass
new file mode 100644
index 0000000000000000000000000000000000000000..b99eba674a95ee917d0e939378c4e9e0d54fbb5b
--- /dev/null
+++ b/packages/light-react/src/index.sass
@@ -0,0 +1,32 @@
+/* Copyright 2015-2018 Parity Technologies (UK) Ltd. */
+/* This file is part of Parity. */
+
+/* SPDX-License-Identifier: MIT */
+
+@import './assets/sass/modules/grid'
+@import './assets/sass/modules/modular-scale'
+@import './assets/sass/modules/variables'
+@import './assets/sass/modules/reset'
+
++reset
+
+@import './assets/sass/shared/basics'
+@import './assets/sass/shared/box'
+@import './assets/sass/shared/button'
+@import './assets/sass/shared/form'
+@import './assets/sass/shared/list'
+@import './assets/sass/shared/text'
+
+@import './assets/sass/layouts/wrapper'
+
+@import './assets/sass/components/logo'
+@import './assets/sass/components/token'
+@import './assets/sass/components/account'
+@import './assets/sass/components/status'
+@import './assets/sass/components/header-nav'
+@import './assets/sass/components/footer-nav'
+@import './assets/sass/components/progress-indicator'
+@import './assets/sass/components/form-nav'
+@import './assets/sass/components/alert-screen'
+@import './assets/sass/components/search-form'
+
diff --git a/packages/light-ui/README.md b/packages/light-ui/README.md
new file mode 100644
index 0000000000000000000000000000000000000000..e27fb364d2581419a98796d6e019539c3dfd687c
--- /dev/null
+++ b/packages/light-ui/README.md
@@ -0,0 +1,3 @@
+# light-ui
+
+UI components used in the light wallet.
diff --git a/packages/light-ui/babel.config.js b/packages/light-ui/babel.config.js
new file mode 100644
index 0000000000000000000000000000000000000000..4c40e97bd0609323b2121eb43b053ac377582ff9
--- /dev/null
+++ b/packages/light-ui/babel.config.js
@@ -0,0 +1,11 @@
+module.exports = {
+  plugins: [
+    '@babel/plugin-proposal-class-properties',
+    ['emotion', { sourceMap: true, autoLabel: true }]
+  ],
+  presets: [
+    '@babel/preset-env',
+    '@babel/preset-react',
+    ['@babel/preset-stage-0', { decoratorsLegacy: true }]
+  ]
+};
diff --git a/packages/light-ui/package.json b/packages/light-ui/package.json
new file mode 100644
index 0000000000000000000000000000000000000000..f0fe13665186894a23017c4c12fa6d111da1a438
--- /dev/null
+++ b/packages/light-ui/package.json
@@ -0,0 +1,52 @@
+{
+  "name": "light-ui",
+  "description": "The Parity Light Wallet",
+  "version": "0.1.0",
+  "private": true,
+  "author": "Parity Team <admin@parity.io>",
+  "maintainers": [
+    "Jaco Greeff",
+    "Amaury Martiny"
+  ],
+  "contributors": [],
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/parity-js/light.git"
+  },
+  "bugs": {
+    "url": "https://github.com/parity-js/light/issues"
+  },
+  "keywords": [
+    "Ethereum",
+    "Light",
+    "Light Client",
+    "Parity"
+  ],
+  "homepage": "https://github.com/parity-js/light",
+  "main": "lib/index.js",
+  "scripts": {
+    "prebuild": "rimraf lib",
+    "build": "babel src --out-dir lib",
+    "lint": "semistandard 'src/**/*.js' --parser babel-eslint",
+    "start": "yarn build --watch"
+  },
+  "dependencies": {},
+  "devDependencies": {
+    "@babel/cli": "^7.0.0-beta.49",
+    "@babel/core": "^7.0.0-beta.49",
+    "@babel/preset-env": "^7.0.0-beta.49",
+    "@babel/preset-react": "^7.0.0-beta.49",
+    "@babel/preset-stage-0": "^7.0.0-beta.49",
+    "babel-eslint": "^8.2.3",
+    "babel-plugin-emotion": "^9.2.0",
+    "prop-types": "^15.6.1",
+    "react": "^16.4.0",
+    "rimraf": "^2.6.2",
+    "semistandard": "^12.0.1"
+  },
+  "peerDependencies": {
+    "prop-types": "^15.6.1",
+    "react": "^16.4.0"
+  }
+}
diff --git a/packages/light-ui/src/FormField/FormField.js b/packages/light-ui/src/FormField/FormField.js
new file mode 100644
index 0000000000000000000000000000000000000000..e1e337192b1625e9591c52499c8e76dca6f3ce1c
--- /dev/null
+++ b/packages/light-ui/src/FormField/FormField.js
@@ -0,0 +1,22 @@
+// Copyright 2015-2018 Parity Technologies (UK) Ltd.
+// This file is part of Parity.
+//
+// SPDX-License-Identifier: MIT
+
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const FormField = ({ className, input, label, ...otherProps }) => (
+  <div className={['form_field', className].join(' ')}>
+    <label>{label}</label>
+    {input || <input {...otherProps} />}
+  </div>
+);
+
+FormField.propTypes = {
+  className: PropTypes.string,
+  input: PropTypes.node,
+  label: PropTypes.string
+};
+
+export default FormField;
diff --git a/packages/light-ui/src/FormField/index.js b/packages/light-ui/src/FormField/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..a0fd5b88377640a7ed45e66ada3e783b0d10d10e
--- /dev/null
+++ b/packages/light-ui/src/FormField/index.js
@@ -0,0 +1,8 @@
+// Copyright 2015-2018 Parity Technologies (UK) Ltd.
+// This file is part of Parity.
+//
+// SPDX-License-Identifier: MIT
+
+import FormField from './FormField';
+
+export default FormField;
diff --git a/packages/light-ui/src/Header/Header.js b/packages/light-ui/src/Header/Header.js
new file mode 100644
index 0000000000000000000000000000000000000000..256176ea026d74339b97d6a2ce992d7645b56478
--- /dev/null
+++ b/packages/light-ui/src/Header/Header.js
@@ -0,0 +1,23 @@
+// Copyright 2015-2018 Parity Technologies (UK) Ltd.
+// This file is part of Parity.
+//
+// SPDX-License-Identifier: MIT
+
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const Header = ({ left, right, title }) => (
+  <div className='header-nav'>
+    <div className='header-nav_left'>{left}</div>
+    <div className='header-nav_title'>{title}</div>
+    <div className='header-nav_right'>{right}</div>
+  </div>
+);
+
+Header.propTypes = {
+  left: PropTypes.node,
+  right: PropTypes.node,
+  title: PropTypes.oneOfType([PropTypes.node, PropTypes.string])
+};
+
+export default Header;
diff --git a/packages/light-ui/src/Header/index.js b/packages/light-ui/src/Header/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..1b5afdbfefde2acd99a60db2c38fa10bafb278a3
--- /dev/null
+++ b/packages/light-ui/src/Header/index.js
@@ -0,0 +1,8 @@
+// Copyright 2015-2018 Parity Technologies (UK) Ltd.
+// This file is part of Parity.
+//
+// SPDX-License-Identifier: MIT
+
+import Header from './Header';
+
+export default Header;
diff --git a/packages/light-ui/src/index.js b/packages/light-ui/src/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..697a5fb87e8d49d24d06905ef463fa2db53d8a92
--- /dev/null
+++ b/packages/light-ui/src/index.js
@@ -0,0 +1,9 @@
+// Copyright 2015-2018 Parity Technologies (UK) Ltd.
+// This file is part of Parity.
+//
+// SPDX-License-Identifier: MIT
+
+import FormField from './FormField';
+import Header from './Header';
+
+export { FormField, Header };
diff --git a/packages/light-ui/src/theme/colors.js b/packages/light-ui/src/theme/colors.js
new file mode 100644
index 0000000000000000000000000000000000000000..a3e7bf79500cfa0411420677aeed166de4d400b2
--- /dev/null
+++ b/packages/light-ui/src/theme/colors.js
@@ -0,0 +1,17 @@
+// Copyright 2015-2018 Parity Technologies (UK) Ltd.
+// This file is part of Parity.
+//
+// SPDX-License-Identifier: MIT
+
+export const eggshell = '#ffffff';
+export const white = '#f9f9f9';
+export const chrome = '#F5F6F6';
+export const faint = '#dddddd';
+export const black = '#222222';
+export const grey = '#888888';
+
+export const purple = '#330044';
+export const blue = '#160DF6';
+export const green = '#3ec28f';
+export const yellow = '#DFCA29';
+export const red = '#C2473E';
diff --git a/packages/light-ui/src/theme/index.js b/packages/light-ui/src/theme/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..cd94a86100f29e95be39bebee8639f15f8ce19f0
--- /dev/null
+++ b/packages/light-ui/src/theme/index.js
@@ -0,0 +1,6 @@
+// Copyright 2015-2018 Parity Technologies (UK) Ltd.
+// This file is part of Parity.
+//
+// SPDX-License-Identifier: MIT
+
+export * from './colors';
diff --git a/yarn.lock b/yarn.lock
index ffb171ba0d604844dcaa9da520a6584c3e1a5c3f..d24e38a4cbba0210674811df6528de20ddde1fbb 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -167,6 +167,13 @@
     "@babel/types" "7.0.0-beta.35"
     lodash "^4.2.0"
 
+"@babel/helper-module-imports@7.0.0-beta.40":
+  version "7.0.0-beta.40"
+  resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.0.0-beta.40.tgz#251cbb6404599282e8f7356a5b32c9381bef5d2d"
+  dependencies:
+    "@babel/types" "7.0.0-beta.40"
+    lodash "^4.2.0"
+
 "@babel/helper-module-imports@7.0.0-beta.49":
   version "7.0.0-beta.49"
   resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.0.0-beta.49.tgz#41d7d59891016c493432a46f7464446552890c75"
@@ -910,6 +917,14 @@
     lodash "^4.2.0"
     to-fast-properties "^2.0.0"
 
+"@babel/types@7.0.0-beta.40":
+  version "7.0.0-beta.40"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.0.0-beta.40.tgz#25c3d7aae14126abe05fcb098c65a66b6d6b8c14"
+  dependencies:
+    esutils "^2.0.2"
+    lodash "^4.2.0"
+    to-fast-properties "^2.0.0"
+
 "@babel/types@7.0.0-beta.44":
   version "7.0.0-beta.44"
   resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.0.0-beta.44.tgz#6b1b164591f77dec0a0342aca995f2d046b3a757"
@@ -926,6 +941,22 @@
     lodash "^4.17.5"
     to-fast-properties "^2.0.0"
 
+"@emotion/babel-utils@^0.5.3":
+  version "0.5.3"
+  resolved "https://registry.yarnpkg.com/@emotion/babel-utils/-/babel-utils-0.5.3.tgz#6be6dd7a480fdbdfb6cbba7f4f6d9361744b8d6e"
+
+"@emotion/hash@^0.6.2":
+  version "0.6.3"
+  resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.6.3.tgz#0e7a5604626fc6c6d4ac4061a2f5ac80d50262a4"
+
+"@emotion/memoize@^0.6.1":
+  version "0.6.2"
+  resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.6.2.tgz#138e00b332d519b4e307bded6159e5ba48aba3ae"
+
+"@emotion/stylis@^0.6.5":
+  version "0.6.8"
+  resolved "https://registry.yarnpkg.com/@emotion/stylis/-/stylis-0.6.8.tgz#6ad4e8d32b19b440efa4481bbbcb98a8c12765bb"
+
 "@mrmlnc/readdir-enhanced@^2.2.1":
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/@mrmlnc/readdir-enhanced/-/readdir-enhanced-2.2.1.tgz#524af240d1a360527b730475ecfa1344aa540dde"
@@ -1859,6 +1890,23 @@ babel-plugin-dynamic-import-node@1.1.0:
     babel-template "^6.26.0"
     babel-types "^6.26.0"
 
+babel-plugin-emotion@^9.2.0:
+  version "9.2.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-emotion/-/babel-plugin-emotion-9.2.0.tgz#43543dd02c7b5cd89d464aeedef864edb754b852"
+  dependencies:
+    "@babel/helper-module-imports" "7.0.0-beta.40"
+    "@emotion/babel-utils" "^0.5.3"
+    "@emotion/hash" "^0.6.2"
+    "@emotion/memoize" "^0.6.1"
+    "@emotion/stylis" "^0.6.5"
+    babel-plugin-macros "^2.0.0"
+    babel-plugin-syntax-jsx "^6.18.0"
+    convert-source-map "^1.5.0"
+    find-root "^1.1.0"
+    mkdirp "^0.5.1"
+    source-map "^0.5.7"
+    touch "^1.0.0"
+
 babel-plugin-istanbul@^4.0.0:
   version "4.1.6"
   resolved "https://registry.yarnpkg.com/babel-plugin-istanbul/-/babel-plugin-istanbul-4.1.6.tgz#36c59b2192efce81c5b378321b74175add1c9a45"
@@ -1872,6 +1920,12 @@ babel-plugin-jest-hoist@^20.0.3:
   version "20.0.3"
   resolved "https://registry.yarnpkg.com/babel-plugin-jest-hoist/-/babel-plugin-jest-hoist-20.0.3.tgz#afedc853bd3f8dc3548ea671fbe69d03cc2c1767"
 
+babel-plugin-macros@^2.0.0:
+  version "2.2.2"
+  resolved "https://registry.yarnpkg.com/babel-plugin-macros/-/babel-plugin-macros-2.2.2.tgz#049c93f4b934453688a6ec38bba529c55bf0fa1f"
+  dependencies:
+    cosmiconfig "^4.0.0"
+
 babel-plugin-syntax-async-functions@^6.8.0:
   version "6.13.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-syntax-async-functions/-/babel-plugin-syntax-async-functions-6.13.0.tgz#cad9cad1191b5ad634bf30ae0872391e0647be95"
@@ -1912,7 +1966,7 @@ babel-plugin-syntax-flow@^6.18.0:
   version "6.18.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-syntax-flow/-/babel-plugin-syntax-flow-6.18.0.tgz#4c3ab20a2af26aa20cd25995c398c4eb70310c8d"
 
-babel-plugin-syntax-jsx@^6.3.13, babel-plugin-syntax-jsx@^6.8.0:
+babel-plugin-syntax-jsx@^6.18.0, babel-plugin-syntax-jsx@^6.3.13, babel-plugin-syntax-jsx@^6.8.0:
   version "6.18.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz#0af32a9a6e13ca7a3fd5069e62d7b0f58d0d8946"
 
@@ -3529,6 +3583,23 @@ copy-descriptor@^0.1.0:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/copy-descriptor/-/copy-descriptor-0.1.1.tgz#676f6eb3c39997c2ee1ac3a924fd6124748f578d"
 
+copy-to-clipboard@^3:
+  version "3.0.8"
+  resolved "https://registry.yarnpkg.com/copy-to-clipboard/-/copy-to-clipboard-3.0.8.tgz#f4e82f4a8830dce4666b7eb8ded0c9bcc313aba9"
+  dependencies:
+    toggle-selection "^1.0.3"
+
+copyfiles@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/copyfiles/-/copyfiles-2.0.0.tgz#bbd78bb78e8fd6db5c67adf54249317b24560f2a"
+  dependencies:
+    glob "^7.0.5"
+    minimatch "^3.0.3"
+    mkdirp "^0.5.1"
+    noms "0.0.0"
+    through2 "^2.0.1"
+    yargs "^11.0.0"
+
 core-js@^1.0.0:
   version "1.2.7"
   resolved "https://registry.yarnpkg.com/core-js/-/core-js-1.2.7.tgz#652294c14651db28fa93bd2d5ff2983a4f08c636"
@@ -3553,6 +3624,15 @@ cosmiconfig@^2.1.0, cosmiconfig@^2.1.1:
     parse-json "^2.2.0"
     require-from-string "^1.1.0"
 
+cosmiconfig@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/cosmiconfig/-/cosmiconfig-4.0.0.tgz#760391549580bbd2df1e562bc177b13c290972dc"
+  dependencies:
+    is-directory "^0.3.1"
+    js-yaml "^3.9.0"
+    parse-json "^4.0.0"
+    require-from-string "^2.0.1"
+
 create-ecdh@^4.0.0:
   version "4.0.3"
   resolved "https://registry.yarnpkg.com/create-ecdh/-/create-ecdh-4.0.3.tgz#c9111b6f33045c4697f144787f9254cdc77c45ff"
@@ -5337,7 +5417,7 @@ find-cache-dir@^1.0.0:
     make-dir "^1.0.0"
     pkg-dir "^2.0.0"
 
-find-root@^1.0.0:
+find-root@^1.0.0, find-root@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/find-root/-/find-root-1.1.0.tgz#abcfc8ba76f708c42a97b3d685b7e9450bfb9ce4"
 
@@ -7071,7 +7151,7 @@ js-tokens@^3.0.0, js-tokens@^3.0.2:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-3.0.2.tgz#9866df395102130e38f7f996bceb65443209c25b"
 
-js-yaml@^3.11.0, js-yaml@^3.4.3, js-yaml@^3.7.0, js-yaml@^3.9.1:
+js-yaml@^3.11.0, js-yaml@^3.4.3, js-yaml@^3.7.0, js-yaml@^3.9.0, js-yaml@^3.9.1:
   version "3.12.0"
   resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.12.0.tgz#eaed656ec8344f10f527c6bfa1b6e2244de167d1"
   dependencies:
@@ -8235,6 +8315,13 @@ nomnom@^1.8.1:
     chalk "~0.4.0"
     underscore "~1.6.0"
 
+noms@0.0.0:
+  version "0.0.0"
+  resolved "https://registry.yarnpkg.com/noms/-/noms-0.0.0.tgz#da8ebd9f3af9d6760919b27d9cdc8092a7332859"
+  dependencies:
+    inherits "^2.0.1"
+    readable-stream "~1.0.31"
+
 "nopt@2 || 3":
   version "3.0.6"
   resolved "https://registry.yarnpkg.com/nopt/-/nopt-3.0.6.tgz#c6465dbf08abcd4db359317f79ac68a646b28ff9"
@@ -8248,6 +8335,12 @@ nopt@^4.0.1:
     abbrev "1"
     osenv "^0.1.4"
 
+nopt@~1.0.10:
+  version "1.0.10"
+  resolved "https://registry.yarnpkg.com/nopt/-/nopt-1.0.10.tgz#6ddd21bd2a31417b92727dd585f8a6f37608ebee"
+  dependencies:
+    abbrev "1"
+
 normalize-package-data@^2.3.0, normalize-package-data@^2.3.2, normalize-package-data@^2.3.4, normalize-package-data@^2.3.5, normalize-package-data@^2.4.0:
   version "2.4.0"
   resolved "https://registry.yarnpkg.com/normalize-package-data/-/normalize-package-data-2.4.0.tgz#12f95a307d58352075a04907b84ac8be98ac012f"
@@ -9288,7 +9381,7 @@ promise@^7.1.1:
   dependencies:
     asap "~2.0.3"
 
-prop-types@^15.5.10, prop-types@^15.6.0, prop-types@^15.6.1:
+prop-types@^15.5.10, prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.1:
   version "15.6.1"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.6.1.tgz#36644453564255ddda391191fb3a125cbdf654ca"
   dependencies:
@@ -9498,6 +9591,13 @@ react-blockies@^1.3.0:
   dependencies:
     prop-types "^15.5.10"
 
+react-copy-to-clipboard@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/react-copy-to-clipboard/-/react-copy-to-clipboard-5.0.1.tgz#8eae107bb400be73132ed3b6a7b4fb156090208e"
+  dependencies:
+    copy-to-clipboard "^3"
+    prop-types "^15.5.8"
+
 react-dev-utils@^5.0.1:
   version "5.0.1"
   resolved "https://registry.yarnpkg.com/react-dev-utils/-/react-dev-utils-5.0.1.tgz#1f396e161fe44b595db1b186a40067289bf06613"
@@ -9615,7 +9715,7 @@ react-scripts@1.1.4:
   optionalDependencies:
     fsevents "^1.1.3"
 
-react@^16.3.2:
+react@^16.3.2, react@^16.4.0:
   version "16.4.0"
   resolved "https://registry.yarnpkg.com/react/-/react-16.4.0.tgz#402c2db83335336fba1962c08b98c6272617d585"
   dependencies:
@@ -9708,7 +9808,7 @@ read-pkg@^3.0.0:
     string_decoder "~1.1.1"
     util-deprecate "~1.0.1"
 
-readable-stream@1.0:
+readable-stream@1.0, readable-stream@~1.0.31:
   version "1.0.34"
   resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-1.0.34.tgz#125820e34bc842d2f2aaafafe4c2916ee32c157c"
   dependencies:
@@ -10045,6 +10145,10 @@ require-from-string@^1.1.0:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/require-from-string/-/require-from-string-1.2.1.tgz#529c9ccef27380adfec9a2f965b649bbee636418"
 
+require-from-string@^2.0.1:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/require-from-string/-/require-from-string-2.0.2.tgz#89a7fdd938261267318eafe14f9c32e598c36909"
+
 require-main-filename@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/require-main-filename/-/require-main-filename-1.0.1.tgz#97f717b69d48784f5f526a6c5aa8ffdda055a4d1"
@@ -10536,7 +10640,7 @@ sockjs@0.3.19:
     faye-websocket "^0.10.0"
     uuid "^3.0.1"
 
-"solc@github:ngotchac/solc-js":
+solc@ngotchac/solc-js:
   version "0.4.4"
   resolved "https://codeload.github.com/ngotchac/solc-js/tar.gz/04eb38cc3003fba8cb3656653a7941ed36408818"
   dependencies:
@@ -11151,7 +11255,7 @@ throttleit@0.0.2:
   version "0.0.2"
   resolved "https://registry.yarnpkg.com/throttleit/-/throttleit-0.0.2.tgz#cfedf88e60c00dd9697b61fdd2a8343a9b680eaf"
 
-through2@^2.0.0, through2@^2.0.2:
+through2@^2.0.0, through2@^2.0.1, through2@^2.0.2:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/through2/-/through2-2.0.3.tgz#0004569b37c7c74ba39c43f3ced78d1ad94140be"
   dependencies:
@@ -11238,10 +11342,20 @@ to-regex@^3.0.1, to-regex@^3.0.2:
     regex-not "^1.0.2"
     safe-regex "^1.1.0"
 
+toggle-selection@^1.0.3:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/toggle-selection/-/toggle-selection-1.0.6.tgz#6e45b1263f2017fa0acc7d89d78b15b8bf77da32"
+
 toposort@^1.0.0:
   version "1.0.7"
   resolved "https://registry.yarnpkg.com/toposort/-/toposort-1.0.7.tgz#2e68442d9f64ec720b8cc89e6443ac6caa950029"
 
+touch@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/touch/-/touch-1.0.0.tgz#449cbe2dbae5a8c8038e30d71fa0ff464947c4de"
+  dependencies:
+    nopt "~1.0.10"
+
 tough-cookie@^2.3.2:
   version "2.4.2"
   resolved "https://registry.yarnpkg.com/tough-cookie/-/tough-cookie-2.4.2.tgz#aa9133154518b494efab98a58247bfc38818c00c"