diff --git a/.eslintrc b/.eslintrc
index c76cf54..6fee5fa 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -3,5 +3,8 @@
   "extends": [
     "plugin:vue/essential",
     "@vue/airbnb"
-  ]
-}
\ No newline at end of file
+  ],
+  "rules": {
+    max-len: ["error", { "code": 200 }]
+    },
+}
diff --git a/public/index.html b/public/index.html
index 033af57..9ff431d 100644
--- a/public/index.html
+++ b/public/index.html
@@ -5,6 +5,7 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <link rel="shortcut icon" href="<%= webpackConfig.output.publicPath %>favicon.ico">
+    <link rel="stylesheet" href="https://yarnpkg.com/en/package/normalize.css">
     <title>vue_tachyons</title>
   </head>
   <body class="bg-light-gray-30">
diff --git a/src/App.vue b/src/App.vue
index 9728085..837b362 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,8 +1,8 @@
 <template>
   <div id="app">
     <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>
+      <router-link class="dim white f5 f4-l dib mr3 mr4-l no-underline" to="/">Home</router-link>
+      <router-link class="dim white f5 f4-l dib mr3 mr4-l no-underline" to="/about">About</router-link>
     </nav-bar>
     <transition name="slide-fade">
       <router-view/>
@@ -50,4 +50,19 @@ export default {
   transform: translateX(10px);
   opacity: 0;
 }
+
+.bg-grad-blue {
+  background-image: linear-gradient(-208deg, #86C3D0 0%, #4E90A3 66%);
+}
+
+.bg-grad-green {
+  background-image: linear-gradient(to top right,#41b782,#86d169);
+}
+
+*:focus {
+  outline-style:none;
+  box-shadow:none;
+  border-color:transparent;
+}
+
 </style>
diff --git a/src/components/NavBar.vue b/src/components/NavBar.vue
index 587b123..d831356 100644
--- a/src/components/NavBar.vue
+++ b/src/components/NavBar.vue
@@ -1,9 +1,10 @@
 <template>
-  <nav class="db dt-l w-100 border-box pa2 ph5-l bg-green">
+  <nav class="db dt-l w-100 border-box pa2 ph5-l bg-grad-blue">
   <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">
+    <input type="search" placeholder="Search..." class="f4 mr4 pv2 ph3 w-30 br1 bn di-ns dn dn-m">
     <slot></slot>
   </div>
   </nav>
@@ -13,3 +14,8 @@ export default {
   name: 'nav-bar',
 };
 </script>
+
+<style lang="scss">
+
+
+</style>
diff --git a/src/views/About.vue b/src/views/About.vue
index 3fa2807..98b9b5d 100644
--- a/src/views/About.vue
+++ b/src/views/About.vue
@@ -1,5 +1,15 @@
 <template>
   <div class="about">
     <h1>This is an about page</h1>
+    <button @click="raiseAlert" class="ph3-ns pv2-ns pa2 f4-ns f5 white b bg-grad-green bn br-pill dim">Press me</button>
   </div>
 </template>
+<script type="text/javascript">
+export default {
+  methods: {
+    raiseAlert() {
+      console.log('YOU PRESSED THE BUTTON!');
+    },
+  },
+};
+</script>
