diff --git a/.babelrc b/.babelrc
index bca3364fc..307583ffd 100644
--- a/.babelrc
+++ b/.babelrc
@@ -1,4 +1,4 @@
 {
-  "presets": ["es2015", "stage-0"],
+  "presets": ["es2015", "stage-0", "react"],
   "plugins": ["transform-runtime", "transform-async-to-generator"]
 }
diff --git a/mascara/server/util.js b/mascara/server/util.js
index 6ab41b729..af2daddb9 100644
--- a/mascara/server/util.js
+++ b/mascara/server/util.js
@@ -23,7 +23,7 @@ function createBundle (entryPoint) {
     cache: {},
     packageCache: {},
     plugin: [watchify],
-  })
+  }).transform('babelify')
 
   bundler.on('update', bundle)
   bundle()
diff --git a/mascara/src/app/first-time/create-password-screen.js b/mascara/src/app/first-time/create-password-screen.js
new file mode 100644
index 000000000..afb1ad8f6
--- /dev/null
+++ b/mascara/src/app/first-time/create-password-screen.js
@@ -0,0 +1,13 @@
+import React, {Component, PropTypes} from 'react'
+
+export default class CreatePasswordScreen extends Component {
+
+  render() {
+    return (
+      <div>
+
+      </div>
+    )
+  }
+
+}
\ No newline at end of file
diff --git a/mascara/src/app/first-time/index.js b/mascara/src/app/first-time/index.js
new file mode 100644
index 000000000..a2cb8d71c
--- /dev/null
+++ b/mascara/src/app/first-time/index.js
@@ -0,0 +1,54 @@
+import React, {Component, PropTypes} from 'react'
+import CreatePasswordScreen from './create-password-screen'
+
+export default class FirstTimeFlow extends Component {
+
+  static propTypes = {
+    screenType: PropTypes.string
+  };
+
+  static defaultProps = {
+    screenType: FirstTimeFlow.CREATE_PASSWORD
+  };
+
+  static SCREEN_TYPE = {
+    CREATE_PASSWORD: 'create_password',
+    UNIQUE_IMAGE: 'unique_image',
+    TERM_OF_USE: 'term_of_use',
+    BACK_UP_PHRASE: 'back_up_phrase',
+    CONFIRM_BACK_UP_PHRASE: 'confirm_back_up_phrase',
+    BUY_ETHER: 'buy_ether'
+  };
+
+  static getScreenType = ({isInitialized, noActiveNotices, seedWords}) => {
+    const {SCREEN_TYPE} = FirstTimeFlow
+
+    if (!isInitialized) {
+      return SCREEN_TYPE.CREATE_PASSWORD
+    }
+
+    if (!noActiveNotices) {
+      return SCREEN_TYPE.TERM_OF_USE
+    }
+
+    if (seedWords) {
+      return SCREEN_TYPE.BACK_UP_PHRASE
+    }
+  };
+
+  renderScreen() {
+    const {SCREEN_TYPE} = FirstTimeFlow
+
+    switch (this.props.screenType) {
+      case SCREEN_TYPE.CREATE_PASSWORD:
+        return <CreatePasswordScreen />
+      default:
+        return <noscript />
+    }
+  }
+
+  render() {
+    return <div>{this.renderScreen()}</div>
+  }
+
+}
diff --git a/ui/app/app.js b/ui/app/app.js
index 613577913..57e3d3366 100644
--- a/ui/app/app.js
+++ b/ui/app/app.js
@@ -3,6 +3,8 @@ const Component = require('react').Component
 const connect = require('react-redux').connect
 const h = require('react-hyperscript')
 const actions = require('./actions')
+// mascara
+const MascaraFirstTime = require('../../mascara/src/app/first-time').default
 // init
 const InitializeMenuScreen = require('./first-time/init-menu')
 const NewKeyChainScreen = require('./new-keychain')
@@ -43,6 +45,10 @@ function mapStateToProps (state) {
     accounts,
     address,
     keyrings,
+    isMascara,
+    isInitialized,
+    noActiveNotices,
+    seedWords
   } = state.metamask
   const selected = address || Object.keys(accounts)[0]
 
@@ -56,6 +62,8 @@ function mapStateToProps (state) {
     currentView: state.appState.currentView,
     activeAddress: state.appState.activeAddress,
     transForward: state.appState.transForward,
+    isMascara: state.metamask.isMascara,
+    isOnboarding: Boolean(!noActiveNotices || seedWords || !isInitialized),
     seedWords: state.metamask.seedWords,
     unapprovedTxs: state.metamask.unapprovedTxs,
     unapprovedMsgs: state.metamask.unapprovedMsgs,
@@ -123,6 +131,11 @@ App.prototype.renderAppBar = function () {
   const props = this.props
   const state = this.state || {}
   const isNetworkMenuOpen = state.isNetworkMenuOpen || false
+  const {isMascara, isOnboarding} = props
+
+  if (isMascara && isOnboarding) {
+    return null
+  }
 
   return (
 
@@ -407,9 +420,20 @@ App.prototype.renderBackButton = function (style, justArrow = false) {
   )
 }
 
+App.prototype.renderMascaraFirstTime = function () {
+  return 'hi'
+}
+
 App.prototype.renderPrimary = function () {
   log.debug('rendering primary')
   var props = this.props
+  const {isMascara, isOnboarding} = props
+
+  if (isMascara && isOnboarding) {
+    return h(MascaraFirstTime, {
+      screenType: MascaraFirstTime.getScreenType(props)
+    })
+  }
 
   // notices
   if (!props.noActiveNotices) {
diff --git a/ui/app/reducers/metamask.js b/ui/app/reducers/metamask.js
index e0c416c2d..323539eef 100644
--- a/ui/app/reducers/metamask.js
+++ b/ui/app/reducers/metamask.js
@@ -1,5 +1,6 @@
 const extend = require('xtend')
 const actions = require('../actions')
+const MetamascaraPlatform = require('../../../app/scripts/platforms/window')
 
 module.exports = reduceMetamask
 
@@ -10,6 +11,7 @@ function reduceMetamask (state, action) {
   var metamaskState = extend({
     isInitialized: false,
     isUnlocked: false,
+    isMascara: window.platform instanceof MetamascaraPlatform,
     rpcTarget: 'https://rawtestrpc.metamask.io/',
     identities: {},
     unapprovedTxs: {},