diff --git a/www/src/components/search-form.js b/www/src/components/search-form.js
index 833ae18fa9044..2a8c43a2a09e8 100644
--- a/www/src/components/search-form.js
+++ b/www/src/components/search-form.js
@@ -6,120 +6,222 @@ 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;
+// Override default search result styles (docsearch.css)
+css.insert(`
+  .algolia-autocomplete .ds-dropdown-menu {
+    position: fixed !important;
+    top: ${rhythm(2)} !important;
+    left: ${rhythm(0.5)} !important;
+    right: ${rhythm(0.5)} !important;
+    min-width: calc(100vw - ${rhythm(1)}) !important;
+    max-width: calc(100vw - 2rem) !important;
+    max-height: calc(100vh - 5rem) !important;
+    box-shadow: 0 3px 10px 0.05rem rgba(${presets.shadowColor}, .25) !important;
   }
+
+  /* .searchWrap to beat docsearch.css' !important */
+  .searchWrap .algolia-autocomplete.algolia-autocomplete-right .ds-dropdown-menu,
+  .searchWrap .algolia-autocomplete.algolia-autocomplete-left .ds-dropdown-menu {
+    left: ${rhythm(0.5)} !important;
+    right: ${rhythm(0.5)} !important;
+  }
+
+  .algolia-autocomplete .ds-dropdown-menu .ds-suggestions {
+    margin-top: 0 !important;
+  }
+
+  .algolia-docsearch-suggestion--wrapper {
+    padding-top: 0 !important;
+  }
+
+  .algolia-autocomplete .algolia-docsearch-suggestion--subcategory-column {
+    color: ${presets.calm} !important;
+    font-size: 0.9rem !important;
+    font-weight: normal !important;
+    padding: ${rhythm(0.25)} ${rhythm(0.5)} !important;
+  }
+  
+  .algolia-autocomplete .algolia-docsearch-suggestion--subcategory-column:before {
+    background: ${presets.veryLightPurple} !important;
+  }
+
+  .algolia-autocomplete .algolia-docsearch-suggestion--subcategory-column:after {
+    display: none !important;
+  }
+
+  .algolia-autocomplete .algolia-docsearch-suggestion {
+    padding: 0 !important;
+  }
+
+  .algolia-autocomplete .algolia-docsearch-suggestion--content {
+    padding: ${rhythm(0.5)} !important;
+    width: 100% !important;
+    max-width: 100% !important;
+  }
+
+  /* Caret */
+  .algolia-autocomplete .ds-dropdown-menu::before {
+    border-top-color: ${presets.lightPurple} !important;
+    border-right-color: ${presets.lightPurple} !important;
+  }
+
+  .algolia-autocomplete .ds-dropdown-menu [class^="ds-dataset-"] {
+    padding: 0 !important;
+    border-color: ${presets.lightPurple} !important;
+  }
+
+  .algolia-autocomplete .algolia-docsearch-suggestion--highlight {
+    background-color: ${presets.lightPurple} !important;
+    box-shadow: 0 !important;
+    color: ${presets.brand} !important;
+  }
+
+  .algolia-autocomplete .algolia-docsearch-suggestion--text {
+    color: ${presets.calm} !important;
+  }
+
+  .algolia-autocomplete .algolia-docsearch-suggestion--text .algolia-docsearch-suggestion--highlight {
+    background: transparent !important;
+    box-shadow: inset 0 -2px 0 0 ${presets.brand} !important;
+  }
+
+  .algolia-autocomplete .algolia-docsearch-suggestion .algolia-docsearch-suggestion--subcategory-column {
+    width: 100% !important;
+  }
+
+  .algolia-autocomplete .ds-dropdown-menu .ds-suggestion.ds-cursor .algolia-docsearch-suggestion:not(.suggestion-layout-simple) .algolia-docsearch-suggestion--content {
+    background-color: ${presets.brandLighter} !important;
+  }
+
+  .algolia-autocomplete .algolia-docsearch-suggestion .algolia-docsearch-suggestion--content.algolia-docsearch-suggestion--no-results {
+    max-width: 100% !important;
+    width: 100% !important;
+    font-weight: normal !important;
+    padding: ${rhythm(0.75)} ${rhythm(0.5)} !important;
+  }
+
+  .algolia-autocomplete .algolia-docsearch-suggestion .algolia-docsearch-suggestion--content.algolia-docsearch-suggestion--no-results .algolia-docsearch-suggestion--title {
+    margin-bottom: 0 !important;
+  }
+
+  .algolia-autocomplete .algolia-docsearch-suggestion .algolia-docsearch-suggestion--content.algolia-docsearch-suggestion--no-results .algolia-docsearch-suggestion--text {
+    color: rgb(38, 32, 44) !important;
+    font-weight: normal !important;
+  }
+
+  .algolia-autocomplete .algolia-docsearch-suggestion .algolia-docsearch-suggestion--content.algolia-docsearch-suggestion--no-results .algolia-docsearch-suggestion--text:after {
+    content: "😔";
+  }
+
+  .algolia-autocomplete .algolia-docsearch-suggestion--category-header {
+    padding: ${rhythm(0.25)} ${rhythm(0.5)} !important;
+    margin-top: 0 !important;
+    font-size: 0.9rem !important;
+    border-color: ${presets.veryLightPurple} !important;
+    color: ${presets.brand} !important;
+    font-weight: bold !important;
+  }
+
   .searchWrap .algolia-autocomplete.algolia-autocomplete-right .ds-dropdown-menu::before {
-    right: ${rhythm(2)};
+    right: ${rhythm(4.75)} !important;
+  }
+
+  .algolia-autocomplete .algolia-docsearch-suggestion .algolia-docsearch-suggestion--content.algolia-docsearch-suggestion--no-results:before {
+    display: none !important;
+  }
+
+  .algolia-autocomplete .algolia-docsearch-footer {
+    width: 100% !important;
+    height: 30px !important;
+    margin-top: 0 !important;
+    border-top: 1px dotted ${presets.veryLightPurple} !important;
+  }
+
+  .algolia-autocomplete .algolia-docsearch-footer--logo {
+    width: 110px !important;
+    height: 100% !important;
+    margin-left: auto !important;
+    margin-right: ${rhythm(0.5)} !important;
+  }
+
+  @media ${presets.phablet} {
+    .algolia-autocomplete .algolia-docsearch-suggestion--category-header {
+      color: inherit !important;
+      font-weight: normal !important;
+    }
+
+    .algolia-autocomplete .algolia-docsearch-suggestion .algolia-docsearch-suggestion--subcategory-column {
+      width: 30% !important;
+      text-align: right !important;
+      opacity: 1 !important;
+      padding: ${rhythm(0.5)} ${rhythm(0.75)} !important;
+    }
+
+    .algolia-autocomplete .algolia-docsearch-suggestion--category-header {
+      padding: ${rhythm(0.5)} ${rhythm(0.75)} !important;
+    }
+
+    .algolia-autocomplete .algolia-docsearch-suggestion--content {
+      width: 70% !important;
+      max-width: 70% !important;
+      padding: ${rhythm(0.5)} ${rhythm(0.75)} !important;
+    }
+
+    .algolia-autocomplete .algolia-docsearch-suggestion--content:before,
+    .algolia-autocomplete .algolia-docsearch-suggestion--subcategory-column:after {
+      display: block !important;
+      content: "" !important;
+      position: absolute !important;
+      top: 0 !important;
+      height: 100% !important;
+      width: 1px !important;
+      background: ${presets.veryLightPurple} !important;
+    }
+
+    .algolia-autocomplete .algolia-docsearch-suggestion--subcategory-column:after {
+      right: 0 !important;
+    }
+
+    .algolia-autocomplete .algolia-docsearch-suggestion--content:before {
+      left: -1px !important;
+    }
+  }
+
+  @media ${presets.tablet} {
+    .algolia-autocomplete .ds-dropdown-menu {
+      top: 100% !important;
+      position: absolute !important;
+      max-width: 600px !important;
+      min-width: 500px !important;
+    }
+
+    /* .searchWrap to beat docsearch.css' !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(3)} !important;
+    }
+  }
+
+  @media ${presets.desktop} {
+    .algolia-autocomplete .ds-dropdown-menu {
+      max-width: 600px !important;
+      min-width: 540px !important;
+    }
+
+    .algolia-autocomplete .algolia-docsearch-suggestion .algolia-docsearch-suggestion--subcategory-column {
+      width: 35% !important;
+    }
+
+    .algolia-autocomplete .algolia-docsearch-suggestion--content {
+      width: 65% !important;
+      max-width: 65% !important;
+    }
   }
-}`)
+`)
 
 class SearchForm extends Component {
   constructor() {