diff --git a/firebase.json b/firebase.json
index f489d63..906b6e5 100644
--- a/firebase.json
+++ b/firebase.json
@@ -1,5 +1,5 @@
 {
-  "firebase": "gkeep-vueifire2",
+  "firebase": "gkeep-vueifire3",
   "public": "dist",
   "ignore": [
     "firebase.json",
diff --git a/index.html b/index.html
index dd9c033..c45be7a 100644
--- a/index.html
+++ b/index.html
@@ -12,7 +12,7 @@
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
   </head>
   <body>
-    <a href="https://github.com/SNiels/gkeep-vueifire"><img style="position: absolute; top: 0; right: 0; border: 0; z-index: 2;" src="https://camo.githubusercontent.com/365986a132ccd6a44c23a9169022c0b5c890c387/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f7265645f6161303030302e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png"></a>
+    <a href="https://github.com/SNiels/gkeep-vueifire"><img style="position: fixed; top: 0; left: 0; border: 0; z-index: 2;" src="https://camo.githubusercontent.com/82b228a3648bf44fc1163ef44c62fcc60081495e/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f6c6566745f7265645f6161303030302e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_left_red_aa0000.png"></a>
     <app></app>
     <footer>
       Made by <a href="http://www.sniels.com">Niels Swimberghe</a> with a lot of <i class="fa fa-coffee"></i> and <i class="fa fa-heart"></i>
diff --git a/package.json b/package.json
index 99f7240..a3801ca 100644
--- a/package.json
+++ b/package.json
@@ -14,7 +14,8 @@
     "babel-runtime": "^5.8.0",
     "firebase": "^2.4.2",
     "masonry-layout": "^4.0.0",
-    "vue": "^1.0.18"
+    "vue": "^1.0.18",
+    "vue-router": "^0.7.13"
   },
   "devDependencies": {
     "babel-core": "^6.0.0",
diff --git a/src/App.vue b/src/App.vue
index 2b2f8b9..4af861b 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,28 +1,32 @@
 <template>
   <div>
-    <create-note-form></create-note-form>
-    <notes></notes>
-    <update-modal :note.sync="selectedNote"></update-modal>
+    <header-bar></header-bar>
+    <alerts :alerts="alerts"></alerts>
+    <router-view></router-view>
   </div>
 </template>
 <script>
-import Notes from './components/notes/Index'
-import CreateNoteForm from './components/notes/Create'
-import UpdateModal from './components/notes/UpdateModal'
+import Alerts from './components/Alerts'
+import HeaderBar from './components/Header'
 export default {
   components: {
-    Notes,
-    CreateNoteForm,
-    UpdateModal
+    Alerts,
+    HeaderBar
   },
   data () {
     return {
-      selectedNote: null
+      alerts: []
     }
   },
   events: {
-    'note.selected': function (note) {
-      this.selectedNote = note
+    'alert': function (alert) {
+      this.alerts.push(alert)
+      setTimeout(() => {
+        this.alerts.$remove(alert)
+      }, alert.duration || 1500)
+    },
+    'search': function (searchText) {
+      this.$broadcast('search', searchText) // send the event downwards to children
     }
   }
 }
@@ -36,14 +40,14 @@ export default {
 html{
   position: relative;
   min-height: 100%;
-  font-family: sans-serif;
+  font-family: 'Roboto', sans-serif;
 }
 body{
   background: #eee;
   min-height: 100%;
 }
 body > div{
-  padding: 16px 16px 50px;
+  padding: 50px 16px;
   min-height: 100vh;
   background: #eee;
   position: relative;
@@ -71,4 +75,9 @@ footer iframe{
   position: relative;
   top: 4px;
 }
+.clearfix:after {
+  content: "";
+  display: table;
+  clear: both;
+}
 </style>
diff --git a/src/components/Alerts.vue b/src/components/Alerts.vue
new file mode 100644
index 0000000..2bb56f7
--- /dev/null
+++ b/src/components/Alerts.vue
@@ -0,0 +1,48 @@
+<template>
+  <div class="alerts">
+    <div v-for="alert in alerts" v-bind:class="alert.type" transition="expand">
+      <p>
+        {{alert.message}}
+      </p>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  props: ['alerts']
+}
+</script>
+<style>
+.alerts{
+  position: fixed;
+  top: 50px;
+  left: 0;
+  right: 0;
+  z-index: 1;
+}
+.alerts div{
+  background: #bbb;
+  overflow: hidden;
+}
+.alerts div.error{
+  background: #e03c3c;
+  color: #fff;
+}
+.alerts div.success{
+  background: #41b883;
+  color: #fff;
+}
+.alerts p{
+  width: 480px;
+  margin: 0 auto;
+  padding: 4px;
+  text-align: center;
+}
+.expand-transition{
+  max-height: 200px; /* height 0 -> auto is not animatable, so use max-height 0 -> large height */
+  transition: max-height 1s ease;
+}
+.expand-enter, .expand-leave{
+  max-height: 0;
+}
+</style>
diff --git a/src/components/Header.vue b/src/components/Header.vue
new file mode 100644
index 0000000..18c581b
--- /dev/null
+++ b/src/components/Header.vue
@@ -0,0 +1,119 @@
+<template>
+  <header v-if="user">
+    <input placeholder="Search" v-model="searchQuery" debounce="500">
+    <div>
+      <span>{{user.userTitle}}</span>
+      <img :src="user.imageUrl" alt="{{user.userTitle}}"/>
+      <i class="fa fa-sign-out" aria-hidden="true" v-on:click="signOut"></i>
+    </div>
+  </header>
+</template>
+<script>
+import authRepository from 'src/data/AuthRepository'
+export default {
+  data () {
+    return {
+      user: null,
+      searchQuery: ''
+    }
+  },
+  watch: {
+    'searchQuery': function () {
+      this.$dispatch('search', this.searchQuery)
+    }
+  },
+  methods: {
+    processUser (authed) {
+      switch (authed.provider) {
+        case 'password':
+          this.user = {
+            userTitle: authed.password.email,
+            imageUrl: authed.password.profileImageURL
+          }
+          break
+        default:
+          this.user = {
+            userTitle: authed[authed.provider].displayName,
+            imageUrl: authed[authed.provider].profileImageURL
+          }
+          break
+      }
+    },
+    signOut () {
+      authRepository.signOut()
+      this.$router.go('auth')
+    }
+  },
+  ready () {
+    authRepository.detachFirebaseListeners()
+    authRepository.on('authed', () => {
+      this.processUser(authRepository.getAuth())
+    })
+    authRepository.on('unauthed', () => {
+      this.user = null
+    })
+    this.user = authRepository.getAuth()
+    authRepository.attachFirebaseListeners()
+  }
+}
+</script>
+<style>
+header{
+  position: fixed;
+  left: 0;
+  top: 0;
+  right: 0;
+  z-index: 1;
+  height: 50px;
+  background: #333;
+  padding: 10px;
+  box-shadow: 0 2px 5px rgba(0,0,0,.4);
+}
+header input {
+  display: block;
+  width: 480px;
+  margin: 0 auto;
+  height: 30px;
+  border: none;
+  padding: 0 16px;
+  border-radius: 2px;
+}
+header span {
+  padding: 15px;
+  color: #fff;
+  position: absolute;
+  right: 95px;
+  top: 1px;
+}
+header img {
+  width: 35px;
+  height: 35px;
+  border-radius: 20px;
+  position: absolute;
+  right: 60px;
+  top: 8px;
+}
+header i.fa {
+  position: absolute;
+  display: block;
+  color: #fff;
+  right: 15px;
+  top: 13px;
+  font-size: 25px;
+  cursor: pointer;
+}
+@media screen and (max-width: 1200px) {
+  header span{
+    display: none;
+  }
+}
+@media screen and (max-width: 720px) {
+  header input{
+    width: calc(100% - 64px);
+    margin: 0 0 0 16px;
+  }
+  header span, header img {
+    display: none;
+  }
+}
+</style>
diff --git a/src/components/notes/Create.vue b/src/components/notes/Create.vue
index 2b9d82e..1b165f1 100644
--- a/src/components/notes/Create.vue
+++ b/src/components/notes/Create.vue
@@ -20,9 +20,10 @@ export default {
     createNote () {
       if (this.title.trim() || this.content.trim()) {
         noteRepository.create({title: this.title, content: this.content}, (err) => {
-          if (err) throw err // TODO: inform the user
+          if (err) return this.$dispatch('alert', {type: 'error', message: 'Failed to create note'})
           this.title = ''
           this.content = ''
+          this.$dispatch('alert', {type: 'success', message: 'Note was successfully created'})
         })
       }
     }
@@ -34,7 +35,7 @@ form.create-note{
   position: relative;
   width: 480px;
   max-width: 100%;
-  margin: 0 auto 15px;
+  margin: 30px auto;
   background: #fff;
   padding: 15px;
   border-radius: 2px;
diff --git a/src/components/notes/Index.vue b/src/components/notes/Index.vue
index a6cbcf8..fec0c73 100644
--- a/src/components/notes/Index.vue
+++ b/src/components/notes/Index.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="notes" v-el:notes>
     <note
-      v-for="note in notes"
+      v-for="note in filteredNotes"
       :note="note"
       v-on:click="selectNote(note)"
       >
@@ -18,7 +18,8 @@ export default {
   },
   data () {
     return {
-      notes: []
+      notes: [],
+      searchQuery: ''
     }
   },
   methods: {
@@ -28,16 +29,32 @@ export default {
       this.$dispatch('note.selected', {key, title, content})
     }
   },
+  computed: {
+    filteredNotes () {
+      return this.notes.filter((note) => {
+        if (this.searchQuery) return (note.title.indexOf(this.searchQuery) !== -1 || note.content.indexOf(this.searchQuery) !== -1)
+        return true
+      })
+    }
+  },
   watch: {
-    'notes': { // watch the notes array for changes
+    'filteredNotes': { // watch the notes array for changes
       handler () {
-        this.masonry.reloadItems()
-        this.masonry.layout()
+        this.$nextTick(() => {
+          this.masonry.reloadItems()
+          this.masonry.layout()
+        })
       },
       deep: true // we also want to watch changed inside individual notes
     }
   },
+  events: {
+    'search': function (searchQuery) {
+      this.searchQuery = searchQuery
+    }
+  },
   ready () {
+    noteRepository.detachFirebaseListeners()
     this.masonry = new Masonry(this.$els.notes, {
       itemSelector: '.note',
       columnWidth: 240,
@@ -56,6 +73,7 @@ export default {
       let note = noteRepository.find(this.notes, key) // get specific note from the notes in our VM by key
       this.notes.$remove(note) // remove note from notes array
     })
+    noteRepository.attachFirebaseListeners()
   }
 }
 </script>
diff --git a/src/components/notes/Note.vue b/src/components/notes/Note.vue
index e7c3e1c..ee3298c 100644
--- a/src/components/notes/Note.vue
+++ b/src/components/notes/Note.vue
@@ -26,7 +26,7 @@ export default {
   methods: {
     remove () {
       noteRepository.remove(this.note, (err) => {
-        if (err) throw err // TODO: inform the user
+        if (err) return this.$dispatch('alert', {type: 'error', message: 'Failed to remove note'})
       })
     }
   }
diff --git a/src/components/notes/UpdateModal.vue b/src/components/notes/UpdateModal.vue
index ad3fe74..f82b607 100644
--- a/src/components/notes/UpdateModal.vue
+++ b/src/components/notes/UpdateModal.vue
@@ -18,14 +18,15 @@ export default {
   methods: {
     remove () {
       noteRepository.remove(this.note, (err) => {
-        if (err) throw err // TODO: inform the user
+        if (err) return this.$dispatch('alert', {type: 'error', message: 'Failed to remove note'})
         this.dismissModal()
       })
     },
     update () {
       noteRepository.update(this.note, (err) => {
-        if (err) throw err // TODO: inform the user
+        if (err) return this.$dispatch('alert', {type: 'error', message: 'Failed to update note'})
         this.dismissModal()
+        this.$dispatch('alert', {type: 'success', message: 'Note was successfully updated'})
       })
     },
     dismissModal () {
diff --git a/src/components/pages/Auth.vue b/src/components/pages/Auth.vue
new file mode 100644
index 0000000..fd2b883
--- /dev/null
+++ b/src/components/pages/Auth.vue
@@ -0,0 +1,138 @@
+<template>
+  <form class="auth-form" v-on:submit.prevent="wantsToSignUp ? signUpWithPassword() : signInWithPassword()">
+    <h1>{{wantsToSignUp ? 'Sign up' : 'Sign in'}}</h1>
+    <div>
+      <label for="email">Email</label>
+      <input type="email" name="email" id="email" placeholder="Email" required v-model="email">
+    </div>
+    <div>
+      <label for="password">Password</label>
+      <input type="password" name="password" id="password" required v-model="password">
+    </div>
+    <div v-show="wantsToSignUp">
+      <label for="confirm-password">Confirm Password</label>
+      <input type="password" name="confirm-password" id="confirm-password" v-model="confirmPassword">
+    </div>
+    <div v-show="!wantsToSignUp" class="clearfix btn-group">
+      <button type="submit">Sign in</button>
+      <button type="button" v-on:click="wantsToSignUp = true">Sign up</button>
+    </div>
+    <div v-show="wantsToSignUp">
+      <button type="submit" class="signup-submit">Sign up</button>
+    </div>
+    <hr>
+    <div class="social-providers">
+      <a href="#" v-on:click.prevent="signInWithProvider('facebook')"><i class="fa fa-facebook-square" aria-hidden="true"></i></a>
+      <a href="#" v-on:click.prevent="signInWithProvider('twitter')"><i class="fa fa-twitter-square" aria-hidden="true"></i></a>
+      <a href="#" v-on:click.prevent="signInWithProvider('google')"><i class="fa fa-google-plus-square" aria-hidden="true"></i></a>
+      <a href="#" v-on:click.prevent="signInWithProvider('github')"><i class="fa fa-github-square" aria-hidden="true"></i></a>
+    </div>
+  </form>
+</template>
+<script>
+import authRepository from 'src/data/AuthRepository'
+export default {
+  data () {
+    return {
+      email: '',
+      password: '',
+      confirmPassword: '',
+      wantsToSignUp: false
+    }
+  },
+  methods: {
+    signUpWithPassword () {
+      if (this.password === this.confirmPassword) {
+        authRepository.signUpWithPassword({
+          email: this.email,
+          password: this.password
+        })
+          .then((userData) => this.signInWithPassword())                                              // signIn
+          .then(() => this.$dispatch('alert', {type: 'success', message: 'Signed up successfully'}))  // let user know everything was successful
+          .catch((error) => this.$dispatch('alert', {type: 'error', message: error.message}))         // tell the user an error occurred
+      }
+    },
+    signInWithPassword () {
+      return authRepository.signInWithPassword({
+        email: this.email,
+        password: this.password
+      })
+        .then((userData) => {
+          this.$dispatch('alert', {type: 'success', message: 'Signed in successfully'})
+          this.onSignedIn()
+          return userData
+        })
+        .catch((error) => this.$dispatch('alert', {type: 'error', message: error.message})) // tell the user an error occurred
+    },
+    signInWithProvider (provider) {
+      authRepository.signInWithProvider(provider, (error, authData) => {
+        if (error) this.$dispatch('alert', {type: 'error', message: error.message})
+        this.onSignedIn()
+      })
+    },
+    onSignedIn () {
+      this.$router.go({name: 'notes'})
+    }
+  }
+}
+</script>
+<style>
+.auth-form{
+  width: 480px;
+  max-width: 100%;
+  margin: 25vh auto 15px;
+  background: #fff;
+  padding: 15px;
+  border-radius: 2px;
+  box-shadow: 0 1px 5px #ccc;
+}
+.auth-form h1{
+  font-weight: 300;
+}
+.auth-form > div {
+  margin-top: 15px;
+}
+.auth-form input {
+  height: 32px;
+  border: none;
+  border-bottom: 2px solid #bbb;
+}
+.auth-form input:focus{
+  border-bottom-color: #555;
+}
+.auth-form label, .auth-form input{
+  display: block;
+  width: 100%;
+}
+.auth-form button {
+  font-size: 18px;
+  background: #fff;
+  border: 1px solid #41b883;
+  padding: 4px 6px;
+  margin: 0;
+  border-radius: 3px;
+}
+.auth-form .btn-group button{
+  border-radius: 3px 0 0 3px;
+  width: 50%;
+  float: left;
+}
+.auth-form .btn-group button + button{
+  border-radius: 0 3px 3px 0;
+  border-left: none;
+}
+.auth-form .signup-submit{
+  width: 100%;
+}
+.auth-form hr{
+  margin-top: 20px;
+}
+.auth-form .social-providers{
+  text-align: center;
+}
+.auth-form .social-providers a{
+  color: #41b883;
+  font-size: 36px;
+  padding: 4px;
+}
+</style>
diff --git a/src/components/pages/Notes.vue b/src/components/pages/Notes.vue
new file mode 100644
index 0000000..51ab9a0
--- /dev/null
+++ b/src/components/pages/Notes.vue
@@ -0,0 +1,31 @@
+<template>
+  <div>
+    <create-note-form></create-note-form>
+    <notes></notes>
+    <update-modal :note.sync="selectedNote"></update-modal>
+  </div>
+</template>
+<script>
+import Notes from 'src/components/notes/Index'
+import CreateNoteForm from 'src/components/notes/Create'
+import UpdateModal from 'src/components/notes/UpdateModal'
+export default {
+  components: {
+    Notes,
+    CreateNoteForm,
+    UpdateModal
+  },
+  data () {
+    return {
+      selectedNote: null
+    }
+  },
+  events: {
+    'note.selected': function (note) {
+      this.selectedNote = note
+    }
+  }
+}
+</script>
+<style>
+</style>
diff --git a/src/data/AuthRepository.js b/src/data/AuthRepository.js
new file mode 100644
index 0000000..1355c95
--- /dev/null
+++ b/src/data/AuthRepository.js
@@ -0,0 +1,50 @@
+import Firebase from 'firebase'
+import EventEmitter from 'events'
+
+class AuthRepository extends EventEmitter {
+  constructor () {
+    super()
+    this.ref = new Firebase('https://gkeep-vueifire3.firebaseio.com/')
+  }
+  attachFirebaseListeners () {
+    this.ref.onAuth(this.onAuth, this)
+  }
+  detachFirebaseListeners () {
+    this.ref.offAuth(this.onAuth, this)
+  }
+  onAuth (authData) {
+    if (authData) {
+      this.emit('authed', authData)
+    } else {
+      this.emit('unauthed')
+    }
+  }
+  getAuth () {
+    return this.ref.getAuth()
+  }
+  signInWithPassword (credentials) {
+    return this.ref.authWithPassword(credentials)
+  }
+  signUpWithPassword (credentials) {
+    return this.ref.createUser(credentials) // this will create a Firebase user for authentication, this is separate from our own user objects
+  }
+  signInWithProvider (provider, callback) {
+    this.ref.authWithOAuthPopup(provider, (error, authData) => {
+      if (error) {
+        if (error.code === 'TRANSPORT_UNAVAILABLE') {
+          // fall-back to browser redirects, and pick up the session
+          // automatically when we come back to the origin page
+          this.ref.authWithOAuthRedirect(provider, (error) => {
+            if (callback) callback(error, authData)
+          })
+        }
+      } else if (authData) {
+        if (callback) callback(null, authData)
+      }
+    })
+  }
+  signOut () {
+    this.ref.unauth()
+  }
+}
+export default new AuthRepository() // this instance will be shared across imports
diff --git a/src/data/NoteRepository.js b/src/data/NoteRepository.js
index bcca862..7472c9a 100644
--- a/src/data/NoteRepository.js
+++ b/src/data/NoteRepository.js
@@ -4,36 +4,41 @@ import EventEmitter from 'events'
 
 // extend EventEmitter so user of NoteRepository can react to our own defined events (ex: noteRepository.on('added'))
 class NoteRepository extends EventEmitter {
+  get uid () {
+    return this.ref.getAuth().uid
+  }
+  get notesRef () {
+    return this.ref.child(`users/${this.uid}/notes`)
+  }
   constructor () {
     super()
     // firebase reference to the notes
-    this.ref = new Firebase('https://gkeep-vueifire2.firebaseio.com/notes') // will have same result as new Firebase('https://resplendent-heat-896.firebaseio.com/').child('notes')
-    this.attachFirebaseListeners()
+    this.ref = new Firebase('https://gkeep-vueifire3.firebaseio.com') // will have same result as new Firebase('https://resplendent-heat-896.firebaseio.com/').child('notes')
   }
   // creates a note
   create ({title = '', content = ''}, onComplete) {
-    this.ref.push({title, content}, onComplete)
+    this.notesRef.push({title, content}, onComplete)
   }
   // updates a note
   update ({key, title = '', content = ''}, onComplete) {
-    this.ref.child(key).update({title, content}, onComplete) // key is used to find the child, a new note object is made without the key, to prevent key being inserted in Firebase
+    this.notesRef.child(key).update({title, content}, onComplete) // key is used to find the child, a new note object is made without the key, to prevent key being inserted in Firebase
     // new Firebase(`https://gkeep-vueifire2.firebaseio.com/notes/${key}`).update(...)
   }
   // removes a note
   remove ({key}, onComplete) {
-    this.ref.child(key).remove(onComplete)
+    this.notesRef.child(key).remove(onComplete)
   }
   // attach listeners to Firebase
   attachFirebaseListeners () {
-    this.ref.on('child_added', this.onAdded, this)
-    this.ref.on('child_removed', this.onRemoved, this)
-    this.ref.on('child_changed', this.onChanged, this)
+    this.notesRef.on('child_added', this.onAdded, this)
+    this.notesRef.on('child_removed', this.onRemoved, this)
+    this.notesRef.on('child_changed', this.onChanged, this)
   }
   // dettach listeners from Firebase
   detachFirebaseListeners () {
-    this.ref.off('child_added', this.onAdded, this)
-    this.ref.off('child_removed', this.onRemoved, this)
-    this.ref.off('child_changed', this.onChanged, this)
+    this.notesRef.off('child_added', this.onAdded, this)
+    this.notesRef.off('child_removed', this.onRemoved, this)
+    this.notesRef.off('child_changed', this.onChanged, this)
   }
   onAdded (snapshot) {
     // process data
diff --git a/src/main.js b/src/main.js
index 4ae1185..bc3fc52 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,8 +1,40 @@
 import Vue from 'vue'
+import VueRouter from 'vue-router'
 import App from './App'
+import NotesPage from './components/pages/Notes'
+import AuthPage from './components/pages/Auth'
+import authRepository from './data/AuthRepository'
 
-/* eslint-disable no-new */
-new Vue({
-  el: 'body',
+Vue.use(VueRouter)
+
+let app = Vue.extend({
   components: { App }
 })
+
+let router = new VueRouter()
+
+router.map({
+  '/notes': {
+    name: 'notes',
+    component: NotesPage,
+    auth: true // this route requires the user to be signed in
+  },
+  '/auth': {
+    name: 'auth',
+    component: AuthPage
+  }
+})
+
+router.alias({
+  '/': '/notes'
+})
+
+router.beforeEach(function (transition) {
+  if (transition.to.auth && !authRepository.getAuth()) {
+    transition.redirect('/auth')
+  } else {
+    transition.next()
+  }
+})
+
+router.start(app, 'body')
