diff --git a/package.json b/package.json
index 20aa9c6..7992324 100644
--- a/package.json
+++ b/package.json
@@ -80,6 +80,7 @@
   },
   "peerDependencies": {
     "saber": ">=0.7.0",
+    "saber-plugin-local-search": ">=0.0.1",
     "saber-plugin-query-posts": ">=0.4.0"
   }
 }
diff --git a/src/components/SiteHeader.vue b/src/components/SiteHeader.vue
index 0b3ab30..c2a46a5 100644
--- a/src/components/SiteHeader.vue
+++ b/src/components/SiteHeader.vue
@@ -4,7 +4,7 @@
       class="flex items-center shadow bg-white border-b h-24 py-4"
       role="banner"
     >
-      <div class="container flex items-center max-w-8xl mx-auto px-4 lg:px-8">
+      <div class="container flex items-center max-w-4xl mx-auto px-4 lg:px-8">
         <div class="flex items-center">
           <saber-link
             to="/"
@@ -18,7 +18,7 @@
             />
 
             <h1
-              class="text-lg md:text-2xl text-blue-800 font-semibold hover:text-blue-600 my-0"
+              class="text-lg md:text-2xl text-blue-darkest font-semibold hover:text-blue-dark my-0"
             >
               {{ $siteConfig.title }}
             </h1>
@@ -26,6 +26,8 @@
         </div>
 
         <div class="flex flex-1 justify-end items-center">
+          <SiteSearch />
+
           <nav class="hidden lg:flex items-center justify-end text-lg">
             <NavLink
               class="ml-6 text-grey-darker hover:text-blue-dark"
@@ -36,7 +38,7 @@
           </nav>
 
           <button
-            class="flex justify-center items-center bg-blue-500 border border-blue-500 h-10 px-5 rounded-full lg:hidden focus:outline-none"
+            class="flex justify-center items-center bg-blue border border-blue h-10 px-5 rounded-full lg:hidden focus:outline-none"
             @click="nav = !nav"
           >
             <svg
@@ -72,7 +74,7 @@
         'lg:block': nav
       }"
     >
-      <ul class="list-none p0 my-0">
+      <ul class="list-reset my-0">
         <li class="pl-4">
           <NavLink
             class="nav-menu__item hover:text-blue"
@@ -88,9 +90,10 @@
 
 <script>
 import NavLink from './NavLink'
+import SiteSearch from './SiteSearch'
 
 export default {
-  components: { NavLink },
+  components: { NavLink, SiteSearch },
   data() {
     return {
       nav: false
@@ -101,7 +104,7 @@ export default {
 
 <style lang="postcss">
 .nav-menu {
-  @apply .bg-gray-200;
+  @apply .bg-grey-lighter;
   @apply .pb-2;
   @apply .pt-6;
   @apply .px-2;
@@ -111,10 +114,11 @@ export default {
 
 .nav-menu__item {
   @apply .block;
+  @apply .list-reset;
   @apply .no-underline;
   @apply .mb-4;
   @apply .mt-0;
-  @apply .text-gray-800;
+  @apply .text-grey-darker;
   @apply .text-sm;
 }
 </style>
diff --git a/src/components/SiteSearch.vue b/src/components/SiteSearch.vue
new file mode 100644
index 0000000..0add50a
--- /dev/null
+++ b/src/components/SiteSearch.vue
@@ -0,0 +1,138 @@
+<template>
+  <div class="flex flex-1 justify-end items-center text-right px-4">
+    <div
+      class="absolute md:relative w-full justify-end bg-white left-0 top-0 z-10 mt-7 md:mt-0 px-4 md:px-0"
+      :class="{ 'hidden md:flex': !searching }"
+    >
+      <label for="search" class="hidden">Search</label>
+
+      <input
+        v-model="query"
+        ref="search"
+        class="transition-fast relative block h-10 w-full lg:w-1/2 lg:focus:w-3/4 bg-gray-100 border border-gray-500 focus:border-blue-400 outline-none cursor-pointer text-gray-700 px-4 pb-0 pt-px"
+        :class="{ 'transition-border': query }"
+        autocomplete="off"
+        name="search"
+        placeholder="Search"
+        type="text"
+        @keyup.esc="reset()"
+      />
+
+      <button
+        v-if="query || searching"
+        class="absolute top-0 right-0 leading-snug font-400 text-3xl text-blue-500 hover:text-blue-600 focus:outline-none pr-7 md:pr-3"
+        @click="reset()"
+      >
+        &times;
+      </button>
+
+      <transition name="fade">
+        <div
+          v-if="query"
+          class="absolute left-0 right-0 md:inset-auto w-full lg:w-3/4 text-left mb-4 md:mt-10"
+        >
+          <div
+            class="flex flex-col bg-white border border-b-0 border-t-0 border-blue-400 rounded-b-lg shadow-lg mx-4 md:mx-0"
+          >
+            <a
+              v-for="(result, index) in results"
+              class="bg-white hover:bg-blue-100 border-b border-blue-400 text-xl cursor-pointer p-4"
+              :class="{ 'rounded-b-lg': index === results.length - 1 }"
+              :title="result.title"
+              :key="result.permalink"
+              @click.prevent="goTo(result.permalink)"
+            >
+              {{ result.title }}
+
+              <span class="block font-normal text-gray-700 text-sm my-1">
+                {{ result.excerpt }}
+              </span>
+            </a>
+
+            <div
+              v-if="!results.length"
+              class="bg-white w-full hover:bg-blue-100 border-b border-blue-400 rounded-b-lg shadow cursor-pointer p-4"
+            >
+              <p class="my-0">
+                No results for <strong>{{ query }}</strong>
+              </p>
+            </div>
+          </div>
+        </div>
+      </transition>
+    </div>
+
+    <button
+      title="Start searching"
+      type="button"
+      class="flex md:hidden bg-gray-100 hover:bg-blue-100 justify-center items-center border border-gray-500 rounded-full focus:outline-none h-10 px-3"
+      @click.prevent="showInput()"
+    >
+      <img
+        src="../assets/img/magnifying-glass.svg"
+        alt="search icon"
+        class="h-4 w-4 max-w-none"
+      />
+    </button>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      searching: false,
+      query: '',
+      results: []
+    }
+  },
+  methods: {
+    showInput() {
+      this.searching = true
+      this.$nextTick(() => {
+        this.$refs.search.focus()
+      })
+    },
+    reset() {
+      console.log('reseted')
+      this.query = ''
+      this.searching = false
+    },
+    goTo(to) {
+      this.$router.push(to)
+      this.reset()
+    }
+  },
+  watch: {
+    async query(query) {
+      this.results = await this.$searchPages(query)
+    }
+  }
+}
+</script>
+
+<style scoped>
+input[name='search'] {
+  background-image: url('../assets/img/magnifying-glass.svg');
+  background-position: 0.8em;
+  background-repeat: no-repeat;
+  border-radius: 25px;
+  text-indent: 1.2em;
+}
+input[name='search'].transition-border {
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+  border-top-left-radius: 0.5rem;
+  border-top-right-radius: 0.5rem;
+}
+.fade-enter-active {
+  transition: opacity 0.5s;
+}
+.fade-leave-active {
+  transition: opacity 0s;
+}
+.fade-enter,
+.fade-leave-to {
+  opacity: 0;
+}
+</style>
\ No newline at end of file