diff --git a/www/src/components/navigation.js b/www/src/components/navigation.js
index 1b9acf8ef3867..e60df420ed1b1 100644
--- a/www/src/components/navigation.js
+++ b/www/src/components/navigation.js
@@ -3,6 +3,7 @@ import Link from "gatsby-link"
 import GithubIcon from "react-icons/lib/go/mark-github"
 import TwitterIcon from "react-icons/lib/fa/twitter"
 
+import SearchForm from "../components/search-form"
 import DiscordIcon from "../components/discord"
 import logo from "../gatsby-negative.svg"
 import typography, { rhythm, scale } from "../utils/typography"
@@ -117,8 +118,9 @@ export default ({ pathname }) => {
         <Link
           to="/"
           css={{
+            alignItems: `center`,
             color: `inherit`,
-            display: `inline-block`,
+            display: `flex`,
             textDecoration: `none`,
             marginRight: rhythm(0.5),
           }}
@@ -126,21 +128,21 @@ export default ({ pathname }) => {
           <img
             src={logo}
             css={{
-              display: `inline-block`,
               height: rhythm(1.2),
               width: rhythm(1.2),
               margin: 0,
               marginRight: rhythm(2 / 4),
-              verticalAlign: `middle`,
             }}
             alt=""
           />
           <h1
             css={{
               ...scale(2 / 5),
-              display: `inline-block`,
               margin: 0,
-              verticalAlign: `middle`,
+              display: `none`,
+              [presets.Mobile]: {
+                display: `block`,
+              },
             }}
           >
             Gatsby
@@ -150,10 +152,15 @@ export default ({ pathname }) => {
           css={{
             display: `none`,
             [presets.Tablet]: {
-              display: `block`,
+              display: `flex`,
               margin: 0,
               padding: 0,
               listStyle: `none`,
+              flexGrow: 1,
+              overflowX: `auto`,
+              maskImage: `linear-gradient(to right, transparent, white ${rhythm(
+                1 / 8
+              )}, white 98%, transparent)`,
             },
           }}
         >
@@ -165,12 +172,13 @@ export default ({ pathname }) => {
         </ul>
         <div
           css={{
-            marginLeft: isHomepage ? rhythm(1 / 2) : `auto`,
-            [presets.Phablet]: {
-              marginLeft: isHomepage ? `auto` : `auto`,
-            },
+            display: `flex`,
+            marginLeft: `auto`,
           }}
         >
+          {!isHomepage && (
+            <SearchForm key="SearchForm" styles={{ ...navItemStyles }} />
+          )}
           <a
             href="https://github.com/gatsbyjs/gatsby"
             title="GitHub"
diff --git a/www/src/components/search-form.js b/www/src/components/search-form.js
new file mode 100644
index 0000000000000..833ae18fa9044
--- /dev/null
+++ b/www/src/components/search-form.js
@@ -0,0 +1,231 @@
+import React, { Component } from "react"
+import PropTypes from "prop-types"
+import { navigateTo } from "gatsby-link"
+import { rhythm } from "../utils/typography"
+import presets from "../utils/presets"
+
+import { css } from "glamor"
+
+// Override default search result styles
+css.global(`.searchWrap .algolia-docsearch-suggestion--highlight`, {
+  backgroundColor: `${presets.lightPurple} !important`,
+  boxShadow: `inset 0 -2px 0 0 ${presets.lightPurple} !important`,
+  color: `black`,
+  fontWeight: `bold`,
+})
+css.global(`.searchWrap .algolia-docsearch-suggestion .algolia-docsearch-suggestion--subcategory-column`, {
+  width: `100% !important`,
+})
+css.global(`.searchWrap .algolia-docsearch-suggestion--subcategory-column-text:after`, {
+  display: `none`,
+})
+css.global(
+  `.searchWrap .algolia-autocomplete .ds-dropdown-menu .ds-suggestion.ds-cursor .algolia-docsearch-suggestion:not(.suggestion-layout-simple) .algolia-docsearch-suggestion--content`,
+  { backgroundColor: `${presets.brandLighter} !important` }
+)
+css.global(
+  `.searchWrap .algolia-docsearch-suggestion .algolia-docsearch-suggestion--content.algolia-docsearch-suggestion--no-results`,
+  {
+    maxWidth: `100%`,
+    paddingLeft: `0 !important`,
+    width: `100% !important`,
+  }
+)
+css.global(
+  `.searchWrap .algolia-docsearch-suggestion .algolia-docsearch-suggestion--content.algolia-docsearch-suggestion--no-results:before`,
+  { display: `none !important` }
+)
+css.global(`.searchWrap .algolia-autocomplete .ds-dropdown-menu`, {
+  position: `fixed !important`,
+  top: `${rhythm(2)} !important`,
+  left: `${rhythm(0.5)} !important`,
+  right: `${rhythm(0.5)} !important`,
+  minWidth: `calc(100vw - ${rhythm(1)})`,
+  maxWidth: `calc(100vw - 2rem)`,
+  maxHeight: `calc(100vh - 5rem)`,
+  display: `block`,
+})
+css.global(
+  `.searchWrap .algolia-autocomplete.algolia-autocomplete-right .ds-dropdown-menu, .algolia-autocomplete.algolia-autocomplete-left .ds-dropdown-menu`,
+  {
+    left: `${rhythm(0.5)} !important`,
+    right: `${rhythm(0.5)} !important`,
+  }
+)
+css.global(
+  `.searchWrap .algolia-autocomplete.algolia-autocomplete-right .ds-dropdown-menu::before`,
+  {
+    right: rhythm(5),
+  }
+)
+css.global(
+  `.searchWrap .algolia-autocomplete.algolia-autocomplete-left .ds-dropdown-menu::before`,
+  {
+    left: rhythm(7),
+  }
+)
+
+// use css.insert() for media query with global CSS
+css.insert(`@media ${presets.phablet}{
+  .searchWrap .algolia-autocomplete .algolia-docsearch-suggestion .algolia-docsearch-suggestion--subcategory-column {
+    font-weight: 400;
+    width: 30% !important;
+    text-align: right;
+    opacity: 1;
+    padding: ${rhythm(0.5)} ${rhythm(1)} ${rhythm(0.5)} 0;
+  }
+  .searchWrap .algolia-autocomplete .algolia-docsearch-suggestion--subcategory-column:before {
+    content: "";
+    position: absolute;
+    display: block !important;
+    top: 0;
+    height: 100%;
+    width: 1px;
+    background: #ddd;
+    right: 0;
+  }
+  .searchWrap .algolia-autocomplete .algolia-docsearch-suggestion--subcategory-column:after {
+    display: none;
+  }
+  .searchWrap .algolia-autocomplete .algolia-docsearch-suggestion--content {
+    width: 70% !important;
+    max-width: 70%;
+    display: block;
+    padding: ${rhythm(0.5)} 0 ${rhythm(0.5)} ${rhythm(1)} !important;
+  }
+  .searchWrap .algolia-autocomplete .algolia-docsearch-suggestion--content:before {
+    content: "";
+    position: absolute;
+    display: block !important;
+    top: 0;
+    height: 100%;
+    width: 1px;
+    background: #ddd;
+    left: -1px;
+  }
+}`)
+
+css.insert(`@media ${presets.tablet}{
+  .searchWrap .algolia-autocomplete .ds-dropdown-menu {
+    top: 100% !important;
+    position: absolute !important;
+    max-width: 600px !important;
+    min-width: 500px !important;
+  }
+  .searchWrap .algolia-autocomplete.algolia-autocomplete-right .ds-dropdown-menu {
+    right: 0 !important;
+    left: inherit !important;
+  }
+  .searchWrap .algolia-autocomplete.algolia-autocomplete-right .ds-dropdown-menu::before {
+    right: ${rhythm(2)};
+  }
+}`)
+
+class SearchForm extends Component {
+  constructor() {
+    super()
+    this.state = { enabled: true }
+  }
+
+  /**
+   * Replace the default selection event, allowing us to do client-side
+   * navigation thus avoiding a full page refresh.
+   *
+   * Ref: https://github.com/algolia/autocomplete.js#events
+   */
+  autocompleteSelected(e) {
+    e.stopPropagation()
+    // Use an anchor tag to parse the absolute url (from autocomplete.js) into a relative url
+    // eslint-disable-next-line no-undef
+    const a = document.createElement(`a`)
+    a.href = e._args[0].url
+    navigateTo(`${a.pathname}${a.hash}`)
+  }
+
+  componentDidMount() {
+    if (
+      typeof window === `undefined` || // eslint-disable-line no-undef
+      typeof window.docsearch === `undefined` // eslint-disable-line no-undef
+    ) {
+      console.warn(`Search has failed to load and now is being disabled`)
+      this.setState({ enabled: false })
+      return
+    }
+
+    // eslint-disable-next-line no-undef
+    window.addEventListener(
+      `autocomplete:selected`,
+      this.autocompleteSelected,
+      true
+    )
+
+    // eslint-disable-next-line no-undef
+    window.docsearch({
+      apiKey: `71af1f9c4bd947f0252e17051df13f9c`,
+      indexName: `gatsbyjs`,
+      inputSelector: `#doc-search`,
+      debug: false,
+    })
+  }
+
+  render() {
+    const { enabled } = this.state
+    const { styles } = this.props.styles
+    return enabled ? (
+      <form
+        css={{
+          ...styles,
+          display: `flex`,
+          flex: `0 0 auto`,
+          flexDirection: `row`,
+          alignItems: `center`,
+          marginLeft: rhythm(1 / 2),
+          marginBottom: 0,
+        }}
+        className="searchWrap"
+      >
+        <input
+          id="doc-search"
+          css={{
+            appearance: `none`,
+            background: `transparent`,
+            border: 0,
+            color: presets.brand,
+            paddingTop: rhythm(1 / 8),
+            paddingRight: rhythm(1 / 4),
+            paddingBottom: rhythm(1 / 8),
+            paddingLeft: rhythm(1),
+            backgroundImage: `url(/search.svg)`,
+            backgroundSize: `16px 16px`,
+            backgroundRepeat: `no-repeat`,
+            backgroundPositionY: `center`,
+            backgroundPositionX: `5px`,
+            overflow: `hidden`,
+            width: rhythm(1),
+            transition: `width 0.2s ease`,
+
+            ":focus": {
+              outline: 0,
+              backgroundColor: presets.brandLighter,
+              borderRadius: presets.radiusLg,
+              width: rhythm(5),
+            },
+
+            [presets.Desktop]: {
+              width: rhythm(5),
+            },
+          }}
+          type="search"
+          placeholder="Search docs"
+          aria-label="Search docs"
+        />
+      </form>
+    ) : null
+  }
+}
+
+SearchForm.propTypes = {
+  styles: PropTypes.object,
+}
+
+export default SearchForm
diff --git a/www/src/components/sidebar-body.js b/www/src/components/sidebar-body.js
index 9473a55767c06..70a0d493bd691 100644
--- a/www/src/components/sidebar-body.js
+++ b/www/src/components/sidebar-body.js
@@ -189,6 +189,7 @@ class SidebarBody extends React.Component {
         css={{
           padding: isInline ? 0 : rhythm(3 / 4),
         }}
+        className="docSearch-sidebar"
       >
         {menu.map((section, index) => (
           <div
diff --git a/www/src/html.js b/www/src/html.js
index 752f6ce65e626..b8128d396e699 100644
--- a/www/src/html.js
+++ b/www/src/html.js
@@ -72,6 +72,7 @@ export default class HTML extends React.Component {
             href={`/safari-pinned-tab.svg`}
             color="#5bbad5"
           />
+          <script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
           {css}
         </head>
         <body {...this.props.bodyAttributes}>
@@ -80,6 +81,7 @@ export default class HTML extends React.Component {
             dangerouslySetInnerHTML={{ __html: this.props.body }}
           />
           {this.props.postBodyComponents}
+          <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" />
         </body>
       </html>
     )
diff --git a/www/src/layouts/index.js b/www/src/layouts/index.js
index 815660de7ff4e..6e82243b004d4 100644
--- a/www/src/layouts/index.js
+++ b/www/src/layouts/index.js
@@ -30,6 +30,7 @@ class DefaultLayout extends React.Component {
       this.props.location.pathname.slice(0, 10) === `/packages/` ||
       this.props.location.pathname.slice(0, 10) === `/tutorial/` ||
       this.props.location.pathname.slice(0, 9) === `/features`
+    const isSearchSource = hasSidebar
     const sidebarStyles = {
       borderRight: `1px solid ${colors.b[0]}`,
       backgroundColor: presets.sidebar,
@@ -45,7 +46,6 @@ class DefaultLayout extends React.Component {
       position: `fixed`,
       top: `calc(${presets.headerHeight} - 1px)`,
       overflowY: `auto`,
-      zIndex: 1,
       height: `calc(100vh - ${presets.headerHeight} + 1px)`,
       WebkitOverflowScrolling: `touch`,
       "::-webkit-scrollbar": {
@@ -136,6 +136,7 @@ class DefaultLayout extends React.Component {
                 paddingLeft: hasSidebar ? rhythm(12) : 0,
               },
             }}
+            className={isSearchSource && `docSearch-content`}
           >
             {this.props.children()}
           </div>
diff --git a/www/static/search.svg b/www/static/search.svg
new file mode 100644
index 0000000000000..b9faa8c07133e
--- /dev/null
+++ b/www/static/search.svg
@@ -0,0 +1,4 @@
+<svg viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg" fill="#9D7CBF">
+  <!-- Based on the 'search' icon in https://github.com/ionic-team/ionicons -->
+  <g><path d="m34.8 30.2c0.3 0.3 0.3 0.8 0 1.1l-3.4 3.5c-0.1 0.1-0.4 0.2-0.6 0.2s-0.4-0.1-0.6-0.2l-6.5-6.8c-2 1.2-4.1 1.8-6.3 1.8-6.8 0-12.4-5.5-12.4-12.4s5.6-12.4 12.4-12.4 12.4 5.5 12.4 12.4c0 2.1-0.6 4.2-1.7 6.1z m-17.4-20.4c-4.1 0-7.6 3.4-7.6 7.6s3.5 7.6 7.6 7.6 7.5-3.4 7.5-7.6-3.3-7.6-7.5-7.6z"/></g>
+</svg>