diff --git a/app/js/clear-auth/index.js b/app/js/clear-auth/index.js
deleted file mode 100644
index a957da064..000000000
--- a/app/js/clear-auth/index.js
+++ /dev/null
@@ -1,80 +0,0 @@
-import React, { PureComponent } from 'react'
-import { withRouter } from 'react-router'
-import App from '../App'
-
-class ClearAuthPage extends PureComponent {
-  state = {
-    countdown: 5,
-    hasAttemptedConfirm: false
-  }
-
-  componentDidMount() {
-    this.decrementCountdown()
-  }
-
-  decrementCountdown() {
-    setTimeout(() => {
-      const { countdown } = this.state
-      this.setState({ countdown: countdown - 1 })
-      if (countdown > 1) {
-        this.decrementCountdown()
-      }
-    }, 1000)
-  }
-
-  clearData = () => {
-    if (this.state.hasAttemptedConfirm) {
-      localStorage.clear()
-      window.location = `${this.props.location.query.redirect_uri}://?authCleared=1`
-    }
-    else {
-      this.setState({ hasAttemptedConfirm: true })
-    }
-  }
-
-  cancel = () => {
-    window.location = `${this.props.location.query.redirect_uri}://?authCleared=0`
-  }
-
-  render() {
-    const { countdown, hasAttemptedConfirm } = this.state
-
-    return (
-      <App noHeader>
-        <div className="container-fluid">
-          <h3 className="p-t-20">Sign Out</h3>
-          <p className="p-t-20 alert alert-warning">
-            <strong>Warning:</strong> This will reset your account on this device.
-            You’ll be able to restore your account, or create a new one afterwards.
-            <br />
-            <br />
-            If you plan to restore your account, <strong>make sure you have
-            recorded your backup information.</strong> You will either need your
-            12 word secret recovery key, or your magic recovery code and password
-            to do so.
-          </p>
-          <div className="m-t-10">
-            <button
-              className="btn btn-danger btn-block"
-              onClick={this.clearData}
-              disabled={countdown > 0}
-            >
-              {hasAttemptedConfirm ? (
-                <span>Press again to confirm</span>
-              ) : (
-                <span>Reset my device {countdown > 0 && `(${countdown})`}</span>
-              )}
-            </button>
-          </div>
-          <div className="m-t-10">
-            <button className="btn btn-tertiary btn-block" onClick={this.cancel}>
-              Cancel
-            </button>
-          </div>
-        </div>
-      </App>
-    )
-  }
-}
-
-export default withRouter(ClearAuthPage)
diff --git a/app/js/components/Navbar.js b/app/js/components/Navbar.js
index d82d225bc..ea221ea18 100644
--- a/app/js/components/Navbar.js
+++ b/app/js/components/Navbar.js
@@ -1,184 +1,147 @@
+import React from 'react'
+import HomeIcon from 'mdi-react/AppsIcon'
+import IDsIcon from 'mdi-react/AccountCircleIcon'
+import WalletIcon from 'mdi-react/WalletIcon'
+import SettingsIcon from 'mdi-react/SettingsIcon'
+import { Hover, Focus } from 'react-powerplug'
+import { Box, Flex, Type } from 'blockstack-ui'
+import { Link, withRouter } from 'react-router'
 import PropTypes from 'prop-types'
-import React, { Component } from 'react'
-import { Link } from 'react-router'
 
-/* eslint-disable global-require */
-export const ICONS = {
-  homeNav: require('@images/icon-nav-home.svg'),
-  homeNavActive: require('@images/icon-nav-home-hover.svg'),
-  walletNav: require('@images/icon-nav-wallet.svg'),
-  walletNavActive: require('@images/icon-nav-wallet-hover.svg'),
-  avatarNav: require('@images/icon-nav-profile.svg'),
-  avatarNavActive: require('@images/icon-nav-profile-hover.svg'),
-  settingsNav: require('@images/icon-nav-settings.svg'),
-  settingsNavActive: require('@images/icon-nav-settings-hover.svg')
-}
-/* eslint-enable global-require */
-
-class Navbar extends Component {
-  static propTypes = {
-    activeTab: PropTypes.string
-  }
-
-  constructor(props) {
-    super(props)
-    this.onHomeNavMouseOver = this.onHomeNavMouseOver.bind(this)
-    this.onHomeNavMouseOut = this.onHomeNavMouseOut.bind(this)
-    this.onWalletNavMouseOver = this.onWalletNavMouseOver.bind(this)
-    this.onWalletNavMouseOut = this.onWalletNavMouseOut.bind(this)
-    this.onAvatarNavMouseOver = this.onAvatarNavMouseOver.bind(this)
-    this.onAvatarNavMouseOut = this.onAvatarNavMouseOut.bind(this)
-    this.onSettingsNavMouseOver = this.onSettingsNavMouseOver.bind(this)
-    this.onSettingsNavMouseOut = this.onSettingsNavMouseOut.bind(this)
-
-    this.state = {
-      homeTabHover: false,
-      walletTabHover: false,
-      avatarTabHover: false,
-      settingsTabHover: false
+const navBarData = [
+  [
+    {
+      label: 'Home',
+      icon: HomeIcon,
+      path: '/',
+      active: '/'
     }
-  }
-
-  onHomeNavMouseOver() {
-    this.setState({ homeTabHover: true })
-  }
-
-  onHomeNavMouseOut() {
-    this.setState({ homeTabHover: false })
-  }
-
-  onWalletNavMouseOver() {
-    this.setState({ walletTabHover: true })
-  }
-
-  onWalletNavMouseOut() {
-    this.setState({ walletTabHover: false })
-  }
-
-  onAvatarNavMouseOver() {
-    this.setState({ avatarTabHover: true })
-  }
-
-  onAvatarNavMouseOut() {
-    this.setState({ avatarTabHover: false })
-  }
-
-  onSettingsNavMouseOver() {
-    this.setState({ settingsTabHover: true })
-  }
-
-  onSettingsNavMouseOut() {
-    this.setState({ settingsTabHover: false })
-  }
-
-  settingsNavIconImage() {
-    if (this.props.activeTab === 'settings' || this.state.settingsTabHover) {
-      return ICONS.settingsNavActive
-    } else {
-      return ICONS.settingsNav
+  ],
+  [
+    {
+      label: 'Identity',
+      icon: IDsIcon,
+      path: '/profiles',
+      active: 'profiles'
+    },
+    {
+      label: 'Wallet',
+      icon: WalletIcon,
+      path: '/wallet/receive',
+      active: 'wallet'
+    },
+    {
+      label: 'Settings',
+      icon: SettingsIcon,
+      path: '/account',
+      active: 'account'
     }
-  }
-
-  homeNavIconImage() {
-    if (this.props.activeTab === 'home' || this.state.homeTabHover) {
-      return ICONS.homeNavActive
-    } else {
-      return ICONS.homeNav
-    }
-  }
-
-  walletNavIconImage() {
-    if (this.props.activeTab === 'wallet' || this.state.walletTabHover) {
-      return ICONS.walletNavActive
-    } else {
-      return ICONS.walletNav
-    }
-  }
-
-  avatarNavIconImage() {
-    if (this.props.activeTab === 'avatar' || this.state.avatarTabHover) {
-      return ICONS.avatarNavActive
-    } else {
-      return ICONS.avatarNav
-    }
-  }
-
-  render() {
-    const homeActive =
-      this.props.activeTab === 'home' || this.state.homeTabHover
-    const avatarActive =
-      this.props.activeTab === 'avatar' || this.state.avatarTabHover
-    const walletActive =
-      this.props.activeTab === 'wallet' || this.state.walletTabHover
-    const settingsActive =
-      this.props.activeTab === 'settings' || this.state.settingsTabHover
-
-    return (
-      <header
-        className="container-fluid no-padding bg-white fixed-top"
-        style={{ maxWidth: 'unset', zIndex: 9 }}
-      >
-        <nav className="navbar navbar-expand container-lg mx-auto">
-          <ul className="navbar-nav container-fluid">
-            <li className="nav-item">
-              <Link
-                to="/"
-                className="nav-link"
-                onMouseOver={this.onHomeNavMouseOver}
-                onMouseOut={this.onHomeNavMouseOut}
-              >
-                <img src={this.homeNavIconImage()} alt="Home" />
-                <span className={`${homeActive ? 'active' : ''}`}>Home</span>
-              </Link>
-            </li>
-            <li className="nav-item ml-auto">
-              <Link
-                to="/profiles"
-                className="nav-link"
-                onMouseOver={this.onAvatarNavMouseOver}
-                onMouseOut={this.onAvatarNavMouseOut}
-              >
-                <img src={this.avatarNavIconImage()} alt="IDs" />
-                <span className={`${avatarActive ? 'active' : ''}`}>
-                  &nbsp;&nbsp;&nbsp;ID<span
-                    style={{ textTransform: 'lowercase' }}
-                  >
-                    s
-                  </span>&nbsp;&nbsp;&nbsp;
-                </span>
-              </Link>
-            </li>
-            <li className="nav-item">
-              <Link
-                to="/wallet/receive"
-                className="nav-link"
-                onMouseOver={this.onWalletNavMouseOver}
-                onMouseOut={this.onWalletNavMouseOut}
-              >
-                <img src={this.walletNavIconImage()} alt="Wallet" />
-                <span className={`${walletActive ? 'active' : ''}`}>
-                  Wallet
-                </span>
-              </Link>
-            </li>
-            <li className="nav-item">
-              <Link
-                to="/account"
-                className="nav-link"
-                onMouseOver={this.onSettingsNavMouseOver}
-                onMouseOut={this.onSettingsNavMouseOut}
-              >
-                <img src={this.settingsNavIconImage()} alt="Settings" />
-                <span className={`${settingsActive ? 'active' : ''}`}>
-                  Settings
-                </span>
-              </Link>
-            </li>
-          </ul>
-        </nav>
-      </header>
-    )
-  }
+  ]
+]
+
+const Wrapper = ({ ...rest }) => (
+  <Flex
+    maxWidth={700}
+    mx="auto"
+    justifyContent="space-between"
+    width={1}
+    {...rest}
+  />
+)
+
+const Icon = ({ component: Component, ...rest }) => (
+  <Box {...rest}>
+    <Component />
+  </Box>
+)
+
+const Label = ({ children, ...rest }) => (
+  <Box {...rest}>
+    <Type fontWeight={600}>{children}</Type>
+  </Box>
+)
+
+const NavItem = ({ label, icon, path, active, ...rest }) => (
+  <React.Fragment {...rest}>
+    <Focus>
+      {({ focused, bind: focusBind }) => (
+        <Hover>
+          {({ hovered, bind }) => (
+            <Flex
+              color={
+                active || focused || hovered
+                  ? '#2c96ff !important'
+                  : '#949494 !important'
+              }
+              alignItems="center"
+              flexDirection="column"
+              size="84px"
+              p={3}
+              cursor={hovered ? 'pointer' : 'unset'}
+              style={{ userSelect: 'none' }}
+              is={Link}
+              to={path}
+              dataTestId="NavItem"
+              {...bind}
+              {...focusBind}
+            >
+              <Icon component={icon} />
+              <Label>{label}</Label>
+            </Flex>
+          )}
+        </Hover>
+      )}
+    </Focus>
+  </React.Fragment>
+)
+
+const Navbar = withRouter(({ location }) => (
+  <Box
+    borderBottom="1px solid #f0f0f0"
+    bg="white"
+    position="fixed"
+    top={0}
+    width={1}
+    zIndex={999}
+  >
+    <Wrapper>
+      {navBarData.map((section, i) => (
+        <Flex key={i}>
+          {section.map(({ label, icon, path, active }) => (
+            <NavItem
+              key={path}
+              label={label}
+              icon={icon}
+              path={path}
+              active={
+                (location.pathname === '/' && active === '/') ||
+                (location.pathname &&
+                  location.pathname.split('/')[1].includes(active))
+              }
+            />
+          ))}
+        </Flex>
+      ))}
+    </Wrapper>
+  </Box>
+))
+
+Icon.propTypes = {
+  component: PropTypes.node
+}
+Label.propTypes = {
+  children: PropTypes.node
 }
+NavItem.propTypes = {
+  label: PropTypes.string,
+  icon: PropTypes.node,
+  path: PropTypes.string,
+  active: PropTypes.bool
+}
+
+Navbar.displayName = 'Navbar'
+NavItem.displayName = 'NavItem'
 
 export default Navbar
+
+export { navBarData, NavItem }
diff --git a/app/js/components/Navigation.js b/app/js/components/Navigation.js
deleted file mode 100644
index 0bf7a2b69..000000000
--- a/app/js/components/Navigation.js
+++ /dev/null
@@ -1,56 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import styled from 'styled-components'
-
-import ChevronLeftIcon from 'mdi-react/ChevronLeftIcon'
-const NavBlock = styled.div`
-  display: flex;
-  width: 100%;
-  position: absolute;
-  top: 20px;
-  left: 20px;
-  z-index: 100;
-  @media (min-width: 800px) {
-    top: -46px;
-    left: -10px;
-  }
-`
-const NavButton = styled.button`
-  border: none;
-  background: transparent;
-  display: flex;
-  align-items: center;
-  font-size: 14px;
-  font-weight: bold;
-  opacity: 0.5;
-  &:hover {
-    cursor: pointer;
-    opacity: 1;
-  }
-  svg {
-    display: block;
-    * {
-      fill: currentColor;
-    }
-  }
-`
-
-const Navigation = props => {
-  const { previous, previousLabel = 'Back' } = props
-
-  return (
-    <NavBlock>
-      <NavButton onClick={previous}>
-        <ChevronLeftIcon />
-        {previousLabel}
-      </NavButton>
-    </NavBlock>
-  )
-}
-
-Navigation.propTypes = {
-  previous: PropTypes.func.isRequired,
-  previousLabel: PropTypes.string
-}
-
-export default Navigation
diff --git a/app/js/components/ui/components/shell/index.js b/app/js/components/ui/components/shell/index.js
index 17f306d35..1e310b183 100644
--- a/app/js/components/ui/components/shell/index.js
+++ b/app/js/components/ui/components/shell/index.js
@@ -150,7 +150,7 @@ const StyledShell = styled.div`
   width: 100%;
   z-index: 9001;
   background-color: ${({ width }) =>
-    width <= 599 ? 'white' : 'rgba(240, 240, 240, 0.8)'};
+    width <= 599 ? 'white' : 'rgba(240, 240, 240, 0.85)'};
   ${({ maxHeight }) =>
     maxHeight &&
     css`
diff --git a/app/js/components/ui/containers/AppHomeWrapper.js b/app/js/components/ui/containers/AppHomeWrapper.js
index 6d88b70a0..bb84da0b1 100644
--- a/app/js/components/ui/containers/AppHomeWrapper.js
+++ b/app/js/components/ui/containers/AppHomeWrapper.js
@@ -2,7 +2,6 @@ import React from 'react'
 import styled from 'styled-components'
 import { WindowSize } from 'react-fns'
 import { connect } from 'react-redux'
-
 import HomePage from '../../../HomeScreenPage'
 
 const StyledAppHomeWrapper = styled.div.attrs({
diff --git a/app/js/components/ui/containers/shell-parent.js b/app/js/components/ui/containers/shell-parent.js
index 813e706a2..2845ad3bc 100644
--- a/app/js/components/ui/containers/shell-parent.js
+++ b/app/js/components/ui/containers/shell-parent.js
@@ -5,6 +5,8 @@ import { Shell } from '@ui/containers/shell'
 import { Header } from '@ui/containers/headers'
 import { Transition } from 'react-spring'
 import { WindowSize } from 'react-fns'
+import { AppHomeWrapper } from '@components/ui/containers/AppHomeWrapper'
+
 const ShellContext = React.createContext()
 
 /**
@@ -87,10 +89,7 @@ class ShellParent extends React.Component {
 
     const internalBackLabel = backLabel !== '' ? backLabel : 'Back'
     const defaultBackLabel = isFirstView ? backLabel : internalBackLabel
-    const label =
-      backLabel === '' && isFirstView && app
-        ? ``
-        : defaultBackLabel
+    const label = backLabel === '' && isFirstView && app ? `` : defaultBackLabel
 
     const Component = views[view]
 
@@ -132,26 +131,29 @@ class ShellParent extends React.Component {
     })
 
     return (
-      <WindowSize>
-        {windowSize => (
-          <ShellContext.Provider value={{ ...context, size: windowSize }}>
-            <Shell {...context} {...windowSize} maxHeight={maxHeight}>
-              <Shell.Content.Container {...windowSize}>
-                <Shell.Content.Wrapper {...windowSize}>
-                  <Header
-                    {...headerProps}
-                    invert={windowSize.width < 600 ? invert : undefined}
-                  />
-                  <Shell.Main>
-                    {this.renderLoading(this.state.loadingProps)}
-                    <Component {...componentProps} />
-                  </Shell.Main>
-                </Shell.Content.Wrapper>
-              </Shell.Content.Container>
-            </Shell>
-          </ShellContext.Provider>
-        )}
-      </WindowSize>
+      <>
+        <WindowSize>
+          {windowSize => (
+            <ShellContext.Provider value={{ ...context, size: windowSize }}>
+              <Shell {...context} {...windowSize} maxHeight={maxHeight}>
+                <Shell.Content.Container {...windowSize}>
+                  <Shell.Content.Wrapper {...windowSize}>
+                    <Header
+                      {...headerProps}
+                      invert={windowSize.width < 600 ? invert : undefined}
+                    />
+                    <Shell.Main>
+                      {this.renderLoading(this.state.loadingProps)}
+                      <Component {...componentProps} />
+                    </Shell.Main>
+                  </Shell.Content.Wrapper>
+                </Shell.Content.Container>
+              </Shell>
+            </ShellContext.Provider>
+          )}
+        </WindowSize>
+        <AppHomeWrapper />
+      </>
     )
   }
 }
diff --git a/app/js/components/ui/containers/user.js b/app/js/components/ui/containers/user.js
index bfb6aef23..a1a4d4b5b 100644
--- a/app/js/components/ui/containers/user.js
+++ b/app/js/components/ui/containers/user.js
@@ -5,7 +5,7 @@ import { User } from '@blockstack/ui/components/user'
 import CheckIcon from 'mdi-react/CheckIcon'
 import ChevronRightIcon from 'mdi-react/ChevronRightIcon'
 import Image from '@components/Image'
-import { Flex } from '@components/ui/components/primitives'
+import { Flex } from 'blockstack-ui'
 
 const UserAvatar = ({
   id,
@@ -13,7 +13,7 @@ const UserAvatar = ({
   size = 46,
   camera,
   textSize = 14,
-  avatarUrl = '',
+  avatarUrl,
   ...rest
 }) => (
   <User.Avatar
@@ -24,14 +24,14 @@ const UserAvatar = ({
     {...rest}
   >
     {avatarUrl ? (
-      <Image
-        src={avatarUrl}
-        fallbackSrc="/images/avatar.png"
-        className="rounded-circle img-cover"
+      <Flex
+        bg={`url(${avatarUrl}) center center no-repeat`}
+        position="absolute"
+        top="0"
+        left="0"
+        size="100%"
         style={{
-          display: 'inline-block',
-          width: '100%',
-          height: '100%'
+          backgroundSize: 'cover'
         }}
       />
     ) : (
@@ -67,7 +67,12 @@ const UserButton = ({ username, id, hideID, avatarUrl, ...rest }) => (
       cd
       maxWidth="calc(100% - 102px) !important"
     >
-      <Type.p color="rgba(255,255,255,1)" textAlign="left" width="100%" overflow>
+      <Type.p
+        color="rgba(255,255,255,1)"
+        textAlign="left"
+        width="100%"
+        overflow
+      >
         {username.includes('.') ? (
           <>
             <span style={{ color: 'rgba(255,255,255,1)' }}>
@@ -85,8 +90,9 @@ const UserButton = ({ username, id, hideID, avatarUrl, ...rest }) => (
           <span style={{ color: 'rgba(255,255,255,1)' }}>{username}</span>
         )}
       </Type.p>
-      {id &&
-        !hideID && <Type.small color="rgba(255,255,255,0.5)">{id}</Type.small>}
+      {id && !hideID && (
+        <Type.small color="rgba(255,255,255,0.5)">{id}</Type.small>
+      )}
     </Button.Section>
     <Button.Section
       align="center"
diff --git a/app/js/routes.js b/app/js/routes.js
index 9edd71a83..ec7e72d31 100644
--- a/app/js/routes.js
+++ b/app/js/routes.js
@@ -2,18 +2,22 @@ import React from 'react'
 import { browserHistory, IndexRoute, Route, Router } from 'react-router'
 import Loadable from 'react-loadable'
 import App from './App'
-import ClearAuthPage from './clear-auth'
+import SignOutPage from './sign-out'
 import ConnectStoragePage from './connect-storage'
 import { connectedRouterRedirect } from 'redux-auth-wrapper/history3/redirect'
 
 const LOADABLE_DELAY = 300
 
-const Loading = (props) => {
-  if (props.error) {
-    return <div>Error! <button onClick={props.retry}>Retry</button></div>
-  } else if (props.pastDelay) {
+const Loading = ({ error, retry, pastDelay }) => {
+  if (error) {
     return (
-      <div 
+      <div>
+        Error! <button onClick={retry}>Retry</button>
+      </div>
+    )
+  } else if (pastDelay) {
+    return (
+      <div
         style={{
           width: '100%',
           height: '100%',
@@ -225,26 +229,25 @@ const NotFoundPage = Loadable({
 })
 
 const GoToBetaPage = Loadable({
-  loader: () =>
-    import(/* webpackChunkName: "NotFoundPage" */ './go-to-beta'),
+  loader: () => import(/* webpackChunkName: "GoToBetaPage" */ './go-to-beta'),
   loading: Loading,
   delay: LOADABLE_DELAY
 })
 
-
 const accountCreated = connectedRouterRedirect({
   redirectPath: state =>
-    !state.account.encryptedBackupPhrase ?
-      // Not signed in
-      '/sign-up' :
-      // Storage failed to connect
-      '/connect-storage',
-  authenticatedSelector: (state, props) => !!props.location.query.echo || 
+    !state.account.encryptedBackupPhrase
+      ? // Not signed in
+        '/sign-up'
+      : // Storage failed to connect
+        '/connect-storage',
+  authenticatedSelector: (state, props) =>
+    !!props.location.query.echo ||
     // No echo param (for protocol check)
     // No keyphrase
     (!!state.account.encryptedBackupPhrase &&
-    // Storage failed to connect
-    !!state.settings.api.storageConnected),
+      // Storage failed to connect
+      !!state.settings.api.storageConnected),
   wrapperDisplayName: 'AccountCreated'
 })
 
@@ -292,19 +295,23 @@ export default (
 
       <Route path="/auth" component={NewAuthPage} />
     </Route>
-    <Route path="/sign-up" component={SignUpPage} />
-    <Route path="/sign-up/*" component={SignUpPage} />
-    { /**
-     * TODO: move /update back up ^^, had to move it out of the 'app' nested route
-     * because when we wipe data, it wants to redirect to /sign-up
-     */}
-    <Route path="/update" component={UpdateStatePage} />
-    <Route path="/sign-in" component={SignInPage} />
-    <Route path="/sign-in/*" component={SignInPage} />
-    <Route path="/seed" component={SeedPage} />
-    <Route path="/connect-storage" component={ConnectStoragePage} />
-    <Route path="/clear-auth" component={ClearAuthPage} />
-    <Route path="/go-to-beta" component={GoToBetaPage} />
-    <Route path="/*" component={NotFoundPage} />
+
+    <Route path="/" component={App}>
+      <Route path="/sign-up" component={SignUpPage} />
+      <Route path="/sign-up/*" component={SignUpPage} />
+      {/**
+       * TODO: move /update back up ^^, had to move it out of the 'app' nested route
+       * because when we wipe data, it wants to redirect to /sign-up
+       */}
+      <Route path="/update" component={UpdateStatePage} />
+      <Route path="/sign-in" component={SignInPage} />
+      <Route path="/sign-in/*" component={SignInPage} />
+      <Route path="/seed" component={SeedPage} />
+      <Route path="/connect-storage" component={ConnectStoragePage} />
+      <Route path="/clear-auth" component={SignOutPage} />
+      <Route path="/sign-out" component={SignOutPage} />
+      <Route path="/go-to-beta" component={GoToBetaPage} />
+      <Route path="/*" component={NotFoundPage} />
+    </Route>
   </Router>
 )
diff --git a/app/js/sign-in/index.js b/app/js/sign-in/index.js
index 87a2eae4e..3842bca40 100644
--- a/app/js/sign-in/index.js
+++ b/app/js/sign-in/index.js
@@ -11,7 +11,7 @@ import { RegistrationActions } from '../profiles/store/registration'
 import { trackEventOnce } from '@utils/server-utils'
 import { Initial, Password, Success, Email } from './views'
 import log4js from 'log4js'
-import { AppHomeWrapper, ShellParent } from '@blockstack/ui'
+import { ShellParent } from '@blockstack/ui'
 import {
   selectConnectedStorageAtLeastOnce,
   selectEmail,
@@ -34,7 +34,6 @@ import {
 } from '@common/store/selectors/auth'
 import { AuthActions } from '../auth/store/auth'
 import { formatAppManifest } from '@common'
-import App from '../App'
 
 const CREATE_ACCOUNT_IN_PROCESS = 'createAccount/in_process'
 
@@ -168,34 +167,32 @@ class SignIn extends React.Component {
 
     if (this.state.decrypt && !decrypting) {
       setImmediate(() => {
-        this.setState(
-          { decrypting: true },
-          async () => {
-            try {
-              const decryptedKeyBuffer = await decrypt(
-                new Buffer(encryptedKey, 'base64'),
-                this.state.password
-              )
-              const decryptedKey = decryptedKeyBuffer.toString()
-              this.setState(
-                {
-                  key: decryptedKey,
-                  decrypting: false,
-                  restoreError: null
-                },
-                () => {
-                  this.updateView(VIEWS.EMAIL)
-                }
-              )
-            } catch (e) {
-              logger.debug(e)
-              this.setState({
+        this.setState({ decrypting: true }, async () => {
+          try {
+            const decryptedKeyBuffer = await decrypt(
+              new Buffer(encryptedKey, 'base64'),
+              this.state.password
+            )
+            const decryptedKey = decryptedKeyBuffer.toString()
+            this.setState(
+              {
+                key: decryptedKey,
                 decrypting: false,
-                restoreError: 'Incorrect password or invalid recovery code',
-                key: ''
-              })
-            }
-          })
+                restoreError: null
+              },
+              () => {
+                this.updateView(VIEWS.EMAIL)
+              }
+            )
+          } catch (e) {
+            logger.debug(e)
+            this.setState({
+              decrypting: false,
+              restoreError: 'Incorrect password or invalid recovery code',
+              key: ''
+            })
+          }
+        })
       })
     } else {
       this.updateView(VIEWS.EMAIL)
@@ -419,15 +416,14 @@ class SignIn extends React.Component {
       ...currentViewProps.props
     }
     return (
-      <App>
+      <>
         <ShellParent
           app={formatAppManifest(this.props.appManifest)}
           views={views}
           {...componentProps}
           disableBackOnView={views.length - 1}
         />
-        <AppHomeWrapper />
-      </App>
+      </>
     )
   }
 }
diff --git a/app/js/sign-out/index.js b/app/js/sign-out/index.js
new file mode 100644
index 000000000..6028bcdd8
--- /dev/null
+++ b/app/js/sign-out/index.js
@@ -0,0 +1,49 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { withRouter } from 'react-router'
+import Initial from './views/initial'
+import { ShellParent } from '@blockstack/ui'
+
+const VIEWS = {
+  INITIAL: 0
+}
+
+const views = [Initial]
+
+const SignOut = ({ location }) => {
+  const view = 0
+
+  const viewProps = [
+    {
+      show: VIEWS.INITIAL,
+      props: {
+        backLabel: 'Cancel'
+      }
+    }
+  ]
+
+  const currentViewProps = viewProps.find(v => v.show === view) || {}
+
+  const componentProps = {
+    view,
+    backView: () => null,
+    location,
+    ...currentViewProps.props
+  }
+  return (
+    <>
+      <ShellParent
+        views={views}
+        {...componentProps}
+        disableBackOnView={views.length - 1}
+      />
+    </>
+  )
+}
+
+SignOut.propTypes = {
+  location: PropTypes.object,
+  router: PropTypes.object
+}
+
+export default withRouter(SignOut)
diff --git a/app/js/sign-out/views/initial.js b/app/js/sign-out/views/initial.js
new file mode 100644
index 000000000..9991dceb2
--- /dev/null
+++ b/app/js/sign-out/views/initial.js
@@ -0,0 +1,90 @@
+import React, { useState } from 'react'
+import { ShellScreen, Type } from '@blockstack/ui'
+import { Box } from 'blockstack-ui'
+import PropTypes from 'prop-types'
+
+const InitialSignOutScreen = ({ location, ...rest }) => {
+  const [hasAttempted, setAttempted] = useState(false)
+  const [loading, setLoading] = useState(false)
+
+  const handleResetClick = () => {
+    if (!hasAttempted) {
+      setAttempted(true)
+    } else {
+      setLoading(true)
+      localStorage.clear()
+      window.location =
+        location.query && location.query.redirect_uri
+          ? `${location.query.redirect_uri}://?authCleared=1`
+          : '/sign-up'
+    }
+  }
+
+  const handleCancelClick = () => {
+    window.location =
+      location.query && location.query.redirect_uri
+        ? `${location.query.redirect_uri}://?authCleared=0`
+        : '/sign-up'
+  }
+
+  const screen = {
+    title: {
+      children: 'Sign Out'
+    },
+    content: {
+      grow: 1,
+      children: (
+        <>
+          <Box
+            borderRadius="3px"
+            mb={3}
+            bg="#fff3cd"
+            border="1px solid #ffeeba"
+            p={2}
+          >
+            <Type.p style={{ margin: 0 }}>
+              <strong>Warning:</strong> This will erase your account data on
+              this device. You’ll have to restore your account or create a new
+              one afterwards.
+            </Type.p>
+          </Box>
+          <Type.p style={{ margin: 0 }}>
+            If you plan to restore your account, make sure you have recorded
+            your backup information: you will either need your{' '}
+            <strong>12 word secret recovery key</strong>, or your{' '}
+            <strong>magic recovery code and password</strong> to do so.
+          </Type.p>
+        </>
+      )
+    },
+    actions: {
+      items: [
+        {
+          label: hasAttempted ? (
+            <>Press Again to Confirm</>
+          ) : (
+            <>Reset my Device</>
+          ),
+          loading,
+          disabled: loading,
+          primary: true,
+          onClick: handleResetClick
+        },
+        {
+          label: <>Cancel</>,
+          primary: false,
+          onClick: handleCancelClick
+        }
+      ]
+    }
+  }
+
+  return <ShellScreen {...rest} {...screen} />
+}
+
+InitialSignOutScreen.propTypes = {
+  location: PropTypes.object,
+  value: PropTypes.string
+}
+
+export default InitialSignOutScreen
diff --git a/app/js/sign-up/index.js b/app/js/sign-up/index.js
index 22c781c16..07aef6961 100644
--- a/app/js/sign-up/index.js
+++ b/app/js/sign-up/index.js
@@ -2,7 +2,6 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import { browserHistory, withRouter } from 'react-router'
 import { decodeToken } from 'jsontokens'
-import App from '../App'
 import {
   selectConnectedStorageAtLeastOnce,
   selectEmail,
@@ -41,7 +40,7 @@ import { sendRestoreEmail as sendEmail } from '@utils/email-utils'
 import queryString from 'query-string'
 import log4js from 'log4js'
 import { formatAppManifest } from '@common'
-import { ShellParent, AppHomeWrapper } from '@blockstack/ui'
+import { ShellParent } from '@blockstack/ui'
 import {
   Initial,
   Email,
@@ -98,7 +97,8 @@ const VIEW_EVENTS = {
 
 // Allow the front-end (for example Selenium tests or dev console) to override the subdomain suffix.
 const DEFAULT_SUBDOMAIN_SUFFIX = 'id.blockstack'
-const getSubdomainSuffix = () => window.SUBDOMAIN_SUFFIX_OVERRIDE || DEFAULT_SUBDOMAIN_SUFFIX
+const getSubdomainSuffix = () =>
+  window.SUBDOMAIN_SUFFIX_OVERRIDE || DEFAULT_SUBDOMAIN_SUFFIX
 
 const mapStateToProps = state => ({
   localIdentities: selectLocalIdentities(state),
@@ -188,7 +188,11 @@ class Onboarding extends React.Component {
    */
   submitPassword = async () => {
     const decodedAuthRequest = this.getDecodedAuthRequest()
-    if (decodedAuthRequest && (decodedAuthRequest.solicitGaiaHubUrl || decodedAuthRequest.recommendedGaiaHub)) {
+    if (
+      decodedAuthRequest &&
+      (decodedAuthRequest.solicitGaiaHubUrl ||
+        decodedAuthRequest.recommendedGaiaHub)
+    ) {
       if (decodedAuthRequest.recommendedGaiaHubUrl) {
         this.updateView(VIEWS.RECOMMENDED_GAIA_HUB)
       } else {
@@ -230,16 +234,19 @@ class Onboarding extends React.Component {
 
   submitRecommendedGaiaHub = async () => {
     const decodedAuthRequest = this.getDecodedAuthRequest()
-    this.setState({
-      loading: true,
-      hubURL: decodedAuthRequest.recommendedGaiaHubUrl
-    }, async () => {
-      const success = await this.validateGaiaURL()
-      if (success) {
-        await this.createAccount()
-        this.updateView(VIEWS.EMAIL)
+    this.setState(
+      {
+        loading: true,
+        hubURL: decodedAuthRequest.recommendedGaiaHubUrl
+      },
+      async () => {
+        const success = await this.validateGaiaURL()
+        if (success) {
+          await this.createAccount()
+          this.updateView(VIEWS.EMAIL)
+        }
       }
-    })
+    )
   }
 
   /**
@@ -596,7 +603,14 @@ class Onboarding extends React.Component {
 
   render() {
     const { appManifest } = this.props
-    const { email, password, username, emailSubmitted, view, decodedAuthRequest } = this.state
+    const {
+      email,
+      password,
+      username,
+      emailSubmitted,
+      view,
+      decodedAuthRequest
+    } = this.state
 
     const app = formatAppManifest(appManifest)
 
@@ -688,7 +702,8 @@ class Onboarding extends React.Component {
       {
         show: VIEWS.RECOMMENDED_GAIA_HUB,
         props: {
-          recommendedGaiaHubUrl: decodedAuthRequest && decodedAuthRequest.recommendedGaiaHubUrl,
+          recommendedGaiaHubUrl:
+            decodedAuthRequest && decodedAuthRequest.recommendedGaiaHubUrl,
           updateValue: this.updateValue,
           next: () => this.submitRecommendedGaiaHub(),
           customHub: () => this.updateView(VIEWS.CUSTOMHUB),
@@ -715,7 +730,7 @@ class Onboarding extends React.Component {
     }
 
     return (
-      <App>
+      <>
         <ShellParent
           app={app}
           views={views}
@@ -723,8 +738,7 @@ class Onboarding extends React.Component {
           disableBackOnView={[0, VIEWS.INFO, VIEWS.EMAIL, views.length - 1]}
           disableBack={this.state.loading}
         />
-        <AppHomeWrapper />
-      </App>
+      </>
     )
   }
 }
diff --git a/package.json b/package.json
index f3e147f94..fb4f5fe7f 100644
--- a/package.json
+++ b/package.json
@@ -13,12 +13,12 @@
     "bootstrap": "^4.0.0-beta",
     "browser-stdout": "^1.3.0",
     "chroma-js": "^1.3.7",
-    "clean-tag": "^2.0.0",
-    "core-js": "^2.5.7",
+    "clean-tag": "^2.0.3",
+    "core-js": "^2.6.4",
     "cors-anywhere": "^0.4.1",
     "currency-formatter": "^1.2.1",
     "ecurve": "^1.0.4",
-    "enzyme-adapter-react-16": "^1.2.0",
+    "enzyme-adapter-react-16": "^1.9.1",
     "formik": "^1.4.2",
     "hash-handler": "^1.5.1",
     "inert-polyfill": "^0.2.5",
@@ -27,23 +27,23 @@
     "jsontokens": "^0.7.8",
     "lodash": "^4.17.10",
     "log4js": "^3.0.4",
-    "mdi-react": "^3.3.0",
-    "memoize-one": "^3.1.1",
-    "polished": "^1.9.2",
-    "prop-types": "^15.6.0",
+    "mdi-react": "^5.2.0",
+    "memoize-one": "^5.0.0",
+    "polished": "^2.3.3",
+    "prop-types": "^15.7.1",
     "qrcode.react": "^0.8.0",
     "query-string": "^4.2.3",
-    "react": "^16.7.0",
+    "react": "^16.8.1",
     "react-addons-css-transition-group": "^15.6.2",
     "react-contextmenu": "^2.8.0",
     "react-copy-to-clipboard": "^5.0.1",
-    "react-dom": "^16.7.0",
+    "react-dom": "^16.8.1",
     "react-fns": "^1.4.0",
     "react-loadable": "^5.5.0",
     "react-modal": "^3.1.12",
     "react-powerplug": "^1.0.0-rc.1",
     "react-qr-reader": "^2.1.2",
-    "react-qr-svg": "^2.0.1",
+    "react-qr-svg": "^2.2.1",
     "react-redux": "^4.4.8",
     "react-router": "^3.0.0",
     "react-spring": "^5.1.2",
@@ -60,7 +60,7 @@
     "round-to": "^2.0.0",
     "styled-components": "^4.1.3",
     "styled-system": "^3.2.1",
-    "system-components": "^3.0.1",
+    "system-components": "^3.0.3",
     "triplesec": "^3.0.25",
     "yup": "^0.24.1",
     "zone-file": "^0.2.2"
@@ -79,7 +79,7 @@
     "@babel/plugin-proposal-nullish-coalescing-operator": "^7.0.0",
     "@babel/plugin-proposal-numeric-separator": "^7.0.0",
     "@babel/plugin-proposal-optional-chaining": "^7.0.0",
-    "@babel/plugin-proposal-pipeline-operator": "^7.3.0",
+    "@babel/plugin-proposal-pipeline-operator": "^7.3.2",
     "@babel/plugin-proposal-throw-expressions": "^7.0.0",
     "@babel/plugin-syntax-dynamic-import": "^7.0.0",
     "@babel/plugin-syntax-import-meta": "^7.0.0",
@@ -94,7 +94,7 @@
     "babel-loader": "^8.0.5",
     "babel-plugin-dynamic-import-node": "^2.1.0",
     "babel-plugin-lodash": "^3.3.2",
-    "babel-plugin-module-resolver": "^3.1.3",
+    "babel-plugin-module-resolver": "^3.2.0",
     "babel-plugin-rewire": "^1.2.0",
     "babel-plugin-styled-components": "^1.10.0",
     "browserstack-local": "^1.3.7",
@@ -105,12 +105,12 @@
     "cross-env": "^5.2.0",
     "css-loader": "^2.1.1",
     "enzyme": "^3.3.0",
-    "eslint": "^5.12.1",
+    "eslint": "^5.13.0",
     "eslint-config-airbnb": "^9.0.1",
     "eslint-config-prettier": "^2.9.0",
-    "eslint-import-resolver-babel-module": "^5.0.0-beta.1",
+    "eslint-import-resolver-babel-module": "^5.0.1",
     "eslint-plugin-flowtype": "^2.39.1",
-    "eslint-plugin-import": "^2.15.0",
+    "eslint-plugin-import": "^2.16.0",
     "eslint-plugin-jsx-a11y": "^1.2.2",
     "eslint-plugin-react": "^5.1.1",
     "express": "^4.16.4",
@@ -133,8 +133,8 @@
     "node-libs-browser": "^1.0.0",
     "nyc": "^14.1.0",
     "p-queue": "^3.0.0",
-    "prettier": "^1.16.1",
-    "react-hot-loader": "^4.3.3",
+    "prettier": "^1.16.4",
+    "react-hot-loader": "^4.6.5",
     "redux-mock-store": "^1.2.3",
     "request": "^2.88.0",
     "require-hacker": "^3.0.1",
@@ -145,9 +145,9 @@
     "sinon": "^1.17.7",
     "sinon-as-promised": "^4.0.0",
     "style-loader": "^0.23.0",
-    "terser-webpack-plugin": "^1.2.1",
+    "terser-webpack-plugin": "^1.2.2",
     "url-loader": "^1.0.1",
-    "webpack": "^4.29.0",
+    "webpack": "^4.29.3",
     "webpack-bundle-analyzer": "^3.3.2",
     "webpack-cli": "^3.3.2",
     "webpack-dev-server": "^3.3.1",
diff --git a/test/components/Navbar.test.js b/test/components/Navbar.test.js
deleted file mode 100644
index 412226e8a..000000000
--- a/test/components/Navbar.test.js
+++ /dev/null
@@ -1,62 +0,0 @@
-import React from 'react'
-import { expect } from 'chai'
-import { shallow } from 'enzyme'
-import Navbar, { ICONS } from '../../app/js/components/Navbar'
-
-describe('<Navbar />', () => {
-  describe('renders the component', () => {
-    const wrapper = shallow(<Navbar />)
-
-    it('creates four <Link /> tags', () => {
-      expect(wrapper.find('Link')).to.have.length(4)
-    })
-  })
-
-  const tabDetails = [
-    {
-      name: 'home',
-      activeIcon: ICONS.homeNavActive,
-      regularIcon: ICONS.homeNav
-    },
-    {
-      name:'settings',
-      activeIcon: ICONS.settingsNavActive,
-      regularIcon: ICONS.settingsNav
-    },
-    {
-      name:'wallet',
-      activeIcon: ICONS.walletNavActive,
-      regularIcon: ICONS.walletNav
-    },
-    {
-      name: 'profile',
-      prop: 'avatar',
-      activeIcon: ICONS.avatarNavActive,
-      regularIcon: ICONS.avatarNav
-    }]
-
-  tabDetails.forEach((tab) => {
-    describe(
-    `renders the component with active ${tab.name} tab`, () => {
-      const props = {
-        activeTab: tab.prop || tab.name
-      }
-
-      const wrapper = shallow(<Navbar {...props} />)
-
-      it(`uses the active ${tab.name} tab icon`, () => {
-        expect(wrapper.find(`img[src="${tab.activeIcon}"]`)
-        .exists()).to.equal(true)
-      })
-
-      const tabs = tabDetails.filter(temp => temp.name !== tab.name)
-
-      tabs.forEach((innerLoopTab) => {
-        it(`uses the regular ${innerLoopTab.name} tab icon`, () => {
-          expect(wrapper.find(`img[src="${innerLoopTab.regularIcon}"]`)
-          .exists()).to.equal(true)
-        })
-      })
-    })
-  })
-})
diff --git a/test/components/Navigation.test.js b/test/components/Navigation.test.js
deleted file mode 100644
index 83b3e840c..000000000
--- a/test/components/Navigation.test.js
+++ /dev/null
@@ -1,35 +0,0 @@
-import React from 'react'
-import { expect } from 'chai'
-import { shallow } from 'enzyme'
-import Navigation from '../../app/js/components/Navigation'
-
-describe('<Navigation />', () => {
-  describe('renders the component', () => {
-    const props = {
-      previous() {}
-    }  
-  
-    const wrapper = shallow(<Navigation {...props} />)
-
-    it('uses a ChevronLeftIcon', () => {
-      expect(wrapper.find('ChevronLeftIcon').exists()).to.equal(true)
-    })
-
-    it('includes the previous label', () => {
-      expect(wrapper.html()).to.contain('Back')
-    })
-  })
-
-  describe('renders the component with a label', () => {
-    const props = {
-      previous() {},
-      previousLabel: 'Previous Page'
-    }
-
-    const wrapper = shallow(<Navigation {...props} />)
-
-    it('includes the supplied label', () => {
-      expect(wrapper.html()).to.contain('Previous Page')
-    })
-  })
-})