diff --git a/public/_includes/_head-include.jade b/public/_includes/_head-include.jade
index 2e46febe96..57cc6aadc7 100644
--- a/public/_includes/_head-include.jade
+++ b/public/_includes/_head-include.jade
@@ -40,6 +40,7 @@ link(href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesh
 link(rel="stylesheet" href="/resources/css/vendor/icomoon/style.css")
 link(rel="stylesheet" href="/resources/css/vendor/animate.css")
 link(rel="stylesheet" href="/resources/css/main.css")
+link(rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.css")
 
 <!-- MOBILE ICONS -->
 <link rel="apple-touch-icon" sizes="57x57" href="/resources/images/favicons/apple-touch-icon-57x57.png">
diff --git a/public/_includes/_scripts-include.jade b/public/_includes/_scripts-include.jade
index b9b2266f3e..39f98d37e1 100644
--- a/public/_includes/_scripts-include.jade
+++ b/public/_includes/_scripts-include.jade
@@ -37,6 +37,7 @@ script(src="/resources/js/directives/if-docs.js")
 script(src="/resources/js/directives/live-example.js")
 script(src="/resources/js/directives/ngio-ex-path.js")
 script(src="/resources/js/directives/scroll-y-offset-element.js")
+script(src="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.js")
 
 <!-- GA -->
 script.
@@ -50,14 +51,15 @@ script.
 
 
 if current.path[0] == "docs"
-  <!-- SWIFTYPE -->
+  <!-- DOCSEARCH -->
   script.
-    (function(w,d,t,u,n,s,e){w['SwiftypeObject']=n;w[n]=w[n]||function(){
-    (w[n].q=w[n].q||[]).push(arguments);};s=d.createElement(t);
-    e=d.getElementsByTagName(t)[0];s.async=1;s.src=u;e.parentNode.insertBefore(s,e);
-    })(window,document,'script','//s.swiftypecdn.com/install/v1/st.js','_st');
-
-    _st('install','VsuU7kH5Hnnj9tfyNvfK');
+    docsearch({
+      apiKey: '4d0c7e9f3bc6a55d33a7c3a683a841f8',
+      indexName: 'angular',
+      inputSelector: '#docsearch',
+      algoliaOptions: {facetFilters: ['language:#{current.path[1]}'] },
+      debug: false // Set to true if you want to inspect the dropdown
+    });
 
 <!-- Google Feedback -->
 script(src="//www.gstatic.com/feedback/api.js" type="text/javascript")
diff --git a/public/docs/_includes/_side-nav.jade b/public/docs/_includes/_side-nav.jade
index 0f3fedb90f..4d130fbfe8 100644
--- a/public/docs/_includes/_side-nav.jade
+++ b/public/docs/_includes/_side-nav.jade
@@ -64,8 +64,8 @@ nav(class="sidenav l-pinned-left l-layer-4 l-offset-nav"  ng-class="appCtrl.show
   // SEARCH BAR
   header.sidenav-search.st-input-wrapper
     form.st-input-inner
-      label(for="search-io" class="is-hidden") Search Docs
-      input(type="search" id="search-io" placeholder="SEARCH DOCS...")
+      label(for="docsearch" class="is-hidden") Search Docs
+      input(type="search" id="docsearch" placeholder="SEARCH DOCS...")
     button(class="mobile-trigger button" aria-label="View Docs Menu" ng-click="appCtrl.toggleDocsMenu($event)" md-button) Docs <span class="icon icon-arrow-drop-down"></span>
 
   ul(class="sidenav-links")
diff --git a/public/resources/css/module/_side-nav.scss b/public/resources/css/module/_side-nav.scss
index 468e5cb101..0058ca3ca2 100644
--- a/public/resources/css/module/_side-nav.scss
+++ b/public/resources/css/module/_side-nav.scss
@@ -25,7 +25,8 @@ $sidenav-width: 240px;
 #{$sidenav} {
   background: $sidenav-background;
   box-shadow: 3px 0px 6px rgba($black, .24);
-  padding-bottom: 72px;
+  padding-top: 104px; // 48px (searchbar) + 56px (header)
+  padding-bottom: 72px; // nav footer fixed button
   width: $sidenav-width;
   bottom: 0px;
   overflow: auto;
@@ -38,6 +39,7 @@ $sidenav-width: 240px;
     right: 0;
     bottom: auto;
     padding-bottom: 0;
+    padding-top: 56px;
 
     #{$sidenav}-links  {
       display: none;
@@ -69,12 +71,15 @@ $sidenav-width: 240px;
   box-shadow: none;
   padding: $unit;
   height: $unit * 6;
-  position: relative;
+  position: fixed;
+  width: $sidenav-width;
+  z-index: $layer-10;
+  top: 56px;
 
   @include respond-to('mobile') {
     border-bottom: none;
     padding-right: $unit * 14;
-    overflow: hidden;
+    width: 100%;
   }
 
   input {
@@ -106,6 +111,40 @@ $sidenav-width: 240px;
       color: $blue-grey-100;
       font-size: 12px;
     }
+    &:focus {
+      outline: 0
+    }
+  }
+
+  .algolia-autocomplete {
+    width: 100%;
+
+    &.algolia-autocomplete-left {
+      // DROPDOWN MENU ON THE RIGHT ON DESKTOP
+      .ds-dropdown-menu {
+        top: -7px !important;
+        left: calc(100% + 10px) !important;
+
+        &::before { // arrow
+          transform: rotate(-135deg);
+          left: -6px !important;
+          top: 10px !important;
+        }
+
+        // DROPDOWN MENU BELOW ON MOBILE
+        @include respond-to('mobile') {
+          min-width: auto;
+          top: 100% !important;
+          left: 0 !important;
+
+          &::before { // arrow
+            transform: rotate(-45deg);
+            left: 48px !important;
+            top: -6px !important;
+          }
+        }
+      }
+    }
   }
 
   .mobile-trigger {