diff --git a/common/Root.tsx b/common/Root.tsx
index b75f17f36ba..e21c63bac72 100644
--- a/common/Root.tsx
+++ b/common/Root.tsx
@@ -45,6 +45,10 @@ export default class Root extends Component<Props, State> {
         <Router history={history} key={Math.random()}>
           <div>
             <Route exact={true} path="/" component={GenerateWallet} />
+            <Route path="/generate" component={GenerateWallet}>
+              <Route path="keystore" component={GenerateWallet} />
+              <Route path="mnemonic" component={GenerateWallet} />
+            </Route>
             <Route path="/help" component={Help} />
             <Route path="/swap" component={Swap} />
             <Route path="/account" component={SendTransaction}>
diff --git a/common/actions/generateWallet/actionCreators.ts b/common/actions/generateWallet/actionCreators.ts
deleted file mode 100644
index 88bf4c8edd8..00000000000
--- a/common/actions/generateWallet/actionCreators.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import { generate } from 'ethereumjs-wallet';
-import * as interfaces from './actionTypes';
-import { TypeKeys } from './constants';
-
-export type TGenerateNewWallet = typeof generateNewWallet;
-export function generateNewWallet(password: string): interfaces.GenerateNewWalletAction {
-  return {
-    type: TypeKeys.GENERATE_WALLET_GENERATE_WALLET,
-    wallet: generate(),
-    password
-  };
-}
-
-export type TContinueToPaper = typeof continueToPaper;
-export function continueToPaper(): interfaces.ContinueToPaperAction {
-  return { type: TypeKeys.GENERATE_WALLET_CONTINUE_TO_PAPER };
-}
-
-export type TResetGenerateWallet = typeof resetGenerateWallet;
-export function resetGenerateWallet(): interfaces.ResetGenerateWalletAction {
-  return { type: TypeKeys.GENERATE_WALLET_RESET };
-}
diff --git a/common/actions/generateWallet/actionTypes.ts b/common/actions/generateWallet/actionTypes.ts
deleted file mode 100644
index bfb811fd3c1..00000000000
--- a/common/actions/generateWallet/actionTypes.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import { IFullWallet } from 'ethereumjs-wallet';
-import { TypeKeys } from './constants';
-
-/*** Generate Wallet File ***/
-export interface GenerateNewWalletAction {
-  type: TypeKeys.GENERATE_WALLET_GENERATE_WALLET;
-  wallet: IFullWallet;
-  password: string;
-}
-
-/*** Reset Generate Wallet ***/
-export interface ResetGenerateWalletAction {
-  type: TypeKeys.GENERATE_WALLET_RESET;
-}
-
-/*** Confirm Continue To Paper ***/
-export interface ContinueToPaperAction {
-  type: TypeKeys.GENERATE_WALLET_CONTINUE_TO_PAPER;
-}
-
-/*** Action Union ***/
-export type GenerateWalletAction =
-  | GenerateNewWalletAction
-  | ContinueToPaperAction
-  | ResetGenerateWalletAction;
diff --git a/common/actions/generateWallet/constants.ts b/common/actions/generateWallet/constants.ts
deleted file mode 100644
index d872f337f63..00000000000
--- a/common/actions/generateWallet/constants.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export enum TypeKeys {
-  GENERATE_WALLET_GENERATE_WALLET = 'GENERATE_WALLET_GENERATE_WALLET',
-  GENERATE_WALLET_CONTINUE_TO_PAPER = 'GENERATE_WALLET_CONTINUE_TO_PAPER',
-  GENERATE_WALLET_RESET = 'GENERATE_WALLET_RESET'
-}
diff --git a/common/actions/generateWallet/index.ts b/common/actions/generateWallet/index.ts
deleted file mode 100644
index fee14683980..00000000000
--- a/common/actions/generateWallet/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export * from './constants';
-export * from './actionTypes';
-export * from './actionCreators';
diff --git a/common/assets/images/unlock-guide/provide-keystore.png b/common/assets/images/unlock-guide/provide-keystore.png
new file mode 100644
index 00000000000..50d73285695
Binary files /dev/null and b/common/assets/images/unlock-guide/provide-keystore.png differ
diff --git a/common/assets/images/unlock-guide/provide-mnemonic.png b/common/assets/images/unlock-guide/provide-mnemonic.png
new file mode 100644
index 00000000000..c86327e2db8
Binary files /dev/null and b/common/assets/images/unlock-guide/provide-mnemonic.png differ
diff --git a/common/assets/images/unlock-guide/select-keystore.png b/common/assets/images/unlock-guide/select-keystore.png
new file mode 100644
index 00000000000..66484f84e70
Binary files /dev/null and b/common/assets/images/unlock-guide/select-keystore.png differ
diff --git a/common/assets/images/unlock-guide/select-mnemonic.png b/common/assets/images/unlock-guide/select-mnemonic.png
new file mode 100644
index 00000000000..7ef09c08d2d
Binary files /dev/null and b/common/assets/images/unlock-guide/select-mnemonic.png differ
diff --git a/common/assets/images/unlock-guide/site.png b/common/assets/images/unlock-guide/site.png
new file mode 100644
index 00000000000..fc612020c0f
Binary files /dev/null and b/common/assets/images/unlock-guide/site.png differ
diff --git a/common/assets/images/unlock-guide/tab.png b/common/assets/images/unlock-guide/tab.png
new file mode 100644
index 00000000000..edbf0bf0a1b
Binary files /dev/null and b/common/assets/images/unlock-guide/tab.png differ
diff --git a/common/components/Header/components/Navigation.tsx b/common/components/Header/components/Navigation.tsx
index c90402f54a7..ce8b58e1d26 100644
--- a/common/components/Header/components/Navigation.tsx
+++ b/common/components/Header/components/Navigation.tsx
@@ -7,7 +7,7 @@ import './Navigation.scss';
 const tabs = [
   {
     name: 'NAV_GenerateWallet',
-    to: '/'
+    to: '/generate'
   },
 
   {
@@ -90,7 +90,7 @@ export default class Navigation extends Component<Props, State> {
         <div className="Navigation-scroll container">
           <ul className="Navigation-links">
             {tabs.map(link => {
-              return <NavigationLink key={link.name} link={link} />;
+              return <NavigationLink key={link.name} link={link} isHomepage={link === tabs[0]} />;
             })}
           </ul>
         </div>
diff --git a/common/components/Header/components/NavigationLink.tsx b/common/components/Header/components/NavigationLink.tsx
index c3d76b7e8b9..ecab5d6996e 100644
--- a/common/components/Header/components/NavigationLink.tsx
+++ b/common/components/Header/components/NavigationLink.tsx
@@ -10,16 +10,25 @@ interface Props extends RouteComponentProps<{}> {
     to?: string;
     external?: boolean;
   };
+  isHomepage: boolean;
 }
 
 class NavigationLink extends React.Component<Props, {}> {
   public render() {
-    const { link, location } = this.props;
+    const { link, location, isHomepage } = this.props;
+    // isActive if
+    // 1) Current path is the same as link
+    // 2) the first path is the same for both links (/account and /account/send)
+    // 3) we're at the root path and this is the "homepage" nav item
+    const isActive =
+      location.pathname === link.to ||
+      (link.to && location.pathname.split('/')[1] === link.to.split('/')[1]) ||
+      (isHomepage && location.pathname === '/');
 
     const linkClasses = classnames({
       'NavigationLink-link': true,
       'is-disabled': !link.to,
-      'is-active': location.pathname === link.to
+      'is-active': isActive
     });
     const linkLabel = `nav item: ${translateRaw(link.name)}`;
 
diff --git a/common/components/PrintableWallet/index.tsx b/common/components/PrintableWallet/index.tsx
index a689a2957bc..f22d811cf41 100644
--- a/common/components/PrintableWallet/index.tsx
+++ b/common/components/PrintableWallet/index.tsx
@@ -1,7 +1,7 @@
 import { PaperWallet } from 'components';
 import { IFullWallet } from 'ethereumjs-wallet';
 import React from 'react';
-import translate from 'translations';
+import { translateRaw } from 'translations';
 import printElement from 'utils/printElement';
 import { stripHexPrefix } from 'libs/values';
 
@@ -39,13 +39,13 @@ const PrintableWallet: React.SFC<{ wallet: IFullWallet }> = ({ wallet }) => {
       <PaperWallet address={address} privateKey={privateKey} />
       <a
         role="button"
-        aria-label={translate('x_Print')}
+        aria-label={translateRaw('x_Print')}
         aria-describedby="x_PrintDesc"
-        className={'btn btn-lg btn-primary'}
+        className="btn btn-lg btn-primary btn-block"
         onClick={print(address, privateKey)}
-        style={{ marginTop: 10 }}
+        style={{ margin: '10px auto 0', maxWidth: '260px' }}
       >
-        {translate('x_Print')}
+        {translateRaw('x_Print')}
       </a>
     </div>
   );
diff --git a/common/components/ui/NewTabLink.tsx b/common/components/ui/NewTabLink.tsx
index fa74a270e34..35fcf16520e 100644
--- a/common/components/ui/NewTabLink.tsx
+++ b/common/components/ui/NewTabLink.tsx
@@ -36,7 +36,7 @@ interface NewTabLinkProps extends AAttributes {
 
 const NewTabLink = ({ content, children, ...rest }: NewTabLinkProps) => (
   <a target="_blank" rel="noopener" {...rest}>
-    {content || children} {/* Keep content for short-hand text insertion */}
+    {content || children}
   </a>
 );
 
diff --git a/common/containers/Tabs/GenerateWallet/GenerateWallet.tsx b/common/containers/Tabs/GenerateWallet/GenerateWallet.tsx
new file mode 100644
index 00000000000..670ab2d6680
--- /dev/null
+++ b/common/containers/Tabs/GenerateWallet/GenerateWallet.tsx
@@ -0,0 +1,37 @@
+import React, { Component } from 'react';
+import Keystore from './components/Keystore';
+import Mnemonic from './components/Mnemonic';
+import WalletTypes from './components/WalletTypes';
+import CryptoWarning from './components/CryptoWarning';
+import TabSection from 'containers/TabSection';
+import { RouteComponentProps } from 'react-router-dom';
+
+export enum WalletType {
+  Keystore = 'keystore',
+  Mnemonic = 'mnemonic'
+}
+
+export default class GenerateWallet extends Component<RouteComponentProps<{}>> {
+  public render() {
+    const walletType = this.props.location.pathname.split('/')[2];
+    let content;
+
+    if (window.crypto) {
+      if (walletType === WalletType.Mnemonic) {
+        content = <Mnemonic />;
+      } else if (walletType === WalletType.Keystore) {
+        content = <Keystore />;
+      } else {
+        content = <WalletTypes />;
+      }
+    } else {
+      content = <CryptoWarning />;
+    }
+
+    return (
+      <TabSection>
+        <section className="Tab-content">{content}</section>
+      </TabSection>
+    );
+  }
+}
diff --git a/common/containers/Tabs/GenerateWallet/components/DownloadWallet.tsx b/common/containers/Tabs/GenerateWallet/components/DownloadWallet.tsx
deleted file mode 100644
index 3f725576f97..00000000000
--- a/common/containers/Tabs/GenerateWallet/components/DownloadWallet.tsx
+++ /dev/null
@@ -1,135 +0,0 @@
-import { ContinueToPaperAction } from 'actions/generateWallet';
-import { IFullWallet, IV3Wallet } from 'ethereumjs-wallet';
-import { toChecksumAddress } from 'ethereumjs-util';
-import { NewTabLink } from 'components/ui';
-import React, { Component } from 'react';
-import translate from 'translations';
-import { makeBlob } from 'utils/blob';
-import './DownloadWallet.scss';
-import Template from './Template';
-import { N_FACTOR, knowledgeBaseURL } from 'config/data';
-
-interface Props {
-  wallet: IFullWallet;
-  password: string;
-  continueToPaper(): ContinueToPaperAction;
-}
-
-interface State {
-  hasDownloadedWallet: boolean;
-  keystore: IV3Wallet | null;
-}
-
-export default class DownloadWallet extends Component<Props, State> {
-  public state: State = {
-    hasDownloadedWallet: false,
-    keystore: null
-  };
-
-  public componentWillMount() {
-    this.setWallet(this.props.wallet, this.props.password);
-  }
-
-  public componentWillUpdate(nextProps: Props) {
-    if (this.props.wallet !== nextProps.wallet) {
-      this.setWallet(nextProps.wallet, nextProps.password);
-    }
-  }
-
-  public render() {
-    const { hasDownloadedWallet } = this.state;
-    const filename = this.props.wallet.getV3Filename();
-
-    const content = (
-      <div className="DlWallet">
-        <h1 className="DlWallet-title">{translate('GEN_Label_2')}</h1>
-
-        <a
-          role="button"
-          className="DlWallet-download btn btn-primary btn-lg"
-          aria-label="Download Keystore File (UTC / JSON · Recommended · Encrypted)"
-          aria-describedby={translate('x_KeystoreDesc')}
-          download={filename}
-          href={this.getBlob()}
-          onClick={this.handleDownloadKeystore}
-        >
-          {translate('x_Download')} {translate('x_Keystore2')}
-        </a>
-
-        <div className="DlWallet-warning">
-          <p>
-            <strong>Do not lose it!</strong> It cannot be recovered if you lose it.
-          </p>
-          <p>
-            <strong>Do not share it!</strong> Your funds will be stolen if you use this file on a
-            malicious/phishing site.
-          </p>
-          <p>
-            <strong>Make a backup!</strong> Secure it like the millions of dollars it may one day be
-            worth.
-          </p>
-        </div>
-
-        <button
-          className="DlWallet-continue btn btn-danger"
-          role="button"
-          onClick={this.handleContinue}
-          disabled={!hasDownloadedWallet}
-        >
-          I understand. Continue.
-        </button>
-      </div>
-    );
-
-    const help = (
-      <div>
-        <h4>{translate('GEN_Help_8')}</h4>
-        <ul>
-          <li>{translate('GEN_Help_9')}</li>
-          <li> {translate('GEN_Help_10')}</li>
-          <input value={filename} className="form-control input-sm" disabled={true} />
-        </ul>
-
-        <h4>{translate('GEN_Help_11')}</h4>
-        <ul>
-          <li>{translate('GEN_Help_12')}</li>
-        </ul>
-
-        <h4>{translate('GEN_Help_4')}</h4>
-        <ul>
-          <li>
-            <NewTabLink href={`${knowledgeBaseURL}/getting-started/backing-up-your-new-wallet`}>
-              <strong>{translate('GEN_Help_13')}</strong>
-            </NewTabLink>
-          </li>
-          <li>
-            <NewTabLink
-              href={`${knowledgeBaseURL}/private-keys-passwords/difference-beween-private-key-and-keystore-file`}
-            >
-              <strong>{translate('GEN_Help_14')}</strong>
-            </NewTabLink>
-          </li>
-        </ul>
-      </div>
-    );
-
-    return <Template content={content} help={help} />;
-  }
-
-  public getBlob = () =>
-    (this.state.keystore && makeBlob('text/json;charset=UTF-8', this.state.keystore)) || undefined;
-
-  private markDownloaded = () =>
-    this.state.keystore && this.setState({ hasDownloadedWallet: true });
-
-  private handleContinue = () => this.state.hasDownloadedWallet && this.props.continueToPaper();
-
-  private setWallet(wallet: IFullWallet, password: string) {
-    const keystore = wallet.toV3(password, { n: N_FACTOR });
-    keystore.address = toChecksumAddress(keystore.address);
-    this.setState({ keystore });
-  }
-
-  private handleDownloadKeystore = (e: React.FormEvent<HTMLAnchorElement>) =>
-    this.state.keystore ? this.markDownloaded() : e.preventDefault();
-}
diff --git a/common/containers/Tabs/GenerateWallet/components/EnterPassword.tsx b/common/containers/Tabs/GenerateWallet/components/EnterPassword.tsx
deleted file mode 100644
index 821020d960c..00000000000
--- a/common/containers/Tabs/GenerateWallet/components/EnterPassword.tsx
+++ /dev/null
@@ -1,137 +0,0 @@
-import { GenerateNewWalletAction } from 'actions/generateWallet';
-import React, { Component } from 'react';
-import { Link } from 'react-router-dom';
-import translate from 'translations';
-import { knowledgeBaseURL, MINIMUM_PASSWORD_LENGTH } from 'config/data';
-import './EnterPassword.scss';
-import PasswordInput from './PasswordInput';
-import Template from './Template';
-
-interface Props {
-  generateNewWallet(pw: string): GenerateNewWalletAction;
-}
-
-interface State {
-  fileName: null | string;
-  blobURI: null | string;
-  password: string;
-  isPasswordValid: boolean;
-  isPasswordVisible: boolean;
-}
-export default class EnterPassword extends Component<Props, State> {
-  public state = {
-    fileName: null,
-    blobURI: null,
-    password: '',
-    isPasswordValid: false,
-    isPasswordVisible: false
-  };
-
-  public render() {
-    const { password, isPasswordValid, isPasswordVisible } = this.state;
-    const content = (
-      <div className="EnterPw">
-        <h1 className="EnterPw-title" aria-live="polite">
-          {translate('NAV_GenerateWallet')}
-        </h1>
-
-        <label className="EnterPw-password">
-          <h4 className="EnterPw-password-label">{translate('GEN_Label_1')}</h4>
-          <PasswordInput
-            password={password}
-            onPasswordChange={this.onPasswordChange}
-            isPasswordVisible={isPasswordVisible}
-            togglePassword={this.togglePassword}
-            isPasswordValid={isPasswordValid}
-          />
-        </label>
-
-        <button
-          onClick={this.onClickGenerateFile}
-          disabled={!isPasswordValid}
-          className="EnterPw-submit btn btn-primary btn-block"
-        >
-          {translate('NAV_GenerateWallet')}
-        </button>
-
-        <p className="EnterPw-warning">{translate('x_PasswordDesc')}</p>
-      </div>
-    );
-
-    const help = (
-      <div>
-        <h4>Ledger / TREZOR:</h4>
-        <ul>
-          <li>
-            <span>{translate('GEN_Help_1')}</span>
-            <Link to="/send-transaction"> Ledger or TREZOR or Digital Bitbox</Link>
-            <span> {translate('GEN_Help_2')}</span>
-            <span> {translate('GEN_Help_3')}</span>
-          </li>
-        </ul>
-
-        <h4>Jaxx / Metamask:</h4>
-        <ul>
-          <li>
-            <span>{translate('GEN_Help_1')}</span>
-            <Link to="/send-transaction"> {translate('x_Mnemonic')}</Link>
-            <span> {translate('GEN_Help_2')}</span>
-          </li>
-        </ul>
-
-        <h4>Mist / Geth / Parity:</h4>
-        <ul>
-          <li>
-            <span>{translate('GEN_Help_1')}</span>
-            <Link to="/send-transaction"> {translate('x_Keystore2')}</Link>
-            <span> {translate('GEN_Help_2')}</span>
-          </li>
-        </ul>
-
-        <h4>Guides & FAQ</h4>
-        <ul>
-          <li>
-            <strong>
-              <a
-                href={`${knowledgeBaseURL}/getting-started/creating-a-new-wallet-on-myetherwallet`}
-                target="_blank"
-                rel="noopener"
-              >
-                {translate('GEN_Help_5')}
-              </a>
-            </strong>
-          </li>
-          <li>
-            <strong>
-              <a
-                href={`${knowledgeBaseURL}/getting-started/getting-started-new`}
-                target="_blank"
-                rel="noopener"
-              >
-                {translate('GEN_Help_6')}
-              </a>
-            </strong>
-          </li>
-        </ul>
-      </div>
-    );
-
-    return <Template content={content} help={help} />;
-  }
-  private onClickGenerateFile = () => {
-    this.props.generateNewWallet(this.state.password);
-    this.setState({ password: '' });
-  };
-
-  private togglePassword = () => {
-    this.setState({ isPasswordVisible: !this.state.isPasswordVisible });
-  };
-
-  private onPasswordChange = (e: any) => {
-    const password = e.target.value;
-    this.setState({
-      isPasswordValid: password.length >= MINIMUM_PASSWORD_LENGTH,
-      password
-    });
-  };
-}
diff --git a/common/containers/Tabs/GenerateWallet/components/FinalSteps.scss b/common/containers/Tabs/GenerateWallet/components/FinalSteps.scss
new file mode 100644
index 00000000000..1f11c0692f1
--- /dev/null
+++ b/common/containers/Tabs/GenerateWallet/components/FinalSteps.scss
@@ -0,0 +1,76 @@
+@import 'common/sass/variables';
+@import 'common/sass/mixins';
+
+$step-number-size: 42px;
+
+.FinalSteps {
+  &-help {
+    margin-bottom: $space;
+  }
+
+  &-steps {
+    margin-bottom: $space;
+  }
+
+  &-buttons {
+    &-btn {
+      width: 100%;
+      max-width: 320px;
+    }
+  }
+}
+
+.StepBox {
+  &:first-child {
+    margin-left: 0;
+  }
+
+  &:last-child {
+    margin-right: 0;
+  }
+
+  &-title {
+    margin-bottom: $space-md;
+    @include ellipsis;
+  }
+
+  &-screen {
+    position: relative;
+    width: 100%;
+    max-width: 340px;
+    margin: 0 auto $space * 2;
+
+    // Keeps box height at a .8 ratio to width
+    &:after {
+      content: '';
+      display: block;
+      padding-top: 75%;
+    }
+
+    &-img {
+      position: absolute;
+      width: 100%;
+      top: 0;
+      left: 0;
+      bottom: 0;
+      background: #EEE;
+      border-radius: 4px;
+      box-shadow: 0 1px 3px rgba(#000, 0.3);
+    }
+
+    &-number {
+      position: absolute;
+      bottom: -10px;
+      right: -10px;
+      width: $step-number-size;
+      height: $step-number-size;
+      line-height: $step-number-size;
+      font-size: 22px;
+      color: #FFF;
+      text-align: center;
+      background: $ether-navy;
+      box-shadow: 0 1px 2px rgba(#000, .3);
+      border-radius: 100%;
+    }
+  }
+}
diff --git a/common/containers/Tabs/GenerateWallet/components/FinalSteps.tsx b/common/containers/Tabs/GenerateWallet/components/FinalSteps.tsx
new file mode 100644
index 00000000000..d985e796cd4
--- /dev/null
+++ b/common/containers/Tabs/GenerateWallet/components/FinalSteps.tsx
@@ -0,0 +1,76 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import translate from 'translations';
+import { WalletType } from '../GenerateWallet';
+import SiteImage from 'assets/images/unlock-guide/site.png';
+import TabImage from 'assets/images/unlock-guide/tab.png';
+import SelectKeystoreImage from 'assets/images/unlock-guide/select-keystore.png';
+import ProvideKeystoreImage from 'assets/images/unlock-guide/provide-keystore.png';
+import SelectMnemonicImage from 'assets/images/unlock-guide/select-mnemonic.png';
+import ProvideMnemonicImage from 'assets/images/unlock-guide/provide-mnemonic.png';
+import './FinalSteps.scss';
+
+interface Props {
+  walletType: WalletType;
+}
+
+const FinalSteps: React.SFC<Props> = ({ walletType }) => {
+  const steps = [
+    {
+      name: 'Open MyEtherWallet',
+      image: SiteImage
+    },
+    {
+      name: 'Go to the account tab',
+      image: TabImage
+    }
+  ];
+
+  if (walletType === WalletType.Keystore) {
+    steps.push({
+      name: 'Select your wallet type',
+      image: SelectKeystoreImage
+    });
+    steps.push({
+      name: 'Provide file & password',
+      image: ProvideKeystoreImage
+    });
+  } else if (walletType === WalletType.Mnemonic) {
+    steps.push({
+      name: 'Select your wallet type',
+      image: SelectMnemonicImage
+    });
+    steps.push({
+      name: 'Enter your phrase',
+      image: ProvideMnemonicImage
+    });
+  }
+
+  return (
+    <div className="FinalSteps">
+      <h1 className="FinalSteps-title">{translate('ADD_Label_6')}</h1>
+      <p className="FinalSteps-help">
+        All done, you’re now ready to access your wallet. Just follow these 4 steps whenever you
+        want to access your wallet.
+      </p>
+      <div className="FinalSteps-steps row">
+        {steps.map((step, index) => (
+          <div key={step.name} className="StepBox col-lg-3 col-sm-6 col-xs-12">
+            <h4 className="StepBox-title">{step.name}</h4>
+            <div className="StepBox-screen">
+              <img className="StepBox-screen-img" src={step.image} />
+              <div className="StepBox-screen-number">{index + 1}</div>
+            </div>
+          </div>
+        ))}
+      </div>
+      <div className="FinalSteps-buttons">
+        <Link to="/account" className="FinalSteps-buttons-btn btn btn-primary btn-lg">
+          Go to Account
+        </Link>
+      </div>
+    </div>
+  );
+};
+
+export default FinalSteps;
diff --git a/common/containers/Tabs/GenerateWallet/components/DownloadWallet.scss b/common/containers/Tabs/GenerateWallet/components/Keystore/DownloadWallet.scss
similarity index 100%
rename from common/containers/Tabs/GenerateWallet/components/DownloadWallet.scss
rename to common/containers/Tabs/GenerateWallet/components/Keystore/DownloadWallet.scss
diff --git a/common/containers/Tabs/GenerateWallet/components/Keystore/DownloadWallet.tsx b/common/containers/Tabs/GenerateWallet/components/Keystore/DownloadWallet.tsx
new file mode 100644
index 00000000000..8a88e57271d
--- /dev/null
+++ b/common/containers/Tabs/GenerateWallet/components/Keystore/DownloadWallet.tsx
@@ -0,0 +1,101 @@
+import { IFullWallet, IV3Wallet } from 'ethereumjs-wallet';
+import { toChecksumAddress } from 'ethereumjs-util';
+import React, { Component } from 'react';
+import translate from 'translations';
+import { makeBlob } from 'utils/blob';
+import './DownloadWallet.scss';
+import Template from '../Template';
+import { N_FACTOR } from 'config/data';
+
+interface Props {
+  wallet: IFullWallet;
+  password: string;
+  continue(): void;
+}
+
+interface State {
+  hasDownloadedWallet: boolean;
+  keystore: IV3Wallet | null;
+}
+
+export default class DownloadWallet extends Component<Props, State> {
+  public state: State = {
+    hasDownloadedWallet: false,
+    keystore: null
+  };
+
+  public componentWillMount() {
+    this.setWallet(this.props.wallet, this.props.password);
+  }
+
+  public componentWillUpdate(nextProps: Props) {
+    if (this.props.wallet !== nextProps.wallet) {
+      this.setWallet(nextProps.wallet, nextProps.password);
+    }
+  }
+
+  public render() {
+    const { hasDownloadedWallet } = this.state;
+    const filename = this.props.wallet.getV3Filename();
+
+    return (
+      <Template>
+        <div className="DlWallet">
+          <h1 className="DlWallet-title">{translate('GEN_Label_2')}</h1>
+
+          <a
+            role="button"
+            className="DlWallet-download btn btn-primary btn-lg"
+            aria-label="Download Keystore File (UTC / JSON · Recommended · Encrypted)"
+            aria-describedby={translate('x_KeystoreDesc')}
+            download={filename}
+            href={this.getBlob()}
+            onClick={this.handleDownloadKeystore}
+          >
+            {translate('x_Download')} {translate('x_Keystore2')}
+          </a>
+
+          <div className="DlWallet-warning">
+            <p>
+              <strong>Do not lose it!</strong> It cannot be recovered if you lose it.
+            </p>
+            <p>
+              <strong>Do not share it!</strong> Your funds will be stolen if you use this file on a
+              malicious/phishing site.
+            </p>
+            <p>
+              <strong>Make a backup!</strong> Secure it like the millions of dollars it may one day
+              be worth.
+            </p>
+          </div>
+
+          <button
+            className="DlWallet-continue btn btn-danger"
+            role="button"
+            onClick={this.handleContinue}
+            disabled={!hasDownloadedWallet}
+          >
+            I understand. Continue.
+          </button>
+        </div>
+      </Template>
+    );
+  }
+
+  public getBlob = () =>
+    (this.state.keystore && makeBlob('text/json;charset=UTF-8', this.state.keystore)) || undefined;
+
+  private markDownloaded = () =>
+    this.state.keystore && this.setState({ hasDownloadedWallet: true });
+
+  private handleContinue = () => this.state.hasDownloadedWallet && this.props.continue();
+
+  private setWallet(wallet: IFullWallet, password: string) {
+    const keystore = wallet.toV3(password, { n: N_FACTOR });
+    keystore.address = toChecksumAddress(keystore.address);
+    this.setState({ keystore });
+  }
+
+  private handleDownloadKeystore = (e: React.FormEvent<HTMLAnchorElement>) =>
+    this.state.keystore ? this.markDownloaded() : e.preventDefault();
+}
diff --git a/common/containers/Tabs/GenerateWallet/components/EnterPassword.scss b/common/containers/Tabs/GenerateWallet/components/Keystore/EnterPassword.scss
similarity index 100%
rename from common/containers/Tabs/GenerateWallet/components/EnterPassword.scss
rename to common/containers/Tabs/GenerateWallet/components/Keystore/EnterPassword.scss
diff --git a/common/containers/Tabs/GenerateWallet/components/Keystore/EnterPassword.tsx b/common/containers/Tabs/GenerateWallet/components/Keystore/EnterPassword.tsx
new file mode 100644
index 00000000000..dc485212254
--- /dev/null
+++ b/common/containers/Tabs/GenerateWallet/components/Keystore/EnterPassword.tsx
@@ -0,0 +1,73 @@
+import React, { Component } from 'react';
+import translate from 'translations';
+import { MINIMUM_PASSWORD_LENGTH } from 'config/data';
+import './EnterPassword.scss';
+import PasswordInput from './PasswordInput';
+import Template from '../Template';
+
+interface Props {
+  continue(pw: string): void;
+}
+
+interface State {
+  password: string;
+  isPasswordValid: boolean;
+  isPasswordVisible: boolean;
+}
+export default class EnterPassword extends Component<Props, State> {
+  public state = {
+    password: '',
+    isPasswordValid: false,
+    isPasswordVisible: false
+  };
+
+  public render() {
+    const { password, isPasswordValid, isPasswordVisible } = this.state;
+
+    return (
+      <Template>
+        <div className="EnterPw">
+          <h1 className="EnterPw-title" aria-live="polite">
+            Generate a {translate('x_Keystore2')}
+          </h1>
+
+          <label className="EnterPw-password">
+            <h4 className="EnterPw-password-label">{translate('GEN_Label_1')}</h4>
+            <PasswordInput
+              password={password}
+              onPasswordChange={this.onPasswordChange}
+              isPasswordVisible={isPasswordVisible}
+              togglePassword={this.togglePassword}
+              isPasswordValid={isPasswordValid}
+            />
+          </label>
+
+          <button
+            onClick={this.onClickGenerateFile}
+            disabled={!isPasswordValid}
+            className="EnterPw-submit btn btn-primary btn-block"
+          >
+            {translate('NAV_GenerateWallet')}
+          </button>
+
+          <p className="EnterPw-warning">{translate('x_PasswordDesc')}</p>
+        </div>
+      </Template>
+    );
+  }
+  private onClickGenerateFile = () => {
+    this.props.continue(this.state.password);
+  };
+
+  private togglePassword = () => {
+    this.setState({ isPasswordVisible: !this.state.isPasswordVisible });
+  };
+
+  private onPasswordChange = (e: any) => {
+    const password = e.target.value;
+    this.setState({
+      isPasswordValid: password.length >= MINIMUM_PASSWORD_LENGTH,
+      password
+    });
+  };
+}
diff --git a/common/containers/Tabs/GenerateWallet/components/Keystore/Keystore.tsx b/common/containers/Tabs/GenerateWallet/components/Keystore/Keystore.tsx
new file mode 100644
index 00000000000..6812754a607
--- /dev/null
+++ b/common/containers/Tabs/GenerateWallet/components/Keystore/Keystore.tsx
@@ -0,0 +1,83 @@
+import { generate, IFullWallet } from 'ethereumjs-wallet';
+import React, { Component } from 'react';
+import { WalletType } from '../../GenerateWallet';
+import Template from '../Template';
+import DownloadWallet from './DownloadWallet';
+import EnterPassword from './EnterPassword';
+import PaperWallet from './PaperWallet';
+import FinalSteps from '../FinalSteps';
+
+export enum Steps {
+  Password = 'password',
+  Download = 'download',
+  Paper = 'paper',
+  Final = 'final'
+}
+
+interface State {
+  activeStep: Steps;
+  password: string;
+  wallet: IFullWallet | null | undefined;
+}
+
+export default class GenerateKeystore extends Component<{}, State> {
+  public state: State = {
+    activeStep: Steps.Password,
+    password: '',
+    wallet: null
+  };
+
+  public render() {
+    const { activeStep, wallet, password } = this.state;
+    let content;
+
+    switch (activeStep) {
+      case Steps.Password:
+        content = <EnterPassword continue={this.generateWalletAndContinue} />;
+        break;
+
+      case Steps.Download:
+        if (wallet) {
+          content = (
+            <DownloadWallet wallet={wallet} password={password} continue={this.continueToPaper} />
+          );
+        }
+        break;
+
+      case Steps.Paper:
+        if (wallet) {
+          content = <PaperWallet wallet={wallet} continue={this.continueToFinal} />;
+        }
+        break;
+
+      case Steps.Final:
+        content = (
+          <Template>
+            <FinalSteps walletType={WalletType.Keystore} />
+          </Template>
+        );
+        break;
+
+      default:
+        content = <h1>Uh oh. Not sure how you got here.</h1>;
+    }
+
+    return content;
+  }
+
+  private generateWalletAndContinue = (password: string) => {
+    this.setState({
+      password,
+      activeStep: Steps.Download,
+      wallet: generate()
+    });
+  };
+
+  private continueToPaper = () => {
+    this.setState({ activeStep: Steps.Paper });
+  };
+
+  private continueToFinal = () => {
+    this.setState({ activeStep: Steps.Final });
+  };
+}
diff --git a/common/containers/Tabs/GenerateWallet/components/PaperWallet.scss b/common/containers/Tabs/GenerateWallet/components/Keystore/PaperWallet.scss
similarity index 76%
rename from common/containers/Tabs/GenerateWallet/components/PaperWallet.scss
rename to common/containers/Tabs/GenerateWallet/components/Keystore/PaperWallet.scss
index 802526493f5..7372a557d79 100644
--- a/common/containers/Tabs/GenerateWallet/components/PaperWallet.scss
+++ b/common/containers/Tabs/GenerateWallet/components/Keystore/PaperWallet.scss
@@ -6,7 +6,8 @@
   }
 
   &-private {
-    margin-bottom: $space * 3;
+    max-width: 700px;
+    margin: 0 auto $space * 3;
   }
 
   &-paper,
diff --git a/common/containers/Tabs/GenerateWallet/components/Keystore/PaperWallet.tsx b/common/containers/Tabs/GenerateWallet/components/Keystore/PaperWallet.tsx
new file mode 100644
index 00000000000..440f0430556
--- /dev/null
+++ b/common/containers/Tabs/GenerateWallet/components/Keystore/PaperWallet.tsx
@@ -0,0 +1,57 @@
+import PrintableWallet from 'components/PrintableWallet';
+import { IFullWallet } from 'ethereumjs-wallet';
+import React from 'react';
+import translate from 'translations';
+import { stripHexPrefix } from 'libs/values';
+import './PaperWallet.scss';
+import Template from '../Template';
+
+interface Props {
+  wallet: IFullWallet;
+  continue(): void;
+}
+
+const PaperWallet: React.SFC<Props> = props => (
+  <Template>
+    <div className="GenPaper">
+      {/* Private Key */}
+      <h1 className="GenPaper-title">{translate('GEN_Label_5')}</h1>
+      <input
+        className="GenPaper-private form-control"
+        value={stripHexPrefix(props.wallet.getPrivateKeyString())}
+        aria-label={translate('x_PrivKey')}
+        aria-describedby="x_PrivKeyDesc"
+        type="text"
+        readOnly={true}
+      />
+
+      {/* Download Paper Wallet */}
+      <h1 className="GenPaper-title">{translate('x_Print')}</h1>
+      <div className="GenPaper-paper">
+        <PrintableWallet wallet={props.wallet} />
+      </div>
+
+      {/* Warning */}
+      <div className="GenPaper-warning">
+        <p>
+          <strong>Do not lose it!</strong> It cannot be recovered if you lose it.
+        </p>
+        <p>
+          <strong>Do not share it!</strong> Your funds will be stolen if you use this file on a
+          malicious/phishing site.
+        </p>
+        <p>
+          <strong>Make a backup!</strong> Secure it like the millions of dollars it may one day be
+          worth.
+        </p>
+      </div>
+
+      {/* Continue button */}
+      <button className="GenPaper-continue btn btn-default" onClick={props.continue}>
+        {translate('NAV_ViewWallet')} →
+      </button>
+    </div>
+  </Template>
+);
+
+export default PaperWallet;
diff --git a/common/containers/Tabs/GenerateWallet/components/PasswordInput.tsx b/common/containers/Tabs/GenerateWallet/components/Keystore/PasswordInput.tsx
similarity index 100%
rename from common/containers/Tabs/GenerateWallet/components/PasswordInput.tsx
rename to common/containers/Tabs/GenerateWallet/components/Keystore/PasswordInput.tsx
diff --git a/common/containers/Tabs/GenerateWallet/components/Keystore/index.tsx b/common/containers/Tabs/GenerateWallet/components/Keystore/index.tsx
new file mode 100644
index 00000000000..b41be963e75
--- /dev/null
+++ b/common/containers/Tabs/GenerateWallet/components/Keystore/index.tsx
@@ -0,0 +1,2 @@
+import Keystore from './Keystore';
+export default Keystore;
diff --git a/common/containers/Tabs/GenerateWallet/components/Mnemonic/Mnemonic.scss b/common/containers/Tabs/GenerateWallet/components/Mnemonic/Mnemonic.scss
new file mode 100644
index 00000000000..8628680bf26
--- /dev/null
+++ b/common/containers/Tabs/GenerateWallet/components/Mnemonic/Mnemonic.scss
@@ -0,0 +1,41 @@
+@import 'common/sass/variables';
+
+.GenerateMnemonic {
+  position: relative;
+  text-align: center;
+
+  &-title {
+    margin-bottom: $space-md;
+  }
+
+  &-help {
+    margin-bottom: $space * 2;
+  }
+
+  &-words {
+    display: flex;
+    margin: 0 auto $space;
+    justify-content: center;
+    flex-wrap: wrap;
+
+    &-column {
+      max-width: 320px;
+      margin: 0 $space-md $space-md;
+    }
+  }
+
+  &-buttons {
+    &-btn {
+      margin: 0 5px;
+      width: 100%;
+      max-width: 260px;
+    }
+  }
+
+  &-skip {
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    opacity: 0;
+  }
+}
diff --git a/common/containers/Tabs/GenerateWallet/components/Mnemonic/Mnemonic.tsx b/common/containers/Tabs/GenerateWallet/components/Mnemonic/Mnemonic.tsx
new file mode 100644
index 00000000000..1bf6928acdb
--- /dev/null
+++ b/common/containers/Tabs/GenerateWallet/components/Mnemonic/Mnemonic.tsx
@@ -0,0 +1,153 @@
+import React from 'react';
+import { generateMnemonic } from 'bip39';
+import translate from 'translations';
+import Word from './Word';
+import FinalSteps from '../FinalSteps';
+import Template from '../Template';
+import { WalletType } from '../../GenerateWallet';
+import './Mnemonic.scss';
+
+interface State {
+  words: string[];
+  confirmValues: string[];
+  isConfirming: boolean;
+  isConfirmed: boolean;
+}
+
+interface WordTuple {
+  word: string;
+  index: number;
+}
+
+export default class GenerateMnemonic extends React.Component<{}, State> {
+  public state: State = {
+    words: [],
+    confirmValues: [],
+    isConfirming: false,
+    isConfirmed: false
+  };
+
+  public componentDidMount() {
+    this.regenerateWordArray();
+  }
+
+  public render() {
+    const { words, isConfirming, isConfirmed } = this.state;
+    let content;
+
+    if (isConfirmed) {
+      content = <FinalSteps walletType={WalletType.Mnemonic} />;
+    } else {
+      const canContinue = this.checkCanContinue();
+      const firstHalf: WordTuple[] = [];
+      const lastHalf: WordTuple[] = [];
+      words.forEach((word, index) => {
+        if (index < words.length / 2) {
+          firstHalf.push({ word, index });
+        } else {
+          lastHalf.push({ word, index });
+        }
+      });
+
+      content = (
+        <div className="GenerateMnemonic">
+          <h1 className="GenerateMnemonic-title">Generate a {translate('x_Mnemonic')}</h1>
+
+          <p className="GenerateMnemonic-help">
+            {isConfirming
+              ? `
+              Re-enter your phrase to confirm you copied it correctly. If you
+              forgot one of your words, just click the button beside the input
+              to reveal it.
+            `
+              : `
+              Write these words down. Do not copy them to your clipboard, or save
+              them anywhere online.
+            `}
+          </p>
+
+          <div className="GenerateMnemonic-words">
+            {[firstHalf, lastHalf].map((ws, i) => (
+              <div key={i} className="GenerateMnemonic-words-column">
+                {ws.map(this.makeWord)}
+              </div>
+            ))}
+          </div>
+
+          <div className="GenerateMnemonic-buttons">
+            {!isConfirming && (
+              <button
+                className="GenerateMnemonic-buttons-btn btn btn-default"
+                onClick={this.regenerateWordArray}
+              >
+                <i className="fa fa-refresh" /> Regenerate Phrase
+              </button>
+            )}
+            <button
+              className="GenerateMnemonic-buttons-btn btn btn-primary"
+              disabled={!canContinue}
+              onClick={this.goToNextStep}
+            >
+              Confirm Phrase
+            </button>
+          </div>
+
+          <button className="GenerateMnemonic-skip" onClick={this.skip} />
+        </div>
+      );
+    }
+
+    return <Template>{content}</Template>;
+  }
+
+  private regenerateWordArray = () => {
+    this.setState({ words: generateMnemonic().split(' ') });
+  };
+
+  private handleConfirmChange = (index: number, value: string) => {
+    this.setState((state: State) => {
+      const confirmValues = [...state.confirmValues];
+      confirmValues[index] = value;
+      this.setState({ confirmValues });
+    });
+  };
+
+  private goToNextStep = () => {
+    if (!this.checkCanContinue()) {
+      return;
+    }
+
+    if (this.state.isConfirming) {
+      this.setState({ isConfirmed: true });
+    } else {
+      this.setState({ isConfirming: true });
+    }
+  };
+
+  private checkCanContinue = () => {
+    const { isConfirming, words, confirmValues } = this.state;
+
+    if (isConfirming) {
+      return words.reduce((prev, word, index) => {
+        return word === confirmValues[index] && prev;
+      }, true);
+    } else {
+      return !!words.length;
+    }
+  };
+
+  private makeWord = (word: WordTuple) => (
+    <Word
+      key={`${word.word}${word.index}`}
+      index={word.index}
+      word={word.word}
+      value={this.state.confirmValues[word.index] || ''}
+      isReadOnly={!this.state.isConfirming}
+      onChange={this.handleConfirmChange}
+    />
+  );
+
+  private skip = () => {
+    this.setState({ isConfirmed: true });
+  };
+}
diff --git a/common/containers/Tabs/GenerateWallet/components/Mnemonic/Word.scss b/common/containers/Tabs/GenerateWallet/components/Mnemonic/Word.scss
new file mode 100644
index 00000000000..63c38c4345b
--- /dev/null
+++ b/common/containers/Tabs/GenerateWallet/components/Mnemonic/Word.scss
@@ -0,0 +1,61 @@
+@import 'common/sass/variables';
+
+$width: 320px;
+$number-width: 40px;
+$number-margin: 6px;
+
+@keyframes word-fade {
+  0% {
+    color: rgba($text-color, 0);
+  }
+  100% {
+    color: rgba($text-color, 1);
+  }
+}
+
+.MnemonicWord {
+  display: flex;
+  width: $width;
+  margin-bottom: $space-md;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+
+  &-number {
+    display: inline-block;
+    width: $number-width;
+    margin-right: $number-margin;
+    text-align: right;
+    font-size: 26px;
+    font-weight: 100;
+    line-height: 40px;
+    vertical-align: bottom;
+  }
+
+  &-word {
+    width: $width - $number-width - $number-margin;
+
+    &-input {
+      animation: word-fade 400ms ease 1;
+      animation-fill-mode: both;
+    }
+
+    &-toggle {
+      color: $gray-light;
+
+      &:hover {
+        color: $gray;
+      }
+    }
+  }
+
+  // Fade-in animation
+  @for $i from 1 to 12 {
+    &:nth-child(#{$i}) {
+      .MnemonicWord-word-input {
+        animation-delay: $i * 50ms;
+      }
+    }
+  }
+}
diff --git a/common/containers/Tabs/GenerateWallet/components/Mnemonic/Word.tsx b/common/containers/Tabs/GenerateWallet/components/Mnemonic/Word.tsx
new file mode 100644
index 00000000000..6c564bc8b9d
--- /dev/null
+++ b/common/containers/Tabs/GenerateWallet/components/Mnemonic/Word.tsx
@@ -0,0 +1,70 @@
+import React from 'react';
+import classnames from 'classnames';
+import { translateRaw } from 'translations';
+import './Word.scss';
+
+interface Props {
+  index: number;
+  word: string;
+  value: string;
+  isReadOnly: boolean;
+  onChange(index: number, value: string): void;
+}
+
+interface State {
+  isShowingWord: boolean;
+}
+
+export default class MnemonicWord extends React.Component<Props, State> {
+  public state = {
+    isShowingWord: false
+  };
+
+  public render() {
+    const { index, word, value, isReadOnly } = this.props;
+    const { isShowingWord } = this.state;
+    const readOnly = isReadOnly || isShowingWord;
+
+    return (
+      <div className="MnemonicWord">
+        <span className="MnemonicWord-number">{index + 1}.</span>
+        <div className="MnemonicWord-word input-group">
+          <input
+            className={classnames(
+              'MnemonicWord-word-input',
+              'form-control',
+              word === value && 'is-valid'
+            )}
+            value={readOnly ? word : value}
+            onChange={this.handleChange}
+            readOnly={readOnly}
+          />
+          {!isReadOnly && (
+            <span
+              onClick={this.toggleShow}
+              aria-label={translateRaw('GEN_Aria_2')}
+              role="button"
+              className="MnemonicWord-word-toggle input-group-addon"
+            >
+              <i
+                className={classnames(
+                  'fa',
+                  isShowingWord && 'fa-eye-slash',
+                  !isShowingWord && 'fa-eye'
+                )}
+              />
+            </span>
+          )}
+        </div>
+      </div>
+    );
+  }
+
+  private handleChange = (ev: React.FormEvent<HTMLInputElement>) => {
+    this.props.onChange(this.props.index, ev.currentTarget.value);
+  };
+
+  private toggleShow = () => {
+    this.setState({ isShowingWord: !this.state.isShowingWord });
+  };
+}
diff --git a/common/containers/Tabs/GenerateWallet/components/Mnemonic/index.tsx b/common/containers/Tabs/GenerateWallet/components/Mnemonic/index.tsx
new file mode 100644
index 00000000000..6f007cdd5ee
--- /dev/null
+++ b/common/containers/Tabs/GenerateWallet/components/Mnemonic/index.tsx
@@ -0,0 +1,2 @@
+import Mnemonic from './Mnemonic';
+export default Mnemonic;
diff --git a/common/containers/Tabs/GenerateWallet/components/PaperWallet.tsx b/common/containers/Tabs/GenerateWallet/components/PaperWallet.tsx
deleted file mode 100644
index c7784e4d68d..00000000000
--- a/common/containers/Tabs/GenerateWallet/components/PaperWallet.tsx
+++ /dev/null
@@ -1,95 +0,0 @@
-import PrintableWallet from 'components/PrintableWallet';
-import { IFullWallet } from 'ethereumjs-wallet';
-import { NewTabLink } from 'components/ui';
-import React from 'react';
-import { Link } from 'react-router-dom';
-import translate from 'translations';
-import { stripHexPrefix } from 'libs/values';
-import './PaperWallet.scss';
-import Template from './Template';
-import { knowledgeBaseURL } from 'config/data';
-
-const content = (wallet: IFullWallet) => (
-  <div className="GenPaper">
-    {/* Private Key */}
-    <h1 className="GenPaper-title">{translate('GEN_Label_5')}</h1>
-    <input
-      className="GenPaper-private form-control"
-      value={stripHexPrefix(wallet.getPrivateKeyString())}
-      aria-label={translate('x_PrivKey')}
-      aria-describedby="x_PrivKeyDesc"
-      type="text"
-      readOnly={true}
-    />
-
-    {/* Download Paper Wallet */}
-    <h1 className="GenPaper-title">{translate('x_Print')}</h1>
-    <div className="GenPaper-paper">
-      <PrintableWallet wallet={wallet} />
-    </div>
-
-    {/* Warning */}
-    <div className="GenPaper-warning">
-      <p>
-        <strong>Do not lose it!</strong> It cannot be recovered if you lose it.
-      </p>
-      <p>
-        <strong>Do not share it!</strong> Your funds will be stolen if you use this file on a
-        malicious/phishing site.
-      </p>
-      <p>
-        <strong>Make a backup!</strong> Secure it like the millions of dollars it may one day be
-        worth.
-      </p>
-    </div>
-
-    {/* Continue button */}
-    <Link className="GenPaper-continue btn btn-default" to="/view-wallet">
-      {translate('NAV_ViewWallet')} →
-    </Link>
-  </div>
-);
-
-const help = (
-  <div>
-    <h4>{translate('GEN_Help_4')}</h4>
-    <ul>
-      <li>
-        <NewTabLink href={`${knowledgeBaseURL}/getting-started/backing-up-your-new-wallet`}>
-          <strong>{translate('HELP_2a_Title')}</strong>
-        </NewTabLink>
-      </li>
-      <li>
-        <NewTabLink href={`${knowledgeBaseURL}/security/securing-your-ethereum`}>
-          <strong>{translate('GEN_Help_15')}</strong>
-        </NewTabLink>
-      </li>
-      <li>
-        <NewTabLink
-          href={`${knowledgeBaseURL}/private-keys-passwords/difference-beween-private-key-and-keystore-file`}
-        >
-          <strong>{translate('GEN_Help_16')}</strong>
-        </NewTabLink>
-      </li>
-    </ul>
-
-    <h4>{translate('GEN_Help_17')}</h4>
-    <ul>
-      <li>{translate('GEN_Help_18')}</li>
-      <li>{translate('GEN_Help_19')}</li>
-      <li>
-        <NewTabLink href={`${knowledgeBaseURL}/offline/ethereum-cold-storage-with-myetherwallet`}>
-          {translate('GEN_Help_20')}
-        </NewTabLink>
-      </li>
-    </ul>
-
-    <h4>{translate('x_PrintDesc')}</h4>
-  </div>
-);
-
-const PaperWallet: React.SFC<{
-  wallet: IFullWallet;
-}> = ({ wallet }) => <Template content={content(wallet)} help={help} />;
-
-export default PaperWallet;
diff --git a/common/containers/Tabs/GenerateWallet/components/Template.scss b/common/containers/Tabs/GenerateWallet/components/Template.scss
index 5e1eb07a08b..ff44f5bc68c 100644
--- a/common/containers/Tabs/GenerateWallet/components/Template.scss
+++ b/common/containers/Tabs/GenerateWallet/components/Template.scss
@@ -1,26 +1,38 @@
-@import "common/sass/variables";
+@import 'common/sass/variables';
+@import 'common/sass/mixins';
 
 .GenerateWallet {
-  &-column {
-    &-content {
-      text-align: center;
+  position: relative;
+  text-align: center;
+
+  h1 {
+    margin-top: 0;
+  }
+
+  &-back {
+    position: absolute;
+    top: 36px;
+    left: 30px;
+    opacity: 0.3;
+    outline: none;
+    color: $text-color;
+
+    @media (max-width: $screen-sm) {
+      display: none;
     }
 
-    &-help {
-      background-image: url('~assets/images/icon-help-2.svg');
-      background-size: 8rem;
-      background-position: 102% -5%;
-      background-repeat: no-repeat;
+    .fa {
+      margin-right: 5px;
+    }
 
-      h4 {
-        margin: 0 0 $space-sm;
-        font-weight: 400;
-      }
+    &:hover,
+    &:focus {
+      opacity: 0.8;
+      color: $text-color;
+    }
 
-      ul {
-        list-style: circle;
-        padding-left: $space;
-      }
+    &:active {
+      opacity: 1;
     }
   }
 }
diff --git a/common/containers/Tabs/GenerateWallet/components/Template.tsx b/common/containers/Tabs/GenerateWallet/components/Template.tsx
index d35ba5d006a..b6c5c2acd73 100644
--- a/common/containers/Tabs/GenerateWallet/components/Template.tsx
+++ b/common/containers/Tabs/GenerateWallet/components/Template.tsx
@@ -1,24 +1,18 @@
 import React from 'react';
+import { Link } from 'react-router-dom';
 import './Template.scss';
 
 interface Props {
-  content: React.ReactElement<any>;
-  help: React.ReactElement<any>;
+  children: React.ReactElement<any>;
 }
 
-export default class GenerateWalletTemplate extends React.Component<Props, {}> {
-  public render() {
-    const { content, help } = this.props;
-    return (
-      <div className="GenerateWallet row">
-        <div className="GenerateWallet-column col-md-9">
-          <main className="GenerateWallet-column-content Tab-content-pane">{content}</main>
-        </div>
+const GenerateWalletTemplate: React.SFC<Props> = ({ children }) => (
+  <div className="GenerateWallet Tab-content-pane">
+    {children}
+    <Link className="GenerateWallet-back" to="/generate">
+      <i className="fa fa-arrow-left" /> Back
+    </Link>
+  </div>
+);
 
-        <div className="GenerateWallet-column col-md-3">
-          <aside className="GenerateWallet-column-help Tab-content-pane">{help}</aside>
-        </div>
-      </div>
-    );
-  }
-}
+export default GenerateWalletTemplate;
diff --git a/common/containers/Tabs/GenerateWallet/components/WalletTypes.scss b/common/containers/Tabs/GenerateWallet/components/WalletTypes.scss
new file mode 100644
index 00000000000..43fae0201dd
--- /dev/null
+++ b/common/containers/Tabs/GenerateWallet/components/WalletTypes.scss
@@ -0,0 +1,37 @@
+@import 'common/sass/variables';
+
+.WalletTypes {
+  &-title,
+  &-subtitle {
+    text-align: center;
+  }
+
+  &-title {
+    margin-bottom: $space;
+  }
+
+  &-subtitle {
+    max-width: 1040px;
+    margin: 0 auto;
+    margin-bottom: $space;
+  }
+}
+
+.WalletType {
+  margin-bottom: $space * 2;
+
+  &-features {
+    padding-left: 20px;
+  }
+
+  &-select {
+    @media screen and (min-width: $screen-md) {
+      padding: 0 10px;
+    }
+
+    &-btn {
+      padding-left: 0;
+      padding-right: 0;
+    }
+  }
+}
diff --git a/common/containers/Tabs/GenerateWallet/components/WalletTypes.tsx b/common/containers/Tabs/GenerateWallet/components/WalletTypes.tsx
new file mode 100644
index 00000000000..ed326504f46
--- /dev/null
+++ b/common/containers/Tabs/GenerateWallet/components/WalletTypes.tsx
@@ -0,0 +1,74 @@
+import React from 'react';
+import translate from 'translations';
+import { WalletType } from '../GenerateWallet';
+import { NewTabLink } from 'components/ui';
+import { Link } from 'react-router-dom';
+import './WalletTypes.scss';
+
+const WalletTypes: React.SFC<{}> = () => {
+  const typeInfo = {
+    [WalletType.Keystore]: {
+      name: 'x_Keystore2',
+      bullets: [
+        'An encrypted JSON file, protected by a password',
+        'Back it up on a USB drive',
+        'Cannot be written, printed, or easily transferred to mobile',
+        'Compatible with Mist, Parity, Geth',
+        'Provides a single address for sending and receiving'
+      ]
+    },
+    [WalletType.Mnemonic]: {
+      name: 'x_Mnemonic',
+      bullets: [
+        'A 12-word private seed phrase',
+        'Back it up on paper or USB drive',
+        'Can be written, printed, and easily typed on mobile, too',
+        'Compatible with MetaMask, Jaxx, imToken, and more',
+        'Provides unlimited addresses for sending and receiving'
+      ]
+    }
+  };
+
+  return (
+    <div className="WalletTypes Tab-content-pane">
+      <h1 className="WalletTypes-title">{translate('NAV_GenerateWallet')}</h1>
+      <p className="WalletTypes-subtitle alert alert-warning">
+        <strong>Warning</strong>: Managing your own keys can be risky and a single mistake can lead
+        to irrecoverable loss. If you are new to cryptocurrencies, we strongly recommend using{' '}
+        <NewTabLink href="https://metamask.io/">MetaMask</NewTabLink>, or purchasing a{' '}
+        <NewTabLink href="https://www.ledgerwallet.com/r/fa4b?path=/products/">Ledger</NewTabLink>{' '}
+        or <NewTabLink href="https://trezor.io/?a=myetherwallet.com">TREZOR</NewTabLink> hardware
+        wallet.{' '}
+        <NewTabLink href="https://myetherwallet.github.io/knowledge-base/private-keys-passwords/difference-beween-private-key-and-keystore-file.html">
+          Learn more about different wallet types & staying secure.
+        </NewTabLink>
+      </p>
+
+      <div className="WalletTypes-types row">
+        <div className="col-md-1" />
+        {Object.keys(typeInfo).map(type => (
+          <div key={type} className="WalletType col-md-5">
+            <h2 className="WalletType-title">{translate(typeInfo[type].name)}</h2>
+            <ul className="WalletType-features">
+              {typeInfo[type].bullets.map(bullet => (
+                <li key={bullet} className="WalletType-features-feature">
+                  {translate(bullet)}
+                </li>
+              ))}
+            </ul>
+            <div className="WalletType-select">
+              <Link
+                className="WalletType-select-btn btn btn-primary btn-block"
+                to={`/generate/${type}`}
+              >
+                Generate a {translate(typeInfo[type].name)}
+              </Link>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default WalletTypes;
diff --git a/common/containers/Tabs/GenerateWallet/index.tsx b/common/containers/Tabs/GenerateWallet/index.tsx
index 89af53e987a..f02c3868442 100644
--- a/common/containers/Tabs/GenerateWallet/index.tsx
+++ b/common/containers/Tabs/GenerateWallet/index.tsx
@@ -1,94 +1,2 @@
-import {
-  continueToPaper,
-  generateNewWallet,
-  resetGenerateWallet,
-  TContinueToPaper,
-  TGenerateNewWallet,
-  TResetGenerateWallet
-} from 'actions/generateWallet';
-import { IFullWallet } from 'ethereumjs-wallet';
-import React, { Component } from 'react';
-import { connect } from 'react-redux';
-import { AppState } from 'reducers';
-import DownloadWallet from './components/DownloadWallet';
-import EnterPassword from './components/EnterPassword';
-import PaperWallet from './components/PaperWallet';
-import CryptoWarning from './components/CryptoWarning';
-import TabSection from 'containers/TabSection';
-
-interface Props {
-  // Redux state
-  activeStep: string; // FIXME union actual steps
-  password: string;
-  wallet: IFullWallet | null | undefined;
-  // Actions
-  generateNewWallet: TGenerateNewWallet;
-  continueToPaper: TContinueToPaper;
-  resetGenerateWallet: TResetGenerateWallet;
-}
-
-class GenerateWallet extends Component<Props, {}> {
-  public componentWillUnmount() {
-    this.props.resetGenerateWallet();
-  }
-
-  public render() {
-    const { activeStep, wallet, password } = this.props;
-    let content;
-
-    const AnyEnterPassword = EnterPassword as new () => any;
-
-    if (window.crypto) {
-      switch (activeStep) {
-        case 'password':
-          content = <AnyEnterPassword generateNewWallet={this.props.generateNewWallet} />;
-          break;
-
-        case 'download':
-          if (wallet) {
-            content = (
-              <DownloadWallet
-                wallet={wallet}
-                password={password}
-                continueToPaper={this.props.continueToPaper}
-              />
-            );
-          }
-          break;
-
-        case 'paper':
-          if (wallet) {
-            content = <PaperWallet wallet={wallet} />;
-          } else {
-            content = <h1>Uh oh. Not sure how you got here.</h1>;
-          }
-          break;
-
-        default:
-          content = <h1>Uh oh. Not sure how you got here.</h1>;
-      }
-    } else {
-      content = <CryptoWarning />;
-    }
-
-    return (
-      <TabSection>
-        <section className="Tab-content">{content}</section>
-      </TabSection>
-    );
-  }
-}
-
-function mapStateToProps(state: AppState) {
-  return {
-    activeStep: state.generateWallet.activeStep,
-    password: state.generateWallet.password,
-    wallet: state.generateWallet.wallet
-  };
-}
-
-export default connect(mapStateToProps, {
-  generateNewWallet,
-  continueToPaper,
-  resetGenerateWallet
-})(GenerateWallet);
+import GenerateWallet from './GenerateWallet';
+export default GenerateWallet;
diff --git a/common/reducers/generateWallet.ts b/common/reducers/generateWallet.ts
deleted file mode 100644
index 9a8c8cc9459..00000000000
--- a/common/reducers/generateWallet.ts
+++ /dev/null
@@ -1,42 +0,0 @@
-import { GenerateWalletAction } from 'actions/generateWallet';
-import { TypeKeys } from 'actions/generateWallet/constants';
-import { IFullWallet } from 'ethereumjs-wallet';
-
-export interface State {
-  activeStep: string;
-  wallet?: IFullWallet | null;
-  password?: string | null;
-}
-
-export const INITIAL_STATE: State = {
-  activeStep: 'password',
-  wallet: null,
-  password: null
-};
-
-export function generateWallet(state: State = INITIAL_STATE, action: GenerateWalletAction): State {
-  switch (action.type) {
-    case TypeKeys.GENERATE_WALLET_GENERATE_WALLET: {
-      return {
-        ...state,
-        wallet: action.wallet,
-        password: action.password,
-        activeStep: 'download'
-      };
-    }
-
-    case TypeKeys.GENERATE_WALLET_CONTINUE_TO_PAPER: {
-      return {
-        ...state,
-        activeStep: 'paper'
-      };
-    }
-
-    case TypeKeys.GENERATE_WALLET_RESET: {
-      return INITIAL_STATE;
-    }
-
-    default:
-      return state;
-  }
-}
diff --git a/common/reducers/index.ts b/common/reducers/index.ts
index 9229833cec5..0e4c17a6795 100644
--- a/common/reducers/index.ts
+++ b/common/reducers/index.ts
@@ -4,7 +4,6 @@ import { config, State as ConfigState } from './config';
 import { customTokens, State as CustomTokensState } from './customTokens';
 import { deterministicWallets, State as DeterministicWalletsState } from './deterministicWallets';
 import { ens, State as EnsState } from './ens';
-import { generateWallet, State as GenerateWalletState } from './generateWallet';
 import { notifications, State as NotificationsState } from './notifications';
 import { rates, State as RatesState } from './rates';
 import { State as SwapState, swap } from './swap';
@@ -12,7 +11,6 @@ import { State as WalletState, wallet } from './wallet';
 import { State as TransactionState, transaction } from './transaction';
 export interface AppState {
   // Custom reducers
-  generateWallet: GenerateWalletState;
   config: ConfigState;
   notifications: NotificationsState;
   ens: EnsState;
@@ -28,7 +26,6 @@ export interface AppState {
 }
 
 export default combineReducers({
-  generateWallet,
   config,
   swap,
   notifications,
diff --git a/common/sass/styles/overrides/alerts.scss b/common/sass/styles/overrides/alerts.scss
index f077dce890c..6d3f7a3928b 100644
--- a/common/sass/styles/overrides/alerts.scss
+++ b/common/sass/styles/overrides/alerts.scss
@@ -8,6 +8,8 @@
 
   a {
     color: #FFF;
+    font-weight: normal;
+    text-decoration: underline;
 
     &:hover {
       color: #FFF;
diff --git a/spec/reducers/generateWallet.spec.ts b/spec/reducers/generateWallet.spec.ts
deleted file mode 100644
index b8746cd0524..00000000000
--- a/spec/reducers/generateWallet.spec.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-import { generateWallet, INITIAL_STATE } from 'reducers/generateWallet';
-import * as generateWalletActions from 'actions/generateWallet';
-import Wallet from 'ethereumjs-wallet';
-
-describe('generateWallet reducer', () => {
-  it('should handle GENERATE_WALLET_GENERATE_WALLET', () => {
-    const { wallet, password, activeStep } = generateWallet(
-      undefined,
-      generateWalletActions.generateNewWallet('password')
-    );
-
-    expect(wallet).toBeInstanceOf(Wallet);
-    expect(password).toEqual('password');
-    expect(activeStep).toEqual('download');
-  });
-
-  it('should handle GENERATE_WALLET_CONTINUE_TO_PAPER', () => {
-    expect(
-      generateWallet(undefined, generateWalletActions.continueToPaper())
-    ).toEqual({
-      ...INITIAL_STATE,
-      activeStep: 'paper'
-    });
-  });
-
-  it('should handle GENERATE_WALLET_RESET', () => {
-    expect(
-      generateWallet(undefined, generateWalletActions.resetGenerateWallet())
-    ).toEqual({
-      ...INITIAL_STATE
-    });
-  });
-});
diff --git a/tsconfig.json b/tsconfig.json
index d80c83eef33..29c9d8bba0c 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -26,4 +26,4 @@
   "awesomeTypescriptLoaderOptions": {
     "transpileOnly": true
   }
-}
\ No newline at end of file
+}