diff --git a/docs/.vuepress/public/search-icon.svg b/docs/.vuepress/public/search-icon.svg
new file mode 100644
index 00000000..69eb2afd
--- /dev/null
+++ b/docs/.vuepress/public/search-icon.svg
@@ -0,0 +1,64 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
+<g transform="translate(1 1)">
+	<g>
+		<path style="fill:#E2E3E5;" d="M362.141,305.252c-7.585,9.481-17.067,18.963-26.548,26.548l148.859,148.859L511,454.111
+			L362.141,305.252z"/>
+		<path style="fill:#E2E3E5;" d="M416.185,201.904c0,104.296-85.333,189.63-189.63,189.63S36.926,306.2,36.926,201.904
+			s85.333-189.63,189.63-189.63S416.185,97.607,416.185,201.904"/>
+	</g>
+	<path style="fill:#CCCCCC;" d="M387.741,201.904c0,104.296-85.333,189.63-189.63,189.63S8.481,306.2,8.481,201.904
+		s85.333-189.63,189.63-189.63S387.741,97.607,387.741,201.904"/>
+	<path style="fill:#E2E3E5;" d="M349.815,201.904c0,104.296-76.8,189.63-170.667,189.63S8.481,306.2,8.481,201.904
+		s76.8-189.63,170.667-189.63S349.815,97.607,349.815,201.904"/>
+	<path style="fill:#FFFFFF;" d="M179.148,391.533c6.637,0,12.326,0,18.963-0.948c-85.333-10.43-151.704-91.022-151.704-188.682
+		s66.37-178.252,151.704-188.681c-6.637-0.948-12.326-0.948-18.963-0.948c-93.867,0-170.667,85.333-170.667,189.63
+		S85.281,391.533,179.148,391.533"/>
+	<g>
+		<path style="fill:#B6B6B6;" d="M467.385,507.207c-2.844,0-4.741-0.948-6.637-2.844L310.941,355.504
+			c-1.896-1.896-2.844-4.741-2.844-7.585c0-2.844,0.948-4.741,3.793-6.637c9.481-7.585,18.015-16.119,25.6-25.6
+			c1.896-1.896,3.793-3.793,6.637-3.793c2.844,0,5.689,0.948,7.585,2.844L500.57,463.593c3.793,3.793,3.793,9.481,0,13.274
+			l-26.548,26.548C472.126,506.259,470.23,507.207,467.385,507.207z M331.8,348.867l135.585,135.585l13.274-13.274L345.074,335.593
+			C341.281,340.333,336.541,345.074,331.8,348.867z"/>
+		<path style="fill:#B6B6B6;" d="M198.111,401.015C88.126,401.015-1,311.889-1,201.904c0-48.356,18.015-95.763,50.252-131.793
+			c3.793-3.793,9.481-4.741,13.274-0.948s4.741,9.481,0.948,13.274c-29.393,33.185-45.511,75.852-45.511,119.467
+			c0,99.556,80.593,180.148,180.148,180.148s180.148-80.593,180.148-180.148S297.667,21.756,198.111,21.756
+			c-24.652,0-49.304,4.741-72.059,15.17c-4.741,1.896-10.43,0-12.326-4.741s0-10.43,4.741-12.326
+			c25.6-11.378,52.148-17.067,79.644-17.067c109.985,0,199.111,89.126,199.111,199.111S308.096,401.015,198.111,401.015z"/>
+		<path style="fill:#B6B6B6;" d="M93.815,50.2c0,5.689-3.793,9.481-9.481,9.481c-5.689,0-9.481-3.793-9.481-9.481
+			s3.793-9.481,9.481-9.481S93.815,44.511,93.815,50.2"/>
+	</g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>
diff --git a/docs/.vuepress/theme/components/Navbar.vue b/docs/.vuepress/theme/components/Navbar.vue
index 0d21af89..de5b5e28 100644
--- a/docs/.vuepress/theme/components/Navbar.vue
+++ b/docs/.vuepress/theme/components/Navbar.vue
@@ -1,98 +1,118 @@
 <template>
   <header class="navbar">
     <div class="inner">
-      <SidebarButton @toggle-sidebar="$emit('toggle-sidebar')"/>
-      <router-link
-        :to="$localePath"
-        class="home-link"
-      >
+      <SidebarButton @toggle-sidebar="$emit('toggle-sidebar')" />
+      <router-link :to="$localePath" class="home-link">
         <img
           class="logotype narrow-hide"
           v-if="$site.themeConfig.logo"
           :src="$withBase($site.themeConfig.logo)"
           :alt="$siteTitle"
-        >
+        />
         <img
           class="logoicon wide-hide"
           v-if="$site.themeConfig.logo"
           :src="$withBase('/logo-icon-white.svg')"
           :alt="$siteTitle"
-        >
+        />
         <span
           ref="siteName"
           class="site-name"
           v-if="$siteTitle && !$site.themeConfig.logo"
           :class="{ 'can-hide': $site.themeConfig.logo }"
-        >{{ $siteTitle }}</span>
+          >{{ $siteTitle }}</span
+        >
       </router-link>
 
       <div
         class="links"
-        :style="linksWrapMaxWidth ? {
-          'max-width': linksWrapMaxWidth + 'px'
-        } : {}"
+        :style="
+          linksWrapMaxWidth
+            ? {
+                'max-width': linksWrapMaxWidth + 'px',
+              }
+            : {}
+        "
       >
-        <NavLinks class="can-hide"/>
-        <AlgoliaSearchBox
-          v-if="isAlgoliaSearch"
-          :options="algolia"
-        />
-        <SearchBox
-          v-else-if="$site.themeConfig.search !== false && $page.frontmatter.search !== false"
-          @alignRight=true
-          :alignRight=true
-        />
+        <NavLinks class="can-hide" />
+        <AlgoliaSearchBox v-if="isAlgoliaSearch" :options="algolia" />
+        <div class="input-container">
+          <input
+            class="input"
+            type="text"
+            v-model="input"
+            placeholder="What is Cronos?"
+            v-on:keyup.enter="onEnter"
+          />
+          <span class="span">↩Enter</span>
+        </div>
       </div>
     </div>
   </header>
 </template>
 
 <script>
-import AlgoliaSearchBox from '@AlgoliaSearchBox'
-import SearchBox from '@SearchBox'
-import SidebarButton from '@theme/components/SidebarButton.vue'
-import NavLinks from '@theme/components/NavLinks.vue'
+import AlgoliaSearchBox from "@AlgoliaSearchBox";
+import SearchBox from "@SearchBox";
+import SidebarButton from "@theme/components/SidebarButton.vue";
+import NavLinks from "@theme/components/NavLinks.vue";
 
 export default {
   components: { SidebarButton, NavLinks, SearchBox, AlgoliaSearchBox },
 
-  data () {
+  data() {
     return {
-      linksWrapMaxWidth: null
-    }
+      linksWrapMaxWidth: null,
+      input: null,
+    };
+  },
+
+  methods: {
+    onEnter: function () {
+      window.open(
+        `https://docs.cronos.org/getting-started/readme?q=${this.input}`,
+        "_blank"
+      );
+    },
   },
 
-  mounted () {
-    const MOBILE_DESKTOP_BREAKPOINT = 719 // refer to config.styl
-    const NAVBAR_VERTICAL_PADDING = parseInt(css(this.$el, 'paddingLeft')) + parseInt(css(this.$el, 'paddingRight'))
+  mounted() {
+    const MOBILE_DESKTOP_BREAKPOINT = 719; // refer to config.styl
+    const NAVBAR_VERTICAL_PADDING =
+      parseInt(css(this.$el, "paddingLeft")) +
+      parseInt(css(this.$el, "paddingRight"));
     const handleLinksWrapWidth = () => {
       if (document.documentElement.clientWidth < MOBILE_DESKTOP_BREAKPOINT) {
-        this.linksWrapMaxWidth = null
+        this.linksWrapMaxWidth = null;
       } else {
-        this.linksWrapMaxWidth = this.$el.offsetWidth - NAVBAR_VERTICAL_PADDING
-          - (this.$refs.siteName && this.$refs.siteName.offsetWidth || 0)
+        this.linksWrapMaxWidth =
+          this.$el.offsetWidth -
+          NAVBAR_VERTICAL_PADDING -
+          ((this.$refs.siteName && this.$refs.siteName.offsetWidth) || 0);
       }
-    }
-    handleLinksWrapWidth()
-    window.addEventListener('resize', handleLinksWrapWidth, false)
+    };
+    handleLinksWrapWidth();
+    window.addEventListener("resize", handleLinksWrapWidth, false);
   },
 
   computed: {
-    algolia () {
-      return this.$themeLocaleConfig.algolia || this.$site.themeConfig.algolia || {}
+    algolia() {
+      return (
+        this.$themeLocaleConfig.algolia || this.$site.themeConfig.algolia || {}
+      );
     },
 
-    isAlgoliaSearch () {
-      return this.algolia && this.algolia.apiKey && this.algolia.indexName
-    }
-  }
-}
+    isAlgoliaSearch() {
+      return this.algolia && this.algolia.apiKey && this.algolia.indexName;
+    },
+  },
+};
 
-function css (el, property) {
+function css(el, property) {
   // NOTE: Known bug, will return 'auto' if style value is 'auto'
-  const win = el.ownerDocument.defaultView
+  const win = el.ownerDocument.defaultView;
   // null means not to return pseudo styles
-  return win.getComputedStyle(el, null)[property]
+  return win.getComputedStyle(el, null)[property];
 }
 </script>
 
@@ -144,6 +164,33 @@ $searchBoxInputColor = #0b1426
     position relative
     display flex
     color $headerTextColor
+
+    .input-container {
+      position: relative;
+      width: 100%;
+      margin: 0;
+
+      .input {
+        display: block;
+        height: 15px;
+        padding: 10px 45px;
+        background: white url("/docs/search-icon.svg") no-repeat 15px center;
+        background-size: 15px 15px;
+        font-size: 16px;
+        border: none;
+        border-radius: 5px;
+        box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px,
+          rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
+      }
+
+      .span {
+        position: absolute;
+        right: 5px;
+        top: -2px;
+        color: grey;
+      }
+    }
+
     .search-box
       margin-right 0
       flex: 0 0 auto