diff --git a/package.json b/package.json
index 5a133364e..1c8bf63da 100644
--- a/package.json
+++ b/package.json
@@ -145,6 +145,7 @@
     "uniqid": "^4.1.1",
     "uport-connect": "^0.6.0",
     "web3": "^0.20.1",
+    "web3-eth-accounts": "^1.0.0-beta.34",
     "web3-provider-engine": "^14.0.3",
     "webstomp-client": "^1.2.0"
   },
diff --git a/packages/login-ui/components/AccountSelector/AccountSelector.js b/packages/login-ui/components/AccountSelector/AccountSelector.js
index 1df306904..3fdbbfe6d 100644
--- a/packages/login-ui/components/AccountSelector/AccountSelector.js
+++ b/packages/login-ui/components/AccountSelector/AccountSelector.js
@@ -3,86 +3,109 @@
  * Licensed under the AGPL Version 3 license.
  */
 
-import networkService from '@chronobank/login/network/NetworkService'
-import { addError } from '@chronobank/login/redux/network/actions'
-import { CircularProgress, MenuItem, SelectField } from 'material-ui'
 import PropTypes from 'prop-types'
-import React, { PureComponent } from 'react'
+import { MuiThemeProvider } from 'material-ui'
 import { connect } from 'react-redux'
-import { Translate } from 'react-redux-i18n'
-import styles from '../../components/stylesLoginPage'
+import React, { PureComponent } from 'react'
+import { Link } from 'react-router'
+import { UserRow, Button } from 'components'
+import { navigateToSelectImportMethod, onWalletSelect } from '@chronobank/login/redux/network/actions'
+import {
+  WalletEntryModel,
+} from 'models/persistAccount'
+
+import arrow from 'assets/img/icons/prev-white.svg'
 import './AccountSelector.scss'
-import { Button } from '../../settings'
 
-const mapStateToProps = (state) => ({
-  accounts: state.get('network').accounts,
-  selectedAccount: state.get('network').selectedAccount,
-  isLoading: state.get('network').isLoading,
-})
+function mapDispatchToProps (dispatch) {
+  return {
+    navigateToSelectImportMethod: () => dispatch(navigateToSelectImportMethod()),
+    onWalletSelect: (wallet) => dispatch(onWalletSelect(wallet)),
+  }
+}
 
-const mapDispatchToProps = (dispatch) => ({
-  loadAccounts: () => networkService.loadAccounts(),
-  selectAccount: (value) => networkService.selectAccount(value),
-  addError: (error) => dispatch(addError(error)),
-})
+function mapStateToProps (state) {
+  return {
+    walletsList: state.get('persistAccount').walletsList.map(
+      (wallet) => new WalletEntryModel({...wallet})
+    ),
+  }
+}
 
 @connect(mapStateToProps, mapDispatchToProps)
-class AccountSelector extends PureComponent {
+export default class SelectWalletPage extends PureComponent {
   static propTypes = {
-    onSelectAccount: PropTypes.func,
-    loadAccounts: PropTypes.func,
-    selectAccount: PropTypes.func,
-    addError: PropTypes.func,
-    accounts: PropTypes.array,
-    selectedAccount: PropTypes.string,
-    isLoading: PropTypes.bool,
+    onWalletSelect: PropTypes.func,
+    walletsList: PropTypes.arrayOf(
+      PropTypes.instanceOf(WalletEntryModel)
+    ),
+    navigateToSelectImportMethod: PropTypes.func,
   }
 
-  componentWillMount () {
-    this.props.loadAccounts().then(() => {
-    }).catch((e) => {
-      this.props.selectAccount(null)
-      this.props.addError(e.message)
-    })
+  static defaultProps = {
+    onWalletSelect: () => {},
+    walletsList: [],
   }
 
-  handleSelect = () => {
-    this.props.onSelectAccount(this.props.selectedAccount)
-  }
+  renderWalletsList (){
+    const { onWalletSelect, walletsList } = this.props
+
+    if (!walletsList || !walletsList.length){
+      return (
+        <div styleName='empty-list'>
+          Sorry, there are no accounts to display
+        </div>
+      )
+    }
 
-  handleChange = (event, index, value) => {
-    this.props.selectAccount(value)
+    return (
+      <div styleName='wallets-list'>
+        {
+          walletsList ? walletsList.map((w, i) => (
+            <UserRow
+              key={i}
+              title={w.name}
+              actionIcon={arrow}
+              reverseIcon={true}
+              onClick={() => onWalletSelect(w)}
+            />
+          )) : null
+        }
+      </div>
+    )
   }
 
   render () {
-    const { accounts, selectedAccount, isLoading } = this.props
     return (
-      <div>
-        <SelectField
-          floatingLabelText={<Translate value='AccountSelector.address' />}
-          value={selectedAccount}
-          onChange={this.handleChange}
-          fullWidth
-          {...styles.selectField}
-        >
-          {accounts && accounts.map((a) => <MenuItem key={a} value={a} primaryText={a} />)}
-        </SelectField>
-        <div styleName='actions'>
-          <div styleName='action'>
-            <Button
-              label={isLoading ? <CircularProgress
-                style={{ verticalAlign: 'middle', marginTop: -2 }}
-                size={24}
-                thickness={1.5}
-              /> : <Translate value='AccountSelector.selectAddress' />}
-              onClick={this.handleSelect}
-              disabled={!selectedAccount || isLoading}
-            />
+      <MuiThemeProvider>
+        <div styleName='wrapper'>
+
+          <div styleName='page-title'>My Accounts</div>
+
+          <div styleName='description'>
+            Browse account stored on your device.
+            <br />
+            If you have created an account before you may use Add an Existing Account option below.
           </div>
+
+          <div styleName='content'>
+            { this.renderWalletsList() }
+
+            <div styleName='actions'>
+              <Button
+                styleName='button'
+                buttonType='login'
+                onClick={this.props.navigateToSelectImportMethod}
+              >
+                Add an existing account
+              </Button>
+              or <br />
+              <Link to='/login/create-account' href styleName='link'>Create New Account</Link>
+            </div>
+          </div>
+
         </div>
-      </div>
+      </MuiThemeProvider>
     )
   }
 }
-
-export default AccountSelector
diff --git a/packages/login-ui/components/AccountSelector/AccountSelector.scss b/packages/login-ui/components/AccountSelector/AccountSelector.scss
index 79f684d13..168f3cf01 100644
--- a/packages/login-ui/components/AccountSelector/AccountSelector.scss
+++ b/packages/login-ui/components/AccountSelector/AccountSelector.scss
@@ -6,11 +6,88 @@
 @import "~styles/partials/variables";
 @import "~styles/partials/mixins";
 
+.wrapper {
+  margin:0 auto;
+
+  @include xs-only {
+    padding: 0 20px;
+  }
+}
+
+.content {
+  margin: 0 auto;
+  max-width: 380px;
+}
+
+.page-title {
+  color: $color-white;
+  font-weight: 700;
+  font-size: 30px;
+  line-height: 42px;
+  margin-bottom: 40px;
+  text-align: center;
+}
+
+.wallets-list {
+  border-top: 1px solid $color-purpule;
+  margin-bottom: 45px;
+  color: #fff;
+}
+
+.empty-list {
+  border-top: 1px solid $color-purpule;
+  border-bottom: 1px solid $color-purpule;
+  padding: 18px 0;
+  margin-bottom: 30px;
+  text-align: center;
+  color: #fff;
+  width: 380px;
+
+  @include xs-only {
+    width: 100%;
+  }
+}
+
 .actions {
-  margin-top: 40px;
-  display: flex;
-  justify-content: flex-end;
+  text-align: center;
+  margin-bottom: 45px;
+  line-height: 30px;
+  color: #fff;
+}
+
+.link {
+  color: $border-color;
+  margin:  0 auto 45px;
+  text-decoration: none;
+  font: 700 16px $font-proxima;
+
+  &:hover {
+    color: #FFB54E;
+  }
+
+  @include md-only {
+    margin: 0 0 10px;
+  }
 }
 
-.action {
-}
\ No newline at end of file
+.button {
+  text-align: center;
+  margin-bottom: 22px;
+
+  button {
+    padding: 0 30px;
+  }
+}
+
+.actionIcon {
+  transform: matrix(-1,0,0,-1,0,0);
+}
+
+.description {
+  font-weight: 400;
+  color: $additionalData-color-1;
+  font-size: 16px;
+  line-height: 22px;
+  margin-bottom: 40px;
+  text-align: center;
+}
diff --git a/packages/login-ui/components/CommonNetworkSelector/CommonNetworkSelector.js b/packages/login-ui/components/CommonNetworkSelector/CommonNetworkSelector.js
new file mode 100644
index 000000000..c8f759da8
--- /dev/null
+++ b/packages/login-ui/components/CommonNetworkSelector/CommonNetworkSelector.js
@@ -0,0 +1,158 @@
+/**
+ * Copyright 2017–2018, LaborX PTY
+ * Licensed under the AGPL Version 3 license.
+ */
+
+import networkService from '@chronobank/login/network/NetworkService'
+import web3Provider from '@chronobank/login/network/Web3Provider'
+import web3Utils from '@chronobank/login/network/Web3Utils'
+import { clearErrors, DUCK_NETWORK } from '@chronobank/login/redux/network/actions'
+import {
+  getNetworksWithProviders,
+  getNetworkWithProviderNames,
+  getProviderById,
+} from '@chronobank/login/network/settings'
+import { Popover } from 'material-ui'
+import PropTypes from 'prop-types'
+import React, { PureComponent } from 'react'
+import { connect } from 'react-redux'
+import { Button } from 'components'
+import classnames from 'classnames'
+
+import { Translate } from 'react-redux-i18n'
+import Web3 from 'web3'
+import './CommonNetworkSelector.scss'
+
+const mapStateToProps = (state) => {
+  const network = state.get(DUCK_NETWORK)
+  return {
+    providersList: getNetworksWithProviders(network.isLocal),
+    networkProviderName: getNetworkWithProviderNames(network.selectedProviderId, network.selectedNetworkId, network.isLocal),
+    isLocal: network.isLocal,
+    selectedNetworkId: network.selectedNetworkId,
+    selectedProvider: getProviderById(network.selectedProviderId),
+    networks: network.networks,
+    isLoading: network.isLoading,
+  }
+}
+
+const mapDispatchToProps = (dispatch) => ({
+  selectProviderWithNetwork: (networkId, providerId) => {
+    networkService.selectProvider(providerId)
+    networkService.selectNetwork(networkId)
+  },
+  selectNetwork: (network) => networkService.selectNetwork(network),
+  clearErrors: () => dispatch(clearErrors()),
+  getProviderURL: () => networkService.getProviderURL(),
+})
+
+@connect(mapStateToProps, mapDispatchToProps)
+export default class CommonNetworkSelector extends PureComponent {
+  static propTypes = {
+    clearErrors: PropTypes.func,
+    selectNetwork: PropTypes.func,
+    selectProviderWithNetwork: PropTypes.func,
+    getProviderURL: PropTypes.func,
+    selectedNetworkId: PropTypes.number,
+    networks: PropTypes.arrayOf(PropTypes.shape({
+      id: PropTypes.number,
+      protocol: PropTypes.string,
+      name: PropTypes.string,
+      scanner: PropTypes.arrayOf(PropTypes.string),
+      bitcoin: PropTypes.string,
+      nem: PropTypes.string,
+    })),
+    onSelect: PropTypes.func,
+    isLoading: PropTypes.bool,
+  }
+
+  constructor (props) {
+    super (props)
+
+    this.state = {
+      open: false,
+    }
+  }
+
+  componentDidMount(){
+    networkService.autoSelect()
+  }
+
+  handleClick = (data) => {
+    this.props.clearErrors()
+    this.props.selectProviderWithNetwork(data.network.id, data.provider.id)
+    this.resolveNetwork()
+  }
+
+  resolveNetwork = () => {
+    const web3 = new Web3()
+    web3Provider.reinit(web3, web3Utils.createStatusEngine(this.props.getProviderURL()))
+    web3Provider.resolve()
+  }
+
+  handleClickButton = (event) => {
+    // This prevents ghost click.
+    event.preventDefault()
+
+    this.setState({
+      open: true,
+      anchorEl: event.currentTarget,
+    })
+  }
+
+  getFullNetworkName(item){
+    return `${item.provider.name} - ${item.network.name}`
+  }
+
+  handleRequestClose = () => {
+    this.setState({
+      open: false,
+    })
+  }
+
+  renderMenuItem(item, i){
+    const { selectedNetworkId, selectedProvider } = this.props
+    const checked = item.provider.id === selectedProvider.id && item.network.id === selectedNetworkId
+
+    return (
+      <li
+        styleName={classnames({providerItem: true, providerItemActive: checked })}
+        onClick={() => this.handleClick(item)}
+        key={i}
+      >
+        {this.getFullNetworkName(item)}
+      </li>
+    )
+  }
+
+  render () {
+    const { selectedNetworkId, selectedProvider, networks, isLoading, networkProviderName, providersList } = this.props
+
+    return (
+      <div styleName='root'>
+        <Button
+          styleName='langButton'
+          onClick={this.handleClickButton}
+        >
+          { selectedProvider && selectedProvider.name }
+        </Button>
+
+        <Popover
+          open={this.state.open}
+          anchorEl={this.state.anchorEl}
+          anchorOrigin={{ horizontal: 'right', vertical: 'bottom' }}
+          targetOrigin={{ horizontal: 'right', vertical: 'top' }}
+          onRequestClose={this.handleRequestClose}
+          style={{
+            background: 'transparent'
+          }}
+        >
+          <ul styleName='providersList'>
+            {providersList.map((item, i) => this.renderMenuItem(item, i))}
+          </ul>
+        </Popover>
+      </div>
+    )
+  }
+}
+
diff --git a/packages/login-ui/components/CommonNetworkSelector/CommonNetworkSelector.scss b/packages/login-ui/components/CommonNetworkSelector/CommonNetworkSelector.scss
new file mode 100644
index 000000000..7fc678f27
--- /dev/null
+++ b/packages/login-ui/components/CommonNetworkSelector/CommonNetworkSelector.scss
@@ -0,0 +1,48 @@
+/**
+ * Copyright 2017–2018, LaborX PTY
+ * Licensed under the AGPL Version 3 license.
+ */
+@import "~styles/partials/mixins";
+@import "~styles/partials/variables";
+
+.providersList {
+  border-radius: 20px;
+  border-top: 3px solid #E2A864;
+  overflow: hidden;
+  background: #fff;
+  margin-top: 10px;
+
+  @include xs-only {
+    width: 100%;
+    top: 10px;
+  }
+}
+.providerItem {
+  padding: 15px 20px;
+  font-size: 14px;
+  font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
+  cursor: pointer;
+
+  &:hover, &.providerItemActive {
+    background: #F2F2F2;
+  }
+}
+
+.root {
+
+}
+
+.langButton {
+  button {
+    color: #5DB3ED;
+    border:1px solid #5DB3ED;
+    background: transparent;
+    font-size: 14px;
+    text-transform: none;
+
+    &:hover {
+      color:#fff;
+      border-color: transparent;
+    }
+  }
+}
diff --git a/packages/login-ui/components/ConfirmMnemonic/ConfirmMnemonic.js b/packages/login-ui/components/ConfirmMnemonic/ConfirmMnemonic.js
new file mode 100644
index 000000000..4e9330cc3
--- /dev/null
+++ b/packages/login-ui/components/ConfirmMnemonic/ConfirmMnemonic.js
@@ -0,0 +1,183 @@
+/**
+ * Copyright 2017–2018, LaborX PTY
+ * Licensed under the AGPL Version 3 license.
+ */
+
+import PropTypes from 'prop-types'
+import classnames from 'classnames'
+import { connect } from 'react-redux'
+import { push } from 'react-router-redux'
+import { MuiThemeProvider } from 'material-ui'
+import { reduxForm, Field } from 'redux-form/immutable'
+import React, { Component } from 'react'
+import { Link } from 'react-router'
+import { Button } from 'components'
+import {
+  initConfirmMnemonicPage,
+  navigateToConfirmMnemonicPage,
+  onSubmitConfirmMnemonic,
+  onSubmitConfirmMnemonicSuccess,
+  onSubmitConfirmMnemonicFail,
+} from '@chronobank/login/redux/network/actions'
+
+import './ConfirmMnemonic.scss'
+
+export const FORM_CONFIRM_MNEMONIC = 'ConfirmMnemonicForm'
+
+function mapStateToProps (state) {
+
+  return {
+    mnemonic: state.get('network').newAccountMnemonic,
+  }
+}
+
+function mapDispatchToProps (dispatch) {
+  return {
+    navigateToConfirmPage: () => dispatch(navigateToConfirmMnemonicPage()),
+    initConfirmMnemonicPage: () => dispatch(initConfirmMnemonicPage()),
+    onSubmit: (values) => {
+      const confirmMnemonic = values.get('mnemonic')
+
+      dispatch(onSubmitConfirmMnemonic(confirmMnemonic))
+    },
+    onSubmitSuccess: () => dispatch(onSubmitConfirmMnemonicSuccess()),
+    onSubmitFail: (errors, dispatch, submitErrors) => dispatch(onSubmitConfirmMnemonicFail(errors, dispatch, submitErrors)),
+  }
+}
+
+class ConfirmMnemonicPage extends Component {
+  static propTypes = {
+    mnemonic: PropTypes.string,
+    initConfirmMnemonicPage: PropTypes.func,
+  }
+
+  static defaultProps = {
+    mnemonic: '',
+  }
+
+  constructor (props){
+    super(props)
+
+    const wordsArray = props.mnemonic ?
+      props.mnemonic.split(' ').map((word, index) => {
+        return { index, word }
+      }) : []
+
+    this.state = {
+      confirmPhrase: [],
+      currentWordsArray: wordsArray.sort((a,b) => a.word < b.word),
+    }
+  }
+
+  componentDidMount(){
+    this.props.initConfirmMnemonicPage()
+  }
+
+  getCurrentMnemonic (){
+    return this.state.confirmPhrase.map((item) => item.word).join(' ')
+  }
+
+  getWordsButtons (){
+    return this.state.currentWordsArray.map((item, index) => {
+      const wordSelected = this.state.confirmPhrase.includes(item)
+
+      return (
+        <Button
+          key={index}
+          onClick={this.onClickWord.bind(this, item)}
+          styleName={classnames('word')}
+          disabled={wordSelected}
+        >
+          { item.word }
+        </Button>
+      )}
+    )
+  }
+
+  onClickWord (word, e){
+    const { dispatch, change } = this.props
+
+    if (!this.state.confirmPhrase.includes(word)) {
+      this.setState(
+        { confirmPhrase: this.state.confirmPhrase.concat(word) },
+        () => change('mnemonic', this.getCurrentMnemonic())
+      )
+    }
+  }
+
+  clearMnemonic (){
+    const { dispatch, change } = this.props
+
+    this.setState(
+      { confirmPhrase: [] },
+      () => change('mnemonic', this.getCurrentMnemonic())
+    )
+  }
+
+  clearLastWord (){
+    const { dispatch, change } = this.props
+
+    this.setState(
+      { confirmPhrase: this.state.confirmPhrase.slice(0, -1) },
+      () => change('mnemonic', this.getCurrentMnemonic())
+    )
+  }
+
+  render () {
+    const { handleSubmit, error } = this.props
+    console.log('confirm mnemonic page', this.props)
+
+    return (
+      <MuiThemeProvider>
+        <form styleName='form' name={FORM_CONFIRM_MNEMONIC} onSubmit={handleSubmit}>
+          <div>
+            <div styleName='page-title'>Confirm back-up phrase</div>
+
+            <p styleName='description'>Click on back-up phrase words in the correct order.</p>
+
+            <div styleName='passPhraseWrapper'>
+              <div styleName='passPhrase'>{ this.getCurrentMnemonic() }</div>
+              <Field
+                component='input'
+                type='hidden'
+                name='mnemonic'
+                readOnly
+              />
+
+            </div>
+
+            <div styleName={classnames({ error: true,  visible: error })}>
+              {error}
+            </div>
+
+            <div styleName='wordsBlock'>
+              { this.getWordsButtons() }
+            </div>
+
+            <div styleName='controlsBlock'>
+              <div styleName='control' onClick={this.clearMnemonic.bind(this)}>Start Over</div>
+              <div styleName='control' onClick={this.clearLastWord.bind(this)}>Undo</div>
+            </div>
+
+            <div styleName='actions'>
+              <Button styleName='submit' type='submit' buttonType='login'>
+                Done
+              </Button>
+
+              <Link to='/login/mnemonic' href styleName='link'>Back</Link>
+            </div>
+
+            <div styleName='progressBlock'>
+              <div styleName='progressPoint' />
+              <div styleName='progressPoint' />
+              <div styleName='progressPoint progressPointInactive' />
+            </div>
+          </div>
+        </form>
+      </MuiThemeProvider>
+    )
+  }
+}
+
+const form = reduxForm({ form: FORM_CONFIRM_MNEMONIC })(ConfirmMnemonicPage)
+export default connect(mapStateToProps, mapDispatchToProps)(form)
diff --git a/packages/login-ui/components/ConfirmMnemonic/ConfirmMnemonic.scss b/packages/login-ui/components/ConfirmMnemonic/ConfirmMnemonic.scss
new file mode 100644
index 000000000..50acb912b
--- /dev/null
+++ b/packages/login-ui/components/ConfirmMnemonic/ConfirmMnemonic.scss
@@ -0,0 +1,216 @@
+/**
+ * Copyright 2017–2018, LaborX PTY
+ * Licensed under the AGPL Version 3 license.
+ */
+
+@import "~styles/partials/variables";
+@import "~styles/partials/mixins";
+
+
+.page-title {
+  font-size: 30px;
+  margin-bottom: 10px;
+  font-weight: 700;
+}
+
+.description {
+  margin-bottom: 30px;
+  color: $additionalData-color-1;
+
+}
+
+.passPhraseWrapper {
+  position: relative;
+  margin-bottom: 20px;
+  background: $background-color-1;
+  min-height: 100px;
+  border-radius: 2px;
+  padding: 20px 45px 20px 30px;
+}
+
+.passPhrase {
+  font-size: 16px;
+  font-weight: 700;
+  line-height: 24px;
+  color: $button-color-2;
+  text-align: left;
+  min-height: 46px;
+  width: 100%;
+
+  @include md-only {
+    min-height: 70px;
+    color: $synced-color;
+  }
+}
+
+.wordsBlock {
+  display: flex;
+  justify-content: space-between;
+  flex-wrap: wrap;
+}
+
+.word {
+  width: 23%;
+  margin-bottom: 10px;
+
+  button {
+    white-space: nowrap;
+    width: 100%;
+    cursor: pointer;
+    user-select: none;
+    color: #FFFFFF;
+    background-color: #614DBA;
+    text-transform: lowercase;
+    line-height: 62px;
+    border-radius: 2px;
+    font-size: 16px;
+    font-weight: 700;
+    padding: 12px 0;
+  }
+
+  &:hover {
+    background-color: $button-color-2;
+    color: $background-color-1;
+  }
+
+  @include md-only {
+    width: 31%;
+  }
+}
+
+.submitButton {
+  background: #00A0D2;
+  font-size: 14px;
+  font-weight: 500;
+  color: #fff;
+  border-radius: 21px;
+  cursor: pointer;
+  line-height: 40px;
+  height: 40px;
+  min-width: 150px;
+  border: none;
+  margin-bottom: 40px;
+  padding: 0;
+  box-shadow: none;
+
+  &:disabled {
+    cursor: not-allowed;
+  }
+
+  @include md-only {
+    min-width: 180px;
+  }
+
+  &:hover {
+    background: #0088C3;
+  }
+}
+
+.progressBlock {
+  width: 50px;
+  margin: 0 auto 20px;
+  display: flex;
+  justify-content: space-between;
+}
+
+.progressPoint {
+  background: $button-color-2;
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+
+  &.progressPointInactive {
+    background: $color-blue-4;
+  }
+}
+
+.clearMnemonic {
+  width: 23px;
+  height: 23px;
+  display: inline-block;
+  position: absolute;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  margin: auto;
+  padding: 11px;
+  cursor: pointer;
+  box-sizing: content-box;
+
+  img {
+    width: 100%;
+  }
+}
+
+.controlsBlock {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 35px;
+
+  .control {
+    width: 49%;
+    line-height: 42px;
+    font-size: 16px;
+    border: 1px solid $color-blue-4;
+    border-radius: 2px;
+    color: $color-blue-4;
+    cursor: pointer;
+    font-weight: 700;
+
+    &:hover {
+      background: $color-hover;
+      color: $background-color-1;
+      border: 0;
+    }
+  }
+
+}
+
+.form {
+  text-align: center;
+  width: 600px;
+  margin: 0 auto;
+  color: #fff;
+
+  @include md-only {
+    width: auto;
+    padding: 0 20px;
+  }
+}
+
+.actions {
+  text-align: center;
+  margin-bottom: 45px;
+  color: #fff;
+  line-height: 30px;
+}
+
+.link {
+  color: $border-color;
+  margin:  0 auto 45px;
+  text-decoration: none;
+  font: 700 16px $font-proxima;
+
+  &:hover {
+    color: #FFB54E;
+  }
+
+  @include md-only {
+    margin: 0 0 10px;
+  }
+}
+
+.submit {
+  margin-bottom: 25px;
+}
+
+.error {
+  color: red;
+  margin-bottom: 20px;
+  display: none;
+  text-align: center;
+}
+
+.visible {
+  display: block;
+}
diff --git a/packages/login-ui/components/CreateAccount/CreateAccount.js b/packages/login-ui/components/CreateAccount/CreateAccount.js
new file mode 100644
index 000000000..61b496946
--- /dev/null
+++ b/packages/login-ui/components/CreateAccount/CreateAccount.js
@@ -0,0 +1,176 @@
+/**
+ * Copyright 2017–2018, LaborX PTY
+ * Licensed under the AGPL Version 3 license.
+ */
+
+import PropTypes from 'prop-types'
+import { MuiThemeProvider } from 'material-ui'
+import React, { PureComponent } from 'react'
+import { connect } from 'react-redux'
+import { Link } from 'react-router'
+import { reduxForm, Field } from 'redux-form/immutable'
+import { TextField } from 'redux-form-material-ui'
+
+import { Button } from 'components'
+import {
+  onSubmitCreateAccountPage,
+  onSubmitCreateAccountPageSuccess,
+  onSubmitCreateAccountPageFail,
+} from '@chronobank/login/redux/network/actions'
+import AutomaticProviderSelector from '@chronobank/login-ui/components/ProviderSelectorSwitcher/AutomaticProviderSelector'
+import ManualProviderSelector from '@chronobank/login-ui/components/ProviderSelectorSwitcher/ManualProviderSelector'
+
+import validate from './validate'
+
+import styles from 'layouts/Splash/styles'
+import fieldStyles from './styles'
+import './CreateAccount.scss'
+
+const STRATEGY_MANUAL = 'manual'
+const STRATEGY_AUTOMATIC = 'automatic'
+
+const nextStrategy = {
+  [STRATEGY_AUTOMATIC]: STRATEGY_MANUAL,
+  [STRATEGY_MANUAL]: STRATEGY_AUTOMATIC,
+}
+
+export const FORM_CREATE_ACCOUNT = 'CreateAccountForm'
+
+function mapStateToProps (state) {
+
+  return {
+    isImportMode: state.get('network').importAccountMode,
+  }
+}
+
+function mapDispatchToProps (dispatch) {
+  return {
+    onSubmit: async (values) => {
+      const walletName = values.get('walletName')
+      const password = values.get('password')
+
+      await dispatch(onSubmitCreateAccountPage(walletName, password))
+    },
+    onSubmitSuccess: () => dispatch(onSubmitCreateAccountPageSuccess()),
+    onSubmitFail: (errors, dispatch, submitErrors) => dispatch(onSubmitCreateAccountPageFail(errors, dispatch, submitErrors)),
+  }
+}
+
+class CreateAccountPage extends PureComponent {
+  static propTypes = {
+    isImportMode: PropTypes.bool,
+  }
+
+  constructor(){
+    super()
+
+    this.state = {
+      isShowProvider: true,
+      strategy: STRATEGY_AUTOMATIC,
+    }
+  }
+
+  handleToggleProvider = (isShowProvider) => this.setState({ isShowProvider })
+
+  handleSelectorSwitch = (currentStrategy) => this.setState({ strategy: nextStrategy[currentStrategy] })
+
+  renderProviderSelector () {
+    switch (this.state.strategy) {
+      case STRATEGY_MANUAL:
+        return this.renderManualProviderSelector()
+      case STRATEGY_AUTOMATIC:
+        return this.renderAutomaticProviderSelector()
+      default:
+        return null
+    }
+  }
+
+  renderAutomaticProviderSelector () {
+    return (
+      <AutomaticProviderSelector
+        currentStrategy={this.state.strategy}
+        onSelectorSwitch={this.handleSelectorSwitch}
+      />
+    )
+  }
+
+  renderManualProviderSelector () {
+    return (
+      <ManualProviderSelector
+        show={this.state.isShowProvider}
+        currentStrategy={this.state.strategy}
+        onSelectorSwitch={this.handleSelectorSwitch}
+      />
+    )
+  }
+
+  render () {
+    const { handleSubmit, pristine, valid, initialValues, isImportMode } = this.props
+
+    return (
+      <MuiThemeProvider muiTheme={styles.inverted}>
+        <form styleName='form' name={FORM_CREATE_ACCOUNT} onSubmit={handleSubmit}>
+          <div styleName='create-title'>
+            Create New Account
+          </div>
+
+          <div styleName='create-title-description'>
+            Created wallet will be encrypted using given password and stored in your
+            browser&apos;s local storage.
+          </div>
+
+          <div styleName='selector'>
+            { this.renderProviderSelector() }
+          </div>
+
+          <div styleName='fields-block'>
+            <Field
+              component={TextField}
+              name='walletName'
+              floatingLabelText='Wallet name'
+              fullWidth
+              {...styles.textField}
+              {...fieldStyles.textField}
+            />
+            <Field
+              component={TextField}
+              name='password'
+              type='password'
+              floatingLabelText='Password'
+              fullWidth
+              {...styles.textField}
+              {...fieldStyles.textField}
+            />
+            <Field
+              component={TextField}
+              name='confirmPassword'
+              type='password'
+              floatingLabelText='Confirm Password'
+              fullWidth
+              {...styles.textField}
+              {...fieldStyles.textField}
+            />
+          </div>
+
+          <div styleName='actions'>
+            <Button
+              styleName='button'
+              buttonType='login'
+              type='submit'
+            >
+              Create new account
+            </Button>
+            or<br />
+            <Link to='/login/select-account' href styleName='link'>Use an existing account</Link>
+          </div>
+
+        </form>
+
+      </MuiThemeProvider>
+    )
+  }
+}
+
+const form = reduxForm({ form: FORM_CREATE_ACCOUNT, validate })(CreateAccountPage)
+export default connect(mapStateToProps, mapDispatchToProps)(form)
+
diff --git a/packages/login-ui/components/CreateAccount/CreateAccount.scss b/packages/login-ui/components/CreateAccount/CreateAccount.scss
new file mode 100644
index 000000000..3048ae140
--- /dev/null
+++ b/packages/login-ui/components/CreateAccount/CreateAccount.scss
@@ -0,0 +1,197 @@
+/**
+ * Copyright 2017–2018, LaborX PTY
+ * Licensed under the AGPL Version 3 license.
+ */
+@import "~styles/partials/mixins";
+@import "~styles/partials/variables";
+
+$copyRightPadding: 200px;
+
+.root {
+  background-color: #242045;
+  position: relative;
+  display: flex;
+  min-height: 100vh;
+  flex-direction: column;
+  font-family: $font-proxima;
+
+  @include md-only {
+    min-height: 100vh;
+    padding: 0;
+  }
+
+  &:after {
+    // hack for preloading material icons and avoid FUOC on render
+    content: '';
+    font-family: 'Material Icons';
+  }
+}
+
+.form {
+  flex: 1;
+  justify-content: center;
+  flex-direction: column;
+  display: flex;
+  margin: 0 auto;
+
+  @include xs-only {
+    padding: 0 20px;
+  }
+}
+
+.content {
+  display: flex;
+  flex: 1;
+  justify-content: center;
+  flex-direction: column;
+  margin: 0 auto;
+
+  @include xs-only {
+    padding: 80px 20px 0;
+  }
+}
+
+.footer {
+  display: flex;
+  background-color: rgba(255, 255, 255, 0.1);
+  bottom: 0;
+  left: 0;
+  right: 0;
+  position: absolute;
+  padding: 17px 80px;
+
+  @include md-only {
+    padding: 20px;
+    flex-direction: column-reverse;
+  }
+}
+
+.header-container {
+  display: flex;
+  justify-content: center;
+  height: 340px;
+  overflow: hidden;
+  margin-bottom: 20px;
+
+  @include md-only {
+    display: none;
+  }
+}
+
+.header-picture {
+  display: flex;
+  position: absolute;
+  height: 320px;
+  overflow: hidden;
+  flex: 1;
+}
+
+.header-picture-crop {
+  display: flex;
+  position: absolute;
+  height: 400px;
+  top: -115px;
+  flex: 1;
+}
+
+.header-logos {
+  z-index: 100;
+  display: flex;
+  position: relative;
+  flex-direction: column;
+  align-items: center;
+  top: 90px;
+  width: 300px;
+  height: 200px;
+}
+
+.chrono-wallet-logo-bright {
+  display: flex;
+  width: 114px;
+  height: 117px;
+  margin-bottom: 40px;
+}
+
+.chrono-wallet-text-bright {
+  display: flex;
+  height: 59px;
+  width: 282px;
+}
+
+.copyright {
+  max-width: $copyRightPadding;
+  font-size: 12px;
+  font-weight: 300;
+  color: white;
+}
+
+.create-title {
+  color: $color-white;
+  font-weight: 700;
+  font-size: 30px;
+  line-height: 42px;
+  margin-bottom: 10px;
+  text-align: center;
+}
+
+.create-title-description {
+  font-weight: 400;
+  color: $color-description;
+  font-size: 16px;
+  line-height: 22px;
+  margin-bottom: 10px;
+  text-align: center;
+  max-width: 520px;
+}
+
+.links {
+  padding-right: $copyRightPadding; // compensation for centering
+  text-align: center;
+  flex-grow: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  @include md-only {
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: flex-start;
+  }
+}
+
+.actions {
+  color: white;
+  text-align: center;
+  line-height: 30px;
+  margin-bottom: 45px;
+}
+
+.link {
+  color: $border-color;
+  margin: auto 45px;
+  text-decoration: none;
+  font: 700 16px $font-proxima;
+
+  &:hover {
+    color: #FFB54E;
+  }
+
+  @include md-only {
+    margin: 0 0 10px;
+  }
+}
+
+.fields-block {
+  margin: 0 auto 50px;
+  max-width: 300px;
+}
+
+.button {
+  margin-bottom: 25px;
+}
+
+.selector {
+  color: #fff;
+}
diff --git a/packages/login-ui/components/CreateAccount/styles.js b/packages/login-ui/components/CreateAccount/styles.js
new file mode 100644
index 000000000..265d41576
--- /dev/null
+++ b/packages/login-ui/components/CreateAccount/styles.js
@@ -0,0 +1,8 @@
+export default {
+  textField: {
+    underlineStyle: {
+      borderColor: '#A3A3CC',
+      bottom: 0,
+    },
+  },
+}
diff --git a/packages/login-ui/components/CreateAccount/validate.js b/packages/login-ui/components/CreateAccount/validate.js
new file mode 100644
index 000000000..183b6eb86
--- /dev/null
+++ b/packages/login-ui/components/CreateAccount/validate.js
@@ -0,0 +1,32 @@
+/**
+ * Copyright 2017–2018, LaborX PTY
+ * Licensed under the AGPL Version 3 license.
+ */
+
+import ErrorList from 'platform/ErrorList'
+import * as validator from 'models/validator'
+
+const validateEqualPasswords = (password, confirmPassword) => password === confirmPassword ? null : 'Wrong password'
+
+export default (values) => {
+  const walletName = values.get('walletName')
+
+  let walletNameErrors = new ErrorList()
+  walletNameErrors.add(validator.required(walletName))
+
+  const password = values.get('password')
+
+  let passwordErrors = new ErrorList()
+  passwordErrors.add(validator.required(password))
+
+  const confirmPassword = values.get('confirmPassword')
+  let confirmPasswordErrors = new ErrorList()
+  confirmPasswordErrors.add(validator.required(confirmPassword))
+  confirmPasswordErrors.add(validateEqualPasswords(password, confirmPassword))
+
+  return {
+    walletName: walletNameErrors.getErrors(),
+    password: passwordErrors.getErrors(),
+    confirmPassword: confirmPasswordErrors.getErrors(),
+  }
+}
diff --git a/packages/login-ui/components/GenerateMnemonic/GenerateMnemonic.js b/packages/login-ui/components/GenerateMnemonic/GenerateMnemonic.js
index f9344cac1..ac64bd434 100644
--- a/packages/login-ui/components/GenerateMnemonic/GenerateMnemonic.js
+++ b/packages/login-ui/components/GenerateMnemonic/GenerateMnemonic.js
@@ -3,80 +3,117 @@
  * Licensed under the AGPL Version 3 license.
  */
 
-import mnemonicProvider from '@chronobank/login/network/mnemonicProvider'
-import { Checkbox, MuiThemeProvider } from 'material-ui'
 import PropTypes from 'prop-types'
-import React, { PureComponent } from 'react'
-import { Translate } from 'react-redux-i18n'
-import theme from 'styles/themes/default'
-import BackButton from '../../components/BackButton/BackButton'
-import styles from '../../components/stylesLoginPage'
-import Warning from '../../components/Warning/Warning'
+import { push } from 'react-router-redux'
+import { connect } from 'react-redux'
+import classnames from 'classnames'
+import { MuiThemeProvider } from 'material-ui'
+import { reduxForm, Field } from 'redux-form/immutable'
+import React, { Component } from 'react'
+import { Link } from 'react-router'
+import { UserRow, Button } from 'components'
+import { initMnemonicPage, navigateToConfirmMnemonicPage } from '@chronobank/login/redux/network/actions'
+
+import PrintIcon from 'assets/img/icons/print-white.svg'
+
 import './GenerateMnemonic.scss'
-import { Button } from '../../settings'
 
-class GenerateMnemonic extends PureComponent {
-  static propTypes = {
-    onBack: PropTypes.func,
+function mapStateToProps (state, ownProps) {
+
+  return {
+    mnemonic: state.get('network').newAccountMnemonic,
   }
+}
 
-  constructor () {
-    super()
-    this.state = {
-      isConfirmed: false,
-      mnemonicKey: mnemonicProvider.generateMnemonic(),
-    }
+function mapDispatchToProps (dispatch, ownProps) {
+  return {
+    initMnemonicPage: () => dispatch(initMnemonicPage()),
+    navigateToConfirmPage: () => dispatch(navigateToConfirmMnemonicPage()),
   }
+}
 
-  componentWillMount () {
-    this.setState({ mnemonicKey: mnemonicProvider.generateMnemonic() })
+@connect(mapStateToProps, mapDispatchToProps)
+export default class MnemonicPage extends Component {
+  static propTypes = {
+    mnemonic: PropTypes.string,
+    initMnemonicPage: PropTypes.func,
+    navigateToConfirmPage: PropTypes.func,
   }
 
-  componentWillUnmount () {
-    this.setState({ mnemonicKey: '' })
+  static defaultProps = {
+    mnemonic: '',
   }
 
-  handleCheckClick = (target, value) => {
-    this.setState({ isConfirmed: value })
+  componentDidMount(){
+    this.props.initMnemonicPage()
   }
 
-  render () {
-    const { isConfirmed, mnemonicKey } = this.state
+  navigateToConfirmPage(){
+    this.props.navigateToConfirmPage()
+  }
 
+  render () {
     return (
-      <div>
-        <BackButton
-          onClick={() => this.props.onBack()}
-          to='loginWithMnemonic'
-        />
-        <MuiThemeProvider muiTheme={theme}>
-          <div styleName='root'>
-            <div styleName='keyBox'>
-              <div styleName='keyLabel'><Translate value='GenerateMnemonic.generateMnemonic' /></div>
-              <div styleName='keyValue'>{mnemonicKey}</div>
+      <MuiThemeProvider>
+        <div styleName='wrapper'>
+          <div>
+            <div styleName='page-title'>Write down back-up phrase</div>
+
+            <p styleName='description'>
+              You can use this phrase to login and access your wallet,
+              even if you forgot your password. You may also print the key
+              which will be provided with a QR code. Use this QR code to
+              scan on phone on ChronoWallet recover page.
+            </p>
+
+            <div styleName='passPhraseWrapper'>
+              <div styleName='passPhrase'>{ this.props.mnemonic }</div>
+              <div styleName='printButtonWrapper'>
+                <div styleName='printButton' onClick={() => {}}>
+                  <img src={PrintIcon} alt='' />
+                </div>
+              </div>
+            </div>
+
+            <div styleName='infoBlock'>
+              <div styleName='infoBlockHeader'>Important! Read the security guidelines</div>
+
+              <ol styleName='infoBlockList'>
+                <li>
+                  <p styleName='listItemContent'>
+                    <b>Don&apos;t share your back-up phrase (mnemonic key) with someone you don&apos;t trust.</b>
+                    &nbsp;Double check services you&apos;re giving your mnemonic to and don&apos;t share your phrase with anyone.
+                  </p>
+                </li>
+
+                <li>
+                  <p styleName='listItemContent'>
+                    <b>Don&apos;t loose your back-up phrase (mnemonic key).</b>
+                    &nbsp;We do not store this information and Your account will be lost
+                    together with all your funds and history.
+                  </p>
+                </li>
+              </ol>
             </div>
-            <div styleName='message'><Translate value='GenerateMnemonic.warning' dangerousHTML /></div>
-            <Warning />
+
             <div styleName='actions'>
-              <div styleName='actionConfirm'>
-                <Checkbox
-                  onCheck={this.handleCheckClick}
-                  label={<Translate value='GenerateMnemonic.iUnderstand' />}
-                  checked={isConfirmed}
-                  {...styles.checkbox}
-                />
-              </div>
               <Button
-                label={<Translate value='GenerateMnemonic.continue' />}
-                disabled={!isConfirmed}
-                onClick={() => this.props.onBack()}
-              />
+                styleName='submit'
+                buttonType='login'
+                onClick={this.navigateToConfirmPage.bind(this)}
+              >
+                Proceed
+              </Button>
+            </div>
+
+            <div styleName='progressBlock'>
+              <div styleName='progressPoint' />
+              <div styleName='progressPoint' />
+              <div styleName='progressPoint progressPointInactive' />
             </div>
           </div>
-        </MuiThemeProvider>
-      </div>
+        </div>
+      </MuiThemeProvider>
     )
   }
 }
-
-export default GenerateMnemonic
diff --git a/packages/login-ui/components/GenerateMnemonic/GenerateMnemonic.scss b/packages/login-ui/components/GenerateMnemonic/GenerateMnemonic.scss
index 839abf173..c7d7994be 100644
--- a/packages/login-ui/components/GenerateMnemonic/GenerateMnemonic.scss
+++ b/packages/login-ui/components/GenerateMnemonic/GenerateMnemonic.scss
@@ -4,45 +4,164 @@
  */
 
 @import "~styles/partials/variables";
+@import "~styles/partials/mixins";
 
-.root {
-  background-color: white;
-  border-radius: 2px;
-  color: $color-primary-0;
-  padding: 16px;
-  margin-top: 16px;
-  box-shadow: 0 8px 8px 0 rgba(0, 0, 0, 0.24), 0 0 8px 0 rgba(0, 0, 0, 0.12);
+.wrapper {
+  text-align: center;
+  max-width: 600px;
+  margin: 0 auto;
+  color: #fff;
+
+  @include md-only {
+    padding: 0 20px;
+  }
 }
 
-.keyBox {
-  background-color: $color-primary-light;
-  padding: 7px 8px 11px;
+.page-title {
+  font-size: 30px;
+  margin-bottom: 10px;
+  font-weight: 700;
 }
 
-.keyLabel {
-  opacity: 0.6;
-  font-size: 12px;
+.description {
+  margin-bottom: 30px;
+  color: $additionalData-color-1;
+  line-height: 22px;
+  font-weight: 400;
+
+  @include md-only {
+    margin-bottom: 20px;
+  }
 }
 
-.keyValue {
-  font-size: 18px;
-  font-weight: 600;
-  margin-top: 7px;
+.passPhraseWrapper {
+  position: relative;
+  margin-bottom: 20px;
+  background: $background-color-1;
+  min-height: 100px;
+  border-radius: 2px;
+  padding: 30px 60px 20px 30px;
+
+  @include md-only {
+    margin-bottom: 0;
+  }
 }
 
-.message {
-  font-size: 14px;
-  margin-top: 16px;
+.passPhrase {
+  font-size: 16px;
+  font-weight: 700;
+  line-height: 24px;
+  color: $button-color-2;
+  text-align: left;
+  min-height: 46px;
+  width: 100%;
+
+  @include md-only {
+    min-height: 55px;
+  }
+}
+
+
+.progressBlock {
+  width: 50px;
+  margin: 0 auto 20px;
+  display: flex;
+  justify-content: space-between;
+}
+
+.progressPoint {
+  background: $button-color-2;
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+
+  &.progressPointInactive {
+    background: $color-blue-4;
+  }
 }
 
 .actions {
-  margin-top: 32px;
+  text-align: center;
+  margin-bottom: 45px;
+  color: #fff;
+  line-height: 30px;
+}
+
+.link {
+  color: $border-color;
+  margin:  0 auto 45px;
+  text-decoration: none;
+  font: 700 16px $font-proxima;
+
+  &:hover {
+    color: #FFB54E;
+  }
+
+  @include md-only {
+    margin: 0 0 10px;
+  }
+}
+
+.submit {
+  margin-bottom: 25px;
+}
+
+.infoBlock {
+  text-align: left;
+  padding: 32px 30px 10px;
+  border-top: 5px solid #FF6D6B;
+  background: $background-color-1;
+  border-radius: 3px;
+  margin-bottom: 40px;
+
+  @include md-only {
+    border-radius: 0;
+  }
+}
+
+.infoBlockList {
+  font-weight: bold;
+  font-size: 16px;
+  margin-left: 15px;
+}
+
+.listItemContent {
+  font-weight: 400;
+  color: #A3A3CC;
+  line-height: 22px;
+  margin-bottom: 20px;
+
+  b {
+    color: #fff;
+    font-weight: bold;
+  }
+}
+
+.infoBlockHeader {
+  color: #FF6D6B;
+  font-weight: 700;
+  font-size: 20px;
+  margin-bottom: 20px;
+}
+
+.printButtonWrapper {
+  position: absolute;
+  right: 0;
+  width: 45px;
+  top: 0;
+  bottom: 0;
   display: flex;
+  justify-content: flex-start;
   align-items: center;
-  justify-content: flex-end;
 }
 
-.actionConfirm {
-  margin-right: 40px;
-  flex-grow: 1;
-}
\ No newline at end of file
+.printButton {
+  width: 24px;
+  opacity: 0.25;
+  cursor: pointer;
+
+  &:hover {
+    opacity: 1;
+  }
+}
+
diff --git a/packages/login-ui/components/GenerateWallet/GenerateWallet.js b/packages/login-ui/components/GenerateWallet/GenerateWallet.js
index e97f864fb..b7407454b 100644
--- a/packages/login-ui/components/GenerateWallet/GenerateWallet.js
+++ b/packages/login-ui/components/GenerateWallet/GenerateWallet.js
@@ -3,131 +3,81 @@
  * Licensed under the AGPL Version 3 license.
  */
 
-import walletGenerator from '@chronobank/login/network/walletGenerator'
-import { addError, clearErrors } from '@chronobank/login/redux/network/actions'
-import download from 'js-file-download'
-import { Checkbox, MuiThemeProvider, TextField } from 'material-ui'
 import PropTypes from 'prop-types'
-import React, { PureComponent } from 'react'
+import classnames from 'classnames'
+import { MuiThemeProvider } from 'material-ui'
+import { reduxForm, Field } from 'redux-form/immutable'
 import { connect } from 'react-redux'
-import { Translate } from 'react-redux-i18n'
-import BackButton from '../../components/BackButton/BackButton'
-import styles from '../../components/stylesLoginPage'
-import Warning from '../../components/Warning/Warning'
+import React, { Component } from 'react'
+import { Link } from 'react-router'
+import { Button } from 'components'
+import {
+  downloadWallet,
+} from 'redux/persistAccount/actions'
+import {
+  navigateToLoginPage,
+} from '@chronobank/login/redux/network/actions'
+
+import Wallet from 'assets/img/icons/wallet-white.svg'
+
 import './GenerateWallet.scss'
-import { Button } from '../../settings'
 
-const initialState = {
-  password: '',
-  isWarningSuppressed: false,
-  walletJSON: null,
-  isDownloaded: false,
+function mapDispatchToProps (dispatch) {
+  return {
+    downloadWallet: () => dispatch(downloadWallet()),
+    navigateToLoginPage: () => dispatch(navigateToLoginPage()),
+  }
 }
 
-const mapDispatchToProps = (dispatch) => ({
-  addError: (error) => dispatch(addError(error)),
-  clearErrors: () => dispatch(clearErrors()),
-})
-
 @connect(null, mapDispatchToProps)
-class GenerateWallet extends PureComponent {
+export default class MnemonicPage extends Component {
   static propTypes = {
-    onBack: PropTypes.func.isRequired,
-    addError: PropTypes.func,
-    clearErrors: PropTypes.func,
-  }
-
-  constructor (props, context, updater) {
-    super(props, context, updater)
-
-    // TODO replace with async arrow when class properties will work correctly
-    this.handleGenerateWalletClick = this.handleGenerateWalletClick.bind(this)
-
-    this.state = {
-      ...initialState,
-    }
-  }
-
-  handlePasswordChange = (target, value) => {
-    this.setState({ password: value })
-  }
-
-  handleWarningCheck = (target, value) => {
-    this.setState({ isWarningSuppressed: value })
-  }
-
-  async handleGenerateWalletClick () {
-    this.props.clearErrors()
-    try {
-      if (!this.state.walletJSON) {
-        // create new instance
-        const walletJSON = await walletGenerator.getWallet(this.state.password)
-        this.setState({
-          walletJSON,
-          password: '',
-        })
-      }
-
-      const wallet = this.state.walletJSON
-      download(JSON.stringify(wallet), `${wallet.id}.dat`)
-      this.setState({
-        isDownloaded: true,
-      })
-    } catch (e) {
-      this.props.addError(e.message)
-    }
+    downloadWallet: PropTypes.func,
+    navigateToLoginPage: PropTypes.func,
   }
 
   render () {
-    const { password, isWarningSuppressed, isDownloaded } = this.state
-    const isPasswordValid = password.length > 8
+    const { downloadWallet, navigateToLoginPage } = this.props
 
     return (
-      <div>
-        <BackButton
-          onClick={this.props.onBack}
-          to='loginWithWallet'
-        />
-        <MuiThemeProvider muiTheme={styles.theme}>
-          <div styleName='root'>
-            {!isDownloaded ? (
-              <div>
-                <div styleName='hint'><Translate value='GenerateWallet.enterPassword' /></div>
-                <TextField
-                  floatingLabelText={<Translate value='GenerateWallet.password' />}
-                  onChange={this.handlePasswordChange}
-                  type='password'
-                  value={password}
-                  errorText={!isPasswordValid && <Translate value='GenerateWallet.passwordWarning' />}
-                  fullWidth
-                />
-                <Warning />
-              </div>
-            ) : (
-              <div styleName='hint'><Translate value='GenerateWallet.walletSuccess' /></div>
-            )}
+      <MuiThemeProvider>
+        <div styleName='wrapper'>
+          <div>
+            <div styleName='page-title'>Download a Wallet File</div>
+
+            <p styleName='description'>
+              You can use this wallet file in password recovery option to
+              make your account available in another browser, for example.
+              The file is protected by the same password as your created before.
+            </p>
+
             <div styleName='actions'>
-              {!isDownloaded && (
-                <div styleName='actionConfirm'>
-                  <Checkbox
-                    label={<Translate value='GenerateWallet.iUnderstand' />}
-                    onCheck={this.handleWarningCheck}
-                    checked={isWarningSuppressed}
-                    {...styles.checkbox}
-                  />
-                </div>
-              )}
               <Button
-                label={<Translate value='GenerateWallet.continue' />}
-                disabled={!isDownloaded && (!isWarningSuppressed || !isPasswordValid)}
-                onClick={this.handleGenerateWalletClick}
-              />
+                styleName='button'
+                onClick={downloadWallet}
+              >
+                <img src={Wallet} alt='' />
+                <br />
+                Download
+              </Button>
+
+              <Button
+                styleName='submit'
+                buttonType='login'
+                onClick={navigateToLoginPage}
+              >
+                Finish
+              </Button>
+            </div>
+
+            <div styleName='progress-block'>
+              <div styleName='progress-point' />
+              <div styleName='progress-point' />
+              <div styleName='progress-point' />
             </div>
           </div>
-        </MuiThemeProvider>
-      </div>
+        </div>
+      </MuiThemeProvider>
     )
   }
 }
-
-export default GenerateWallet
diff --git a/packages/login-ui/components/GenerateWallet/GenerateWallet.scss b/packages/login-ui/components/GenerateWallet/GenerateWallet.scss
index d072c92e4..ed40e91e3 100644
--- a/packages/login-ui/components/GenerateWallet/GenerateWallet.scss
+++ b/packages/login-ui/components/GenerateWallet/GenerateWallet.scss
@@ -6,39 +6,104 @@
 @import "~styles/partials/variables";
 @import "~styles/partials/mixins";
 
-.root {
-  background-color: white;
-  border-radius: 2px;
-  color: $color-primary-0;
-  padding: 16px;
-  margin-top: 16px;
-  box-shadow: 0 8px 8px 0 rgba(0, 0, 0, 0.24), 0 0 8px 0 rgba(0, 0, 0, 0.12);
+.wrapper {
+  text-align: center;
+  max-width: 600px;
+  margin: 0 auto;
+  color: #fff;
+
+  @include md-only {
+    padding: 0 20px;
+  }
 }
 
-.hint {
-  font-size: 18px;
-  margin-top: 5px;
+.page-title {
+  font-size: 30px;
+  margin-bottom: 10px;
+  font-weight: 700;
 }
 
-.actions {
-  display: flex;
-  align-items: center;
-  margin-top: 32px;
-  justify-content: flex-end;
+.description {
+  margin-bottom: 50px;
+  color: $additionalData-color-1;
+  line-height: 22px;
+  font-weight: 400;
 
   @include md-only {
-    flex-wrap: wrap;
+    margin-bottom: 20px;
   }
 }
 
-.actions {
-  margin-top: 32px;
+.progress-block {
+  width: 50px;
+  margin: 0 auto 20px;
   display: flex;
-  align-items: center;
-  justify-content: flex-end;
+  justify-content: space-between;
+}
+
+.progress-point {
+  background: $button-color-2;
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+
+  &.progress-point-inactive {
+    background: $color-blue-4;
+  }
+}
+
+.row {
+  margin: 0 auto 50px;
 }
 
-.actionConfirm {
-  margin-right: 40px;
-  flex-grow: 1;
-}
\ No newline at end of file
+.actions {
+  text-align: center;
+  margin-bottom: 45px;
+  color: #fff;
+  line-height: 30px;
+}
+
+.link {
+  color: $border-color;
+  margin:  0 auto 45px;
+  text-decoration: none;
+  font: 700 16px $font-proxima;
+
+  &:hover {
+    color: #FFB54E;
+  }
+
+  @include md-only {
+    margin: 0 0 10px;
+  }
+}
+
+.submit {
+  margin-bottom: 25px;
+}
+
+.wallet-img {
+  width: 48px;
+  height: 48px;
+  display: block;
+  margin: 0 auto;
+}
+
+.button {
+  text-align: center;
+  margin-bottom: 50px;
+
+  button {
+    font-size: 14px;
+    text-transform: none;
+    width: 110px;
+    height: 100px;
+    padding: 0;
+    border-radius: 3px;
+  }
+
+  img {
+    width: 50px;
+    margin-bottom: 5px;
+  }
+}
diff --git a/packages/login-ui/components/LoginForm/LoginForm.js b/packages/login-ui/components/LoginForm/LoginForm.js
index c150f63ec..a0a2945bd 100644
--- a/packages/login-ui/components/LoginForm/LoginForm.js
+++ b/packages/login-ui/components/LoginForm/LoginForm.js
@@ -3,24 +3,26 @@
  * Licensed under the AGPL Version 3 license.
  */
 
-import networkService from '@chronobank/login/network/NetworkService'
-import { clearErrors, DUCK_NETWORK } from '@chronobank/login/redux/network/actions'
-import { MD5 } from 'crypto-js'
-import LocaleDropDown from 'layouts/partials/LocaleDropDown/LocaleDropDown'
-import { MuiThemeProvider } from 'material-ui'
-import { yellow800 } from 'material-ui/styles/colors'
-import WarningIcon from 'material-ui/svg-icons/alert/warning'
 import PropTypes from 'prop-types'
-import React, { Component } from 'react'
+import { MuiThemeProvider, CircularProgress } from 'material-ui'
+import React, { PureComponent } from 'react'
+import { Link } from 'react-router'
+import { reduxForm, Field } from 'redux-form/immutable'
+import { TextField } from 'redux-form-material-ui'
 import { connect } from 'react-redux'
 import { Translate } from 'react-redux-i18n'
-import { login } from 'redux/session/actions'
-import inverted from 'styles/themes/inversed'
-import LoginWithOptions from '../LoginWithOptions/LoginWithOptions'
-import AutomaticProviderSelector from '../ProviderSelectorSwitcher/AutomaticProviderSelector'
-import ManualProviderSelector from '../ProviderSelectorSwitcher/ManualProviderSelector'
-
-import './LoginPage.scss'
+import { UserRow, Button } from 'components'
+import {
+  onSubmitLoginForm,
+  onSubmitLoginFormFail,
+  initLoginPage,
+  navigateToSelectWallet,
+} from '@chronobank/login/redux/network/actions'
+import AutomaticProviderSelector from '@chronobank/login-ui/components/ProviderSelectorSwitcher/AutomaticProviderSelector'
+import ManualProviderSelector from '@chronobank/login-ui/components/ProviderSelectorSwitcher/ManualProviderSelector'
+
+import styles from 'layouts/Splash/styles'
+import './LoginForm.scss'
 
 const STRATEGY_MANUAL = 'manual'
 const STRATEGY_AUTOMATIC = 'automatic'
@@ -30,76 +32,53 @@ const nextStrategy = {
   [STRATEGY_MANUAL]: STRATEGY_AUTOMATIC,
 }
 
-const mapStateToProps = (state) => {
-  const network = state.get(DUCK_NETWORK)
+export const FORM_LOGIN_PAGE = 'FormLoginPage'
+
+function mapStateToProps (state, ownProps) {
+
   return {
-    errors: network.errors,
-    selectedAccount: network.selectedAccount,
-    selectedProviderId: network.selectedProviderId,
-    selectedNetworkId: network.selectedNetworkId,
-    isLoading: network.isLoading,
+    selectedWallet: state.get('persistAccount').selectedWallet,
+    isLoginSubmitting: state.get('network').isLoginSubmitting,
   }
 }
 
-const mapDispatchToProps = (dispatch) => ({
-  checkNetwork: () => networkService.checkNetwork(),
-  createNetworkSession: (account, provider, network) => networkService.createNetworkSession(account, provider, network),
-  login: (account) => dispatch(login(account)),
-  clearErrors: () => dispatch(clearErrors()),
-})
+function mapDispatchToProps (dispatch, ownProps) {
+  return {
+    onSubmit: async (values) => {
+      const password = values.get('password')
+
+      await dispatch(onSubmitLoginForm(password))
+    },
+    onSubmitFail: () => dispatch(onSubmitLoginFormFail()),
+    initLoginPage: () => dispatch(initLoginPage()),
+    navigateToSelectWallet: () => dispatch(navigateToSelectWallet()),
+  }
+}
 
-@connect(mapStateToProps, mapDispatchToProps)
-class LoginForm extends Component {
+class LoginPage extends PureComponent {
   static propTypes = {
-    clearErrors: PropTypes.func,
-    checkNetwork: PropTypes.func,
-    createNetworkSession: PropTypes.func,
-    login: PropTypes.func,
-    selectedAccount: PropTypes.string,
-    selectedProviderId: PropTypes.number,
-    selectedNetworkId: PropTypes.number,
-    errors: PropTypes.arrayOf(PropTypes.string),
+    initLoginPage: PropTypes.func,
+    navigateToSelectWallet: PropTypes.func,
+    isLoginSubmitting: PropTypes.bool,
   }
 
-  constructor (props, context, updater) {
-    super(props, context, updater)
+  constructor(props){
+    super(props)
 
-    // TODO replace with async arrow when class properties will work correctly
-    this.handleLogin = this.handleLogin.bind(this)
     this.state = {
       isShowProvider: true,
       strategy: STRATEGY_AUTOMATIC,
     }
   }
 
-  async handleLogin () {
-    this.props.clearErrors()
-    const isPassed = await this.props.checkNetwork(
-      this.props.selectedAccount,
-      this.props.selectedProviderId,
-      this.props.selectedNetworkId,
-    )
-    if (isPassed) {
-      this.props.createNetworkSession(
-        this.props.selectedAccount,
-        this.props.selectedProviderId,
-        this.props.selectedNetworkId,
-      )
-      this.props.login(this.props.selectedAccount)
-    }
+  componentWillMount(){
+    this.props.initLoginPage()
   }
 
   handleToggleProvider = (isShowProvider) => this.setState({ isShowProvider })
 
   handleSelectorSwitch = (currentStrategy) => this.setState({ strategy: nextStrategy[currentStrategy] })
 
-  renderError = (error) => (
-    <div styleName='error' key={MD5(error)}>
-      <div styleName='errorIcon'><WarningIcon color={yellow800} /></div>
-      <div styleName='errorText'>{error}</div>
-    </div>
-  )
-
   renderProviderSelector () {
     switch (this.state.strategy) {
       case STRATEGY_MANUAL:
@@ -131,34 +110,60 @@ class LoginForm extends Component {
   }
 
   render () {
-    const {
-      errors,
-    } = this.props
+    const { handleSubmit, pristine, valid, initialValues, isImportMode, onSubmit, selectedWallet,
+      navigateToSelectWallet, isLoginSubmitting } = this.props
 
     return (
-      <MuiThemeProvider muiTheme={inverted}>
-        <div styleName='form'>
-          <div styleName='title'><Translate value='LoginPage.title' /></div>
-          <div styleName='subtitle'><Translate value='LoginPage.subTitle' /></div>
-          {this.renderProviderSelector()}
-          <LoginWithOptions
-            onLogin={this.handleLogin}
-            onToggleProvider={this.handleToggleProvider}
-          />
-          {errors && (
-            <div styleName='errors'>
-              {errors.map(this.renderError)}
+      <MuiThemeProvider muiTheme={styles.inverted}>
+        <form styleName='form' name={FORM_LOGIN_PAGE} onSubmit={handleSubmit}>
+
+          <div styleName='page-title'>Log In</div>
+
+          <div styleName='selector'>
+            { this.renderProviderSelector() }
+          </div>
+
+          <div styleName='user-row'>
+            <UserRow
+              title={selectedWallet && selectedWallet.name}
+              avatar={'/src/assets/img/profile-photo-1.jpg'}
+              onClick={navigateToSelectWallet}
+            />
+
+            <div styleName='field'>
+              <Field
+                component={TextField}
+                name='password'
+                type='password'
+                floatingLabelText='Enter Password'
+                fullWidth
+                {...styles.textField}
+              />
             </div>
-          )}
-          <ul styleName='actions'>
-            <li>
-              <LocaleDropDown />
-            </li>
-          </ul>
-        </div>
+
+            <div styleName='actions'>
+              <Button
+                styleName='button'
+                buttonType='login'
+                type='submit'
+                label={isLoginSubmitting
+                  ? <CircularProgress
+                    style={{ verticalAlign: 'middle', marginTop: -2 }}
+                    size={24}
+                    thickness={1.5}
+                  /> : 'Log In'}
+                disabled={isLoginSubmitting}
+              />
+
+              <Link to='/login/recover-account' href styleName='link'>Forgot you password?</Link>
+            </div>
+          </div>
+
+        </form>
       </MuiThemeProvider>
     )
   }
 }
 
-export default LoginForm
+const form = reduxForm({ form: FORM_LOGIN_PAGE })(LoginPage)
+export default connect(mapStateToProps, mapDispatchToProps)(form)
diff --git a/packages/login-ui/components/LoginForm/LoginForm.scss b/packages/login-ui/components/LoginForm/LoginForm.scss
new file mode 100644
index 000000000..8514b0650
--- /dev/null
+++ b/packages/login-ui/components/LoginForm/LoginForm.scss
@@ -0,0 +1,96 @@
+/**
+ * Copyright 2017–2018, LaborX PTY
+ * Licensed under the AGPL Version 3 license.
+ */
+
+@import "~styles/partials/variables";
+@import "~styles/partials/mixins";
+
+ul.actions {
+  position: absolute;
+  top: 30px;
+  right: 80px;
+  display: flex;
+  justify-content: flex-end;
+  flex: 0 0 auto;
+  padding: 0;
+  list-style: none;
+  font-size: 18px;
+  line-height: 48px;
+
+  @include md-only {
+    top: 10px;
+    right: 10px;
+    flex: 1 1 auto;
+  }
+
+  li {
+
+    flex: 0 0 auto;
+
+    a {
+      padding: 10px 20px;
+      text-decoration: none;
+      color: $color-white;
+
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+  }
+}
+
+.form {
+  max-width: 380px;
+  margin:0 auto;
+
+  @include xs-only {
+    padding: 0 20px;
+  }
+}
+
+.selector {
+  color: white;
+}
+
+.page-title {
+  color: $color-white;
+  font-weight: 700;
+  font-size: 30px;
+  line-height: 42px;
+  margin-bottom: 40px;
+  text-align: center;
+}
+
+.user-row {
+  border-top: 1px solid $color-purpule;
+}
+
+.field {
+  margin-bottom: 50px;
+}
+
+.button {
+  text-align: center;
+  margin-bottom: 30px;
+}
+
+.actions {
+  text-align: center;
+  margin-bottom: 45px;
+}
+
+.link {
+  color: $border-color;
+  margin:  0 auto 45px;
+  text-decoration: none;
+  font: 700 16px $font-proxima;
+
+  &:hover {
+    color: #FFB54E;
+  }
+
+  @include md-only {
+    margin: 0 0 10px;
+  }
+}
diff --git a/packages/login-ui/components/LoginForm/LoginPage.scss b/packages/login-ui/components/LoginForm/LoginPage.scss
deleted file mode 100644
index 258a65c56..000000000
--- a/packages/login-ui/components/LoginForm/LoginPage.scss
+++ /dev/null
@@ -1,108 +0,0 @@
-/**
- * Copyright 2017–2018, LaborX PTY
- * Licensed under the AGPL Version 3 license.
- */
-
-@import "~styles/partials/variables";
-@import "~styles/partials/mixins";
-
-.form {
-  color: white;
-  font-weight: 400;
-  margin: 0 20px;
-}
-
-.title {
-  font-size: 34px;
-  margin-bottom: 10px;
-  font-weight: 500;
-}
-
-.subtitle {
-  font-size: 18px;
-  opacity: 0.6;
-  margin-bottom: 25px;
-  font-weight: 300;
-}
-
-.errors {
-  margin-top: 5px;
-}
-
-.error {
-  display: flex;
-  align-items: center;
-  margin-top: 20px;
-}
-
-.errorIcon {
-  max-width: 30px;
-  flex-grow: 0;
-  margin-right: 20px;
-}
-
-.errorText {
-  flex-grow: 1;
-  font-weight: 300;
-  line-height: 20px;
-}
-
-ul.actions {
-  position: absolute;
-  top: 30px;
-  right: 80px;
-  display: flex;
-  justify-content: flex-end;
-  flex: 0 0 auto;
-  padding: 0;
-  list-style: none;
-  font-size: 18px;
-  line-height: 48px;
-
-  @include md-only {
-    top: 10px;
-    right: 10px;
-    flex: 1 1 auto;
-  }
-
-  li {
-
-    flex: 0 0 auto;
-
-    a {
-      padding: 10px 20px;
-      text-decoration: none;
-      color: $color-white;
-
-      &:hover {
-        text-decoration: underline;
-      }
-    }
-  }
-}
-
-input:-webkit-autofill,
-input:-webkit-autofill:hover,
-input:-webkit-autofill:focus,
-input:-webkit-autofill:active {
-  -webkit-animation: autofill 0s forwards;
-  animation: autofill 0s forwards;
-}
-
-@keyframes autofill {
-  100% {
-    background: transparent;
-    color: $color-primary-3;
-  }
-}
-
-@-webkit-keyframes autofill {
-  100% {
-    background: transparent;
-    color: $color-primary-3;
-  }
-}
-
-input[type="password"] {
-  box-shadow: none;
-}
diff --git a/packages/login-ui/components/LoginWithMnemonic/LoginWithMnemonic.js b/packages/login-ui/components/LoginWithMnemonic/LoginWithMnemonic.js
index 3dc4f403e..831e1f88d 100644
--- a/packages/login-ui/components/LoginWithMnemonic/LoginWithMnemonic.js
+++ b/packages/login-ui/components/LoginWithMnemonic/LoginWithMnemonic.js
@@ -3,118 +3,73 @@
  * Licensed under the AGPL Version 3 license.
  */
 
-import mnemonicProvider from '@chronobank/login/network/mnemonicProvider'
-import { CircularProgress, TextField } from 'material-ui'
-import PropTypes from 'prop-types'
+import { MuiThemeProvider } from 'material-ui'
 import React, { PureComponent } from 'react'
 import { connect } from 'react-redux'
-import { Translate } from 'react-redux-i18n'
-import BackButton from '../../components/BackButton/BackButton'
-import styles from '../../components/stylesLoginPage'
-import { Button } from '../../settings'
+import { reduxForm, Field } from 'redux-form/immutable'
+import { Link } from 'react-router'
+import { TextField } from 'redux-form-material-ui'
+import styles from 'layouts/Splash/styles'
+import { Button } from 'components'
+import {
+  onSubmitMnemonicLoginForm,
+  onSubmitMnemonicLoginFormSuccess,
+  onSubmitMnemonicLoginFormFail,
+} from '@chronobank/login/redux/network/actions'
 
 import './LoginWithMnemonic.scss'
 
-const mapStateToProps = (state) => ({
-  isLoading: state.get('network').isLoading,
-})
+export const FORM_MNEMONIC_LOGIN_PAGE = 'FormMnemonicLoginPage'
 
-@connect(mapStateToProps, null)
-class LoginWithMnemonic extends PureComponent {
-  static propTypes = {
-    onLogin: PropTypes.func.isRequired,
-    onBack: PropTypes.func.isRequired,
-    onGenerate: PropTypes.func.isRequired,
-    isLoading: PropTypes.bool,
-  }
-
-  constructor (props) {
-    super(props)
-    this.state = {
-      mnemonicKey: '',
-      isValidated: false,
-    }
-  }
-
-  componentWillMount () {
-    // use it for tests
-    // address: 0x13f219bbb158a49b3e09505fccc333916f11bacb
-    // this.setState({
-    //   mnemonicKey: 'leave plate clog interest recall distance actor gun flash cupboard ritual hold',
-    //   isValidated: true
-    // })
-    this.setState({ mnemonicKey: '' })
+function mapDispatchToProps (dispatch) {
+  return {
+    onSubmit: (values) => {
+      const confirmMnemonic = values.get('mnemonic')
+      dispatch(onSubmitMnemonicLoginForm(confirmMnemonic))
+    },
+    onSubmitSuccess: () => dispatch(onSubmitMnemonicLoginFormSuccess()),
+    onSubmitFail: () => dispatch(onSubmitMnemonicLoginFormFail()),
   }
+}
 
-  componentWillUnmount () {
-    this.setState({ mnemonicKey: '' })
-  }
+class LoginWithMnemonic extends PureComponent {
+  render () {
+    const { handleSubmit } = this.props
 
-  handleMnemonicBlur = () => {
-    this.setState({ mnemonicKey: this.mnemonicKey.getValue().trim() })
-  }
+    return (
+      <MuiThemeProvider muiTheme={styles.inverted}>
+        <form styleName='form' name={FORM_MNEMONIC_LOGIN_PAGE} onSubmit={handleSubmit}>
 
-  handleMnemonicChange = () => {
-    const mnemonicKey = this.mnemonicKey.getValue()
-    const isValidated = mnemonicProvider.validateMnemonic(mnemonicKey.trim())
-    this.setState({ mnemonicKey, isValidated })
-  }
+          <div styleName='page-title'>Mnemonic form</div>
 
-  render () {
-    const { isLoading } = this.props
-    const { mnemonicKey, isValidated } = this.state
+          <div styleName='field'>
+            <Field
+              component={TextField}
+              name='mnemonic'
+              type='text'
+              floatingLabelText='Mnemonic'
+              fullWidth
+              {...styles.textField}
+            />
+          </div>
 
-    return (
-      <div styleName='root'>
-        <BackButton
-          onClick={() => this.props.onBack()}
-          to='options'
-        />
-        <div onClick={() => this.mnemonicKey.focus()}>
-          <TextField
-            ref={(input) => {
-              this.mnemonicKey = input
-            }}
-            floatingLabelText={<Translate value='LoginWithMnemonic.mnemonicKey' />}
-            value={mnemonicKey}
-            onChange={this.handleMnemonicChange}
-            onBlur={this.handleMnemonicBlur}
-            errorText={(isValidated || mnemonicKey === '') ? '' : <Translate value='LoginWithMnemonic.wrongMnemonic' />}
-            multiLine
-            fullWidth
-            disabled={isLoading}
-            {...styles.textField}
-          />
-        </div>
-        <div styleName='actions'>
-          <div styleName='action'>
+          <div styleName='actions'>
             <Button
-              styleName='whiteButton'
-              flat
-              fullWidth
-              disabled={isLoading}
-              onClick={() => this.props.onGenerate()}
+              styleName='button'
+              buttonType='login'
+              type='submit'
             >
-              <Translate value='LoginWithMnemonic.generateMnemonic' />
+              Login
             </Button>
+            or&nbsp;
+            <Link to='/login/import-methods' href styleName='link'>back</Link>
           </div>
-          <div styleName='action'>
-            <Button
-              label={isLoading
-                ? <CircularProgress
-                  style={{ verticalAlign: 'middle', marginTop: -2 }}
-                  size={24}
-                  thickness={1.5}
-                />
-                : <Translate value='LoginWithMnemonic.loginWithMnemonic' />}
-              disabled={!isValidated || isLoading}
-              onClick={() => this.props.onLogin(mnemonicKey)}
-            />
-          </div>
-        </div>
-      </div>
+
+        </form>
+      </MuiThemeProvider>
     )
   }
 }
 
-export default LoginWithMnemonic
+const form = reduxForm({ form: FORM_MNEMONIC_LOGIN_PAGE })(LoginWithMnemonic)
+export default connect(null, mapDispatchToProps)(form)
diff --git a/packages/login-ui/components/LoginWithMnemonic/LoginWithMnemonic.scss b/packages/login-ui/components/LoginWithMnemonic/LoginWithMnemonic.scss
index 903e4a153..6d524ee18 100644
--- a/packages/login-ui/components/LoginWithMnemonic/LoginWithMnemonic.scss
+++ b/packages/login-ui/components/LoginWithMnemonic/LoginWithMnemonic.scss
@@ -4,36 +4,91 @@
  */
 
 @import "~styles/partials/variables";
-@import '../LoginPageShared';
+@import "~styles/partials/mixins";
 
-$gutter: 16px;
+ul.actions {
+  position: absolute;
+  top: 30px;
+  right: 80px;
+  display: flex;
+  justify-content: flex-end;
+  flex: 0 0 auto;
+  padding: 0;
+  list-style: none;
+  font-size: 18px;
+  line-height: 48px;
+
+  @include md-only {
+    top: 10px;
+    right: 10px;
+    flex: 1 1 auto;
+  }
+
+  li {
+
+    flex: 0 0 auto;
+
+    a {
+      padding: 10px 20px;
+      text-decoration: none;
+      color: $color-white;
 
-.root {
-  margin-top: 24px;
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+  }
 }
 
-.generateIcon {
-  @extend %buttonIcon;
-  display: inline-block;
-  width: 16px;
-  height: 16px;
+.form {
+  max-width: 380px;
+  margin:0 auto;
+
+  @include xs-only {
+    padding: 0 20px;
+  }
 }
 
-.actions {
-  display: flex;
-  margin: 25px (-$gutter/2) 0;
+.page-title {
+  color: $color-white;
+  font-weight: 700;
+  font-size: 30px;
+  line-height: 42px;
+  margin-bottom: 40px;
+  text-align: center;
 }
 
-.action {
-  margin: 0 ($gutter/2);
-  width: calc(50% - 16px);
-  flex-grow: 1;
-  display: flex;
-  justify-content: flex-end;
+.user-row {
+  border-top: 1px solid $color-purpule;
+}
+
+.field {
+  margin-bottom: 50px;
+}
+
+.button {
+  text-align: center;
+  margin-bottom: 30px;
+}
+
+.actions {
+  text-align: center;
+  margin-bottom: 45px;
+  color: #fff;
+  line-height: 30px;
 }
 
-.whiteButton {
-  button {
-    color: $color-white;
+.link {
+  color: $border-color;
+  margin:  0 auto 45px;
+  text-decoration: none;
+  font: 700 16px $font-proxima;
+
+  &:hover {
+    color: #FFB54E;
   }
-}
\ No newline at end of file
+
+  @include md-only {
+    margin: 0 0 10px;
+  }
+}
diff --git a/packages/login-ui/components/LoginWithOptions/LoginWithOptions.js b/packages/login-ui/components/LoginWithOptions/LoginWithOptions.js
index ac4c29968..b83ffd613 100644
--- a/packages/login-ui/components/LoginWithOptions/LoginWithOptions.js
+++ b/packages/login-ui/components/LoginWithOptions/LoginWithOptions.js
@@ -3,402 +3,134 @@
  * Licensed under the AGPL Version 3 license.
  */
 
-import ledgerProvider from '@chronobank/login/network/LedgerProvider'
-import mnemonicProvider from '@chronobank/login/network/mnemonicProvider'
-import networkService from '@chronobank/login/network/NetworkService'
-import privateKeyProvider from '@chronobank/login/network/privateKeyProvider'
-import { LOCAL_PRIVATE_KEYS } from '@chronobank/login/network/settings'
-import trezorProvider from '@chronobank/login/network/TrezorProvider'
-import walletProvider from '@chronobank/login/network/walletProvider'
-import { loginLedger } from '@chronobank/login/redux/ledger/actions'
-import { addError, clearErrors, loading, NETWORK_SET_TEST_MNEMONIC, NETWORK_SET_TEST_WALLET_FILE } from '@chronobank/login/redux/network/actions'
-import { loginTrezor } from '@chronobank/login/redux/trezor/actions'
-import pascalCase from 'pascal-case'
 import PropTypes from 'prop-types'
+import { MuiThemeProvider } from 'material-ui'
 import React, { PureComponent } from 'react'
+import { Link } from 'react-router'
 import { connect } from 'react-redux'
-import { Translate } from 'react-redux-i18n'
-import GenerateMnemonic from '../../components/GenerateMnemonic/GenerateMnemonic'
-import GenerateWallet from '../../components/GenerateWallet/GenerateWallet'
-import LoginLocal from '../../components/LoginLocal/LoginLocal'
-import LoginMetamask from '../../components/LoginMetamask/LoginMetamask'
-import LoginUPort from '../../components/LoginUPort/LoginUPort'
-import LoginLedger from '../../components/LoginWithLedger/LoginWithLedger'
-import LoginWithMnemonic from '../../components/LoginWithMnemonic/LoginWithMnemonic'
-import LoginWithPrivateKey from '../../components/LoginWithPrivateKey/LoginWithPrivateKey'
-import LoginTrezor from '../../components/LoginWithTrezor/LoginWithTrezor'
-import LoginWithWallet from '../../components/LoginWithWallet/LoginWithWallet'
-
+import { Button } from 'components'
+
+import {
+  navigateToMnemonicImportMethod,
+  navigateToPrivateKeyImportMethod,
+  navigateToCreateAccount,
+  initImportMethodsPage,
+  navigateToCreateAccountWithoutImport,
+} from '@chronobank/login/redux/network/actions'
+
+import Trezor from 'assets/img/icons/trezor-white.svg'
+import Ledger from 'assets/img/icons/ledger-nano-white.svg'
+import Plugin from 'assets/img/icons/plugin-white.svg'
+import Mnemonic from 'assets/img/icons/mnemonic-white.svg'
+import Key from 'assets/img/icons/key-white.svg'
+import Wallet from 'assets/img/icons/wallet-white.svg'
+import Uport from 'assets/img/icons/uport.svg'
+
+// import styles from 'layouts/Splash/styles'
 import './LoginWithOptions.scss'
 
-export const STEP_SELECT_OPTION = 'step/SELECT_OPTION'
-export const STEP_GENERATE_WALLET = 'step/GENERATE_WALLET'
-export const STEP_GENERATE_MNEMONIC = 'step/GENERATE_MNEMONIC'
-export const STEP_LOGIN_WITH_MNEMONIC = 'step/LOGIN_WITH_MNEMONIC'
-
-const STEP_LOGIN_WITH_WALLET = 'step/LOGIN_WITH_WALLET'
-const STEP_LOGIN_WITH_PRIVATE_KEY = 'step/LOGIN_WITH_PRIVATE_KEY'
-const STEP_LOGIN_WITH_LEDGER = 'step/LOGIN_WITH_LEDGER'
-const STEP_LOGIN_WITH_TREZOR = 'step/LOGIN_WITH_TREZOR'
-const STEP_LOGIN_WITH_METAMASK = 'step/LOGIN_WITH_METAMASK'
-const STEP_LOGIN_WITH_UPORT = 'step/LOGIN_WITH_UPORT'
-const STEP_LOGIN_LOCAL = 'step/LOGIN_LOCAL'
-
-const T = () => true
-
-const loginOptions = [
-  {
-    nextStep: STEP_LOGIN_WITH_MNEMONIC,
-    title: 'LoginWithOptions.mnemonicKey',
-    showOption: T,
-  },
-  {
-    nextStep: STEP_LOGIN_WITH_WALLET,
-    title: 'LoginWithOptions.walletFile',
-    showOption: T,
-  },
-  {
-    nextStep: STEP_LOGIN_WITH_PRIVATE_KEY,
-    title: 'LoginWithOptions.privateKey',
-    showOption: T,
-  },
-  {
-    nextStep: STEP_LOGIN_WITH_LEDGER,
-    title: 'LoginWithOptions.ledgerNano',
-    showOption: T,
-  },
-  {
-    nextStep: STEP_LOGIN_WITH_TREZOR,
-    title: 'LoginWithOptions.trezor',
-    showOption: T,
-  },
-  {
-    nextStep: STEP_LOGIN_WITH_METAMASK,
-    title: 'LoginWithOptions.metamask',
-    showOption: ({ isMetamask }) => isMetamask,
-  },
-  {
-    nextStep: STEP_LOGIN_WITH_UPORT,
-    title: 'LoginWithOptions.uport',
-    showOption: T,
-  },
-  {
-    nextStep: STEP_LOGIN_LOCAL,
-    title: 'LoginWithOptions.local',
-    showOption: ({ isLocal }) => isLocal,
-  },
-]
-
-class LoginOption extends PureComponent {
-  static propTypes = {
-    option: PropTypes.shape({
-      title: PropTypes.string.isRequired,
-      nextStep: PropTypes.string.isRequired,
-    }).isRequired,
-    onClick: PropTypes.func,
-  }
-
-  handleClick = () => this.props.onClick(this.props.option.nextStep)
-
-  render () {
-    return (
-      <div
-        key={this.props.option.title}
-        styleName='optionBox'
-        onClick={this.handleClick}
-      >
-        <div styleName='optionName'><Translate value={this.props.option.title} /></div>
-        <div className='material-icons' styleName='arrow'>arrow_forward</div>
-      </div>
-    )
+function mapDispatchToProps (dispatch) {
+  return {
+    navigateToMnemonicImportMethod: () => dispatch(navigateToMnemonicImportMethod()),
+    navigateToPrivateKeyImportMethod: () => dispatch(navigateToPrivateKeyImportMethod()),
+    navigateToCreateAccount: () => dispatch(navigateToCreateAccount()),
+    navigateToCreateAccountWithoutImport: () => dispatch(navigateToCreateAccountWithoutImport()),
+    initImportMethodsPage: () => dispatch(initImportMethodsPage()),
   }
 }
 
-const mapStateToProps = (state) => ({
-  wallets: state.get('multisigWallet'),
-  selectedNetworkId: state.get('network').selectedNetworkId,
-  accounts: state.get('network').accounts,
-  isLocal: state.get('network').isLocal,
-  isMetamask: state.get('network').isMetamask,
-})
-
-const mapDispatchToProps = (dispatch) => {
-  return ({
-    addError: (error) => dispatch(addError(error)),
-    clearErrors: () => dispatch(clearErrors()),
-    loading: () => dispatch(loading()),
-    loginLedger: () => loginLedger(),
-    loginTrezor: () => loginTrezor(),
-    setIsMnemonic: () => dispatch({ type: NETWORK_SET_TEST_MNEMONIC }),
-    setIsWalletFile: () => dispatch({ type: NETWORK_SET_TEST_WALLET_FILE }),
-  })
-}
-
-@connect(mapStateToProps, mapDispatchToProps)
-class LoginWithOptions extends PureComponent {
+@connect(null, mapDispatchToProps)
+export default class ImportMethodsPage extends PureComponent {
   static propTypes = {
-    isLocal: PropTypes.bool,
-    isMetamask: PropTypes.bool,
-    accounts: PropTypes.arrayOf(PropTypes.string),
-    onLogin: PropTypes.func,
-    addError: PropTypes.func,
-    clearErrors: PropTypes.func,
-    onToggleProvider: PropTypes.func,
-    selectedNetworkId: PropTypes.number,
-    loading: PropTypes.func,
-    loginLedger: PropTypes.func,
-    loginTrezor: PropTypes.func,
-    setIsMnemonic: PropTypes.func,
-    setIsWalletFile: PropTypes.func,
-  }
-
-  constructor (props, context, updater) {
-    super(props, context, updater)
-    this.state = {
-      step: STEP_SELECT_OPTION,
-    }
-  }
-
-  handleMnemonicLogin = (mnemonicKey) => {
-    this.props.loading()
-    this.props.clearErrors()
-    const provider = mnemonicProvider.getMnemonicProvider(mnemonicKey, networkService.getProviderSettings())
-    networkService.selectAccount(provider.ethereum.getAddress())
-    this.props.setIsMnemonic()
-    this.setupAndLogin(provider)
-  }
-
-  handlePrivateKeyLogin = (privateKey) => {
-    this.props.loading()
-    this.props.clearErrors()
-    try {
-      const provider = privateKeyProvider.getPrivateKeyProvider(privateKey, networkService.getProviderSettings(), this.props.wallets)
-      networkService.selectAccount(provider.ethereum.getAddress())
-      this.setupAndLogin(provider)
-    } catch (e) {
-      this.props.addError(e.message)
-    }
-  }
-
-  handleLoginLocal = (account) => {
-    this.props.clearErrors()
-    try {
-      const index = Math.max(this.props.accounts.indexOf(account), 0)
-      const provider = privateKeyProvider.getPrivateKeyProvider(LOCAL_PRIVATE_KEYS[index], networkService.getProviderSettings(), this.props.wallets)
-      this.setupAndLogin(provider)
-    } catch (e) {
-      this.props.addError(e.message)
-    }
+    navigateToMnemonicImportMethod: PropTypes.func,
+    navigateToPrivateKeyImportMethod: PropTypes.func,
+    initImportMethodsPage: PropTypes.func,
+    navigateToCreateAccountWithoutImport: PropTypes.func,
   }
 
-  handleLedgerLogin = () => {
-    this.props.loading()
-    this.props.clearErrors()
-    try {
-      ledgerProvider.setupAndStart(networkService.getProviderURL())
-      const provider = ledgerProvider.getNetworkProvider(networkService.getProviderSettings())
-      this.setupAndLogin(provider)
-    } catch (e) {
-      this.props.addError(e.message)
-    }
+  componentWillMount(){
+    this.props.initImportMethodsPage()
   }
 
-  handleTrezorLogin = () => {
-    this.props.loading()
-    this.props.clearErrors()
-    try {
-      trezorProvider.setupAndStart(networkService.getProviderURL())
-      const provider = trezorProvider.getNetworkProvider(networkService.getProviderSettings())
-      this.setupAndLogin(provider)
-    } catch (e) {
-      this.props.addError(e.message)
-    }
-  }
-
-  handleWalletUpload = (wallet, password) => {
-    this.props.loading()
-    this.props.clearErrors()
-    try {
-      const provider = walletProvider.getProvider(wallet, password, networkService.getProviderSettings())
-      networkService.selectAccount(provider.ethereum.getAddress())
-      this.props.setIsWalletFile()
-      this.setupAndLogin(provider)
-    } catch (e) {
-      this.props.addError(e.message)
-    }
-  }
-
-  handleChangeOption = (step) => {
-    this.props.clearErrors()
-    this.setStep(step)
-  }
-
-  handleSelectStepSelectOption = () => this.handleChangeOption(STEP_SELECT_OPTION)
+  handleMnemonicLogin = () => this.props.navigateToMnemonicImportMethod()
 
-  handleSelectStepGenerateWallet = () => this.handleChangeOption(STEP_GENERATE_WALLET)
+  handlePrivateKeyLogin = () => this.props.navigateToPrivateKeyImportMethod()
 
-  handleSelectStepGenerateMnemonic = () => this.handleChangeOption(STEP_GENERATE_MNEMONIC)
+  handleWalletFileLogin = () => {}
 
-  handleSelectStepLoginWithMnemonic = () => this.handleChangeOption(STEP_LOGIN_WITH_MNEMONIC)
-
-  handleSelectStepLoginWithWallet = () => this.handleChangeOption(STEP_LOGIN_WITH_WALLET)
-
-  handleToggleProvider (step) {
-    this.props.onToggleProvider(step !== STEP_GENERATE_WALLET && step !== STEP_GENERATE_MNEMONIC)
-  }
-
-  async setupAndLogin (provider) {
-    try {
-      await networkService.setup(provider)
-      this.props.onLogin()
-    } catch (e) {
-      // eslint-disable-next-line
-      console.error('login error', e.message)
-    }
-  }
-
-  setStep (step) {
-    this.setState({ step })
-    this.handleToggleProvider(step)
-  }
-
-  checkOption = (option) => {
-    return option.showOption(this.props)
-  }
-
-  renderOption = (option) => (
-    <LoginOption
-      key={option.title}
-      option={option}
-      onClick={this.handleChangeOption}
-    />
-  )
-
-  renderOptions () {
-    return loginOptions
-      .filter(this.checkOption)
-      .map(this.renderOption)
-  }
-
-  renderStep (step) {
-    const renderer = `render${pascalCase(step)}`
-    return this[renderer] ? this[renderer]() : null
-  }
-
-  renderStepSelectOption () {
-    const { selectedNetworkId } = this.props
-
-    if (!selectedNetworkId) {
-      return null
-    }
-
-    return (
-      <div>
-        <div styleName='optionTitle'>{<Translate value='LoginWithOptions.selectLoginOption' />}</div>
-        <div>{this.renderOptions()}</div>
-      </div>
-    )
-  }
-
-  renderStepLoginWithMnemonic () {
-    return (
-      <LoginWithMnemonic
-        onLogin={this.handleMnemonicLogin}
-        onGenerate={this.handleSelectStepGenerateMnemonic}
-        onBack={this.handleSelectStepSelectOption}
-      />
-    )
-  }
-
-  renderStepLoginWithUport () {
-    return (
-      <LoginUPort
-        onLogin={this.props.onLogin}
-        onBack={this.handleSelectStepSelectOption}
-      />
-    )
-  }
-
-  renderStepLoginWithWallet () {
-    return (
-      <LoginWithWallet
-        onLogin={this.handleWalletUpload}
-        onBack={this.handleSelectStepSelectOption}
-        onGenerate={this.handleSelectStepGenerateWallet}
-      />
-    )
-  }
-
-  renderStepLoginWithPrivateKey () {
-    return (
-      <LoginWithPrivateKey
-        onLogin={this.handlePrivateKeyLogin}
-        onBack={this.handleSelectStepSelectOption}
-      />
-    )
-  }
-
-  renderStepGenerateWallet () {
-    return (
-      <GenerateWallet
-        onBack={this.handleSelectStepLoginWithWallet}
-      />
-    )
-  }
-
-  renderStepGenerateMnemonic () {
-    return (
-      <GenerateMnemonic
-        onBack={this.handleSelectStepLoginWithMnemonic}
-      />
-    )
-  }
-
-  renderStepLoginWithLedger () {
-    return (
-      <LoginLedger
-        onLogin={this.handleLedgerLogin}
-        onBack={this.handleSelectStepSelectOption}
-      />
-    )
-  }
-
-  renderStepLoginWithTrezor () {
-    return (
-      <LoginTrezor
-        onLogin={this.handleTrezorLogin}
-        onBack={this.handleSelectStepSelectOption}
-      />
-    )
-  }
-
-  renderStepLoginWithMetamask () {
-    return (
-      <LoginMetamask
-        onLogin={this.props.onLogin}
-        onBack={this.handleSelectStepSelectOption}
-      />
-    )
-  }
-
-  renderStepLoginLocal () {
-    return (
-      <LoginLocal
-        onLogin={this.handleLoginLocal}
-        onBack={this.handleSelectStepSelectOption}
-      />
-    )
-  }
+  handleCreateAccount = () => this.props.navigateToCreateAccountWithoutImport()
 
   render () {
-    const { step } = this.state
-
     return (
-      <div>
-        {this.renderStep(step)}
-      </div>
+      <MuiThemeProvider>
+        <div styleName='page'>
+
+          <div styleName='page-title'>Add an Existing Account</div>
+
+          <div styleName='methods'>
+            <Button styleName='button button-trezor' disabled>
+              <img src={Trezor} alt='' />
+              <br />
+              Trezor
+            </Button>
+
+            <Button styleName='button button-ledger' disabled>
+              <img src={Ledger} alt='' />
+              <br />
+              LedgerNano
+            </Button>
+
+            <Button styleName='button button-plugin' disabled>
+              <img src={Plugin} alt='' />
+              <br />
+              Browser Plugin
+            </Button>
+
+            <Button
+              styleName='button'
+              onClick={this.handleMnemonicLogin}
+            >
+              <img src={Mnemonic} alt='' />
+              <br />
+              Mnemonic
+            </Button>
+
+            <Button
+              styleName='button'
+              onClick={this.handlePrivateKeyLogin}
+            >
+              <img src={Key} alt='' />
+              <br />
+              Private Key
+            </Button>
+
+            <Button
+              styleName='button'
+              onClick={this.handleWalletFileLogin}
+              disabled
+            >
+              <img src={Wallet} alt='' />
+              <br />
+              Wallet File
+            </Button>
+
+            <Button
+              styleName='button button-uport'
+              disabled
+            >
+              <img src={Uport} alt='' />
+              <br />
+              Uport
+            </Button>
+          </div>
+
+          <div styleName='actions'>
+            or <br />
+            <Link to='/login/create-account' href styleName='link' onClick={this.handleCreateAccount}>Create New Account</Link>
+          </div>
+
+        </div>
+      </MuiThemeProvider>
     )
   }
 }
-
-export default LoginWithOptions
diff --git a/packages/login-ui/components/LoginWithOptions/LoginWithOptions.scss b/packages/login-ui/components/LoginWithOptions/LoginWithOptions.scss
index 873e81447..d18a725c9 100644
--- a/packages/login-ui/components/LoginWithOptions/LoginWithOptions.scss
+++ b/packages/login-ui/components/LoginWithOptions/LoginWithOptions.scss
@@ -6,37 +6,119 @@
 @import "~styles/partials/variables";
 @import "~styles/partials/mixins";
 
-.optionBox {
+ul.actions {
+  position: absolute;
+  top: 30px;
+  right: 80px;
   display: flex;
-  cursor: pointer;
-  transition: all 0.2s;
-  padding: 16px 8px 16px 16px;
-  border-bottom: 1px solid rgba($color-white, 0.1);
+  justify-content: flex-end;
+  flex: 0 0 auto;
+  padding: 0;
+  list-style: none;
+  font-size: 18px;
+  line-height: 48px;
 
-  &:last-child {
-    border-bottom: 0;
-    border-radius: 0 0 $border-radius $border-radius;
+  @include md-only {
+    top: 10px;
+    right: 10px;
+    flex: 1 1 auto;
   }
 
-  &:first-child {
-    border-radius: $border-radius $border-radius 0 0;
-  }
+  li {
 
-  &:hover {
-    background-color: rgba($color-white, 0.2);
+    flex: 0 0 auto;
+
+    a {
+      padding: 10px 20px;
+      text-decoration: none;
+      color: $color-white;
+
+      &:hover {
+        text-decoration: underline;
+      }
+    }
   }
 }
 
-.optionTitle {
-  margin-bottom: 16px;
-  margin-top: 24px;
-  opacity: 0.6;
+.page {
+  max-width: 350px;
+  margin:0 auto;
+
+}
+
+.page-title {
+  color: $color-white;
+  font-weight: 700;
+  font-size: 30px;
+  line-height: 42px;
+  margin-bottom: 40px;
+  text-align: center;
+}
+
+.user-row {
+  border-top: 1px solid $color-purpule;
+}
+
+.methods {
+  margin-bottom: 15px;
+  display: flex;
+  justify-content: space-around;
+  flex-wrap: wrap;
+}
+
+.button {
+  width: 31%;
+  margin-bottom: 10px;
+
+  &.button-uport {
+    display: none;
+
+    @include xs-only {
+      display: inline-block;
+    }
+  }
+
+  &.button-trezor,
+  &.button-ledger,
+  &.button-plugin {
+    @include xs-only {
+      display: none;
+    }
+  }
+
+  button {
+    width: 100%;
+    height: 100px;
+    padding: 0;
+    text-transform: none;
+    border-radius: 3px;
+  }
+
+  img {
+    width: 50px;
+    margin-bottom: 5px;
+  }
 }
 
-.optionName {
-  flex-grow: 1;
+.actions {
+  text-align: center;
+  margin-bottom: 45px;
+  color: #fff;
+  line-height: 30px;
 }
 
-.arrow {
-  opacity: 0.6;
+.link {
+  color: $border-color;
+  margin:  0 auto 45px;
+  text-decoration: none;
+  cursor: pointer;
+  font: 700 16px $font-proxima;
+
+  &:hover {
+    color: #FFB54E;
+  }
+
+  @include md-only {
+    margin: 0 0 10px;
+  }
 }
diff --git a/packages/login-ui/components/LoginWithPrivateKey/LoginWithPrivateKey.js b/packages/login-ui/components/LoginWithPrivateKey/LoginWithPrivateKey.js
index 0f3253b84..a46af14ea 100644
--- a/packages/login-ui/components/LoginWithPrivateKey/LoginWithPrivateKey.js
+++ b/packages/login-ui/components/LoginWithPrivateKey/LoginWithPrivateKey.js
@@ -3,86 +3,73 @@
  * Licensed under the AGPL Version 3 license.
  */
 
-import privateKeyProvider from '@chronobank/login/network/privateKeyProvider'
-import { CircularProgress, TextField } from 'material-ui'
-import PropTypes from 'prop-types'
+import { MuiThemeProvider } from 'material-ui'
 import React, { PureComponent } from 'react'
 import { connect } from 'react-redux'
-import { Translate } from 'react-redux-i18n'
-import BackButton from '../../components/BackButton/BackButton'
-import styles from '../../components/stylesLoginPage'
+import { Link } from 'react-router'
+import { reduxForm, Field } from 'redux-form/immutable'
+import { TextField } from 'redux-form-material-ui'
+import styles from 'layouts/Splash/styles'
+import { Button } from 'components'
+import {
+  onSubmitPrivateKeyLoginForm,
+  onSubmitPrivateKeyLoginFormSuccess,
+  onSubmitPrivateKeyLoginFormFail,
+} from '@chronobank/login/redux/network/actions'
 
 import './LoginWithPrivateKey.scss'
-import { Button } from '../../settings'
 
-const mapStateToProps = (state) => ({
-  isLoading: state.get('network').isLoading,
-})
+export const FORM_PRIVATE_KEY_LOGIN_PAGE = 'FormPrivateKeyLoginPage'
 
-@connect(mapStateToProps, null)
-class LoginWithPrivateKey extends PureComponent {
-  static propTypes = {
-    isLoading: PropTypes.bool,
-    onBack: PropTypes.func.isRequired,
-    onLogin: PropTypes.func.isRequired,
-  }
-
-  constructor () {
-    super()
-    this.state = {
-      privateKey: '',
-      isValidated: false,
-    }
-  }
-
-  handlePrivateKeyChange = () => {
-    const privateKey = this.privateKey.getValue()
-    const isValidated = privateKeyProvider.validatePrivateKey(privateKey.trim())
-    this.setState({ privateKey, isValidated })
+function mapDispatchToProps (dispatch) {
+  return {
+    onSubmit: (values) => {
+      const privateKey = values.get('pk')
+      dispatch(onSubmitPrivateKeyLoginForm(privateKey))
+    },
+    onSubmitSuccess: () => dispatch(onSubmitPrivateKeyLoginFormSuccess()),
+    onSubmitFail: (errors, dispatch, submitErrors) => dispatch(onSubmitPrivateKeyLoginFormFail(errors, dispatch, submitErrors)),
   }
+}
 
+class MnemonicLoginPage extends PureComponent {
   render () {
-    const { isValidated, privateKey } = this.state
-    const { isLoading } = this.props
+    const { handleSubmit } = this.props
+
     return (
-      <div>
-        <div styleName='back'>
-          <BackButton
-            onClick={() => this.props.onBack()}
-            to='options'
-          />
-        </div>
-        <TextField
-          ref={(input) => {
-            this.privateKey = input
-          }}
-          floatingLabelText={<Translate value='LoginWithPrivateKey.privateKey' />}
-          value={privateKey}
-          onChange={this.handlePrivateKeyChange}
-          errorText={(isValidated || privateKey === '') ? '' : <Translate value='LoginWithPrivateKey.wrongPrivateKey' />}
-          multiLine
-          fullWidth
-          spellCheck={false}
-          {...styles.textField}
-        />
+      <MuiThemeProvider muiTheme={styles.inverted}>
+        <form styleName='form' name={FORM_PRIVATE_KEY_LOGIN_PAGE} onSubmit={handleSubmit}>
 
-        <div styleName='actions'>
-          <div styleName='action'>
-            <Button
-              label={isLoading
-                ? <CircularProgress
-                  style={{ verticalAlign: 'middle', marginTop: -2 }}
-                  size={24}
-                  thickness={1.5}
-                /> : <Translate value='LoginWithPrivateKey.loginWithPrivateKey' />}
-              disabled={!isValidated || isLoading}
-              onClick={() => this.props.onLogin(privateKey)}
+          <div styleName='page-title'>Private key form</div>
+
+          <div styleName='field'>
+            <Field
+              component={TextField}
+              name='pk'
+              type='text'
+              floatingLabelText='Private key'
+              fullWidth
+              {...styles.textField}
             />
           </div>
-        </div>
-      </div>
+
+          <div styleName='actions'>
+            <Button
+              styleName='button'
+              buttonType='login'
+              type='submit'
+            >
+              Login
+            </Button>
+            or&nbsp;
+            <Link to='/login/import-methods' href styleName='link'>back</Link>
+          </div>
+
+        </form>
+      </MuiThemeProvider>
     )
   }
 }
 
-export default LoginWithPrivateKey
+const form = reduxForm({ form: FORM_PRIVATE_KEY_LOGIN_PAGE })(MnemonicLoginPage)
+export default connect(null, mapDispatchToProps)(form)
diff --git a/packages/login-ui/components/LoginWithPrivateKey/LoginWithPrivateKey.scss b/packages/login-ui/components/LoginWithPrivateKey/LoginWithPrivateKey.scss
index 67de2be20..6d524ee18 100644
--- a/packages/login-ui/components/LoginWithPrivateKey/LoginWithPrivateKey.scss
+++ b/packages/login-ui/components/LoginWithPrivateKey/LoginWithPrivateKey.scss
@@ -3,18 +3,92 @@
  * Licensed under the AGPL Version 3 license.
  */
 
-.actions {
+@import "~styles/partials/variables";
+@import "~styles/partials/mixins";
+
+ul.actions {
+  position: absolute;
+  top: 30px;
+  right: 80px;
   display: flex;
-  margin-top: 20px;
   justify-content: flex-end;
+  flex: 0 0 auto;
+  padding: 0;
+  list-style: none;
+  font-size: 18px;
+  line-height: 48px;
+
+  @include md-only {
+    top: 10px;
+    right: 10px;
+    flex: 1 1 auto;
+  }
+
+  li {
+
+    flex: 0 0 auto;
+
+    a {
+      padding: 10px 20px;
+      text-decoration: none;
+      color: $color-white;
+
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+  }
 }
 
-.action {
-  width: 50%;
-  display: flex;
-  justify-content: flex-end;
+.form {
+  max-width: 380px;
+  margin:0 auto;
+
+  @include xs-only {
+    padding: 0 20px;
+  }
+}
+
+.page-title {
+  color: $color-white;
+  font-weight: 700;
+  font-size: 30px;
+  line-height: 42px;
+  margin-bottom: 40px;
+  text-align: center;
 }
 
-.back {
-  margin-top: 24px;
-}
\ No newline at end of file
+.user-row {
+  border-top: 1px solid $color-purpule;
+}
+
+.field {
+  margin-bottom: 50px;
+}
+
+.button {
+  text-align: center;
+  margin-bottom: 30px;
+}
+
+.actions {
+  text-align: center;
+  margin-bottom: 45px;
+  color: #fff;
+  line-height: 30px;
+}
+
+.link {
+  color: $border-color;
+  margin:  0 auto 45px;
+  text-decoration: none;
+  font: 700 16px $font-proxima;
+
+  &:hover {
+    color: #FFB54E;
+  }
+
+  @include md-only {
+    margin: 0 0 10px;
+  }
+}
diff --git a/packages/login-ui/components/LoginWithWallet/LoginWithWallet.js b/packages/login-ui/components/LoginWithWallet/LoginWithWallet.js
index 997d2a574..feee9c663 100644
--- a/packages/login-ui/components/LoginWithWallet/LoginWithWallet.js
+++ b/packages/login-ui/components/LoginWithWallet/LoginWithWallet.js
@@ -3,192 +3,80 @@
  * Licensed under the AGPL Version 3 license.
  */
 
-import { clearErrors, loading } from '@chronobank/login/redux/network/actions'
-import { CircularProgress, FlatButton, TextField } from 'material-ui'
 import PropTypes from 'prop-types'
-import React, { PureComponent } from 'react'
-import { connect } from 'react-redux'
-import { Translate } from 'react-redux-i18n'
-import BackButton from '../../components/BackButton/BackButton'
-import styles from '../../components/stylesLoginPage'
-import './LoginWithWallet.scss'
-import { Button } from '../../settings'
-
-const mapStateToProps = (state) => ({
-  isLoading: state.get('network').isLoading,
-})
+import classnames from 'classnames'
+import { MuiThemeProvider } from 'material-ui'
+import { reduxForm, Field } from 'redux-form/immutable'
+import React, { Component } from 'react'
+import { Link } from 'react-router'
+import { UserRow, Button } from 'components'
+
+import FileIcon from 'assets/img/icons/file-white.svg'
+import DeleteIcon from 'assets/img/icons/delete-white.svg'
+import SpinnerGif from 'assets/img/spinningwheel.gif'
+import WarningIcon from 'assets/img/icons/warning.svg'
+import CheckIcon from 'assets/img/icons/check-green.svg'
 
-const mapDispatchToProps = (dispatch) => ({
-  clearErrors: () => dispatch(clearErrors()),
-  loading: (isLoading) => dispatch(loading(isLoading)),
-})
+import './LoginWithWallet.scss'
 
-@connect(mapStateToProps, mapDispatchToProps)
-class LoginWithWallet extends PureComponent {
+export default class LoginWithWallet extends Component {
   static propTypes = {
-    isLoading: PropTypes.bool,
-    onBack: PropTypes.func.isRequired,
-    onGenerate: PropTypes.func.isRequired,
-    onLogin: PropTypes.func.isRequired,
-    clearErrors: PropTypes.func,
-    loading: PropTypes.func,
-  }
-
-  constructor () {
-    super()
-    this.state = {
-      password: '',
-      wallet: null,
-      isUploaded: false,
-      isUploading: false,
-      fileName: '',
-    }
-  }
-
-  handleFileUploaded = (e) => {
-    this.props.clearErrors()
-    this.setState({
-      isUploading: false,
-      isUploaded: true,
-      wallet: e.target.result,
-    })
-  }
-
-  handleUploadFile = (e) => {
-    const file = e.target.files[ 0 ]
-    if (!file) {
-      return
-    }
-    this.setState({
-      isUploading: true,
-      fileName: file.name,
-    })
-    const reader = new FileReader()
-    reader.onload = this.handleFileUploaded
-    reader.readAsText(file)
-    this.props.clearErrors()
-  }
-
-  handlePasswordChange = (target, value) => {
-    this.setState({ password: value })
-    this.props.clearErrors()
-  }
-
-  handleEnterPassword = () => {
-    this.props.clearErrors()
-    this.forceUpdate()
-    this.props.onLogin(this.state.wallet, this.state.password)
+    mnemonic: PropTypes.string,
   }
 
-  handleRemoveWallet = () => {
-    this.setState({
-      wallet: null,
-      isUploaded: false,
-      isUploading: false,
-      fileName: '',
-    })
-    this.walletFileUploadInput.value = ''
+  static defaultProps = {
+    mnemonic: '',
   }
 
   render () {
-    const { isLoading } = this.props
-    const {
-      password, isUploading, isUploaded, fileName,
-    } = this.state
-
     return (
-      <div styleName='root'>
-        <div styleName='back'>
-          <BackButton
-            onClick={this.props.onBack}
-            to='options'
-          />
-        </div>
-        <div>
-
-          {!isUploaded && !isUploading && (
-            <div
-              styleName='upload'
-              onClick={() => this.walletFileUploadInput.click()}
-            >
-              <div styleName='uploadContent'>{<Translate value='LoginWithWallet.uploadWalletFile' />}</div>
+      <MuiThemeProvider>
+        <div styleName='wrapper'>
+          <div>
+            <div styleName='page-title'>Upload a Wallet File</div>
+
+            <p styleName='description'>
+              Upload a wallet file to add the login information to your browser.
+              We provide the file on New Account Creation.
+            </p>
+
+            <div styleName='row'>
+              <Button styleName='button' buttonType='login'>
+                <img styleName='before-img' src={FileIcon} alt='' />
+                <span styleName='button-text'>Browse for a Wallet File</span>
+              </Button>
+
+              <Button styleName='button' buttonType='login' disabled>
+                <img styleName='before-img' src={SpinnerGif} alt='' />
+                <span styleName='button-text'>Uploading</span>
+                <img styleName='after-img' src={DeleteIcon} alt='' />
+              </Button>
+
+              <Button styleName='button' buttonType='login' disabled>
+                <img styleName='before-img' src={CheckIcon} alt='' />
+                <span styleName='button-text'>Uploading</span>
+                <img styleName='after-img' src={DeleteIcon} alt='' />
+              </Button>
+
+              <Button styleName='button button-warning' buttonType='login' disabled>
+                <img styleName='before-img' src={WarningIcon} alt='' />
+                <span styleName='button-text'>Upload Error</span>
+                <img styleName='after-img' src={FileIcon} alt='' />
+              </Button>
             </div>
-          )}
 
-          {isUploading && (
-            <div styleName='progress'>
-              <CircularProgress
-                size={16}
-                color={styles.colors.colorPrimary1}
-                thickness={1.5}
-              />
-              <span styleName='progressText'>{<Translate value='LoginWithWallet.uploading' />}</span>
+            <div styleName='actions'>
+              <Button styleName='submit' buttonType='login' disabled>
+                Proceed to login
+              </Button>
+              or
+              <br />
+              <Link to='/login' href styleName='link'>Back</Link>
             </div>
-          )}
-
-          {isUploaded && (
-            <div styleName='uploaded'>
-              <div styleName='walletIcon' className='material-icons'>attachment</div>
-              <div styleName='walletName'>{fileName}</div>
-              <div
-                styleName='walletRemove'
-                className='material-icons'
-                onClick={this.handleRemoveWallet}
-              >delete
-              </div>
-            </div>
-          )}
-
-          <input
-            onChange={this.handleUploadFile}
-            ref={(input) => this.walletFileUploadInput = input}
-            type='file'
-            styleName='hide'
-          />
-        </div>
-
-        <TextField
-          floatingLabelText={<Translate value='LoginWithWallet.enterPassword' />}
-          type='password'
-          value={password}
-          onChange={this.handlePasswordChange}
-          required
-          fullWidth
-          {...styles.textField}
-        />
-
-        {isLoading && (
-          <div styleName='tip'>
-            <em>{<Translate value='LoginWithWallet.bePatient' />}</em>
-          </div>
-        )}
 
-        <div styleName='actions'>
-          <div styleName='action'>
-            <Button
-              flat
-              styleName='whiteButton'
-              label={<Translate value='LoginWithWallet.generateNewWallet' />}
-              fullWidth
-              disabled={isLoading}
-              onClick={this.props.onGenerate}
-            />
-          </div>
-          <div styleName='action'>
-            <Button
-              label={isLoading ? <CircularProgress
-                style={{ verticalAlign: 'middle', marginTop: -2 }}
-                size={24}
-                thickness={1.5}
-              /> : <Translate value='LoginWithWallet.login' />}
-              disabled={isLoading || !isUploaded || !password || password === ''}
-              onClick={this.handleEnterPassword}
-            />
           </div>
         </div>
-      </div>
+      </MuiThemeProvider>
     )
   }
 }
-
-export default LoginWithWallet
diff --git a/packages/login-ui/components/LoginWithWallet/LoginWithWallet.scss b/packages/login-ui/components/LoginWithWallet/LoginWithWallet.scss
index 106d35416..6eea2ae81 100644
--- a/packages/login-ui/components/LoginWithWallet/LoginWithWallet.scss
+++ b/packages/login-ui/components/LoginWithWallet/LoginWithWallet.scss
@@ -4,108 +4,105 @@
  */
 
 @import "~styles/partials/variables";
-@import '../LoginPageShared';
+@import "~styles/partials/mixins";
 
-$gutter: 16px;
-
-// TODO @dkchv: will be moved to mui lib
-%mui-button-secondary {
-  border-radius: $border-radius;
-  background-color: $color-white;
-}
-
-%mui-button-secondary-content {
-  padding: 10px;
-  display: flex;
-  justify-content: center;
-  color: $color-blue;
-  text-transform: uppercase;
-  font-weight: 500;
-  font-size: 14px;
-}
-
-.root {
-  margin-top: 24px;
-}
+.wrapper {
+  text-align: center;
+  max-width: 600px;
+  margin: 0 auto;
+  color: #fff;
 
-.buttonIcon {
-  @extend %buttonIcon;
-  font-size: 16px;
-  color: $color-primary-1;
+  @include md-only {
+    padding: 0 20px;
+  }
 }
 
-.hide {
-  display: none;
+.page-title {
+  font-size: 30px;
+  margin-bottom: 10px;
+  font-weight: 700;
 }
 
-.back {
-  margin-bottom: 16px;
-}
+.description {
+  margin-bottom: 50px;
+  color: $additionalData-color-1;
+  line-height: 22px;
+  font-weight: 400;
 
-.upload {
-  @extend %mui-button-secondary;
-  cursor: pointer;
+  @include md-only {
+    margin-bottom: 20px;
+  }
 }
 
-.uploadContent {
-  @extend %mui-button-secondary-content;
+.link {
+  color: $border-color;
+  margin:  0 auto 45px;
+  text-decoration: none;
+  font: 700 16px $font-proxima;
 
   &:hover {
-    background-color: rgba($color-blue, 0.4);
+    color: #FFB54E;
   }
-}
 
-.progress {
-  @extend %mui-button-secondary;
-  @extend %mui-button-secondary-content;
+  @include md-only {
+    margin: 0 0 10px;
+  }
 }
 
-.progressText {
-  margin-left: 10px;
+.submit {
+  margin-bottom: 25px;
 }
 
-.uploaded {
-  @extend %mui-button-secondary;
-  @extend %mui-button-secondary-content;
-  align-items: center;
+.row {
+  margin-bottom: 50px;
 }
 
-.walletIcon {
-  flex-grow: 0;
-  margin-right: 5px;
-}
+.button {
+  button {
+    display: flex;
+    align-items: center;
+    padding: 0 20px;
+    line-height: 45px;
+    min-width: 280px;
+    margin: 0 auto 20px;
+    text-transform: none;
+
+    &:disabled {
+      background: $background-color-1;
+    }
+  }
 
-.walletName {
-  flex-grow: 1;
-}
+  &.button-warning button {
+    background: $color-red-2;
+  }
+  .button-text {
+    flex: 1;
+    text-align: left;
+  }
 
-.walletRemove {
-  flex-grow: 0;
-  margin-left: 10px;
-  cursor: pointer;
-}
+  .before-img {
+    width: 24px;
+    display: inline-block;
+    margin-right: 5px;
+  }
 
-.tip {
-  margin-top: 10px;
-  text-align: center;
-  color: white;
-  font-weight: 300;
+  .after-img {
+    width: 24px;
+    display: inline-block;
+  }
 }
 
 .actions {
-  display: flex;
-  margin: 24px (-$gutter / 2) 0;
+  text-align: center;
+  margin-bottom: 45px;
+  color: $additionalData-color-1;
+  line-height: 30px;
 }
 
-.action {
-  margin: 0 ($gutter / 2);
-  width: 50%;
-  display: flex;
-  justify-content: flex-end;
-}
+.submit {
+  margin-bottom: 25px;
 
-.whiteButton {
-  button {
-    color: $color-white;
+  button:disabled {
+    background: $background-color-1;
   }
-}
\ No newline at end of file
+}
diff --git a/packages/login-ui/components/NetworkSelector/NetworkSelector.js b/packages/login-ui/components/NetworkSelector/NetworkSelector.js
index fc2263b27..0f32607a9 100644
--- a/packages/login-ui/components/NetworkSelector/NetworkSelector.js
+++ b/packages/login-ui/components/NetworkSelector/NetworkSelector.js
@@ -57,6 +57,7 @@ export default class NetworkSelector extends PureComponent {
 
   resolveNetwork = () => {
     const web3 = new Web3()
+    console.log('resolve network', this.props.getProviderURL())
     web3Provider.reinit(web3, web3Utils.createStatusEngine(this.props.getProviderURL()))
     web3Provider.resolve()
   }
diff --git a/packages/login-ui/components/RecoverAccount/RecoverAccount.js b/packages/login-ui/components/RecoverAccount/RecoverAccount.js
new file mode 100644
index 000000000..a346cb752
--- /dev/null
+++ b/packages/login-ui/components/RecoverAccount/RecoverAccount.js
@@ -0,0 +1,128 @@
+/**
+ * Copyright 2017–2018, LaborX PTY
+ * Licensed under the AGPL Version 3 license.
+ */
+
+import { MuiThemeProvider } from 'material-ui'
+import React, { PureComponent } from 'react'
+import { connect } from 'react-redux'
+import PropTypes from 'prop-types'
+import { Link } from 'react-router'
+import { reduxForm, Field } from 'redux-form/immutable'
+import { TextField } from 'redux-form-material-ui'
+import {
+  WalletEntryModel,
+} from 'models/persistAccount'
+import {
+  onSubmitRecoverAccountForm,
+  onSubmitRecoverAccountFormSuccess,
+  onSubmitRecoverAccountFormFail,
+  initRecoverAccountPage,
+} from '@chronobank/login/redux/network/actions'
+
+import { Button, UserRow } from 'components'
+
+import styles from 'layouts/Splash/styles'
+import './RecoverAccount.scss'
+
+export const FORM_RECOVER_ACCOUNT = 'RecoverAccountPage'
+
+function mapStateToProps (state, ownProps) {
+  const selectedWallet = state.get('persistAccount').selectedWallet
+  return {
+    selectedWallet: new WalletEntryModel({...selectedWallet}),
+  }
+}
+
+function mapDispatchToProps (dispatch, ownProps) {
+  return {
+    onSubmit: async (values) => {
+      let words = [], mnemonic = ''
+
+      for (let i = 1; i <= 12; i++) {
+        const word = values.get(`word-${i}`)
+        word && words.push(word)
+      }
+
+      mnemonic = words.join(' ')
+
+      await dispatch(onSubmitRecoverAccountForm(mnemonic))
+    },
+    onSubmitSuccess: () => dispatch(onSubmitRecoverAccountFormSuccess()),
+    onSubmitFail: (errors, dispatch, submitErrors) => dispatch(onSubmitRecoverAccountFormFail(errors, dispatch, submitErrors)),
+    initRecoverAccountPage: () => dispatch(initRecoverAccountPage()),
+  }
+}
+
+class RecoverAccountPage extends PureComponent {
+  static propTypes = {
+    selectedWallet: PropTypes.instanceOf(WalletEntryModel),
+    initRecoverAccountPage: PropTypes.func,
+  }
+
+  componentWillMount(){
+    this.props.initRecoverAccountPage()
+  }
+
+  get getSelectedWalletName(){
+    const { selectedWallet } = this.props
+    return selectedWallet && selectedWallet.name || ''
+  }
+
+  render () {
+    const { handleSubmit, selectedWallet } = this.props
+
+    const wordsArray = new Array(12).fill()
+
+    return (
+      <MuiThemeProvider>
+        <form styleName='form' name={FORM_RECOVER_ACCOUNT} onSubmit={handleSubmit}>
+          <div styleName='title'>
+            Enter mnemonic to reset password
+          </div>
+
+          <div styleName='user-row'>
+            <UserRow
+              title={this.getSelectedWalletName}
+              avatar={'/src/assets/img/profile-photo-1.jpg'}
+              hideActionIcon
+            />
+          </div>
+
+          <div styleName='fields-block'>
+            {
+              wordsArray.map((item, i) => (
+                <Field
+                  key={i}
+                  styleName='field'
+                  component={TextField}
+                  name={`word-${i + 1}`}
+                  floatingLabelText={`Word ${i + 1}`}
+                  fullWidth
+                  {...styles.textField}
+                />
+              ))
+            }
+          </div>
+
+          <div styleName='actions'>
+            <Button
+              styleName='button'
+              buttonType='login'
+              type='submit'
+            >
+              Reset password
+            </Button>
+            or<br />
+            <Link to='/login' href styleName='link'>Back</Link>
+          </div>
+
+        </form>
+
+      </MuiThemeProvider>
+    )
+  }
+}
+
+const form = reduxForm({ form: FORM_RECOVER_ACCOUNT })(RecoverAccountPage)
+export default connect(mapStateToProps, mapDispatchToProps)(form)
diff --git a/packages/login-ui/components/RecoverAccount/RecoverAccount.scss b/packages/login-ui/components/RecoverAccount/RecoverAccount.scss
new file mode 100644
index 000000000..ceaa1309e
--- /dev/null
+++ b/packages/login-ui/components/RecoverAccount/RecoverAccount.scss
@@ -0,0 +1,77 @@
+/**
+ * Copyright 2017–2018, LaborX PTY
+ * Licensed under the AGPL Version 3 license.
+ */
+
+@import "~styles/partials/variables";
+@import "~styles/partials/mixins";
+
+.form {
+  max-width: 380px;
+  margin:0 auto;
+
+  @include xs-only {
+    padding: 0 20px;
+  }
+}
+
+.title {
+  color: $color-white;
+  font-weight: 700;
+  font-size: 30px;
+  line-height: 42px;
+  margin-bottom: 40px;
+  text-align: center;
+}
+
+.actions {
+  text-align: center;
+  margin-bottom: 45px;
+  line-height: 30px;
+  color: #fff;
+}
+
+.link {
+  color: $border-color;
+  margin:  0 auto 45px;
+  text-decoration: none;
+  font: 700 16px $font-proxima;
+
+  &:hover {
+    color: #FFB54E;
+  }
+
+  @include md-only {
+    margin: 0 0 10px;
+  }
+}
+
+.button {
+  text-align: center;
+  margin-bottom: 22px;
+
+  button {
+    padding: 0 30px;
+  }
+}
+
+.actionIcon {
+  transform: matrix(-1,0,0,-1,0,0);
+}
+
+.user-row {
+  border-top: 1px solid $color-purpule;
+  margin-bottom: 10px;
+  color: #fff;
+}
+
+.fields-block {
+  margin-bottom: 50px;
+  display: flex;
+  justify-content: space-between;
+  flex-wrap: wrap;
+}
+
+.field {
+  width: 23% !important;
+}
diff --git a/packages/login-ui/components/ResetPassword/ResetPassword.js b/packages/login-ui/components/ResetPassword/ResetPassword.js
new file mode 100644
index 000000000..8c0d513ab
--- /dev/null
+++ b/packages/login-ui/components/ResetPassword/ResetPassword.js
@@ -0,0 +1,116 @@
+/**
+ * Copyright 2017–2018, LaborX PTY
+ * Licensed under the AGPL Version 3 license.
+ */
+
+import { MuiThemeProvider } from 'material-ui'
+import React, { PureComponent } from 'react'
+import { connect } from 'react-redux'
+import PropTypes from 'prop-types'
+import {
+  WalletEntryModel,
+} from 'models/persistAccount'
+import {
+  onSubmitResetAccountPasswordForm,
+  onSubmitResetAccountPasswordSuccess,
+  onSubmitResetAccountPasswordFail,
+  initResetPasswordPage,
+} from '@chronobank/login/redux/network/actions'
+import { reduxForm, Field } from 'redux-form/immutable'
+import { TextField } from 'redux-form-material-ui'
+import { UserRow, Button } from 'components'
+
+import styles from 'layouts/Splash/styles'
+import validate from './validate'
+import './ResetPassword.scss'
+
+export const FORM_RESET_PASSWORD = 'ResetPasswordPage'
+
+function mapStateToProps (state, ownProps) {
+  const selectedWallet = state.get('persistAccount').selectedWallet
+  return {
+    selectedWallet: new WalletEntryModel({...selectedWallet}),
+  }
+}
+
+function mapDispatchToProps (dispatch, ownProps) {
+  return {
+    onSubmit: async (values) => {
+      const password = values.get('password')
+
+      await dispatch(onSubmitResetAccountPasswordForm(password))
+    },
+    onSubmitSuccess: () => dispatch(onSubmitResetAccountPasswordSuccess()),
+    onSubmitFail: (errors, dispatch, submitErrors) => dispatch(onSubmitResetAccountPasswordFail(errors, dispatch, submitErrors)),
+    initResetPasswordPage: () => dispatch(initResetPasswordPage()),
+  }
+}
+
+class ResetPasswordPage extends PureComponent {
+  static propTypes = {
+    selectedWallet: PropTypes.instanceOf(WalletEntryModel),
+    initResetPasswordPage: PropTypes.func,
+  }
+
+  componentWillMount(){
+    this.props.initResetPasswordPage()
+  }
+
+  get getSelectedWalletName(){
+    const { selectedWallet } = this.props
+    return selectedWallet && selectedWallet.name || ''
+  }
+  render () {
+    const { handleSubmit, selectedWallet } = this.props
+
+    return (
+      <MuiThemeProvider muiTheme={styles.inverted}>
+        <form styleName='form' name={FORM_RESET_PASSWORD} onSubmit={handleSubmit}>
+
+          <div styleName='page-title'>Reset password</div>
+
+          <div styleName='user-row'>
+            <UserRow
+              title={this.getSelectedWalletName}
+              avatar={'/src/assets/img/profile-photo-1.jpg'}
+              onClick={() => {}}
+            />
+          </div>
+
+          <div styleName='field'>
+            <Field
+              component={TextField}
+              name='password'
+              type='password'
+              floatingLabelText='Enter New Password'
+              fullWidth
+              {...styles.textField}
+            />
+            <Field
+              component={TextField}
+              name='confirmPassword'
+              type='password'
+              floatingLabelText='Confirm New Password'
+              fullWidth
+              {...styles.textField}
+            />
+          </div>
+
+          <div styleName='actions'>
+            <Button
+              styleName='button'
+              buttonType='login'
+              type='submit'
+            >
+              Reset
+            </Button>
+          </div>
+
+        </form>
+      </MuiThemeProvider>
+    )
+  }
+}
+
+const form = reduxForm({ form: FORM_RESET_PASSWORD, validate })(ResetPasswordPage)
+export default connect(mapStateToProps, mapDispatchToProps)(form)
diff --git a/packages/login-ui/components/ResetPassword/ResetPassword.scss b/packages/login-ui/components/ResetPassword/ResetPassword.scss
new file mode 100644
index 000000000..d1ce6b9bf
--- /dev/null
+++ b/packages/login-ui/components/ResetPassword/ResetPassword.scss
@@ -0,0 +1,92 @@
+/**
+ * Copyright 2017–2018, LaborX PTY
+ * Licensed under the AGPL Version 3 license.
+ */
+
+@import "~styles/partials/variables";
+@import "~styles/partials/mixins";
+
+ul.actions {
+  position: absolute;
+  top: 30px;
+  right: 80px;
+  display: flex;
+  justify-content: flex-end;
+  flex: 0 0 auto;
+  padding: 0;
+  list-style: none;
+  font-size: 18px;
+  line-height: 48px;
+
+  @include md-only {
+    top: 10px;
+    right: 10px;
+    flex: 1 1 auto;
+  }
+
+  li {
+
+    flex: 0 0 auto;
+
+    a {
+      padding: 10px 20px;
+      text-decoration: none;
+      color: $color-white;
+
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+  }
+}
+
+.form {
+  max-width: 380px;
+  margin:0 auto;
+
+  @include xs-only {
+    padding: 0 20px;
+  }
+}
+
+.page-title {
+  color: $color-white;
+  font-weight: 700;
+  font-size: 30px;
+  line-height: 42px;
+  margin-bottom: 40px;
+  text-align: center;
+}
+
+.user-row {
+  border-top: 1px solid $color-purpule;
+}
+
+.field {
+  margin-bottom: 50px;
+}
+
+.button {
+  text-align: center;
+  margin-bottom: 30px;
+}
+
+.actions {
+  text-align: center;
+  margin-bottom: 45px;
+}
+
+.link {
+  color: $border-color;
+  margin:  0 auto 45px;
+  text-decoration: none;
+  font: 700 16px $font-proxima;
+
+  &:hover {
+    color: #FFB54E;
+  }
+
+  @include md-only {
+    margin: 0 0 10px;
+  }
+}
diff --git a/packages/login-ui/components/ResetPassword/validate.js b/packages/login-ui/components/ResetPassword/validate.js
new file mode 100644
index 000000000..a23dc2614
--- /dev/null
+++ b/packages/login-ui/components/ResetPassword/validate.js
@@ -0,0 +1,27 @@
+/**
+ * Copyright 2017–2018, LaborX PTY
+ * Licensed under the AGPL Version 3 license.
+ */
+
+import ErrorList from 'platform/ErrorList'
+import * as validator from 'models/validator'
+
+const validateEqualPasswords = (password, confirmPassword) => password === confirmPassword ? null : 'Wrong password'
+
+export default (values) => {
+
+  const password = values.get('password')
+
+  let passwordErrors = new ErrorList()
+  passwordErrors.add(validator.required(password))
+
+  const confirmPassword = values.get('confirmPassword')
+  let confirmPasswordErrors = new ErrorList()
+  confirmPasswordErrors.add(validator.required(confirmPassword))
+  confirmPasswordErrors.add(validateEqualPasswords(password, confirmPassword))
+
+  return {
+    password: passwordErrors.getErrors(),
+    confirmPassword: confirmPasswordErrors.getErrors(),
+  }
+}
diff --git a/packages/login-ui/components/SelectWallet/SelectWallet.js b/packages/login-ui/components/SelectWallet/SelectWallet.js
new file mode 100644
index 000000000..0929db635
--- /dev/null
+++ b/packages/login-ui/components/SelectWallet/SelectWallet.js
@@ -0,0 +1,111 @@
+/**
+ * Copyright 2017–2018, LaborX PTY
+ * Licensed under the AGPL Version 3 license.
+ */
+
+import PropTypes from 'prop-types'
+import { MuiThemeProvider } from 'material-ui'
+import { connect } from 'react-redux'
+import React, { PureComponent } from 'react'
+import { Link } from 'react-router'
+import { UserRow, Button } from 'components'
+import { navigateToSelectImportMethod, onWalletSelect } from '@chronobank/login/redux/network/actions'
+import {
+  WalletEntryModel,
+} from 'models/persistAccount'
+
+import arrow from 'assets/img/icons/prev-white.svg'
+import './SelectWallet.scss'
+
+function mapDispatchToProps (dispatch) {
+  return {
+    navigateToSelectImportMethod: () => dispatch(navigateToSelectImportMethod()),
+    onWalletSelect: (wallet) => dispatch(onWalletSelect(wallet)),
+  }
+}
+
+function mapStateToProps (state) {
+  return {
+    walletsList: state.get('persistAccount').walletsList.map(
+      (wallet) => new WalletEntryModel({...wallet})
+    ),
+  }
+}
+
+@connect(mapStateToProps, mapDispatchToProps)
+export default class SelectWalletPage extends PureComponent {
+  static propTypes = {
+    onWalletSelect: PropTypes.func,
+    walletsList: PropTypes.arrayOf(
+      PropTypes.instanceOf(WalletEntryModel)
+    ),
+    navigateToSelectImportMethod: PropTypes.func,
+  }
+
+  static defaultProps = {
+    onWalletSelect: () => {},
+    walletsList: [],
+  }
+
+  renderWalletsList (){
+    const { onWalletSelect, walletsList } = this.props
+
+    if (!walletsList || !walletsList.length){
+      return (
+        <div styleName='empty-list'>
+          Sorry, there are no accounts to display
+        </div>
+      )
+    }
+
+    return (
+      <div styleName='wallets-list'>
+        {
+          walletsList ? walletsList.map((w, i) => (
+            <UserRow
+              key={i}
+              title={w.name}
+              actionIcon={arrow}
+              reverseIcon={true}
+              onClick={() => onWalletSelect(w)}
+            />
+          )) : null
+        }
+      </div>
+    )
+  }
+
+  render () {
+    return (
+      <MuiThemeProvider>
+        <div styleName='wrapper'>
+
+          <div styleName='page-title'>My Accounts</div>
+
+          <div styleName='description'>
+            Browse account stored on your device.
+            <br />
+            If you have created an account before you may use Add an Existing Account option below.
+          </div>
+
+          <div styleName='content'>
+            { this.renderWalletsList() }
+
+            <div styleName='actions'>
+              <Button
+                styleName='button'
+                buttonType='login'
+                onClick={this.props.navigateToSelectImportMethod}
+              >
+                Add an existing account
+              </Button>
+              or <br />
+              <Link to='/login/create-account' href styleName='link'>Create New Account</Link>
+            </div>
+          </div>
+
+        </div>
+      </MuiThemeProvider>
+    )
+  }
+}
diff --git a/packages/login-ui/components/SelectWallet/SelectWallet.scss b/packages/login-ui/components/SelectWallet/SelectWallet.scss
new file mode 100644
index 000000000..168f3cf01
--- /dev/null
+++ b/packages/login-ui/components/SelectWallet/SelectWallet.scss
@@ -0,0 +1,93 @@
+/**
+ * Copyright 2017–2018, LaborX PTY
+ * Licensed under the AGPL Version 3 license.
+ */
+
+@import "~styles/partials/variables";
+@import "~styles/partials/mixins";
+
+.wrapper {
+  margin:0 auto;
+
+  @include xs-only {
+    padding: 0 20px;
+  }
+}
+
+.content {
+  margin: 0 auto;
+  max-width: 380px;
+}
+
+.page-title {
+  color: $color-white;
+  font-weight: 700;
+  font-size: 30px;
+  line-height: 42px;
+  margin-bottom: 40px;
+  text-align: center;
+}
+
+.wallets-list {
+  border-top: 1px solid $color-purpule;
+  margin-bottom: 45px;
+  color: #fff;
+}
+
+.empty-list {
+  border-top: 1px solid $color-purpule;
+  border-bottom: 1px solid $color-purpule;
+  padding: 18px 0;
+  margin-bottom: 30px;
+  text-align: center;
+  color: #fff;
+  width: 380px;
+
+  @include xs-only {
+    width: 100%;
+  }
+}
+
+.actions {
+  text-align: center;
+  margin-bottom: 45px;
+  line-height: 30px;
+  color: #fff;
+}
+
+.link {
+  color: $border-color;
+  margin:  0 auto 45px;
+  text-decoration: none;
+  font: 700 16px $font-proxima;
+
+  &:hover {
+    color: #FFB54E;
+  }
+
+  @include md-only {
+    margin: 0 0 10px;
+  }
+}
+
+.button {
+  text-align: center;
+  margin-bottom: 22px;
+
+  button {
+    padding: 0 30px;
+  }
+}
+
+.actionIcon {
+  transform: matrix(-1,0,0,-1,0,0);
+}
+
+.description {
+  font-weight: 400;
+  color: $additionalData-color-1;
+  font-size: 16px;
+  line-height: 22px;
+  margin-bottom: 40px;
+  text-align: center;
+}
diff --git a/packages/login-ui/components/index.js b/packages/login-ui/components/index.js
new file mode 100644
index 000000000..fcf046928
--- /dev/null
+++ b/packages/login-ui/components/index.js
@@ -0,0 +1,11 @@
+export { default as GenerateMnemonic } from './GenerateMnemonic/GenerateMnemonic'
+export { default as LoginWithMnemonic } from './LoginWithMnemonic/LoginWithMnemonic'
+export { default as LoginWithPrivateKey } from './LoginWithPrivateKey/LoginWithPrivateKey'
+export { default as LoginForm } from './LoginForm/LoginForm'
+export { default as LoginWithOptions } from './LoginWithOptions/LoginWithOptions'
+export { default as AccountSelector } from './AccountSelector/AccountSelector'
+export { default as RecoverAccount } from './RecoverAccount/RecoverAccount'
+export { default as ResetPassword } from './ResetPassword/ResetPassword'
+export { default as CreateAccount } from './CreateAccount/CreateAccount'
+export { default as ConfirmMnemonic } from './ConfirmMnemonic/ConfirmMnemonic'
+export { default as CommonNetworkSelector } from './CommonNetworkSelector/CommonNetworkSelector'
diff --git a/packages/login/network/HDWalletProvider.js b/packages/login/network/HDWalletProvider.js
index a8cadf0c3..c67192379 100644
--- a/packages/login/network/HDWalletProvider.js
+++ b/packages/login/network/HDWalletProvider.js
@@ -18,6 +18,7 @@ ProviderEngine.prototype.changeProvider = function (source, idx) {
 
 export default class HDWalletProvider {
   constructor (wallet, provider_url, address_index = 0, num_addresses = 0) {
+    console.log('HDWALLET', provider_url)
     this.hdwallet = hdkey.fromMasterSeed(wallet.getPrivateKey())
     this.wallet_hdpath = WALLET_HD_PATH
     this.wallets = [wallet]
diff --git a/packages/login/network/NetworkService.js b/packages/login/network/NetworkService.js
index b810833d3..075e5e761 100644
--- a/packages/login/network/NetworkService.js
+++ b/packages/login/network/NetworkService.js
@@ -98,6 +98,7 @@ class NetworkService extends EventEmitter {
     }
 
     const web3 = new Web3()
+    console.log('check local session', providerURL)
     web3Provider.reinit(web3, new web3.providers.HttpProvider(providerURL || TESTRPC_URL))
     const accounts = await web3Provider.getAccounts()
 
@@ -256,6 +257,7 @@ class NetworkService extends EventEmitter {
 
   async checkTestRPC (providerUrl) {
     const web3 = new Web3()
+    console.log('checkTestRPC', providerUrl)
     web3.setProvider(new web3.providers.HttpProvider(providerUrl || TESTRPC_URL))
     const web3Provider = new Web3Provider(web3)
 
diff --git a/packages/login/network/settings.js b/packages/login/network/settings.js
index 72d348c8b..3f5314969 100644
--- a/packages/login/network/settings.js
+++ b/packages/login/network/settings.js
@@ -268,6 +268,30 @@ export const getNetworksByProvider = (providerId, withLocal = false) => {
   }
 }
 
+export const getNetworksWithProviders = (withLocal = false) => {
+  let networks = []
+
+  Object.keys(providerMap)
+    .filter((key) => !providerMap[key].disabled)
+    .forEach((key) => {
+      const provider = providerMap[key]
+
+      const networksProvider = getNetworksByProvider(provider && provider.id, withLocal)
+        .map((network) => ({
+          provider: provider,
+          network,
+        }))
+
+      networks = networks.concat(networksProvider)
+    })
+
+  return networks
+}
+
+export const getNetworkWithProviderNames = (providerId, networkId, withLocal = false) => {
+  return `${getProviderById(providerId).name} - ${getNetworkById(networkId, providerId, withLocal).name}`
+}
+
 export const getProviderById = (providerId) => {
   return providerMap[Object.keys(providerMap).find((key) => providerMap[key].id === providerId)] || {}
 }
diff --git a/packages/login/redux/network/actions.js b/packages/login/redux/network/actions.js
index 85e60f5eb..084f6619e 100644
--- a/packages/login/redux/network/actions.js
+++ b/packages/login/redux/network/actions.js
@@ -3,9 +3,36 @@
  * Licensed under the AGPL Version 3 license.
  */
 
+import {
+  createAccount,
+  resetPasswordAccount,
+  validateMnemonicForAccount,
+  validateAccountName,
+  decryptAccount,
+  accountAdd,
+  accountSelect,
+} from 'redux/persistAccount/actions'
+import {
+  FORM_CONFIRM_MNEMONIC,
+  FORM_MNEMONIC_LOGIN_PAGE,
+  FORM_PRIVATE_KEY_LOGIN_PAGE,
+  FORM_LOGIN_PAGE,
+  FORM_CREATE_ACCOUNT,
+  FORM_RECOVER_ACCOUNT,
+  FORM_RESET_PASSWORD,
+} from 'pages'
+import Web3 from 'web3'
+import bip39 from 'bip39'
+import Accounts from 'web3-eth-accounts'
+import { login } from 'redux/session/actions'
+import { stopSubmit, SubmissionError } from 'redux-form'
+import { push } from 'react-router-redux'
+import mnemonicProvider from '@chronobank/login/network/mnemonicProvider'
 import { ethereumProvider } from '../../network/EthereumProvider'
 import { btcProvider, ltcProvider, btgProvider } from '../../network/BitcoinProvider'
 import { nemProvider } from '../../network/NemProvider'
+import networkService from '../../network/NetworkService'
+import privateKeyProvider from '../../network/privateKeyProvider'
 
 export const DUCK_NETWORK = 'network'
 
@@ -20,6 +47,25 @@ export const NETWORK_SET_TEST_RPC = 'network/SET_TEST_RPC'
 export const NETWORK_SET_TEST_METAMASK = 'network/SET_TEST_METAMASK'
 export const NETWORK_SET_NETWORK = 'network/SET_NETWORK'
 export const NETWORK_SET_PROVIDER = 'network/SET_PROVIDER'
+export const NETWORK_SET_NEW_ACCOUNT_CREDENTIALS = 'network/SET_NEW_ACCOUNT_CREDENTIALS'
+export const NETWORK_SET_NEW_MNEMONIC = 'network/SET_NEW_MNEMONIC'
+export const NETWORK_RESET_NEW_MNEMONIC = 'network/RESET_NEW_MNEMONIC'
+
+export const NETWORK_SET_IMPORT_MNEMONIC = 'network/SET_IMPORT_MNEMONIC'
+export const NETWORK_SET_IMPORT_PRIVATE_KEY = 'network/SET_NEW_PRIVATE_KEY'
+export const NETWORK_RESET_IMPORT_PRIVATE_KEY = 'network/RESET_NEW_PRIVATE_KEY'
+export const NETWORK_SET_IMPORT_ACCOUNT_MODE = 'network/SET_IMPORT_ACCOUNT_MODE'
+export const NETWORK_RESET_IMPORT_ACCOUNT_MODE = 'network/RESET_IMPORT_ACCOUNT_MODE'
+export const NETWORK_SET_LOGIN_SUBMITTING = 'network/SET_LOGIN_SUBMITTING'
+export const NETWORK_RESET_LOGIN_SUBMITTING = 'network/RESET_LOGIN_SUBMITTING'
+export const NETWORK_SET_ACCOUNT_RECOVERY_MODE = 'network/SET_ACCOUNT_RECOVERY_MODE'
+export const NETWORK_RESET_ACCOUNT_RECOVERY_MODE = 'network/RESET_ACCOUNT_RECOVERY_MODE'
+
+export const WALLETS_ADD = 'network/WALLETS_ADD'
+export const WALLETS_SELECT = 'network/WALLETS_SELECT'
+export const WALLETS_LOAD = 'network/WALLETS_LOAD'
+export const WALLETS_UPDATE_LIST = 'network/WALLETS_UPDATE_LIST'
+export const WALLETS_REMOVE = 'network/WALLETS_REMOVE'
 
 export const loading = (isLoading = true) => (dispatch) => {
   dispatch({ type: NETWORK_LOADING, isLoading })
@@ -33,6 +79,387 @@ export const clearErrors = () => (dispatch) => {
   dispatch({ type: NETWORK_CLEAR_ERRORS })
 }
 
+export const navigateToCreateAccountWithoutImport = () => (dispatch) => {
+  dispatch(navigateToCreateAccount())
+  dispatch({ type: NETWORK_RESET_IMPORT_ACCOUNT_MODE })
+}
+
+export const initConfirmMnemonicPage = () => (dispatch, getState) => {
+  const state = getState()
+
+  const { newAccountMnemonic } = state.get('network')
+
+  if (!newAccountMnemonic){
+    dispatch(navigateToCreateAccount())
+  }
+
+}
+
+export const initMnemonicPage = () => (dispatch, getState) => {
+  const state = getState()
+
+  const { newAccountName, newAccountPassword } = state.get('network')
+
+  const emptyAccountCredentials = !newAccountName || !newAccountPassword
+
+  if (emptyAccountCredentials){
+    dispatch(navigateToCreateAccount())
+  }
+}
+
+export const initLoginPage = () => (dispatch, getState) => {
+  const state = getState()
+
+  const { selectedWallet } = state.get('persistAccount')
+
+  dispatch({ type: NETWORK_RESET_LOGIN_SUBMITTING })
+
+  if (!selectedWallet){
+    dispatch(navigateToSelectWallet())
+  }
+
+}
+
+export const resetNewMnemonic = () => (dispatch) => {
+  dispatch({ type: NETWORK_RESET_NEW_MNEMONIC })
+}
+export const generateNewMnemonic = () => (dispatch) => {
+  const mnemonic = mnemonicProvider.generateMnemonic()
+
+  dispatch({ type: NETWORK_SET_NEW_MNEMONIC, mnemonic })
+}
+
+export const resetImportAccountMode = () => (dispatch) => {
+  dispatch({ type: NETWORK_RESET_IMPORT_ACCOUNT_MODE })
+}
+
+export const onSubmitCreateAccountPage = (walletName, walletPassword) => async (dispatch, getState) => {
+  const state = getState()
+
+  const { importAccountMode, newAccountMnemonic, newAccountPrivateKey } = state.get('network')
+
+  const validateName = dispatch(validateAccountName(walletName))
+
+  if (!validateName){
+    throw new SubmissionError({ walletName: 'Wrong wallet name' })
+  }
+
+  dispatch({ type: NETWORK_SET_NEW_ACCOUNT_CREDENTIALS,  walletName, walletPassword })
+
+  if (importAccountMode){
+    let wallet = await dispatch(createAccount({
+      name: walletName,
+      password: walletPassword,
+      mnemonic: newAccountMnemonic,
+      privateKey: newAccountPrivateKey,
+      numberOfAccounts: 0,
+    }))
+
+    dispatch(accountAdd(wallet))
+
+    dispatch(accountSelect(wallet))
+
+    dispatch(resetImportAccountMode())
+
+    dispatch(navigateToLoginPage())
+
+    return
+  }
+
+  dispatch(generateNewMnemonic())
+
+  dispatch(navigateToGenerateMnemonicPage())
+
+}
+
+export const onSubmitCreateAccountPageSuccess = () => (dispatch) => {
+
+}
+
+export const onSubmitCreateAccountPageFail = (errors, dispatch, submitErrors) => (dispatch) => {
+  dispatch(stopSubmit(FORM_CREATE_ACCOUNT, submitErrors && submitErrors.errors))
+}
+
+export const initImportMethodsPage = () => (dispatch) => {
+  dispatch({ type: NETWORK_SET_IMPORT_ACCOUNT_MODE })
+}
+
+export const onSubmitConfirmMnemonic = (confirmMnemonic) => (dispatch, getState) => {
+  const state = getState()
+
+  const { newAccountMnemonic } = state.get('network')
+
+  if (confirmMnemonic !== newAccountMnemonic){
+    throw new SubmissionError({ _error: 'Please enter correct mnemonic phrase'  })
+  }
+
+}
+
+export const onSubmitConfirmMnemonicSuccess = () => async (dispatch, getState) => {
+  const state = getState()
+
+  const { newAccountMnemonic, newAccountName, newAccountPassword } = state.get('network')
+
+  let wallet = await dispatch(createAccount({
+    name: newAccountName,
+    password: newAccountPassword,
+    mnemonic: newAccountMnemonic,
+    numberOfAccounts: 0,
+  }))
+
+  dispatch(accountAdd(wallet))
+
+  dispatch(accountSelect(wallet))
+
+  dispatch(navigateToDownloadWalletPage())
+}
+
+export const onSubmitConfirmMnemonicFail = (errors, dispatch, submitErrors) => (dispatch) => {
+  dispatch(stopSubmit(FORM_CONFIRM_MNEMONIC, submitErrors && submitErrors.errors))
+}
+
+export const navigateToConfirmMnemonicPage = () => (dispatch) => {
+  dispatch(push('/login/confirm-mnemonic'))
+}
+
+export const navigateToDownloadWalletPage = () => (dispatch) => {
+  dispatch(push('/login/download-wallet'))
+}
+
+export const navigateToCreateAccount = () => (dispatch) => {
+  dispatch(push('/login/create-account'))
+}
+
+export const navigateToSelectImportMethod = () => (dispatch) => {
+  dispatch(push('/login/import-methods'))
+}
+
+export const navigateToMnemonicImportMethod = () => (dispatch) => {
+  dispatch(push('/login/mnemonic-login'))
+}
+
+export const navigateToPrivateKeyImportMethod = () => (dispatch) => {
+  dispatch(push('/login/private-key-login'))
+}
+
+export const navigateToSelectWallet = () => (dispatch) => {
+  dispatch(push('/login/select-account'))
+}
+
+export const navigateToLoginPage = () => (dispatch) => {
+  dispatch(push('/login'))
+}
+
+export const navigateToResetPasswordPage = () => (dispatch) => {
+  dispatch(push('/login/reset-password'))
+}
+
+export const navigateToRecoverAccountPage = () => (dispatch) => {
+  dispatch(push('/login/recover-account'))
+}
+
+export const navigateToGenerateMnemonicPage = () => (dispatch) => {
+  dispatch(push('/login/mnemonic'))
+}
+
+export const onSubmitMnemonicLoginForm = (mnemonic) => async (dispatch) => {
+  if (!bip39.validateMnemonic(mnemonic)){
+    throw new Error('Invalid mnemonic')
+  }
+
+  dispatch({ type: NETWORK_SET_NEW_MNEMONIC, mnemonic })
+
+}
+
+export const onSubmitMnemonicLoginFormSuccess = () => (dispatch) => {
+  dispatch(navigateToCreateAccount())
+}
+
+export const onSubmitMnemonicLoginFormFail = () => (dispatch) => {
+  dispatch(stopSubmit(FORM_MNEMONIC_LOGIN_PAGE, { key: 'Wrong mnemonic' }))
+
+}
+
+export const onSubmitPrivateKeyLoginForm = (privateKey) => (dispatch) => {
+  let pk = privateKey || ''
+
+  if (pk.slice(0, 2) === '0x'){
+    pk = pk.slice(2)
+  }
+
+  dispatch({ type: NETWORK_SET_IMPORT_PRIVATE_KEY, privateKey: pk })
+}
+
+export const onSubmitPrivateKeyLoginFormSuccess = () => (dispatch) => {
+  dispatch(navigateToCreateAccount())
+}
+
+export const onSubmitPrivateKeyLoginFormFail = () => (dispatch) => {
+  dispatch(stopSubmit(FORM_PRIVATE_KEY_LOGIN_PAGE, { pk: 'Wrong private key' }))
+
+}
+
+export const onSubmitLoginForm = (password) => async (dispatch, getState) => {
+  const state = getState()
+
+  dispatch({ type: NETWORK_SET_LOGIN_SUBMITTING })
+
+  const { selectedWallet } = state.get('persistAccount')
+  let wallet = await dispatch(decryptAccount(selectedWallet, password))
+
+  let privateKey = wallet && wallet[0] && wallet[0].privateKey
+
+  if (privateKey){
+    await dispatch(handlePrivateKeyLogin(privateKey))
+  }
+
+}
+
+export const onSubmitLoginFormSuccess = () => () => {
+}
+
+export const onSubmitLoginFormFail = () => (dispatch) => {
+  dispatch(stopSubmit(FORM_LOGIN_PAGE, { password: 'Wrong password' }))
+  dispatch({ type: NETWORK_RESET_LOGIN_SUBMITTING })
+
+}
+
+export const validateRecoveryForm = (mnemonic) => (dispatch, getState) => {
+  const state = getState()
+
+  const { selectedWallet } = state.get('persistAccount')
+
+  return dispatch(validateMnemonicForAccount(selectedWallet, mnemonic))
+
+}
+
+export const initRecoverAccountPage = () => (dispatch) => {
+  dispatch(resetNewMnemonic())
+  dispatch({ type: NETWORK_SET_ACCOUNT_RECOVERY_MODE })
+}
+
+export const onSubmitRecoverAccountForm = (mnemonic) => (dispatch) => {
+  const validForm = dispatch(validateRecoveryForm(mnemonic))
+
+  if (!validForm) {
+    throw new SubmissionError({ _error: 'Mnemonic incorrect for this wallet' })
+  }
+
+  dispatch({ type: NETWORK_SET_NEW_MNEMONIC, mnemonic })
+}
+
+export const onSubmitRecoverAccountFormSuccess = () => (dispatch) => {
+  dispatch(navigateToResetPasswordPage())
+}
+
+export const onSubmitRecoverAccountFormFail = () => (dispatch) => {
+  dispatch(stopSubmit(FORM_RECOVER_ACCOUNT, { pk: 'Wrong private key' }))
+
+}
+
+export const initResetPasswordPage = () => (dispatch, getState) => {
+  const state = getState()
+
+  const { accountRecoveryMode } = state.get('network')
+
+  if (!accountRecoveryMode){
+    dispatch(navigateToRecoverAccountPage())
+  }
+}
+
+export const onSubmitResetAccountPasswordForm = (password) => async (dispatch, getState) => {
+  const state = getState()
+
+  const { newAccountMnemonic } = state.get('network')
+  const { selectedWallet } = state.get('persistAccount')
+
+  await dispatch(resetPasswordAccount(selectedWallet, newAccountMnemonic, password))
+
+}
+
+export const onSubmitResetAccountPasswordSuccess = () => (dispatch) => {
+  dispatch({ type: NETWORK_RESET_ACCOUNT_RECOVERY_MODE })
+  dispatch(navigateToLoginPage())
+
+}
+
+export const onSubmitResetAccountPasswordFail = (error, dispatch, submitError) => (dispatch) => {
+  dispatch(stopSubmit(FORM_RESET_PASSWORD, { _error: 'Error' }))
+
+}
+
+export const onWalletSelect = (wallet) => (dispatch) => {
+  dispatch(accountSelect(wallet))
+
+  dispatch(navigateToLoginPage())
+}
+
+export const handlePrivateKeyLogin = (privateKey) => async (dispatch, getState) => {
+  let state = getState()
+
+  dispatch(loading())
+  dispatch(clearErrors())
+  const provider = privateKeyProvider.getPrivateKeyProvider(privateKey.slice(2), networkService.getProviderSettings(), state.get('multisigWallet'))
+
+  networkService.selectAccount(provider.ethereum.getAddress())
+  await networkService.setup(provider)
+
+  state = getState()
+  const { selectedAccount, selectedProviderId, selectedNetworkId } = state.get(DUCK_NETWORK)
+
+  dispatch(clearErrors())
+
+  const isPassed = await networkService.checkNetwork(
+    selectedAccount,
+    selectedProviderId,
+    selectedNetworkId,
+  )
+
+  if (isPassed) {
+    networkService.createNetworkSession(
+      selectedAccount,
+      selectedProviderId,
+      selectedNetworkId,
+    )
+    dispatch(login(selectedAccount))
+  }
+
+}
+
+export const handleMnemonicLogin = (mnemonic) => async (dispatch, getState) => {
+  const web3 = new Web3()
+  const accounts = new Accounts(new web3.providers.HttpProvider(networkService.getProviderSettings().url))
+  await accounts.wallet.clear()
+
+  dispatch(loading())
+  dispatch(clearErrors())
+  const provider = mnemonicProvider.getMnemonicProvider(mnemonic, networkService.getProviderSettings())
+  networkService.selectAccount(provider.ethereum.getAddress())
+  await networkService.setup(provider)
+
+  const state = getState()
+
+  const { selectedAccount, selectedProviderId, selectedNetworkId } = state.get(DUCK_NETWORK)
+
+  dispatch(clearErrors())
+
+  const isPassed = await networkService.checkNetwork(
+    selectedAccount,
+    selectedProviderId,
+    selectedNetworkId,
+  )
+
+  if (isPassed) {
+    networkService.createNetworkSession(
+      selectedAccount,
+      selectedProviderId,
+      selectedNetworkId,
+    )
+    dispatch(login(selectedAccount))
+  }
+
+}
+
 export const getPrivateKeyFromBlockchain = (blockchain: string) => {
   switch (blockchain) {
     case 'Ethereum':
diff --git a/packages/login/redux/network/reducer.js b/packages/login/redux/network/reducer.js
index 45572a6b9..c88316efa 100644
--- a/packages/login/redux/network/reducer.js
+++ b/packages/login/redux/network/reducer.js
@@ -5,6 +5,8 @@
 
 import { getNetworksByProvider, providerMap } from '../../network/settings'
 import * as actions from './actions'
+import { NETWORK_SET_IMPORT_PRIVATE_KEY } from "./actions";
+import { NETWORK_SET_LOGIN_LOADING } from "./actions";
 
 const initialState = {
   isLoading: false,
@@ -31,6 +33,12 @@ const initialState = {
   selectedProviderId: null,
   networks: [],
   selectedNetworkId: null,
+  newAccountName: null,
+  newAccountPassword: null,
+  newAccountMnemonic: null,
+  newAccountPrivateKey: null,
+  isLoginSubmitting: false,
+  accountRecoveryMode: false,
 }
 
 export default (state = initialState, action) => {
@@ -74,6 +82,63 @@ export default (state = initialState, action) => {
         isLoading: false,
         errors: [...state.errors, action.error],
       }
+    case actions.NETWORK_SET_NEW_ACCOUNT_CREDENTIALS:
+      return {
+        ...state,
+        newAccountName: action.walletName,
+        newAccountPassword: action.walletPassword,
+      }
+    case actions.NETWORK_SET_NEW_MNEMONIC:
+      return {
+        ...state,
+        newAccountMnemonic: action.mnemonic,
+      }
+    case actions.NETWORK_RESET_NEW_MNEMONIC:
+      return {
+        ...state,
+        newAccountMnemonic: null,
+      }
+    case actions.NETWORK_SET_IMPORT_PRIVATE_KEY:
+      return {
+        ...state,
+        newAccountPrivateKey: action.privateKey,
+      }
+    case actions.NETWORK_RESET_IMPORT_PRIVATE_KEY:
+      return {
+        ...state,
+        newAccountPrivateKey: null,
+      }
+    case actions.NETWORK_SET_IMPORT_ACCOUNT_MODE:
+      return {
+        ...state,
+        importAccountMode: true,
+      }
+    case actions.NETWORK_RESET_IMPORT_ACCOUNT_MODE:
+      return {
+        ...state,
+        importAccountMode: false,
+      }
+    case actions.NETWORK_SET_LOGIN_SUBMITTING:
+      return {
+        ...state,
+        isLoginSubmitting: true,
+      }
+    case actions.NETWORK_RESET_LOGIN_SUBMITTING:
+      return {
+        ...state,
+        isLoginSubmitting: false,
+      }
+    case actions.NETWORK_SET_ACCOUNT_RECOVERY_MODE:
+      return {
+        ...state,
+        accountRecoveryMode: true,
+      }
+    case actions.NETWORK_RESET_ACCOUNT_RECOVERY_MODE:
+      return {
+        ...state,
+        accountRecoveryMode: false,
+      }
+
     default:
       return state
   }
diff --git a/src/assets/img/appstore-white.svg b/src/assets/img/appstore-white.svg
new file mode 100644
index 000000000..7bc45022d
--- /dev/null
+++ b/src/assets/img/appstore-white.svg
@@ -0,0 +1,55 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 111.571 32">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: none;
+      }
+
+      .cls-2 {
+        clip-path: url(#clip-path);
+      }
+
+      .cls-3 {
+        fill: #fff;
+      }
+    </style>
+    <clipPath id="clip-path">
+      <rect class="cls-1" width="32" height="32"/>
+    </clipPath>
+  </defs>
+  <title>2d0745e2-571f-4313-890f-7945a689d7ff</title>
+  <g>
+    <g id="Apple">
+      <g class="cls-2">
+        <g class="cls-2">
+          <path class="cls-3" d="M15.869,7.314a6.337,6.337,0,0,1,1.437-4.571A6.9,6.9,0,0,1,22.4,0a6.914,6.914,0,0,1-1.7,5.093,5.252,5.252,0,0,1-4.832,2.22m8.881,9.665a7.022,7.022,0,0,1,3.527-6.008,7.24,7.24,0,0,0-6.269-3.265c-2.612,0-4.7,1.437-5.747,1.437-1.307,0-3.135-1.437-5.617-1.307-3.787,0-7.705,3.265-7.705,9.667S7.64,32,11.3,32c1.305,0,3.4-1.307,5.355-1.307,2.089,0,3.527,1.307,5.355,1.307,4.049,0,7.053-8.491,7.053-8.491a7.18,7.18,0,0,1-4.311-6.531"/>
+        </g>
+      </g>
+    </g>
+    <g>
+      <path class="cls-3" d="M42.588,6.2h1.959A2.431,2.431,0,0,1,47.29,8.914c0,1.911-.84,2.99-2.743,2.99H42.588Zm.76,5.07h1.263c.52,0,1.919-.145,1.919-2.247,0-1.359-.5-2.183-1.9-2.183H43.348Z"/>
+      <path class="cls-3" d="M50.052,7.676a1.961,1.961,0,0,1,2.007,2.166,2.012,2.012,0,1,1-4.014,0A1.961,1.961,0,0,1,50.052,7.676Zm0,3.725c.711,0,1.287-.559,1.287-1.559s-.576-1.566-1.287-1.566-1.288.559-1.288,1.566S49.34,11.4,50.052,11.4Z"/>
+      <path class="cls-3" d="M57.114,11.9h-.72l-.839-3.285h-.016L54.707,11.9h-.735L52.644,7.771H53.4l.935,3.382h.016l.832-3.382h.744l.864,3.382H56.8l.928-3.382h.7Z"/>
+      <path class="cls-3" d="M59.244,7.771h.64v.655H59.9a1.438,1.438,0,0,1,1.343-.751c1.087,0,1.423.623,1.423,1.511V11.9h-.679v-2.8a.778.778,0,0,0-.84-.831A1.161,1.161,0,0,0,59.924,9.57V11.9h-.68Z"/>
+      <path class="cls-3" d="M63.892,6.2h.68V11.9h-.68Z"/>
+      <path class="cls-3" d="M67.571,7.676a1.961,1.961,0,0,1,2.007,2.166,2.012,2.012,0,1,1-4.014,0A1.961,1.961,0,0,1,67.571,7.676Zm0,3.725c.711,0,1.287-.559,1.287-1.559s-.576-1.566-1.287-1.566-1.288.559-1.288,1.566S66.859,11.4,67.571,11.4Z"/>
+      <path class="cls-3" d="M74.2,11.889a.914.914,0,0,1-.488.112c-.352,0-.576-.192-.576-.64a1.835,1.835,0,0,1-1.455.64c-.752,0-1.368-.336-1.368-1.159,0-.936.7-1.136,1.4-1.271.751-.145,1.391-.1,1.391-.607,0-.592-.488-.687-.919-.687-.576,0-1,.176-1.031.783h-.68c.04-1.023.832-1.383,1.751-1.383.744,0,1.551.167,1.551,1.135v2.127c0,.32,0,.463.216.463a.6.6,0,0,0,.208-.039ZM73.1,9.77a3.49,3.49,0,0,1-1.231.28c-.448.08-.832.239-.832.743,0,.448.384.607.8.607.9,0,1.263-.559,1.263-.935Z"/>
+      <path class="cls-3" d="M78.689,11.9h-.68v-.559h-.016A1.393,1.393,0,0,1,76.675,12a1.937,1.937,0,0,1-1.9-2.175,1.909,1.909,0,0,1,1.887-2.15,1.584,1.584,0,0,1,1.335.646h.016V6.2h.68Zm-1.919-.5c.912,0,1.264-.783,1.264-1.559,0-.815-.368-1.566-1.3-1.566s-1.239.791-1.239,1.6C75.491,10.649,75.891,11.4,76.771,11.4Z"/>
+      <path class="cls-3" d="M84.066,7.676a1.961,1.961,0,0,1,2.007,2.166,2.012,2.012,0,1,1-4.014,0A1.961,1.961,0,0,1,84.066,7.676Zm0,3.725c.711,0,1.287-.559,1.287-1.559s-.576-1.566-1.287-1.566-1.288.559-1.288,1.566S83.354,11.4,84.066,11.4Z"/>
+      <path class="cls-3" d="M87.035,7.771h.64v.655h.016a1.438,1.438,0,0,1,1.343-.751c1.087,0,1.423.623,1.423,1.511V11.9h-.679v-2.8a.778.778,0,0,0-.84-.831A1.161,1.161,0,0,0,87.715,9.57V11.9h-.68Z"/>
+      <path class="cls-3" d="M94.97,7.771h.824v.6H94.97v2.566c0,.312.088.367.512.367h.312v.6h-.52c-.7,0-.984-.144-.984-.9V8.371h-.7v-.6h.7V6.531h.68Z"/>
+      <path class="cls-3" d="M96.707,6.2h.68V8.379H97.4a1.4,1.4,0,0,1,1.3-.7c1.087,0,1.423.623,1.423,1.511V11.9H99.45v-2.8a.778.778,0,0,0-.84-.831A1.161,1.161,0,0,0,97.387,9.57V11.9h-.68Z"/>
+      <path class="cls-3" d="M104.841,10.594A1.667,1.667,0,0,1,103.074,12c-1.319,0-1.943-.911-1.982-2.175a1.989,1.989,0,0,1,1.943-2.15c1.463,0,1.911,1.367,1.871,2.366h-3.094A1.217,1.217,0,0,0,103.1,11.4a1,1,0,0,0,1.071-.807Zm-.655-1.151a1.19,1.19,0,0,0-1.191-1.167,1.177,1.177,0,0,0-1.184,1.167Z"/>
+    </g>
+    <g>
+      <path class="cls-3" d="M45.872,16.814H48.25L52.194,27.36H49.786l-.8-2.349H45.045l-.827,2.349H41.869Zm-.222,6.469h2.732l-1.329-3.869h-.029Z"/>
+      <path class="cls-3" d="M52.886,19.725H54.88V20.7h.03a2.54,2.54,0,0,1,2.274-1.182c2.393,0,3.471,1.935,3.471,4.105,0,2.039-1.123,3.944-3.353,3.944a2.712,2.712,0,0,1-2.29-1.152h-.029v3.634h-2.1Zm5.672,3.84c0-1.211-.487-2.467-1.831-2.467-1.374,0-1.817,1.227-1.817,2.467s.473,2.422,1.832,2.422S58.558,24.8,58.558,23.564Z"/>
+      <path class="cls-3" d="M61.909,19.725H63.9V20.7h.03a2.54,2.54,0,0,1,2.274-1.182c2.393,0,3.471,1.935,3.471,4.105,0,2.039-1.123,3.944-3.353,3.944a2.711,2.711,0,0,1-2.289-1.152h-.03v3.634h-2.1Zm5.672,3.84c0-1.211-.488-2.467-1.832-2.467-1.374,0-1.816,1.227-1.816,2.467s.473,2.422,1.832,2.422S67.581,24.8,67.581,23.564Z"/>
+      <path class="cls-3" d="M76.839,23.859c0,1.4,1.093,1.95,2.333,1.95.813,0,2.053-.236,2.053-1.314,0-1.138-1.581-1.329-3.131-1.743s-3.146-1.02-3.146-3c0-2.156,2.039-3.191,3.944-3.191,2.2,0,4.224.961,4.224,3.4H80.872c-.074-1.271-.975-1.6-2.083-1.6-.738,0-1.6.311-1.6,1.2,0,.813.5.916,3.146,1.595.768.192,3.131.68,3.131,3.072,0,1.936-1.521,3.383-4.387,3.383-2.333,0-4.52-1.152-4.49-3.752Z"/>
+      <path class="cls-3" d="M87.28,19.725h1.536v1.4H87.28v3.781c0,.709.177.887.886.887a3.257,3.257,0,0,0,.65-.06v1.64a8.107,8.107,0,0,1-1.226.074c-1.285,0-2.408-.3-2.408-1.816V21.127H83.912v-1.4h1.271v-2.29h2.1Z"/>
+      <path class="cls-3" d="M93.527,19.518a3.749,3.749,0,0,1,3.958,4.032,3.952,3.952,0,1,1-7.9,0A3.745,3.745,0,0,1,93.527,19.518Zm0,6.469c1.433,0,1.861-1.226,1.861-2.437S94.96,21.1,93.527,21.1c-1.418,0-1.846,1.227-1.846,2.452S92.109,25.986,93.527,25.986Z"/>
+      <path class="cls-3" d="M98.843,19.725h1.994v1.418h.03a2.7,2.7,0,0,1,2.437-1.625,1.577,1.577,0,0,1,.458.073v1.95a3.782,3.782,0,0,0-.753-.074c-1.536,0-2.068,1.107-2.068,2.452V27.36h-2.1Z"/>
+      <path class="cls-3" d="M106.05,24.052c.059,1.329.709,1.935,1.876,1.935A1.727,1.727,0,0,0,109.58,25h1.846a3.436,3.436,0,0,1-3.575,2.57,3.73,3.73,0,0,1-3.9-4.018,3.829,3.829,0,0,1,3.9-4.032c2.6,0,3.855,2.186,3.708,4.534Zm3.412-1.329c-.192-1.063-.65-1.625-1.669-1.625a1.653,1.653,0,0,0-1.743,1.625Z"/>
+    </g>
+  </g>
+</svg>
diff --git a/src/assets/img/chronowalletlogobright.svg b/src/assets/img/chronowalletlogobright.svg
new file mode 100644
index 000000000..8f3ea19f5
--- /dev/null
+++ b/src/assets/img/chronowalletlogobright.svg
@@ -0,0 +1,28 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 83.764 86.44">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #ab6b2f;
+      }
+
+      .cls-2 {
+        fill: #353266;
+      }
+
+      .cls-3 {
+        fill: #55b4d9;
+      }
+
+      .cls-4 {
+        fill: #ffa93b;
+      }
+    </style>
+  </defs>
+  <title>1edbc86b-d425-405d-9bd8-60ee0f49b94a</title>
+  <g id="ChronoWalletLogo">
+    <path class="cls-1" d="M61.73,25.731H5.253c-2.877,0-5.238.392-5.238-1.046,0-3.138,2.21-4.974,4.92-5.939L56.8.285c2.71-.965,4.928.6,4.928,3.477Z"/>
+    <path class="cls-2" d="M5.238,27.217h73.3a2.73,2.73,0,0,1,2.73,2.73V81.209a2.731,2.731,0,0,1-2.731,2.731H5.238a2.73,2.73,0,0,1-2.73-2.73V29.948a2.73,2.73,0,0,1,2.73-2.73Z"/>
+    <path class="cls-3" d="M42.524,35.849A19.206,19.206,0,1,0,61.73,55.055,19.206,19.206,0,0,0,42.524,35.849ZM50.307,60.61H39.792a2.39,2.39,0,0,1-2.39-2.39V46.749a2.39,2.39,0,1,1,4.78,0V55.83h8.125a2.39,2.39,0,1,1,0,4.78Z"/>
+    <path class="cls-4" d="M78.533,24.717H61.73V3.762C61.73,1.461,60.312,0,58.358,0A4.65,4.65,0,0,0,56.8.285L4.935,18.746C3.494,19.259,0,20.406,0,24.182v10.48l.007-.011V81.209A5.246,5.246,0,0,0,5.238,86.44h73.3a5.246,5.246,0,0,0,5.231-5.231V29.948A5.246,5.246,0,0,0,78.533,24.717Zm.231,5.231v7.123A13.391,13.391,0,0,1,71.4,29.717h7.131A.246.246,0,0,1,78.764,29.948Zm-11.579-.231A17.364,17.364,0,0,0,78.764,41.293V69.864A17.364,17.364,0,0,0,67.185,81.44h-50.6A17.363,17.363,0,0,0,5.007,69.864V41.293A17.363,17.363,0,0,0,16.582,29.731Zm-61.971.011.039,0h7.11a13.391,13.391,0,0,1-7.355,7.34V29.948A.242.242,0,0,1,5.214,29.728ZM57.473,2.169A2.666,2.666,0,0,1,58.358,2,2.021,2.021,0,0,1,60.21,3.9l1,20.815H9.272c-6.379,0-6.343-2.984-3.453-4.162l0,0ZM5.007,81.209V74.086a13.391,13.391,0,0,1,7.361,7.354H5.238A.246.246,0,0,1,5.007,81.209Zm73.526.231H71.4a13.391,13.391,0,0,1,7.362-7.354v7.123A.246.246,0,0,1,78.533,81.44Z"/>
+  </g>
+</svg>
diff --git a/src/assets/img/chronowallettextbright.svg b/src/assets/img/chronowallettextbright.svg
new file mode 100644
index 000000000..8bfe78bd7
--- /dev/null
+++ b/src/assets/img/chronowallettextbright.svg
@@ -0,0 +1,67 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 193.257 40.679">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #5db3ed;
+      }
+
+      .cls-2 {
+        fill: #ffa93b;
+      }
+
+      .cls-3 {
+        fill: none;
+      }
+
+      .cls-4 {
+        fill: #918fa2;
+      }
+    </style>
+  </defs>
+  <title>a0f5ff71-36c6-4417-b91e-1ebd618450b1</title>
+  <path class="cls-1" d="M34.446,7.592a6.222,6.222,0,0,1,1.6,4.483v10.1h-4.6V13.42a3.315,3.315,0,0,0-.852-2.406,3.07,3.07,0,0,0-2.316-.882,3.49,3.49,0,0,0-2.7,1.181,4.32,4.32,0,0,0-1,2.944v7.921h-4.6V0h4.6V8.937a5.994,5.994,0,0,1,5.559-3.019A5.693,5.693,0,0,1,34.446,7.592Z"/>
+  <path class="cls-1" d="M45.4,6.725a6.378,6.378,0,0,1,3.139-.807v4.334a6.412,6.412,0,0,0-.718-.03,4.75,4.75,0,0,0-3.362,1.15,3.98,3.98,0,0,0-1.241,3.064v7.742h-4.6V6.1h4.6V9A5.851,5.851,0,0,1,45.4,6.725Z"/>
+  <path class="cls-1" d="M62.233,6.964a7.336,7.336,0,0,1,3.033,2.869,8.421,8.421,0,0,1,1.076,4.3,8.435,8.435,0,0,1-1.076,4.289,7.4,7.4,0,0,1-3.033,2.9,10.392,10.392,0,0,1-9.027,0,7.4,7.4,0,0,1-3.033-2.9A8.435,8.435,0,0,1,49.1,14.138a8.421,8.421,0,0,1,1.076-4.3,7.336,7.336,0,0,1,3.033-2.869,10.531,10.531,0,0,1,9.027,0ZM54.82,11a4.555,4.555,0,0,0-1.12,3.2,4.553,4.553,0,0,0,1.12,3.2,4.041,4.041,0,0,0,5.8,0,4.553,4.553,0,0,0,1.12-3.2,4.555,4.555,0,0,0-1.12-3.2,4.043,4.043,0,0,0-5.8,0Z"/>
+  <path class="cls-1" d="M82.578,7.592a6.22,6.22,0,0,1,1.6,4.483v10.1h-4.6V13.42a3.315,3.315,0,0,0-.852-2.406,3.071,3.071,0,0,0-2.316-.882,3.444,3.444,0,0,0-2.69,1.181,4.365,4.365,0,0,0-.986,2.944v7.921h-4.6V6.1h4.6v2.81a6.009,6.009,0,0,1,5.559-2.989A5.653,5.653,0,0,1,82.578,7.592Z"/>
+  <path class="cls-1" d="M99.268,6.964A7.338,7.338,0,0,1,102.3,9.833a8.421,8.421,0,0,1,1.076,4.3,8.435,8.435,0,0,1-1.076,4.289,7.4,7.4,0,0,1-3.034,2.9,10.39,10.39,0,0,1-9.026,0,7.4,7.4,0,0,1-3.034-2.9,8.435,8.435,0,0,1-1.076-4.289,8.421,8.421,0,0,1,1.076-4.3,7.334,7.334,0,0,1,3.034-2.869,10.53,10.53,0,0,1,9.026,0ZM91.855,11a4.553,4.553,0,0,0-1.121,3.2,4.55,4.55,0,0,0,1.121,3.2,4.041,4.041,0,0,0,5.8,0,4.55,4.55,0,0,0,1.121-3.2A4.553,4.553,0,0,0,97.654,11a4.042,4.042,0,0,0-5.8,0Z"/>
+  <path class="cls-2" d="M130.305,1.255h4.872l-7.084,20.923h-4.872L118.828,7.084l-4.453,15.094h-4.842L102.478,1.255h5.081L112.1,16.449l4.513-15.194h4.633L125.822,16.6Z"/>
+  <path class="cls-2" d="M144.324,22.178V20.295a5.169,5.169,0,0,1-2.092,1.555,7.606,7.606,0,0,1-2.959.538A5.689,5.689,0,0,1,135.237,21a4.728,4.728,0,0,1-1.495-3.631,4.271,4.271,0,0,1,1.6-3.543,7.246,7.246,0,0,1,4.528-1.3h4.424v-.3a2.431,2.431,0,0,0-.852-1.988,3.841,3.841,0,0,0-2.5-.7,9.946,9.946,0,0,0-4.782,1.4l-1.435-3.168a19.2,19.2,0,0,1,3.586-1.4,14.216,14.216,0,0,1,3.677-.448A7.463,7.463,0,0,1,147,7.443a5.377,5.377,0,0,1,1.808,4.244l.03,10.491Zm-1.285-3.767a2.682,2.682,0,0,0,1.255-1.733V15.244h-3.617a3.611,3.611,0,0,0-1.988.433,1.555,1.555,0,0,0-.643,1.39,1.818,1.818,0,0,0,.673,1.48,2.807,2.807,0,0,0,1.838.552A4.411,4.411,0,0,0,143.038,18.412Z"/>
+  <path class="cls-2" d="M151.307,0h4.6V22.178h-4.6Z"/>
+  <path class="cls-2" d="M158.778,0h4.6V22.178h-4.6Z"/>
+  <path class="cls-2" d="M179.979,8.19A9.007,9.007,0,0,1,182,14.437c0,.478-.011.847-.03,1.106H170.429a4.086,4.086,0,0,0,4.155,3.228,5.64,5.64,0,0,0,2.182-.434,5.749,5.749,0,0,0,1.883-1.27l2.421,2.451a8.122,8.122,0,0,1-2.974,2.108,10,10,0,0,1-3.9.732,9.265,9.265,0,0,1-4.438-1.016,7.131,7.131,0,0,1-2.929-2.869A8.646,8.646,0,0,1,165.8,14.2a8.687,8.687,0,0,1,1.046-4.319,7.331,7.331,0,0,1,2.929-2.9,8.815,8.815,0,0,1,4.3-1.031A7.531,7.531,0,0,1,179.979,8.19Zm-2.316,4.632a3.647,3.647,0,0,0-1.016-2.54,3.439,3.439,0,0,0-2.541-.957,3.5,3.5,0,0,0-2.5.942,4.375,4.375,0,0,0-1.27,2.556Z"/>
+  <path class="cls-2" d="M193.257,21.281a7.555,7.555,0,0,1-1.988.822,8.709,8.709,0,0,1-2.2.284,5.189,5.189,0,0,1-3.646-1.285,4.732,4.732,0,0,1-1.405-3.677V12.663a10.273,10.273,0,0,0-2.241-5.848h2.241V2.391h4.573V6.815h4.364v3.2h-4.364v6.636q0,1.854,1.465,1.853a5.168,5.168,0,0,0,2.242-.6Z"/>
+  <path class="cls-1" d="M12.846,17.648H9.707A5.183,5.183,0,0,1,4.53,12.471V9.707A5.183,5.183,0,0,1,9.707,4.53h7.669V0H9.707A9.707,9.707,0,0,0,0,9.707v2.764a9.707,9.707,0,0,0,9.707,9.707h7.669v-4.53Z"/>
+  <rect class="cls-3" width="193.257" height="40.679"/>
+  <g>
+    <path class="cls-4" d="M20.571,34.8l-1.828-2.717h.806l1.372,2.087,1.359-2.087h.813L21.271,34.8v1.954h-.7Z"/>
+    <path class="cls-4" d="M25.948,32.008a2.417,2.417,0,1,1-2.354,2.417A2.3,2.3,0,0,1,25.948,32.008Zm0,.624a1.8,1.8,0,1,0,1.632,1.793A1.634,1.634,0,0,0,25.948,32.632Z"/>
+    <path class="cls-4" d="M29.565,32.085h.707v2.822a1.258,1.258,0,1,0,2.515,0V32.085h.707v2.836a1.763,1.763,0,0,1-1.961,1.919,1.769,1.769,0,0,1-1.968-1.912Z"/>
+    <path class="cls-4" d="M36.53,34.957h-.875v1.8h-.7V32.085h1.968a1.392,1.392,0,0,1,1.5,1.436,1.3,1.3,0,0,1-1.163,1.366l1.2,1.87h-.812Zm.3-2.255H35.655V34.34h1.177a.821.821,0,1,0,0-1.639Z"/>
+    <path class="cls-4" d="M45.947,33.045l-1.513,3.712H44.14l-1.513-3.712v3.712h-.7V32.085h1l1.359,3.354,1.358-3.354h1v4.671h-.7Z"/>
+    <path class="cls-4" d="M50.259,32.008a2.417,2.417,0,1,1-2.354,2.417A2.3,2.3,0,0,1,50.259,32.008Zm0,.624a1.8,1.8,0,1,0,1.632,1.793A1.634,1.634,0,0,0,50.259,32.632Z"/>
+    <path class="cls-4" d="M53.876,32.085h1.667a2.337,2.337,0,1,1,0,4.671H53.876Zm1.667,4.055a1.72,1.72,0,0,0,0-3.439h-.967V36.14Z"/>
+    <path class="cls-4" d="M59.231,32.085h3.138V32.7H59.931v1.366H62.32v.616H59.931V36.14h2.438v.616H59.231Z"/>
+    <path class="cls-4" d="M65.237,34.957h-.875v1.8h-.7V32.085H65.63a1.392,1.392,0,0,1,1.5,1.436,1.3,1.3,0,0,1-1.163,1.366l1.2,1.87h-.812Zm.3-2.255H64.362V34.34h1.177a.821.821,0,1,0,0-1.639Z"/>
+    <path class="cls-4" d="M69.108,33.171v3.586h-.7V32.085h.721l2.543,3.5v-3.5h.7v4.671h-.68Z"/>
+    <path class="cls-4" d="M75.855,34.425a2.339,2.339,0,0,1,2.4-2.417A2.113,2.113,0,0,1,80.106,33l-.595.315a1.482,1.482,0,0,0-1.261-.679,1.8,1.8,0,0,0,0,3.586,1.482,1.482,0,0,0,1.261-.68l.595.315a2.122,2.122,0,0,1-1.855.987A2.339,2.339,0,0,1,75.855,34.425Z"/>
+    <path class="cls-4" d="M82.8,34.957h-.875v1.8h-.7V32.085h1.968a1.392,1.392,0,0,1,1.5,1.436,1.3,1.3,0,0,1-1.163,1.366l1.2,1.87h-.812Zm.3-2.255H81.925V34.34H83.1a.821.821,0,1,0,0-1.639Z"/>
+    <path class="cls-4" d="M87.2,34.8l-1.828-2.717h.806l1.372,2.087,1.359-2.087h.813L87.9,34.8v1.954h-.7Z"/>
+    <path class="cls-4" d="M90.7,32.085h1.968a1.437,1.437,0,1,1,0,2.872H91.4v1.8h-.7Zm1.877.616H91.4V34.34H92.58a.82.82,0,1,0,0-1.639Z"/>
+    <path class="cls-4" d="M96.443,32.7h-1.45v-.616h3.593V32.7H97.143v4.055h-.7Z"/>
+    <path class="cls-4" d="M101.708,32.008a2.417,2.417,0,1,1-2.354,2.417A2.3,2.3,0,0,1,101.708,32.008Zm0,.624a1.8,1.8,0,1,0,1.632,1.793A1.634,1.634,0,0,0,101.708,32.632Z"/>
+    <path class="cls-4" d="M105.13,34.425a2.339,2.339,0,0,1,2.4-2.417,2.113,2.113,0,0,1,1.855.987l-.595.315a1.482,1.482,0,0,0-1.261-.679,1.8,1.8,0,0,0,0,3.586,1.482,1.482,0,0,0,1.261-.68l.595.315a2.122,2.122,0,0,1-1.855.987A2.339,2.339,0,0,1,105.13,34.425Z"/>
+    <path class="cls-4" d="M110.5,32.085h.707v2.822a1.258,1.258,0,1,0,2.515,0V32.085h.707v2.836a1.965,1.965,0,0,1-3.929.007Z"/>
+    <path class="cls-4" d="M117.464,34.957h-.875v1.8h-.7V32.085h1.968a1.392,1.392,0,0,1,1.5,1.436,1.3,1.3,0,0,1-1.163,1.366l1.2,1.87h-.812Zm.3-2.255h-1.177V34.34h1.177a.821.821,0,1,0,0-1.639Z"/>
+    <path class="cls-4" d="M122.21,34.957h-.875v1.8h-.7V32.085H122.6a1.392,1.392,0,0,1,1.5,1.436,1.3,1.3,0,0,1-1.163,1.366l1.2,1.87h-.812Zm.3-2.255h-1.177V34.34h1.177a.821.821,0,1,0,0-1.639Z"/>
+    <path class="cls-4" d="M125.381,32.085h3.138V32.7h-2.438v1.366h2.389v.616h-2.389V36.14h2.438v.616h-3.138Z"/>
+    <path class="cls-4" d="M130.511,33.171v3.586h-.7V32.085h.721l2.543,3.5v-3.5h.7v4.671h-.68Z"/>
+    <path class="cls-4" d="M135.033,34.425a2.339,2.339,0,0,1,2.4-2.417,2.113,2.113,0,0,1,1.855.987l-.595.315a1.482,1.482,0,0,0-1.261-.679,1.8,1.8,0,0,0,0,3.586,1.482,1.482,0,0,0,1.261-.68l.595.315a2.122,2.122,0,0,1-1.855.987A2.339,2.339,0,0,1,135.033,34.425Z"/>
+    <path class="cls-4" d="M141.621,34.8l-1.828-2.717h.806l1.372,2.087,1.359-2.087h.813L142.321,34.8v1.954h-.7Z"/>
+    <path class="cls-4" d="M149.952,33.15l-.967,3.607h-.749L146.9,32.085h.784l.967,3.747,1.022-3.747h.567l1.016,3.747.966-3.747h.785l-1.331,4.671h-.749Z"/>
+    <path class="cls-4" d="M156.65,35.79h-2.29l-.378.966h-.771l1.855-4.671h.876l1.855,4.671h-.77Zm-2.087-.624h1.884l-.945-2.472Z"/>
+    <path class="cls-4" d="M158.777,32.085h.7V36.14H161.6v.616h-2.822Z"/>
+    <path class="cls-4" d="M162.788,32.085h.7V36.14h2.122v.616h-2.822Z"/>
+    <path class="cls-4" d="M166.8,32.085h3.138V32.7H167.5v1.366h2.389v.616H167.5V36.14h2.438v.616H166.8Z"/>
+    <path class="cls-4" d="M172.372,32.7h-1.45v-.616h3.593V32.7h-1.442v4.055h-.7Z"/>
+  </g>
+</svg>
diff --git a/src/assets/img/facebook.svg b/src/assets/img/facebook.svg
new file mode 100644
index 000000000..2fb8ce2fb
--- /dev/null
+++ b/src/assets/img/facebook.svg
@@ -0,0 +1,3 @@
+<svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+  <path fill="#FFFFFF" d="M16,32 C7.163444,32 0,24.836556 0,16 C0,7.163444 7.163444,0 16,0 C24.836556,0 32,7.163444 32,16 C32,24.836556 24.836556,32 16,32 Z M22.6666667,5.33333333 L19.0666667,5.33333333 C16.4156999,5.33333333 14.2666667,7.3629758 14.2666667,9.86666667 L14.2666667,14.4 L10.6666667,14.4 L10.6666667,18.9333333 L14.2666667,18.9333333 L14.2666667,28 L19.0666667,28 L19.0666667,18.9333333 L22.6666667,18.9333333 L22.6666667,14.4 L19.0666667,14.4 L19.0666667,11.5666667 C19.0666667,10.7846667 19.4386667,9.86666667 20.2666667,9.86666667 L22.6666667,9.86666667 L22.6666667,5.33333333 Z"/>
+</svg>
diff --git a/src/assets/img/github.svg b/src/assets/img/github.svg
new file mode 100644
index 000000000..87609b98e
--- /dev/null
+++ b/src/assets/img/github.svg
@@ -0,0 +1,3 @@
+<svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+  <path fill="#FFFFFF" d="M16,-6.90253292e-31 C7.163444,-3.55271368e-15 -2.95822839e-31,7.163444 -7.10542736e-16,16 C-2.95822839e-31,23.072 4.592,29.072 10.944,31.2 C11.744,31.328 12,30.832 12,30.4 L12,27.696 C7.568,28.656 6.624,25.552 6.624,25.552 C5.888,23.696 4.848,23.2 4.848,23.2 C3.392,22.208 4.96,22.24 4.96,22.24 C6.56,22.352 7.408,23.888 7.408,23.888 C8.8,26.32 11.152,25.6 12.064,25.216 C12.208,24.176 12.624,23.472 13.072,23.072 C9.52,22.672 5.792,21.296 5.792,15.2 C5.792,13.424 6.4,12 7.44,10.864 C7.28,10.464 6.72,8.8 7.6,6.64 C7.6,6.64 8.944,6.208 12,8.272 C13.264,7.92 14.64,7.744 16,7.744 C17.36,7.744 18.736,7.92 20,8.272 C23.056,6.208 24.4,6.64 24.4,6.64 C25.28,8.8 24.72,10.464 24.56,10.864 C25.6,12 26.208,13.424 26.208,15.2 C26.208,21.312 22.464,22.656 18.896,23.056 C19.472,23.552 20,24.528 20,26.016 L20,30.4 C20,30.832 20.256,31.344 21.072,31.2 C27.424,29.056 32,23.072 32,16 C32,11.7565362 30.3142906,7.68687356 27.3137085,4.6862915 C24.3131264,1.68570945 20.2434638,-3.55271368e-16 16,-7.10542736e-16 L16,-6.90253292e-31 Z"/>
+</svg>
diff --git a/src/assets/img/icons/back.svg b/src/assets/img/icons/back.svg
new file mode 100644
index 000000000..fa7e43a29
--- /dev/null
+++ b/src/assets/img/icons/back.svg
@@ -0,0 +1,18 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: none;
+      }
+
+      .cls-2 {
+        fill: #fff;
+      }
+    </style>
+  </defs>
+  <title>90f1a8dc-9f06-4e17-987d-0d12e8d7cd42</title>
+  <g id="Back">
+    <path class="cls-1" d="M0,0H24V24H0Z"/>
+    <path class="cls-2" d="M20,11H7.83l5.59-5.59L12,4,4,12l8,8,1.41-1.41L7.83,13H20Z"/>
+  </g>
+</svg>
diff --git a/src/assets/img/icons/check-green.svg b/src/assets/img/icons/check-green.svg
new file mode 100644
index 000000000..e2462aa8a
--- /dev/null
+++ b/src/assets/img/icons/check-green.svg
@@ -0,0 +1,16 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: none;
+      }
+
+      .cls-2 {
+        fill: #6ee289;
+      }
+    </style>
+  </defs>
+  <title>8220b91f-6a4a-4ebe-98b8-0d701ad8170e</title>
+  <path class="cls-1" d="M0,0H24V24H0Z"/>
+  <path class="cls-2" d="M12,2A10,10,0,1,0,22,12,10,10,0,0,0,12,2ZM10,17,5,12l1.41-1.41L10,14.17l7.59-7.59L19,8Z"/>
+</svg>
diff --git a/src/assets/img/icons/delete-white.svg b/src/assets/img/icons/delete-white.svg
new file mode 100644
index 000000000..cc63bdfd8
--- /dev/null
+++ b/src/assets/img/icons/delete-white.svg
@@ -0,0 +1,16 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #fff;
+      }
+
+      .cls-2 {
+        fill: none;
+      }
+    </style>
+  </defs>
+  <title>ebffa863-a7aa-455a-9cb6-07c24cf83aed</title>
+  <path class="cls-1" d="M6,19a2.006,2.006,0,0,0,2,2h8a2.006,2.006,0,0,0,2-2V7H6ZM19,4H15.5l-1-1h-5l-1,1H5V6H19Z"/>
+  <path class="cls-2" d="M0,0H24V24H0Z"/>
+</svg>
diff --git a/src/assets/img/icons/file-white.svg b/src/assets/img/icons/file-white.svg
new file mode 100644
index 000000000..ce8746523
--- /dev/null
+++ b/src/assets/img/icons/file-white.svg
@@ -0,0 +1,16 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #fff;
+      }
+
+      .cls-2 {
+        fill: none;
+      }
+    </style>
+  </defs>
+  <title>5a5fafd5-b2c5-47ea-b2c0-7ef57e280622</title>
+  <path class="cls-1" d="M6,2A2,2,0,0,0,4.01,4L4,20a2,2,0,0,0,1.99,2H18a2.006,2.006,0,0,0,2-2V8L14,2Zm7,7V3.5L18.5,9Z"/>
+  <path class="cls-2" d="M0,0H24V24H0Z"/>
+</svg>
diff --git a/src/assets/img/icons/key-white.svg b/src/assets/img/icons/key-white.svg
new file mode 100644
index 000000000..603e73829
--- /dev/null
+++ b/src/assets/img/icons/key-white.svg
@@ -0,0 +1,16 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: none;
+      }
+
+      .cls-2 {
+        fill: #fff;
+      }
+    </style>
+  </defs>
+  <title>8d956c6a-7586-4e0b-a30f-371b3563407a</title>
+  <path class="cls-1" d="M0,0H24V24H0Z"/>
+  <path class="cls-2" d="M12.65,10a6,6,0,1,0,0,4H17v4h4V14h2V10ZM7,14a2,2,0,1,1,2-2A2.006,2.006,0,0,1,7,14Z"/>
+</svg>
diff --git a/src/assets/img/icons/ledger-nano-white.svg b/src/assets/img/icons/ledger-nano-white.svg
new file mode 100644
index 000000000..d5e8fae74
--- /dev/null
+++ b/src/assets/img/icons/ledger-nano-white.svg
@@ -0,0 +1,21 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #fff;
+      }
+
+      .cls-2 {
+        fill: none;
+      }
+    </style>
+  </defs>
+  <title>65a7d0dd-b6fe-4fe5-a4db-e0696a8d7a5f</title>
+  <path class="cls-1" d="M9.867,4H16a4,4,0,0,1,4,4v6.133a0,0,0,0,1,0,0H9.867a0,0,0,0,1,0,0V4A0,0,0,0,1,9.867,4Z"/>
+  <path class="cls-1" d="M7.733,4h0a0,0,0,0,1,0,0V7.733a0,0,0,0,1,0,0H4a0,0,0,0,1,0,0v0A3.733,3.733,0,0,1,7.733,4Z"/>
+  <path class="cls-1" d="M7.733,16.267h0a0,0,0,0,1,0,0V20a0,0,0,0,1,0,0H4a0,0,0,0,1,0,0v0A3.733,3.733,0,0,1,7.733,16.267Z" transform="translate(-12.267 24) rotate(-90)"/>
+  <path class="cls-1" d="M20,16.267h0a0,0,0,0,1,0,0V20a0,0,0,0,1,0,0H16.267a0,0,0,0,1,0,0v0A3.733,3.733,0,0,1,20,16.267Z" transform="translate(36.267 36.267) rotate(180)"/>
+  <rect class="cls-1" x="4" y="9.867" width="3.733" height="3.733"/>
+  <rect class="cls-1" x="9.867" y="16.267" width="3.733" height="3.733"/>
+  <rect class="cls-2" width="24" height="24"/>
+</svg>
diff --git a/src/assets/img/icons/list.svg b/src/assets/img/icons/list.svg
new file mode 100644
index 000000000..462dbe514
--- /dev/null
+++ b/src/assets/img/icons/list.svg
@@ -0,0 +1,16 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #fff;
+      }
+
+      .cls-2 {
+        fill: none;
+      }
+    </style>
+  </defs>
+  <title>635d99ca-d8c6-4878-b277-83d9fe988a37</title>
+  <path class="cls-1" d="M4,14H8V10H4Zm0,5H8V15H4ZM4,9H8V5H4Zm5,5H21V10H9Zm0,5H21V15H9ZM9,5V9H21V5Z"/>
+  <path class="cls-2" d="M0,0H24V24H0Z"/>
+</svg>
diff --git a/src/assets/img/icons/mnemonic-white.svg b/src/assets/img/icons/mnemonic-white.svg
new file mode 100644
index 000000000..716e3632e
--- /dev/null
+++ b/src/assets/img/icons/mnemonic-white.svg
@@ -0,0 +1,16 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: none;
+      }
+
+      .cls-2 {
+        fill: #fff;
+      }
+    </style>
+  </defs>
+  <title>76b6e7c7-b5b0-4710-8f20-506b658dcd6b</title>
+  <path class="cls-1" d="M0,0H24V24H0Z"/>
+  <path class="cls-2" d="M4.709,4.021H8.793l3.238,8.528L15.46,4.021h4.127L22,19.979H17.852l-1.165-9.185h-.043l-3.829,9.185H11.164L7.5,10.794H7.459L6.126,19.979H2Z"/>
+</svg>
diff --git a/src/assets/img/icons/plugin-white.svg b/src/assets/img/icons/plugin-white.svg
new file mode 100644
index 000000000..3c7387d6a
--- /dev/null
+++ b/src/assets/img/icons/plugin-white.svg
@@ -0,0 +1,16 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: none;
+      }
+
+      .cls-2 {
+        fill: #fff;
+      }
+    </style>
+  </defs>
+  <title>4def2330-1322-4f97-bce0-2f128536f1fb</title>
+  <rect class="cls-1" width="24" height="24"/>
+  <path class="cls-2" d="M21,8s-3,1-3-2V3a1,1,0,0,0-1-1H14c-3,0-2,3-2,3A2,2,0,0,1,8,5S9,2,6,2H3A1,1,0,0,0,2,3V6C2,9,5,8,5,8a2,2,0,0,1,0,4s-3-1-3,2v3a1,1,0,0,0,1,1H6c3,0,2,3,2,3a2,2,0,0,0,4,0s-1-3,2-3h3a1,1,0,0,0,1-1V14c0-3,3-2,3-2a2,2,0,0,0,0-4Z"/>
+</svg>
diff --git a/src/assets/img/icons/prev-white.svg b/src/assets/img/icons/prev-white.svg
new file mode 100644
index 000000000..09d794129
--- /dev/null
+++ b/src/assets/img/icons/prev-white.svg
@@ -0,0 +1,16 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: none;
+      }
+
+      .cls-2 {
+        fill: #fff;
+      }
+    </style>
+  </defs>
+  <title>2e847eb1-2f11-470d-8c5e-a3e628575639</title>
+  <path class="cls-1" d="M0,0H24V24H0Z"/>
+  <path class="cls-2" d="M16.42,5.41,15,4,7,12l8,8,1.41-1.41L9.819,12Z"/>
+</svg>
diff --git a/src/assets/img/icons/print-white.svg b/src/assets/img/icons/print-white.svg
new file mode 100644
index 000000000..38b5d6d4a
--- /dev/null
+++ b/src/assets/img/icons/print-white.svg
@@ -0,0 +1,16 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #fff;
+      }
+
+      .cls-2 {
+        fill: none;
+      }
+    </style>
+  </defs>
+  <title>160c1a77-03d7-4834-9669-e304e1093918</title>
+  <path class="cls-1" d="M19,8H5a3,3,0,0,0-3,3v6H6v4H18V17h4V11A3,3,0,0,0,19,8ZM16,19H8V14h8Zm3-7a1,1,0,1,1,1-1A1,1,0,0,1,19,12ZM18,3H6V7H18Z"/>
+  <path class="cls-2" d="M0,0H24V24H0Z"/>
+</svg>
diff --git a/src/assets/img/icons/trezor-white.svg b/src/assets/img/icons/trezor-white.svg
new file mode 100644
index 000000000..2a6416ee1
--- /dev/null
+++ b/src/assets/img/icons/trezor-white.svg
@@ -0,0 +1,16 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #fff;
+      }
+
+      .cls-2 {
+        fill: none;
+      }
+    </style>
+  </defs>
+  <title>bea14c40-229c-4277-a27f-d60338d325f5</title>
+  <path id="path7" class="cls-1" d="M12.007,2A4.963,4.963,0,0,0,7.044,6.963V8.818c-.962.172-1.932.41-1.932.713v9.722a.444.444,0,0,0,.3.391c1.1.436,5.4,1.962,6.389,2.311A.485.485,0,0,0,12,22a.471.471,0,0,0,.2-.044c.986-.349,5.306-1.878,6.4-2.31a.455.455,0,0,0,.291-.389V9.532c0-.3-.957-.542-1.919-.714V6.962A4.962,4.962,0,0,0,12.007,2Zm0,2.372A2.392,2.392,0,0,1,14.6,6.963V8.579a33.871,33.871,0,0,0-5.187,0V6.963A2.393,2.393,0,0,1,12.007,4.372ZM12,10.965c2.255,0,4.151.172,4.151.493v6.057c0,.088-.014.1-.1.135S12.2,19.045,12.2,19.045a1.265,1.265,0,0,1-.2.051,1.167,1.167,0,0,1-.2-.054s-3.77-1.362-3.855-1.394-.1-.048-.1-.137V11.458C7.847,11.128,9.745,10.962,12,10.965Z"/>
+  <rect class="cls-2" width="24" height="24"/>
+</svg>
diff --git a/src/assets/img/icons/uport.svg b/src/assets/img/icons/uport.svg
new file mode 100644
index 000000000..3a17295cd
--- /dev/null
+++ b/src/assets/img/icons/uport.svg
@@ -0,0 +1,16 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #fff;
+      }
+
+      .cls-2 {
+        fill: none;
+      }
+    </style>
+  </defs>
+  <title>770e3155-7634-4b44-965d-ccb7195c9cb8</title>
+  <path class="cls-1" d="M22.521,17.167,12.852,2.406a.857.857,0,0,0-1.361,0L1.823,17.167A.825.825,0,0,0,2.3,18.415l9.669,3.628a.812.812,0,0,0,.417,0l9.669-3.628a.825.825,0,0,0,.463-1.247ZM12.163,8.9A3.261,3.261,0,1,1,8.9,12.156,3.261,3.261,0,0,1,12.163,8.9Zm0,9.877c-3.247,0-6.7-.939-6.7-2.685,0-1.048,1.247-1.814,2.948-2.268a4.113,4.113,0,0,0,.408.7c-1.66.39-2.6,1.029-2.6,1.542a1.025,1.025,0,0,0,.544.726.657.657,0,0,1,.1-.19,5.151,5.151,0,0,1,3.02-1.043,4.082,4.082,0,0,0,4.535,0A5.084,5.084,0,0,1,17.437,16.6a.617.617,0,0,1,.109.2,1.025,1.025,0,0,0,.544-.726c0-.512-.943-1.152-2.608-1.542a4.05,4.05,0,0,0,.408-.7c1.7.454,2.948,1.2,2.948,2.268.018,1.746-3.433,2.685-6.68,2.685Z"/>
+  <rect class="cls-2" width="24" height="24"/>
+</svg>
diff --git a/src/assets/img/icons/wallet-white.svg b/src/assets/img/icons/wallet-white.svg
new file mode 100644
index 000000000..05c412564
--- /dev/null
+++ b/src/assets/img/icons/wallet-white.svg
@@ -0,0 +1,16 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: none;
+      }
+
+      .cls-2 {
+        fill: #fff;
+      }
+    </style>
+  </defs>
+  <title>405250a0-8aac-4199-8932-61078aa77b6d</title>
+  <path class="cls-1" d="M0,0H24V24H0Z"/>
+  <path class="cls-2" d="M21,18v1a2.006,2.006,0,0,1-2,2H5a2,2,0,0,1-2-2V5A2,2,0,0,1,5,3H19a2.006,2.006,0,0,1,2,2V6H12a2,2,0,0,0-2,2v8a2,2,0,0,0,2,2Zm-9-2H22V8H12Zm4-2.5A1.5,1.5,0,1,1,17.5,12,1.5,1.5,0,0,1,16,13.5Z"/>
+</svg>
diff --git a/src/assets/img/icons/warning.svg b/src/assets/img/icons/warning.svg
new file mode 100644
index 000000000..b97391fc8
--- /dev/null
+++ b/src/assets/img/icons/warning.svg
@@ -0,0 +1,16 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #c25451;
+      }
+
+      .cls-2 {
+        fill: #fff;
+      }
+    </style>
+  </defs>
+  <title>223a9793-bfa9-41d8-8047-9adb426e17c7</title>
+  <circle class="cls-1" cx="12" cy="12" r="12"/>
+  <path class="cls-2" d="M13.3,16A1.3,1.3,0,1,1,12,14.7,1.3,1.3,0,0,1,13.3,16ZM13,7H11v6h2Z"/>
+</svg>
diff --git a/src/assets/img/instagram.svg b/src/assets/img/instagram.svg
new file mode 100644
index 000000000..c52ee4904
--- /dev/null
+++ b/src/assets/img/instagram.svg
@@ -0,0 +1,7 @@
+<svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+  <g fill="#FFFFFF">
+    <path d="M16,32 C7.163444,32 0,24.836556 0,16 C0,7.163444 7.163444,0 16,0 C24.836556,0 32,7.163444 32,16 C32,24.836556 24.836556,32 16,32 Z M11.8,6 L11.8,6 C8.59674845,6 6,8.59674845 6,11.8 L6,20.2 C6,23.4 8.6,26 11.8,26 L20.2,26 C23.4032515,26 26,23.4032515 26,20.2 L26,11.8 C26,8.6 23.4,6 20.2,6 L11.8,6 Z" id="blCombined-Shape"/>
+    <path d="M11.6,8 L20.4,8 C22.39,8 24,9.61 24,11.6 L24,20.4 C24,22.3882251 22.3882251,24 20.4,24 L11.6,24 C9.61,24 8,22.39 8,20.4 L8,11.6 C8,9.6117749 9.6117749,8 11.6,8 Z M21.25,9.5 C20.5596441,9.5 20,10.0596441 20,10.75 C20,11.4403559 20.5596441,12 21.25,12 C21.9403559,12 22.5,11.4403559 22.5,10.75 C22.5,10.0596441 21.9403559,9.5 21.25,9.5 Z M16,11 L16,11 C13.2385763,11 11,13.2385763 11,16 C11,18.7614237 13.2385763,21 16,21 C18.7614237,21 21,18.7614237 21,16 C21,13.2385763 18.7614237,11 16,11 Z" id="blCombined-Shape"/>
+    <path d="M16,13 C14.3431458,13 13,14.3431458 13,16 C13,17.6568542 14.3431458,19 16,19 C17.6568542,19 19,17.6568542 19,16 C19,14.3431458 17.6568542,13 16,13 Z" id="blShape"/>
+  </g>
+</svg>
diff --git a/src/assets/img/logo-chrono-bank-full.svg b/src/assets/img/logo-chrono-bank-full.svg
new file mode 100644
index 000000000..2961dd95c
--- /dev/null
+++ b/src/assets/img/logo-chrono-bank-full.svg
@@ -0,0 +1,34 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 192.214 25.544">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #5db3ed;
+      }
+
+      .cls-2 {
+        fill: #d9a162;
+      }
+    </style>
+  </defs>
+  <title>a92693b9-efd8-4fb5-92ed-1a8cc052713c</title>
+  <g id="logo">
+    <g id="txt-logo">
+      <path id="Chronobank.io" class="cls-1" d="M60.8,21.054a6.919,6.919,0,0,0,6.125-3.428l-2.285-1.166A4.476,4.476,0,0,1,60.8,18.678a5.222,5.222,0,0,1-5.256-5.508A5.222,5.222,0,0,1,60.8,7.662a4.526,4.526,0,0,1,3.839,2.217l2.285-1.166A6.891,6.891,0,0,0,60.8,5.285a7.69,7.69,0,0,0-8,7.885A7.69,7.69,0,0,0,60.8,21.054ZM78.12,20.78V12.964c0-2.263-1.188-3.5-3.565-3.5a5.276,5.276,0,0,0-3.908,1.783V5.537h-2.4V20.78h2.4v-7.7a3.709,3.709,0,0,1,2.834-1.485c1.348,0,2.24.526,2.24,2.24V20.78Zm4.746,0V13.261A3.812,3.812,0,0,1,85.7,11.8a3.537,3.537,0,0,1,.754.069V9.49a4.714,4.714,0,0,0-3.588,1.874V9.742h-2.4V20.78Zm9.751.274a5.532,5.532,0,0,1-5.668-5.8,5.68,5.68,0,1,1,11.358,0A5.524,5.524,0,0,1,92.617,21.054Zm0-2.125c2.057,0,3.2-1.714,3.2-3.679,0-1.943-1.143-3.657-3.2-3.657-2.034,0-3.177,1.714-3.177,3.657C89.44,17.215,90.583,18.929,92.617,18.929Zm17.2,1.851V13.01c0-2.263-1.188-3.542-3.565-3.542a5.223,5.223,0,0,0-3.885,1.783V9.742h-2.4V20.78h2.4v-7.7a3.634,3.634,0,0,1,2.834-1.485c1.348,0,2.217.571,2.217,2.285v6.9Zm7.328.274a5.532,5.532,0,0,1-5.668-5.8,5.68,5.68,0,1,1,11.358,0A5.524,5.524,0,0,1,117.146,21.054Zm0-2.125c2.057,0,3.2-1.714,3.2-3.679,0-1.943-1.143-3.657-3.2-3.657-2.034,0-3.177,1.714-3.177,3.657C113.97,17.215,115.112,18.929,117.146,18.929Z"/>
+      <path id="Combined-Shape" class="cls-2" d="M126.9,20.78h-2.4V5.537h2.4v5.736a4.365,4.365,0,0,1,3.542-1.805c2.834,0,4.891,2.24,4.891,5.8,0,3.634-2.08,5.782-4.891,5.782a4.437,4.437,0,0,1-3.542-1.783Zm0-3.314a3.562,3.562,0,0,0,2.834,1.463c1.92,0,3.131-1.508,3.131-3.657s-1.211-3.679-3.131-3.679A3.6,3.6,0,0,0,126.9,13.1Z"/>
+      <path id="Combined-Shape-2" data-name="Combined-Shape" class="cls-2" d="M146.155,20.78h-2.4V19.592a4.66,4.66,0,0,1-3.565,1.463,3.666,3.666,0,0,1-3.839-3.657,3.554,3.554,0,0,1,3.839-3.588,4.563,4.563,0,0,1,3.565,1.417V13.581c0-1.28-1.051-2.057-2.582-2.057a4.52,4.52,0,0,0-3.268,1.394l-.983-1.668a6.564,6.564,0,0,1,4.639-1.783c2.445,0,4.594,1.028,4.594,4Zm-5.028-1.371a3.231,3.231,0,0,0,2.628-1.143V16.6a3.231,3.231,0,0,0-2.628-1.143,2.1,2.1,0,0,0-2.354,1.988A2.092,2.092,0,0,0,141.128,19.409Z"/>
+      <path id="Path" class="cls-2" d="M158.352,20.78V13.01c0-2.263-1.188-3.542-3.565-3.542A5.223,5.223,0,0,0,150.9,11.25V9.742h-2.4V20.78h2.4v-7.7a3.634,3.634,0,0,1,2.834-1.485c1.348,0,2.217.571,2.217,2.285v6.9Z"/>
+      <polygon id="Path-2" data-name="Path" class="cls-2" points="171.028 20.78 166.343 14.747 170.937 9.742 167.966 9.742 163.098 15.067 163.098 5.537 160.698 5.537 160.698 20.78 163.098 20.78 163.098 17.809 164.629 16.232 168.011 20.78 171.028 20.78"/>
+      <path id="Path-3" data-name="Path" class="cls-2" d="M173.192,21.032a1.6,1.6,0,1,0-1.6-1.6A1.619,1.619,0,0,0,173.192,21.032Z"/>
+      <path id="Path-4" data-name="Path" class="cls-2" d="M177.983,8.393A1.485,1.485,0,1,0,176.5,6.908,1.483,1.483,0,0,0,177.983,8.393Z"/>
+      <polygon id="Path-5" data-name="Path" class="cls-2" points="179.194 20.78 179.194 9.742 176.795 9.742 176.795 20.78 179.194 20.78"/>
+      <path id="Combined-Shape-3" data-name="Combined-Shape" class="cls-2" d="M186.523,21.054a5.532,5.532,0,0,1-5.668-5.8,5.68,5.68,0,1,1,11.358,0A5.524,5.524,0,0,1,186.523,21.054Zm0-2.125c2.057,0,3.2-1.714,3.2-3.679,0-1.943-1.143-3.657-3.2-3.657-2.034,0-3.177,1.714-3.177,3.657C183.346,17.215,184.489,18.929,186.523,18.929Z"/>
+    </g>
+    <g id="logo-chronobank">
+      <g id="Group-Copy">
+        <path id="Fill-49" class="cls-2" d="M36.251,5.022A4.3,4.3,0,0,1,32.886,1.7h2.5a.858.858,0,0,1,.863.851Zm0,13.778a6.005,6.005,0,0,0-5.11,5.041H6.836A6.005,6.005,0,0,0,1.726,18.8V6.743A6.005,6.005,0,0,0,6.836,1.7H31.141a6.005,6.005,0,0,0,5.11,5.04Zm0,4.189a.858.858,0,0,1-.863.852h-2.5a4.3,4.3,0,0,1,3.365-3.32Zm-33.662.852a.858.858,0,0,1-.863-.852V20.521a4.3,4.3,0,0,1,3.365,3.32ZM1.726,2.554A.858.858,0,0,1,2.589,1.7h2.5A4.3,4.3,0,0,1,1.726,5.022ZM35.388,0H2.589A2.575,2.575,0,0,0,0,2.554V22.989a2.575,2.575,0,0,0,2.589,2.555h32.8a2.575,2.575,0,0,0,2.589-2.555V2.554A2.574,2.574,0,0,0,35.388,0Z"/>
+        <path id="Fill-50" class="cls-1" d="M19.09,4.384a8.457,8.457,0,1,0,8.572,8.456A8.5,8.5,0,0,0,19.09,4.384Zm0,1.5a6.953,6.953,0,1,1-7.048,6.952A7.009,7.009,0,0,1,19.09,5.888Z"/>
+        <path id="Fill-51" class="cls-1" d="M22.386,12.652H19.452V9.383a.762.762,0,0,0-1.524,0v3.645c0,.075.019.131.019.188a.632.632,0,0,0-.019.188.759.759,0,0,0,.762.752h3.7a.752.752,0,1,0,0-1.5"/>
+      </g>
+    </g>
+  </g>
+</svg>
diff --git a/src/assets/img/play-white.svg b/src/assets/img/play-white.svg
new file mode 100644
index 000000000..933f5e26e
--- /dev/null
+++ b/src/assets/img/play-white.svg
@@ -0,0 +1,74 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 124.896 32">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: url(#linear-gradient);
+      }
+
+      .cls-2 {
+        fill: url(#linear-gradient-2);
+      }
+
+      .cls-3 {
+        fill: url(#linear-gradient-3);
+      }
+
+      .cls-4 {
+        fill: url(#linear-gradient-4);
+      }
+
+      .cls-5 {
+        fill: #fff;
+      }
+    </style>
+    <linearGradient id="linear-gradient" x1="2.629" y1="16" x2="16.833" y2="16" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#00a0ff"/>
+      <stop offset="0.007" stop-color="#00a1ff"/>
+      <stop offset="0.26" stop-color="#00beff"/>
+      <stop offset="0.512" stop-color="#00d2ff"/>
+      <stop offset="0.76" stop-color="#00dfff"/>
+      <stop offset="1" stop-color="#00e3ff"/>
+    </linearGradient>
+    <linearGradient id="linear-gradient-2" x1="17.209" y1="16.001" x2="46.312" y2="16.001" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#ffe000"/>
+      <stop offset="0.409" stop-color="#ffbd00"/>
+      <stop offset="0.775" stop-color="orange"/>
+      <stop offset="1" stop-color="#ff9c00"/>
+    </linearGradient>
+    <linearGradient id="linear-gradient-3" x1="5.438" y1="24" x2="37.419" y2="24" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#ff3a44"/>
+      <stop offset="1" stop-color="#c31162"/>
+    </linearGradient>
+    <linearGradient id="linear-gradient-4" x1="-4.886" y1="8" x2="9.395" y2="8" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#32a071"/>
+      <stop offset="0.068" stop-color="#2da771"/>
+      <stop offset="0.476" stop-color="#15cf74"/>
+      <stop offset="0.801" stop-color="#06e775"/>
+      <stop offset="1" stop-color="#00f076"/>
+    </linearGradient>
+  </defs>
+  <title>dba20148-1f77-467e-8fb4-b06aeb3fe101</title>
+  <path class="cls-1" d="M17.717,16v-.183L2.3.4,2.212.495a2.493,2.493,0,0,0-.575,1.748V29.757a2.492,2.492,0,0,0,.575,1.748L2.3,31.6,17.717,16.181Z" transform="translate(-1.637 0)"/>
+  <path class="cls-2" d="M29.059,17.8c1.739-.989,1.739-2.605,0-3.593l-6.085-3.459-.117-.065-5.139,5.137v.364l5.137,5.141.119-.067Z" transform="translate(-1.637 0)"/>
+  <path class="cls-3" d="M17.717,16,2.212,31.505A1.584,1.584,0,0,0,3.395,32h.016A2.86,2.86,0,0,0,4.8,31.581L22.973,21.255Z" transform="translate(-1.637 0)"/>
+  <path class="cls-4" d="M22.973,10.744,4.8.419A2.855,2.855,0,0,0,3.4,0,1.591,1.591,0,0,0,2.212.495L17.717,16Z" transform="translate(-1.637 0)"/>
+  <g>
+    <path class="cls-5" d="M46.858,11.193a2.236,2.236,0,0,1-1.831.848,2.736,2.736,0,0,1-2.719-2.879c0-1.663.912-3.1,2.719-3.1a2.216,2.216,0,0,1,2.455,1.895h-.76a1.547,1.547,0,0,0-1.7-1.256c-1.383,0-1.959,1.2-1.959,2.423A2.055,2.055,0,0,0,45.027,11.4a1.719,1.719,0,0,0,1.831-1.862H45.035V8.9h2.5V11.9h-.479Z" transform="translate(-1.637 0)"/>
+    <path class="cls-5" d="M52.234,10.594A1.667,1.667,0,0,1,50.468,12c-1.319,0-1.943-.911-1.983-2.175a1.99,1.99,0,0,1,1.943-2.15c1.463,0,1.91,1.367,1.871,2.366H49.2A1.217,1.217,0,0,0,50.492,11.4a1,1,0,0,0,1.07-.807Zm-.655-1.151a1.19,1.19,0,0,0-1.191-1.167A1.177,1.177,0,0,0,49.2,9.442Z" transform="translate(-1.637 0)"/>
+    <path class="cls-5" d="M54.107,7.771h.824v.6h-.824v2.566c0,.312.088.367.512.367h.313v.6h-.521c-.7,0-.983-.144-.983-.9V8.371h-.7v-.6h.7V6.531h.68Z" transform="translate(-1.637 0)"/>
+    <path class="cls-5" d="M60.755,6.061a2.741,2.741,0,0,1,2.735,2.99,2.746,2.746,0,1,1-5.47,0A2.74,2.74,0,0,1,60.755,6.061Zm0,5.34c1.392,0,1.976-1.2,1.976-2.35S62.146,6.7,60.755,6.7,58.78,7.9,58.78,9.051,59.363,11.4,60.755,11.4Z" transform="translate(-1.637 0)"/>
+    <path class="cls-5" d="M64.469,7.771h.639v.655h.017a1.438,1.438,0,0,1,1.343-.751c1.088,0,1.424.623,1.424,1.511V11.9h-.68v-2.8a.779.779,0,0,0-.84-.831A1.161,1.161,0,0,0,65.148,9.57V11.9h-.68Z" transform="translate(-1.637 0)"/>
+  </g>
+  <g>
+    <path class="cls-5" d="M50.613,26.164a3.568,3.568,0,0,1-2.895,1.447c-3.265,0-5.185-2.437-5.185-5.479,0-3.132,1.92-5.569,5.185-5.569a4.238,4.238,0,0,1,4.445,3.723H49.949a2.162,2.162,0,0,0-2.23-1.772c-2.083,0-2.865,1.772-2.865,3.619,0,1.757.782,3.53,2.865,3.53a2.284,2.284,0,0,0,2.511-2.275H47.9V21.659h4.431v5.7H50.85Z" transform="translate(-1.637 0)"/>
+    <path class="cls-5" d="M57.686,19.518a3.749,3.749,0,0,1,3.959,4.032,3.952,3.952,0,1,1-7.9,0A3.745,3.745,0,0,1,57.686,19.518Zm0,6.469c1.434,0,1.861-1.226,1.861-2.437S59.119,21.1,57.686,21.1c-1.418,0-1.846,1.227-1.846,2.452S56.268,25.986,57.686,25.986Z" transform="translate(-1.637 0)"/>
+    <path class="cls-5" d="M66.709,19.518a3.749,3.749,0,0,1,3.959,4.032,3.952,3.952,0,1,1-7.9,0A3.745,3.745,0,0,1,66.709,19.518Zm0,6.469c1.433,0,1.861-1.226,1.861-2.437S68.142,21.1,66.709,21.1s-1.846,1.227-1.846,2.452S65.291,25.986,66.709,25.986Z" transform="translate(-1.637 0)"/>
+    <path class="cls-5" d="M79.365,26.873c0,1.256-.443,3.383-3.958,3.383-1.507,0-3.265-.709-3.368-2.452h2.083a1.419,1.419,0,0,0,1.565,1.048c1.167,0,1.7-.8,1.684-1.891v-1h-.029a2.578,2.578,0,0,1-2.289,1.182c-2.289,0-3.265-1.742-3.265-3.84,0-1.979,1.138-3.781,3.279-3.781a2.376,2.376,0,0,1,2.274,1.226h.029V19.725h1.994Zm-1.994-3.427c0-1.241-.428-2.349-1.787-2.349-1.182,0-1.7,1.034-1.7,2.172,0,1.092.413,2.289,1.7,2.289A1.879,1.879,0,0,0,77.371,23.446Z" transform="translate(-1.637 0)"/>
+    <path class="cls-5" d="M81.106,16.814h2.1V27.36h-2.1Z" transform="translate(-1.637 0)"/>
+    <path class="cls-5" d="M86.586,24.052c.059,1.329.709,1.935,1.876,1.935A1.728,1.728,0,0,0,90.116,25h1.847a3.437,3.437,0,0,1-3.575,2.57,3.73,3.73,0,0,1-3.9-4.018,3.829,3.829,0,0,1,3.9-4.032c2.6,0,3.855,2.186,3.708,4.534ZM90,22.723c-.192-1.063-.65-1.625-1.67-1.625a1.653,1.653,0,0,0-1.742,1.625Z" transform="translate(-1.637 0)"/>
+    <path class="cls-5" d="M97.661,16.814h4.757c2.629,0,3.647,1.669,3.647,3.383s-1.019,3.382-3.647,3.382H99.98V27.36H97.661Zm2.319,4.963h1.8c1.078,0,2.038-.236,2.038-1.58s-.96-1.581-2.038-1.581h-1.8Z" transform="translate(-1.637 0)"/>
+    <path class="cls-5" d="M107.349,16.814h2.1V27.36h-2.1Z" transform="translate(-1.637 0)"/>
+    <path class="cls-5" d="M111.012,22.072c.117-1.965,1.875-2.555,3.589-2.555,1.521,0,3.353.34,3.353,2.171v3.974a3.921,3.921,0,0,0,.266,1.7h-2.127a3.143,3.143,0,0,1-.147-.738,3.5,3.5,0,0,1-2.569.945c-1.448,0-2.6-.724-2.6-2.29,0-1.728,1.3-2.142,2.6-2.318,1.285-.192,2.48-.148,2.48-1,0-.9-.62-1.034-1.358-1.034-.8,0-1.314.325-1.389,1.152Zm4.844,1.551a4.161,4.161,0,0,1-1.742.443c-.65.133-1.241.354-1.241,1.123s.606.975,1.285.975a1.558,1.558,0,0,0,1.7-1.758Z" transform="translate(-1.637 0)"/>
+    <path class="cls-5" d="M123.343,28.32a2.4,2.4,0,0,1-2.629,1.729,12.325,12.325,0,0,1-1.285-.074V28.246a11.012,11.012,0,0,0,1.226.074.989.989,0,0,0,.725-1.433l-2.688-7.163h2.245l1.729,5.229h.029l1.669-5.229h2.171Z" transform="translate(-1.637 0)"/>
+  </g>
+</svg>
diff --git a/src/assets/img/reddit.svg b/src/assets/img/reddit.svg
new file mode 100644
index 000000000..b4f687be9
--- /dev/null
+++ b/src/assets/img/reddit.svg
@@ -0,0 +1,8 @@
+<svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+  <g fill="#FFFFFF">
+    <path d="M16,32 C7.163444,32 0,24.836556 0,16 C0,7.163444 7.163444,0 16,0 C24.836556,0 32,7.163444 32,16 C32,24.836556 24.836556,32 16,32 Z M26,15.5 C26,14.1 24.9,13 23.5,13 C22.9,13 22.3,13.2 21.9,13.6 C20.4,12.7 18.6,12.1 16.5,12 L17.6,8 L21,9 C21,10.1045695 21.8954305,11 23,11 C24.1045695,11 25,10.1045695 25,9 C25,7.8954305 24.1045695,7 23,7 C22.3,7 21.6,7.4 21.3,8 L17.3,7 C17,6.9 16.8,7.1 16.7,7.4 L15.5,12 C13.5,12.1 11.6,12.7 10.1,13.6 C9.7,13.2 9.1,13 8.5,13 C7.1,13 6,14.1 6,15.5 C6,16.4 6.4,17.1 7.1,17.6 L7,18.5 C7,22.1 11,25 16,25 C21,25 25,22.1 25,18.5 L24.9,17.6 C25.6,17.1 26,16.4 26,15.5 Z" id="byCombined-Shape"/>
+    <path d="M19.8,21.2 C18,22.3 14,22.3 12.2,21.2 C12,21 11.9,20.7 12.1,20.5 C12.3,20.3 12.6,20.2 12.8,20.4 C14,21.3 18,21.3 19.2,20.4 C19.4,20.2 19.7,20.3 19.9,20.5 C20.1,20.7 20,21 19.8,21.2 L19.8,21.2 Z" id="byShape"/>
+    <path d="M13,15.8 C13.7,15.8 14.2,16.4 14.2,17 C14.2,17.6 13.7,18.2 13,18.2 C12.3,18.2 11.8,17.7 11.8,17 C11.8,16.3 12.3,15.8 13,15.8 L13,15.8 Z" id="byShape"/>
+    <path d="M19,18.2 C18.3,18.2 17.8,17.6 17.8,17 C17.8,16.3 18.4,15.8 19,15.8 C19.7,15.8 20.2,16.4 20.2,17 C20.2,17.7 19.7,18.2 19,18.2 Z" id="byShape"/>
+  </g>
+</svg>
diff --git a/src/assets/img/spinningwheel-1.gif b/src/assets/img/spinningwheel-1.gif
new file mode 100644
index 000000000..a28fc9ffd
Binary files /dev/null and b/src/assets/img/spinningwheel-1.gif differ
diff --git a/src/assets/img/spinningwheel.gif b/src/assets/img/spinningwheel.gif
new file mode 100644
index 000000000..a28fc9ffd
Binary files /dev/null and b/src/assets/img/spinningwheel.gif differ
diff --git a/src/assets/img/stripes-2-crop-footer.jpg b/src/assets/img/stripes-2-crop-footer.jpg
new file mode 100644
index 000000000..12d9b4bfd
Binary files /dev/null and b/src/assets/img/stripes-2-crop-footer.jpg differ
diff --git a/src/assets/img/stripes-2-crop.jpg b/src/assets/img/stripes-2-crop.jpg
new file mode 100644
index 000000000..727e46587
Binary files /dev/null and b/src/assets/img/stripes-2-crop.jpg differ
diff --git a/src/assets/img/telegramm.svg b/src/assets/img/telegramm.svg
new file mode 100644
index 000000000..f268b5332
--- /dev/null
+++ b/src/assets/img/telegramm.svg
@@ -0,0 +1,3 @@
+<svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+  <path fill="#FFFFFF" d="M16,32 C7.163444,32 0,24.836556 0,16 C0,7.163444 7.163444,0 16,0 C24.836556,0 32,7.163444 32,16 C32,24.836556 24.836556,32 16,32 Z M12.0889832,23.2438913 C12.578106,23.2438913 12.8047727,23.0222246 13.0791586,22.7538913 L15.4531937,20.5022246 L20.3921411,24.0722246 C21.2988077,24.5622246 21.9549481,24.305558 22.1816148,23.2438913 L25.426527,8.29889129 C25.7605621,6.99222462 24.9254744,6.39722462 24.0545972,6.78222462 L5.00266739,13.9688913 C3.70231651,14.4822246 3.71424634,15.1938913 4.7640709,15.485558 L9.65529897,17.0022246 L20.9647727,10.0138913 C21.5016148,9.69889129 21.9907376,9.87389129 21.5851235,10.235558 L12.4230183,18.3088913 L12.0889832,23.2438913 Z" id="coCombined-Shape"/>
+</svg>
diff --git a/src/assets/img/twitter.svg b/src/assets/img/twitter.svg
new file mode 100644
index 000000000..5213d28ef
--- /dev/null
+++ b/src/assets/img/twitter.svg
@@ -0,0 +1,3 @@
+<svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+  <path fill="#FFFFFF" d="M16,7.10542736e-16 C20.2434638,3.55271368e-16 24.3131264,1.68570945 27.3137085,4.6862915 C30.3142906,7.68687356 32,11.7565362 32,16 C32,24.836556 24.836556,32 16,32 C11.7565362,32 7.68687356,30.3142906 4.6862915,27.3137085 C1.68570945,24.3131264 3.55271368e-16,20.2434638 0,16 C-2.13162821e-15,11.7565362 1.68570945,7.68687356 4.6862915,4.6862915 C7.68687356,1.68570945 11.7565362,7.10542736e-16 16,0 L16,7.10542736e-16 Z M25.136,11.728 C25.904,11.088 26.8,10.32 27.2,9.472 C26.544,9.808 25.76,10.016 24.896,10.128 C25.696,9.552 26.352,8.8 26.688,7.776 C25.856,8.224 25.008,8.608 23.952,8.8 C21.472,5.808 15.536,8.24 16.592,12.72 C12.416,12.464 9.872,10.576 7.76,8.256 C6.56,10.208 7.6,13.168 9.024,13.984 C8.288,13.936 7.728,13.712 7.2,13.456 C7.264,15.92 8.624,17.104 10.528,17.744 C9.952,17.856 9.312,17.888 8.704,17.792 C9.296,19.504 10.528,20.576 12.64,20.8 C11.2,22.016 8.544,22.864 6.4,22.528 C8.24,23.696 10.336,24.624 13.248,24.496 C20.304,24.176 25.024,19.12 25.136,11.728 Z"/>
+</svg>
diff --git a/src/assets/img/wallet-title-bg.png b/src/assets/img/wallet-title-bg.png
new file mode 100644
index 000000000..44edb7e56
Binary files /dev/null and b/src/assets/img/wallet-title-bg.png differ
diff --git a/src/components/common/ui/Button/Button.jsx b/src/components/common/ui/Button/Button.jsx
index 97ad6f608..d710a1806 100644
--- a/src/components/common/ui/Button/Button.jsx
+++ b/src/components/common/ui/Button/Button.jsx
@@ -68,12 +68,15 @@ export default class Button extends PureComponent {
     if (flat) {
       buttonType = 'flat'
     }
+
+    const buttonClasses = classnames('button', buttonType)
+
     return (
       <div styleName='root' className={classnames('Button_root', this.props.className)}>
         <button
           ref={this.setRef}
           disabled={this.props.disabled}
-          styleName={classnames('button', buttonType)}
+          styleName={buttonClasses}
           type={this.props.type}
           onClick={this.handleTouchTap}
         >
diff --git a/src/components/common/ui/Button/Button.scss b/src/components/common/ui/Button/Button.scss
index 20ff69577..21b833a20 100644
--- a/src/components/common/ui/Button/Button.scss
+++ b/src/components/common/ui/Button/Button.scss
@@ -52,6 +52,25 @@
   }
 }
 
+.login {
+  font-weight: 700;
+  font-size: 16px;
+  line-height: 45px;
+  padding: 0 50px;
+  min-width: 280px;
+  border-radius: 50px;
+  white-space: nowrap;
+  color: $color-white;
+  background-color: $button-color-1;
+
+  &:hover, &:active {
+    background-color: $button-color-2
+  }
+  &:disabled {
+    background-color: $button-color-3;
+  }
+}
+
 :global {
   .ripple {
     position: absolute;
diff --git a/src/components/common/ui/UserRow/UserRow.js b/src/components/common/ui/UserRow/UserRow.js
new file mode 100644
index 000000000..d6d54562f
--- /dev/null
+++ b/src/components/common/ui/UserRow/UserRow.js
@@ -0,0 +1,71 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import classnames from 'classnames'
+import css from './UserRow.scss'
+
+export default class UserRow extends React.Component {
+  static propTypes = {
+    avatar: PropTypes.string,
+    name: PropTypes.string,
+    address: PropTypes.string,
+    onClick: PropTypes.func,
+    hideActionIcon: PropTypes.bool,
+    actionIcon: PropTypes.string,
+    actionIconClass: PropTypes.string,
+    reverseIcon: PropTypes.bool,
+  }
+
+  static defaultProps = {
+    avatar: '/src/assets/img/profile-photo-1.jpg',
+    name: '',
+    address: '',
+    onClick: () => {},
+    hideActionIcon: false,
+    actionIcon: '/src/assets/img/icons/list.svg',
+    actionIconClass: '',
+    reverseIcon: false,
+  }
+
+  render () {
+    const {
+      handleSubmit,
+      error,
+      pristine,
+      invalid,
+      avatar,
+      actionIcon,
+      hideActionIcon,
+      title,
+      subtitle,
+      onClick,
+      reverseIcon,
+    } = this.props
+
+    return (
+      <div styleName={classnames('userBlock', onClick ? '' : 'userBlockSingle')} onClick={onClick ? onClick : () => {}}>
+        <div styleName={classnames('userBlockInner')}>
+          <div styleName={classnames('userBlockAvatar')}>
+            <img styleName={classnames('userAvatar')} src={avatar} alt='' />
+          </div>
+          <div styleName={classnames('userBlockInfo')}>
+            { title ? (
+              <div styleName={classnames('title')}>
+                {title}
+              </div>) : null}
+            { subtitle ? (
+              <div styleName={classnames('subtitle')}>
+                {subtitle}
+              </div>) : null}
+          </div>
+        </div>
+        { !hideActionIcon ? (
+          <div styleName={classnames('actionWrapper')}>
+            <span styleName={classnames('actionListTrigger', onClick ? '' : 'actionListTriggerDisabled')}>
+              <img styleName={classnames(reverseIcon ? 'reverseIcon' : '')} src={actionIcon} alt='' />
+            </span>
+          </div>
+        ) : null}
+      </div>
+    )
+  }
+}
diff --git a/src/components/common/ui/UserRow/UserRow.scss b/src/components/common/ui/UserRow/UserRow.scss
new file mode 100644
index 000000000..5307e9205
--- /dev/null
+++ b/src/components/common/ui/UserRow/UserRow.scss
@@ -0,0 +1,88 @@
+@import "~styles/partials/variables";
+@import "~styles/partials/mixins";
+
+.userBlock {
+  color: $additionalData-color-1;
+  border-bottom: 1px solid $color-purpule;
+  padding: 18px 0;
+  text-align: left;
+  font-weight: 400;
+  display: flex;
+  justify-content: space-between;
+  cursor: pointer;
+
+  &.userBlockSingle {
+    cursor: initial;
+  }
+
+  &:hover .userBlockInfo {
+    color: $color-hover;
+  }
+
+  .userBlockInner {
+    display: flex;
+
+    .userBlockAvatar {
+      .userAvatar {
+        width: 40px;
+        border-radius: 20px;
+        margin-right: 20px;
+        display: block;
+      }
+    }
+
+    .userBlockInfo {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      min-width: 0;
+
+      .title {
+        font-size: 16px;
+        line-height: 22px;
+        min-width: 0;
+        word-break: break-all;
+        padding-right: 20px;
+        font-weight: 500;
+      }
+
+      .subtitle {
+        font-size: 12px;
+        line-height: 17px;
+        min-width: 0;
+        word-break: break-all;
+      }
+    }
+  }
+
+  .actionWrapper {
+    align-items: center;
+    display: flex;
+  }
+
+  .actionListTrigger {
+    background: transparent;
+    width: 24px;
+    border: none;
+    opacity: 0.25;
+    cursor: pointer;
+    outline: none;
+
+    &.actionListTriggerDisabled {
+      cursor: initial;
+    }
+
+    &:hover {
+      opacity: 1;
+    }
+
+    img {
+      display: block;
+    }
+  }
+
+}
+
+.reverseIcon {
+  transform: matrix(-1,0,0,-1,0,0);
+}
diff --git a/src/components/index.js b/src/components/index.js
index 00f78db81..e9eee11b5 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -48,5 +48,6 @@ export { default as CopyDialog } from './dialogs/CopyDialog/CopyDialog'
 export { default as WalletPendingTransfers } from './wallet/WalletPendingTransfers'
 export { default as WalletWidget } from './wallet/WalletWidget/WalletWidget'
 export { default as Button } from './common/ui/Button/Button'
+export { default as UserRow } from './common/ui/UserRow/UserRow'
 export { default as TxConfirmations } from './common/TxConfirmations/TxConfirmations'
 export { default as TopButtons } from './common/TopButtons/TopButtons'
diff --git a/src/layouts/Footer/Footer.js b/src/layouts/Footer/Footer.js
new file mode 100644
index 000000000..ab194f4c7
--- /dev/null
+++ b/src/layouts/Footer/Footer.js
@@ -0,0 +1,138 @@
+/**
+ * Copyright 2017–2018, LaborX PTY
+ * Licensed under the AGPL Version 3 license.
+ */
+
+import { Translate } from 'react-redux-i18n'
+import PropTypes from 'prop-types'
+import React, { Component } from 'react'
+import { reduxForm, Field } from 'redux-form/immutable'
+
+import { Button } from 'components'
+import { TextField } from 'redux-form-material-ui'
+import LogoChronobankFull from 'assets/img/logo-chrono-bank-full.svg'
+import PlayWhite from 'assets/img/play-white.svg'
+import AppstoreWhite from 'assets/img/appstore-white.svg'
+import facebook from 'assets/img/facebook.svg'
+import reddit from 'assets/img/reddit.svg'
+import instagram from 'assets/img/instagram.svg'
+import github from 'assets/img/github.svg'
+import twitter from 'assets/img/twitter.svg'
+import telegramm from 'assets/img/telegramm.svg'
+import StripesToCropFooter from 'assets/img/stripes-2-crop-footer.jpg'
+
+import './Footer.scss'
+import styles from './styles'
+
+const FORM_FOOTER_EMAIL_SUBSCRIPTION = 'FooterEmailSubscriptionForm'
+
+@reduxForm({ form: FORM_FOOTER_EMAIL_SUBSCRIPTION })
+export default class Footer extends Component {
+  static propTypes = {
+    children: PropTypes.node,
+  }
+
+  render () {
+    return (
+      <div styleName='footer'>
+        <div styleName='footer-container'>
+          <div styleName='navigation'>
+            <div styleName='navigation-chrono-logo-container'>
+              <img styleName='navigation-chrono-logo' src={LogoChronobankFull} />
+            </div>
+
+            <ul styleName='navigation-list' >
+              <li>Home</li>
+              <li>LaborX</li>
+              <li>Team</li>
+              <li>FAQ</li>
+              <li>Blog</li>
+              <li>Business Outline</li>
+              <li>Development Plan</li>
+              <li>White Paper</li>
+            </ul>
+
+          </div>
+
+          <div styleName='downloads'>
+            <div styleName='title-container'>
+              <span styleName='title'>Downloads</span>
+            </div>
+
+            <div styleName='market-logo-container'>
+              <img styleName='ios-market-logo ' src={AppstoreWhite} />
+            </div>
+
+            <div styleName='market-logo-container'>
+              <img styleName='android-market-logo ' src={PlayWhite} />
+            </div>
+
+            <ul styleName='navigation-list' >
+              <li>Desktop App (Windows)</li>
+              <li>Desktop App (MacOS)</li>
+            </ul>
+
+          </div>
+
+          <div styleName='connect'>
+            <div styleName='title-container'>
+              <span styleName='title'>{'Connect with us'}</span>
+            </div>
+            <div styleName='logos-container'>
+              <div styleName='logo'>
+                <img styleName='img-logo' src={facebook} />
+              </div>
+              <div styleName='logo'>
+                <img styleName='img-logo' src={twitter} />
+              </div>
+              <div styleName='logo'>
+                <img styleName='img-logo' src={instagram} />
+              </div>
+              <div styleName='logo'>
+                <img styleName='img-logo' src={reddit} />
+              </div>
+              <div styleName='logo'>
+                <img styleName='img-logo' src={telegramm} />
+              </div>
+              <div styleName='logo'>
+                <img styleName='img-logo' src={github} />
+              </div>
+            </div>
+
+            <ul styleName='navigation-list' >
+              <li styleName='first'>info@chronobank.io</li>
+              <li>support@chronobank.io</li>
+            </ul>
+          </div>
+
+          <form name={FORM_FOOTER_EMAIL_SUBSCRIPTION} styleName='subscription'>
+            <div styleName='subscription-input'>
+              <Field
+                component={TextField}
+                name='email'
+                floatingLabelText='Enter email to subscribe for newsletter'
+                fullWidth
+                {...styles.textField}
+              />
+            </div>
+            <div styleName='subscription-button'>
+              <Button
+                styleName='button'
+                label={<Translate value='subscribe' />}
+              />
+            </div>
+          </form>
+
+        </div>
+        <div styleName='copyright'>
+          <span styleName='copyright-text'>
+            {<Translate value={'copyright'} />}
+          </span>
+        </div>
+
+        <img styleName='background' src={StripesToCropFooter} alt='' />
+
+      </div>
+    )
+  }
+}
diff --git a/src/layouts/Footer/Footer.scss b/src/layouts/Footer/Footer.scss
new file mode 100644
index 000000000..7c9eba6b6
--- /dev/null
+++ b/src/layouts/Footer/Footer.scss
@@ -0,0 +1,246 @@
+/**
+ * Copyright 2017–2018, LaborX PTY
+ * Licensed under the AGPL Version 3 license.
+ */
+@import "~styles/partials/mixins";
+@import "~styles/partials/variables";
+
+$copyRightPadding: 200px;
+
+.root {
+  background-image: $bg-gradient-0;
+  position: relative;
+  display: flex;
+  min-height: 100vh;
+  flex-direction: column;
+
+  @include md-only {
+    padding-bottom: 230px;
+  }
+
+  &:after {
+    // hack for preloading material icons and avoid FUOC on render
+    content: '';
+    font-family: 'Material Icons';
+  }
+}
+
+.content {
+  flex: 1;
+  width: 470px;
+  margin: 0 auto;
+  padding-top: 40px;
+
+  @include md-only {
+    padding-top: 80px;
+  }
+  @include xs-only {
+    width: 100vw;
+  }
+}
+
+.footer {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  min-width: 700px;
+  padding: 17px 80px;
+  align-items: center;
+  justify-content: flex-start;
+  overflow: hidden;
+
+  @include md-only {
+    padding: 20px;
+    min-width: 0;
+  }
+
+  .subscription {
+    position: absolute;
+    display: flex;
+    bottom: 0;
+    left: 335px;
+  }
+
+  .subscription-input {
+    width: 280px;
+    display: flex;
+  }
+
+  .subscription-button {
+    width: 280px;
+    margin-left: 30px;
+    display: flex;
+    align-items: flex-end;
+
+    .button {
+      button {
+        background: $color-light-blue;
+        font-size: 14px;
+        border-radius: 50px;
+        padding: 0 17px;
+        min-height: 30px;
+
+        &:hover {
+          background: #E2A864;
+        }
+      }
+    }
+  }
+
+  .copyright {
+    display: flex;
+    margin-top: 30px;
+    width: 870px;
+    z-index: 2;
+
+    @include md-only {
+      width: auto;
+      text-align: center;
+    }
+  }
+
+  .copyright-text {
+    color: #9997B2;
+    font-weight: 400;
+    font-size: 12px;
+    line-height: 14px;
+    text-align: left;
+  }
+
+  .footer-container {
+    display: flex;
+    z-index: 2;
+    position: relative;
+
+    @include md-only {
+      display: none;
+    }
+  }
+
+  .navigation-chrono-logo-container {
+    overflow: hidden;
+    display: flex;
+  }
+
+  .navigation-chrono-logo {
+    width: 250px;
+    display: block;
+    margin-left: -67px;
+  }
+
+  .navigation {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    width: 310px;
+    padding-left: 30px;
+    padding-right: 30px;
+  }
+
+
+  .navigation-list {
+
+    display: flex;
+    flex-direction: column;
+    list-style-type: none;
+
+    li {
+      display: flex;
+      color: $color-light-blue;
+      font-weight: 500;
+      font-size: 14px;
+      margin-top: 20px;
+
+      &.first {
+        margin: 0;
+      }
+    }
+
+  }
+
+  .title-container {
+    display: flex;
+    margin: 10px 0 30px;
+  }
+
+  .title {
+    color: #E2A864;
+    font-weight: 700;
+    font-size: 20px;
+    line-height: 24px;
+  }
+
+  .downloads {
+    display: flex;
+    flex-direction: column;
+    width: 310px;
+    padding-left: 30px;
+    padding-right: 30px;
+
+    .market-logo-container {
+      display: block;
+      margin-bottom: 20px;
+    }
+
+    .ios-market-logo {
+      display: block;
+      width: 125px;
+    }
+
+    .android-market-logo {
+      display: block;
+      width: 125px;
+    }
+
+  }
+
+  .connect {
+    display: flex;
+    flex-direction: column;
+    width: 310px;
+
+    padding-left: 30px;
+    padding-right: 30px;
+
+    .logos-container {
+      display: flex;
+      width: 125px;
+      height: 130px;
+      flex-direction: row;
+      justify-content: space-between;
+      flex-wrap: wrap;
+    }
+
+    .logo {
+      display: flex;
+    }
+
+    .img-logo {
+      width: 32px;
+      height: 32px;
+    }
+  }
+}
+
+.link {
+  color: white;
+  margin: auto 45px;
+  text-decoration: none;
+  font-size: 18px;
+
+}
+
+.background {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: -750px;
+  margin: auto;
+
+  @include md-only {
+    display: none;
+  }
+}
diff --git a/src/layouts/Footer/lang.js b/src/layouts/Footer/lang.js
new file mode 100644
index 000000000..efa7f6b92
--- /dev/null
+++ b/src/layouts/Footer/lang.js
@@ -0,0 +1,13 @@
+/**
+ * Copyright 2017–2018, LaborX PTY
+ * Licensed under the AGPL Version 3 license.
+ */
+
+export const prefix = `Splash`
+
+export default {
+  en: {
+    copyright: 'Copyright ©2018 LaborX Australia Pty Ltd. All Rights Reserved.',
+    subscribe: 'Subscribe',
+  },
+}
diff --git a/src/layouts/Footer/styles.js b/src/layouts/Footer/styles.js
new file mode 100644
index 000000000..ccc86af92
--- /dev/null
+++ b/src/layouts/Footer/styles.js
@@ -0,0 +1,30 @@
+export default {
+  textField: {
+    style: {
+      height: 62,
+    },
+    underlineStyle: {
+      borderColor: '#A3A3CC',
+      bottom: 0,
+    },
+    underlineFocusStyle: {
+      borderColor: '#E2A864',
+      bottom: 0,
+    },
+    inputStyle: {
+      color: '#9997B2',
+      textAlign: 'center',
+      marginTop: 0,
+      paddingTop: 18,
+    },
+    floatingLabelStyle: {
+      color: '#A3A3CC',
+      top: 28,
+      left: 0,
+      right: 0,
+      margin: 'auto',
+      textAlign: 'center',
+      transformOrigin: 'center center',
+    },
+  },
+}
diff --git a/src/layouts/Markup.jsx b/src/layouts/Markup.jsx
index c82973551..169a8854c 100644
--- a/src/layouts/Markup.jsx
+++ b/src/layouts/Markup.jsx
@@ -116,7 +116,7 @@ export default class Markup extends PureComponent {
               <div styleName='pageTitle'>
                 {this.renderPageTitle()}
               </div>
-              <HeaderPartial location={this.props.location} />
+              {/*<HeaderPartial location={this.props.location} />*/}
             </div>
             <div styleName='middleSnackbar'>
               <div styleName='middleSnackbarPanel'>
@@ -136,7 +136,7 @@ export default class Markup extends PureComponent {
             </div>
           </div>
           <div styleName='middleBottom' />
-          <SideStack />
+          {/*<SideStack />*/}
           <ModalStack />
         </div>
       </MuiThemeProvider>
diff --git a/src/layouts/Splash/Splash.js b/src/layouts/Splash/Splash.js
index d44331a4b..f79e16b76 100644
--- a/src/layouts/Splash/Splash.js
+++ b/src/layouts/Splash/Splash.js
@@ -3,38 +3,70 @@
  * Licensed under the AGPL Version 3 license.
  */
 
-import { Translate } from 'react-redux-i18n'
 import PropTypes from 'prop-types'
 import React, { Component } from 'react'
-import ChronoBankLogo from 'components/common/ChronoBankLogo/ChronoBankLogo'
+
+import WalletTitleBG from 'assets/img/wallet-title-bg.png'
+import StripesToCrop from 'assets/img/stripes-2-crop.jpg'
+import ChronoWalletLogoBright from 'assets/img/chronowalletlogobright.svg'
+import ChronoWalletTextBright from 'assets/img/chronowallettextbright.svg'
+import BackIcon from 'assets/img/icons/back.svg'
+
+import Footer from '../Footer/Footer'
+import PersistWrapper from '../partials/PersistWrapper/PersistWrapper'
 
 import './Splash.scss'
 
-class Splash extends Component {
+export default class Splash extends Component {
   static propTypes = {
     children: PropTypes.node,
+    goBack: PropTypes.func,
+    navigatorText: PropTypes.string,
+  }
+
+  static defaultProps = {
+    goBack: null,
+    navigatorText: '',
   }
 
   render () {
+    const { children, goBack, navigatorText } = this.props
+
     return (
       <div styleName='root'>
-        <div styleName='content'>
-          <ChronoBankLogo version={require('../../../package.json').version} />
-          {this.props.children}
+        <div styleName='header-container'>
+          <div styleName='header-picture'>
+            <img src={StripesToCrop} alt='' />
+          </div>
+          <div styleName='header-picture-crop'>
+            <img src={WalletTitleBG} alt='' />
+          </div>
+          <div styleName='header-logos'>
+            <img styleName='chrono-wallet-logo-bright' src={ChronoWalletLogoBright} alt='' />
+            <img styleName='chrono-wallet-text-bright' src={ChronoWalletTextBright} alt='' />
+          </div>
         </div>
-        {!window.isMobile && (
-          <div styleName='footer'>
-            <div styleName='copyright'><Translate value='copyright' /></div>
-            <div styleName='links'>
-              <a styleName='link' href='https://chronobank.io'><Translate value='chronobankSite' /></a>
-              <a styleName='link' href='https://chronobank.io/faq'><Translate value='qa' /></a>
-              <a styleName='link' href='https://chronobank.io/#contactus'><Translate value='contactUs' /></a>
+
+        {
+          goBack ? (
+            <div styleName='header-navigator'>
+              <button styleName='back-button' onClick={goBack}>
+                <img src={BackIcon} alt='' />
+              </button>
+              <span styleName='navigator-text'>
+                { navigatorText }
+              </span>
             </div>
-          </div>
-        )}
+          ) : null
+        }
+
+        <PersistWrapper>
+          {children ? children: null}
+        </PersistWrapper>
+
+        {!window.isMobile && (<Footer />)}
       </div>
     )
   }
 }
 
-export default Splash
diff --git a/src/layouts/Splash/Splash.scss b/src/layouts/Splash/Splash.scss
index 51dc29f46..07b08b2f5 100644
--- a/src/layouts/Splash/Splash.scss
+++ b/src/layouts/Splash/Splash.scss
@@ -8,15 +8,16 @@
 $copyRightPadding: 200px;
 
 .root {
-  background-image: $bg-gradient-0;
+  background-color: #242045;
   position: relative;
-  padding-bottom: 130px; // for footer
   display: flex;
   min-height: 100vh;
   flex-direction: column;
+  font-family: $font-proxima;
 
   @include md-only {
-    padding-bottom: 230px;
+    min-height: 100vh;
+    padding: 0;
   }
 
   &:after {
@@ -26,20 +27,6 @@ $copyRightPadding: 200px;
   }
 }
 
-.content {
-  flex: 1;
-  width: 470px;
-  margin: 0 auto;
-  padding-top: 40px;
-
-  @include md-only {
-    padding-top: 80px;
-  }
-  @include xs-only {
-    width: 100vw;
-  }
-}
-
 .footer {
   display: flex;
   background-color: rgba(255, 255, 255, 0.1);
@@ -55,6 +42,94 @@ $copyRightPadding: 200px;
   }
 }
 
+.header-container {
+  display: flex;
+  justify-content: center;
+  height: 340px;
+  overflow: hidden;
+  margin-bottom: 20px;
+  position: relative;
+
+}
+
+.header-images {
+
+}
+
+.header-navigator {
+  position: absolute;
+  display: none;
+  align-items: center;
+  top: 0;
+  left: 0;
+  width: 100%;
+  line-height: 70px;
+  height: 70px;
+  padding-left: 20px;
+
+  @include xs-only {
+    display: flex;
+  }
+}
+
+.back-button {
+  background: transparent;
+  border:0;
+  cursor: pointer;
+  margin-right: 20px;
+
+  img {
+    width: 24px;
+    height: 24px;
+    display: block;
+  }
+}
+
+.navigator-text {
+  color: #fff;
+  font-weight: 700;
+}
+
+.header-picture {
+  display: flex;
+  position: absolute;
+  height: 320px;
+  overflow: hidden;
+  flex: 1;
+}
+
+.header-picture-crop {
+  display: flex;
+  position: absolute;
+  height: 400px;
+  top: -115px;
+  flex: 1;
+}
+
+.header-logos {
+  z-index: 100;
+  display: flex;
+  position: relative;
+  flex-direction: column;
+  align-items: center;
+  top: 90px;
+  width: 300px;
+  height: 200px;
+}
+
+.chrono-wallet-logo-bright {
+  display: flex;
+  width: 114px;
+  height: 117px;
+  margin-bottom: 40px;
+}
+
+.chrono-wallet-text-bright {
+  display: flex;
+  height: 59px;
+  width: 282px;
+}
+
 .copyright {
   max-width: $copyRightPadding;
   font-size: 12px;
@@ -62,6 +137,25 @@ $copyRightPadding: 200px;
   color: white;
 }
 
+.create-title {
+  color: $color-white;
+  font-weight: 700;
+  font-size: 30px;
+  line-height: 42px;
+  margin-bottom: 10px;
+  text-align: center;
+}
+
+.create-title-description {
+  font-weight: 400;
+  color: $color-description;
+  font-size: 16px;
+  line-height: 22px;
+  margin-bottom: 10px;
+  text-align: center;
+  width: 520px;
+}
+
 .links {
   padding-right: $copyRightPadding; // compensation for centering
   text-align: center;
@@ -79,14 +173,41 @@ $copyRightPadding: 200px;
   }
 }
 
-.link {
+.actions {
   color: white;
+  text-align: center;
+  line-height: 30px;
+  margin-bottom: 45px;
+}
+
+.link {
+  color: $border-color;
   margin: auto 45px;
   text-decoration: none;
-  font-family: $font-family-main;
-  font-size: 18px;
+  font: 700 16px $font-proxima;
+
+  &:hover {
+    color: #FFB54E;
+  }
 
   @include md-only {
     margin: 0 0 10px;
   }
 }
+
+.fields-block {
+  margin: 0 auto 50px;
+  max-width: 300px;
+}
+
+.button {
+  margin-bottom: 25px;
+
+  button {
+    font: 700 16px $font-proxima;
+    line-height: 45px;
+    padding: 0 50px;
+    border-radius: 50px;
+    white-space: nowrap;
+  }
+}
diff --git a/src/layouts/Splash/styles.js b/src/layouts/Splash/styles.js
new file mode 100644
index 000000000..6bd9566ea
--- /dev/null
+++ b/src/layouts/Splash/styles.js
@@ -0,0 +1,35 @@
+export default {
+  textField: {
+    style: {
+      height: 62,
+    },
+    underlineStyle: {
+      borderColor: '#424066',
+      bottom: 0,
+    },
+    underlineFocusStyle: {
+      borderColor: '#FFB54E',
+      bottom: 0,
+    },
+    inputStyle: {
+      color: '#A3A3CC',
+      textAlign: 'center',
+      marginTop: 0,
+      paddingTop: 18,
+    },
+    floatingLabelStyle: {
+      color: '#A3A3CC',
+      top: 28,
+      left: 0,
+      right: 0,
+      margin: 'auto',
+      textAlign: 'center',
+      transformOrigin: 'center center',
+    },
+    errorStyle: {
+      bottom: 0,
+      marginTop: 5,
+      textAlign: 'center',
+    },
+  },
+}
diff --git a/src/layouts/partials/LocaleDropDown/LocaleDropDown.jsx b/src/layouts/partials/LocaleDropDown/LocaleDropDown.jsx
index e3a9c2228..4a695f630 100644
--- a/src/layouts/partials/LocaleDropDown/LocaleDropDown.jsx
+++ b/src/layouts/partials/LocaleDropDown/LocaleDropDown.jsx
@@ -10,6 +10,7 @@ import { connect } from 'react-redux'
 import i18n from 'i18n'
 import { Button } from 'components'
 import { changeMomentLocale } from 'redux/ui/actions'
+import classnames from 'classnames'
 
 import './LocaleDropDown.scss'
 
@@ -64,6 +65,7 @@ export default class LocaleDropDown extends PureComponent {
   }
 
   render () {
+    const { locale } = this.props
     const locales = Object.entries(i18n).map(([ name, dictionary ]) => ({
       name,
       title: dictionary.title,
@@ -75,7 +77,7 @@ export default class LocaleDropDown extends PureComponent {
           styleName='langButton'
           onClick={this.handleClick}
         >
-          {this.props.locale}
+          {locale}
         </Button>
 
         <Popover
@@ -84,17 +86,24 @@ export default class LocaleDropDown extends PureComponent {
           anchorOrigin={{ horizontal: 'middle', vertical: 'bottom' }}
           targetOrigin={{ horizontal: 'middle', vertical: 'top' }}
           onRequestClose={this.handleRequestClose}
+          style={{
+            background: 'transparent',
+          }}
         >
-          <Menu styleName='LocaleDropDown'>
-            {locales.map((item) => (
-              <MenuItem
+          <ul styleName='LocaleDropDown'>
+            {locales.map((item, i) => (
+              <li
+                key={i}
+                styleName={classnames({
+                  LocaleDropDownItem: true,
+                  LocaleDropDownItemActive: item.name === locale,
+                })}
                 onClick={() => this.handleChangeLocale(item.name)}
-                value={item.name}
-                key={item.name}
-                primaryText={item.title}
-              />
+              >
+                {item.title}
+              </li>
             ))}
-          </Menu>
+          </ul>
         </Popover>
       </div>
     )
diff --git a/src/layouts/partials/LocaleDropDown/LocaleDropDown.scss b/src/layouts/partials/LocaleDropDown/LocaleDropDown.scss
index 3fe03508c..da6e0f604 100644
--- a/src/layouts/partials/LocaleDropDown/LocaleDropDown.scss
+++ b/src/layouts/partials/LocaleDropDown/LocaleDropDown.scss
@@ -6,25 +6,44 @@
 @import "~styles/partials/variables";
 
 .LocaleDropDown {
+  border-radius: 20px;
+  border-top: 3px solid #E2A864;
+  overflow: hidden;
+  background: #fff;
+  margin-top: 10px;
+
   @include xs-only {
     width: 100%;
     top: 10px;
   }
 }
 
+.LocaleDropDownItem {
+  padding: 15px 20px;
+  font-size: 14px;
+  font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
+  cursor: pointer;
+
+  &:hover, &.LocaleDropDownItemActive {
+    background: #F2F2F2;
+  }
+}
+
 .root {
 
 }
 
 .langButton {
   button {
-    color: $color-white;
-    border-radius: 50%;
-    width: 40px;
-    height: 40px;
-    margin: 5px;
-    padding: 0;
-    font-size: 20px;
-    font-weight: lighter;
+    color: #5DB3ED;
+    border:1px solid #5DB3ED;
+    background: transparent;
+    font-size: 16px;
+    text-transform: uppercase;
+
+    &:hover {
+      color:#fff;
+      border-color: transparent;
+    }
   }
 }
diff --git a/src/layouts/partials/PersistWrapper/PersistWrapper.js b/src/layouts/partials/PersistWrapper/PersistWrapper.js
new file mode 100644
index 000000000..d0cab5d0e
--- /dev/null
+++ b/src/layouts/partials/PersistWrapper/PersistWrapper.js
@@ -0,0 +1,48 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+import { connect } from 'react-redux'
+import spinner from 'assets/img/spinningwheel-1.gif'
+
+import './PersistWrapper.scss'
+
+const mapStateToProps = (state) => {
+  return {
+    rehydrated: state.get('persistAccount').rehydrated,
+  }
+}
+
+class PersistWrapper extends React.Component {
+  static propTypes = {
+    rehydrated: PropTypes.bool,
+  }
+
+  static contextTypes = {
+    store: PropTypes.object.isRequired,
+  }
+
+  constructor (props, context) {
+    super(props, context)
+    this.store = context.store
+  }
+
+  renderLoader(){
+    return (
+      <div styleName='loadingMessage'>
+        {/*<div styleName='loadingMessageHeader'>Log In</div>*/}
+        <img src={spinner} width='24' height='24' alt='' />
+      </div>
+    )
+  }
+
+  render () {
+    const { rehydrated, children } = this.props
+    if (!rehydrated){
+      return this.renderLoader()
+    }
+
+    return children
+  }
+
+}
+
+export default connect(mapStateToProps, null)(PersistWrapper)
diff --git a/src/layouts/partials/PersistWrapper/PersistWrapper.scss b/src/layouts/partials/PersistWrapper/PersistWrapper.scss
new file mode 100644
index 000000000..1165ce933
--- /dev/null
+++ b/src/layouts/partials/PersistWrapper/PersistWrapper.scss
@@ -0,0 +1,23 @@
+.loadingMessage {
+  text-align: center;
+  padding: 40px 130px;
+  color: #fff;
+  font-size: 20px;
+  font-weight: bold;
+  line-height: 24px;
+  margin-bottom: 45px;
+
+  @media (max-width: 640px) {
+    padding: 40px 20px;
+  }
+
+
+}
+
+.loadingMessageHeader {
+  line-height: 24px;
+  font-weight: bold;
+  font-size: 20px;
+  color: #fff;
+  margin-bottom: 50px;
+}
diff --git a/src/layouts/partials/index.js b/src/layouts/partials/index.js
index 212fc811b..e0c00fb84 100644
--- a/src/layouts/partials/index.js
+++ b/src/layouts/partials/index.js
@@ -23,6 +23,7 @@ import DrawerMainMenu from './DrawerMainMenu/DrawerMainMenu'
 import DepositsContent from './DepositsContent/DepositsContent'
 import DepositContent from './DepositContent/DepositContent'
 import TwoFAContent from './TwoFAContent/TwoFAContent'
+import PersistWrapper from './PersistWrapper/PersistWrapper'
 
 export {
   HeaderPartial,
@@ -45,6 +46,7 @@ export {
   DepositContent,
   AddWalletContent,
   TwoFAContent,
+  PersistWrapper,
 }
 
 export default {
@@ -68,4 +70,5 @@ export default {
   DepositContent,
   AddWalletContent,
   TwoFAContent,
+  PersistWrapper,
 }
diff --git a/src/models/persistAccount/AbstractWalletModel.js b/src/models/persistAccount/AbstractWalletModel.js
new file mode 100644
index 000000000..92d878628
--- /dev/null
+++ b/src/models/persistAccount/AbstractWalletModel.js
@@ -0,0 +1,8 @@
+import PropTypes from 'prop-types'
+
+export default class AbstractWalletModel {
+  constructor (props, schema) {
+    PropTypes.checkPropTypes(schema, props, 'prop', '' + this.class)
+    Object.assign(this, props)
+  }
+}
diff --git a/src/models/persistAccount/SignerModel.js b/src/models/persistAccount/SignerModel.js
new file mode 100644
index 000000000..628ad2574
--- /dev/null
+++ b/src/models/persistAccount/SignerModel.js
@@ -0,0 +1,16 @@
+import PropTypes from 'prop-types'
+import AbstractWalletModel from './AbstractWalletModel'
+
+const schema = {
+  address: PropTypes.string.isRequired,
+  sign: PropTypes.func.isRequired,
+  signTransaction: PropTypes.func.isRequired,
+}
+
+export default class SignerModel extends AbstractWalletModel {
+  constructor (props) {
+    super(props, schema)
+    Object.assign(this, props)
+    Object.freeze(this)
+  }
+}
diff --git a/src/models/persistAccount/WalletEntryModel.js b/src/models/persistAccount/WalletEntryModel.js
new file mode 100644
index 000000000..a4b758aaf
--- /dev/null
+++ b/src/models/persistAccount/WalletEntryModel.js
@@ -0,0 +1,21 @@
+import PropTypes from 'prop-types'
+import AbstractWalletModel from './AbstractWalletModel'
+
+const schema = {
+  key: PropTypes.string,
+  name: PropTypes.string,
+  types: PropTypes.object,
+  encrypted: PropTypes.array,
+}
+
+export default class WalletEntryModel extends AbstractWalletModel {
+  constructor (props) {
+    super(props, schema)
+    Object.assign(this, {
+      key: '',
+      name: '',
+      types: {},
+    }, props)
+    Object.freeze(this)
+  }
+}
diff --git a/src/models/persistAccount/WalletModel.js b/src/models/persistAccount/WalletModel.js
new file mode 100644
index 000000000..1d8459a2b
--- /dev/null
+++ b/src/models/persistAccount/WalletModel.js
@@ -0,0 +1,26 @@
+import PropTypes from 'prop-types'
+import AbstractWalletModel from './AbstractWalletModel'
+import WalletEntryModel from './WalletEntryModel'
+import SignerModel from './SignerModel'
+
+const schema = {
+  wallet: PropTypes.object,
+  entry: PropTypes.instanceOf(WalletEntryModel),
+}
+
+export default class WalletModel extends AbstractWalletModel {
+  constructor (props) {
+    super(props, schema)
+    Object.assign(this, props)
+    Object.freeze(this)
+  }
+
+  get signer () {
+    // TODO @ipavlenko: Implement custom signers for hardware tokens
+    return new SignerModel({
+      address: this.wallet[0].address.toLowerCase(),
+      sign: this.wallet[0].sign,
+      signTransaction: this.wallet[0].signTransaction,
+    })
+  }
+}
diff --git a/src/models/persistAccount/index.js b/src/models/persistAccount/index.js
new file mode 100644
index 000000000..569753291
--- /dev/null
+++ b/src/models/persistAccount/index.js
@@ -0,0 +1,11 @@
+import AbstractWalletModel from './AbstractWalletModel'
+import SignerModel from './SignerModel'
+import WalletEntryModel from './WalletEntryModel'
+import WalletModel from './WalletModel'
+
+export {
+  AbstractWalletModel,
+  SignerModel,
+  WalletEntryModel,
+  WalletModel,
+}
diff --git a/src/models/persistWallet/AbstractWalletModel.js b/src/models/persistWallet/AbstractWalletModel.js
new file mode 100644
index 000000000..92d878628
--- /dev/null
+++ b/src/models/persistWallet/AbstractWalletModel.js
@@ -0,0 +1,8 @@
+import PropTypes from 'prop-types'
+
+export default class AbstractWalletModel {
+  constructor (props, schema) {
+    PropTypes.checkPropTypes(schema, props, 'prop', '' + this.class)
+    Object.assign(this, props)
+  }
+}
diff --git a/src/models/persistWallet/SignerModel.js b/src/models/persistWallet/SignerModel.js
new file mode 100644
index 000000000..628ad2574
--- /dev/null
+++ b/src/models/persistWallet/SignerModel.js
@@ -0,0 +1,16 @@
+import PropTypes from 'prop-types'
+import AbstractWalletModel from './AbstractWalletModel'
+
+const schema = {
+  address: PropTypes.string.isRequired,
+  sign: PropTypes.func.isRequired,
+  signTransaction: PropTypes.func.isRequired,
+}
+
+export default class SignerModel extends AbstractWalletModel {
+  constructor (props) {
+    super(props, schema)
+    Object.assign(this, props)
+    Object.freeze(this)
+  }
+}
diff --git a/src/models/persistWallet/WalletEntryModel.js b/src/models/persistWallet/WalletEntryModel.js
new file mode 100644
index 000000000..a4b758aaf
--- /dev/null
+++ b/src/models/persistWallet/WalletEntryModel.js
@@ -0,0 +1,21 @@
+import PropTypes from 'prop-types'
+import AbstractWalletModel from './AbstractWalletModel'
+
+const schema = {
+  key: PropTypes.string,
+  name: PropTypes.string,
+  types: PropTypes.object,
+  encrypted: PropTypes.array,
+}
+
+export default class WalletEntryModel extends AbstractWalletModel {
+  constructor (props) {
+    super(props, schema)
+    Object.assign(this, {
+      key: '',
+      name: '',
+      types: {},
+    }, props)
+    Object.freeze(this)
+  }
+}
diff --git a/src/models/persistWallet/WalletModel.js b/src/models/persistWallet/WalletModel.js
new file mode 100644
index 000000000..1d8459a2b
--- /dev/null
+++ b/src/models/persistWallet/WalletModel.js
@@ -0,0 +1,26 @@
+import PropTypes from 'prop-types'
+import AbstractWalletModel from './AbstractWalletModel'
+import WalletEntryModel from './WalletEntryModel'
+import SignerModel from './SignerModel'
+
+const schema = {
+  wallet: PropTypes.object,
+  entry: PropTypes.instanceOf(WalletEntryModel),
+}
+
+export default class WalletModel extends AbstractWalletModel {
+  constructor (props) {
+    super(props, schema)
+    Object.assign(this, props)
+    Object.freeze(this)
+  }
+
+  get signer () {
+    // TODO @ipavlenko: Implement custom signers for hardware tokens
+    return new SignerModel({
+      address: this.wallet[0].address.toLowerCase(),
+      sign: this.wallet[0].sign,
+      signTransaction: this.wallet[0].signTransaction,
+    })
+  }
+}
diff --git a/src/models/persistWallet/index.js b/src/models/persistWallet/index.js
new file mode 100644
index 000000000..569753291
--- /dev/null
+++ b/src/models/persistWallet/index.js
@@ -0,0 +1,11 @@
+import AbstractWalletModel from './AbstractWalletModel'
+import SignerModel from './SignerModel'
+import WalletEntryModel from './WalletEntryModel'
+import WalletModel from './WalletModel'
+
+export {
+  AbstractWalletModel,
+  SignerModel,
+  WalletEntryModel,
+  WalletModel,
+}
diff --git a/src/pages/ConfirmMnemonicPage/ConfirmMnemonicPage.js b/src/pages/ConfirmMnemonicPage/ConfirmMnemonicPage.js
new file mode 100644
index 000000000..37e9ef3ce
--- /dev/null
+++ b/src/pages/ConfirmMnemonicPage/ConfirmMnemonicPage.js
@@ -0,0 +1,184 @@
+/**
+ * Copyright 2017–2018, LaborX PTY
+ * Licensed under the AGPL Version 3 license.
+ */
+
+import PropTypes from 'prop-types'
+import classnames from 'classnames'
+import { connect } from 'react-redux'
+import { push } from 'react-router-redux'
+import { MuiThemeProvider } from 'material-ui'
+import { reduxForm, Field } from 'redux-form/immutable'
+import React, { Component } from 'react'
+import { Link } from 'react-router'
+import { Button } from 'components'
+import {
+  initConfirmMnemonicPage,
+  navigateToConfirmMnemonicPage,
+  onSubmitConfirmMnemonic,
+  onSubmitConfirmMnemonicSuccess,
+  onSubmitConfirmMnemonicFail,
+} from '@chronobank/login/redux/network/actions'
+
+import './ConfirmMnemonicPage.scss'
+import { FORM_CREATE_ACCOUNT } from "../CreateAccountPage/CreateAccountPage";
+
+export const FORM_CONFIRM_MNEMONIC = 'ConfirmMnemonicForm'
+
+function mapStateToProps (state) {
+
+  return {
+    mnemonic: state.get('network').newAccountMnemonic,
+  }
+}
+
+function mapDispatchToProps (dispatch) {
+  return {
+    navigateToConfirmPage: () => dispatch(navigateToConfirmMnemonicPage()),
+    initConfirmMnemonicPage: () => dispatch(initConfirmMnemonicPage()),
+    onSubmit: (values) => {
+      const confirmMnemonic = values.get('mnemonic')
+
+      dispatch(onSubmitConfirmMnemonic(confirmMnemonic))
+    },
+    onSubmitSuccess: () => dispatch(onSubmitConfirmMnemonicSuccess()),
+    onSubmitFail: (errors, dispatch, submitErrors) => dispatch(onSubmitConfirmMnemonicFail(errors, dispatch, submitErrors)),
+  }
+}
+
+class ConfirmMnemonicPage extends Component {
+  static propTypes = {
+    mnemonic: PropTypes.string,
+    initConfirmMnemonicPage: PropTypes.func,
+  }
+
+  static defaultProps = {
+    mnemonic: '',
+  }
+
+  constructor (props){
+    super(props)
+
+    const wordsArray = props.mnemonic ?
+      props.mnemonic.split(' ').map((word, index) => {
+        return { index, word }
+      }) : []
+
+    this.state = {
+      confirmPhrase: [],
+      currentWordsArray: wordsArray.sort((a,b) => a.word < b.word),
+    }
+  }
+
+  componentDidMount(){
+    this.props.initConfirmMnemonicPage()
+  }
+
+  getCurrentMnemonic (){
+    return this.state.confirmPhrase.map((item) => item.word).join(' ')
+  }
+
+  getWordsButtons (){
+    return this.state.currentWordsArray.map((item, index) => {
+      const wordSelected = this.state.confirmPhrase.includes(item)
+
+      return (
+        <Button
+          key={index}
+          onClick={this.onClickWord.bind(this, item)}
+          styleName={classnames('word')}
+          disabled={wordSelected}
+        >
+          { item.word }
+        </Button>
+      )}
+    )
+  }
+
+  onClickWord (word, e){
+    const { dispatch, change } = this.props
+
+    if (!this.state.confirmPhrase.includes(word)) {
+      this.setState(
+        { confirmPhrase: this.state.confirmPhrase.concat(word) },
+        () => change('mnemonic', this.getCurrentMnemonic())
+      )
+    }
+  }
+
+  clearMnemonic (){
+    const { dispatch, change } = this.props
+
+    this.setState(
+      { confirmPhrase: [] },
+      () => change('mnemonic', this.getCurrentMnemonic())
+    )
+  }
+
+  clearLastWord (){
+    const { dispatch, change } = this.props
+
+    this.setState(
+      { confirmPhrase: this.state.confirmPhrase.slice(0, -1) },
+      () => change('mnemonic', this.getCurrentMnemonic())
+    )
+  }
+
+  render () {
+    const { handleSubmit, error } = this.props
+    console.log('confirm mnemonic page', this.props)
+
+    return (
+      <MuiThemeProvider>
+        <form styleName='form' name={FORM_CONFIRM_MNEMONIC} onSubmit={handleSubmit}>
+          <div>
+            <div styleName='page-title'>Confirm back-up phrase</div>
+
+            <p styleName='description'>Click on back-up phrase words in the correct order.</p>
+
+            <div styleName='passPhraseWrapper'>
+              <div styleName='passPhrase'>{ this.getCurrentMnemonic() }</div>
+              <Field
+                component='input'
+                type='hidden'
+                name='mnemonic'
+                readOnly
+              />
+
+            </div>
+
+            <div styleName={classnames({ error: true,  visible: error })}>
+              {error}
+            </div>
+
+            <div styleName='wordsBlock'>
+              { this.getWordsButtons() }
+            </div>
+
+            <div styleName='controlsBlock'>
+              <div styleName='control' onClick={this.clearMnemonic.bind(this)}>Start Over</div>
+              <div styleName='control' onClick={this.clearLastWord.bind(this)}>Undo</div>
+            </div>
+
+            <div styleName='actions'>
+              <Button styleName='submit' type='submit' buttonType='login'>
+                Done
+              </Button>
+
+              <Link to='/login/mnemonic' href styleName='link'>Back</Link>
+            </div>
+
+            <div styleName='progressBlock'>
+              <div styleName='progressPoint' />
+              <div styleName='progressPoint' />
+              <div styleName='progressPoint progressPointInactive' />
+            </div>
+          </div>
+        </form>
+      </MuiThemeProvider>
+    )
+  }
+}
+
+const form = reduxForm({ form: FORM_CONFIRM_MNEMONIC })(ConfirmMnemonicPage)
+export default connect(mapStateToProps, mapDispatchToProps)(form)
diff --git a/src/pages/ConfirmMnemonicPage/ConfirmMnemonicPage.scss b/src/pages/ConfirmMnemonicPage/ConfirmMnemonicPage.scss
new file mode 100644
index 000000000..50acb912b
--- /dev/null
+++ b/src/pages/ConfirmMnemonicPage/ConfirmMnemonicPage.scss
@@ -0,0 +1,216 @@
+/**
+ * Copyright 2017–2018, LaborX PTY
+ * Licensed under the AGPL Version 3 license.
+ */
+
+@import "~styles/partials/variables";
+@import "~styles/partials/mixins";
+
+
+.page-title {
+  font-size: 30px;
+  margin-bottom: 10px;
+  font-weight: 700;
+}
+
+.description {
+  margin-bottom: 30px;
+  color: $additionalData-color-1;
+
+}
+
+.passPhraseWrapper {
+  position: relative;
+  margin-bottom: 20px;
+  background: $background-color-1;
+  min-height: 100px;
+  border-radius: 2px;
+  padding: 20px 45px 20px 30px;
+}
+
+.passPhrase {
+  font-size: 16px;
+  font-weight: 700;
+  line-height: 24px;
+  color: $button-color-2;
+  text-align: left;
+  min-height: 46px;
+  width: 100%;
+
+  @include md-only {
+    min-height: 70px;
+    color: $synced-color;
+  }
+}
+
+.wordsBlock {
+  display: flex;
+  justify-content: space-between;
+  flex-wrap: wrap;
+}
+
+.word {
+  width: 23%;
+  margin-bottom: 10px;
+
+  button {
+    white-space: nowrap;
+    width: 100%;
+    cursor: pointer;
+    user-select: none;
+    color: #FFFFFF;
+    background-color: #614DBA;
+    text-transform: lowercase;
+    line-height: 62px;
+    border-radius: 2px;
+    font-size: 16px;
+    font-weight: 700;
+    padding: 12px 0;
+  }
+
+  &:hover {
+    background-color: $button-color-2;
+    color: $background-color-1;
+  }
+
+  @include md-only {
+    width: 31%;
+  }
+}
+
+.submitButton {
+  background: #00A0D2;
+  font-size: 14px;
+  font-weight: 500;
+  color: #fff;
+  border-radius: 21px;
+  cursor: pointer;
+  line-height: 40px;
+  height: 40px;
+  min-width: 150px;
+  border: none;
+  margin-bottom: 40px;
+  padding: 0;
+  box-shadow: none;
+
+  &:disabled {
+    cursor: not-allowed;
+  }
+
+  @include md-only {
+    min-width: 180px;
+  }
+
+  &:hover {
+    background: #0088C3;
+  }
+}
+
+.progressBlock {
+  width: 50px;
+  margin: 0 auto 20px;
+  display: flex;
+  justify-content: space-between;
+}
+
+.progressPoint {
+  background: $button-color-2;
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+
+  &.progressPointInactive {
+    background: $color-blue-4;
+  }
+}
+
+.clearMnemonic {
+  width: 23px;
+  height: 23px;
+  display: inline-block;
+  position: absolute;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  margin: auto;
+  padding: 11px;
+  cursor: pointer;
+  box-sizing: content-box;
+
+  img {
+    width: 100%;
+  }
+}
+
+.controlsBlock {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 35px;
+
+  .control {
+    width: 49%;
+    line-height: 42px;
+    font-size: 16px;
+    border: 1px solid $color-blue-4;
+    border-radius: 2px;
+    color: $color-blue-4;
+    cursor: pointer;
+    font-weight: 700;
+
+    &:hover {
+      background: $color-hover;
+      color: $background-color-1;
+      border: 0;
+    }
+  }
+
+}
+
+.form {
+  text-align: center;
+  width: 600px;
+  margin: 0 auto;
+  color: #fff;
+
+  @include md-only {
+    width: auto;
+    padding: 0 20px;
+  }
+}
+
+.actions {
+  text-align: center;
+  margin-bottom: 45px;
+  color: #fff;
+  line-height: 30px;
+}
+
+.link {
+  color: $border-color;
+  margin:  0 auto 45px;
+  text-decoration: none;
+  font: 700 16px $font-proxima;
+
+  &:hover {
+    color: #FFB54E;
+  }
+
+  @include md-only {
+    margin: 0 0 10px;
+  }
+}
+
+.submit {
+  margin-bottom: 25px;
+}
+
+.error {
+  color: red;
+  margin-bottom: 20px;
+  display: none;
+  text-align: center;
+}
+
+.visible {
+  display: block;
+}
diff --git a/src/pages/CreateAccountPage/CreateAccountPage.js b/src/pages/CreateAccountPage/CreateAccountPage.js
new file mode 100644
index 000000000..f254f2c62
--- /dev/null
+++ b/src/pages/CreateAccountPage/CreateAccountPage.js
@@ -0,0 +1,177 @@
+/**
+ * Copyright 2017–2018, LaborX PTY
+ * Licensed under the AGPL Version 3 license.
+ */
+
+import PropTypes from 'prop-types'
+import { MuiThemeProvider } from 'material-ui'
+import React, { PureComponent } from 'react'
+import { connect } from 'react-redux'
+import { Link } from 'react-router'
+import { reduxForm, Field } from 'redux-form/immutable'
+import { TextField } from 'redux-form-material-ui'
+
+import { Button } from 'components'
+import {
+  onSubmitCreateAccountPage,
+  onSubmitCreateAccountPageSuccess,
+  onSubmitCreateAccountPageFail,
+} from '@chronobank/login/redux/network/actions'
+import AutomaticProviderSelector from '@chronobank/login-ui/components/ProviderSelectorSwitcher/AutomaticProviderSelector'
+import ManualProviderSelector from '@chronobank/login-ui/components/ProviderSelectorSwitcher/ManualProviderSelector'
+import web3Provider from '@chronobank/login/network/Web3Provider'
+
+import validate from './validate'
+
+import styles from 'layouts/Splash/styles'
+import fieldStyles from './styles'
+import './CreateAccountPage.scss'
+
+const STRATEGY_MANUAL = 'manual'
+const STRATEGY_AUTOMATIC = 'automatic'
+
+const nextStrategy = {
+  [STRATEGY_AUTOMATIC]: STRATEGY_MANUAL,
+  [STRATEGY_MANUAL]: STRATEGY_AUTOMATIC,
+}
+
+export const FORM_CREATE_ACCOUNT = 'CreateAccountForm'
+
+function mapStateToProps (state, ownProps) {
+
+  return {
+    isImportMode: state.get('network').importAccountMode,
+  }
+}
+
+function mapDispatchToProps (dispatch, ownProps) {
+  return {
+    onSubmit: async (values) => {
+      const walletName = values.get('walletName')
+      const password = values.get('password')
+
+      await dispatch(onSubmitCreateAccountPage(walletName, password))
+    },
+    onSubmitSuccess: () => dispatch(onSubmitCreateAccountPageSuccess()),
+    onSubmitFail: (errors, dispatch, submitErrors) => dispatch(onSubmitCreateAccountPageFail(errors, dispatch, submitErrors)),
+  }
+}
+
+class CreateAccountPage extends PureComponent {
+  static propTypes = {
+    isImportMode: PropTypes.bool,
+  }
+
+  constructor(){
+    super()
+
+    this.state = {
+      isShowProvider: true,
+      strategy: STRATEGY_AUTOMATIC,
+    }
+  }
+
+  handleToggleProvider = (isShowProvider) => this.setState({ isShowProvider })
+
+  handleSelectorSwitch = (currentStrategy) => this.setState({ strategy: nextStrategy[currentStrategy] })
+
+  renderProviderSelector () {
+    switch (this.state.strategy) {
+      case STRATEGY_MANUAL:
+        return this.renderManualProviderSelector()
+      case STRATEGY_AUTOMATIC:
+        return this.renderAutomaticProviderSelector()
+      default:
+        return null
+    }
+  }
+
+  renderAutomaticProviderSelector () {
+    return (
+      <AutomaticProviderSelector
+        currentStrategy={this.state.strategy}
+        onSelectorSwitch={this.handleSelectorSwitch}
+      />
+    )
+  }
+
+  renderManualProviderSelector () {
+    return (
+      <ManualProviderSelector
+        show={this.state.isShowProvider}
+        currentStrategy={this.state.strategy}
+        onSelectorSwitch={this.handleSelectorSwitch}
+      />
+    )
+  }
+
+  render () {
+    const { handleSubmit, pristine, valid, initialValues, isImportMode } = this.props
+
+    return (
+      <MuiThemeProvider muiTheme={styles.inverted}>
+        <form styleName='form' name={FORM_CREATE_ACCOUNT} onSubmit={handleSubmit}>
+          <div styleName='create-title'>
+            Create New Account
+          </div>
+
+          <div styleName='create-title-description'>
+            Created wallet will be encrypted using given password and stored in your
+            browser&apos;s local storage.
+          </div>
+
+          <div styleName='selector'>
+            { this.renderProviderSelector() }
+          </div>
+
+          <div styleName='fields-block'>
+            <Field
+              component={TextField}
+              name='walletName'
+              floatingLabelText='Wallet name'
+              fullWidth
+              {...styles.textField}
+              {...fieldStyles.textField}
+            />
+            <Field
+              component={TextField}
+              name='password'
+              type='password'
+              floatingLabelText='Password'
+              fullWidth
+              {...styles.textField}
+              {...fieldStyles.textField}
+            />
+            <Field
+              component={TextField}
+              name='confirmPassword'
+              type='password'
+              floatingLabelText='Confirm Password'
+              fullWidth
+              {...styles.textField}
+              {...fieldStyles.textField}
+            />
+          </div>
+
+          <div styleName='actions'>
+            <Button
+              styleName='button'
+              buttonType='login'
+              type='submit'
+            >
+              Create new account
+            </Button>
+            or<br />
+            <Link to='/login/select-account' href styleName='link'>Use an existing account</Link>
+          </div>
+
+        </form>
+
+      </MuiThemeProvider>
+    )
+  }
+}
+
+const form = reduxForm({ form: FORM_CREATE_ACCOUNT, validate })(CreateAccountPage)
+export default connect(mapStateToProps, mapDispatchToProps)(form)
+
diff --git a/src/pages/CreateAccountPage/CreateAccountPage.scss b/src/pages/CreateAccountPage/CreateAccountPage.scss
new file mode 100644
index 000000000..3048ae140
--- /dev/null
+++ b/src/pages/CreateAccountPage/CreateAccountPage.scss
@@ -0,0 +1,197 @@
+/**
+ * Copyright 2017–2018, LaborX PTY
+ * Licensed under the AGPL Version 3 license.
+ */
+@import "~styles/partials/mixins";
+@import "~styles/partials/variables";
+
+$copyRightPadding: 200px;
+
+.root {
+  background-color: #242045;
+  position: relative;
+  display: flex;
+  min-height: 100vh;
+  flex-direction: column;
+  font-family: $font-proxima;
+
+  @include md-only {
+    min-height: 100vh;
+    padding: 0;
+  }
+
+  &:after {
+    // hack for preloading material icons and avoid FUOC on render
+    content: '';
+    font-family: 'Material Icons';
+  }
+}
+
+.form {
+  flex: 1;
+  justify-content: center;
+  flex-direction: column;
+  display: flex;
+  margin: 0 auto;
+
+  @include xs-only {
+    padding: 0 20px;
+  }
+}
+
+.content {
+  display: flex;
+  flex: 1;
+  justify-content: center;
+  flex-direction: column;
+  margin: 0 auto;
+
+  @include xs-only {
+    padding: 80px 20px 0;
+  }
+}
+
+.footer {
+  display: flex;
+  background-color: rgba(255, 255, 255, 0.1);
+  bottom: 0;
+  left: 0;
+  right: 0;
+  position: absolute;
+  padding: 17px 80px;
+
+  @include md-only {
+    padding: 20px;
+    flex-direction: column-reverse;
+  }
+}
+
+.header-container {
+  display: flex;
+  justify-content: center;
+  height: 340px;
+  overflow: hidden;
+  margin-bottom: 20px;
+
+  @include md-only {
+    display: none;
+  }
+}
+
+.header-picture {
+  display: flex;
+  position: absolute;
+  height: 320px;
+  overflow: hidden;
+  flex: 1;
+}
+
+.header-picture-crop {
+  display: flex;
+  position: absolute;
+  height: 400px;
+  top: -115px;
+  flex: 1;
+}
+
+.header-logos {
+  z-index: 100;
+  display: flex;
+  position: relative;
+  flex-direction: column;
+  align-items: center;
+  top: 90px;
+  width: 300px;
+  height: 200px;
+}
+
+.chrono-wallet-logo-bright {
+  display: flex;
+  width: 114px;
+  height: 117px;
+  margin-bottom: 40px;
+}
+
+.chrono-wallet-text-bright {
+  display: flex;
+  height: 59px;
+  width: 282px;
+}
+
+.copyright {
+  max-width: $copyRightPadding;
+  font-size: 12px;
+  font-weight: 300;
+  color: white;
+}
+
+.create-title {
+  color: $color-white;
+  font-weight: 700;
+  font-size: 30px;
+  line-height: 42px;
+  margin-bottom: 10px;
+  text-align: center;
+}
+
+.create-title-description {
+  font-weight: 400;
+  color: $color-description;
+  font-size: 16px;
+  line-height: 22px;
+  margin-bottom: 10px;
+  text-align: center;
+  max-width: 520px;
+}
+
+.links {
+  padding-right: $copyRightPadding; // compensation for centering
+  text-align: center;
+  flex-grow: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  @include md-only {
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: flex-start;
+  }
+}
+
+.actions {
+  color: white;
+  text-align: center;
+  line-height: 30px;
+  margin-bottom: 45px;
+}
+
+.link {
+  color: $border-color;
+  margin: auto 45px;
+  text-decoration: none;
+  font: 700 16px $font-proxima;
+
+  &:hover {
+    color: #FFB54E;
+  }
+
+  @include md-only {
+    margin: 0 0 10px;
+  }
+}
+
+.fields-block {
+  margin: 0 auto 50px;
+  max-width: 300px;
+}
+
+.button {
+  margin-bottom: 25px;
+}
+
+.selector {
+  color: #fff;
+}
diff --git a/src/pages/CreateAccountPage/styles.js b/src/pages/CreateAccountPage/styles.js
new file mode 100644
index 000000000..265d41576
--- /dev/null
+++ b/src/pages/CreateAccountPage/styles.js
@@ -0,0 +1,8 @@
+export default {
+  textField: {
+    underlineStyle: {
+      borderColor: '#A3A3CC',
+      bottom: 0,
+    },
+  },
+}
diff --git a/src/pages/CreateAccountPage/validate.js b/src/pages/CreateAccountPage/validate.js
new file mode 100644
index 000000000..183b6eb86
--- /dev/null
+++ b/src/pages/CreateAccountPage/validate.js
@@ -0,0 +1,32 @@
+/**
+ * Copyright 2017–2018, LaborX PTY
+ * Licensed under the AGPL Version 3 license.
+ */
+
+import ErrorList from 'platform/ErrorList'
+import * as validator from 'models/validator'
+
+const validateEqualPasswords = (password, confirmPassword) => password === confirmPassword ? null : 'Wrong password'
+
+export default (values) => {
+  const walletName = values.get('walletName')
+
+  let walletNameErrors = new ErrorList()
+  walletNameErrors.add(validator.required(walletName))
+
+  const password = values.get('password')
+
+  let passwordErrors = new ErrorList()
+  passwordErrors.add(validator.required(password))
+
+  const confirmPassword = values.get('confirmPassword')
+  let confirmPasswordErrors = new ErrorList()
+  confirmPasswordErrors.add(validator.required(confirmPassword))
+  confirmPasswordErrors.add(validateEqualPasswords(password, confirmPassword))
+
+  return {
+    walletName: walletNameErrors.getErrors(),
+    password: passwordErrors.getErrors(),
+    confirmPassword: confirmPasswordErrors.getErrors(),
+  }
+}
diff --git a/src/pages/DownloadWalletFilePage/DownloadWalletFilePage.js b/src/pages/DownloadWalletFilePage/DownloadWalletFilePage.js
new file mode 100644
index 000000000..76195d515
--- /dev/null
+++ b/src/pages/DownloadWalletFilePage/DownloadWalletFilePage.js
@@ -0,0 +1,83 @@
+/**
+ * Copyright 2017–2018, LaborX PTY
+ * Licensed under the AGPL Version 3 license.
+ */
+
+import PropTypes from 'prop-types'
+import classnames from 'classnames'
+import { MuiThemeProvider } from 'material-ui'
+import { reduxForm, Field } from 'redux-form/immutable'
+import { connect } from 'react-redux'
+import React, { Component } from 'react'
+import { Link } from 'react-router'
+import { Button } from 'components'
+import {
+  downloadWallet,
+} from 'redux/persistAccount/actions'
+import {
+  navigateToLoginPage,
+} from '@chronobank/login/redux/network/actions'
+
+import Wallet from 'assets/img/icons/wallet-white.svg'
+
+import './DownloadWalletFilePage.scss'
+
+function mapDispatchToProps (dispatch) {
+  return {
+    downloadWallet: () => dispatch(downloadWallet()),
+    navigateToLoginPage: () => dispatch(navigateToLoginPage()),
+  }
+}
+
+@connect(null, mapDispatchToProps)
+export default class MnemonicPage extends Component {
+  static propTypes = {
+    downloadWallet: PropTypes.func,
+    navigateToLoginPage: PropTypes.func,
+  }
+
+  render () {
+    const { downloadWallet, navigateToLoginPage } = this.props
+
+    return (
+      <MuiThemeProvider>
+        <div styleName='wrapper'>
+          <div>
+            <div styleName='page-title'>Download a Wallet File</div>
+
+            <p styleName='description'>
+              You can use this wallet file in password recovery option to
+              make your account available in another browser, for example.
+              The file is protected by the same password as your created before.
+            </p>
+
+            <div styleName='actions'>
+              <Button
+                styleName='button'
+                onClick={downloadWallet}
+              >
+                <img src={Wallet} alt='' />
+                <br />
+                Download
+              </Button>
+
+              <Button
+                styleName='submit'
+                buttonType='login'
+                onClick={navigateToLoginPage}
+              >
+                Finish
+              </Button>
+            </div>
+
+            <div styleName='progress-block'>
+              <div styleName='progress-point' />
+              <div styleName='progress-point' />
+              <div styleName='progress-point' />
+            </div>
+          </div>
+        </div>
+      </MuiThemeProvider>
+    )
+  }
+}
diff --git a/src/pages/DownloadWalletFilePage/DownloadWalletFilePage.scss b/src/pages/DownloadWalletFilePage/DownloadWalletFilePage.scss
new file mode 100644
index 000000000..ed40e91e3
--- /dev/null
+++ b/src/pages/DownloadWalletFilePage/DownloadWalletFilePage.scss
@@ -0,0 +1,109 @@
+/**
+ * Copyright 2017–2018, LaborX PTY
+ * Licensed under the AGPL Version 3 license.
+ */
+
+@import "~styles/partials/variables";
+@import "~styles/partials/mixins";
+
+.wrapper {
+  text-align: center;
+  max-width: 600px;
+  margin: 0 auto;
+  color: #fff;
+
+  @include md-only {
+    padding: 0 20px;
+  }
+}
+
+.page-title {
+  font-size: 30px;
+  margin-bottom: 10px;
+  font-weight: 700;
+}
+
+.description {
+  margin-bottom: 50px;
+  color: $additionalData-color-1;
+  line-height: 22px;
+  font-weight: 400;
+
+  @include md-only {
+    margin-bottom: 20px;
+  }
+}
+
+.progress-block {
+  width: 50px;
+  margin: 0 auto 20px;
+  display: flex;
+  justify-content: space-between;
+}
+
+.progress-point {
+  background: $button-color-2;
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+
+  &.progress-point-inactive {
+    background: $color-blue-4;
+  }
+}
+
+.row {
+  margin: 0 auto 50px;
+}
+
+.actions {
+  text-align: center;
+  margin-bottom: 45px;
+  color: #fff;
+  line-height: 30px;
+}
+
+.link {
+  color: $border-color;
+  margin:  0 auto 45px;
+  text-decoration: none;
+  font: 700 16px $font-proxima;
+
+  &:hover {
+    color: #FFB54E;
+  }
+
+  @include md-only {
+    margin: 0 0 10px;
+  }
+}
+
+.submit {
+  margin-bottom: 25px;
+}
+
+.wallet-img {
+  width: 48px;
+  height: 48px;
+  display: block;
+  margin: 0 auto;
+}
+
+.button {
+  text-align: center;
+  margin-bottom: 50px;
+
+  button {
+    font-size: 14px;
+    text-transform: none;
+    width: 110px;
+    height: 100px;
+    padding: 0;
+    border-radius: 3px;
+  }
+
+  img {
+    width: 50px;
+    margin-bottom: 5px;
+  }
+}
diff --git a/src/pages/ImportMethodsPage/ImportMethodsPage.js b/src/pages/ImportMethodsPage/ImportMethodsPage.js
new file mode 100644
index 000000000..1652d1559
--- /dev/null
+++ b/src/pages/ImportMethodsPage/ImportMethodsPage.js
@@ -0,0 +1,136 @@
+/**
+ * Copyright 2017–2018, LaborX PTY
+ * Licensed under the AGPL Version 3 license.
+ */
+
+import PropTypes from 'prop-types'
+import { MuiThemeProvider } from 'material-ui'
+import React, { PureComponent } from 'react'
+import { Link } from 'react-router'
+import { connect } from 'react-redux'
+import { Button } from 'components'
+
+import {
+  navigateToMnemonicImportMethod,
+  navigateToPrivateKeyImportMethod,
+  navigateToCreateAccount,
+  initImportMethodsPage,
+  navigateToCreateAccountWithoutImport,
+} from '@chronobank/login/redux/network/actions'
+
+import Trezor from 'assets/img/icons/trezor-white.svg'
+import Ledger from 'assets/img/icons/ledger-nano-white.svg'
+import Plugin from 'assets/img/icons/plugin-white.svg'
+import Mnemonic from 'assets/img/icons/mnemonic-white.svg'
+import Key from 'assets/img/icons/key-white.svg'
+import Wallet from 'assets/img/icons/wallet-white.svg'
+import Uport from 'assets/img/icons/uport.svg'
+
+// import styles from 'layouts/Splash/styles'
+import './ImportMethodsPage.scss'
+
+function mapDispatchToProps (dispatch) {
+  return {
+    navigateToMnemonicImportMethod: () => dispatch(navigateToMnemonicImportMethod()),
+    navigateToPrivateKeyImportMethod: () => dispatch(navigateToPrivateKeyImportMethod()),
+    navigateToCreateAccount: () => dispatch(navigateToCreateAccount()),
+    navigateToCreateAccountWithoutImport: () => dispatch(navigateToCreateAccountWithoutImport()),
+    initImportMethodsPage: () => dispatch(initImportMethodsPage()),
+  }
+}
+
+@connect(null, mapDispatchToProps)
+export default class ImportMethodsPage extends PureComponent {
+  static propTypes = {
+    navigateToMnemonicImportMethod: PropTypes.func,
+    navigateToPrivateKeyImportMethod: PropTypes.func,
+    initImportMethodsPage: PropTypes.func,
+    navigateToCreateAccountWithoutImport: PropTypes.func,
+  }
+
+  componentDidMount(){
+    this.props.initImportMethodsPage()
+  }
+
+  handleMnemonicLogin = () => this.props.navigateToMnemonicImportMethod()
+
+  handlePrivateKeyLogin = () => this.props.navigateToPrivateKeyImportMethod()
+
+  handleWalletFileLogin = () => {}
+
+  handleCreateAccount = () => this.props.navigateToCreateAccountWithoutImport()
+
+  render () {
+    return (
+      <MuiThemeProvider>
+        <div styleName='page'>
+
+          <div styleName='page-title'>Add an Existing Account</div>
+
+          <div styleName='methods'>
+            <Button styleName='button button-trezor' disabled>
+              <img src={Trezor} alt='' />
+              <br />
+              Trezor
+            </Button>
+
+            <Button styleName='button button-ledger' disabled>
+              <img src={Ledger} alt='' />
+              <br />
+              LedgerNano
+            </Button>
+
+            <Button styleName='button button-plugin' disabled>
+              <img src={Plugin} alt='' />
+              <br />
+              Browser Plugin
+            </Button>
+
+            <Button
+              styleName='button'
+              onClick={this.handleMnemonicLogin}
+            >
+              <img src={Mnemonic} alt='' />
+              <br />
+              Mnemonic
+            </Button>
+
+            <Button
+              styleName='button'
+              onClick={this.handlePrivateKeyLogin}
+            >
+              <img src={Key} alt='' />
+              <br />
+              Private Key
+            </Button>
+
+            <Button
+              styleName='button'
+              onClick={this.handleWalletFileLogin}
+              disabled
+            >
+              <img src={Wallet} alt='' />
+              <br />
+              Wallet File
+            </Button>
+
+            <Button
+              styleName='button button-uport'
+              disabled
+            >
+              <img src={Uport} alt='' />
+              <br />
+              Uport
+            </Button>
+          </div>
+
+          <div styleName='actions'>
+            or <br />
+            <Link to='/login/create-account' href styleName='link' onClick={this.handleCreateAccount}>Create New Account</Link>
+          </div>
+
+        </div>
+      </MuiThemeProvider>
+    )
+  }
+}
diff --git a/src/pages/ImportMethodsPage/ImportMethodsPage.scss b/src/pages/ImportMethodsPage/ImportMethodsPage.scss
new file mode 100644
index 000000000..d18a725c9
--- /dev/null
+++ b/src/pages/ImportMethodsPage/ImportMethodsPage.scss
@@ -0,0 +1,124 @@
+/**
+ * Copyright 2017–2018, LaborX PTY
+ * Licensed under the AGPL Version 3 license.
+ */
+
+@import "~styles/partials/variables";
+@import "~styles/partials/mixins";
+
+ul.actions {
+  position: absolute;
+  top: 30px;
+  right: 80px;
+  display: flex;
+  justify-content: flex-end;
+  flex: 0 0 auto;
+  padding: 0;
+  list-style: none;
+  font-size: 18px;
+  line-height: 48px;
+
+  @include md-only {
+    top: 10px;
+    right: 10px;
+    flex: 1 1 auto;
+  }
+
+  li {
+
+    flex: 0 0 auto;
+
+    a {
+      padding: 10px 20px;
+      text-decoration: none;
+      color: $color-white;
+
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+  }
+}
+
+.page {
+  max-width: 350px;
+  margin:0 auto;
+
+}
+
+.page-title {
+  color: $color-white;
+  font-weight: 700;
+  font-size: 30px;
+  line-height: 42px;
+  margin-bottom: 40px;
+  text-align: center;
+}
+
+.user-row {
+  border-top: 1px solid $color-purpule;
+}
+
+.methods {
+  margin-bottom: 15px;
+  display: flex;
+  justify-content: space-around;
+  flex-wrap: wrap;
+}
+
+.button {
+  width: 31%;
+  margin-bottom: 10px;
+
+  &.button-uport {
+    display: none;
+
+    @include xs-only {
+      display: inline-block;
+    }
+  }
+
+  &.button-trezor,
+  &.button-ledger,
+  &.button-plugin {
+    @include xs-only {
+      display: none;
+    }
+  }
+
+  button {
+    width: 100%;
+    height: 100px;
+    padding: 0;
+    text-transform: none;
+    border-radius: 3px;
+  }
+
+  img {
+    width: 50px;
+    margin-bottom: 5px;
+  }
+}
+
+.actions {
+  text-align: center;
+  margin-bottom: 45px;
+  color: #fff;
+  line-height: 30px;
+}
+
+.link {
+  color: $border-color;
+  margin:  0 auto 45px;
+  text-decoration: none;
+  cursor: pointer;
+  font: 700 16px $font-proxima;
+
+  &:hover {
+    color: #FFB54E;
+  }
+
+  @include md-only {
+    margin: 0 0 10px;
+  }
+}
diff --git a/src/pages/LoginMethods/Mnemonic/Mnemonic.js b/src/pages/LoginMethods/Mnemonic/Mnemonic.js
new file mode 100644
index 000000000..4103884c4
--- /dev/null
+++ b/src/pages/LoginMethods/Mnemonic/Mnemonic.js
@@ -0,0 +1,76 @@
+/**
+ * Copyright 2017–2018, LaborX PTY
+ * Licensed under the AGPL Version 3 license.
+ */
+
+import { MuiThemeProvider } from 'material-ui'
+import React, { PureComponent } from 'react'
+import { connect } from 'react-redux'
+import { reduxForm, Field } from 'redux-form/immutable'
+import { Link } from 'react-router'
+import { TextField } from 'redux-form-material-ui'
+import styles from 'layouts/Splash/styles'
+import { Button } from 'components'
+import {
+  onSubmitMnemonicLoginForm,
+  onSubmitMnemonicLoginFormSuccess,
+  onSubmitMnemonicLoginFormFail,
+} from '@chronobank/login/redux/network/actions'
+
+import './Mnemonic.scss'
+import { FORM_LOGIN_PAGE } from "../../LoginPage/LoginPage";
+
+export const FORM_MNEMONIC_LOGIN_PAGE = 'MnemonicLoginPageForm'
+
+function mapDispatchToProps (dispatch) {
+  return {
+    onSubmit: (values) => {
+      const confirmMnemonic = values.get('mnemonic')
+      dispatch(onSubmitMnemonicLoginForm(confirmMnemonic))
+    },
+    onSubmitSuccess: () => dispatch(onSubmitMnemonicLoginFormSuccess()),
+    onSubmitFail: () => dispatch(onSubmitMnemonicLoginFormFail()),
+  }
+}
+
+class MnemonicLoginPage extends PureComponent {
+  render () {
+    const { handleSubmit } = this.props
+
+    return (
+      <MuiThemeProvider muiTheme={styles.inverted}>
+        <form styleName='form' name={FORM_MNEMONIC_LOGIN_PAGE} onSubmit={handleSubmit}>
+
+          <div styleName='page-title'>Mnemonic form</div>
+
+          <div styleName='field'>
+            <Field
+              component={TextField}
+              name='mnemonic'
+              type='text'
+              floatingLabelText='Mnemonic'
+              fullWidth
+              {...styles.textField}
+            />
+          </div>
+
+          <div styleName='actions'>
+            <Button
+              styleName='button'
+              buttonType='login'
+              type='submit'
+            >
+              Login
+            </Button>
+            or&nbsp;
+            <Link to='/login/import-methods' href styleName='link'>back</Link>
+          </div>
+
+        </form>
+      </MuiThemeProvider>
+    )
+  }
+}
+
+const form = reduxForm({ form: FORM_MNEMONIC_LOGIN_PAGE })(MnemonicLoginPage)
+export default connect(null, mapDispatchToProps)(form)
diff --git a/src/pages/LoginMethods/Mnemonic/Mnemonic.scss b/src/pages/LoginMethods/Mnemonic/Mnemonic.scss
new file mode 100644
index 000000000..6d524ee18
--- /dev/null
+++ b/src/pages/LoginMethods/Mnemonic/Mnemonic.scss
@@ -0,0 +1,94 @@
+/**
+ * Copyright 2017–2018, LaborX PTY
+ * Licensed under the AGPL Version 3 license.
+ */
+
+@import "~styles/partials/variables";
+@import "~styles/partials/mixins";
+
+ul.actions {
+  position: absolute;
+  top: 30px;
+  right: 80px;
+  display: flex;
+  justify-content: flex-end;
+  flex: 0 0 auto;
+  padding: 0;
+  list-style: none;
+  font-size: 18px;
+  line-height: 48px;
+
+  @include md-only {
+    top: 10px;
+    right: 10px;
+    flex: 1 1 auto;
+  }
+
+  li {
+
+    flex: 0 0 auto;
+
+    a {
+      padding: 10px 20px;
+      text-decoration: none;
+      color: $color-white;
+
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+  }
+}
+
+.form {
+  max-width: 380px;
+  margin:0 auto;
+
+  @include xs-only {
+    padding: 0 20px;
+  }
+}
+
+.page-title {
+  color: $color-white;
+  font-weight: 700;
+  font-size: 30px;
+  line-height: 42px;
+  margin-bottom: 40px;
+  text-align: center;
+}
+
+.user-row {
+  border-top: 1px solid $color-purpule;
+}
+
+.field {
+  margin-bottom: 50px;
+}
+
+.button {
+  text-align: center;
+  margin-bottom: 30px;
+}
+
+.actions {
+  text-align: center;
+  margin-bottom: 45px;
+  color: #fff;
+  line-height: 30px;
+}
+
+.link {
+  color: $border-color;
+  margin:  0 auto 45px;
+  text-decoration: none;
+  font: 700 16px $font-proxima;
+
+  &:hover {
+    color: #FFB54E;
+  }
+
+  @include md-only {
+    margin: 0 0 10px;
+  }
+}
diff --git a/src/pages/LoginMethods/PrivateKey/PrivateKey.js b/src/pages/LoginMethods/PrivateKey/PrivateKey.js
new file mode 100644
index 000000000..f566c002a
--- /dev/null
+++ b/src/pages/LoginMethods/PrivateKey/PrivateKey.js
@@ -0,0 +1,75 @@
+/**
+ * Copyright 2017–2018, LaborX PTY
+ * Licensed under the AGPL Version 3 license.
+ */
+
+import { MuiThemeProvider } from 'material-ui'
+import React, { PureComponent } from 'react'
+import { connect } from 'react-redux'
+import { Link } from 'react-router'
+import { reduxForm, Field } from 'redux-form/immutable'
+import { TextField } from 'redux-form-material-ui'
+import styles from 'layouts/Splash/styles'
+import { Button } from 'components'
+import {
+  onSubmitPrivateKeyLoginForm,
+  onSubmitPrivateKeyLoginFormSuccess,
+  onSubmitPrivateKeyLoginFormFail,
+} from '@chronobank/login/redux/network/actions'
+
+import './PrivateKey.scss'
+
+export const FORM_PRIVATE_KEY_LOGIN_PAGE = 'PrivateKeyLoginPageForm'
+
+function mapDispatchToProps (dispatch) {
+  return {
+    onSubmit: (values) => {
+      const privateKey = values.get('pk')
+      dispatch(onSubmitPrivateKeyLoginForm(privateKey))
+    },
+    onSubmitSuccess: () => dispatch(onSubmitPrivateKeyLoginFormSuccess()),
+    onSubmitFail: (errors, dispatch, submitErrors) => dispatch(onSubmitPrivateKeyLoginFormFail(errors, dispatch, submitErrors)),
+  }
+}
+
+class MnemonicLoginPage extends PureComponent {
+  render () {
+    const { handleSubmit } = this.props
+
+    return (
+      <MuiThemeProvider muiTheme={styles.inverted}>
+        <form styleName='form' name={FORM_PRIVATE_KEY_LOGIN_PAGE} onSubmit={handleSubmit}>
+
+          <div styleName='page-title'>Private key form</div>
+
+          <div styleName='field'>
+            <Field
+              component={TextField}
+              name='pk'
+              type='text'
+              floatingLabelText='Private key'
+              fullWidth
+              {...styles.textField}
+            />
+          </div>
+
+          <div styleName='actions'>
+            <Button
+              styleName='button'
+              buttonType='login'
+              type='submit'
+            >
+              Login
+            </Button>
+            or&nbsp;
+            <Link to='/login/import-methods' href styleName='link'>back</Link>
+          </div>
+
+        </form>
+      </MuiThemeProvider>
+    )
+  }
+}
+
+const form = reduxForm({ form: FORM_PRIVATE_KEY_LOGIN_PAGE })(MnemonicLoginPage)
+export default connect(null, mapDispatchToProps)(form)
diff --git a/src/pages/LoginMethods/PrivateKey/PrivateKey.scss b/src/pages/LoginMethods/PrivateKey/PrivateKey.scss
new file mode 100644
index 000000000..6d524ee18
--- /dev/null
+++ b/src/pages/LoginMethods/PrivateKey/PrivateKey.scss
@@ -0,0 +1,94 @@
+/**
+ * Copyright 2017–2018, LaborX PTY
+ * Licensed under the AGPL Version 3 license.
+ */
+
+@import "~styles/partials/variables";
+@import "~styles/partials/mixins";
+
+ul.actions {
+  position: absolute;
+  top: 30px;
+  right: 80px;
+  display: flex;
+  justify-content: flex-end;
+  flex: 0 0 auto;
+  padding: 0;
+  list-style: none;
+  font-size: 18px;
+  line-height: 48px;
+
+  @include md-only {
+    top: 10px;
+    right: 10px;
+    flex: 1 1 auto;
+  }
+
+  li {
+
+    flex: 0 0 auto;
+
+    a {
+      padding: 10px 20px;
+      text-decoration: none;
+      color: $color-white;
+
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+  }
+}
+
+.form {
+  max-width: 380px;
+  margin:0 auto;
+
+  @include xs-only {
+    padding: 0 20px;
+  }
+}
+
+.page-title {
+  color: $color-white;
+  font-weight: 700;
+  font-size: 30px;
+  line-height: 42px;
+  margin-bottom: 40px;
+  text-align: center;
+}
+
+.user-row {
+  border-top: 1px solid $color-purpule;
+}
+
+.field {
+  margin-bottom: 50px;
+}
+
+.button {
+  text-align: center;
+  margin-bottom: 30px;
+}
+
+.actions {
+  text-align: center;
+  margin-bottom: 45px;
+  color: #fff;
+  line-height: 30px;
+}
+
+.link {
+  color: $border-color;
+  margin:  0 auto 45px;
+  text-decoration: none;
+  font: 700 16px $font-proxima;
+
+  &:hover {
+    color: #FFB54E;
+  }
+
+  @include md-only {
+    margin: 0 0 10px;
+  }
+}
diff --git a/src/pages/LoginMethods/WalletFile/UploadWalletPage.js b/src/pages/LoginMethods/WalletFile/UploadWalletPage.js
new file mode 100644
index 000000000..58ad77677
--- /dev/null
+++ b/src/pages/LoginMethods/WalletFile/UploadWalletPage.js
@@ -0,0 +1,82 @@
+/**
+ * Copyright 2017–2018, LaborX PTY
+ * Licensed under the AGPL Version 3 license.
+ */
+
+import PropTypes from 'prop-types'
+import classnames from 'classnames'
+import { MuiThemeProvider } from 'material-ui'
+import { reduxForm, Field } from 'redux-form/immutable'
+import React, { Component } from 'react'
+import { Link } from 'react-router'
+import { UserRow, Button } from 'components'
+
+import FileIcon from 'assets/img/icons/file-white.svg'
+import DeleteIcon from 'assets/img/icons/delete-white.svg'
+import SpinnerGif from 'assets/img/spinningwheel.gif'
+import WarningIcon from 'assets/img/icons/warning.svg'
+import CheckIcon from 'assets/img/icons/check-green.svg'
+
+import './UploadWalletPage.scss'
+
+export default class MnemonicPage extends Component {
+  static propTypes = {
+    mnemonic: PropTypes.string,
+  }
+
+  static defaultProps = {
+    mnemonic: '',
+  }
+
+  render () {
+    return (
+      <MuiThemeProvider>
+        <div styleName='wrapper'>
+          <div>
+            <div styleName='page-title'>Upload a Wallet File</div>
+
+            <p styleName='description'>
+              Upload a wallet file to add the login information to your browser.
+              We provide the file on New Account Creation.
+            </p>
+
+            <div styleName='row'>
+              <Button styleName='button' buttonType='login'>
+                <img styleName='before-img' src={FileIcon} alt='' />
+                <span styleName='button-text'>Browse for a Wallet File</span>
+              </Button>
+
+              <Button styleName='button' buttonType='login' disabled>
+                <img styleName='before-img' src={SpinnerGif} alt='' />
+                <span styleName='button-text'>Uploading</span>
+                <img styleName='after-img' src={DeleteIcon} alt='' />
+              </Button>
+
+              <Button styleName='button' buttonType='login' disabled>
+                <img styleName='before-img' src={CheckIcon} alt='' />
+                <span styleName='button-text'>Uploading</span>
+                <img styleName='after-img' src={DeleteIcon} alt='' />
+              </Button>
+
+              <Button styleName='button button-warning' buttonType='login' disabled>
+                <img styleName='before-img' src={WarningIcon} alt='' />
+                <span styleName='button-text'>Upload Error</span>
+                <img styleName='after-img' src={FileIcon} alt='' />
+              </Button>
+            </div>
+
+            <div styleName='actions'>
+              <Button styleName='submit' buttonType='login' disabled>
+                Proceed to login
+              </Button>
+              or
+              <br />
+              <Link to='/login' href styleName='link'>Back</Link>
+            </div>
+
+          </div>
+        </div>
+      </MuiThemeProvider>
+    )
+  }
+}
diff --git a/src/pages/LoginMethods/WalletFile/UploadWalletPage.scss b/src/pages/LoginMethods/WalletFile/UploadWalletPage.scss
new file mode 100644
index 000000000..6eea2ae81
--- /dev/null
+++ b/src/pages/LoginMethods/WalletFile/UploadWalletPage.scss
@@ -0,0 +1,108 @@
+/**
+ * Copyright 2017–2018, LaborX PTY
+ * Licensed under the AGPL Version 3 license.
+ */
+
+@import "~styles/partials/variables";
+@import "~styles/partials/mixins";
+
+.wrapper {
+  text-align: center;
+  max-width: 600px;
+  margin: 0 auto;
+  color: #fff;
+
+  @include md-only {
+    padding: 0 20px;
+  }
+}
+
+.page-title {
+  font-size: 30px;
+  margin-bottom: 10px;
+  font-weight: 700;
+}
+
+.description {
+  margin-bottom: 50px;
+  color: $additionalData-color-1;
+  line-height: 22px;
+  font-weight: 400;
+
+  @include md-only {
+    margin-bottom: 20px;
+  }
+}
+
+.link {
+  color: $border-color;
+  margin:  0 auto 45px;
+  text-decoration: none;
+  font: 700 16px $font-proxima;
+
+  &:hover {
+    color: #FFB54E;
+  }
+
+  @include md-only {
+    margin: 0 0 10px;
+  }
+}
+
+.submit {
+  margin-bottom: 25px;
+}
+
+.row {
+  margin-bottom: 50px;
+}
+
+.button {
+  button {
+    display: flex;
+    align-items: center;
+    padding: 0 20px;
+    line-height: 45px;
+    min-width: 280px;
+    margin: 0 auto 20px;
+    text-transform: none;
+
+    &:disabled {
+      background: $background-color-1;
+    }
+  }
+
+  &.button-warning button {
+    background: $color-red-2;
+  }
+  .button-text {
+    flex: 1;
+    text-align: left;
+  }
+
+  .before-img {
+    width: 24px;
+    display: inline-block;
+    margin-right: 5px;
+  }
+
+  .after-img {
+    width: 24px;
+    display: inline-block;
+  }
+}
+
+.actions {
+  text-align: center;
+  margin-bottom: 45px;
+  color: $additionalData-color-1;
+  line-height: 30px;
+}
+
+.submit {
+  margin-bottom: 25px;
+
+  button:disabled {
+    background: $background-color-1;
+  }
+}
diff --git a/src/pages/LoginMethods/index.js b/src/pages/LoginMethods/index.js
new file mode 100644
index 000000000..b287c51ee
--- /dev/null
+++ b/src/pages/LoginMethods/index.js
@@ -0,0 +1,2 @@
+export { default as MnemonicLoginPage, FORM_MNEMONIC_LOGIN_PAGE } from './Mnemonic/Mnemonic'
+export { default as PrivateKeyLoginPage, FORM_PRIVATE_KEY_LOGIN_PAGE } from './PrivateKey/PrivateKey'
diff --git a/src/pages/LoginPage/LoginPage.js b/src/pages/LoginPage/LoginPage.js
index 247fdca19..4197c428f 100644
--- a/src/pages/LoginPage/LoginPage.js
+++ b/src/pages/LoginPage/LoginPage.js
@@ -3,29 +3,167 @@
  * Licensed under the AGPL Version 3 license.
  */
 
-import LocaleDropDown from 'layouts/partials/LocaleDropDown/LocaleDropDown'
-import LoginForm from '@chronobank/login-ui/components/LoginForm/LoginForm'
-import { MuiThemeProvider } from 'material-ui'
+import PropTypes from 'prop-types'
+import { MuiThemeProvider, CircularProgress } from 'material-ui'
 import React, { PureComponent } from 'react'
-import { styles } from '@chronobank/login-ui/settings'
+import { Link } from 'react-router'
+import { reduxForm, Field } from 'redux-form/immutable'
+import { TextField } from 'redux-form-material-ui'
+import { connect } from 'react-redux'
+import { Translate } from 'react-redux-i18n'
+import { UserRow, Button } from 'components'
+import {
+  onSubmitLoginForm,
+  onSubmitLoginFormFail,
+  initLoginPage,
+  navigateToSelectWallet,
+} from '@chronobank/login/redux/network/actions'
+import AutomaticProviderSelector from '@chronobank/login-ui/components/ProviderSelectorSwitcher/AutomaticProviderSelector'
+import ManualProviderSelector from '@chronobank/login-ui/components/ProviderSelectorSwitcher/ManualProviderSelector'
 
+import styles from 'layouts/Splash/styles'
 import './LoginPage.scss'
 
+const STRATEGY_MANUAL = 'manual'
+const STRATEGY_AUTOMATIC = 'automatic'
+
+const nextStrategy = {
+  [STRATEGY_AUTOMATIC]: STRATEGY_MANUAL,
+  [STRATEGY_MANUAL]: STRATEGY_AUTOMATIC,
+}
+
+export const FORM_LOGIN_PAGE = 'FormLoginPage'
+
+function mapStateToProps (state, ownProps) {
+
+  return {
+    selectedWallet: state.get('persistAccount').selectedWallet,
+    isLoginSubmitting: state.get('network').isLoginSubmitting,
+  }
+}
+
+function mapDispatchToProps (dispatch, ownProps) {
+  return {
+    onSubmit: async (values) => {
+      const password = values.get('password')
+
+      await dispatch(onSubmitLoginForm(password))
+    },
+    onSubmitFail: () => dispatch(onSubmitLoginFormFail()),
+    initLoginPage: () => dispatch(initLoginPage()),
+    navigateToSelectWallet: () => dispatch(navigateToSelectWallet()),
+  }
+}
+
 class LoginPage extends PureComponent {
+  static propTypes = {
+    initLoginPage: PropTypes.func,
+    navigateToSelectWallet: PropTypes.func,
+    isLoginSubmitting: PropTypes.bool,
+  }
+
+  constructor(props){
+    super(props)
+
+    this.state = {
+      isShowProvider: true,
+      strategy: STRATEGY_AUTOMATIC,
+    }
+  }
+
+  componentWillMount(){
+    this.props.initLoginPage()
+  }
+
+  handleToggleProvider = (isShowProvider) => this.setState({ isShowProvider })
+
+  handleSelectorSwitch = (currentStrategy) => this.setState({ strategy: nextStrategy[currentStrategy] })
+
+  renderProviderSelector () {
+    switch (this.state.strategy) {
+      case STRATEGY_MANUAL:
+        return this.renderManualProviderSelector()
+      case STRATEGY_AUTOMATIC:
+        return this.renderAutomaticProviderSelector()
+      default:
+        return null
+    }
+  }
+
+  renderAutomaticProviderSelector () {
+    return (
+      <AutomaticProviderSelector
+        currentStrategy={this.state.strategy}
+        onSelectorSwitch={this.handleSelectorSwitch}
+      />
+    )
+  }
+
+  renderManualProviderSelector () {
+    return (
+      <ManualProviderSelector
+        show={this.state.isShowProvider}
+        currentStrategy={this.state.strategy}
+        onSelectorSwitch={this.handleSelectorSwitch}
+      />
+    )
+  }
+
   render () {
+    const { handleSubmit, pristine, valid, initialValues, isImportMode, onSubmit, selectedWallet,
+      navigateToSelectWallet, isLoginSubmitting } = this.props
+
     return (
       <MuiThemeProvider muiTheme={styles.inverted}>
-        <div>
-          <LoginForm />
-          <ul styleName='actions'>
-            <li>
-              <LocaleDropDown />
-            </li>
-          </ul>
-        </div>
+        <form styleName='form' name={FORM_LOGIN_PAGE} onSubmit={handleSubmit}>
+
+          <div styleName='page-title'>Log In</div>
+
+          <div styleName='selector'>
+            { this.renderProviderSelector() }
+          </div>
+
+          <div styleName='user-row'>
+            <UserRow
+              title={selectedWallet && selectedWallet.name}
+              avatar={'/src/assets/img/profile-photo-1.jpg'}
+              onClick={navigateToSelectWallet}
+            />
+
+            <div styleName='field'>
+              <Field
+                component={TextField}
+                name='password'
+                type='password'
+                floatingLabelText='Enter Password'
+                fullWidth
+                {...styles.textField}
+              />
+            </div>
+
+            <div styleName='actions'>
+              <Button
+                styleName='button'
+                buttonType='login'
+                type='submit'
+                label={isLoginSubmitting
+                  ? <CircularProgress
+                    style={{ verticalAlign: 'middle', marginTop: -2 }}
+                    size={24}
+                    thickness={1.5}
+                  /> : 'Log In'}
+                disabled={isLoginSubmitting}
+              />
+
+              <Link to='/recover-account' href styleName='link'>Forgot you password?</Link>
+            </div>
+          </div>
+
+        </form>
       </MuiThemeProvider>
     )
   }
 }
 
-export default LoginPage
+const form = reduxForm({ form: FORM_LOGIN_PAGE })(LoginPage)
+export default connect(mapStateToProps, mapDispatchToProps)(form)
diff --git a/src/pages/LoginPage/LoginPage.scss b/src/pages/LoginPage/LoginPage.scss
index 1b58ae2a5..8514b0650 100644
--- a/src/pages/LoginPage/LoginPage.scss
+++ b/src/pages/LoginPage/LoginPage.scss
@@ -40,3 +40,57 @@ ul.actions {
   }
 }
 
+.form {
+  max-width: 380px;
+  margin:0 auto;
+
+  @include xs-only {
+    padding: 0 20px;
+  }
+}
+
+.selector {
+  color: white;
+}
+
+.page-title {
+  color: $color-white;
+  font-weight: 700;
+  font-size: 30px;
+  line-height: 42px;
+  margin-bottom: 40px;
+  text-align: center;
+}
+
+.user-row {
+  border-top: 1px solid $color-purpule;
+}
+
+.field {
+  margin-bottom: 50px;
+}
+
+.button {
+  text-align: center;
+  margin-bottom: 30px;
+}
+
+.actions {
+  text-align: center;
+  margin-bottom: 45px;
+}
+
+.link {
+  color: $border-color;
+  margin:  0 auto 45px;
+  text-decoration: none;
+  font: 700 16px $font-proxima;
+
+  &:hover {
+    color: #FFB54E;
+  }
+
+  @include md-only {
+    margin: 0 0 10px;
+  }
+}
diff --git a/src/pages/MnemonicPage/MnemonicPage.js b/src/pages/MnemonicPage/MnemonicPage.js
new file mode 100644
index 000000000..40c560608
--- /dev/null
+++ b/src/pages/MnemonicPage/MnemonicPage.js
@@ -0,0 +1,119 @@
+/**
+ * Copyright 2017–2018, LaborX PTY
+ * Licensed under the AGPL Version 3 license.
+ */
+
+import PropTypes from 'prop-types'
+import { push } from 'react-router-redux'
+import { connect } from 'react-redux'
+import classnames from 'classnames'
+import { MuiThemeProvider } from 'material-ui'
+import { reduxForm, Field } from 'redux-form/immutable'
+import React, { Component } from 'react'
+import { Link } from 'react-router'
+import { UserRow, Button } from 'components'
+import { initMnemonicPage, navigateToConfirmMnemonicPage } from '@chronobank/login/redux/network/actions'
+
+import PrintIcon from 'assets/img/icons/print-white.svg'
+
+import './MnemonicPage.scss'
+
+function mapStateToProps (state, ownProps) {
+
+  return {
+    mnemonic: state.get('network').newAccountMnemonic,
+  }
+}
+
+function mapDispatchToProps (dispatch, ownProps) {
+  return {
+    initMnemonicPage: () => dispatch(initMnemonicPage()),
+    navigateToConfirmPage: () => dispatch(navigateToConfirmMnemonicPage()),
+  }
+}
+
+@connect(mapStateToProps, mapDispatchToProps)
+export default class MnemonicPage extends Component {
+  static propTypes = {
+    mnemonic: PropTypes.string,
+    initMnemonicPage: PropTypes.func,
+    navigateToConfirmPage: PropTypes.func,
+  }
+
+  static defaultProps = {
+    mnemonic: '',
+  }
+
+  componentDidMount(){
+    this.props.initMnemonicPage()
+  }
+
+  navigateToConfirmPage(){
+    this.props.navigateToConfirmPage()
+  }
+
+  render () {
+    return (
+      <MuiThemeProvider>
+        <div styleName='wrapper'>
+          <div>
+            <div styleName='page-title'>Write down back-up phrase</div>
+
+            <p styleName='description'>
+              You can use this phrase to login and access your wallet,
+              even if you forgot your password. You may also print the key
+              which will be provided with a QR code. Use this QR code to
+              scan on phone on ChronoWallet recover page.
+            </p>
+
+            <div styleName='passPhraseWrapper'>
+              <div styleName='passPhrase'>{ this.props.mnemonic }</div>
+              <div styleName='printButtonWrapper'>
+                <div styleName='printButton' onClick={() => {}}>
+                  <img src={PrintIcon} alt='' />
+                </div>
+              </div>
+            </div>
+
+            <div styleName='infoBlock'>
+              <div styleName='infoBlockHeader'>Important! Read the security guidelines</div>
+
+              <ol styleName='infoBlockList'>
+                <li>
+                  <p styleName='listItemContent'>
+                    <b>Don&apos;t share your back-up phrase (mnemonic key) with someone you don&apos;t trust.</b>
+                    &nbsp;Double check services you&apos;re giving your mnemonic to and don&apos;t share your phrase with anyone.
+                  </p>
+                </li>
+
+                <li>
+                  <p styleName='listItemContent'>
+                    <b>Don&apos;t loose your back-up phrase (mnemonic key).</b>
+                    &nbsp;We do not store this information and Your account will be lost
+                    together with all your funds and history.
+                  </p>
+                </li>
+              </ol>
+            </div>
+
+            <div styleName='actions'>
+              <Button
+                styleName='submit'
+                buttonType='login'
+                onClick={this.navigateToConfirmPage.bind(this)}
+              >
+                Proceed
+              </Button>
+            </div>
+
+            <div styleName='progressBlock'>
+              <div styleName='progressPoint' />
+              <div styleName='progressPoint' />
+              <div styleName='progressPoint progressPointInactive' />
+            </div>
+          </div>
+        </div>
+      </MuiThemeProvider>
+    )
+  }
+}
diff --git a/src/pages/MnemonicPage/MnemonicPage.scss b/src/pages/MnemonicPage/MnemonicPage.scss
new file mode 100644
index 000000000..c7d7994be
--- /dev/null
+++ b/src/pages/MnemonicPage/MnemonicPage.scss
@@ -0,0 +1,167 @@
+/**
+ * Copyright 2017–2018, LaborX PTY
+ * Licensed under the AGPL Version 3 license.
+ */
+
+@import "~styles/partials/variables";
+@import "~styles/partials/mixins";
+
+.wrapper {
+  text-align: center;
+  max-width: 600px;
+  margin: 0 auto;
+  color: #fff;
+
+  @include md-only {
+    padding: 0 20px;
+  }
+}
+
+.page-title {
+  font-size: 30px;
+  margin-bottom: 10px;
+  font-weight: 700;
+}
+
+.description {
+  margin-bottom: 30px;
+  color: $additionalData-color-1;
+  line-height: 22px;
+  font-weight: 400;
+
+  @include md-only {
+    margin-bottom: 20px;
+  }
+}
+
+.passPhraseWrapper {
+  position: relative;
+  margin-bottom: 20px;
+  background: $background-color-1;
+  min-height: 100px;
+  border-radius: 2px;
+  padding: 30px 60px 20px 30px;
+
+  @include md-only {
+    margin-bottom: 0;
+  }
+}
+
+.passPhrase {
+  font-size: 16px;
+  font-weight: 700;
+  line-height: 24px;
+  color: $button-color-2;
+  text-align: left;
+  min-height: 46px;
+  width: 100%;
+
+  @include md-only {
+    min-height: 55px;
+  }
+}
+
+
+.progressBlock {
+  width: 50px;
+  margin: 0 auto 20px;
+  display: flex;
+  justify-content: space-between;
+}
+
+.progressPoint {
+  background: $button-color-2;
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+
+  &.progressPointInactive {
+    background: $color-blue-4;
+  }
+}
+
+.actions {
+  text-align: center;
+  margin-bottom: 45px;
+  color: #fff;
+  line-height: 30px;
+}
+
+.link {
+  color: $border-color;
+  margin:  0 auto 45px;
+  text-decoration: none;
+  font: 700 16px $font-proxima;
+
+  &:hover {
+    color: #FFB54E;
+  }
+
+  @include md-only {
+    margin: 0 0 10px;
+  }
+}
+
+.submit {
+  margin-bottom: 25px;
+}
+
+.infoBlock {
+  text-align: left;
+  padding: 32px 30px 10px;
+  border-top: 5px solid #FF6D6B;
+  background: $background-color-1;
+  border-radius: 3px;
+  margin-bottom: 40px;
+
+  @include md-only {
+    border-radius: 0;
+  }
+}
+
+.infoBlockList {
+  font-weight: bold;
+  font-size: 16px;
+  margin-left: 15px;
+}
+
+.listItemContent {
+  font-weight: 400;
+  color: #A3A3CC;
+  line-height: 22px;
+  margin-bottom: 20px;
+
+  b {
+    color: #fff;
+    font-weight: bold;
+  }
+}
+
+.infoBlockHeader {
+  color: #FF6D6B;
+  font-weight: 700;
+  font-size: 20px;
+  margin-bottom: 20px;
+}
+
+.printButtonWrapper {
+  position: absolute;
+  right: 0;
+  width: 45px;
+  top: 0;
+  bottom: 0;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+}
+
+.printButton {
+  width: 24px;
+  opacity: 0.25;
+  cursor: pointer;
+
+  &:hover {
+    opacity: 1;
+  }
+}
+
diff --git a/src/pages/RecoverAccountPage/RecoverAccountPage.js b/src/pages/RecoverAccountPage/RecoverAccountPage.js
new file mode 100644
index 000000000..3b9cc4b86
--- /dev/null
+++ b/src/pages/RecoverAccountPage/RecoverAccountPage.js
@@ -0,0 +1,128 @@
+/**
+ * Copyright 2017–2018, LaborX PTY
+ * Licensed under the AGPL Version 3 license.
+ */
+
+import { MuiThemeProvider } from 'material-ui'
+import React, { PureComponent } from 'react'
+import { connect } from 'react-redux'
+import PropTypes from 'prop-types'
+import { Link } from 'react-router'
+import { reduxForm, Field } from 'redux-form/immutable'
+import { TextField } from 'redux-form-material-ui'
+import {
+  WalletEntryModel,
+} from 'models/persistAccount'
+import {
+  onSubmitRecoverAccountForm,
+  onSubmitRecoverAccountFormSuccess,
+  onSubmitRecoverAccountFormFail,
+  initRecoverAccountPage,
+} from '@chronobank/login/redux/network/actions'
+
+import { Button, UserRow } from 'components'
+
+import styles from 'layouts/Splash/styles'
+import './RecoverAccountPage.scss'
+
+export const FORM_RECOVER_ACCOUNT = 'RecoverAccountPage'
+
+function mapStateToProps (state, ownProps) {
+  const selectedWallet = state.get('persistAccount').selectedWallet
+  return {
+    selectedWallet: new WalletEntryModel({...selectedWallet}),
+  }
+}
+
+function mapDispatchToProps (dispatch, ownProps) {
+  return {
+    onSubmit: async (values) => {
+      let words = [], mnemonic = ''
+
+      for (let i = 1; i <= 12; i++) {
+        const word = values.get(`word-${i}`)
+        word && words.push(word)
+      }
+
+      mnemonic = words.join(' ')
+
+      await dispatch(onSubmitRecoverAccountForm(mnemonic))
+    },
+    onSubmitSuccess: () => dispatch(onSubmitRecoverAccountFormSuccess()),
+    onSubmitFail: (errors, dispatch, submitErrors) => dispatch(onSubmitRecoverAccountFormFail(errors, dispatch, submitErrors)),
+    initRecoverAccountPage: () => dispatch(initRecoverAccountPage()),
+  }
+}
+
+class RecoverAccountPage extends PureComponent {
+  static propTypes = {
+    selectedWallet: PropTypes.instanceOf(WalletEntryModel),
+    initRecoverAccountPage: PropTypes.func,
+  }
+
+  componentWillMount(){
+    this.props.initRecoverAccountPage()
+  }
+
+  get getSelectedWalletName(){
+    const { selectedWallet } = this.props
+    return selectedWallet && selectedWallet.name || ''
+  }
+
+  render () {
+    const { handleSubmit, selectedWallet } = this.props
+
+    const wordsArray = new Array(12).fill()
+
+    return (
+      <MuiThemeProvider>
+        <form styleName='form' name={FORM_RECOVER_ACCOUNT} onSubmit={handleSubmit}>
+          <div styleName='title'>
+            Enter mnemonic to reset password
+          </div>
+
+          <div styleName='user-row'>
+            <UserRow
+              title={this.getSelectedWalletName}
+              avatar={'/src/assets/img/profile-photo-1.jpg'}
+              hideActionIcon
+            />
+          </div>
+
+          <div styleName='fields-block'>
+            {
+              wordsArray.map((item, i) => (
+                <Field
+                  key={i}
+                  styleName='field'
+                  component={TextField}
+                  name={`word-${i + 1}`}
+                  floatingLabelText={`Word ${i + 1}`}
+                  fullWidth
+                  {...styles.textField}
+                />
+              ))
+            }
+          </div>
+
+          <div styleName='actions'>
+            <Button
+              styleName='button'
+              buttonType='login'
+              type='submit'
+            >
+              Reset password
+            </Button>
+            or<br />
+            <Link to='/login/' href styleName='link'>Back</Link>
+          </div>
+
+        </form>
+
+      </MuiThemeProvider>
+    )
+  }
+}
+
+const form = reduxForm({ form: FORM_RECOVER_ACCOUNT })(RecoverAccountPage)
+export default connect(mapStateToProps, mapDispatchToProps)(form)
diff --git a/src/pages/RecoverAccountPage/RecoverAccountPage.scss b/src/pages/RecoverAccountPage/RecoverAccountPage.scss
new file mode 100644
index 000000000..ceaa1309e
--- /dev/null
+++ b/src/pages/RecoverAccountPage/RecoverAccountPage.scss
@@ -0,0 +1,77 @@
+/**
+ * Copyright 2017–2018, LaborX PTY
+ * Licensed under the AGPL Version 3 license.
+ */
+
+@import "~styles/partials/variables";
+@import "~styles/partials/mixins";
+
+.form {
+  max-width: 380px;
+  margin:0 auto;
+
+  @include xs-only {
+    padding: 0 20px;
+  }
+}
+
+.title {
+  color: $color-white;
+  font-weight: 700;
+  font-size: 30px;
+  line-height: 42px;
+  margin-bottom: 40px;
+  text-align: center;
+}
+
+.actions {
+  text-align: center;
+  margin-bottom: 45px;
+  line-height: 30px;
+  color: #fff;
+}
+
+.link {
+  color: $border-color;
+  margin:  0 auto 45px;
+  text-decoration: none;
+  font: 700 16px $font-proxima;
+
+  &:hover {
+    color: #FFB54E;
+  }
+
+  @include md-only {
+    margin: 0 0 10px;
+  }
+}
+
+.button {
+  text-align: center;
+  margin-bottom: 22px;
+
+  button {
+    padding: 0 30px;
+  }
+}
+
+.actionIcon {
+  transform: matrix(-1,0,0,-1,0,0);
+}
+
+.user-row {
+  border-top: 1px solid $color-purpule;
+  margin-bottom: 10px;
+  color: #fff;
+}
+
+.fields-block {
+  margin-bottom: 50px;
+  display: flex;
+  justify-content: space-between;
+  flex-wrap: wrap;
+}
+
+.field {
+  width: 23% !important;
+}
diff --git a/src/pages/ResetPasswordPage/ResetPasswordPage.js b/src/pages/ResetPasswordPage/ResetPasswordPage.js
new file mode 100644
index 000000000..71a8962fb
--- /dev/null
+++ b/src/pages/ResetPasswordPage/ResetPasswordPage.js
@@ -0,0 +1,116 @@
+/**
+ * Copyright 2017–2018, LaborX PTY
+ * Licensed under the AGPL Version 3 license.
+ */
+
+import { MuiThemeProvider } from 'material-ui'
+import React, { PureComponent } from 'react'
+import { connect } from 'react-redux'
+import PropTypes from 'prop-types'
+import {
+  WalletEntryModel,
+} from 'models/persistAccount'
+import {
+  onSubmitResetAccountPasswordForm,
+  onSubmitResetAccountPasswordSuccess,
+  onSubmitResetAccountPasswordFail,
+  initResetPasswordPage,
+} from '@chronobank/login/redux/network/actions'
+import { reduxForm, Field } from 'redux-form/immutable'
+import { TextField } from 'redux-form-material-ui'
+import { UserRow, Button } from 'components'
+
+import styles from 'layouts/Splash/styles'
+import validate from './validate'
+import './ResetPasswordPage.scss'
+
+export const FORM_RESET_PASSWORD = 'ResetPasswordPage'
+
+function mapStateToProps (state, ownProps) {
+  const selectedWallet = state.get('persistAccount').selectedWallet
+  return {
+    selectedWallet: new WalletEntryModel({...selectedWallet}),
+  }
+}
+
+function mapDispatchToProps (dispatch, ownProps) {
+  return {
+    onSubmit: async (values) => {
+      const password = values.get('password')
+
+      await dispatch(onSubmitResetAccountPasswordForm(password))
+    },
+    onSubmitSuccess: () => dispatch(onSubmitResetAccountPasswordSuccess()),
+    onSubmitFail: (errors, dispatch, submitErrors) => dispatch(onSubmitResetAccountPasswordFail(errors, dispatch, submitErrors)),
+    initResetPasswordPage: () => dispatch(initResetPasswordPage()),
+  }
+}
+
+class ResetPasswordPage extends PureComponent {
+  static propTypes = {
+    selectedWallet: PropTypes.instanceOf(WalletEntryModel),
+    initResetPasswordPage: PropTypes.func,
+  }
+
+  componentWillMount(){
+    this.props.initResetPasswordPage()
+  }
+
+  get getSelectedWalletName(){
+    const { selectedWallet } = this.props
+    return selectedWallet && selectedWallet.name || ''
+  }
+  render () {
+    const { handleSubmit, selectedWallet } = this.props
+
+    return (
+      <MuiThemeProvider muiTheme={styles.inverted}>
+        <form styleName='form' name={FORM_RESET_PASSWORD} onSubmit={handleSubmit}>
+
+          <div styleName='page-title'>Reset password</div>
+
+          <div styleName='user-row'>
+            <UserRow
+              title={this.getSelectedWalletName}
+              avatar={'/src/assets/img/profile-photo-1.jpg'}
+              onClick={() => {}}
+            />
+          </div>
+
+          <div styleName='field'>
+            <Field
+              component={TextField}
+              name='password'
+              type='password'
+              floatingLabelText='Enter New Password'
+              fullWidth
+              {...styles.textField}
+            />
+            <Field
+              component={TextField}
+              name='confirmPassword'
+              type='password'
+              floatingLabelText='Confirm New Password'
+              fullWidth
+              {...styles.textField}
+            />
+          </div>
+
+          <div styleName='actions'>
+            <Button
+              styleName='button'
+              buttonType='login'
+              type='submit'
+            >
+              Reset
+            </Button>
+          </div>
+
+        </form>
+      </MuiThemeProvider>
+    )
+  }
+}
+
+const form = reduxForm({ form: FORM_RESET_PASSWORD, validate })(ResetPasswordPage)
+export default connect(mapStateToProps, mapDispatchToProps)(form)
diff --git a/src/pages/ResetPasswordPage/ResetPasswordPage.scss b/src/pages/ResetPasswordPage/ResetPasswordPage.scss
new file mode 100644
index 000000000..d1ce6b9bf
--- /dev/null
+++ b/src/pages/ResetPasswordPage/ResetPasswordPage.scss
@@ -0,0 +1,92 @@
+/**
+ * Copyright 2017–2018, LaborX PTY
+ * Licensed under the AGPL Version 3 license.
+ */
+
+@import "~styles/partials/variables";
+@import "~styles/partials/mixins";
+
+ul.actions {
+  position: absolute;
+  top: 30px;
+  right: 80px;
+  display: flex;
+  justify-content: flex-end;
+  flex: 0 0 auto;
+  padding: 0;
+  list-style: none;
+  font-size: 18px;
+  line-height: 48px;
+
+  @include md-only {
+    top: 10px;
+    right: 10px;
+    flex: 1 1 auto;
+  }
+
+  li {
+
+    flex: 0 0 auto;
+
+    a {
+      padding: 10px 20px;
+      text-decoration: none;
+      color: $color-white;
+
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+  }
+}
+
+.form {
+  max-width: 380px;
+  margin:0 auto;
+
+  @include xs-only {
+    padding: 0 20px;
+  }
+}
+
+.page-title {
+  color: $color-white;
+  font-weight: 700;
+  font-size: 30px;
+  line-height: 42px;
+  margin-bottom: 40px;
+  text-align: center;
+}
+
+.user-row {
+  border-top: 1px solid $color-purpule;
+}
+
+.field {
+  margin-bottom: 50px;
+}
+
+.button {
+  text-align: center;
+  margin-bottom: 30px;
+}
+
+.actions {
+  text-align: center;
+  margin-bottom: 45px;
+}
+
+.link {
+  color: $border-color;
+  margin:  0 auto 45px;
+  text-decoration: none;
+  font: 700 16px $font-proxima;
+
+  &:hover {
+    color: #FFB54E;
+  }
+
+  @include md-only {
+    margin: 0 0 10px;
+  }
+}
diff --git a/src/pages/ResetPasswordPage/validate.js b/src/pages/ResetPasswordPage/validate.js
new file mode 100644
index 000000000..a23dc2614
--- /dev/null
+++ b/src/pages/ResetPasswordPage/validate.js
@@ -0,0 +1,27 @@
+/**
+ * Copyright 2017–2018, LaborX PTY
+ * Licensed under the AGPL Version 3 license.
+ */
+
+import ErrorList from 'platform/ErrorList'
+import * as validator from 'models/validator'
+
+const validateEqualPasswords = (password, confirmPassword) => password === confirmPassword ? null : 'Wrong password'
+
+export default (values) => {
+
+  const password = values.get('password')
+
+  let passwordErrors = new ErrorList()
+  passwordErrors.add(validator.required(password))
+
+  const confirmPassword = values.get('confirmPassword')
+  let confirmPasswordErrors = new ErrorList()
+  confirmPasswordErrors.add(validator.required(confirmPassword))
+  confirmPasswordErrors.add(validateEqualPasswords(password, confirmPassword))
+
+  return {
+    password: passwordErrors.getErrors(),
+    confirmPassword: confirmPasswordErrors.getErrors(),
+  }
+}
diff --git a/src/pages/SelectWalletPage/SelectWalletPage.js b/src/pages/SelectWalletPage/SelectWalletPage.js
new file mode 100644
index 000000000..7a6f258bc
--- /dev/null
+++ b/src/pages/SelectWalletPage/SelectWalletPage.js
@@ -0,0 +1,111 @@
+/**
+ * Copyright 2017–2018, LaborX PTY
+ * Licensed under the AGPL Version 3 license.
+ */
+
+import PropTypes from 'prop-types'
+import { MuiThemeProvider } from 'material-ui'
+import { connect } from 'react-redux'
+import React, { PureComponent } from 'react'
+import { Link } from 'react-router'
+import { UserRow, Button } from 'components'
+import { navigateToSelectImportMethod, onWalletSelect } from '@chronobank/login/redux/network/actions'
+import {
+  WalletEntryModel,
+} from 'models/persistAccount'
+
+import arrow from 'assets/img/icons/prev-white.svg'
+import './SelectWalletPage.scss'
+
+function mapDispatchToProps (dispatch) {
+  return {
+    navigateToSelectImportMethod: () => dispatch(navigateToSelectImportMethod()),
+    onWalletSelect: (wallet) => dispatch(onWalletSelect(wallet)),
+  }
+}
+
+function mapStateToProps (state) {
+  return {
+    walletsList: state.get('persistAccount').walletsList.map(
+      (wallet) => new WalletEntryModel({...wallet})
+    ),
+  }
+}
+
+@connect(mapStateToProps, mapDispatchToProps)
+export default class SelectWalletPage extends PureComponent {
+  static propTypes = {
+    onWalletSelect: PropTypes.func,
+    walletsList: PropTypes.arrayOf(
+      PropTypes.instanceOf(WalletEntryModel)
+    ),
+    navigateToSelectImportMethod: PropTypes.func,
+  }
+
+  static defaultProps = {
+    onWalletSelect: () => {},
+    walletsList: [],
+  }
+
+  renderWalletsList (){
+    const { onWalletSelect, walletsList } = this.props
+
+    if (!walletsList || !walletsList.length){
+      return (
+        <div styleName='empty-list'>
+          Sorry, there are no accounts to display
+        </div>
+      )
+    }
+
+    return (
+      <div styleName='wallets-list'>
+        {
+          walletsList ? walletsList.map((w, i) => (
+            <UserRow
+              key={i}
+              title={w.name}
+              actionIcon={arrow}
+              reverseIcon={true}
+              onClick={() => onWalletSelect(w)}
+            />
+          )) : null
+        }
+      </div>
+    )
+  }
+
+  render () {
+    return (
+      <MuiThemeProvider>
+        <div styleName='wrapper'>
+
+          <div styleName='page-title'>My Accounts</div>
+
+          <div styleName='description'>
+            Browse account stored on your device.
+            <br />
+            If you have created an account before you may use Add an Existing Account option below.
+          </div>
+
+          <div styleName='content'>
+            { this.renderWalletsList() }
+
+            <div styleName='actions'>
+              <Button
+                styleName='button'
+                buttonType='login'
+                onClick={this.props.navigateToSelectImportMethod}
+              >
+                Add an existing account
+              </Button>
+              or <br />
+              <Link to='/login/create-account' href styleName='link'>Create New Account</Link>
+            </div>
+          </div>
+
+        </div>
+      </MuiThemeProvider>
+    )
+  }
+}
diff --git a/src/pages/SelectWalletPage/SelectWalletPage.scss b/src/pages/SelectWalletPage/SelectWalletPage.scss
new file mode 100644
index 000000000..168f3cf01
--- /dev/null
+++ b/src/pages/SelectWalletPage/SelectWalletPage.scss
@@ -0,0 +1,93 @@
+/**
+ * Copyright 2017–2018, LaborX PTY
+ * Licensed under the AGPL Version 3 license.
+ */
+
+@import "~styles/partials/variables";
+@import "~styles/partials/mixins";
+
+.wrapper {
+  margin:0 auto;
+
+  @include xs-only {
+    padding: 0 20px;
+  }
+}
+
+.content {
+  margin: 0 auto;
+  max-width: 380px;
+}
+
+.page-title {
+  color: $color-white;
+  font-weight: 700;
+  font-size: 30px;
+  line-height: 42px;
+  margin-bottom: 40px;
+  text-align: center;
+}
+
+.wallets-list {
+  border-top: 1px solid $color-purpule;
+  margin-bottom: 45px;
+  color: #fff;
+}
+
+.empty-list {
+  border-top: 1px solid $color-purpule;
+  border-bottom: 1px solid $color-purpule;
+  padding: 18px 0;
+  margin-bottom: 30px;
+  text-align: center;
+  color: #fff;
+  width: 380px;
+
+  @include xs-only {
+    width: 100%;
+  }
+}
+
+.actions {
+  text-align: center;
+  margin-bottom: 45px;
+  line-height: 30px;
+  color: #fff;
+}
+
+.link {
+  color: $border-color;
+  margin:  0 auto 45px;
+  text-decoration: none;
+  font: 700 16px $font-proxima;
+
+  &:hover {
+    color: #FFB54E;
+  }
+
+  @include md-only {
+    margin: 0 0 10px;
+  }
+}
+
+.button {
+  text-align: center;
+  margin-bottom: 22px;
+
+  button {
+    padding: 0 30px;
+  }
+}
+
+.actionIcon {
+  transform: matrix(-1,0,0,-1,0,0);
+}
+
+.description {
+  font-weight: 400;
+  color: $additionalData-color-1;
+  font-size: 16px;
+  line-height: 22px;
+  margin-bottom: 40px;
+  text-align: center;
+}
diff --git a/src/pages/index.js b/src/pages/index.js
new file mode 100644
index 000000000..76af6bc56
--- /dev/null
+++ b/src/pages/index.js
@@ -0,0 +1,18 @@
+export { default as PageBase } from './PageBase'
+export { default as LoginPage, FORM_LOGIN_PAGE } from './LoginPage/LoginPage'
+export { default as NotFoundPage } from './NotFound/NotFound'
+export { default as CreateAccountPage, FORM_CREATE_ACCOUNT } from './CreateAccountPage/CreateAccountPage'
+export { default as SelectWalletPage } from './SelectWalletPage/SelectWalletPage'
+export { default as RecoverAccountPage, FORM_RECOVER_ACCOUNT } from './RecoverAccountPage/RecoverAccountPage'
+export { default as ResetPasswordPage, FORM_RESET_PASSWORD } from './ResetPasswordPage/ResetPasswordPage'
+export { default as ImportMethodsPage } from './ImportMethodsPage/ImportMethodsPage'
+export { default as ConfirmMnemonicPage, FORM_CONFIRM_MNEMONIC } from './ConfirmMnemonicPage/ConfirmMnemonicPage'
+export { default as MnemonicPage } from './MnemonicPage/MnemonicPage'
+export { default as DownloadWalletFilePage } from './DownloadWalletFilePage/DownloadWalletFilePage'
+export { default as UploadWalletPage } from './LoginMethods/WalletFile/UploadWalletPage'
+export {
+  MnemonicLoginPage,
+  PrivateKeyLoginPage,
+  FORM_MNEMONIC_LOGIN_PAGE,
+  FORM_PRIVATE_KEY_LOGIN_PAGE,
+} from './LoginMethods'
diff --git a/src/redux/configureStore.js b/src/redux/configureStore.js
index aa62a9aa2..34f1e6c9d 100644
--- a/src/redux/configureStore.js
+++ b/src/redux/configureStore.js
@@ -84,11 +84,13 @@ const configureStore = () => {
       const i18nState = state.get('i18n')
       const mainWalletsState = state.get('mainWallet')
       const walletsState = state.get('multisigWallet')
+      const persistAccount = state.get('persistAccount')
       state = new Immutable.Map()
       state = state
         .set('i18n', i18nState)
         .set('multisigWallet', walletsState)
         .set('mainWallet', mainWalletsState)
+        .set('persistAccount', persistAccount)
     }
     return appReducer(state, action)
   }
@@ -117,7 +119,8 @@ export const store = configureStore()
 store.dispatch(globalWatcher())
 
 const persistorConfig = {
-  whitelist: ['multisigWallet', 'mainWallet'],
+  key: 'root',
+  whitelist: ['multisigWallet', 'mainWallet', 'persistAccount'],
   transforms: [transformer()],
 }
 store.__persistor = persistStore(store, persistorConfig)
diff --git a/src/redux/ducks.js b/src/redux/ducks.js
index 54ee07874..a47f3398c 100644
--- a/src/redux/ducks.js
+++ b/src/redux/ducks.js
@@ -24,6 +24,7 @@ import * as wallet from './wallet'
 import * as watcher from './watcher'
 import * as tokens from './tokens'
 import * as assetsHolder from './assetsHolder'
+import * as persistAccount from './persistAccount'
 
 export default {
   ui,
@@ -46,5 +47,6 @@ export default {
   assetsManager,
   tokens,
   assetsHolder,
+  persistAccount,
   ...Login,
 }
diff --git a/src/redux/mainWallet/reducer.js b/src/redux/mainWallet/reducer.js
index c8af0bd48..16e91913a 100644
--- a/src/redux/mainWallet/reducer.js
+++ b/src/redux/mainWallet/reducer.js
@@ -51,6 +51,7 @@ export default (state = initialState, action) => {
       ))
     case a.WALLET_SET_NAME:
       return state.names(state.names().set(`${action.blockchain}-${action.address}`, action.name))
+
     default:
       return state
   }
diff --git a/src/redux/persistAccount/actions.js b/src/redux/persistAccount/actions.js
new file mode 100644
index 000000000..5fc78dd8e
--- /dev/null
+++ b/src/redux/persistAccount/actions.js
@@ -0,0 +1,169 @@
+/**
+ * Copyright 2017–2018, LaborX PTY
+ * Licensed under the AGPL Version 3 license.
+ */
+
+import uniqid from 'uniqid'
+import bip39 from 'bip39'
+import Web3 from 'web3'
+import Accounts from 'web3-eth-accounts'
+
+import web3Provider from '@chronobank/login/network/Web3Provider'
+import {
+  WalletModel,
+  WalletEntryModel,
+} from 'models/persistAccount'
+import networkService from '@chronobank/login/network/NetworkService'
+import mnemonicProvider from '@chronobank/login/network/mnemonicProvider'
+import privateKeyProvider from '@chronobank/login/network/privateKeyProvider'
+import { clearErrors, loading } from '@chronobank/login/redux/network/actions'
+import { getSelectedNetwork } from './selectors'
+
+export const WALLETS_ADD = 'persistAccount/WALLETS_ADD'
+export const WALLETS_SELECT = 'persistAccount/WALLETS_SELECT'
+export const WALLETS_LOAD = 'persistAccount/WALLETS_LOAD'
+export const WALLETS_UPDATE_LIST = 'persistAccount/WALLETS_UPDATE_LIST'
+export const WALLETS_REMOVE = 'persistAccount/WALLETS_REMOVE'
+
+export const accountAdd = (wallet) => (dispatch) => {
+  dispatch({ type: WALLETS_ADD, wallet })
+}
+
+export const accountSelect = (wallet) => (dispatch) => {
+  dispatch({ type: WALLETS_SELECT, wallet })
+}
+
+export const accountLoad = (wallet) => (dispatch) => {
+  dispatch({ type: WALLETS_LOAD, wallet })
+}
+
+export const accountUpdateList = (walletList) => (dispatch) => {
+  dispatch({ type: WALLETS_UPDATE_LIST, walletList })
+}
+
+export const accountUpdate = (wallet) => (dispatch, getState) => {
+  const state = getState()
+
+  const { walletsList } = state.get('persistAccount')
+
+  let index = walletsList.findIndex((item) => item.key === wallet.key)
+
+  let copyWalletList = [...walletsList]
+
+  copyWalletList.splice(index, 1, wallet)
+
+  dispatch({ type: WALLETS_UPDATE_LIST, walletsList: copyWalletList })
+
+}
+
+export const decryptAccount = (entry, password) => async (dispatch, getState) => {
+  const state = getState()
+
+  const web3 = new Web3()
+  const accounts = new Accounts(new web3.providers.HttpProvider(networkService.getProviderSettings().url))
+  await accounts.wallet.clear()
+
+  let wallet = await accounts.wallet.decrypt(entry.encrypted, password)
+
+  const model = new WalletModel({
+    entry,
+    wallet,
+  })
+
+  dispatch(accountLoad(model))
+
+  return wallet
+
+}
+
+export const validateAccountName = (name) => (dispatch, getState) => {
+  const state = getState()
+
+  const { walletsList } = state.get('persistAccount')
+
+  return !walletsList.find((item) => item.name === name)
+}
+
+export const validateMnemonicForAccount = (wallet, mnemonic) => async () => {
+  let host = networkService.getProviderSettings().url
+
+  const web3 = new Web3()
+  const accounts = new Accounts(new web3.providers.HttpProvider(host))
+  accounts.wallet.clear()
+
+  const walletAddress = wallet && wallet.encrypted && wallet.encrypted[0] && wallet.encrypted[0].address || ''
+
+  const addressFromWallet = `0x${walletAddress}`
+
+  const account = accounts.privateKeyToAccount(`0x${bip39.mnemonicToSeedHex(mnemonic)}`)
+  const address = account && account.address && account.address.toLowerCase()
+
+  return addressFromWallet === address
+}
+
+export const resetPasswordAccount = (wallet, mnemonic, password) => async (dispatch) => {
+  let host = networkService.getProviderSettings().url
+
+  const web3 = new Web3()
+  const accounts = new Accounts(new web3.providers.HttpProvider(host))
+  accounts.wallet.clear()
+
+  const newCopy = await dispatch(createAccount({ name: wallet.name, mnemonic, password }))
+
+  let newWallet = {
+    ...wallet,
+    encrypted: newCopy.encrypted,
+  }
+
+  dispatch(accountUpdate(newWallet))
+
+  dispatch(accountSelect(newWallet))
+
+}
+
+export const createAccount = ({ name, password, privateKey, mnemonic, numberOfAccounts = 0, types = {} }) => async (dispatch, getState) => {
+  const state = getState()
+
+  let wallet, hex = privateKey || bip39.mnemonicToSeedHex(mnemonic) || ''
+
+  let host = networkService.getProviderSettings().url
+
+  const web3 = new Web3()
+  const accounts = new Accounts(new web3.providers.HttpProvider(host))
+  accounts.wallet.clear()
+
+  wallet = await accounts.wallet.create(numberOfAccounts)
+  const account = accounts.privateKeyToAccount(`0x${hex}`)
+  wallet.add(account)
+
+  return new WalletEntryModel({
+    key: uniqid(),
+    name,
+    types,
+    encrypted: wallet && wallet.encrypt(password),
+  })
+
+}
+
+export const downloadWallet = () => (dispatch, getState) => {
+  const state = getState()
+
+  const { selectedWallet } = state.get('persistAccount')
+
+  if (selectedWallet) {
+    const text = JSON.stringify(selectedWallet.encrypted.length > 1 ? selectedWallet.encrypted : selectedWallet.encrypted[0])
+    const element = document.createElement('a')
+    element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text))
+    element.setAttribute('download', `Wallet.wlt`)
+    element.style.display = 'none'
+    document.body.appendChild(element)
+    element.click()
+    document.body.removeChild(element)
+  }
+}
+
+export const logout = () => (dispatch) => {
+  dispatch(accountSelect(null))
+  dispatch(accountLoad(null))
+  // Router.pushRoute('/')
+}
diff --git a/src/redux/persistAccount/index.js b/src/redux/persistAccount/index.js
new file mode 100644
index 000000000..30fd4fe33
--- /dev/null
+++ b/src/redux/persistAccount/index.js
@@ -0,0 +1,8 @@
+/**
+ * Copyright 2017–2018, LaborX PTY
+ * Licensed under the AGPL Version 3 license.
+ */
+
+import persistAccount from './reducer'
+
+export { persistAccount }
diff --git a/src/redux/persistAccount/reducer.js b/src/redux/persistAccount/reducer.js
new file mode 100644
index 000000000..813559a68
--- /dev/null
+++ b/src/redux/persistAccount/reducer.js
@@ -0,0 +1,70 @@
+/**
+ * Copyright 2017–2018, LaborX PTY
+ * Licensed under the AGPL Version 3 license.
+ */
+
+import { persistReducer, REHYDRATE } from 'redux-persist'
+import storage from 'redux-persist/lib/storage'
+import * as a from './actions'
+import { removeWallet } from './utils'
+
+const persistConfig = {
+  key: 'wallet',
+  storage: storage,
+  blacklist: ['decryptedWallet'],
+}
+
+const initialState = {
+  walletsList: [],
+  selectedWallet: null,
+  decryptedWallet: null,
+  rehydrated: false,
+}
+
+const persistAccount = (state = initialState, action) => {
+  switch (action.type) {
+    case REHYDRATE:
+      return {
+        ...state,
+        ...action.payload.persistAccount,
+        rehydrated: true,
+      }
+    case a.WALLETS_ADD :
+      return {
+        ...state,
+        walletsList: [
+          ...state.walletsList,
+          action.wallet,
+        ],
+      }
+
+    case a.WALLETS_SELECT :
+      return {
+        ...state,
+        selectedWallet: action.wallet,
+      }
+
+    case a.WALLETS_LOAD :
+      return {
+        ...state,
+        decryptedWallet: action.wallet,
+      }
+
+    case a.WALLETS_UPDATE_LIST :
+      return {
+        ...state,
+        walletsList: action.walletsList,
+      }
+
+    case a.WALLETS_REMOVE :
+      return {
+        ...state,
+        walletsList: removeWallet(state.walletsList, action.name),
+      }
+
+    default:
+      return state
+  }
+}
+
+export default persistReducer(persistConfig, persistAccount)
diff --git a/src/redux/persistAccount/selectors.js b/src/redux/persistAccount/selectors.js
new file mode 100644
index 000000000..0accdd635
--- /dev/null
+++ b/src/redux/persistAccount/selectors.js
@@ -0,0 +1,19 @@
+/**
+ * Copyright 2017–2018, LaborX PTY
+ * Licensed under the AGPL Version 3 license.
+ */
+
+import { createSelector } from 'reselect'
+
+export const getSelectedNetwork = () => createSelector(
+  (state) => state.get('network'),
+  (network) => {
+    if (!network.selectedNetworkId){
+      return null
+    }
+
+    return network.networks && network.networks.find(
+      (item) => item.id === network.selectedNetworkId
+    )
+  },
+)
diff --git a/src/redux/persistAccount/utils.js b/src/redux/persistAccount/utils.js
new file mode 100644
index 000000000..c083c2708
--- /dev/null
+++ b/src/redux/persistAccount/utils.js
@@ -0,0 +1,13 @@
+export const replaceWallet = (wallet, walletList) => {
+  let index = walletList.findIndex((item) => item.key === wallet.key)
+
+  let copyWalletList = [...walletList]
+
+  copyWalletList.splice(index, 1, wallet)
+
+  return copyWalletList
+}
+
+export const removeWallet = (walletsList, name) => {
+  return walletsList.filter((w) => w.name !== name)
+}
diff --git a/src/redux/wallet/reducer.js b/src/redux/wallet/reducer.js
index 3e71c4bd7..218b1abad 100644
--- a/src/redux/wallet/reducer.js
+++ b/src/redux/wallet/reducer.js
@@ -9,6 +9,9 @@ const initialState = {
   isMultisig: false,
   blockchain: null,
   address: null,
+  walletsList: [],
+  selectedWallet: null,
+  decryptedWallet: null,
 }
 
 export default (state = initialState, action) => {
@@ -24,6 +27,7 @@ export default (state = initialState, action) => {
         blockchain: action.blockchain,
         address: action.address,
       }
+
     default:
       return state
   }
diff --git a/src/router.js b/src/router.js
index 9cf769d91..2efccb1f0 100644
--- a/src/router.js
+++ b/src/router.js
@@ -6,9 +6,22 @@
 import Markup from 'layouts/Markup'
 import { Provider } from 'react-redux'
 import React from 'react'
-import { Route, Router } from 'react-router'
-import NotFoundPage from 'pages/NotFound/NotFound'
-import LoginPage from 'pages/LoginPage/LoginPage'
+import { Route, Router, IndexRoute, Redirect } from 'react-router'
+import {
+  NotFoundPage,
+  LoginForm,
+  CreateAccount,
+  AccountSelector,
+  RecoverAccount,
+  ResetPassword,
+  LoginWithOptions,
+  ConfirmMnemonic,
+  GenerateMnemonic,
+  GenerateWallet,
+  UploadWalletPage,
+  LoginWithMnemonic,
+  LoginWithPrivateKey,
+} from '@chronobank/login-ui/components'
 import Splash from 'layouts/Splash/Splash'
 import {
   AssetsPage,
@@ -54,6 +67,7 @@ function hashLinkScroll () {
 const router = (
   <Provider store={store}>
     <Router history={history} onUpdate={hashLinkScroll}>
+      <Redirect from='/' to='/login'/>
       <Route component={Markup} onEnter={requireAuth}>
         <Route path='2fa' component={TwoFAPage} />
         <Route path='wallets' component={WalletsPage} />
@@ -72,8 +86,19 @@ const router = (
         </Route>
       </Route>
 
-      <Route component={Splash}>
-        <Route path='/' component={LoginPage} />
+      <Route path='/login' component={Splash}>
+        <IndexRoute component={LoginForm} />
+        <Route path='/login/create-account' component={CreateAccount} />
+        <Route path='/login/select-account' component={AccountSelector} />
+        <Route path='/login/recover-account' component={RecoverAccount} />
+        <Route path='/login/reset-password' component={ResetPassword} />
+        <Route path='/login/import-methods' component={LoginWithOptions} />
+        <Route path='/login/confirm-mnemonic' component={ConfirmMnemonic} />
+        <Route path='/login/mnemonic' component={GenerateMnemonic} />
+        <Route path='/login/download-wallet' component={GenerateWallet} />
+        <Route path='/login/upload-wallet' component={UploadWalletPage} />
+        <Route path='/login/mnemonic-login' component={LoginWithMnemonic} />
+        <Route path='/login/private-key-login' component={LoginWithPrivateKey} />
         <Route path='*' component={NotFoundPage} />
       </Route>
     </Router>
diff --git a/src/styles/partials/_variables.scss b/src/styles/partials/_variables.scss
index 3c3d8e516..73d53d7de 100644
--- a/src/styles/partials/_variables.scss
+++ b/src/styles/partials/_variables.scss
@@ -13,8 +13,11 @@ $color-primary-light: #e9efff;
 $color-primary-light-1: #f5f5ff;
 $color-secondary: #2962ff;
 
+$color-description: #9997B2;
+
 $color-white: #FFFFFF;
 $color-blue: #2962FF;
+$color-light-blue: #5DB3ED;
 $color-blue-2: #758EFF;
 $color-blue-2-hover: #6980E5;
 $color-blue405: #4058b8;
@@ -27,6 +30,7 @@ $color-red: #FF1744;
 $error-color: #F44336;
 $color-red-1: #FF1645;
 $color-red-1-hover: #E51441;
+$color-orange: #E2A864;
 $color-black: #222;
 
 $color-error: $color-red;
@@ -81,8 +85,8 @@ $highlight-green: $color-green;
 $highlight-red: #{material-color('red', 'a400')};
 
 // fonts
-$font-family-main: 'Roboto',
-sans-serif;
+$font-family-main: 'Roboto', sans-serif;
+$font-proxima: 'proxima nova', sans-serif;
 $font-size-base: 16px;
 $font-weight-bold: 600;
 
diff --git a/yarn.lock b/yarn.lock
index e87a95036..24454a3f7 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2831,7 +2831,7 @@ cryptiles@3.x.x:
   dependencies:
     boom "5.x.x"
 
-crypto-browserify@^3.11.0:
+crypto-browserify@3.12.0, crypto-browserify@^3.11.0:
   version "3.12.0"
   resolved "https://registry.yarnpkg.com/crypto-browserify/-/crypto-browserify-3.12.0.tgz#396cf9f3137f03e4b8e532c58f698254e00f80ec"
   dependencies:
@@ -4146,6 +4146,14 @@ eth-lib@0.1.27:
     ws "^3.0.0"
     xhr-request-promise "^0.1.2"
 
+eth-lib@0.2.7:
+  version "0.2.7"
+  resolved "https://registry.yarnpkg.com/eth-lib/-/eth-lib-0.2.7.tgz#2f93f17b1e23aec3759cd4a3fe20c1286a3fc1ca"
+  dependencies:
+    bn.js "^4.11.6"
+    elliptic "^6.4.0"
+    xhr-request-promise "^0.1.2"
+
 eth-lib@0.2.8:
   version "0.2.8"
   resolved "https://registry.yarnpkg.com/eth-lib/-/eth-lib-0.2.8.tgz#b194058bef4b220ad12ea497431d6cb6aa0623c8"
@@ -10943,7 +10951,7 @@ script-ext-html-webpack-plugin@^1.8.8:
   dependencies:
     debug "^3.1.0"
 
-scrypt.js@^0.2.0:
+scrypt.js@0.2.0, scrypt.js@^0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/scrypt.js/-/scrypt.js-0.2.0.tgz#af8d1465b71e9990110bedfc593b9479e03a8ada"
   dependencies:
@@ -12467,6 +12475,10 @@ utils-merge@1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/utils-merge/-/utils-merge-1.0.1.tgz#9f95710f50a267947b2ccc124741c1028427e713"
 
+uuid@2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/uuid/-/uuid-2.0.1.tgz#c2a30dedb3e535d72ccf82e343941a50ba8533ac"
+
 uuid@3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.0.0.tgz#6728fc0459c450d796a99c31837569bdf672d728"
@@ -12674,6 +12686,21 @@ web3-eth-abi@1.0.0-beta.34:
     web3-core-helpers "1.0.0-beta.34"
     web3-utils "1.0.0-beta.34"
 
+web3-eth-accounts@^1.0.0-beta.34:
+  version "1.0.0-beta.34"
+  resolved "https://registry.yarnpkg.com/web3-eth-accounts/-/web3-eth-accounts-1.0.0-beta.34.tgz#e09142eeecc797ac3459b75e9b23946d3695f333"
+  dependencies:
+    any-promise "1.3.0"
+    crypto-browserify "3.12.0"
+    eth-lib "0.2.7"
+    scrypt.js "0.2.0"
+    underscore "1.8.3"
+    uuid "2.0.1"
+    web3-core "1.0.0-beta.34"
+    web3-core-helpers "1.0.0-beta.34"
+    web3-core-method "1.0.0-beta.34"
+    web3-utils "1.0.0-beta.34"
+
 web3-eth-contract@1.0.0-beta.34:
   version "1.0.0-beta.34"
   resolved "https://registry.yarnpkg.com/web3-eth-contract/-/web3-eth-contract-1.0.0-beta.34.tgz#9dbb38fae7643a808427a20180470ec7415c91e6"