diff --git a/package.json b/package.json
index 2cfef7c96d..b9394193a7 100644
--- a/package.json
+++ b/package.json
@@ -13,8 +13,8 @@
     "async": "^1.5.0",
     "autoprefixer": "^6.4.0",
     "aws-sdk": "^2.0.25",
-    "babel-loader": "^6.0.0",
     "babel-core": "^6.0.0",
+    "babel-loader": "^6.0.0",
     "babel-plugin-transform-async-to-module-method": "^6.8.0",
     "babel-polyfill": "^6.6.1",
     "babel-preset-es2015": "^6.6.0",
@@ -108,6 +108,7 @@
     "vue": "^2.0.0-rc.6",
     "vue-hot-reload-api": "^1.2.0",
     "vue-loader": "^9.4.0",
+    "vue-resource": "^1.0.2",
     "vue-router": "^2.0.0-rc.5",
     "vuex": "^2.0.0-rc.5",
     "vuex-router-sync": "^3.0.0",
diff --git a/webpack/dev-client.js b/webpack/dev-client.js
index 18aa1e2195..b10b0eed48 100644
--- a/webpack/dev-client.js
+++ b/webpack/dev-client.js
@@ -1,6 +1,6 @@
 /* eslint-disable */
 require('eventsource-polyfill')
-var hotClient = require('webpack-hot-middleware/client?noInfo=true&reload=true')
+var hotClient = require('webpack-hot-middleware/client?noInfo=true&reload=true&overlay=false')
 
 hotClient.subscribe(function (event) {
   if (event.action === 'reload') {
diff --git a/webpack/webpack.base.conf.js b/webpack/webpack.base.conf.js
index 26ad2776c9..0f3a02ee8a 100644
--- a/webpack/webpack.base.conf.js
+++ b/webpack/webpack.base.conf.js
@@ -86,6 +86,7 @@ var baseConfig = {
 if (!IS_PROD) {
   baseConfig.eslint = {
     formatter: require('eslint-friendly-formatter'),
+    emitWarning: true,
   };
 }
 module.exports = baseConfig;
\ No newline at end of file
diff --git a/webpack/webpack.dev.conf.js b/webpack/webpack.dev.conf.js
index 849ff59c6f..492a4ea12c 100644
--- a/webpack/webpack.dev.conf.js
+++ b/webpack/webpack.dev.conf.js
@@ -23,7 +23,6 @@ module.exports = merge(baseWebpackConfig, {
     // https://github.com/glenjamin/webpack-hot-middleware#installation--usage
     new webpack.optimize.OccurenceOrderPlugin(),
     new webpack.HotModuleReplacementPlugin(),
-    new webpack.NoErrorsPlugin(),
     // https://github.com/ampedandwired/html-webpack-plugin
     new HtmlWebpackPlugin({
       filename: 'index.html',
diff --git a/website/client/.eslintrc b/website/client/.eslintrc
index 138812151a..5ad621790d 100644
--- a/website/client/.eslintrc
+++ b/website/client/.eslintrc
@@ -6,5 +6,4 @@
   "plugins": [
     "html"
   ]
-}
-
+}
\ No newline at end of file
diff --git a/website/client/components/App.vue b/website/client/components/App.vue
index cff6171fbf..04cc8fd6d7 100644
--- a/website/client/components/App.vue
+++ b/website/client/components/App.vue
@@ -1,6 +1,7 @@
 <template lang="pug">
 #app
   site-header
+  p Welcome back {{user.profile.name}}
   ul
     li
       router-link(to='/') Home
@@ -11,15 +12,35 @@
 
 <script>
 import SiteHeader from './siteHeader';
+import { mapState } from 'vuex';
 
 export default {
   components: {
     SiteHeader,
   },
+
+  computed: mapState(['user']),
 };
 </script>
 
 <style>
+html, body {
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+}
+
+#loading-screen { /* outside Vue because can't wait for rendering to finish */
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: #fff;
+  z-index: 10001;
+}
+
 #app {
   margin: 0 auto;
   width: 80%;
diff --git a/website/client/components/app.vue b/website/client/components/app.vue
index cff6171fbf..04cc8fd6d7 100644
--- a/website/client/components/app.vue
+++ b/website/client/components/app.vue
@@ -1,6 +1,7 @@
 <template lang="pug">
 #app
   site-header
+  p Welcome back {{user.profile.name}}
   ul
     li
       router-link(to='/') Home
@@ -11,15 +12,35 @@
 
 <script>
 import SiteHeader from './siteHeader';
+import { mapState } from 'vuex';
 
 export default {
   components: {
     SiteHeader,
   },
+
+  computed: mapState(['user']),
 };
 </script>
 
 <style>
+html, body {
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+}
+
+#loading-screen { /* outside Vue because can't wait for rendering to finish */
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: #fff;
+  z-index: 10001;
+}
+
 #app {
   margin: 0 auto;
   width: 80%;
diff --git a/website/client/index.html b/website/client/index.html
index 3b9d7ab95e..51d3cf586f 100644
--- a/website/client/index.html
+++ b/website/client/index.html
@@ -5,6 +5,8 @@
     <title>Habitica</title>
   </head>
   <body>
+    <!-- #loading-screen needs to be rendered before vue, will be deleted once app is loaded -->
+    <div id="loading-screen">Loading...</div>
     <div id="app"></div>
     <!-- built files will be auto injected -->
   </body>
diff --git a/website/client/main.js b/website/client/main.js
index d2024e22ac..db7c75a42b 100644
--- a/website/client/main.js
+++ b/website/client/main.js
@@ -4,16 +4,37 @@ require('babel-polyfill');
 
 import Vue from 'vue';
 import VuexRouterSync from 'vuex-router-sync';
-import App from './components/app';
+import VueResource from 'vue-resource';
+import AppComponent from './components/app';
 import router from './router';
 import store from './vuex/store';
 
+Vue.use(VueResource);
+Vue.http.headers.common['x-api-user'] = '';
+Vue.http.headers.common['x-api-key'] = '';
+
 // Sync Vuex and Router
 VuexRouterSync.sync(store, router);
 
-new Vue({ // eslint-disable-line no-new
+const app =  new Vue({ // eslint-disable-line no-new
   router,
   store,
-  el: '#app',
-  render: h => h(App),
-});
\ No newline at end of file
+  render: h => h(AppComponent),
+  mounted () { // Remove the loading screen when the app is mounted
+    let loadingScreen = document.getElementById('loading-screen');
+    if (loadingScreen) document.body.removeChild(loadingScreen);
+  },
+});
+
+// Setup listener for title that is outside Vue's scope
+store.watch(state => state.title, (title) => {
+  document.title = title;
+});
+
+// Mount the app when the user is loaded
+let userWatcher = store.watch(state => state.user, (user) => {
+  if (user && user._id) {
+    userWatcher(); // remove the watcher
+    app.$mount('#app');
+  }
+});
diff --git a/website/client/vuex/actions.js b/website/client/vuex/actions.js
new file mode 100644
index 0000000000..667c7635f9
--- /dev/null
+++ b/website/client/vuex/actions.js
@@ -0,0 +1,15 @@
+import Vue from 'vue';
+
+export function setTitle (store, title) {
+  store.commit('SET_TITLE', title);
+}
+
+export function fetchUser (store) {
+  let promise = Vue.http.get('/api/v3/user');
+
+  promise.then(response => {
+    store.commit('SET_USER', response.body.data);
+  });
+
+  return promise;
+}
\ No newline at end of file
diff --git a/website/client/vuex/mutations.js b/website/client/vuex/mutations.js
new file mode 100644
index 0000000000..7127bb2049
--- /dev/null
+++ b/website/client/vuex/mutations.js
@@ -0,0 +1,7 @@
+export function SET_TITLE (state, title) {
+  state.title = title;
+}
+
+export function SET_USER (state, userJson) {
+  state.user = userJson;
+}
\ No newline at end of file
diff --git a/website/client/vuex/store.js b/website/client/vuex/store.js
index 6ee08f7a8b..9dc10fd8f3 100644
--- a/website/client/vuex/store.js
+++ b/website/client/vuex/store.js
@@ -1,12 +1,17 @@
 import Vue from 'vue';
 import Vuex from 'vuex';
+import * as mutations from './mutations';
+import * as actions from './actions';
 
 Vue.use(Vuex);
 
 const state = {
   title: 'Habitica',
+  user: {},
 };
 
 export default new Vuex.Store({
   state,
+  mutations,
+  actions,
 });
\ No newline at end of file