diff --git a/package-lock.json b/package-lock.json
index 6c47c01..c380e94 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12922,6 +12922,12 @@
         "string-width": "2.1.1"
       }
     },
+    "tachyons": {
+      "version": "4.9.1",
+      "resolved": "https://registry.npmjs.org/tachyons/-/tachyons-4.9.1.tgz",
+      "integrity": "sha512-trJFXhzDZeHRcd9Bqn6ub3e0VqGWKMsGdP7RJoT+8Ihoak41o1qCwqcFx8hsFlfFWa6a4jsb464TNXnTt+MPnw==",
+      "dev": true
+    },
     "tapable": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/tapable/-/tapable-1.0.0.tgz",
diff --git a/package.json b/package.json
index 8ab7322..17849ce 100644
--- a/package.json
+++ b/package.json
@@ -19,6 +19,7 @@
     "@vue/eslint-config-airbnb": "^3.0.0-beta.6",
     "node-sass": "^4.7.2",
     "sass-loader": "^6.0.6",
+    "tachyons": "^4.9.1",
     "vue-template-compiler": "^2.5.13"
   },
   "browserslist": [
diff --git a/public/favicon.ico b/public/favicon.ico
index c7b9a43..b6d9c77 100644
Binary files a/public/favicon.ico and b/public/favicon.ico differ
diff --git a/public/index.html b/public/index.html
index f039fb5..033af57 100644
--- a/public/index.html
+++ b/public/index.html
@@ -7,7 +7,7 @@
     <link rel="shortcut icon" href="<%= webpackConfig.output.publicPath %>favicon.ico">
     <title>vue_tachyons</title>
   </head>
-  <body>
+  <body class="bg-light-gray-30">
     <noscript>
       <strong>We're sorry but vue_tachyons doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
     </noscript>
diff --git a/src/App.vue b/src/App.vue
index f300d4b..9728085 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,14 +1,28 @@
 <template>
   <div id="app">
-    <div id="nav">
-      <router-link to="/">Home</router-link> |
-      <router-link to="/about">About</router-link>
-    </div>
-    <router-view/>
+    <nav-bar>
+      <router-link class="link dim white f5 f4-l dib mr3 mr4-l" to="/">Home</router-link>
+      <router-link class="link dim white f5 f4-l dib mr3 mr4-l" to="/about">About</router-link>
+    </nav-bar>
+    <transition name="slide-fade">
+      <router-view/>
+    </transition>
   </div>
 </template>
+<script>
+import NavBar from '@/components/NavBar.vue';
+
+export default {
+  components: {
+    'nav-bar': NavBar,
+  },
+};
+</script>
+
 
 <style lang="scss">
+@import "~tachyons";
+
 #app {
   font-family: 'Avenir', Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
@@ -26,4 +40,14 @@
     }
   }
 }
+
+.slide-fade-enter-active {
+  transition: all .3s ease;
+}
+
+.slide-fade-enter, .slide-fade-leave-to
+/* .slide-fade-leave-active below version 2.1.8 */ {
+  transform: translateX(10px);
+  opacity: 0;
+}
 </style>
diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue
index b8371ac..006aa36 100644
--- a/src/components/HelloWorld.vue
+++ b/src/components/HelloWorld.vue
@@ -1,31 +1,6 @@
 <template>
   <div class="hello">
     <h1>{{ msg }}</h1>
-    <p>
-      For guide and recipes on how to configure / customize this project,<br>
-      check out the
-      <a href="https://github.com/vuejs/vue-cli/tree/dev/docs" target="_blank">vue-cli documentation</a>.
-    </p>
-    <h3>Installed CLI Plugins</h3>
-    <ul>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank">babel</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank">eslint</a></li>
-    </ul>
-    <h3>Essential Links</h3>
-    <ul>
-      <li><a href="https://vuejs.org" target="_blank">Core Docs</a></li>
-      <li><a href="https://forum.vuejs.org" target="_blank">Forum</a></li>
-      <li><a href="https://chat.vuejs.org" target="_blank">Community Chat</a></li>
-      <li><a href="https://twitter.com/vuejs" target="_blank">Twitter</a></li>
-    </ul>
-    <h3>Ecosystem</h3>
-    <ul>
-      <li><a href="https://router.vuejs.org/en/essentials/getting-started.html" target="_blank">vue-router</a></li>
-      <li><a href="https://vuex.vuejs.org/en/intro.html" target="_blank">vuex</a></li>
-      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank">vue-devtools</a></li>
-      <li><a href="https://vue-loader.vuejs.org/en" target="_blank">vue-loader</a></li>
-      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank">awesome-vue</a></li>
-    </ul>
   </div>
 </template>
 
diff --git a/src/components/NavBar.vue b/src/components/NavBar.vue
new file mode 100644
index 0000000..587b123
--- /dev/null
+++ b/src/components/NavBar.vue
@@ -0,0 +1,15 @@
+<template>
+  <nav class="db dt-l w-100 border-box pa2 ph5-l bg-green">
+  <a class="db dtc-l v-mid mid-gray link dim w-100 w-25-l tc tl-l mb1 mb0-l" href="/" title="Home">
+    <img src="http://tachyons.io/img/logo.jpg" class="dib w3 h3 br-100" alt="Site Name">
+  </a>
+  <div class="db dtc-l v-mid w-100 w-75-l tc tr-l">
+    <slot></slot>
+  </div>
+  </nav>
+</template>
+<script>
+export default {
+  name: 'nav-bar',
+};
+</script>
diff --git a/src/router.js b/src/router.js
index f1c2257..e65d9d8 100644
--- a/src/router.js
+++ b/src/router.js
@@ -6,6 +6,9 @@ import About from './views/About.vue';
 Vue.use(Router);
 
 export default new Router({
+  // Use Browsers history API
+  mode: 'history',
+  linkActiveClass: 'is_active',
   routes: [
     {
       path: '/',
