diff --git a/js/src/shell/Application/application.js b/js/src/shell/Application/application.js
index e27cbde5c..7ffee1c83 100644
--- a/js/src/shell/Application/application.js
+++ b/js/src/shell/Application/application.js
@@ -19,7 +19,7 @@ import React, { Component, PropTypes } from 'react';
 import { FormattedMessage } from 'react-intl';
 import { connect } from 'react-redux';
 
-import { Errors } from '~/ui';
+import { Errors } from '@parity/ui';
 
 import Connection from '../Connection';
 import Extension from '../Extension';
diff --git a/js/src/shell/Connection/connection.js b/js/src/shell/Connection/connection.js
index 788385b89..87974bae3 100644
--- a/js/src/shell/Connection/connection.js
+++ b/js/src/shell/Connection/connection.js
@@ -18,8 +18,8 @@ import React, { Component, PropTypes } from 'react';
 import { FormattedMessage } from 'react-intl';
 import { connect } from 'react-redux';
 
-import { Input } from '~/ui';
-import { CompareIcon, ComputerIcon, DashboardIcon, VpnIcon } from '~/ui/Icons';
+import { Input } from '@parity/ui';
+import { CompareIcon, ComputerIcon, DashboardIcon, VpnIcon } from '@parity/ui/Icons';
 
 import styles from './connection.css';
 
diff --git a/js/src/shell/DappPermissions/dappPermissions.js b/js/src/shell/DappPermissions/dappPermissions.js
index 81821cb8e..9bdb14790 100644
--- a/js/src/shell/DappPermissions/dappPermissions.js
+++ b/js/src/shell/DappPermissions/dappPermissions.js
@@ -18,7 +18,7 @@ import { observer } from 'mobx-react';
 import React, { Component, PropTypes } from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import { AccountCard, Portal, SelectionList } from '~/ui';
+import { AccountCard, Portal, SelectionList } from '@parity/ui';
 
 @observer
 export default class DappPermissions extends Component {
diff --git a/js/src/shell/Dapps/dapps.js b/js/src/shell/Dapps/dapps.js
index f92d0e8ac..e1b67db66 100644
--- a/js/src/shell/Dapps/dapps.js
+++ b/js/src/shell/Dapps/dapps.js
@@ -20,8 +20,8 @@ import React, { Component, PropTypes } from 'react';
 import { FormattedMessage } from 'react-intl';
 import { connect } from 'react-redux';
 
-import { Actionbar, Button, Checkbox, DappCard, Page, SectionList } from '~/ui';
-import { LockedIcon, VisibleIcon } from '~/ui/Icons';
+import { Actionbar, Button, Checkbox, DappCard, Page, SectionList } from '@parity/ui';
+import { LockedIcon, VisibleIcon } from '@parity/ui/Icons';
 
 import DappsVisible from '../DappsVisible';
 import DappPermissions from '../DappPermissions';
diff --git a/js/src/shell/DappsVisible/dappsVisible.js b/js/src/shell/DappsVisible/dappsVisible.js
index 0f43c8876..e3e06ccfb 100644
--- a/js/src/shell/DappsVisible/dappsVisible.js
+++ b/js/src/shell/DappsVisible/dappsVisible.js
@@ -18,7 +18,7 @@ import { observer } from 'mobx-react';
 import React, { Component, PropTypes } from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import { DappCard, Portal, SelectionList } from '~/ui';
+import { DappCard, Portal, SelectionList } from '@parity/ui';
 
 import styles from './dappsVisible.css';
 
diff --git a/js/src/shell/Extension/extension.js b/js/src/shell/Extension/extension.js
index 8aba74b72..f96dc3bb9 100644
--- a/js/src/shell/Extension/extension.js
+++ b/js/src/shell/Extension/extension.js
@@ -18,8 +18,8 @@ import { observer } from 'mobx-react';
 import React, { Component } from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import { Button } from '~/ui';
-import { CloseIcon, CheckIcon } from '~/ui/Icons';
+import { Button } from '@parity/ui';
+import { CloseIcon, CheckIcon } from '@parity/ui/Icons';
 
 import Store from './store';
 import styles from './extension.css';
diff --git a/js/src/shell/FirstRun/TnC/tnc.js b/js/src/shell/FirstRun/TnC/tnc.js
index a15b36834..d19be463a 100644
--- a/js/src/shell/FirstRun/TnC/tnc.js
+++ b/js/src/shell/FirstRun/TnC/tnc.js
@@ -17,7 +17,7 @@
 import React, { PropTypes } from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import { Checkbox } from '~/ui';
+import { Checkbox } from '@parity/ui';
 
 import styles from '../firstRun.css';
 
diff --git a/js/src/shell/FirstRun/firstRun.js b/js/src/shell/FirstRun/firstRun.js
index 2d4e1e9a7..506807d6d 100644
--- a/js/src/shell/FirstRun/firstRun.js
+++ b/js/src/shell/FirstRun/firstRun.js
@@ -22,10 +22,10 @@ import { bindActionCreators } from 'redux';
 
 import { createIdentityImg } from '@parity/api/util/identity';
 import { newError } from '@parity/shared/redux/actions';
+import { Button, Portal } from '@parity/ui';
+import { CheckIcon, DoneIcon, NextIcon, PrintIcon } from '@parity/ui/Icons';
 
 import ParityLogo from '~/../assets/images/parity-logo-black-no-text.svg';
-import { Button, Portal } from '~/ui';
-import { CheckIcon, DoneIcon, NextIcon, PrintIcon } from '~/ui/Icons';
 
 // FIXME: These imports, while nice for re-using, breaks since the shell import
 import { NewAccount, AccountDetails } from '~/views/Accounts/CreateAccount';
diff --git a/js/src/shell/ParityBar/parityBar.js b/js/src/shell/ParityBar/parityBar.js
index 9b8fa8076..12fb672eb 100644
--- a/js/src/shell/ParityBar/parityBar.js
+++ b/js/src/shell/ParityBar/parityBar.js
@@ -23,9 +23,10 @@ import { Link } from 'react-router';
 import { connect } from 'react-redux';
 import store from 'store';
 
+import { AccountCard, Badge, Button, ContainerTitle, IdentityIcon, SelectionList } from '@parity/ui';
+import { CancelIcon, FingerprintIcon } from '@parity/ui/Icons';
+
 import imagesEthcoreBlock from '~/../assets/images/parity-logo-white-no-text.svg';
-import { AccountCard, Badge, Button, ContainerTitle, IdentityIcon, SelectionList } from '~/ui';
-import { CancelIcon, FingerprintIcon } from '~/ui/Icons';
 
 import DappsStore from '~/shell/Dapps/dappsStore';
 import Signer from '~/shell/Signer/Embedded';
diff --git a/js/src/shell/Requests/requests.js b/js/src/shell/Requests/requests.js
index 072b373f6..984be5241 100644
--- a/js/src/shell/Requests/requests.js
+++ b/js/src/shell/Requests/requests.js
@@ -21,8 +21,7 @@ import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 
 import { hideRequest } from '@parity/shared/redux/providers/requestsActions';
-
-import { MethodDecoding, IdentityIcon, Progress, ScrollableText, ShortenedHash } from '~/ui';
+import { MethodDecoding, IdentityIcon, Progress, ScrollableText, ShortenedHash } from '@parity/ui';
 
 import styles from './requests.css';
 
diff --git a/js/src/shell/Signer/Embedded/embedded.js b/js/src/shell/Signer/Embedded/embedded.js
index 30d87571c..13e2283a9 100644
--- a/js/src/shell/Signer/Embedded/embedded.js
+++ b/js/src/shell/Signer/Embedded/embedded.js
@@ -21,8 +21,7 @@ import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 
 import * as RequestsActions from '@parity/shared/redux/providers/signerActions';
-
-import { Container } from '~/ui';
+import { Container } from '@parity/ui';
 
 import Store from '../store';
 
diff --git a/js/src/shell/Signer/components/Account/account.js b/js/src/shell/Signer/components/Account/account.js
index 5a675abf7..003fdeec3 100644
--- a/js/src/shell/Signer/components/Account/account.js
+++ b/js/src/shell/Signer/components/Account/account.js
@@ -16,7 +16,8 @@
 
 import React, { Component, PropTypes } from 'react';
 
-import { IdentityIcon, IdentityName } from '~/ui';
+import { IdentityIcon, IdentityName } from '@parity/ui';
+
 import AccountLink from './AccountLink';
 
 import styles from './account.css';
diff --git a/js/src/shell/Signer/components/RequestOrigin/requestOrigin.js b/js/src/shell/Signer/components/RequestOrigin/requestOrigin.js
index 435d90a6b..5cc6b8fa4 100644
--- a/js/src/shell/Signer/components/RequestOrigin/requestOrigin.js
+++ b/js/src/shell/Signer/components/RequestOrigin/requestOrigin.js
@@ -17,7 +17,7 @@
 import React, { Component, PropTypes } from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import IdentityIcon from '~/ui/IdentityIcon';
+import IdentityIcon from '@parity/ui/IdentityIcon';
 
 import styles from './requestOrigin.css';
 
diff --git a/js/src/shell/Signer/components/TransactionMainDetails/transactionMainDetails.js b/js/src/shell/Signer/components/TransactionMainDetails/transactionMainDetails.js
index ebbddf895..d06a0218f 100644
--- a/js/src/shell/Signer/components/TransactionMainDetails/transactionMainDetails.js
+++ b/js/src/shell/Signer/components/TransactionMainDetails/transactionMainDetails.js
@@ -18,8 +18,8 @@ import React, { Component, PropTypes } from 'react';
 import { FormattedMessage } from 'react-intl';
 import ReactTooltip from 'react-tooltip';
 
-import { Button, MethodDecoding } from '~/ui';
-import { GasIcon } from '~/ui/Icons';
+import { Button, MethodDecoding } from '@parity/ui';
+import { GasIcon } from '@parity/ui/Icons';
 
 import * as tUtil from '../util/transaction';
 import Account from '../Account';
diff --git a/js/src/shell/Signer/components/TransactionPending/transactionPending.js b/js/src/shell/Signer/components/TransactionPending/transactionPending.js
index a9eb5bdeb..1cdae2a4b 100644
--- a/js/src/shell/Signer/components/TransactionPending/transactionPending.js
+++ b/js/src/shell/Signer/components/TransactionPending/transactionPending.js
@@ -20,8 +20,7 @@ import { FormattedMessage } from 'react-intl';
 import { connect } from 'react-redux';
 
 import HardwareStore from '@parity/shared/mobx/hardwareStore';
-
-import { Button, GasPriceEditor } from '~/ui';
+import { Button, GasPriceEditor } from '@parity/ui';
 
 import TransactionMainDetails from '../TransactionMainDetails';
 import TransactionPendingForm from '../TransactionPendingForm';
diff --git a/js/src/shell/Signer/components/TransactionPendingForm/transactionPendingForm.js b/js/src/shell/Signer/components/TransactionPendingForm/transactionPendingForm.js
index 3adf4dd73..a31f8c4df 100644
--- a/js/src/shell/Signer/components/TransactionPendingForm/transactionPendingForm.js
+++ b/js/src/shell/Signer/components/TransactionPendingForm/transactionPendingForm.js
@@ -17,7 +17,7 @@
 import React, { Component, PropTypes } from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import { PrevIcon } from '~/ui/Icons';
+import { PrevIcon } from '@parity/ui/Icons';
 
 import TransactionPendingFormConfirm from '../TransactionPendingFormConfirm';
 import TransactionPendingFormReject from '../TransactionPendingFormReject';
diff --git a/js/src/shell/Signer/components/TransactionPendingFormConfirm/transactionPendingFormConfirm.js b/js/src/shell/Signer/components/TransactionPendingFormConfirm/transactionPendingFormConfirm.js
index 6e7463892..d68da955a 100644
--- a/js/src/shell/Signer/components/TransactionPendingFormConfirm/transactionPendingFormConfirm.js
+++ b/js/src/shell/Signer/components/TransactionPendingFormConfirm/transactionPendingFormConfirm.js
@@ -20,7 +20,8 @@ import ReactDOM from 'react-dom';
 import { FormattedMessage } from 'react-intl';
 import ReactTooltip from 'react-tooltip';
 
-import { Button, Form, Input, IdentityIcon, QrCode, QrScan } from '~/ui';
+import { Button, Form, Input, IdentityIcon, QrCode, QrScan } from '@parity/ui';
+
 import { generateTxQr, generateDataQr } from '~/shell/Signer/utils/qrscan';
 
 import styles from './transactionPendingFormConfirm.css';
diff --git a/js/src/shell/Signer/components/TransactionPendingFormReject/transactionPendingFormReject.js b/js/src/shell/Signer/components/TransactionPendingFormReject/transactionPendingFormReject.js
index 4b04ba4e6..171ee5dc4 100644
--- a/js/src/shell/Signer/components/TransactionPendingFormReject/transactionPendingFormReject.js
+++ b/js/src/shell/Signer/components/TransactionPendingFormReject/transactionPendingFormReject.js
@@ -17,7 +17,7 @@
 import React, { Component, PropTypes } from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import { Button } from '~/ui';
+import { Button } from '@parity/ui';
 
 import styles from './transactionPendingFormReject.css';
 
diff --git a/js/src/shell/Snackbar/snackbar.js b/js/src/shell/Snackbar/snackbar.js
index 5578370e5..4c232dfa4 100644
--- a/js/src/shell/Snackbar/snackbar.js
+++ b/js/src/shell/Snackbar/snackbar.js
@@ -19,8 +19,7 @@ import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 
 import { closeSnackbar } from '@parity/shared/redux/providers/snackbarActions';
-
-import { Snackbar as SnackbarUI } from '~/ui';
+import { Snackbar as SnackbarUI } from '@parity/ui';
 
 function Snackbar ({ closeSnackbar, cooldown = 3500, message, open = false }) {
   return (
diff --git a/js/src/shell/Status/status.js b/js/src/shell/Status/status.js
index a0ced9b5f..2f3584002 100644
--- a/js/src/shell/Status/status.js
+++ b/js/src/shell/Status/status.js
@@ -17,7 +17,7 @@
 import React, { PropTypes } from 'react';
 import { connect } from 'react-redux';
 
-import { BlockStatus } from '~/ui';
+import { BlockStatus } from '@parity/ui';
 
 import Consensus from './Consensus';
 import Upgrade from './Upgrade';
diff --git a/js/src/shell/SyncWarning/syncWarning.js b/js/src/shell/SyncWarning/syncWarning.js
index 67deff075..b55333a1e 100644
--- a/js/src/shell/SyncWarning/syncWarning.js
+++ b/js/src/shell/SyncWarning/syncWarning.js
@@ -14,13 +14,12 @@
 // You should have received a copy of the GNU General Public License
 // along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 
-import { Checkbox } from 'material-ui';
 import React, { Component, PropTypes } from 'react';
 import { FormattedMessage } from 'react-intl';
 import { connect } from 'react-redux';
 import store from 'store';
 
-import { Button } from '~/ui';
+import { Button, Checkbox } from '@parity/ui';
 
 import styles from './syncWarning.css';
 
diff --git a/js/src/shell/UpgradeParity/upgradeParity.js b/js/src/shell/UpgradeParity/upgradeParity.js
index 22b713cf1..499209660 100644
--- a/js/src/shell/UpgradeParity/upgradeParity.js
+++ b/js/src/shell/UpgradeParity/upgradeParity.js
@@ -18,8 +18,8 @@ import { observer } from 'mobx-react';
 import React, { Component, PropTypes } from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import { Button, Portal } from '~/ui';
-import { CancelIcon, DoneIcon, ErrorIcon, NextIcon, UpdateIcon, UpdateWaitIcon } from '~/ui/Icons';
+import { Button, Portal } from '@parity/ui';
+import { CancelIcon, DoneIcon, ErrorIcon, NextIcon, UpdateIcon, UpdateWaitIcon } from '@parity/ui/Icons';
 
 import { STEP_COMPLETED, STEP_ERROR, STEP_INFO, STEP_UPDATING } from './store';
 import styles from './upgradeParity.css';
diff --git a/js/src/shell/embed.js b/js/src/shell/embed.js
index 5d033fe5b..70c2c7f81 100644
--- a/js/src/shell/embed.js
+++ b/js/src/shell/embed.js
@@ -28,12 +28,11 @@ import injectTapEventPlugin from 'react-tap-event-plugin';
 import ContractInstances from '@parity/shared/contracts';
 import { initStore } from '@parity/shared/redux';
 import { patchApi } from '@parity/shared/util/tx';
+import ContextProvider from '@parity/ui/ContextProvider';
+import muiTheme from '@parity/ui/Theme';
 
 import SecureApi from '~/secureApi';
 
-import ContextProvider from '~/ui/ContextProvider';
-import muiTheme from '~/ui/Theme';
-
 import '@parity/shared/environment';
 
 import '~/../assets/fonts/Roboto/font.css';
diff --git a/js/src/shell/index.js b/js/src/shell/index.js
index 401c66615..33acfabed 100644
--- a/js/src/shell/index.js
+++ b/js/src/shell/index.js
@@ -33,14 +33,13 @@ import ContractInstances from '@parity/shared/contracts';
 import HistoryStore from '@parity/shared/mobx/historyStore';
 import { initStore } from '@parity/shared/redux';
 import { patchApi } from '@parity/shared/util/tx';
+import ContextProvider from '@parity/ui/ContextProvider';
+import muiTheme from '@parity/ui/Theme';
 
 import '@parity/shared/environment';
 
 import SecureApi from '~/secureApi';
 
-import ContextProvider from '~/ui/ContextProvider';
-import muiTheme from '~/ui/Theme';
-
 import Application from './Application';
 import Dapp from './Dapp';
 import Dapps from './Dapps';
diff --git a/js/src/ui/Form/Label/label.css b/js/src/ui/Form/Label/label.css
index e774cb39f..151a92916 100644
--- a/js/src/ui/Form/Label/label.css
+++ b/js/src/ui/Form/Label/label.css
@@ -15,10 +15,12 @@
 /* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 */
 
-$labelColor: rgba(255, 255, 255, 0.5);
+$labelColor: rgba(0, 0, 0, 0.3);
 $labelFontSize: 0.75rem;
 
 .label {
   color: $labelColor;
   font-size: $labelFontSize;
+  pointer-events: none;
+  user-select: none;
 }
diff --git a/js/src/ui/Form/LabelComponent/labelComponent.css b/js/src/ui/Form/LabelComponent/labelComponent.css
deleted file mode 100644
index b10a55213..000000000
--- a/js/src/ui/Form/LabelComponent/labelComponent.css
+++ /dev/null
@@ -1,24 +0,0 @@
-/* Copyright 2015-2017 Parity Technologies (UK) Ltd.
-/* This file is part of Parity.
-/*
-/* Parity is free software: you can redistribute it and/or modify
-/* it under the terms of the GNU General Public License as published by
-/* the Free Software Foundation, either version 3 of the License, or
-/* (at your option) any later version.
-/*
-/* Parity is distributed in the hope that it will be useful,
-/* but WITHOUT ANY WARRANTY; without even the implied warranty of
-/* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-/* GNU General Public License for more details.
-/*
-/* You should have received a copy of the GNU General Public License
-/* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
-*/
-
-.container {
-  .label {
-    color: rgba(0, 0, 0, 0.3);
-    pointer-events: none;
-    user-select: none;
-  }
-}
diff --git a/js/src/ui/Form/LabelComponent/labelComponent.js b/js/src/ui/Form/LabelComponent/labelComponent.js
index 47dca7e80..17e487a76 100644
--- a/js/src/ui/Form/LabelComponent/labelComponent.js
+++ b/js/src/ui/Form/LabelComponent/labelComponent.js
@@ -16,29 +16,19 @@
 
 import React, { PropTypes } from 'react';
 
-import styles from './labelComponent.css';
+import Label from '../Label';
 
-export default function LabelComponent ({ children, label }) {
+export default function LabelComponent ({ className, children, label }) {
   return (
-    <div className={ styles.container }>
-      {
-        label
-          ? (
-            <label
-              className={ styles.label }
-              htmlFor=''
-            >
-              { label }
-            </label>
-          )
-          : null
-      }
+    <div className={ className }>
+      <Label label={ label } />
       { children }
     </div>
   );
 }
 
 LabelComponent.propTypes = {
-  label: PropTypes.node,
-  children: PropTypes.node.isRequired
+  className: PropTypes.string,
+  children: PropTypes.node.isRequired,
+  label: PropTypes.node
 };
diff --git a/js/src/ui/Form/RadioButtons/radioButtons.css b/js/src/ui/Form/RadioButtons/radioButtons.css
index 12e10eeab..0fbfc5755 100644
--- a/js/src/ui/Form/RadioButtons/radioButtons.css
+++ b/js/src/ui/Form/RadioButtons/radioButtons.css
@@ -16,22 +16,19 @@
 */
 
 .container {
-  .label {
-  }
+  display: flex;
+  flex-direction: column;
 
-  .radioButton {
+  .radioContainer {
     margin: 0.25em 0;
-  }
 
-  .radioLabel {
-    display: flex;
-    flex-direction: column;
-
-    .description {
-      font-size: 0.8em;
-      margin-bottom: 0.5em;
-      color: #ccc;
-      z-index: 2;
+    .label {
+      .description {
+        font-size: 0.75em;
+        margin-bottom: 0.5em;
+        color: #ccc;
+        z-index: 2;
+      }
     }
   }
 }
diff --git a/js/src/ui/Form/RadioButtons/radioButtons.js b/js/src/ui/Form/RadioButtons/radioButtons.js
index 58c90df6f..8dfaf51d9 100644
--- a/js/src/ui/Form/RadioButtons/radioButtons.js
+++ b/js/src/ui/Form/RadioButtons/radioButtons.js
@@ -14,101 +14,59 @@
 // You should have received a copy of the GNU General Public License
 // along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 
-import { RadioButton, RadioButtonGroup } from 'material-ui/RadioButton';
-import React, { Component, PropTypes } from 'react';
+import React, { PropTypes } from 'react';
+import { Radio } from 'semantic-ui-react';
 
 import { arrayOrObjectProptype } from '@parity/shared/util/proptypes';
 
-import Label from '../Label';
+import LabelComponent from '../LabelComponent';
 import styles from './radioButtons.css';
 
-export default class RadioButtons extends Component {
-  static propTypes = {
-    className: PropTypes.string,
-    label: PropTypes.node,
-    name: PropTypes.string,
-    onChange: PropTypes.func.isRequired,
-    value: PropTypes.any,
-    values: arrayOrObjectProptype().isRequired
-  };
+export default function RadioButtons ({ className, label, name, onChange, value, values }) {
+  const _onChange = (event, { value }) => onChange(event, value);
 
-  static defaultProps = {
-    value: 0,
-    name: ''
-  };
-
-  render () {
-    const { className, label, value, values } = this.props;
-
-    const index = Number.isNaN(parseInt(value))
-      ? values.findIndex((_value) => _value.key === value)
-      : parseInt(value);
-    const selectedValue = typeof value !== 'object'
-      ? values[index]
-      : value;
-    const key = this.getKey(selectedValue, index);
-
-    return (
-      <div className={ [styles.container, className].join(' ') }>
-        <Label
-          className={ styles.label }
-          label={ label }
-        />
-        <RadioButtonGroup
-          name={ name }
-          onChange={ this.onChange }
-          valueSelected={ key }
-        >
-          { this.renderContent() }
-        </RadioButtonGroup>
-      </div>
-    );
-  }
-
-  renderContent () {
-    const { values } = this.props;
-
-    return values.map((value, index) => {
-      const label = typeof value === 'string'
-        ? value
-        : value.label || '';
-      const description = (typeof value !== 'string' && value.description) || null;
-      const key = this.getKey(value, index);
-
-      return (
-        <RadioButton
-          className={ styles.radioButton }
-          key={ index }
-          label={
-            <div className={ styles.radioLabel }>
-              <span>{ label }</span>
-              {
-                description
-                ? <span className={ styles.description }>{ description }</span>
-                : null
+  return (
+    <LabelComponent
+      className={ [styles.container, className].join(' ') }
+      label={ label }
+    >
+      {
+        values.map(({ description, key, label }) => (
+          <div
+            className={ styles.radioContainer }
+            key={ key }
+          >
+            <Radio
+              checked={ value === key }
+              className={ styles.radio }
+              label={
+                <label className={ styles.label }>
+                  <div className={ styles.name }>{ label }</div>
+                  {
+                    description && (
+                      <div className={ styles.description }>
+                        { description }
+                      </div>
+                    )
+                  }
+                </label>
               }
-            </div>
-          }
-          value={ key }
-        />
-      );
-    });
-  }
-
-  getKey (value, index) {
-    if (typeof value !== 'string') {
-      return typeof value.key === 'undefined'
-        ? index
-        : value.key;
-    }
-
-    return index;
-  }
-
-  onChange = (event, index) => {
-    const { onChange, values } = this.props;
-    const value = values[index] || values.find((value) => value.key === index);
-
-    onChange(value, index);
-  }
+              name={ name }
+              onChange={ _onChange }
+              value={ key }
+            />
+          </div>
+        ))
+      }
+    </LabelComponent>
+  );
 }
+
+RadioButtons.propTypes = {
+  className: PropTypes.string,
+  label: PropTypes.node,
+  name: PropTypes.string.isRequired,
+  onChange: PropTypes.func.isRequired,
+  value: PropTypes.any,
+  values: arrayOrObjectProptype().isRequired
+};
diff --git a/js/src/ui/GasPriceEditor/gasPriceEditor.js b/js/src/ui/GasPriceEditor/gasPriceEditor.js
index db9e02396..39cd9b190 100644
--- a/js/src/ui/GasPriceEditor/gasPriceEditor.js
+++ b/js/src/ui/GasPriceEditor/gasPriceEditor.js
@@ -88,6 +88,7 @@ export default class GasPriceEditor extends Component {
               defaultMessage='Condition where transaction activates'
             />
           }
+          name='conditionType'
           onChange={ this.onChangeConditionType }
           value={ conditionType }
           values={ CONDITION_VALUES }
@@ -239,8 +240,8 @@ export default class GasPriceEditor extends Component {
     onChange && onChange('gasPrice', price);
   }
 
-  onChangeConditionType = (conditionType) => {
-    this.props.store.setConditionType(conditionType.key);
+  onChangeConditionType = (event, conditionType) => {
+    this.props.store.setConditionType(conditionType);
   }
 
   onChangeConditionBlock = (event, blockNumber) => {
diff --git a/js/src/views/Account/DeleteAccount/deleteAccount.js b/js/src/views/Account/DeleteAccount/deleteAccount.js
index e3d9b95f9..bc4ffca69 100644
--- a/js/src/views/Account/DeleteAccount/deleteAccount.js
+++ b/js/src/views/Account/DeleteAccount/deleteAccount.js
@@ -20,8 +20,7 @@ import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 
 import { newError } from '@parity/shared/redux/actions';
-
-import { ConfirmDialog, IdentityIcon, IdentityName, Input } from '~/ui';
+import { ConfirmDialog, IdentityIcon, IdentityName, Input } from '@parity/ui';
 
 import styles from './deleteAccount.css';
 
diff --git a/js/src/views/Account/EditMeta/editMeta.js b/js/src/views/Account/EditMeta/editMeta.js
index 0bc24f104..961d8ec41 100644
--- a/js/src/views/Account/EditMeta/editMeta.js
+++ b/js/src/views/Account/EditMeta/editMeta.js
@@ -21,9 +21,9 @@ import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 
 import { newError } from '@parity/shared/redux/actions';
+import { Button, Form, Input, InputChip, Portal, VaultSelect } from '@parity/ui';
+import { CancelIcon, SaveIcon } from '@parity/ui/Icons';
 
-import { Button, Form, Input, InputChip, Portal, VaultSelect } from '~/ui';
-import { CancelIcon, SaveIcon } from '~/ui/Icons';
 import VaultStore from '~/views/Vaults/store';
 
 import Store from './store';
diff --git a/js/src/views/Account/Faucet/faucet.js b/js/src/views/Account/Faucet/faucet.js
index e4399e8ba..e06b60c31 100644
--- a/js/src/views/Account/Faucet/faucet.js
+++ b/js/src/views/Account/Faucet/faucet.js
@@ -19,8 +19,8 @@ import React, { Component, PropTypes } from 'react';
 import { FormattedMessage } from 'react-intl';
 
 import { txLink } from '~/3rdparty/etherscan/links';
-import { Button, ModalBox, Portal, ShortenedHash } from '~/ui';
-import { CloseIcon, DialIcon, DoneIcon, ErrorIcon, SendIcon } from '~/ui/Icons';
+import { Button, ModalBox, Portal, ShortenedHash } from '@parity/ui';
+import { CloseIcon, DialIcon, DoneIcon, ErrorIcon, SendIcon } from '@parity/ui/Icons';
 
 import Store from './store';
 
diff --git a/js/src/views/Account/Header/header.js b/js/src/views/Account/Header/header.js
index f02d5bd3a..ffe3f8f2d 100644
--- a/js/src/views/Account/Header/header.js
+++ b/js/src/views/Account/Header/header.js
@@ -17,7 +17,7 @@
 import React, { Component, PropTypes } from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import { Balance, Certifications, Container, CopyToClipboard, ContainerTitle, IdentityIcon, IdentityName, QrCode, Tags, VaultTag } from '~/ui';
+import { Balance, Certifications, Container, CopyToClipboard, ContainerTitle, IdentityIcon, IdentityName, QrCode, Tags, VaultTag } from '@parity/ui';
 
 import styles from './header.css';
 
diff --git a/js/src/views/Account/PasswordManager/passwordManager.js b/js/src/views/Account/PasswordManager/passwordManager.js
index 47407cbb4..6d217549a 100644
--- a/js/src/views/Account/PasswordManager/passwordManager.js
+++ b/js/src/views/Account/PasswordManager/passwordManager.js
@@ -22,11 +22,10 @@ import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 
 import { newError, openSnackbar } from '@parity/shared/redux/actions';
-
-import { Button, IdentityName, IdentityIcon, Portal } from '~/ui';
-import PasswordStrength from '~/ui/Form/PasswordStrength';
-import Form, { Input } from '~/ui/Form';
-import { CancelIcon, CheckIcon, SendIcon } from '~/ui/Icons';
+import { Button, IdentityName, IdentityIcon, Portal } from '@parity/ui';
+import PasswordStrength from '@parity/ui/Form/PasswordStrength';
+import Form, { Input } from '@parity/ui/Form';
+import { CancelIcon, CheckIcon, SendIcon } from '@parity/ui/Icons';
 
 import Store, { CHANGE_ACTION, TEST_ACTION } from './store';
 import styles from './passwordManager.css';
diff --git a/js/src/views/Account/Shapeshift/AwaitingDepositStep/awaitingDepositStep.js b/js/src/views/Account/Shapeshift/AwaitingDepositStep/awaitingDepositStep.js
index 043a1e3ad..ef56b0f73 100644
--- a/js/src/views/Account/Shapeshift/AwaitingDepositStep/awaitingDepositStep.js
+++ b/js/src/views/Account/Shapeshift/AwaitingDepositStep/awaitingDepositStep.js
@@ -18,7 +18,7 @@ import { observer } from 'mobx-react';
 import React, { Component, PropTypes } from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import { CopyToClipboard, QrCode } from '~/ui';
+import { CopyToClipboard, QrCode } from '@parity/ui';
 
 import Value from '../Value';
 import styles from '../shapeshift.css';
diff --git a/js/src/views/Account/Shapeshift/OptionsStep/optionsStep.js b/js/src/views/Account/Shapeshift/OptionsStep/optionsStep.js
index 81514d69a..de8e674b5 100644
--- a/js/src/views/Account/Shapeshift/OptionsStep/optionsStep.js
+++ b/js/src/views/Account/Shapeshift/OptionsStep/optionsStep.js
@@ -18,7 +18,7 @@ import { observer } from 'mobx-react';
 import React, { Component, PropTypes } from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import { Checkbox, Dropdown, Form, Input, Warning } from '~/ui';
+import { Checkbox, Dropdown, Form, Input, Warning } from '@parity/ui';
 
 import Price from '../Price';
 import { WARNING_NO_PRICE } from '../store';
diff --git a/js/src/views/Account/Shapeshift/shapeshift.js b/js/src/views/Account/Shapeshift/shapeshift.js
index 497b84d28..08d907200 100644
--- a/js/src/views/Account/Shapeshift/shapeshift.js
+++ b/js/src/views/Account/Shapeshift/shapeshift.js
@@ -18,9 +18,10 @@ import { observer } from 'mobx-react';
 import React, { Component, PropTypes } from 'react';
 import { FormattedMessage } from 'react-intl';
 
+import { Button, IdentityIcon, Portal } from '@parity/ui';
+import { CancelIcon, DoneIcon } from '@parity/ui/Icons';
+
 import shapeshiftLogo from '~/../assets/images/shapeshift-logo.png';
-import { Button, IdentityIcon, Portal } from '~/ui';
-import { CancelIcon, DoneIcon } from '~/ui/Icons';
 
 import AwaitingDepositStep from './AwaitingDepositStep';
 import AwaitingExchangeStep from './AwaitingExchangeStep';
diff --git a/js/src/views/Account/Transactions/transactions.js b/js/src/views/Account/Transactions/transactions.js
index f36529713..560d6c185 100644
--- a/js/src/views/Account/Transactions/transactions.js
+++ b/js/src/views/Account/Transactions/transactions.js
@@ -19,7 +19,7 @@ import React, { Component, PropTypes } from 'react';
 import { FormattedMessage } from 'react-intl';
 import { connect } from 'react-redux';
 
-import { Container, TxList, Loading } from '~/ui';
+import { Container, TxList, Loading } from '@parity/ui';
 
 import Store from './store';
 import styles from './transactions.css';
diff --git a/js/src/views/Account/Transfer/Details/details.js b/js/src/views/Account/Transfer/Details/details.js
index 2bbf6d4a7..a5951abb3 100644
--- a/js/src/views/Account/Transfer/Details/details.js
+++ b/js/src/views/Account/Transfer/Details/details.js
@@ -19,7 +19,7 @@ import { FormattedMessage } from 'react-intl';
 
 import { nullableProptype } from '@parity/shared/util/proptypes';
 
-import Form, { Input, InputAddressSelect, AddressSelect, Checkbox } from '~/ui/Form';
+import Form, { Input, InputAddressSelect, AddressSelect, Checkbox } from '@parity/ui/Form';
 
 import TokenSelect from './tokenSelect';
 import styles from '../transfer.css';
@@ -207,8 +207,8 @@ export default class Details extends Component {
     );
   }
 
-  onChangeToken = (event, index, tokenId) => {
-    this.props.onChange('token', tokenId);
+  onChangeToken = (event, data) => {
+    this.props.onChange('token', data.value);
   }
 
   onEditSender = (event, sender) => {
diff --git a/js/src/views/Account/Transfer/Details/tokenSelect.js b/js/src/views/Account/Transfer/Details/tokenSelect.js
index ba3e9b778..787f28da8 100644
--- a/js/src/views/Account/Transfer/Details/tokenSelect.js
+++ b/js/src/views/Account/Transfer/Details/tokenSelect.js
@@ -19,8 +19,7 @@ import React, { Component, PropTypes } from 'react';
 import { connect } from 'react-redux';
 import { isEqual } from 'lodash';
 
-import { Dropdown } from '~/ui/Form';
-import TokenImage from '~/ui/TokenImage';
+import { Dropdown, TokenImage } from '@parity/ui';
 
 import styles from '../transfer.css';
 
@@ -90,7 +89,7 @@ class TokenSelect extends Component {
 
         return {
           key: tokenId,
-          text: label,
+          text: token.name,
           value: token.id,
           content: label
         };
diff --git a/js/src/views/Account/Transfer/Extras/extras.js b/js/src/views/Account/Transfer/Extras/extras.js
index c3e2d1a8e..c432780a6 100644
--- a/js/src/views/Account/Transfer/Extras/extras.js
+++ b/js/src/views/Account/Transfer/Extras/extras.js
@@ -17,7 +17,7 @@
 import React, { Component, PropTypes } from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import { GasPriceEditor, Form, Input } from '~/ui';
+import { GasPriceEditor, Form, Input } from '@parity/ui';
 
 import styles from '../transfer.css';
 
diff --git a/js/src/views/Account/Transfer/store.js b/js/src/views/Account/Transfer/store.js
index 66fddf1d6..e68cbd495 100644
--- a/js/src/views/Account/Transfer/store.js
+++ b/js/src/views/Account/Transfer/store.js
@@ -24,9 +24,9 @@ import { getLogger, LOG_KEYS } from '@parity/shared/config';
 import { eip20 as tokenAbi, wallet as walletAbi } from '@parity/shared/contracts/abi';
 import { DEFAULT_GAS, DEFAULT_GASPRICE, MAX_GAS_ESTIMATION } from '@parity/shared/util/constants';
 import { ETH_TOKEN } from '@parity/shared/util/tokens';
+import GasPriceStore from '@parity/ui/GasPriceEditor/store';
 
 import ERRORS from './errors';
-import GasPriceStore from '~/ui/GasPriceEditor/store';
 
 const log = getLogger(LOG_KEYS.TransferModalStore);
 
diff --git a/js/src/views/Account/Transfer/transfer.js b/js/src/views/Account/Transfer/transfer.js
index c4c3de74d..4c7c80542 100644
--- a/js/src/views/Account/Transfer/transfer.js
+++ b/js/src/views/Account/Transfer/transfer.js
@@ -22,10 +22,9 @@ import { observer } from 'mobx-react';
 import { pick } from 'lodash';
 
 import { nullableProptype } from '@parity/shared/util/proptypes';
-
-import { Button, IdentityIcon, Portal, Warning } from '~/ui';
-import { newError } from '~/ui/Errors/actions';
-import { CancelIcon, NextIcon, PrevIcon } from '~/ui/Icons';
+import { Button, IdentityIcon, Portal, Warning } from '@parity/ui';
+import { newError } from '@parity/ui/Errors/actions';
+import { CancelIcon, NextIcon, PrevIcon } from '@parity/ui/Icons';
 
 import Details from './Details';
 import Extras from './Extras';
diff --git a/js/src/views/Account/Verification/Done/done.js b/js/src/views/Account/Verification/Done/done.js
index 2c2e48747..15e44178d 100644
--- a/js/src/views/Account/Verification/Done/done.js
+++ b/js/src/views/Account/Verification/Done/done.js
@@ -17,7 +17,7 @@
 import React, { Component } from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import { DoneIcon } from '~/ui/Icons';
+import { DoneIcon } from '@parity/ui/Icons';
 
 import styles from './done.css';
 
diff --git a/js/src/views/Account/Verification/GatherData/gatherData.js b/js/src/views/Account/Verification/GatherData/gatherData.js
index c72c706e0..192a131a0 100644
--- a/js/src/views/Account/Verification/GatherData/gatherData.js
+++ b/js/src/views/Account/Verification/GatherData/gatherData.js
@@ -19,13 +19,13 @@ import { FormattedMessage } from 'react-intl';
 import BigNumber from 'bignumber.js';
 
 import { fromWei } from '@parity/api/util/wei';
-
-import { Checkbox, Form, Input } from '~/ui';
-import { DoneIcon, ErrorIcon, InfoIcon } from '~/ui/Icons';
+import { Checkbox, Form, Input } from '@parity/ui';
+import { DoneIcon, ErrorIcon, InfoIcon } from '@parity/ui/Icons';
 import { nullableProptype } from '@parity/shared/util/proptypes';
 
 import smsTermsOfService from '~/3rdparty/sms-verification/terms-of-service';
 import emailTermsOfService from '~/3rdparty/email-verification/terms-of-service';
+
 import { howSMSVerificationWorks, howEmailVerificationWorks } from '../how-it-works';
 import styles from './gatherData.css';
 
diff --git a/js/src/views/Account/Verification/QueryCode/queryCode.js b/js/src/views/Account/Verification/QueryCode/queryCode.js
index b57dc4c1e..c6e748ba1 100644
--- a/js/src/views/Account/Verification/QueryCode/queryCode.js
+++ b/js/src/views/Account/Verification/QueryCode/queryCode.js
@@ -18,8 +18,7 @@ import React, { Component, PropTypes } from 'react';
 import { FormattedMessage } from 'react-intl';
 
 import { nodeOrStringProptype } from '@parity/shared/util/proptypes';
-
-import { Form, Input } from '~/ui';
+import { Form, Input } from '@parity/ui';
 
 export default class QueryCode extends Component {
   static propTypes = {
diff --git a/js/src/views/Account/Verification/SendConfirmation/sendConfirmation.js b/js/src/views/Account/Verification/SendConfirmation/sendConfirmation.js
index bfa8fe3ea..7d6b1780a 100644
--- a/js/src/views/Account/Verification/SendConfirmation/sendConfirmation.js
+++ b/js/src/views/Account/Verification/SendConfirmation/sendConfirmation.js
@@ -18,11 +18,9 @@ import React, { Component, PropTypes } from 'react';
 import { FormattedMessage } from 'react-intl';
 
 import { nullableProptype } from '@parity/shared/util/proptypes';
+import TxHash from '@parity/ui/TxHash';
 
-import TxHash from '~/ui/TxHash';
-import {
-  POSTING_CONFIRMATION, POSTED_CONFIRMATION
-} from '../store';
+import { POSTING_CONFIRMATION, POSTED_CONFIRMATION } from '../store';
 
 import styles from './sendConfirmation.css';
 
diff --git a/js/src/views/Account/Verification/SendRequest/sendRequest.js b/js/src/views/Account/Verification/SendRequest/sendRequest.js
index 417ce982c..bdaebb237 100644
--- a/js/src/views/Account/Verification/SendRequest/sendRequest.js
+++ b/js/src/views/Account/Verification/SendRequest/sendRequest.js
@@ -18,11 +18,9 @@ import React, { Component, PropTypes } from 'react';
 import { FormattedMessage } from 'react-intl';
 
 import { nullableProptype } from '@parity/shared/util/proptypes';
+import TxHash from '@parity/ui/TxHash';
 
-import TxHash from '~/ui/TxHash';
-import {
-  POSTING_REQUEST, POSTED_REQUEST, REQUESTING_CODE
-} from '../store';
+import { POSTING_REQUEST, POSTED_REQUEST, REQUESTING_CODE } from '../store';
 
 import styles from './sendRequest.css';
 
diff --git a/js/src/views/Account/Verification/verification.js b/js/src/views/Account/Verification/verification.js
index d94c44122..d7f0832d2 100644
--- a/js/src/views/Account/Verification/verification.js
+++ b/js/src/views/Account/Verification/verification.js
@@ -20,9 +20,8 @@ import { connect } from 'react-redux';
 import { observer } from 'mobx-react';
 import { observable } from 'mobx';
 
-import { Button, IdentityIcon, Portal } from '~/ui';
-import RadioButtons from '~/ui/Form/RadioButtons';
-import { CancelIcon, DoneIcon } from '~/ui/Icons';
+import { Button, IdentityIcon, Portal, RadioButtons } from '@parity/ui';
+import { CancelIcon, DoneIcon } from '@parity/ui/Icons';
 
 import SMSVerificationStore from './sms-store';
 import EmailVerificationStore from './email-store';
@@ -37,7 +36,7 @@ const METHODS = {
         defaultMessage='SMS Verification'
       />
     ),
-    key: 0,
+    key: 'sms',
     value: 'sms',
     description: (
       <p className={ styles.noSpacing }>
@@ -55,7 +54,7 @@ const METHODS = {
         defaultMessage='E-mail Verification'
       />
     ),
-    key: 1,
+    key: 'email',
     value: 'email',
     description: (
       <p className={ styles.noSpacing }>
@@ -269,14 +268,12 @@ class Verification extends Component {
     const { method } = this.state;
 
     if (phase === 0) {
-      const values = Object.values(METHODS);
-      const value = values.findIndex((v) => v.value === method);
-
       return (
         <RadioButtons
+          name='verificationType'
           onChange={ this.selectMethod }
-          value={ value < 0 ? 0 : value }
-          values={ values }
+          value={ method || 'sms' }
+          values={ Object.values(METHODS) }
         />
       );
     }
@@ -436,8 +433,8 @@ class Verification extends Component {
     }
   }
 
-  selectMethod = (choice, i) => {
-    this.setState({ method: choice.value });
+  selectMethod = (event, method) => {
+    this.setState({ method });
   }
 }
 
diff --git a/js/src/views/Account/account.js b/js/src/views/Account/account.js
index c7417e041..0b596f493 100644
--- a/js/src/views/Account/account.js
+++ b/js/src/views/Account/account.js
@@ -25,10 +25,10 @@ import HistoryStore from '@parity/shared/mobx/historyStore';
 import { newError } from '@parity/shared/redux/actions';
 import { setVisibleAccounts } from '@parity/shared/redux/providers/personalActions';
 import { fetchCertifiers, fetchCertifications } from '@parity/shared/redux/providers/certifications/actions';
+import { Actionbar, Button, ConfirmDialog, Input, Page, Portal } from '@parity/ui';
+import { DeleteIcon, DialIcon, EditIcon, LockedIcon, SendIcon, VerifyIcon, FileDownloadIcon } from '@parity/ui/Icons';
 
 import shapeshiftBtn from '~/../assets/images/shapeshift-btn.png';
-import { Actionbar, Button, ConfirmDialog, Input, Page, Portal } from '~/ui';
-import { DeleteIcon, DialIcon, EditIcon, LockedIcon, SendIcon, VerifyIcon, FileDownloadIcon } from '~/ui/Icons';
 
 import DeleteAccount from './DeleteAccount';
 import EditMeta from './EditMeta';
diff --git a/js/src/views/Account/index.js b/js/src/views/Account/index.js
index 1227884cd..70df6633b 100644
--- a/js/src/views/Account/index.js
+++ b/js/src/views/Account/index.js
@@ -23,12 +23,11 @@ injectTapEventPlugin();
 
 import ContractInstances from '@parity/shared/contracts';
 import { initStore } from '@parity/shared/redux';
+import ContextProvider from '@parity/ui/ContextProvider';
+import muiTheme from '@parity/ui/Theme';
 
 import { api } from './parity';
 
-import ContextProvider from '~/ui/ContextProvider';
-import muiTheme from '~/ui/Theme';
-
 import Account from './account';
 
 ContractInstances.get(api);
diff --git a/js/src/views/Accounts/CreateAccount/AccountDetails/accountDetails.js b/js/src/views/Accounts/CreateAccount/AccountDetails/accountDetails.js
index 75a2ca9c4..925f5140f 100644
--- a/js/src/views/Accounts/CreateAccount/AccountDetails/accountDetails.js
+++ b/js/src/views/Accounts/CreateAccount/AccountDetails/accountDetails.js
@@ -18,7 +18,7 @@ import { observer } from 'mobx-react';
 import React, { Component, PropTypes } from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import { IdentityIcon, Input, QrCode, Title } from '~/ui';
+import { IdentityIcon, Input, QrCode, Title } from '@parity/ui';
 
 import styles from '../createAccount.css';
 
diff --git a/js/src/views/Accounts/CreateAccount/AccountDetailsGeth/accountDetailsGeth.js b/js/src/views/Accounts/CreateAccount/AccountDetailsGeth/accountDetailsGeth.js
index 37a872e0e..f8a8caaa8 100644
--- a/js/src/views/Accounts/CreateAccount/AccountDetailsGeth/accountDetailsGeth.js
+++ b/js/src/views/Accounts/CreateAccount/AccountDetailsGeth/accountDetailsGeth.js
@@ -18,7 +18,8 @@ import { observer } from 'mobx-react';
 import React, { Component, PropTypes } from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import { SectionList } from '~/ui';
+import { SectionList } from '@parity/ui';
+
 import GethCard from '../GethCard';
 
 import styles from '../createAccount.css';
diff --git a/js/src/views/Accounts/CreateAccount/ChangeVault/changeVault.js b/js/src/views/Accounts/CreateAccount/ChangeVault/changeVault.js
index 510251cb2..83afdc38d 100644
--- a/js/src/views/Accounts/CreateAccount/ChangeVault/changeVault.js
+++ b/js/src/views/Accounts/CreateAccount/ChangeVault/changeVault.js
@@ -17,7 +17,7 @@
 import { observer } from 'mobx-react';
 import React, { Component, PropTypes } from 'react';
 
-import { VaultSelect } from '~/ui';
+import { VaultSelect } from '@parity/ui';
 
 @observer
 export default class ChangeVault extends Component {
diff --git a/js/src/views/Accounts/CreateAccount/CreationType/creationType.js b/js/src/views/Accounts/CreateAccount/CreationType/creationType.js
index 8869e6e63..602ce115e 100644
--- a/js/src/views/Accounts/CreateAccount/CreationType/creationType.js
+++ b/js/src/views/Accounts/CreateAccount/CreationType/creationType.js
@@ -18,7 +18,7 @@ import { observer } from 'mobx-react';
 import React, { Component, PropTypes } from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import { Container, SelectionList, Title } from '~/ui';
+import { Container, SelectionList, Title } from '@parity/ui';
 
 import TypeIcon from '../TypeIcon';
 import styles from '../createAccount.css';
diff --git a/js/src/views/Accounts/CreateAccount/GethCard/gethCard.js b/js/src/views/Accounts/CreateAccount/GethCard/gethCard.js
index c084cb4f5..e8ffdf3f8 100644
--- a/js/src/views/Accounts/CreateAccount/GethCard/gethCard.js
+++ b/js/src/views/Accounts/CreateAccount/GethCard/gethCard.js
@@ -17,8 +17,7 @@
 import React, { Component, PropTypes } from 'react';
 
 import { ETH_TOKEN } from '@parity/shared/util/tokens';
-
-import { AccountCard } from '~/ui';
+import { AccountCard } from '@parity/ui';
 
 export default class GethCard extends Component {
   static propTypes = {
diff --git a/js/src/views/Accounts/CreateAccount/NewAccount/newAccount.js b/js/src/views/Accounts/CreateAccount/NewAccount/newAccount.js
index 9c6be9f6e..50d96cd3f 100644
--- a/js/src/views/Accounts/CreateAccount/NewAccount/newAccount.js
+++ b/js/src/views/Accounts/CreateAccount/NewAccount/newAccount.js
@@ -17,13 +17,10 @@
 import { observer } from 'mobx-react';
 import React, { Component, PropTypes } from 'react';
 import { FormattedMessage } from 'react-intl';
-import { IconButton } from 'material-ui';
-import { RadioButton, RadioButtonGroup } from 'material-ui/RadioButton';
 
-import { Form, Input, IdentityIcon } from '~/ui';
-import PasswordStrength from '~/ui/Form/PasswordStrength';
-import { RefreshIcon } from '~/ui/Icons';
-import Loading from '~/ui/Loading';
+import { Button, Form, Input, IdentityIcon, Loading, RadioButtons } from '@parity/ui';
+import PasswordStrength from '@parity/ui/Form/PasswordStrength';
+import { RefreshIcon } from '@parity/ui/Icons';
 
 import ChangeVault from '../ChangeVault';
 import styles from '../createAccount.css';
@@ -143,27 +140,21 @@ export default class CreateAccount extends Component {
       return null;
     }
 
-    const buttons = Object
-      .keys(accounts)
-      .map((address) => {
-        return (
-          <RadioButton
-            className={ styles.button }
-            key={ address }
-            value={ address }
-          />
-        );
-      });
-
     return (
-      <RadioButtonGroup
+      <RadioButtons
         className={ styles.selector }
         name='identitySelector'
         onChange={ this.onChangeIdentity }
-        valueSelected={ selectedAddress }
-      >
-        { buttons }
-      </RadioButtonGroup>
+        value={ selectedAddress }
+        values={
+          Object.keys(accounts).map((address) => {
+            return {
+              key: address,
+              label: address
+            };
+          })
+        }
+      />
     );
   }
 
@@ -176,30 +167,37 @@ export default class CreateAccount extends Component {
       );
     }
 
-    const identities = Object
-      .keys(accounts)
-      .map((address) => {
-        return (
-          <div
-            className={ styles.identity }
-            key={ address }
-            onTouchTap={ this.onChangeIdentity }
-          >
-            <IdentityIcon
-              address={ address }
-              center
-            />
-          </div>
-        );
-      });
-
     return (
       <div className={ styles.identities }>
-        { identities }
+        {
+          Object
+            .keys(accounts)
+            .map((address) => {
+              return (
+                <div
+                  className={ styles.identity }
+                  key={ address }
+                  onTouchTap={ this.onChangeIdentity }
+                >
+                  <IdentityIcon
+                    address={ address }
+                    center
+                  />
+                </div>
+              );
+            })
+        }
         <div className={ styles.refresh }>
-          <IconButton onTouchTap={ this.createIdentities }>
-            <RefreshIcon color='rgb(0, 151, 167)' />
-          </IconButton>
+          <Button
+            onClick={ this.createIdentities }
+            icon={ <RefreshIcon /> }
+            label={
+              <FormattedMessage
+                id='createAccount.newAccount.buttons.refresh'
+                defaultMessage='refresh'
+              />
+            }
+          />
         </div>
       </div>
     );
@@ -235,9 +233,8 @@ export default class CreateAccount extends Component {
       });
   }
 
-  onChangeIdentity = (event) => {
+  onChangeIdentity = (event, selectedAddress) => {
     const { createStore } = this.props;
-    const selectedAddress = event.target.value || event.target.getAttribute('value');
 
     if (!selectedAddress) {
       return;
diff --git a/js/src/views/Accounts/CreateAccount/NewAccount/newAccount.spec.js b/js/src/views/Accounts/CreateAccount/NewAccount/newAccount.spec.js
index 935fe5b80..3df7ea58f 100644
--- a/js/src/views/Accounts/CreateAccount/NewAccount/newAccount.spec.js
+++ b/js/src/views/Accounts/CreateAccount/NewAccount/newAccount.spec.js
@@ -43,7 +43,7 @@ function render () {
   return component;
 }
 
-describe('modals/CreateAccount/NewAccount', () => {
+describe('views/Accounts/CreateAccount/NewAccount', () => {
   beforeEach(() => {
     render();
   });
@@ -77,7 +77,7 @@ describe('modals/CreateAccount/NewAccount', () => {
 
         sinon.spy(store, 'setAddress');
         sinon.spy(store, 'setPhrase');
-        instance.onChangeIdentity({ target: { value: address } });
+        instance.onChangeIdentity(null, address);
       });
 
       afterEach(() => {
diff --git a/js/src/views/Accounts/CreateAccount/NewGeth/newGeth.js b/js/src/views/Accounts/CreateAccount/NewGeth/newGeth.js
index 54c0acb50..89c89f63d 100644
--- a/js/src/views/Accounts/CreateAccount/NewGeth/newGeth.js
+++ b/js/src/views/Accounts/CreateAccount/NewGeth/newGeth.js
@@ -18,7 +18,7 @@ import { observer } from 'mobx-react';
 import React, { Component, PropTypes } from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import { SelectionList } from '~/ui';
+import { SelectionList } from '@parity/ui';
 
 import GethCard from '../GethCard';
 import styles from '../createAccount.css';
diff --git a/js/src/views/Accounts/CreateAccount/NewImport/newImport.js b/js/src/views/Accounts/CreateAccount/NewImport/newImport.js
index f683e7c5d..4e5652a4e 100644
--- a/js/src/views/Accounts/CreateAccount/NewImport/newImport.js
+++ b/js/src/views/Accounts/CreateAccount/NewImport/newImport.js
@@ -18,7 +18,7 @@ import { observer } from 'mobx-react';
 import React, { Component, PropTypes } from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import { Form, FileSelect, Input } from '~/ui';
+import { Form, FileSelect, Input } from '@parity/ui';
 
 import ChangeVault from '../ChangeVault';
 import styles from '../createAccount.css';
diff --git a/js/src/views/Accounts/CreateAccount/NewQr/newQr.js b/js/src/views/Accounts/CreateAccount/NewQr/newQr.js
index 362fd4d61..725319a6e 100644
--- a/js/src/views/Accounts/CreateAccount/NewQr/newQr.js
+++ b/js/src/views/Accounts/CreateAccount/NewQr/newQr.js
@@ -17,7 +17,7 @@
 import React, { Component, PropTypes } from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import { Form, Input, InputAddress, QrScan } from '~/ui';
+import { Form, Input, InputAddress, QrScan } from '@parity/ui';
 
 import ChangeVault from '../ChangeVault';
 
diff --git a/js/src/views/Accounts/CreateAccount/RawKey/rawKey.js b/js/src/views/Accounts/CreateAccount/RawKey/rawKey.js
index a2121eb19..89a4da551 100644
--- a/js/src/views/Accounts/CreateAccount/RawKey/rawKey.js
+++ b/js/src/views/Accounts/CreateAccount/RawKey/rawKey.js
@@ -18,8 +18,8 @@ import { observer } from 'mobx-react';
 import React, { Component, PropTypes } from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import { Form, Input } from '~/ui';
-import PasswordStrength from '~/ui/Form/PasswordStrength';
+import { Form, Input } from '@parity/ui';
+import PasswordStrength from '@parity/ui/Form/PasswordStrength';
 
 import ChangeVault from '../ChangeVault';
 import styles from '../createAccount.css';
diff --git a/js/src/views/Accounts/CreateAccount/RecoveryPhrase/recoveryPhrase.js b/js/src/views/Accounts/CreateAccount/RecoveryPhrase/recoveryPhrase.js
index 6e3923484..e8d383965 100644
--- a/js/src/views/Accounts/CreateAccount/RecoveryPhrase/recoveryPhrase.js
+++ b/js/src/views/Accounts/CreateAccount/RecoveryPhrase/recoveryPhrase.js
@@ -18,8 +18,8 @@ import { observer } from 'mobx-react';
 import React, { Component, PropTypes } from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import { Checkbox, Form, Input } from '~/ui';
-import PasswordStrength from '~/ui/Form/PasswordStrength';
+import { Checkbox, Form, Input } from '@parity/ui';
+import PasswordStrength from '@parity/ui/Form/PasswordStrength';
 
 import ChangeVault from '../ChangeVault';
 import styles from '../createAccount.css';
diff --git a/js/src/views/Accounts/CreateAccount/TypeIcon/typeIcon.js b/js/src/views/Accounts/CreateAccount/TypeIcon/typeIcon.js
index fd2bb1b86..45d26765b 100644
--- a/js/src/views/Accounts/CreateAccount/TypeIcon/typeIcon.js
+++ b/js/src/views/Accounts/CreateAccount/TypeIcon/typeIcon.js
@@ -16,7 +16,7 @@
 
 import React, { Component, PropTypes } from 'react';
 
-import { AccountsIcon, DoneIcon, FileIcon, FileUploadIcon, KeyboardIcon, KeyIcon, MembershipIcon, QrIcon } from '~/ui/Icons';
+import { AccountsIcon, DoneIcon, FileIcon, FileUploadIcon, KeyboardIcon, KeyIcon, MembershipIcon, QrIcon } from '@parity/ui/Icons';
 
 import { STAGE_INFO } from '../store';
 
diff --git a/js/src/views/Accounts/CreateAccount/createAccount.css b/js/src/views/Accounts/CreateAccount/createAccount.css
index 5125bd95d..0837db77a 100644
--- a/js/src/views/Accounts/CreateAccount/createAccount.css
+++ b/js/src/views/Accounts/CreateAccount/createAccount.css
@@ -80,16 +80,16 @@
 }
 
 .identities,
-.selector {
+.selector>div {
   display: flex;
 }
 
-.selector {
+.selector>div {
   margin-top: 1.5em;
 }
 
 .identities .identity,
-.selector .button {
+.selector>div>div {
   flex: 0 1 12.5%;
   width: 12.5% !important;
   text-align: center;
diff --git a/js/src/views/Accounts/CreateAccount/createAccount.js b/js/src/views/Accounts/CreateAccount/createAccount.js
index 4fcf4d8fe..b2ac87a87 100644
--- a/js/src/views/Accounts/CreateAccount/createAccount.js
+++ b/js/src/views/Accounts/CreateAccount/createAccount.js
@@ -22,11 +22,10 @@ import { bindActionCreators } from 'redux';
 
 import { createIdentityImg } from '@parity/api/util/identity';
 import { newError } from '@parity/shared/redux/actions';
+import { Button, ModalBox, Portal } from '@parity/ui';
+import { CancelIcon, CheckIcon, DoneIcon, NextIcon, PrevIcon, PrintIcon } from '@parity/ui/Icons';
 
 import ParityLogo from '~/../assets/images/parity-logo-black-no-text.svg';
-import { Button, ModalBox, Portal } from '~/ui';
-import { CancelIcon, CheckIcon, DoneIcon, NextIcon, PrevIcon, PrintIcon } from '~/ui/Icons';
-
 import VaultStore from '~/views/Vaults/store';
 
 import AccountDetails from './AccountDetails';
diff --git a/js/src/views/Accounts/CreateWallet/WalletDetails/walletDetails.js b/js/src/views/Accounts/CreateWallet/WalletDetails/walletDetails.js
index d3776e2cb..51ac54f59 100644
--- a/js/src/views/Accounts/CreateWallet/WalletDetails/walletDetails.js
+++ b/js/src/views/Accounts/CreateWallet/WalletDetails/walletDetails.js
@@ -17,7 +17,7 @@
 import React, { Component, PropTypes } from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import { Form, TypedInput, Input, AddressSelect, InputAddress } from '~/ui';
+import { Form, TypedInput, Input, AddressSelect, InputAddress } from '@parity/ui';
 
 import styles from '../createWallet.css';
 
diff --git a/js/src/views/Accounts/CreateWallet/WalletInfo/walletInfo.js b/js/src/views/Accounts/CreateWallet/WalletInfo/walletInfo.js
index 46bb82985..7afda9faa 100644
--- a/js/src/views/Accounts/CreateWallet/WalletInfo/walletInfo.js
+++ b/js/src/views/Accounts/CreateWallet/WalletInfo/walletInfo.js
@@ -18,8 +18,7 @@ import React, { Component, PropTypes } from 'react';
 import { FormattedMessage } from 'react-intl';
 
 import { fromWei } from '@parity/api/util/wei';
-
-import { CompletedStep, IdentityIcon, CopyToClipboard } from '~/ui';
+import { CompletedStep, IdentityIcon, CopyToClipboard } from '@parity/ui';
 
 import styles from '../createWallet.css';
 
diff --git a/js/src/views/Accounts/CreateWallet/WalletType/walletType.js b/js/src/views/Accounts/CreateWallet/WalletType/walletType.js
index baf1d19b7..97e1b476e 100644
--- a/js/src/views/Accounts/CreateWallet/WalletType/walletType.js
+++ b/js/src/views/Accounts/CreateWallet/WalletType/walletType.js
@@ -18,8 +18,7 @@ import React, { Component, PropTypes } from 'react';
 import { FormattedMessage } from 'react-intl';
 
 import { walletSourceURL } from '@parity/shared/contracts/code/wallet';
-
-import { RadioButtons } from '~/ui';
+import { RadioButtons } from '@parity/ui';
 
 const TYPES = [
   {
@@ -83,7 +82,7 @@ export default class WalletType extends Component {
     );
   }
 
-  onTypeChange = (type) => {
-    this.props.onChange(type.key);
+  onTypeChange = (event, type) => {
+    this.props.onChange(type);
   }
 }
diff --git a/js/src/views/Accounts/CreateWallet/createWallet.js b/js/src/views/Accounts/CreateWallet/createWallet.js
index b0d57efbe..ea59df09a 100644
--- a/js/src/views/Accounts/CreateWallet/createWallet.js
+++ b/js/src/views/Accounts/CreateWallet/createWallet.js
@@ -21,9 +21,8 @@ import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 
 import { setRequest } from '@parity/shared/redux/providers/requestsActions';
-
-import { Button, Portal } from '~/ui';
-import { CancelIcon, DoneIcon, NextIcon } from '~/ui/Icons';
+import { Button, Portal } from '@parity/ui';
+import { CancelIcon, DoneIcon, NextIcon } from '@parity/ui/Icons';
 
 import WalletType from './WalletType';
 import WalletDetails from './WalletDetails';
diff --git a/js/src/views/Accounts/ExportAccount/exportAccount.js b/js/src/views/Accounts/ExportAccount/exportAccount.js
index e0f97c292..5780b0161 100644
--- a/js/src/views/Accounts/ExportAccount/exportAccount.js
+++ b/js/src/views/Accounts/ExportAccount/exportAccount.js
@@ -22,9 +22,9 @@ import { bindActionCreators } from 'redux';
 
 import { newError } from '@parity/shared/redux/actions';
 import { personalAccountsInfo } from '@parity/shared/redux/providers/personalActions';
+import { AccountCard, Button, Portal, SelectionList } from '@parity/ui';
+import { CancelIcon, CheckIcon } from '@parity/ui/Icons';
 
-import { AccountCard, Button, Portal, SelectionList } from '~/ui';
-import { CancelIcon, CheckIcon } from '~/ui/Icons';
 import ExportInput from './exportInput';
 import ExportStore from './exportStore';
 
diff --git a/js/src/views/Accounts/ExportAccount/exportInput/exportInput.js b/js/src/views/Accounts/ExportAccount/exportInput/exportInput.js
index 07673b29b..0725eb556 100644
--- a/js/src/views/Accounts/ExportAccount/exportInput/exportInput.js
+++ b/js/src/views/Accounts/ExportAccount/exportInput/exportInput.js
@@ -16,7 +16,8 @@
 
 import React, { Component, PropTypes } from 'react';
 import { FormattedMessage } from 'react-intl';
-import { Input } from '~/ui/Form';
+
+import { Input } from '@parity/ui/Form';
 
 export default class ExportInput extends Component {
   static propTypes = {
diff --git a/js/src/views/Accounts/List/list.js b/js/src/views/Accounts/List/list.js
index 7fa0e6c8a..df02e0502 100644
--- a/js/src/views/Accounts/List/list.js
+++ b/js/src/views/Accounts/List/list.js
@@ -21,8 +21,7 @@ import { bindActionCreators } from 'redux';
 
 import { ETH_TOKEN } from '@parity/shared/util/tokens';
 import { fetchCertifiers, fetchCertifications } from '@parity/shared/redux/providers/certifications/actions';
-
-import { Container, SectionList } from '~/ui';
+import { Container, SectionList } from '@parity/ui';
 
 import Summary from '../Summary';
 import styles from './list.css';
diff --git a/js/src/views/Accounts/Summary/summary.js b/js/src/views/Accounts/Summary/summary.js
index 772d84a36..991f6951a 100644
--- a/js/src/views/Accounts/Summary/summary.js
+++ b/js/src/views/Accounts/Summary/summary.js
@@ -23,8 +23,7 @@ import ReactTooltip from 'react-tooltip';
 import { FormattedMessage } from 'react-intl';
 
 import { arrayOrObjectProptype, nullableProptype } from '@parity/shared/util/proptypes';
-
-import { Balance, Certifications, Container, ContainerTitle, CopyToClipboard, IdentityIcon, IdentityName, Tags, VaultTag } from '~/ui';
+import { Balance, Certifications, Container, ContainerTitle, CopyToClipboard, IdentityIcon, IdentityName, Tags, VaultTag } from '@parity/ui';
 
 import styles from '../accounts.css';
 
diff --git a/js/src/views/Accounts/accounts.js b/js/src/views/Accounts/accounts.js
index 35d7338c6..d53ceb791 100644
--- a/js/src/views/Accounts/accounts.js
+++ b/js/src/views/Accounts/accounts.js
@@ -24,9 +24,8 @@ import { bindActionCreators } from 'redux';
 
 import HardwareStore from '@parity/shared/mobx/hardwareStore';
 import { setVisibleAccounts } from '@parity/shared/redux/providers/personalActions';
-
-import { Actionbar, ActionbarSearch, ActionbarSort, Button, Page } from '~/ui';
-import { AddIcon, FileDownloadIcon } from '~/ui/Icons';
+import { Actionbar, ActionbarSearch, ActionbarSort, Button, Page } from '@parity/ui';
+import { AddIcon, FileDownloadIcon } from '@parity/ui/Icons';
 
 import CreateWallet from './CreateWallet';
 import CreateAccount from './CreateAccount';
diff --git a/js/src/views/Accounts/index.js b/js/src/views/Accounts/index.js
index d092a9150..9d603fcfa 100644
--- a/js/src/views/Accounts/index.js
+++ b/js/src/views/Accounts/index.js
@@ -23,9 +23,8 @@ injectTapEventPlugin();
 
 import ContractInstances from '@parity/shared/contracts';
 import { initStore } from '@parity/shared/redux';
-
-import ContextProvider from '~/ui/ContextProvider';
-import muiTheme from '~/ui/Theme';
+import ContextProvider from '@parity/ui/ContextProvider';
+import muiTheme from '@parity/ui/Theme';
 
 import { api } from './parity';
 
diff --git a/js/src/views/Address/Delete/delete.js b/js/src/views/Address/Delete/delete.js
index ea36bf903..327c6b7d5 100644
--- a/js/src/views/Address/Delete/delete.js
+++ b/js/src/views/Address/Delete/delete.js
@@ -20,8 +20,7 @@ import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 
 import { newError } from '@parity/shared/redux/actions';
-
-import { ConfirmDialog, IdentityIcon, IdentityName } from '~/ui';
+import { ConfirmDialog, IdentityIcon, IdentityName } from '@parity/ui';
 
 import styles from '../address.css';
 
diff --git a/js/src/views/Address/address.js b/js/src/views/Address/address.js
index 26323173f..af4ab0127 100644
--- a/js/src/views/Address/address.js
+++ b/js/src/views/Address/address.js
@@ -20,9 +20,8 @@ import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 
 import { setVisibleAccounts } from '@parity/shared/redux/providers/personalActions';
-
-import { Actionbar, Button, Page } from '~/ui';
-import { AddIcon, DeleteIcon, EditIcon } from '~/ui/Icons';
+import { Actionbar, Button, Page } from '@parity/ui';
+import { AddIcon, DeleteIcon, EditIcon } from '@parity/ui/Icons';
 
 import EditMeta from '../Account/EditMeta';
 import Header from '../Account/Header';
diff --git a/js/src/views/Address/index.js b/js/src/views/Address/index.js
index 2469b7b3c..63b8e52c1 100644
--- a/js/src/views/Address/index.js
+++ b/js/src/views/Address/index.js
@@ -23,12 +23,10 @@ injectTapEventPlugin();
 
 import ContractInstances from '@parity/shared/contracts';
 import { initStore } from '@parity/shared/redux';
+import ContextProvider from '@parity/ui/ContextProvider';
+import muiTheme from '@parity/ui/Theme';
 
 import { api } from './parity';
-
-import ContextProvider from '~/ui/ContextProvider';
-import muiTheme from '~/ui/Theme';
-
 import Address from './address';
 
 ContractInstances.get(api);
diff --git a/js/src/views/Addresses/AddAddress/addAddress.js b/js/src/views/Addresses/AddAddress/addAddress.js
index eeea32872..561f795fc 100644
--- a/js/src/views/Addresses/AddAddress/addAddress.js
+++ b/js/src/views/Addresses/AddAddress/addAddress.js
@@ -18,8 +18,8 @@ import { observer } from 'mobx-react';
 import React, { Component, PropTypes } from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import { Button, Form, Input, InputAddress, ModalBox, Portal } from '~/ui';
-import { AddIcon, AddressIcon, CancelIcon } from '~/ui/Icons';
+import { Button, Form, Input, InputAddress, ModalBox, Portal } from '@parity/ui';
+import { AddIcon, AddressIcon, CancelIcon } from '@parity/ui/Icons';
 
 import Store from './store';
 
diff --git a/js/src/views/Addresses/addresses.js b/js/src/views/Addresses/addresses.js
index e7e3c9454..3a8671917 100644
--- a/js/src/views/Addresses/addresses.js
+++ b/js/src/views/Addresses/addresses.js
@@ -21,9 +21,8 @@ import { bindActionCreators } from 'redux';
 import { uniq, isEqual } from 'lodash';
 
 import { setVisibleAccounts } from '@parity/shared/redux/providers/personalActions';
-
-import { Actionbar, ActionbarExport, ActionbarImport, ActionbarSearch, ActionbarSort, Button, Page } from '~/ui';
-import { AddIcon } from '~/ui/Icons';
+import { Actionbar, ActionbarExport, ActionbarImport, ActionbarSearch, ActionbarSort, Button, Page } from '@parity/ui';
+import { AddIcon } from '@parity/ui/Icons';
 
 import List from '../Accounts/List';
 import Summary from '../Accounts/Summary';
diff --git a/js/src/views/Addresses/index.js b/js/src/views/Addresses/index.js
index 67adc21ae..8162d4bf4 100644
--- a/js/src/views/Addresses/index.js
+++ b/js/src/views/Addresses/index.js
@@ -23,12 +23,10 @@ injectTapEventPlugin();
 
 import ContractInstances from '@parity/shared/contracts';
 import { initStore } from '@parity/shared/redux';
+import ContextProvider from '@parity/ui/ContextProvider';
+import muiTheme from '@parity/ui/Theme';
 
 import { api } from './parity';
-
-import ContextProvider from '~/ui/ContextProvider';
-import muiTheme from '~/ui/Theme';
-
 import Addresses from './addresses';
 
 ContractInstances.get(api);
diff --git a/js/src/views/Contract/Events/Event/event.js b/js/src/views/Contract/Events/Event/event.js
index fc2436f8e..7c3bb6f55 100644
--- a/js/src/views/Contract/Events/Event/event.js
+++ b/js/src/views/Contract/Events/Event/event.js
@@ -19,8 +19,8 @@ import moment from 'moment';
 import React, { Component, PropTypes } from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import { IdentityIcon, IdentityName, TypedInput } from '~/ui';
-import ShortenedHash from '~/ui/ShortenedHash';
+import { IdentityIcon, IdentityName, ShortenedHash, TypedInput } from '@parity/ui';
+
 import { txLink } from '~/3rdparty/etherscan/links';
 
 import styles from '../../contract.css';
diff --git a/js/src/views/Contract/Events/events.js b/js/src/views/Contract/Events/events.js
index a15565757..fe426539a 100644
--- a/js/src/views/Contract/Events/events.js
+++ b/js/src/views/Contract/Events/events.js
@@ -18,7 +18,7 @@ import React, { Component, PropTypes } from 'react';
 import { FormattedMessage } from 'react-intl';
 import { uniq } from 'lodash';
 
-import { Container, Loading } from '~/ui';
+import { Container, Loading } from '@parity/ui';
 
 import Event from './Event';
 import styles from '../contract.css';
diff --git a/js/src/views/Contract/ExecuteContract/AdvancedStep/advancedStep.js b/js/src/views/Contract/ExecuteContract/AdvancedStep/advancedStep.js
index 268ca1f70..299dff1d9 100644
--- a/js/src/views/Contract/ExecuteContract/AdvancedStep/advancedStep.js
+++ b/js/src/views/Contract/ExecuteContract/AdvancedStep/advancedStep.js
@@ -16,7 +16,7 @@
 
 import React, { Component, PropTypes } from 'react';
 
-import { GasPriceEditor } from '~/ui';
+import { GasPriceEditor } from '@parity/ui';
 
 import styles from '../executeContract.css';
 
diff --git a/js/src/views/Contract/ExecuteContract/DetailsStep/detailsStep.js b/js/src/views/Contract/ExecuteContract/DetailsStep/detailsStep.js
index 6e42bc9cf..91c9cc94e 100644
--- a/js/src/views/Contract/ExecuteContract/DetailsStep/detailsStep.js
+++ b/js/src/views/Contract/ExecuteContract/DetailsStep/detailsStep.js
@@ -17,7 +17,7 @@
 import React, { Component, PropTypes } from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import { AddressSelect, Checkbox, Dropdown, Form, Input, TypedInput } from '~/ui';
+import { AddressSelect, Checkbox, Dropdown, Form, Input, TypedInput } from '@parity/ui';
 
 import styles from '../executeContract.css';
 
diff --git a/js/src/views/Contract/ExecuteContract/executeContract.js b/js/src/views/Contract/ExecuteContract/executeContract.js
index ea25cdebe..a7eec9189 100644
--- a/js/src/views/Contract/ExecuteContract/executeContract.js
+++ b/js/src/views/Contract/ExecuteContract/executeContract.js
@@ -23,9 +23,8 @@ import { toWei } from '@parity/api/util/wei';
 import { MAX_GAS_ESTIMATION } from '@parity/shared/util/constants';
 import { validateAddress, validateUint } from '@parity/shared/util/validation';
 import { parseAbiType } from '@parity/shared/util/abi';
-
-import { Button, GasPriceEditor, IdentityIcon, Portal, Warning } from '~/ui';
-import { CancelIcon, NextIcon, PrevIcon } from '~/ui/Icons';
+import { Button, GasPriceEditor, IdentityIcon, Portal, Warning } from '@parity/ui';
+import { CancelIcon, NextIcon, PrevIcon } from '@parity/ui/Icons';
 
 import AdvancedStep from './AdvancedStep';
 import DetailsStep from './DetailsStep';
diff --git a/js/src/views/Contract/Queries/inputQuery.js b/js/src/views/Contract/Queries/inputQuery.js
index c0826ff66..42b27ac03 100644
--- a/js/src/views/Contract/Queries/inputQuery.js
+++ b/js/src/views/Contract/Queries/inputQuery.js
@@ -23,8 +23,7 @@ import { bindActionCreators } from 'redux';
 import { newError } from '@parity/shared/redux/actions';
 import { arrayOrObjectProptype } from '@parity/shared/util/proptypes';
 import { parseAbiType } from '@parity/shared/util/abi';
-
-import { Button, Container, Progress, TypedInput } from '~/ui';
+import { Button, Container, Progress, TypedInput } from '@parity/ui';
 
 import styles from './queries.css';
 
diff --git a/js/src/views/Contract/Queries/queries.js b/js/src/views/Contract/Queries/queries.js
index 58618870f..4494ef14c 100644
--- a/js/src/views/Contract/Queries/queries.js
+++ b/js/src/views/Contract/Queries/queries.js
@@ -17,8 +17,9 @@
 import React, { Component, PropTypes } from 'react';
 import { FormattedMessage } from 'react-intl';
 
+import { Container, TypedInput } from '@parity/ui';
+
 import InputQuery from './inputQuery';
-import { Container, TypedInput } from '~/ui';
 
 import styles from './queries.css';
 
diff --git a/js/src/views/Contract/contract.js b/js/src/views/Contract/contract.js
index 159bf20a1..d8cf5c422 100644
--- a/js/src/views/Contract/contract.js
+++ b/js/src/views/Contract/contract.js
@@ -22,10 +22,9 @@ import BigNumber from 'bignumber.js';
 
 import { newError } from '@parity/shared/redux/actions';
 import { setVisibleAccounts } from '@parity/shared/redux/providers/personalActions';
-
-import { Actionbar, Button, Page, Portal } from '~/ui';
-import { CancelIcon, DeleteIcon, EditIcon, PlayIcon, VisibleIcon } from '~/ui/Icons';
-import Editor from '~/ui/Editor';
+import { Actionbar, Button, Page, Portal } from '@parity/ui';
+import { CancelIcon, DeleteIcon, EditIcon, PlayIcon, VisibleIcon } from '@parity/ui/Icons';
+import Editor from '@parity/ui/Editor';
 
 import EditMeta from '../Account/EditMeta';
 import Header from '../Account/Header';
diff --git a/js/src/views/Contract/index.js b/js/src/views/Contract/index.js
index 9424be64f..c964c89e6 100644
--- a/js/src/views/Contract/index.js
+++ b/js/src/views/Contract/index.js
@@ -23,12 +23,10 @@ injectTapEventPlugin();
 
 import ContractInstances from '@parity/shared/contracts';
 import { initStore } from '@parity/shared/redux';
+import ContextProvider from '@parity/ui/ContextProvider';
+import muiTheme from '@parity/ui/Theme';
 
 import { api } from './parity';
-
-import ContextProvider from '~/ui/ContextProvider';
-import muiTheme from '~/ui/Theme';
-
 import Contract from './contract';
 
 ContractInstances.get(api);
diff --git a/js/src/views/ContractDevelop/LoadContract/loadContract.js b/js/src/views/ContractDevelop/LoadContract/loadContract.js
index 811b63b9f..aa08f9f02 100644
--- a/js/src/views/ContractDevelop/LoadContract/loadContract.js
+++ b/js/src/views/ContractDevelop/LoadContract/loadContract.js
@@ -20,9 +20,9 @@ import moment from 'moment';
 import React, { Component, PropTypes } from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import { Button, Portal } from '~/ui';
-import Editor from '~/ui/Editor';
-import { CancelIcon, CheckIcon, DeleteIcon } from '~/ui/Icons';
+import { Button, Portal } from '@parity/ui';
+import Editor from '@parity/ui/Editor';
+import { CancelIcon, CheckIcon, DeleteIcon } from '@parity/ui/Icons';
 
 import styles from './loadContract.css';
 
diff --git a/js/src/views/ContractDevelop/SaveContract/saveContract.js b/js/src/views/ContractDevelop/SaveContract/saveContract.js
index cb94a087e..8ad88578f 100644
--- a/js/src/views/ContractDevelop/SaveContract/saveContract.js
+++ b/js/src/views/ContractDevelop/SaveContract/saveContract.js
@@ -18,10 +18,9 @@ import React, { Component, PropTypes } from 'react';
 import { FormattedMessage } from 'react-intl';
 
 import { ERRORS, validateName } from '@parity/shared/util/validation';
-
-import { Button, Form, Input, Portal } from '~/ui';
-import Editor from '~/ui/Editor';
-import { CancelIcon, SaveIcon } from '~/ui/Icons';
+import { Button, Form, Input, Portal } from '@parity/ui';
+import Editor from '@parity/ui/Editor';
+import { CancelIcon, SaveIcon } from '@parity/ui/Icons';
 
 import styles from './saveContract.css';
 
diff --git a/js/src/views/ContractDevelop/contractDevelop.js b/js/src/views/ContractDevelop/contractDevelop.js
index 83a546692..8ccfc1f97 100644
--- a/js/src/views/ContractDevelop/contractDevelop.js
+++ b/js/src/views/ContractDevelop/contractDevelop.js
@@ -21,9 +21,9 @@ import { connect } from 'react-redux';
 import moment from 'moment';
 import { throttle } from 'lodash';
 
-import { Actionbar, ActionbarExport, ActionbarImport, Button, Dropdown, Input, Loading, Page, Toggle } from '~/ui';
-import { CancelIcon, ListIcon, SaveIcon, SendIcon, SettingsIcon } from '~/ui/Icons';
-import Editor from '~/ui/Editor';
+import { Actionbar, ActionbarExport, ActionbarImport, Button, Dropdown, Input, Loading, Page, Toggle } from '@parity/ui';
+import { CancelIcon, ListIcon, SaveIcon, SendIcon, SettingsIcon } from '@parity/ui/Icons';
+import Editor from '@parity/ui/Editor';
 
 import DeployContract from '../Contracts/DeployContract';
 import LoadContract from './LoadContract';
diff --git a/js/src/views/ContractDevelop/index.js b/js/src/views/ContractDevelop/index.js
index 5dc0aaa10..01da5d71b 100644
--- a/js/src/views/ContractDevelop/index.js
+++ b/js/src/views/ContractDevelop/index.js
@@ -22,12 +22,11 @@ import injectTapEventPlugin from 'react-tap-event-plugin';
 injectTapEventPlugin();
 
 import { initStore } from '@parity/shared/redux';
+import ContextProvider from '@parity/ui/ContextProvider';
+import muiTheme from '@parity/ui/Theme';
 
 import { api } from './parity';
 
-import ContextProvider from '~/ui/ContextProvider';
-import muiTheme from '~/ui/Theme';
-
 import ContractDevelop from './contractDevelop';
 
 const store = initStore(api, hashHistory);
diff --git a/js/src/views/Contracts/AddContract/addContract.js b/js/src/views/Contracts/AddContract/addContract.js
index 909f48dc2..dd96b3993 100644
--- a/js/src/views/Contracts/AddContract/addContract.js
+++ b/js/src/views/Contracts/AddContract/addContract.js
@@ -21,9 +21,8 @@ import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 
 import { newError } from '@parity/shared/redux/actions';
-
-import { Button, Form, Input, InputAddress, Portal, RadioButtons } from '~/ui';
-import { AddIcon, CancelIcon, NextIcon, PrevIcon } from '~/ui/Icons';
+import { Button, Form, Input, InputAddress, Portal, RadioButtons } from '@parity/ui';
+import { AddIcon, CancelIcon, NextIcon, PrevIcon } from '@parity/ui/Icons';
 
 import Store from './store';
 
@@ -81,12 +80,12 @@ class AddContract extends Component {
   }
 
   renderContractTypeSelector () {
-    const { abiTypeIndex, abiTypes } = this.store;
+    const { abiType, abiTypes } = this.store;
 
     return (
       <RadioButtons
         name='contractType'
-        value={ abiTypeIndex }
+        value={ abiType }
         values={ abiTypes }
         onChange={ this.onChangeABIType }
       />
@@ -242,8 +241,8 @@ class AddContract extends Component {
     this.store.prevStep();
   }
 
-  onChangeABIType = (value, index) => {
-    this.store.setAbiTypeIndex(index);
+  onChangeABIType = (event, abiType) => {
+    this.store.setAbiType(abiType);
   }
 
   onEditAbi = (abi) => {
diff --git a/js/src/views/Contracts/AddContract/store.js b/js/src/views/Contracts/AddContract/store.js
index 61e04c616..ed312a565 100644
--- a/js/src/views/Contracts/AddContract/store.js
+++ b/js/src/views/Contracts/AddContract/store.js
@@ -25,7 +25,7 @@ export default class Store {
   @observable abiError = ERRORS.invalidAbi;
   @observable abiParsed = null;
   @observable abiTypes = ABI_TYPES;
-  @observable abiTypeIndex = 0;
+  @observable abiType = 'custom';
   @observable address = '';
   @observable addressError = ERRORS.invalidAddress;
   @observable description = '';
@@ -36,12 +36,6 @@ export default class Store {
   constructor (api, contracts) {
     this._api = api;
     this._contracts = contracts;
-
-    this.setAbiTypeIndex(2);
-  }
-
-  @computed get abiType () {
-    return this.abiTypes[this.abiTypeIndex];
   }
 
   @computed get hasError () {
@@ -66,10 +60,10 @@ export default class Store {
     });
   }
 
-  @action setAbiTypeIndex = (abiTypeIndex) => {
+  @action setAbiType = (abiType) => {
     transaction(() => {
-      this.abiTypeIndex = abiTypeIndex;
-      this.setAbi(this.abiTypes[abiTypeIndex].value);
+      this.abiType = abiType;
+      this.setAbi(this.abiTypes.find((abi) => abi.key === abiType).value);
     });
   }
 
diff --git a/js/src/views/Contracts/AddContract/store.spec.js b/js/src/views/Contracts/AddContract/store.spec.js
index 1305bd6e8..1048ee6e6 100644
--- a/js/src/views/Contracts/AddContract/store.spec.js
+++ b/js/src/views/Contracts/AddContract/store.spec.js
@@ -30,7 +30,7 @@ function createStore () {
   store = new Store(api, CONTRACTS);
 }
 
-describe('modals/AddContract/Store', () => {
+describe('views/Contracts/AddContract/Store', () => {
   beforeEach(() => {
     createStore();
   });
@@ -41,7 +41,7 @@ describe('modals/AddContract/Store', () => {
     });
 
     it('defaults to custom ABI', () => {
-      expect(store.abiType.type).to.equal('custom');
+      expect(store.abiType).to.equal('custom');
     });
   });
 
@@ -56,13 +56,13 @@ describe('modals/AddContract/Store', () => {
       });
     });
 
-    describe('setAbiTypeIndex', () => {
+    describe('setAbiType', () => {
       beforeEach(() => {
-        store.setAbiTypeIndex(1);
+        store.setAbiType('multisig');
       });
 
-      it('changes the index', () => {
-        expect(store.abiTypeIndex).to.equal(1);
+      it('changes the type', () => {
+        expect(store.abiType).to.equal('multisig');
       });
 
       it('changes the abi', () => {
@@ -113,12 +113,6 @@ describe('modals/AddContract/Store', () => {
   });
 
   describe('@computed', () => {
-    describe('abiType', () => {
-      it('matches the index', () => {
-        expect(store.abiType).to.deep.equal(store.abiTypes[2]);
-      });
-    });
-
     describe('hasError', () => {
       beforeEach(() => {
         store.setAddress(VALID_ADDR);
diff --git a/js/src/views/Contracts/AddContract/types.js b/js/src/views/Contracts/AddContract/types.js
index d34a33783..a9fae8215 100644
--- a/js/src/views/Contracts/AddContract/types.js
+++ b/js/src/views/Contracts/AddContract/types.js
@@ -44,6 +44,7 @@ const ABI_TYPES = [
       />
     ),
     readOnly: true,
+    key: 'token',
     type: 'token',
     value: JSON.stringify(eip20)
   },
@@ -71,6 +72,7 @@ const ABI_TYPES = [
       />
     ),
     readOnly: true,
+    key: 'multisig',
     type: 'multisig',
     value: JSON.stringify(wallet)
   },
@@ -87,6 +89,7 @@ const ABI_TYPES = [
         defaultMessage='Custom Contract'
       />
     ),
+    key: 'custom',
     type: 'custom',
     value: ''
   }
diff --git a/js/src/views/Contracts/DeployContract/DetailsStep/detailsStep.js b/js/src/views/Contracts/DeployContract/DetailsStep/detailsStep.js
index 50254357c..3162ec959 100644
--- a/js/src/views/Contracts/DeployContract/DetailsStep/detailsStep.js
+++ b/js/src/views/Contracts/DeployContract/DetailsStep/detailsStep.js
@@ -19,8 +19,7 @@ import { FormattedMessage } from 'react-intl';
 
 import { parseAbiType } from '@parity/shared/util/abi';
 import { validateAbi } from '@parity/shared/util/validation';
-
-import { AddressSelect, Checkbox, Dropdown, Form, Input } from '~/ui';
+import { AddressSelect, Checkbox, Dropdown, Form, Input } from '@parity/ui';
 
 const CHECK_STYLE = {
   marginTop: '1em'
diff --git a/js/src/views/Contracts/DeployContract/ParametersStep/parametersStep.js b/js/src/views/Contracts/DeployContract/ParametersStep/parametersStep.js
index fd15d291a..27691cebe 100644
--- a/js/src/views/Contracts/DeployContract/ParametersStep/parametersStep.js
+++ b/js/src/views/Contracts/DeployContract/ParametersStep/parametersStep.js
@@ -33,8 +33,7 @@ import React, { Component, PropTypes } from 'react';
 import { FormattedMessage } from 'react-intl';
 
 import { parseAbiType } from '@parity/shared/util/abi';
-
-import { Form, TypedInput } from '~/ui';
+import { Form, TypedInput } from '@parity/ui';
 
 import styles from '../deployContract.css';
 
diff --git a/js/src/views/Contracts/DeployContract/deployContract.js b/js/src/views/Contracts/DeployContract/deployContract.js
index 068795f8e..f4998d2d7 100644
--- a/js/src/views/Contracts/DeployContract/deployContract.js
+++ b/js/src/views/Contracts/DeployContract/deployContract.js
@@ -24,9 +24,8 @@ import { bindActionCreators } from 'redux';
 import { setRequest } from '@parity/shared/redux/providers/requestsActions';
 import { ERRORS, validateAbi, validateCode, validateName, validatePositiveNumber } from '@parity/shared/util/validation';
 import { deploy, deployEstimateGas } from '@parity/shared/util/tx';
-
-import { Button, GasPriceEditor, IdentityIcon, Portal, Warning } from '~/ui';
-import { CancelIcon } from '~/ui/Icons';
+import { Button, GasPriceEditor, IdentityIcon, Portal, Warning } from '@parity/ui';
+import { CancelIcon } from '@parity/ui/Icons';
 
 import DetailsStep from './DetailsStep';
 import ParametersStep from './ParametersStep';
diff --git a/js/src/views/Contracts/contracts.js b/js/src/views/Contracts/contracts.js
index f2fb2c064..acf03e037 100644
--- a/js/src/views/Contracts/contracts.js
+++ b/js/src/views/Contracts/contracts.js
@@ -21,9 +21,8 @@ import { bindActionCreators } from 'redux';
 import { uniq, isEqual } from 'lodash';
 
 import { setVisibleAccounts } from '@parity/shared/redux/providers/personalActions';
-
-import { Actionbar, ActionbarSearch, ActionbarSort, Button, Page } from '~/ui';
-import { AddIcon } from '~/ui/Icons';
+import { Actionbar, ActionbarSearch, ActionbarSort, Button, Page } from '@parity/ui';
+import { AddIcon } from '@parity/ui/Icons';
 
 import List from '../Accounts/List';
 
diff --git a/js/src/views/Contracts/index.js b/js/src/views/Contracts/index.js
index 0f73414c9..8416e1e4d 100644
--- a/js/src/views/Contracts/index.js
+++ b/js/src/views/Contracts/index.js
@@ -23,12 +23,10 @@ injectTapEventPlugin();
 
 import ContractInstances from '@parity/shared/contracts';
 import { initStore } from '@parity/shared/redux';
+import ContextProvider from '@parity/ui/ContextProvider';
+import muiTheme from '@parity/ui/Theme';
 
 import { api } from './parity';
-
-import ContextProvider from '~/ui/ContextProvider';
-import muiTheme from '~/ui/Theme';
-
 import Contracts from './contracts';
 
 ContractInstances.get(api);
diff --git a/js/src/views/Home/Accounts/accounts.js b/js/src/views/Home/Accounts/accounts.js
index 42dcaf39c..f4beaddd0 100644
--- a/js/src/views/Home/Accounts/accounts.js
+++ b/js/src/views/Home/Accounts/accounts.js
@@ -21,8 +21,7 @@ import { connect } from 'react-redux';
 import { Link } from 'react-router';
 
 import { arrayOrObjectProptype } from '@parity/shared/util/proptypes';
-
-import { Container, ContainerTitle, IdentityName, IdentityIcon, SectionList } from '~/ui';
+import { Container, ContainerTitle, IdentityName, IdentityIcon, SectionList } from '@parity/ui';
 
 import styles from './accounts.css';
 
diff --git a/js/src/views/Home/Dapps/dapp.js b/js/src/views/Home/Dapps/dapp.js
index 51e5c2122..5c159a707 100644
--- a/js/src/views/Home/Dapps/dapp.js
+++ b/js/src/views/Home/Dapps/dapp.js
@@ -19,7 +19,7 @@ import React, { Component, PropTypes } from 'react';
 import { FormattedMessage } from 'react-intl';
 import { Link } from 'react-router';
 
-import { Container, DappIcon } from '~/ui';
+import { Container, DappIcon } from '@parity/ui';
 
 import styles from './dapps.css';
 
diff --git a/js/src/views/Home/Dapps/dapps.js b/js/src/views/Home/Dapps/dapps.js
index 307e9b440..401a1bef7 100644
--- a/js/src/views/Home/Dapps/dapps.js
+++ b/js/src/views/Home/Dapps/dapps.js
@@ -17,9 +17,8 @@
 import React, { Component, PropTypes } from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import { arrayOrObjectProptype } from '@parity/shared//util/proptypes';
-
-import { ContainerTitle, SectionList } from '~/ui';
+import { arrayOrObjectProptype } from '@parity/shared/util/proptypes';
+import { ContainerTitle, SectionList } from '@parity/ui';
 
 import Dapp from './dapp';
 import styles from './dapps.css';
diff --git a/js/src/views/Home/News/news.js b/js/src/views/Home/News/news.js
index ea540c3f3..9d36587ea 100644
--- a/js/src/views/Home/News/news.js
+++ b/js/src/views/Home/News/news.js
@@ -18,7 +18,7 @@ import { observer } from 'mobx-react';
 import React, { Component, PropTypes } from 'react';
 import ReactMarkdown from 'react-markdown';
 
-import { SectionList } from '~/ui';
+import { SectionList } from '@parity/ui';
 
 import { createRenderers } from './renderers';
 import Store from './store';
diff --git a/js/src/views/Home/Urls/urls.js b/js/src/views/Home/Urls/urls.js
index 7ded1ecda..6815e7cac 100644
--- a/js/src/views/Home/Urls/urls.js
+++ b/js/src/views/Home/Urls/urls.js
@@ -19,8 +19,8 @@ import moment from 'moment';
 import React, { Component, PropTypes } from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import { Container, ContainerTitle, DappUrlInput, SectionList } from '~/ui';
-import { LinkIcon } from '~/ui/Icons';
+import { Container, ContainerTitle, DappUrlInput, SectionList } from '@parity/ui';
+import { LinkIcon } from '@parity/ui/Icons';
 
 import styles from './urls.css';
 
diff --git a/js/src/views/Home/home.js b/js/src/views/Home/home.js
index 5b01d31e8..8497297e1 100644
--- a/js/src/views/Home/home.js
+++ b/js/src/views/Home/home.js
@@ -19,8 +19,8 @@ import React, { Component, PropTypes } from 'react';
 import { FormattedMessage } from 'react-intl';
 
 import HistoryStore from '@parity/shared/mobx/historyStore';
+import { Page } from '@parity/ui';
 
-import { Page } from '~/ui';
 import WebStore from '~/views/Web/store';
 
 // FIXME: Don't really want to import from ~/shell
diff --git a/js/src/views/Home/index.js b/js/src/views/Home/index.js
index ff381ab69..59099f547 100644
--- a/js/src/views/Home/index.js
+++ b/js/src/views/Home/index.js
@@ -22,12 +22,10 @@ import injectTapEventPlugin from 'react-tap-event-plugin';
 injectTapEventPlugin();
 
 import { initStore } from '@parity/shared/redux';
+import ContextProvider from '@parity/ui/ContextProvider';
+import muiTheme from '@parity/ui/Theme';
 
 import { api } from './parity';
-
-import ContextProvider from '~/ui/ContextProvider';
-import muiTheme from '~/ui/Theme';
-
 import Home from './home';
 
 const store = initStore(api, hashHistory);
diff --git a/js/src/views/Playground/index.js b/js/src/views/Playground/index.js
index 5b36151ab..dd8bb99da 100644
--- a/js/src/views/Playground/index.js
+++ b/js/src/views/Playground/index.js
@@ -22,12 +22,10 @@ import injectTapEventPlugin from 'react-tap-event-plugin';
 injectTapEventPlugin();
 
 import { initStore } from '@parity/shared/redux';
+import ContextProvider from '@parity/ui/ContextProvider';
+import muiTheme from '@parity/ui/Theme';
 
 import { api } from './parity';
-
-import ContextProvider from '~/ui/ContextProvider';
-import muiTheme from '~/ui/Theme';
-
 import Playground from './playground';
 
 const store = initStore(api, hashHistory);
diff --git a/js/src/views/Playground/playground.js b/js/src/views/Playground/playground.js
index c7b431643..678e535e4 100644
--- a/js/src/views/Playground/playground.js
+++ b/js/src/views/Playground/playground.js
@@ -17,11 +17,11 @@
 import { observer } from 'mobx-react';
 import React, { Component } from 'react';
 
-import AccountCard from '~/ui/AccountCard/accountCard.example';
-import CurrencySymbol from '~/ui/CurrencySymbol/currencySymbol.example';
-import Portal from '~/ui/Portal/portal.example';
-import QrCode from '~/ui/QrCode/qrCode.example';
-import SectionList from '~/ui/SectionList/sectionList.example';
+import AccountCard from '@parity/ui/AccountCard/accountCard.example';
+import CurrencySymbol from '@parity/ui/CurrencySymbol/currencySymbol.example';
+import Portal from '@parity/ui/Portal/portal.example';
+import QrCode from '@parity/ui/QrCode/qrCode.example';
+import SectionList from '@parity/ui/SectionList/sectionList.example';
 
 import PlaygroundStore from './store';
 import styles from './playground.css';
diff --git a/js/src/views/Playground/store.spec.js b/js/src/views/Playground/store.spec.js
index 172d244fd..697842b5f 100644
--- a/js/src/views/Playground/store.spec.js
+++ b/js/src/views/Playground/store.spec.js
@@ -16,7 +16,7 @@
 
 import React from 'react';
 
-import QrCode from '~/ui/QrCode/qrCode.example';
+import QrCode from '@parity/ui/QrCode/qrCode.example';
 
 import PlaygroundStore from './store';
 
diff --git a/js/src/views/Settings/Background/background.js b/js/src/views/Settings/Background/background.js
index ffdc0dd9d..63d213004 100644
--- a/js/src/views/Settings/Background/background.js
+++ b/js/src/views/Settings/Background/background.js
@@ -20,10 +20,8 @@ import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 
 import { updateBackground } from '@parity/shared/redux/providers/settings/actions';
-
-import { Button, Container } from '~/ui';
-import ParityBackground from '~/ui/ParityBackground';
-import { RefreshIcon } from '~/ui/Icons';
+import { Button, Container, ParityBackground } from '@parity/ui';
+import { RefreshIcon } from '@parity/ui/Icons';
 
 import layout from '../layout.css';
 import styles from './background.css';
diff --git a/js/src/views/Settings/Node/node.js b/js/src/views/Settings/Node/node.js
index 61598a7cf..dd8e9604e 100644
--- a/js/src/views/Settings/Node/node.js
+++ b/js/src/views/Settings/Node/node.js
@@ -19,8 +19,8 @@ import { observer } from 'mobx-react';
 import React, { Component, PropTypes } from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import { Container, Dropdown, LanguageSelector } from '~/ui';
-import Features, { FeaturesStore, FEATURES } from '~/ui/Features';
+import { Container, Dropdown, LanguageSelector } from '@parity/ui';
+import Features, { FeaturesStore, FEATURES } from '@parity/ui/Features';
 
 import Store, { LOGLEVEL_OPTIONS } from './store';
 import layout from '../layout.css';
diff --git a/js/src/views/Settings/Proxy/proxy.js b/js/src/views/Settings/Proxy/proxy.js
index d5142e4a4..9259f4670 100644
--- a/js/src/views/Settings/Proxy/proxy.js
+++ b/js/src/views/Settings/Proxy/proxy.js
@@ -17,7 +17,7 @@
 import React, { Component, PropTypes } from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import { Container } from '~/ui';
+import { Container } from '@parity/ui';
 
 import layout from '../layout.css';
 import styles from './proxy.css';
diff --git a/js/src/views/Settings/Views/defaults.js b/js/src/views/Settings/Views/defaults.js
index e09983cea..9712fdf72 100644
--- a/js/src/views/Settings/Views/defaults.js
+++ b/js/src/views/Settings/Views/defaults.js
@@ -16,7 +16,7 @@
 
 import React from 'react';
 
-import { AppsIcon } from '~/ui/Icons';
+import { AppsIcon } from '@parity/ui/Icons';
 
 const defaultViews = {
   apps: {
diff --git a/js/src/views/Settings/Views/views.js b/js/src/views/Settings/Views/views.js
index 12df810be..dcd2febd1 100644
--- a/js/src/views/Settings/Views/views.js
+++ b/js/src/views/Settings/Views/views.js
@@ -20,8 +20,7 @@ import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 
 import { toggleView } from '@parity/shared/redux/providers/settings/actions';
-
-import { Checkbox, Container } from '~/ui';
+import { Checkbox, Container } from '@parity/ui';
 
 import layout from '../layout.css';
 import styles from './views.css';
diff --git a/js/src/views/Settings/index.js b/js/src/views/Settings/index.js
index da7027867..96fe7341f 100644
--- a/js/src/views/Settings/index.js
+++ b/js/src/views/Settings/index.js
@@ -22,9 +22,8 @@ import injectTapEventPlugin from 'react-tap-event-plugin';
 injectTapEventPlugin();
 
 import { initStore } from '@parity/shared/redux';
-
-import ContextProvider from '~/ui/ContextProvider';
-import muiTheme from '~/ui/Theme';
+import ContextProvider from '@parity/ui/ContextProvider';
+import muiTheme from '@parity/ui/Theme';
 
 import { api } from './parity';
 
diff --git a/js/src/views/Settings/settings.js b/js/src/views/Settings/settings.js
index 4912d8f48..ce0d66e4b 100644
--- a/js/src/views/Settings/settings.js
+++ b/js/src/views/Settings/settings.js
@@ -18,10 +18,10 @@ import React, { Component, PropTypes } from 'react';
 import { FormattedMessage } from 'react-intl';
 import { Menu } from 'semantic-ui-react';
 
-import imagesEthcoreBlock from '~/../assets/images/parity-logo-white-no-text.svg';
+import { Page } from '@parity/ui';
+import { BackgroundIcon, EthernetIcon, VisibleIcon } from '@parity/ui/Icons';
 
-import { Page } from '~/ui';
-import { BackgroundIcon, EthernetIcon, VisibleIcon } from '~/ui/Icons';
+import imagesEthcoreBlock from '~/../assets/images/parity-logo-white-no-text.svg';
 
 import styles from './settings.css';
 
diff --git a/js/src/views/Signer/RequestsPage/requestsPage.js b/js/src/views/Signer/RequestsPage/requestsPage.js
index 406526d06..0fd2b04f8 100644
--- a/js/src/views/Signer/RequestsPage/requestsPage.js
+++ b/js/src/views/Signer/RequestsPage/requestsPage.js
@@ -23,8 +23,7 @@ import { bindActionCreators } from 'redux';
 
 import { newError } from '@parity/shared/redux/actions';
 import { startConfirmRequest, startRejectRequest } from '@parity/shared/redux/providers/signerActions';
-
-import { Container, Page, TxList } from '~/ui';
+import { Container, Page, TxList } from '@parity/ui';
 
 import Store from '~/shell/Signer/store';
 import RequestPending from '~/shell/Signer/components/RequestPending';
diff --git a/js/src/views/Signer/index.js b/js/src/views/Signer/index.js
index 45c1ac775..66fdcaa7e 100644
--- a/js/src/views/Signer/index.js
+++ b/js/src/views/Signer/index.js
@@ -23,12 +23,11 @@ injectTapEventPlugin();
 
 import ContractInstances from '@parity/shared/contracts';
 import { initStore } from '@parity/shared/redux';
+import ContextProvider from '@parity/ui/ContextProvider';
+import muiTheme from '@parity/ui/Theme';
 
 import { api } from './parity';
 
-import ContextProvider from '~/ui/ContextProvider';
-import muiTheme from '~/ui/Theme';
-
 import Signer from './signer';
 
 ContractInstances.get(api);
diff --git a/js/src/views/Signer/signer.js b/js/src/views/Signer/signer.js
index 53a4f395e..34acfc469 100644
--- a/js/src/views/Signer/signer.js
+++ b/js/src/views/Signer/signer.js
@@ -17,7 +17,8 @@
 import React from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import { Actionbar } from '~/ui';
+import { Actionbar } from '@parity/ui';
+
 import RequestsPage from './RequestsPage';
 
 export default function Signer () {
diff --git a/js/src/views/Status/Debug/debug.js b/js/src/views/Status/Debug/debug.js
index 895b4f043..be9577dd8 100644
--- a/js/src/views/Status/Debug/debug.js
+++ b/js/src/views/Status/Debug/debug.js
@@ -18,8 +18,8 @@ import { observer } from 'mobx-react';
 import React, { Component, PropTypes } from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import { Container } from '~/ui';
-import { PauseIcon, PlayIcon, ReorderIcon, ReplayIcon } from '~/ui/Icons';
+import { Container } from '@parity/ui';
+import { PauseIcon, PlayIcon, ReorderIcon, ReplayIcon } from '@parity/ui/Icons';
 
 import Logs from './Logs';
 import Toggle from './Toggle';
diff --git a/js/src/views/Status/MiningSettings/miningSettings.js b/js/src/views/Status/MiningSettings/miningSettings.js
index 639e69efe..f48d34874 100644
--- a/js/src/views/Status/MiningSettings/miningSettings.js
+++ b/js/src/views/Status/MiningSettings/miningSettings.js
@@ -18,7 +18,7 @@ import formatNumber from 'format-number';
 import React, { Component, PropTypes } from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import { ContainerTitle, Input, TypedInput } from '~/ui';
+import { ContainerTitle, Input, TypedInput } from '@parity/ui';
 
 import { numberFromString } from './numberFromString';
 import { decodeExtraData } from './decodeExtraData';
diff --git a/js/src/views/Status/Node/node.js b/js/src/views/Status/Node/node.js
index 51eeae4df..84048d175 100644
--- a/js/src/views/Status/Node/node.js
+++ b/js/src/views/Status/Node/node.js
@@ -20,7 +20,7 @@ import React, { Component, PropTypes } from 'react';
 import { FormattedMessage } from 'react-intl';
 import { connect } from 'react-redux';
 
-import { Container, ContainerTitle, Input } from '~/ui';
+import { Container, ContainerTitle, Input } from '@parity/ui';
 
 import MiningSettings from '../MiningSettings';
 import StatusStore from './store';
diff --git a/js/src/views/Status/Peers/Peer/peer.js b/js/src/views/Status/Peers/Peer/peer.js
index c6d037662..8f3c981c5 100644
--- a/js/src/views/Status/Peers/Peer/peer.js
+++ b/js/src/views/Status/Peers/Peer/peer.js
@@ -16,7 +16,7 @@
 
 import React, { PropTypes } from 'react';
 
-import { ScrollableText, ShortenedHash } from '~/ui';
+import { ScrollableText, ShortenedHash } from '@parity/ui';
 
 import styles from '../peers.css';
 
diff --git a/js/src/views/Status/Peers/peers.js b/js/src/views/Status/Peers/peers.js
index 1c279b206..213eba461 100644
--- a/js/src/views/Status/Peers/peers.js
+++ b/js/src/views/Status/Peers/peers.js
@@ -18,7 +18,7 @@ import React, { PropTypes } from 'react';
 import { FormattedMessage } from 'react-intl';
 import { connect } from 'react-redux';
 
-import { Container } from '~/ui';
+import { Container } from '@parity/ui';
 
 import Peer from './Peer';
 
diff --git a/js/src/views/Status/index.js b/js/src/views/Status/index.js
index b82492d54..989184b7b 100644
--- a/js/src/views/Status/index.js
+++ b/js/src/views/Status/index.js
@@ -23,12 +23,10 @@ injectTapEventPlugin();
 
 import ContractInstances from '@parity/shared/contracts';
 import { initStore } from '@parity/shared/redux';
+import ContextProvider from '@parity/ui/ContextProvider';
+import muiTheme from '@parity/ui/Theme';
 
 import { api } from './parity';
-
-import ContextProvider from '~/ui/ContextProvider';
-import muiTheme from '~/ui/Theme';
-
 import Status from './status';
 
 ContractInstances.get(api);
diff --git a/js/src/views/Status/status.js b/js/src/views/Status/status.js
index a96a76f77..c0aa21193 100644
--- a/js/src/views/Status/status.js
+++ b/js/src/views/Status/status.js
@@ -17,7 +17,7 @@
 import React from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import { Page } from '~/ui';
+import { Page } from '@parity/ui';
 
 import Debug from './Debug';
 import Node from './Node';
diff --git a/js/src/views/Vaults/VaultAccounts/vaultAccounts.js b/js/src/views/Vaults/VaultAccounts/vaultAccounts.js
index 08ca5ad40..e96519090 100644
--- a/js/src/views/Vaults/VaultAccounts/vaultAccounts.js
+++ b/js/src/views/Vaults/VaultAccounts/vaultAccounts.js
@@ -22,9 +22,8 @@ import { bindActionCreators } from 'redux';
 
 import { newError } from '@parity/shared/redux/actions';
 import { personalAccountsInfo } from '@parity/shared/redux/providers/personalActions';
-
-import { AccountCard, Button, Portal, SelectionList } from '~/ui';
-import { CancelIcon, CheckIcon } from '~/ui/Icons';
+import { AccountCard, Button, Portal, SelectionList } from '@parity/ui';
+import { CancelIcon, CheckIcon } from '@parity/ui/Icons';
 
 @observer
 class VaultAccounts extends Component {
diff --git a/js/src/views/Vaults/VaultCreate/vaultCreate.js b/js/src/views/Vaults/VaultCreate/vaultCreate.js
index b95aa354e..8b644bb91 100644
--- a/js/src/views/Vaults/VaultCreate/vaultCreate.js
+++ b/js/src/views/Vaults/VaultCreate/vaultCreate.js
@@ -21,10 +21,9 @@ import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 
 import { newError } from '@parity/shared/redux/actions';
-
-import { Button, Input, Portal } from '~/ui';
-import PasswordStrength from '~/ui/Form/PasswordStrength';
-import { CheckIcon, CloseIcon } from '~/ui/Icons';
+import { Button, Input, Portal } from '@parity/ui';
+import PasswordStrength from '@parity/ui/Form/PasswordStrength';
+import { CheckIcon, CloseIcon } from '@parity/ui/Icons';
 
 import styles from './vaultCreate.css';
 
diff --git a/js/src/views/Vaults/VaultLock/vaultLock.js b/js/src/views/Vaults/VaultLock/vaultLock.js
index e809e2d45..297a78c03 100644
--- a/js/src/views/Vaults/VaultLock/vaultLock.js
+++ b/js/src/views/Vaults/VaultLock/vaultLock.js
@@ -21,8 +21,7 @@ import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 
 import { newError } from '@parity/shared/redux/actions';
-
-import { ConfirmDialog, VaultCard } from '~/ui';
+import { ConfirmDialog, VaultCard } from '@parity/ui';
 
 import styles from '../VaultUnlock/vaultUnlock.css';
 
diff --git a/js/src/views/Vaults/VaultMeta/vaultMeta.js b/js/src/views/Vaults/VaultMeta/vaultMeta.js
index b41374f2d..0f3cc50be 100644
--- a/js/src/views/Vaults/VaultMeta/vaultMeta.js
+++ b/js/src/views/Vaults/VaultMeta/vaultMeta.js
@@ -21,10 +21,9 @@ import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 
 import { newError } from '@parity/shared/redux/actions';
-
-import { Button, Checkbox, Form, Input, Portal, VaultCard } from '~/ui';
-import PasswordStrength from '~/ui/Form/PasswordStrength';
-import { CheckIcon, CloseIcon } from '~/ui/Icons';
+import { Button, Checkbox, Form, Input, Portal, VaultCard } from '@parity/ui';
+import PasswordStrength from '@parity/ui/Form/PasswordStrength';
+import { CheckIcon, CloseIcon } from '@parity/ui/Icons';
 
 import styles from '../VaultCreate/vaultCreate.css';
 
diff --git a/js/src/views/Vaults/VaultUnlock/vaultUnlock.js b/js/src/views/Vaults/VaultUnlock/vaultUnlock.js
index ecc56a6c0..ba7f51a78 100644
--- a/js/src/views/Vaults/VaultUnlock/vaultUnlock.js
+++ b/js/src/views/Vaults/VaultUnlock/vaultUnlock.js
@@ -21,8 +21,7 @@ import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 
 import { newError } from '@parity/shared/redux/actions';
-
-import { ConfirmDialog, Form, Input, VaultCard } from '~/ui';
+import { ConfirmDialog, Form, Input, VaultCard } from '@parity/ui';
 
 import styles from './vaultUnlock.css';
 
diff --git a/js/src/views/Vaults/index.js b/js/src/views/Vaults/index.js
index a0602cf40..787e08b84 100644
--- a/js/src/views/Vaults/index.js
+++ b/js/src/views/Vaults/index.js
@@ -23,12 +23,11 @@ injectTapEventPlugin();
 
 import ContractInstances from '@parity/shared/contracts';
 import { initStore } from '@parity/shared/redux';
+import ContextProvider from '@parity/ui/ContextProvider';
+import muiTheme from '@parity/ui/Theme';
 
 import { api } from './parity';
 
-import ContextProvider from '~/ui/ContextProvider';
-import muiTheme from '~/ui/Theme';
-
 import Vaults from './vaults';
 
 ContractInstances.get(api);
diff --git a/js/src/views/Vaults/vaults.js b/js/src/views/Vaults/vaults.js
index a66db09ff..2011c5c23 100644
--- a/js/src/views/Vaults/vaults.js
+++ b/js/src/views/Vaults/vaults.js
@@ -19,8 +19,8 @@ import React, { Component, PropTypes } from 'react';
 import { FormattedMessage } from 'react-intl';
 import { connect } from 'react-redux';
 
-import { Button, Container, Page, SectionList, VaultCard } from '~/ui';
-import { AccountsIcon, AddIcon, EditIcon, LockedIcon, UnlockedIcon } from '~/ui/Icons';
+import { Button, Container, Page, SectionList, VaultCard } from '@parity/ui';
+import { AccountsIcon, AddIcon, EditIcon, LockedIcon, UnlockedIcon } from '@parity/ui/Icons';
 
 import VaultAccounts from './VaultAccounts';
 import VaultCreate from './VaultCreate';
diff --git a/js/src/views/Wallet/Confirmations/confirmations.js b/js/src/views/Wallet/Confirmations/confirmations.js
index 2724de69d..b12afd89f 100644
--- a/js/src/views/Wallet/Confirmations/confirmations.js
+++ b/js/src/views/Wallet/Confirmations/confirmations.js
@@ -23,12 +23,11 @@ import { bindActionCreators } from 'redux';
 
 import { bytesToHex } from '@parity/api/util/format';
 import { confirmOperation, revokeOperation } from '@parity/shared/redux/providers/walletActions';
-
-import { Button, Container, InputAddress, IdentityIcon, Progress } from '~/ui';
-import TxRow from '~/ui/TxList/TxRow';
+import { Button, Container, InputAddress, IdentityIcon, Progress } from '@parity/ui';
+import TxRow from '@parity/ui/TxList/TxRow';
 
 import styles from '../wallet.css';
-import txListStyles from '~/ui/TxList/txList.css';
+import txListStyles from '@parity/ui/TxList/txList.css';
 
 class WalletConfirmations extends Component {
   static contextTypes = {
@@ -54,12 +53,20 @@ class WalletConfirmations extends Component {
   render () {
     return (
       <div>
-        <Container title='Pending Confirmations'>
+        <Container
+          title={
+            <FormattedMessage
+              id='wallet.confirmations.title'
+              defaultMessage='Pending Confirmations'
+            />
+          }
+        >
           { this.renderConfirmations() }
         </Container>
       </div>
     );
   }
+
   renderConfirmations () {
     const { confirmations, ...others } = this.props;
     const realConfirmations = confirmations && confirmations
diff --git a/js/src/views/Wallet/Details/details.js b/js/src/views/Wallet/Details/details.js
index 37e3e9395..4d2a790ad 100644
--- a/js/src/views/Wallet/Details/details.js
+++ b/js/src/views/Wallet/Details/details.js
@@ -17,7 +17,7 @@
 import React, { Component, PropTypes } from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import { Container, InputAddress } from '~/ui';
+import { Container, InputAddress } from '@parity/ui';
 
 import styles from '../wallet.css';
 
diff --git a/js/src/views/Wallet/Transactions/transactions.js b/js/src/views/Wallet/Transactions/transactions.js
index 173caab0e..1f885f608 100644
--- a/js/src/views/Wallet/Transactions/transactions.js
+++ b/js/src/views/Wallet/Transactions/transactions.js
@@ -18,11 +18,9 @@ import React, { Component, PropTypes } from 'react';
 import { FormattedMessage } from 'react-intl';
 
 import { bytesToHex } from '@parity/api/util/format';
-
-import { Container } from '~/ui';
-import TxRow from '~/ui/TxList/TxRow';
-
-import txListStyles from '~/ui/TxList/txList.css';
+import { Container } from '@parity/ui';
+import TxRow from '@parity/ui/TxList/TxRow';
+import txListStyles from '@parity/ui/TxList/txList.css';
 
 export default class WalletTransactions extends Component {
   static propTypes = {
diff --git a/js/src/views/Wallet/WalletSettings/walletSettings.js b/js/src/views/Wallet/WalletSettings/walletSettings.js
index 2bf7ac3b5..41b30f0e5 100644
--- a/js/src/views/Wallet/WalletSettings/walletSettings.js
+++ b/js/src/views/Wallet/WalletSettings/walletSettings.js
@@ -21,9 +21,8 @@ import { observer } from 'mobx-react';
 import { pick } from 'lodash';
 
 import { fromWei } from '@parity/api/util/wei';
-
-import { AddressSelect, Button, Form, TypedInput, Input, InputAddress, Portal } from '~/ui';
-import { CancelIcon, NextIcon } from '~/ui/Icons';
+import { AddressSelect, Button, Form, TypedInput, Input, InputAddress, Portal } from '@parity/ui';
+import { CancelIcon, NextIcon } from '@parity/ui/Icons';
 
 import WalletSettingsStore from './walletSettingsStore.js';
 import styles from './walletSettings.css';
diff --git a/js/src/views/Wallet/index.js b/js/src/views/Wallet/index.js
index 85010ac32..bb0a2c6e8 100644
--- a/js/src/views/Wallet/index.js
+++ b/js/src/views/Wallet/index.js
@@ -23,12 +23,10 @@ injectTapEventPlugin();
 
 import ContractInstances from '@parity/shared/contracts';
 import { initStore } from '@parity/shared/redux';
+import ContextProvider from '@parity/ui/ContextProvider';
+import muiTheme from '@parity/ui/Theme';
 
 import { api } from './parity';
-
-import ContextProvider from '~/ui/ContextProvider';
-import muiTheme from '~/ui/Theme';
-
 import Wallet from './wallet';
 
 ContractInstances.get(api);
diff --git a/js/src/views/Wallet/wallet.js b/js/src/views/Wallet/wallet.js
index 490b4faa6..efebfc350 100644
--- a/js/src/views/Wallet/wallet.js
+++ b/js/src/views/Wallet/wallet.js
@@ -23,9 +23,8 @@ import moment from 'moment';
 import HistoryStore from '@parity/shared/mobx/historyStore';
 import { setVisibleAccounts } from '@parity/shared/redux/providers/personalActions';
 import { nullableProptype } from '@parity/shared/util/proptypes';
-
-import { Actionbar, Button, Page, Loading } from '~/ui';
-import { DeleteIcon, EditIcon, SendIcon, SettingsIcon } from '~/ui/Icons';
+import { Actionbar, Button, Page, Loading } from '@parity/ui';
+import { DeleteIcon, EditIcon, SendIcon, SettingsIcon } from '@parity/ui/Icons';
 
 import EditMeta from '../Account/EditMeta';
 import Transfer from '../Account/Transfer';
diff --git a/js/src/views/Web/AddressBar/addressBar.js b/js/src/views/Web/AddressBar/addressBar.js
index 384e5bf53..255b46972 100644
--- a/js/src/views/Web/AddressBar/addressBar.js
+++ b/js/src/views/Web/AddressBar/addressBar.js
@@ -17,8 +17,8 @@
 import { observer } from 'mobx-react';
 import React, { Component, PropTypes } from 'react';
 
-import { Button, DappUrlInput } from '~/ui';
-import { CloseIcon, RefreshIcon, GotoIcon } from '~/ui/Icons';
+import { Button, DappUrlInput } from '@parity/ui';
+import { CloseIcon, RefreshIcon, GotoIcon } from '@parity/ui/Icons';
 
 @observer
 export default class AddressBar extends Component {
diff --git a/js/src/views/Web/index.js b/js/src/views/Web/index.js
index fd894e6d0..610791642 100644
--- a/js/src/views/Web/index.js
+++ b/js/src/views/Web/index.js
@@ -22,12 +22,10 @@ import injectTapEventPlugin from 'react-tap-event-plugin';
 injectTapEventPlugin();
 
 import { initStore } from '@parity/shared/redux';
+import ContextProvider from '@parity/ui/ContextProvider';
+import muiTheme from '@parity/ui/Theme';
 
 import { api } from './parity';
-
-import ContextProvider from '~/ui/ContextProvider';
-import muiTheme from '~/ui/Theme';
-
 import Web from './web';
 
 const store = initStore(api, hashHistory);