First time flow updates (#6192)

* Action select step of onboarding flow added.

* Update navigation on create and import password screens.

* Adds terms of service checkbox to create and import account screens.

* Add security warning to jazzicon intro step

* Update and streamline unique image to confirm seed steps of first time flow.

* UI touch ups to welcome screen.

* UI touch up on select action page

* Fix first time import flow.

* Add end of flow screen to first time flow

* Replace unique image screen with updated fishing warning screen.

* Update e2e tests for onboarding flow changes.

* Add required translations to onboarding flow.

* Update design of select action screen to emphasize create new wallet option.

* Clean up onboarding flow code.

* Remove notice related code from first-time-flow directory.

* Use updater function argument in new-account.component

34 files changed, 554 insertions, 339 deletions

diff --git a/ui/app/components/pages/first-time-flow/create-password/create-password.component.js b/ui/app/components/pages/first-time-flow/create-password/create-password.component.js
index 69b1e549f..7cca82ca6 100644
--- a/ui/app/components/pages/first-time-flow/create-password/create-password.component.js
+++ b/ui/app/components/pages/first-time-flow/create-password/create-password.component.js
@@ -8,13 +8,13 @@ import {
   INITIALIZE_CREATE_PASSWORD_ROUTE,
   INITIALIZE_IMPORT_WITH_SEED_PHRASE_ROUTE,
   INITIALIZE_UNIQUE_IMAGE_ROUTE,
-  INITIALIZE_NOTICE_ROUTE,
 } from '../../../../routes'
 
 export default class CreatePassword extends PureComponent {
   static propTypes = {
     history: PropTypes.object,
     isInitialized: PropTypes.bool,
+    isImportedKeyring: PropTypes.bool,
     onCreateNewAccount: PropTypes.func,
     onCreateNewAccountFromSeed: PropTypes.func,
   }
@@ -23,17 +23,38 @@ export default class CreatePassword extends PureComponent {
     const { isInitialized, history } = this.props
 
     if (isInitialized) {
-      history.push(INITIALIZE_NOTICE_ROUTE)
+      history.push(INITIALIZE_UNIQUE_IMAGE_ROUTE)
     }
   }
 
   render () {
-    const { onCreateNewAccount, onCreateNewAccountFromSeed } = this.props
+    const { onCreateNewAccount, onCreateNewAccountFromSeed, isImportedKeyring } = this.props
 
     return (
       <div className="first-time-flow__wrapper">
+        <div className="app-header__logo-container">
+          <img
+            className="app-header__metafox-logo app-header__metafox-logo--horizontal"
+            src="/images/logo/metamask-logo-horizontal.svg"
+            height={30}
+          />
+          <img
+            className="app-header__metafox-logo app-header__metafox-logo--icon"
+            src="/images/logo/metamask-fox.svg"
+            height={42}
+            width={42}
+          />
+        </div>
         <Switch>
-          <Route exact path={INITIALIZE_UNIQUE_IMAGE_ROUTE} component={UniqueImage} />
+          <Route exact
+            path={INITIALIZE_UNIQUE_IMAGE_ROUTE}
+            render={props => (
+              <UniqueImage
+                { ...props }
+                isImportedKeyring={isImportedKeyring}
+              />
+            )}
+          />
           <Route
             exact
             path={INITIALIZE_IMPORT_WITH_SEED_PHRASE_ROUTE}
diff --git a/ui/app/components/pages/first-time-flow/create-password/import-with-seed-phrase/import-with-seed-phrase.component.js b/ui/app/components/pages/first-time-flow/create-password/import-with-seed-phrase/import-with-seed-phrase.component.js
index 6f8ab031a..2e99147bb 100644
--- a/ui/app/components/pages/first-time-flow/create-password/import-with-seed-phrase/import-with-seed-phrase.component.js
+++ b/ui/app/components/pages/first-time-flow/create-password/import-with-seed-phrase/import-with-seed-phrase.component.js
@@ -3,10 +3,9 @@ import React, { PureComponent } from 'react'
 import PropTypes from 'prop-types'
 import TextField from '../../../../text-field'
 import Button from '../../../../button'
-import Breadcrumbs from '../../../../breadcrumbs'
 import {
-  INITIALIZE_CREATE_PASSWORD_ROUTE,
-  INITIALIZE_NOTICE_ROUTE,
+  INITIALIZE_SELECT_ACTION_ROUTE,
+  INITIALIZE_UNIQUE_IMAGE_ROUTE,
 } from '../../../../../routes'
 
 export default class ImportWithSeedPhrase extends PureComponent {
@@ -26,6 +25,7 @@ export default class ImportWithSeedPhrase extends PureComponent {
     seedPhraseError: '',
     passwordError: '',
     confirmPasswordError: '',
+    termsChecked: false,
   }
 
   parseSeedPhrase = (seedPhrase) => {
@@ -104,7 +104,7 @@ export default class ImportWithSeedPhrase extends PureComponent {
 
     try {
       await onSubmit(password, seedPhrase)
-      history.push(INITIALIZE_NOTICE_ROUTE)
+      history.push(INITIALIZE_UNIQUE_IMAGE_ROUTE)
     } catch (error) {
       this.setState({ seedPhraseError: error.message })
     }
@@ -131,20 +131,26 @@ export default class ImportWithSeedPhrase extends PureComponent {
     return !passwordError && !confirmPasswordError && !seedPhraseError
   }
 
+  toggleTermsCheck = () => {
+    this.setState((prevState) => ({
+        termsChecked: !prevState.termsChecked,
+    }))
+  }
+
   render () {
     const { t } = this.context
-    const { seedPhraseError, passwordError, confirmPasswordError } = this.state
+    const { seedPhraseError, passwordError, confirmPasswordError, termsChecked } = this.state
 
     return (
       <form
         className="first-time-flow__form"
         onSubmit={this.handleImport}
       >
-        <div>
+        <div className="first-time-flow__create-back">
           <a
             onClick={e => {
               e.preventDefault()
-              this.props.history.push(INITIALIZE_CREATE_PASSWORD_ROUTE)
+              this.props.history.push(INITIALIZE_SELECT_ACTION_ROUTE)
             }}
             href="#"
           >
@@ -197,19 +203,22 @@ export default class ImportWithSeedPhrase extends PureComponent {
           margin="normal"
           largeLabel
         />
+        <div className="first-time-flow__checkbox-container" onClick={this.toggleTermsCheck}>
+          <div className="first-time-flow__checkbox">
+            {termsChecked ? <i className="fa fa-check fa-2x" /> : null}
+          </div>
+          <span className="first-time-flow__checkbox-label">
+            { t('agreeTermsOfService') }
+          </span>
+        </div>
         <Button
-          type="first-time"
+          type="confirm"
           className="first-time-flow__button"
-          disabled={!this.isValid()}
+          disabled={!this.isValid() || !termsChecked}
           onClick={this.handleImport}
         >
           { t('import') }
         </Button>
-        <Breadcrumbs
-          className="first-time-flow__breadcrumbs"
-          total={2}
-          currentIndex={0}
-        />
       </form>
     )
   }
diff --git a/ui/app/components/pages/first-time-flow/create-password/new-account/new-account.component.js b/ui/app/components/pages/first-time-flow/create-password/new-account/new-account.component.js
index 54f8c1a70..b82cba0c5 100644
--- a/ui/app/components/pages/first-time-flow/create-password/new-account/new-account.component.js
+++ b/ui/app/components/pages/first-time-flow/create-password/new-account/new-account.component.js
@@ -1,10 +1,10 @@
 import React, { PureComponent } from 'react'
 import PropTypes from 'prop-types'
-import Breadcrumbs from '../../../../breadcrumbs'
 import Button from '../../../../button'
 import {
   INITIALIZE_UNIQUE_IMAGE_ROUTE,
   INITIALIZE_IMPORT_WITH_SEED_PHRASE_ROUTE,
+  INITIALIZE_SELECT_ACTION_ROUTE,
 } from '../../../../../routes'
 import TextField from '../../../../text-field'
 
@@ -23,6 +23,7 @@ export default class NewAccount extends PureComponent {
     confirmPassword: '',
     passwordError: '',
     confirmPasswordError: '',
+    termsChecked: false,
   }
 
   isValid () {
@@ -111,12 +112,29 @@ export default class NewAccount extends PureComponent {
     history.push(INITIALIZE_IMPORT_WITH_SEED_PHRASE_ROUTE)
   }
 
+  toggleTermsCheck = () => {
+    this.setState((prevState) => ({
+      termsChecked: !prevState.termsChecked,
+    }))
+  }
+
   render () {
     const { t } = this.context
-    const { password, confirmPassword, passwordError, confirmPasswordError } = this.state
+    const { password, confirmPassword, passwordError, confirmPasswordError, termsChecked } = this.state
 
     return (
       <div>
+        <div className="first-time-flow__create-back">
+          <a
+            onClick={e => {
+              e.preventDefault()
+              this.props.history.push(INITIALIZE_SELECT_ACTION_ROUTE)
+            }}
+            href="#"
+          >
+            {`< Back`}
+          </a>
+        </div>
         <div className="first-time-flow__header">
           { t('createPassword') }
         </div>
@@ -151,27 +169,23 @@ export default class NewAccount extends PureComponent {
             fullWidth
             largeLabel
           />
+          <div className="first-time-flow__checkbox-container" onClick={this.toggleTermsCheck}>
+            <div className="first-time-flow__checkbox">
+              {termsChecked ? <i className="fa fa-check fa-2x" /> : null}
+            </div>
+            <span className="first-time-flow__checkbox-label">
+              I agree to the Terms Of Service
+            </span>
+          </div>
           <Button
-            type="first-time"
+            type="confirm"
             className="first-time-flow__button"
-            disabled={!this.isValid()}
+            disabled={!this.isValid() || !termsChecked}
             onClick={this.handleCreate}
           >
             { t('create') }
           </Button>
         </form>
-        <a
-          href=""
-          className="first-time-flow__link create-password__import-link"
-          onClick={this.handleImportWithSeedPhrase}
-        >
-          { t('importWithSeedPhrase') }
-        </a>
-        <Breadcrumbs
-          className="first-time-flow__breadcrumbs"
-          total={3}
-          currentIndex={0}
-        />
       </div>
     )
   }
diff --git a/ui/app/components/pages/first-time-flow/create-password/unique-image/unique-image.component.js b/ui/app/components/pages/first-time-flow/create-password/unique-image/unique-image.component.js
index 41a566f0a..fa76074f5 100644
--- a/ui/app/components/pages/first-time-flow/create-password/unique-image/unique-image.component.js
+++ b/ui/app/components/pages/first-time-flow/create-password/unique-image/unique-image.component.js
@@ -1,9 +1,7 @@
 import React, { PureComponent } from 'react'
 import PropTypes from 'prop-types'
-import Identicon from '../../../../identicon'
-import Breadcrumbs from '../../../../breadcrumbs'
 import Button from '../../../../button'
-import { INITIALIZE_NOTICE_ROUTE } from '../../../../../routes'
+import { INITIALIZE_SEED_PHRASE_ROUTE, INITIALIZE_END_OF_FLOW_ROUTE } from '../../../../../routes'
 
 export default class UniqueImageScreen extends PureComponent {
   static contextTypes = {
@@ -11,42 +9,43 @@ export default class UniqueImageScreen extends PureComponent {
   }
 
   static propTypes = {
-    address: PropTypes.string,
     history: PropTypes.object,
+    isImportedKeyring: PropTypes.bool,
   }
 
   render () {
     const { t } = this.context
-    const { address, history } = this.props
+    const { history, isImportedKeyring } = this.props
 
     return (
       <div>
-        <Identicon
-          className="first-time-flow__unique-image"
-          address={address}
-          diameter={70}
+        <img
+          src="/images/sleuth.svg"
+          height={42}
+          width={42}
         />
         <div className="first-time-flow__header">
-          { t('yourUniqueAccountImage') }
+          { t('protectYourKeys') }
         </div>
         <div className="first-time-flow__text-block">
-          { t('yourUniqueAccountImageDescription1') }
+          { t('protectYourKeysMessage1') }
         </div>
         <div className="first-time-flow__text-block">
-          { t('yourUniqueAccountImageDescription2') }
+          { t('protectYourKeysMessage2') }
         </div>
         <Button
-          type="first-time"
+          type="confirm"
           className="first-time-flow__button"
-          onClick={() => history.push(INITIALIZE_NOTICE_ROUTE)}
+          onClick={() => {
+            if (isImportedKeyring) {
+              history.push(INITIALIZE_END_OF_FLOW_ROUTE)
+            } else {
+              history.push(INITIALIZE_SEED_PHRASE_ROUTE)
+            }
+          }}
         >
           { t('next') }
         </Button>
-        <Breadcrumbs
-          className="first-time-flow__breadcrumbs"
-          total={3}
-          currentIndex={0}
-        />
       </div>
     )
   }
diff --git a/ui/app/components/pages/first-time-flow/end-of-flow/end-of-flow.component.js b/ui/app/components/pages/first-time-flow/end-of-flow/end-of-flow.component.js
new file mode 100644
index 000000000..2ca5fd8ec
--- /dev/null
+++ b/ui/app/components/pages/first-time-flow/end-of-flow/end-of-flow.component.js
@@ -0,0 +1,70 @@
+import React, { PureComponent } from 'react'
+import PropTypes from 'prop-types'
+import Button from '../../../button'
+import { DEFAULT_ROUTE } from '../../../../routes'
+
+export default class EndOfFlowScreen extends PureComponent {
+  static contextTypes = {
+    t: PropTypes.func,
+  }
+
+  static propTypes = {
+    history: PropTypes.object,
+    completeOnboarding: PropTypes.func,
+  }
+
+  render () {
+    const { t } = this.context
+    const { history, completeOnboarding } = this.props
+
+    return (
+      <div className="end-of-flow">
+        <div className="app-header__logo-container">
+          <img
+            className="app-header__metafox-logo app-header__metafox-logo--horizontal"
+            src="/images/logo/metamask-logo-horizontal.svg"
+            height={30}
+          />
+          <img
+            className="app-header__metafox-logo app-header__metafox-logo--icon"
+            src="/images/logo/metamask-fox.svg"
+            height={42}
+            width={42}
+          />
+        </div>
+        <div className="end-of-flow__emoji">🎉</div>
+        <div className="first-time-flow__header">
+          { t('congratulations') }
+        </div>
+        <div className="first-time-flow__text-block end-of-flow__text-1">
+          { t('endOfFlowMessage1') }
+        </div>
+        <div className="first-time-flow__text-block end-of-flow__text-2">
+          { t('endOfFlowMessage2') }
+        </div>
+        <div className="first-time-flow__text-block end-of-flow__text-3">
+          { '• ' + t('endOfFlowMessage3') }
+        </div>
+        <div className="first-time-flow__text-block end-of-flow__text-4">
+          { '• ' + t('endOfFlowMessage4') }
+        </div>
+        <div className="first-time-flow__text-block end-of-flow__text-3">
+          { t('endOfFlowMessage5') }
+        </div>
+        <div className="first-time-flow__text-block end-of-flow__text-3">
+          { '*' + t('endOfFlowMessage6') }
+        </div>
+        <Button
+          type="confirm"
+          className="first-time-flow__button"
+          onClick={async () => {
+            await completeOnboarding()
+            history.push(DEFAULT_ROUTE)
+          }}
+        >
+          { 'All Done' }
+        </Button>
+      </div>
+    )
+  }
+}
diff --git a/ui/app/components/pages/first-time-flow/end-of-flow/end-of-flow.container.js b/ui/app/components/pages/first-time-flow/end-of-flow/end-of-flow.container.js
new file mode 100644
index 000000000..ffe2c0efb
--- /dev/null
+++ b/ui/app/components/pages/first-time-flow/end-of-flow/end-of-flow.container.js
@@ -0,0 +1,11 @@
+import { connect } from 'react-redux'
+import EndOfFlow from './end-of-flow.component'
+import { setCompletedOnboarding } from '../../../../actions'
+
+const mapDispatchToProps = dispatch => {
+  return {
+    completeOnboarding: () => dispatch(setCompletedOnboarding()),
+  }
+}
+
+export default connect(null, mapDispatchToProps)(EndOfFlow)
diff --git a/ui/app/components/pages/first-time-flow/end-of-flow/index.js b/ui/app/components/pages/first-time-flow/end-of-flow/index.js
new file mode 100644
index 000000000..b0643d155
--- /dev/null
+++ b/ui/app/components/pages/first-time-flow/end-of-flow/index.js
@@ -0,0 +1 @@
+export { default } from './end-of-flow.container'
diff --git a/ui/app/components/pages/first-time-flow/end-of-flow/index.scss b/ui/app/components/pages/first-time-flow/end-of-flow/index.scss
new file mode 100644
index 000000000..5f5cc5991
--- /dev/null
+++ b/ui/app/components/pages/first-time-flow/end-of-flow/index.scss
@@ -0,0 +1,47 @@
+.end-of-flow {
+  color: black;
+  font-family: Roboto;
+  font-style: normal;
+
+  .app-header__logo-container {
+    width: 742px;
+    margin-top: 3%;
+
+    @media screen and (max-width: $break-small) {
+      width: 100%;
+    }
+  }
+
+  &__text-1, &__text-3 {
+    font-weight: normal;
+    font-size: 16px;
+    margin-top: 18px;
+  }
+
+  &__text-2 {
+    font-weight: bold;
+    font-size: 16px;
+    margin-top: 26px;
+  }
+
+  &__text-3 {
+    margin-top: 26px;
+  }
+
+  &__text-3 {
+    margin-top: 2px;
+  }
+
+  button {
+    width: 207px;
+  }
+
+  &__start-over-button {
+    width: 744px;
+  }
+
+  &__emoji {
+    font-size: 80px;
+    margin-top: 70px;
+  }
+}
\ No newline at end of file
diff --git a/ui/app/components/pages/first-time-flow/first-time-flow-switch/first-time-flow-switch.component.js b/ui/app/components/pages/first-time-flow/first-time-flow-switch/first-time-flow-switch.component.js
index 9e8bce2c8..43f792e06 100644
--- a/ui/app/components/pages/first-time-flow/first-time-flow-switch/first-time-flow-switch.component.js
+++ b/ui/app/components/pages/first-time-flow/first-time-flow-switch/first-time-flow-switch.component.js
@@ -5,7 +5,6 @@ import {
   DEFAULT_ROUTE,
   LOCK_ROUTE,
   INITIALIZE_WELCOME_ROUTE,
-  INITIALIZE_NOTICE_ROUTE,
   INITIALIZE_UNLOCK_ROUTE,
   INITIALIZE_SEED_PHRASE_ROUTE,
 } from '../../../../routes'
@@ -15,7 +14,6 @@ export default class FirstTimeFlowSwitch extends PureComponent {
     completedOnboarding: PropTypes.bool,
     isInitialized: PropTypes.bool,
     isUnlocked: PropTypes.bool,
-    noActiveNotices: PropTypes.bool,
     seedPhrase: PropTypes.string,
   }
 
@@ -24,7 +22,6 @@ export default class FirstTimeFlowSwitch extends PureComponent {
       completedOnboarding,
       isInitialized,
       isUnlocked,
-      noActiveNotices,
       seedPhrase,
     } = this.props
 
@@ -44,10 +41,6 @@ export default class FirstTimeFlowSwitch extends PureComponent {
       return <Redirect to={{ pathname: INITIALIZE_UNLOCK_ROUTE }} />
     }
 
-    if (!noActiveNotices) {
-      return <Redirect to={{ pathname: INITIALIZE_NOTICE_ROUTE }} />
-    }
-
     if (seedPhrase) {
       return <Redirect to={{ pathname: INITIALIZE_SEED_PHRASE_ROUTE }} />
     }
diff --git a/ui/app/components/pages/first-time-flow/first-time-flow-switch/first-time-flow-switch.container.js b/ui/app/components/pages/first-time-flow/first-time-flow-switch/first-time-flow-switch.container.js
index 8b7a74880..e44c216c0 100644
--- a/ui/app/components/pages/first-time-flow/first-time-flow-switch/first-time-flow-switch.container.js
+++ b/ui/app/components/pages/first-time-flow/first-time-flow-switch/first-time-flow-switch.container.js
@@ -6,14 +6,12 @@ const mapStateToProps = ({ metamask }) => {
     completedOnboarding,
     isInitialized,
     isUnlocked,
-    noActiveNotices,
   } = metamask
 
   return {
     completedOnboarding,
     isInitialized,
     isUnlocked,
-    noActiveNotices,
   }
 }
 
diff --git a/ui/app/components/pages/first-time-flow/first-time-flow.component.js b/ui/app/components/pages/first-time-flow/first-time-flow.component.js
index cde077803..82308dda2 100644
--- a/ui/app/components/pages/first-time-flow/first-time-flow.component.js
+++ b/ui/app/components/pages/first-time-flow/first-time-flow.component.js
@@ -3,17 +3,19 @@ import PropTypes from 'prop-types'
 import { Switch, Route } from 'react-router-dom'
 import FirstTimeFlowSwitch from './first-time-flow-switch'
 import Welcome from './welcome'
+import SelectAction from './select-action'
+import EndOfFlow from './end-of-flow'
 import Unlock from '../unlock-page'
 import CreatePassword from './create-password'
-import Notices from './notices'
 import SeedPhrase from './seed-phrase'
 import {
   DEFAULT_ROUTE,
   INITIALIZE_WELCOME_ROUTE,
   INITIALIZE_CREATE_PASSWORD_ROUTE,
-  INITIALIZE_NOTICE_ROUTE,
   INITIALIZE_SEED_PHRASE_ROUTE,
   INITIALIZE_UNLOCK_ROUTE,
+  INITIALIZE_SELECT_ACTION_ROUTE,
+  INITIALIZE_END_OF_FLOW_ROUTE,
 } from '../../../routes'
 
 export default class FirstTimeFlow extends PureComponent {
@@ -24,7 +26,6 @@ export default class FirstTimeFlow extends PureComponent {
     history: PropTypes.object,
     isInitialized: PropTypes.bool,
     isUnlocked: PropTypes.bool,
-    noActiveNotices: PropTypes.bool,
     unlockAccount: PropTypes.func,
   }
 
@@ -70,14 +71,12 @@ export default class FirstTimeFlow extends PureComponent {
   }
 
   handleUnlock = async password => {
-    const { unlockAccount, history, noActiveNotices } = this.props
+    const { unlockAccount, history } = this.props
 
     try {
       const seedPhrase = await unlockAccount(password)
       this.setState({ seedPhrase }, () => {
-        noActiveNotices
-          ? history.push(INITIALIZE_SEED_PHRASE_ROUTE)
-          : history.push(INITIALIZE_NOTICE_ROUTE)
+        history.push(INITIALIZE_SEED_PHRASE_ROUTE)
       })
     } catch (error) {
       throw new Error(error.message)
@@ -100,26 +99,21 @@ export default class FirstTimeFlow extends PureComponent {
             )}
           />
           <Route
-            exact
-            path={INITIALIZE_NOTICE_ROUTE}
-            render={props => (
-              <Notices
-                { ...props }
-                isImportedKeyring={isImportedKeyring}
-              />
-            )}
-          />
-          <Route
             path={INITIALIZE_CREATE_PASSWORD_ROUTE}
             render={props => (
               <CreatePassword
                 { ...props }
+                isImportedKeyring={isImportedKeyring}
                 onCreateNewAccount={this.handleCreateNewAccount}
                 onCreateNewAccountFromSeed={this.handleImportWithSeedPhrase}
               />
             )}
           />
           <Route
+            path={INITIALIZE_SELECT_ACTION_ROUTE}
+            component={SelectAction}
+          />
+          <Route
             path={INITIALIZE_UNLOCK_ROUTE}
             render={props => (
               <Unlock
@@ -130,6 +124,11 @@ export default class FirstTimeFlow extends PureComponent {
           />
           <Route
             exact
+            path={INITIALIZE_END_OF_FLOW_ROUTE}
+            component={EndOfFlow}
+          />
+          <Route
+            exact
             path={INITIALIZE_WELCOME_ROUTE}
             component={Welcome}
           />
diff --git a/ui/app/components/pages/first-time-flow/first-time-flow.container.js b/ui/app/components/pages/first-time-flow/first-time-flow.container.js
index 782eddb74..1419dd59f 100644
--- a/ui/app/components/pages/first-time-flow/first-time-flow.container.js
+++ b/ui/app/components/pages/first-time-flow/first-time-flow.container.js
@@ -7,13 +7,12 @@ import {
 } from '../../../actions'
 
 const mapStateToProps = state => {
-  const { metamask: { completedOnboarding, isInitialized, isUnlocked, noActiveNotices } } = state
+  const { metamask: { completedOnboarding, isInitialized, isUnlocked } } = state
 
   return {
     completedOnboarding,
     isInitialized,
     isUnlocked,
-    noActiveNotices,
   }
 }
 
diff --git a/ui/app/components/pages/first-time-flow/index.scss b/ui/app/components/pages/first-time-flow/index.scss
index e3aca0694..e14d57f58 100644
--- a/ui/app/components/pages/first-time-flow/index.scss
+++ b/ui/app/components/pages/first-time-flow/index.scss
@@ -1,18 +1,28 @@
 @import './welcome/index';
 
+@import './select-action/index';
+
 @import './seed-phrase/index';
 
+@import './end-of-flow/index';
+
 .first-time-flow {
   width: 100%;
   background-color: $white;
+  display: flex;
+  justify-content: center;
 
   &__wrapper {
     @media screen and (min-width: $break-large) {
-      padding: 60px 275px 0 275px;
+      max-width: 742px;
+      display: flex;
+      flex-direction: column;
+      width: 100%;
+      margin-top: 2%;
     }
 
-    @media screen and (max-width: 1100px) {
-      padding: 36px;
+    .app-header__metafox-logo {
+      margin-bottom: 40px;
     }
   }
 
@@ -21,9 +31,14 @@
     flex-direction: column;
   }
 
+  &__create-back {
+    margin-bottom: 16px;
+  }
+
   &__header {
     font-size: 2.5rem;
     margin-bottom: 24px;
+    color: black;
   }
 
   &__subheader {
@@ -86,6 +101,7 @@
 
   &__text-block {
     margin-bottom: 24px;
+    color: black;
 
     @media screen and (max-width: $break-small) {
       margin-bottom: 16px;
@@ -95,5 +111,42 @@
 
   &__button {
     margin: 35px 0 14px;
+    width: 140px;
+    height: 44px;
+  }
+
+  &__checkbox-container {
+    display: flex;
+    align-items: center;
+    margin-top: 24px;
+  }
+
+  &__checkbox {
+    background: #FFFFFF;
+    border: 1px solid #CDCDCD;
+    box-sizing: border-box;
+    height: 34px;
+    width: 34px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    &:hover {
+      border: 1.5px solid #2f9ae0;
+    }
+
+    .fa-check {
+      color: #2f9ae0
+    }
+  }
+
+  &__checkbox-label {
+    font-family: Roboto;
+    font-style: normal;
+    font-weight: normal;
+    line-height: normal;
+    font-size: 18px;
+    color: #939090;
+    margin-left: 18px;
   }
 }
diff --git a/ui/app/components/pages/first-time-flow/notices/index.js b/ui/app/components/pages/first-time-flow/notices/index.js
deleted file mode 100644
index 024daaa68..000000000
--- a/ui/app/components/pages/first-time-flow/notices/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './notices.container'
diff --git a/ui/app/components/pages/first-time-flow/notices/notices.component.js b/ui/app/components/pages/first-time-flow/notices/notices.component.js
deleted file mode 100644
index fefaedd6f..000000000
--- a/ui/app/components/pages/first-time-flow/notices/notices.component.js
+++ /dev/null
@@ -1,124 +0,0 @@
-import React, { PureComponent } from 'react'
-import PropTypes from 'prop-types'
-import Markdown from 'react-markdown'
-import debounce from 'lodash.debounce'
-import Button from '../../../button'
-import Identicon from '../../../identicon'
-import Breadcrumbs from '../../../breadcrumbs'
-import { DEFAULT_ROUTE, INITIALIZE_SEED_PHRASE_ROUTE } from '../../../../routes'
-
-export default class Notices extends PureComponent {
-  static contextTypes = {
-    t: PropTypes.func,
-  }
-
-  static propTypes = {
-    address: PropTypes.string.isRequired,
-    completeOnboarding: PropTypes.func,
-    history: PropTypes.object,
-    isImportedKeyring: PropTypes.bool,
-    markNoticeRead: PropTypes.func,
-    nextUnreadNotice: PropTypes.shape({
-      title: PropTypes.string,
-      date: PropTypes.string,
-      body: PropTypes.string,
-    }),
-    noActiveNotices: PropTypes.bool,
-  }
-
-  static defaultProps = {
-    nextUnreadNotice: {},
-  }
-
-  state = {
-    atBottom: false,
-  }
-
-  componentDidMount () {
-    const { noActiveNotices, history } = this.props
-
-    if (noActiveNotices) {
-      history.push(INITIALIZE_SEED_PHRASE_ROUTE)
-    }
-
-    this.onScroll()
-  }
-
-  acceptTerms = async () => {
-    const {
-      completeOnboarding,
-      history,
-      isImportedKeyring,
-      markNoticeRead,
-      nextUnreadNotice,
-    } = this.props
-
-    const hasActiveNotices = await markNoticeRead(nextUnreadNotice)
-
-    if (!hasActiveNotices) {
-      if (isImportedKeyring) {
-        await completeOnboarding()
-        history.push(DEFAULT_ROUTE)
-      } else {
-        history.push(INITIALIZE_SEED_PHRASE_ROUTE)
-      }
-    } else {
-      this.setState({ atBottom: false }, () => this.onScroll())
-    }
-  }
-
-  onScroll = debounce(() => {
-    if (this.state.atBottom) {
-      return
-    }
-
-    const target = document.querySelector('.first-time-flow__markdown')
-
-    if (target) {
-      const { scrollTop, offsetHeight, scrollHeight } = target
-      const atBottom = scrollTop + offsetHeight >= scrollHeight
-
-      this.setState({ atBottom })
-    }
-  }, 25)
-
-  render () {
-    const { t } = this.context
-    const { isImportedKeyring, address, nextUnreadNotice: { title, body } } = this.props
-    const { atBottom } = this.state
-
-    return (
-      <div
-        className="first-time-flow__wrapper"
-        onScroll={this.onScroll}
-      >
-        <Identicon
-          className="first-time-flow__unique-image"
-          address={address}
-          diameter={70}
-        />
-        <div className="first-time-flow__header">
-          { title }
-        </div>
-        <Markdown
-          className="first-time-flow__markdown"
-          source={body}
-          skipHtml
-        />
-        <Button
-          type="first-time"
-          className="first-time-flow__button"
-          onClick={atBottom && this.acceptTerms}
-          disabled={!atBottom}
-        >
-          { t('accept') }
-        </Button>
-        <Breadcrumbs
-          className="first-time-flow__breadcrumbs"
-          total={isImportedKeyring ? 2 : 3}
-          currentIndex={1}
-        />
-      </div>
-    )
-  }
-}
diff --git a/ui/app/components/pages/first-time-flow/notices/notices.container.js b/ui/app/components/pages/first-time-flow/notices/notices.container.js
deleted file mode 100644
index c65c5b7de..000000000
--- a/ui/app/components/pages/first-time-flow/notices/notices.container.js
+++ /dev/null
@@ -1,27 +0,0 @@
-import { connect } from 'react-redux'
-import { withRouter } from 'react-router-dom'
-import { compose } from 'recompose'
-import { markNoticeRead, setCompletedOnboarding } from '../../../../actions'
-import Notices from './notices.component'
-
-const mapStateToProps = ({ metamask }) => {
-  const { selectedAddress, nextUnreadNotice, noActiveNotices } = metamask
-
-  return {
-    address: selectedAddress,
-    nextUnreadNotice,
-    noActiveNotices,
-  }
-}
-
-const mapDispatchToProps = dispatch => {
-  return {
-    markNoticeRead: notice => dispatch(markNoticeRead(notice)),
-    completeOnboarding: () => dispatch(setCompletedOnboarding()),
-  }
-}
-
-export default compose(
-  withRouter,
-  connect(mapStateToProps, mapDispatchToProps)
-)(Notices)
diff --git a/ui/app/components/pages/first-time-flow/seed-phrase/confirm-seed-phrase/confirm-seed-phrase.component.js b/ui/app/components/pages/first-time-flow/seed-phrase/confirm-seed-phrase/confirm-seed-phrase.component.js
index bc0f73a27..b5c4bf463 100644
--- a/ui/app/components/pages/first-time-flow/seed-phrase/confirm-seed-phrase/confirm-seed-phrase.component.js
+++ b/ui/app/components/pages/first-time-flow/seed-phrase/confirm-seed-phrase/confirm-seed-phrase.component.js
@@ -2,10 +2,8 @@ import React, { PureComponent } from 'react'
 import PropTypes from 'prop-types'
 import classnames from 'classnames'
 import shuffle from 'lodash.shuffle'
-import Identicon from '../../../../identicon'
 import Button from '../../../../button'
-import Breadcrumbs from '../../../../breadcrumbs'
-import { DEFAULT_ROUTE, INITIALIZE_SEED_PHRASE_ROUTE } from '../../../../../routes'
+import { INITIALIZE_END_OF_FLOW_ROUTE, INITIALIZE_SEED_PHRASE_ROUTE } from '../../../../../routes'
 import { exportAsFile } from '../../../../../../app/util'
 import { selectSeedWord, deselectSeedWord } from './confirm-seed-phrase.state'
 
@@ -19,11 +17,8 @@ export default class ConfirmSeedPhrase extends PureComponent {
   }
 
   static propTypes = {
-    address: PropTypes.string,
-    completeOnboarding: PropTypes.func,
     history: PropTypes.object,
     onSubmit: PropTypes.func,
-    openBuyEtherModal: PropTypes.func,
     seedPhrase: PropTypes.string,
   }
 
@@ -45,16 +40,14 @@ export default class ConfirmSeedPhrase extends PureComponent {
   }
 
   handleSubmit = async () => {
-    const { completeOnboarding, history, openBuyEtherModal } = this.props
+    const { history } = this.props
 
     if (!this.isValid()) {
       return
     }
 
     try {
-      await completeOnboarding()
-      history.push(DEFAULT_ROUTE)
-      openBuyEtherModal()
+      history.push(INITIALIZE_END_OF_FLOW_ROUTE)
     } catch (error) {
       console.error(error.message)
     }
@@ -76,11 +69,11 @@ export default class ConfirmSeedPhrase extends PureComponent {
 
   render () {
     const { t } = this.context
-    const { address, history } = this.props
+    const { history } = this.props
     const { selectedSeedWords, shuffledSeedWords, selectedSeedWordsHash } = this.state
 
     return (
-      <div>
+      <div className="confirm-seed-phrase">
         <div className="confirm-seed-phrase__back-button">
           <a
             onClick={e => {
@@ -92,11 +85,6 @@ export default class ConfirmSeedPhrase extends PureComponent {
             {`< Back`}
           </a>
         </div>
-        <Identicon
-          className="first-time-flow__unique-image"
-          address={address}
-          diameter={70}
-        />
         <div className="first-time-flow__header">
           { t('confirmSecretBackupPhrase') }
         </div>
@@ -143,18 +131,13 @@ export default class ConfirmSeedPhrase extends PureComponent {
           }
         </div>
         <Button
-          type="first-time"
+          type="confirm"
           className="first-time-flow__button"
           onClick={this.handleSubmit}
           disabled={!this.isValid()}
         >
           { t('confirm') }
         </Button>
-        <Breadcrumbs
-          className="first-time-flow__breadcrumbs"
-          total={3}
-          currentIndex={2}
-        />
       </div>
     )
   }
diff --git a/ui/app/components/pages/first-time-flow/seed-phrase/confirm-seed-phrase/confirm-seed-phrase.container.js b/ui/app/components/pages/first-time-flow/seed-phrase/confirm-seed-phrase/confirm-seed-phrase.container.js
deleted file mode 100644
index 5fa2bec1e..000000000
--- a/ui/app/components/pages/first-time-flow/seed-phrase/confirm-seed-phrase/confirm-seed-phrase.container.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import { connect } from 'react-redux'
-import ConfirmSeedPhrase from './confirm-seed-phrase.component'
-import { setCompletedOnboarding, showModal } from '../../../../../actions'
-
-const mapDispatchToProps = dispatch => {
-  return {
-    completeOnboarding: () => dispatch(setCompletedOnboarding()),
-    openBuyEtherModal: () => dispatch(showModal({ name: 'DEPOSIT_ETHER'})),
-  }
-}
-
-export default connect(null, mapDispatchToProps)(ConfirmSeedPhrase)
diff --git a/ui/app/components/pages/first-time-flow/seed-phrase/confirm-seed-phrase/index.js b/ui/app/components/pages/first-time-flow/seed-phrase/confirm-seed-phrase/index.js
index beb53b383..c7b511503 100644
--- a/ui/app/components/pages/first-time-flow/seed-phrase/confirm-seed-phrase/index.js
+++ b/ui/app/components/pages/first-time-flow/seed-phrase/confirm-seed-phrase/index.js
@@ -1 +1 @@
-export { default } from './confirm-seed-phrase.container'
+export { default } from './confirm-seed-phrase.component'
diff --git a/ui/app/components/pages/first-time-flow/seed-phrase/confirm-seed-phrase/index.scss b/ui/app/components/pages/first-time-flow/seed-phrase/confirm-seed-phrase/index.scss
index e0444571f..93137618c 100644
--- a/ui/app/components/pages/first-time-flow/seed-phrase/confirm-seed-phrase/index.scss
+++ b/ui/app/components/pages/first-time-flow/seed-phrase/confirm-seed-phrase/index.scss
@@ -41,4 +41,8 @@
       padding: 6px 18px;
     }
   }
+
+  button {
+    margin-top: 0xp;
+  }
 }
diff --git a/ui/app/components/pages/first-time-flow/seed-phrase/index.js b/ui/app/components/pages/first-time-flow/seed-phrase/index.js
index 7355bfb2c..185b3f089 100644
--- a/ui/app/components/pages/first-time-flow/seed-phrase/index.js
+++ b/ui/app/components/pages/first-time-flow/seed-phrase/index.js
@@ -1 +1 @@
-export { default } from './seed-phrase.container'
+export { default } from './seed-phrase.component'
diff --git a/ui/app/components/pages/first-time-flow/seed-phrase/index.scss b/ui/app/components/pages/first-time-flow/seed-phrase/index.scss
index 88b28950c..e4fd7be4f 100644
--- a/ui/app/components/pages/first-time-flow/seed-phrase/index.scss
+++ b/ui/app/components/pages/first-time-flow/seed-phrase/index.scss
@@ -26,11 +26,15 @@
     min-width: 0;
 
     @media screen and (min-width: $break-large) {
-      margin-left: 48px;
+      margin-left: 81px;
     }
 
     @media screen and (max-width: $break-small) {
       margin-top: 24px;
     }
+
+    .first-time-flow__text-block {
+      color: #5A5A5A;
+    }
   }
 }
diff --git a/ui/app/components/pages/first-time-flow/seed-phrase/reveal-seed-phrase/index.scss b/ui/app/components/pages/first-time-flow/seed-phrase/reveal-seed-phrase/index.scss
index 568359d31..8a47447ed 100644
--- a/ui/app/components/pages/first-time-flow/seed-phrase/reveal-seed-phrase/index.scss
+++ b/ui/app/components/pages/first-time-flow/seed-phrase/reveal-seed-phrase/index.scss
@@ -50,4 +50,8 @@
     cursor: pointer;
     font-weight: 500;
   }
+
+  button {
+    margin-top: 0xp;
+  }
 }
diff --git a/ui/app/components/pages/first-time-flow/seed-phrase/reveal-seed-phrase/reveal-seed-phrase.component.js b/ui/app/components/pages/first-time-flow/seed-phrase/reveal-seed-phrase/reveal-seed-phrase.component.js
index bb822d1d5..732ce14af 100644
--- a/ui/app/components/pages/first-time-flow/seed-phrase/reveal-seed-phrase/reveal-seed-phrase.component.js
+++ b/ui/app/components/pages/first-time-flow/seed-phrase/reveal-seed-phrase/reveal-seed-phrase.component.js
@@ -1,10 +1,8 @@
 import React, { PureComponent } from 'react'
 import PropTypes from 'prop-types'
 import classnames from 'classnames'
-import Identicon from '../../../../identicon'
 import LockIcon from '../../../../lock-icon'
 import Button from '../../../../button'
-import Breadcrumbs from '../../../../breadcrumbs'
 import { INITIALIZE_CONFIRM_SEED_PHRASE_ROUTE } from '../../../../../routes'
 import { exportAsFile } from '../../../../../../app/util'
 
@@ -14,7 +12,6 @@ export default class RevealSeedPhrase extends PureComponent {
   }
 
   static propTypes = {
-    address: PropTypes.string,
     history: PropTypes.object,
     seedPhrase: PropTypes.string,
   }
@@ -75,16 +72,10 @@ export default class RevealSeedPhrase extends PureComponent {
 
   render () {
     const { t } = this.context
-    const { address } = this.props
     const { isShowingSeedPhrase } = this.state
 
     return (
-      <div>
-        <Identicon
-          className="first-time-flow__unique-image"
-          address={address}
-          diameter={70}
-        />
+      <div className="reveal-seed-phrase">
         <div className="seed-phrase__sections">
           <div className="seed-phrase__main">
             <div className="first-time-flow__header">
@@ -121,18 +112,13 @@ export default class RevealSeedPhrase extends PureComponent {
           </div>
         </div>
         <Button
-          type="first-time"
+          type="confirm"
           className="first-time-flow__button"
           onClick={this.handleNext}
           disabled={!isShowingSeedPhrase}
         >
           { t('next') }
         </Button>
-        <Breadcrumbs
-          className="first-time-flow__breadcrumbs"
-          total={3}
-          currentIndex={2}
-        />
       </div>
     )
   }
diff --git a/ui/app/components/pages/first-time-flow/seed-phrase/seed-phrase.component.js b/ui/app/components/pages/first-time-flow/seed-phrase/seed-phrase.component.js
index 5f5b8a0b2..9eec89cdd 100644
--- a/ui/app/components/pages/first-time-flow/seed-phrase/seed-phrase.component.js
+++ b/ui/app/components/pages/first-time-flow/seed-phrase/seed-phrase.component.js
@@ -25,10 +25,23 @@ export default class SeedPhrase extends PureComponent {
   }
 
   render () {
-    const { address, seedPhrase } = this.props
+    const { seedPhrase } = this.props
 
     return (
       <div className="first-time-flow__wrapper">
+        <div className="app-header__logo-container">
+          <img
+            className="app-header__metafox-logo app-header__metafox-logo--horizontal"
+            src="/images/logo/metamask-logo-horizontal.svg"
+            height={30}
+          />
+          <img
+            className="app-header__metafox-logo app-header__metafox-logo--icon"
+            src="/images/logo/metamask-fox.svg"
+            height={42}
+            width={42}
+          />
+        </div>
         <Switch>
           <Route
             exact
@@ -36,7 +49,6 @@ export default class SeedPhrase extends PureComponent {
             render={props => (
               <ConfirmSeedPhrase
                 { ...props }
-                address={address}
                 seedPhrase={seedPhrase}
               />
             )}
@@ -47,7 +59,6 @@ export default class SeedPhrase extends PureComponent {
             render={props => (
               <RevealSeedPhrase
                 { ...props }
-                address={address}
                 seedPhrase={seedPhrase}
               />
             )}
diff --git a/ui/app/components/pages/first-time-flow/seed-phrase/seed-phrase.container.js b/ui/app/components/pages/first-time-flow/seed-phrase/seed-phrase.container.js
deleted file mode 100644
index 4df024ffc..000000000
--- a/ui/app/components/pages/first-time-flow/seed-phrase/seed-phrase.container.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import { connect } from 'react-redux'
-import SeedPhrase from './seed-phrase.component'
-
-const mapStateToProps = state => {
-  const { metamask: { selectedAddress } } = state
-
-  return {
-    address: selectedAddress,
-  }
-}
-
-export default connect(mapStateToProps)(SeedPhrase)
diff --git a/ui/app/components/pages/first-time-flow/select-action/index.js b/ui/app/components/pages/first-time-flow/select-action/index.js
new file mode 100644
index 000000000..3aa968834
--- /dev/null
+++ b/ui/app/components/pages/first-time-flow/select-action/index.js
@@ -0,0 +1 @@
+export { default } from './select-action.component'
diff --git a/ui/app/components/pages/first-time-flow/select-action/index.scss b/ui/app/components/pages/first-time-flow/select-action/index.scss
new file mode 100644
index 000000000..b9585eb3b
--- /dev/null
+++ b/ui/app/components/pages/first-time-flow/select-action/index.scss
@@ -0,0 +1,87 @@
+.select-action {
+  .app-header__logo-container {
+    width: 742px;
+    margin-top: 3%;
+  }
+
+  &__body {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  &__body-header {
+    font-family: Roboto;
+    font-style: normal;
+    font-weight: normal;
+    line-height: 39px;
+    font-size: 28px;
+    text-align: center;
+    margin-top: 65px;
+    color: black;
+  }
+
+  &__select-buttons {
+    display: flex;
+    flex-direction: row;
+    margin-top: 40px;
+  }
+
+  &__select-button {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-evenly;
+    width: 269px;
+    height: 278px;
+
+    border: 1px solid #D8D8D8;
+    box-sizing: border-box;
+    border-radius: 10px;
+    margin-left: 22px;
+
+    .first-time-flow__button {
+      max-width: 221px;
+      height: 44px;
+    }
+  }
+
+  &__button-symbol {
+    color: #C4C4C4;
+    margin-top: 41px;
+  }
+
+  &__button-content {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+        align-items: center;
+    height: 144px;
+  }
+
+  &__button-text-big {
+    font-family: Roboto;
+    font-style: normal;
+    font-weight: normal;
+    line-height: 28px;
+    font-size: 20px;
+    color: #000000;
+    margin-top: 12px;
+    text-align: center;
+  }
+
+  &__button-text-small {
+    font-family: Roboto;
+    font-style: normal;
+    font-weight: normal;
+    line-height: 20px;
+    font-size: 14px;
+    color: #7A7A7B;
+    margin-top: 10px;
+  }
+
+  button {
+    font-weight: 500;
+    width: 221px;
+  }
+}
\ No newline at end of file
diff --git a/ui/app/components/pages/first-time-flow/select-action/select-action.component.js b/ui/app/components/pages/first-time-flow/select-action/select-action.component.js
new file mode 100644
index 000000000..385efe02a
--- /dev/null
+++ b/ui/app/components/pages/first-time-flow/select-action/select-action.component.js
@@ -0,0 +1,104 @@
+import React, { PureComponent } from 'react'
+import PropTypes from 'prop-types'
+import Button from '../../../button'
+import {
+  INITIALIZE_CREATE_PASSWORD_ROUTE,
+  INITIALIZE_IMPORT_WITH_SEED_PHRASE_ROUTE,
+  INITIALIZE_UNIQUE_IMAGE_ROUTE,
+} from '../../../../routes'
+
+export default class SelectAction extends PureComponent {
+  static propTypes = {
+    history: PropTypes.object,
+    isInitialized: PropTypes.bool,
+  }
+
+  static contextTypes = {
+    t: PropTypes.func,
+  }
+
+  componentDidMount () {
+    const { history, isInitialized } = this.props
+
+    if (isInitialized) {
+      history.push(INITIALIZE_UNIQUE_IMAGE_ROUTE)
+    }
+  }
+
+  handleCreate = () => {
+    this.props.history.push(INITIALIZE_CREATE_PASSWORD_ROUTE)
+  }
+
+  handleImport = () => {
+    this.props.history.push(INITIALIZE_IMPORT_WITH_SEED_PHRASE_ROUTE)
+  }
+
+  render () {
+    const { t } = this.context
+
+    return (
+       <div className="select-action">
+        <div className="app-header__logo-container">
+          <img
+            className="app-header__metafox-logo app-header__metafox-logo--horizontal"
+            src="/images/logo/metamask-logo-horizontal.svg"
+            height={30}
+          />
+          <img
+            className="app-header__metafox-logo app-header__metafox-logo--icon"
+            src="/images/logo/metamask-fox.svg"
+            height={42}
+            width={42}
+          />
+        </div>
+
+        <div className="select-action__wrapper">
+
+
+          <div className="select-action__body">
+            <div className="select-action__body-header">
+              { t('newToMetaMask') }
+            </div>
+            <div className="select-action__select-buttons">
+              <div className="select-action__select-button">
+                <div className="select-action__button-content">
+                  <div className="select-action__button-symbol">
+                    <img src="/images/download-alt.svg" />
+                  </div>
+                  <div className="select-action__button-text-big">
+                    { t('noAlreadyHaveSeed') }
+                  </div>
+                </div>
+                <Button
+                  type="primary"
+                  className="first-time-flow__button"
+                  onClick={this.handleImport}
+                >
+                  { t('importWallet') }
+                </Button>
+              </div>
+              <div className="select-action__select-button">
+                <div className="select-action__button-content">
+                  <div className="select-action__button-symbol">
+                    <img src="/images/thin-plus.svg" />
+                  </div>
+                  <div className="select-action__button-text-big">
+                    { t('letsGoSetUp') }
+                  </div>
+                </div>
+                <Button
+                  type="confirm"
+                  className="first-time-flow__button"
+                  onClick={this.handleCreate}
+                >
+                  { t('createAWallet') }
+                </Button>
+              </div>
+            </div>
+          </div>
+
+        </div>
+       </div>
+    )
+  }
+}
diff --git a/ui/app/components/pages/first-time-flow/select-action/select-action.container.js b/ui/app/components/pages/first-time-flow/select-action/select-action.container.js
new file mode 100644
index 000000000..e69de29bb
--- /dev/null
+++ b/ui/app/components/pages/first-time-flow/select-action/select-action.container.js
diff --git a/ui/app/components/pages/first-time-flow/welcome/index.scss b/ui/app/components/pages/first-time-flow/welcome/index.scss
index 7527ceb35..3b5071480 100644
--- a/ui/app/components/pages/first-time-flow/welcome/index.scss
+++ b/ui/app/components/pages/first-time-flow/welcome/index.scss
@@ -1,43 +1,42 @@
 .welcome-page {
   display: flex;
   flex-direction: column;
-  justify-content: center;
+  justify-content: flex-start;
   align-items: center;
-  width: 400px;
+  max-width: 442px;
   padding: 0 18px;
+  color: black;
 
   &__wrapper {
     display: flex;
     flex-direction: row;
     justify-content: center;
-    align-items: center;
+    align-items: flex-start;
     height: 100%;
+    margin-top: 110px;
   }
 
   &__header {
-    font-size: 1.5rem;
-    margin-bottom: 14px;
+    font-size: 28px;
+    margin-bottom: 22px;
+    margin-top: 50px;
   }
 
   &__description {
     text-align: center;
 
+    div {
+      font-size: 16px;
+    }
+
     @media screen and (max-width: 575px) {
       font-size: .9rem;
     }
   }
 
-  &__button {
-    height: 54px;
-    width: 198px;
-    font-family: Roboto;
-    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .14);
-    color: $white;
-    font-size: 1.25rem;
+  .first-time-flow__button {
+    width: 184px;
     font-weight: 500;
-    text-transform: uppercase;
-    margin: 35px 0 14px;
-    transition: 200ms ease-in-out;
-    background-color: rgba(247, 134, 28, .9);
+    margin-top: 44px;
   }
 }
diff --git a/ui/app/components/pages/first-time-flow/welcome/welcome.component.js b/ui/app/components/pages/first-time-flow/welcome/welcome.component.js
index f28a8210d..08eb86939 100644
--- a/ui/app/components/pages/first-time-flow/welcome/welcome.component.js
+++ b/ui/app/components/pages/first-time-flow/welcome/welcome.component.js
@@ -3,7 +3,7 @@ import React, { PureComponent } from 'react'
 import PropTypes from 'prop-types'
 import Mascot from '../../../mascot'
 import Button from '../../../button'
-import { INITIALIZE_CREATE_PASSWORD_ROUTE, INITIALIZE_NOTICE_ROUTE } from '../../../../routes'
+import { INITIALIZE_SELECT_ACTION_ROUTE, INITIALIZE_UNIQUE_IMAGE_ROUTE } from '../../../../routes'
 
 export default class Welcome extends PureComponent {
   static propTypes = {
@@ -25,12 +25,12 @@ export default class Welcome extends PureComponent {
     const { history, isInitialized } = this.props
 
     if (isInitialized) {
-      history.push(INITIALIZE_NOTICE_ROUTE)
+      history.push(INITIALIZE_UNIQUE_IMAGE_ROUTE)
     }
   }
 
   handleContinue = () => {
-    this.props.history.push(INITIALIZE_CREATE_PASSWORD_ROUTE)
+    this.props.history.push(INITIALIZE_SELECT_ACTION_ROUTE)
   }
 
   render () {
@@ -41,22 +41,22 @@ export default class Welcome extends PureComponent {
         <div className="welcome-page">
           <Mascot
             animationEventEmitter={this.animationEventEmitter}
-            width="225"
-            height="225"
+            width="125"
+            height="125"
           />
           <div className="welcome-page__header">
             { t('welcome') }
           </div>
           <div className="welcome-page__description">
             <div>{ t('metamaskDescription') }</div>
-            <div>{ t('holdEther') }</div>
+            <div>{ t('happyToSeeYou') }</div>
           </div>
           <Button
-            type="first-time"
+            type="confirm"
             className="first-time-flow__button"
             onClick={this.handleContinue}
           >
-            { t('continue') }
+            { t('getStarted') }
           </Button>
         </div>
       </div>
diff --git a/ui/app/components/pages/home/home.component.js b/ui/app/components/pages/home/home.component.js
index 469c760a6..953d43aba 100644
--- a/ui/app/components/pages/home/home.component.js
+++ b/ui/app/components/pages/home/home.component.js
@@ -10,15 +10,12 @@ import {
   INITIALIZE_SEED_PHRASE_ROUTE,
   RESTORE_VAULT_ROUTE,
   CONFIRM_TRANSACTION_ROUTE,
-  NOTICE_ROUTE,
   CONFIRM_ADD_SUGGESTED_TOKEN_ROUTE,
 } from '../../../routes'
 
 export default class Home extends PureComponent {
   static propTypes = {
     history: PropTypes.object,
-    noActiveNotices: PropTypes.bool,
-    lostAccounts: PropTypes.array,
     forgottenPassword: PropTypes.bool,
     seedWords: PropTypes.string,
     suggestedTokens: PropTypes.object,
@@ -45,18 +42,11 @@ export default class Home extends PureComponent {
 
   render () {
     const {
-      noActiveNotices,
-      lostAccounts,
       forgottenPassword,
       seedWords,
       providerRequests,
     } = this.props
 
-    // notices
-    if (!noActiveNotices || (lostAccounts && lostAccounts.length > 0)) {
-      return <Redirect to={{ pathname: NOTICE_ROUTE }} />
-    }
-
     // seed words
     if (seedWords) {
       return <Redirect to={{ pathname: INITIALIZE_SEED_PHRASE_ROUTE }}/>
diff --git a/ui/app/routes.js b/ui/app/routes.js
index 2f4863547..7c4e805ab 100644
--- a/ui/app/routes.js
+++ b/ui/app/routes.js
@@ -25,7 +25,9 @@ const INITIALIZE_IMPORT_ACCOUNT_ROUTE = '/initialize/create-password/import-acco
 const INITIALIZE_IMPORT_WITH_SEED_PHRASE_ROUTE = '/initialize/create-password/import-with-seed-phrase'
 const INITIALIZE_UNIQUE_IMAGE_ROUTE = '/initialize/create-password/unique-image'
 const INITIALIZE_NOTICE_ROUTE = '/initialize/notice'
+const INITIALIZE_SELECT_ACTION_ROUTE = '/initialize/select-action'
 const INITIALIZE_SEED_PHRASE_ROUTE = '/initialize/seed-phrase'
+const INITIALIZE_END_OF_FLOW_ROUTE = '/initialize/end-of-flow'
 const INITIALIZE_CONFIRM_SEED_PHRASE_ROUTE = '/initialize/seed-phrase/confirm'
 
 const CONFIRM_TRANSACTION_ROUTE = '/confirm-transaction'
@@ -64,8 +66,10 @@ module.exports = {
   INITIALIZE_IMPORT_WITH_SEED_PHRASE_ROUTE,
   INITIALIZE_UNIQUE_IMAGE_ROUTE,
   INITIALIZE_NOTICE_ROUTE,
+  INITIALIZE_SELECT_ACTION_ROUTE,
   INITIALIZE_SEED_PHRASE_ROUTE,
   INITIALIZE_CONFIRM_SEED_PHRASE_ROUTE,
+  INITIALIZE_END_OF_FLOW_ROUTE,
   CONFIRM_TRANSACTION_ROUTE,
   CONFIRM_SEND_ETHER_PATH,
   CONFIRM_SEND_TOKEN_PATH,