diff --git a/package.json b/package.json
index 3d646ac..2d2214a 100644
--- a/package.json
+++ b/package.json
@@ -9,7 +9,9 @@
     "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
   },
   "dependencies": {
-    "vue": "^2.2.1"
+    "vue": "^2.2.1",
+    "vue-resource": "^1.2.1",
+    "vue-router": "^2.3.1"
   },
   "devDependencies": {
     "babel-core": "^6.0.0",
diff --git a/src/App.vue b/src/App.vue
index 7b5bbb8..bfb1353 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,43 +1,27 @@
 <template>
     <div>
-        <app-header v-bind:title="title" v-on:changeTitle="updateTitle($event)"></app-header>
-        <app-ninjas v-bind:ninjas="ninjas"></app-ninjas>
-        <ul>
-          <li v-for="ninja in ninjas">{{ ninja.name }}</li>
-        </ul>
-        <app-footer v-bind:title="title"></app-footer>
+        <app-header></app-header>
+        <router-view></router-view>
     </div>
 </template>
 
 <script>
 // Imports
-import Header from './components/Header.vue';
-import Footer from './components/Footer.vue';
-import Ninjas from './components/Ninjas.vue';
+import showBlogs from './components/showBlogs.vue';
+import listBlogs from './components/listBlogs.vue';
+import header from './components/header.vue';
 
 export default {
     components: {
-        'app-header': Header,
-        'app-footer': Footer,
-        'app-ninjas': Ninjas
+        'app-header': header
     },
     data () {
         return {
-          ninjas: [
-              {name: 'Ryu', speciality: 'Vue Components', show: false},
-              {name: 'Crystal', speciality: 'HTML Wizardry', show: false},
-              {name: 'Hitoshi', speciality: 'Click Events', show: false},
-              {name: 'Tango', speciality: 'Conditionals', show: false},
-              {name: 'Kami', speciality: 'Webpack', show: false},
-              {name: 'Yoshi', speciality: 'Data Diggin', show: false}
-          ],
-          title: 'Vue Wizards'
+
         }
     },
     methods: {
-      updateTitle: function(updatedTitle){
-        this.title = updatedTitle;
-      }
+
     }
 }
 </script>
diff --git a/src/components/Footer.vue b/src/components/Footer.vue
deleted file mode 100644
index 89c8051..0000000
--- a/src/components/Footer.vue
+++ /dev/null
@@ -1,30 +0,0 @@
-<template>
-    <footer>
-        <p>Copyright 2017 {{ title }}</p>
-    </footer>
-</template>
-<script>
-export default {
-    props: {
-      title: {
-        type: String,
-        required: true
-      }
-    },
-    data(){
-        return{
-
-        }
-    }
-}
-</script>
-<style scoped>
-footer{
-    background: #222;
-    padding: 6px;
-}
-p{
-        color: lightgreen;
-        text-align: center;
-}
-</style>
diff --git a/src/components/Header.vue b/src/components/Header.vue
deleted file mode 100644
index 44d4753..0000000
--- a/src/components/Header.vue
+++ /dev/null
@@ -1,35 +0,0 @@
-<template>
-    <header>
-        <h1 v-on:click="changeTitle">{{ title }}</h1>
-    </header>
-</template>
-<script>
-export default {
-    props: {
-      title: {
-        type: String,
-        required: true
-      }
-    },
-    data(){
-        return{
-
-        }
-    },
-    methods: {
-      changeTitle: function(){
-        this.$emit('changeTitle', 'Vue Ninjas');
-      }
-    }
-}
-</script>
-<style scoped>
-header{
-    background: lightgreen;
-    padding: 10px;
-}
-h1{
-    color: #222;
-    text-align: center;
-}
-</style>
diff --git a/src/components/Ninjas.vue b/src/components/Ninjas.vue
deleted file mode 100644
index c38a61b..0000000
--- a/src/components/Ninjas.vue
+++ /dev/null
@@ -1,54 +0,0 @@
-<template>
-    <div id="ninjas">
-        <ul>
-            <li v-for="ninja in ninjas" v-on:click="ninja.show = !ninja.show">
-                <h2>{{ ninja.name }}</h2>
-                <h3 v-show="ninja.show">{{ ninja.speciality }}</h3>
-            </li>
-        </ul>
-        <button v-on:click="deleteNinja">Delete a Ninja</button>
-    </div>
-</template>
-<script>
-export default {
-    props: {
-      ninjas: {
-        type: Array,
-        required: true
-      }
-    },
-    data(){
-        return{
-
-        }
-    },
-    methods: {
-      deleteNinja: function(){
-        this.ninjas.pop();
-      }
-    }
-}
-</script>
-<style scoped>
-#ninjas{
-    width: 100%;
-    max-width: 1200px;
-    margin: 40px auto;
-    padding: 0 20px;
-    box-sizing: border-box;
-}
-ul{
-    display: flex;
-    flex-wrap: wrap;
-    list-style-type: none;
-    padding: 0;
-}
-li{
-    flex-grow: 1;
-    flex-basis: 300px;
-    text-align: center;
-    padding: 30px;
-    border: 1px solid #222;
-    margin: 10px;
-}
-</style>
diff --git a/src/components/addBlog.vue b/src/components/addBlog.vue
new file mode 100644
index 0000000..4a107dd
--- /dev/null
+++ b/src/components/addBlog.vue
@@ -0,0 +1,108 @@
+<template>
+    <div id="add-blog">
+        <h2>Add a New Blog Post</h2>
+        <form v-if="!submitted">
+            <label>Blog Title:</label>
+            <input type="text" v-model.lazy="blog.title" required />
+            <label>Blog Content:</label>
+            <textarea v-model.lazy.trim="blog.content"></textarea>
+            <div id="checkboxes">
+                <p>Blog Categories:</p>
+                <label>Ninjas</label>
+                <input type="checkbox" value="ninjas" v-model="blog.categories" />
+                <label>Wizards</label>
+                <input type="checkbox" value="wizards" v-model="blog.categories" />
+                <label>Mario</label>
+                <input type="checkbox" value="mario" v-model="blog.categories" />
+                <label>Cheese</label>
+                <input type="checkbox" value="cheese" v-model="blog.categories" />
+            </div>
+            <label>Author:</label>
+            <select v-model="blog.author">
+                <option v-for="author in authors">{{ author }}</option>
+            </select>
+            <hr />
+            <button v-on:click.prevent="post">Add Blog</button>
+        </form>
+        <div v-if="submitted">
+            <h3>Thanks for adding your post</h3>
+        </div>
+        <div id="preview">
+            <h3>Preview blog</h3>
+            <p>Blog title: {{ blog.title }}</p>
+            <p>Blog content:</p>
+            <p style="white-space: pre">{{ blog.content }}</p>
+            <p>Blog Categories:</p>
+            <ul>
+                <li v-for="category in blog.categories">{{ category }}</li>
+            </ul>
+            <p>Author: {{ blog.author }}</p>
+        </div>
+    </div>
+</template>
+
+<script>
+// Imports
+
+export default {
+    data () {
+        return {
+            blog: {
+                title: '',
+                content: '',
+                categories: [],
+                author: ''
+            },
+            authors: ['The Net Ninja', 'The Angular Avenger', 'The Vue Vindicator'],
+            submitted: false
+        }
+    },
+    methods: {
+        post: function(){
+            this.$http.post('http://jsonplaceholder.typicode.com/posts', {
+                title: this.blog.title,
+                body: this.blog.content,
+                userId: 1
+            }).then(function(data){
+                console.log(data);
+                this.submitted = true;
+            });
+        }
+    }
+}
+</script>
+
+<style scoped>
+#add-blog *{
+    box-sizing: border-box;
+}
+#add-blog{
+    margin: 20px auto;
+    max-width: 500px;
+}
+label{
+    display: block;
+    margin: 20px 0 10px;
+}
+input[type="text"], textarea{
+    display: block;
+    width: 100%;
+    padding: 8px;
+}
+#preview{
+    padding: 10px 20px;
+    border: 1px dotted #ccc;
+    margin: 30px 0;
+}
+h3{
+    margin-top: 10px;
+}
+#checkboxes input{
+    display: inline-block;
+    margin-right: 10px;
+}
+#checkboxes label{
+    display: inline-block;
+    margin-top: 0;
+}
+</style>
diff --git a/src/components/header.vue b/src/components/header.vue
new file mode 100644
index 0000000..9cf48f0
--- /dev/null
+++ b/src/components/header.vue
@@ -0,0 +1,39 @@
+<template>
+    <nav>
+        <ul>
+            <li><router-link to="/" exact>Blog</router-link></li>
+            <li><router-link to="/add" exact>Add a new blog</router-link></li>
+        </ul>
+    </nav>
+</template>
+
+<script>
+export default {}
+</script>
+
+<style scoped>
+ul{
+    list-style-type: none;
+    text-align: center;
+    margin: 0;
+}
+li{
+    display: inline-block;
+    margin: 0 10px;
+}
+a{
+    color: #fff;
+    text-decoration: none;
+    padding: 6px 8px;
+    border-radius: 10px;
+}
+nav{
+    background: #444;
+    padding: 14px 0;
+    margin-bottom: 40px;
+}
+.router-link-active{
+    background: #eee;
+    color: #444;
+}
+</style>
diff --git a/src/components/listBlogs.vue b/src/components/listBlogs.vue
new file mode 100644
index 0000000..a80f110
--- /dev/null
+++ b/src/components/listBlogs.vue
@@ -0,0 +1,42 @@
+<template>
+    <div id="show-blogs">
+        <h1>List Blog Titles</h1>
+        <input type="text" v-model="search" placeholder="search blogs" />
+        <div v-for="blog in filteredBlogs" class="single-blog">
+            <h2>{{ blog.title }}</h2>
+        </div>
+    </div>
+</template>
+
+<script>
+// Imports
+import searchMixin from '../mixins/searchMixin';
+
+export default {
+    data () {
+        return {
+            blogs: [],
+            search: ''
+        }
+    },
+    created() {
+        this.$http.get('http://jsonplaceholder.typicode.com/posts').then(function(data){
+            this.blogs = data.body.slice(0,10);
+        });
+    },
+    mixins: [searchMixin]
+}
+</script>
+
+<style>
+#show-blogs{
+    max-width: 800px;
+    margin: 0px auto;
+}
+.single-blog{
+    padding: 20px;
+    margin: 20px 0;
+    box-sizing: border-box;
+    background: #eee;
+}
+</style>
diff --git a/src/components/showBlogs.vue b/src/components/showBlogs.vue
new file mode 100644
index 0000000..8f980a7
--- /dev/null
+++ b/src/components/showBlogs.vue
@@ -0,0 +1,48 @@
+<template>
+    <div id="show-blogs">
+        <h1>All Blog Articles</h1>
+        <input type="text" v-model="search" placeholder="search blogs" />
+        <div v-for="blog in filteredBlogs" class="single-blog">
+            <router-link v-bind:to="'/blog/' + blog.id"><h2>{{ blog.title }}</h2></router-link>
+            <article>{{ blog.body }}</article>
+        </div>
+    </div>
+</template>
+
+<script>
+// Imports
+import searchMixin from '../mixins/searchMixin';
+
+export default {
+    data () {
+        return {
+            blogs: [],
+            search: ''
+        }
+    },
+    created() {
+        this.$http.get('http://jsonplaceholder.typicode.com/posts').then(function(data){
+            this.blogs = data.body.slice(0,10);
+        });
+    },
+    mixins: [searchMixin]
+}
+</script>
+
+<style>
+#show-blogs{
+    max-width: 800px;
+    margin: 0px auto;
+}
+.single-blog{
+    padding: 20px;
+    margin: 20px 0;
+    box-sizing: border-box;
+    background: #eee;
+}
+
+#show-blogs a{
+    color: #444;
+    text-decoration: none;
+}
+</style>
diff --git a/src/components/singleBlog.vue b/src/components/singleBlog.vue
new file mode 100644
index 0000000..8e91155
--- /dev/null
+++ b/src/components/singleBlog.vue
@@ -0,0 +1,34 @@
+<template>
+    <div id="single-blog">
+        <h1>{{ blog.title }}</h1>
+        <article>{{ blog.body }}</article>
+        </div>
+    </div>
+</template>
+
+<script>
+// Imports
+import searchMixin from '../mixins/searchMixin';
+
+export default {
+    data () {
+        return {
+            id: this.$route.params.id,
+            blog: {}
+        }
+    },
+    created() {
+        this.$http.get('http://jsonplaceholder.typicode.com/posts/' + this.id).then(function(data){
+            // console.log(data);
+            this.blog = data.body;
+        });
+    }
+}
+</script>
+
+<style>
+#single-blog{
+    max-width: 960px;
+    margin: 0 auto;
+}
+</style>
diff --git a/src/main.js b/src/main.js
index 385fcfe..b1f23aa 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,7 +1,21 @@
 import Vue from 'vue'
+import VueResource from 'vue-resource'
+import VueRouter from 'vue-router'
 import App from './App.vue'
+import Routes from './routes'
+
+// Use packages
+Vue.use(VueResource);
+Vue.use(VueRouter);
+
+// Register routes
+const router = new VueRouter({
+    routes: Routes,
+    mode: 'history'
+});
 
 new Vue({
   el: '#app',
-  render: h => h(App)
+  render: h => h(App),
+  router: router
 })
diff --git a/src/mixins/searchMixin.js b/src/mixins/searchMixin.js
new file mode 100644
index 0000000..6d62786
--- /dev/null
+++ b/src/mixins/searchMixin.js
@@ -0,0 +1,9 @@
+export default {
+    computed: {
+        filteredBlogs: function(){
+            return this.blogs.filter((blog) => {
+                return blog.title.match(this.search);
+            });
+        }
+    }
+};
diff --git a/src/routes.js b/src/routes.js
new file mode 100644
index 0000000..45b5c3d
--- /dev/null
+++ b/src/routes.js
@@ -0,0 +1,9 @@
+import addBlog from './components/addBlog.vue';
+import showBlogs from './components/showBlogs.vue';
+import singleBlog from './components/singleBlog.vue';
+
+export default [
+    { path: '/', component: showBlogs},
+    { path: '/add', component: addBlog},
+    { path: '/blog/:id', component: singleBlog}
+]