diff --git a/docs/components/Homepage/Demo/style.css b/docs/components/Homepage/Demo/style.css
index 481072f2fe28..cca7f4b06b5c 100644
--- a/docs/components/Homepage/Demo/style.css
+++ b/docs/components/Homepage/Demo/style.css
@@ -1,11 +1,7 @@
 .demo-img {
-  width: 800px;
-  border: 5px solid #444;
-}
-
-@media only screen and (max-width: 800px) {
-  .demo-img {
-    width: 90%;
-    border: 2px solid #444;
-  }
+  max-width: 800px;
+  width: 100%;
+  border: 2px solid rgba(0, 0, 0, 0.35);
+  box-shadow: 0 0 40px rgba(0, 0, 0, 0.4);
+  border-radius: 4px;
 }
diff --git a/docs/components/Homepage/Heading/index.js b/docs/components/Homepage/Heading/index.js
index 3059ff30a762..3147efe1d866 100644
--- a/docs/components/Homepage/Heading/index.js
+++ b/docs/components/Homepage/Heading/index.js
@@ -10,11 +10,7 @@ const Heading = () =>
       <h3 className="sb-tagline">
         The UI Development Environment
         <br />
-        You'll
-        {' '}
-        <span className="glyphicon glyphicon-heart heart" />
-        {' '}
-        to use
+        You'll ♥️ to use
       </h3>
     </div>
   </div>;
diff --git a/docs/components/Homepage/MainLinks/index.js b/docs/components/Homepage/MainLinks/index.js
index c8eefd3283af..6d08eda237e3 100644
--- a/docs/components/Homepage/MainLinks/index.js
+++ b/docs/components/Homepage/MainLinks/index.js
@@ -1,32 +1,98 @@
 import React from 'react';
 import { Link } from 'react-router';
+import { UsedByBg } from '../UsedBy/';
 import './style.css';
 
 const MainLinks = () =>
-  <div id="main-links" className="row">
-    <div className="col-md-12">
-      <div className="row">
-        <div className="main-links-container">
-          <div className="col-xs-6 try-now">
-            <h2>Try Now</h2>
-            <pre>
-              <code>
-                npm i -g @storybook/cli<br />
-                cd my-react-app<br />
-                getstorybook<br />
-              </code>
-            </pre>
-          </div>
+  <div id="main-links">
+    <div className="main-links-container">
+      <div className="try-now">
+        <h2>Try Now</h2>
+        <pre>
+          <code>
+            npm i -g @storybook/cli<br />
+            cd my-react-app<br />
+            getstorybook<br />
+          </code>
+        </pre>
+      </div>
 
-          <div className="col-xs-6 read-docs">
-            <h2>Read Docs</h2>
-            <center>
-              <Link to="/basics/introduction/">
-                <div className="docs-img" />
-              </Link>
-            </center>
+      <div
+        className="row"
+        id="nav"
+        style={{
+          borderRight: '0 none',
+          position: 'relative',
+        }}
+      >
+        <UsedByBg
+          color="#a7d0ff"
+          style={{
+            transform: 'rotateY(180deg)',
+          }}
+        />
+        <div className="col-xs-12 read-docs">
+          <h2 style={{ color: '#6DABF5' }}>Documentation</h2>
+          <div
+            className="form-group has-feedback"
+            style={{ maxWidth: '450px', margin: '20px auto' }}
+          >
+            <label className="sr-only control-label" htmlFor="search">
+              Search storybook documentation
+            </label>
+            <input
+              className="form-control"
+              type="search"
+              id="search"
+              placeholder="type to search"
+            />
+            <span className="form-control-feedback" aria-hidden="true">🔍</span>
           </div>
         </div>
+
+        <div className="col-sm-4 read-docs">
+          <Link to="/basics/introduction/"><h3>Basics</h3></Link>
+          <ul>
+            <li><Link to="/basics/quick-start-guide/">Quick setup</Link></li>
+            <li><Link to="/basics/slow-start-guide/">Adding to existing project</Link></li>
+            <li><Link to="/basics/slow-start-guide/">Writing stories</Link></li>
+          </ul>
+        </div>
+
+        <div className="col-sm-4 read-docs">
+          <Link to="/configurations/default-config/"><h3>Configuration</h3></Link>
+          <ul>
+            <li><Link to="/configurations/custom-babel-config/">Babel configurations</Link></li>
+            <li>
+              <Link to="/configurations/custom-webpack-config/">Webpack configurations</Link>
+            </li>
+            <li>
+              <Link to="/configurations/add-custom-head-tags/">Custom scripts & styling</Link>
+            </li>
+            <li>
+              <Link to="/configurations/serving-static-files/">Serving static files</Link>
+            </li>
+          </ul>
+        </div>
+
+        <div className="col-sm-4 read-docs">
+          <Link to="/configurations/default-config/"><h3>Addons</h3></Link>
+          <ul>
+            <li><Link to="/addons/introduction/">Intro to Addons</Link></li>
+            <li>
+              <Link to="/addons/using-addons/">Using Addons</Link>
+            </li>
+            <li>
+              <Link to="/addons/addon-gallery/">Addon Gallery</Link>
+            </li>
+            <li>
+              <Link to="/addons/writing-addons/">Writing Addons</Link>
+            </li>
+            <li>
+              <Link to="/addons/api/">Api</Link>
+            </li>
+          </ul>
+        </div>
       </div>
     </div>
   </div>;
diff --git a/docs/components/Homepage/MainLinks/style.css b/docs/components/Homepage/MainLinks/style.css
index 87cbe9c5f9d9..e91b64fb0ea6 100644
--- a/docs/components/Homepage/MainLinks/style.css
+++ b/docs/components/Homepage/MainLinks/style.css
@@ -7,32 +7,29 @@
 }
 
 .main-links-container {
-  max-width: 600px;
   margin: auto;
 }
 
 #main-links h2 {
-  text-transform: uppercase;
   text-align: center;
-  font-size: 25px;
-  font-weight: 600;
 }
 
 #main-links pre {
   background-color: #444;
   color: #DDD;
-  padding: 15px 30px;
+  padding: 15px 20px;
   line-height: 22px;
   border: 0;
   border-radius: 0;
 }
 
-.docs-img {
-  background: url('./images/docs.png');
-  background-repeat: no-repeat;
-  width: 40px;
-  height: 54px;
-  margin-top: 25px;
+.algolia-autocomplete {
+  display: block !important;
+}
+
+.try-now {
+  max-width: 450px;
+  margin: 40px auto;
 }
 
 @media only screen and (max-width: 700px) {
diff --git a/docs/components/Homepage/UsedBy/index.jsx b/docs/components/Homepage/UsedBy/index.jsx
index 18d359d93404..dcb0594a5a45 100644
--- a/docs/components/Homepage/UsedBy/index.jsx
+++ b/docs/components/Homepage/UsedBy/index.jsx
@@ -3,8 +3,8 @@ import React from 'react';
 import { Link } from 'react-router';
 import './style.css';
 
-const UsedByBg = ({ color }) =>
-  <div className="used-by-bg">
+export const UsedByBg = ({ color, style }) =>
+  <div className="used-by-bg" style={style}>
     <svg
       width="100%"
       height="100%"
@@ -28,9 +28,12 @@ const UsedByBg = ({ color }) =>
   </div>;
 UsedByBg.propTypes = {
   color: PropTypes.string,
+  // eslint-disable-next-line
+  style: PropTypes.object,
 };
 UsedByBg.defaultProps = {
   color: 'white',
+  style: {},
 };
 
 const User = ({ logo, demo, site, title }) =>
diff --git a/docs/components/Homepage/UsedBy/style.css b/docs/components/Homepage/UsedBy/style.css
index dad2519757cf..e4c0306f955f 100644
--- a/docs/components/Homepage/UsedBy/style.css
+++ b/docs/components/Homepage/UsedBy/style.css
@@ -10,10 +10,10 @@
 
 .used-by-bg {
   position: absolute;
-  top: 0px;
-  left: 0px;
-  right: 0px;
-  bottom: 0px;
+  top: -30px;
+  left: -30px;
+  right: -30px;
+  bottom: -30px;
 }
 
 .used-by-bg svg {
diff --git a/docs/html.js b/docs/html.js
index 31c6f2357014..38b1ed3f1a1e 100644
--- a/docs/html.js
+++ b/docs/html.js
@@ -16,6 +16,25 @@ const HTML = props => {
     css = <style dangerouslySetInnerHTML={{ __html: require('!raw!./public/styles.css') }} />;
   }
 
+  const searchScript = [
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.css" />,
+    <script
+      type="text/javascript"
+      src="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.js"
+    />,
+    <script
+      type="text/javascript"
+      dangerouslySetInnerHTML={{
+        __html: `docsearch({
+          apiKey: 'a4f7f972f1d8f99a66e237e7fd2e489f',
+          indexName: 'storybook-js',
+          inputSelector: '#search',
+          debug: false // Set debug to true if you want to inspect the dropdown
+        });`,
+      }}
+    />,
+  ];
+
   return (
     <html lang="en">
       <head>
@@ -29,6 +48,7 @@ const HTML = props => {
       <body>
         <div id="react-mount" dangerouslySetInnerHTML={{ __html: props.body }} />
         <script src={prefixLink(`/bundle.js?t=${BUILD_TIME}`)} />
+        {searchScript}
       </body>
     </html>
   );
diff --git a/docs/package.json b/docs/package.json
index 5f88b728135e..e27eba457bae 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -31,6 +31,7 @@
     "bootstrap": "^3.3.7",
     "chroma-js": "^0.7.2",
     "color-pairs-picker": "^1.3.5",
+    "docsearch.js": "^2.3.3",
     "front-matter": "^2.1.2",
     "gatsby": "^0.12.45",
     "gh-pages": "^0.12.0",