diff --git a/docs/_includes/searchbar.html b/docs/_includes/searchbar.html
index 7bd7d5512..2653919d0 100644
--- a/docs/_includes/searchbar.html
+++ b/docs/_includes/searchbar.html
@@ -9,14 +9,14 @@
 </svg>
 
 <form role="search" novalidate="novalidate" class="searchbox sbx-custom">
-    <input type="search" name="search" placeholder="Search in the documentation" autocomplete="off" required="required" class="sbx-custom__input">
+    <input onkeyup="updateReset()" type="search" name="search" placeholder="Search in the documentation" autocomplete="off" required="required" class="sbx-custom__input">
     <button type="submit" class="sbx-custom__submit">
         <svg role="img" aria-label="Search">
             <title>Icon Search</title>
             <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#sbx-icon-search-13"></use>
         </svg>
     </button>
-    <button type="reset" class="sbx-custom__reset">
+    <button type="reset" class="sbx-custom__reset hide">
         <svg role="img" aria-label="Reset">
             <title>Icon Reset</title>
             <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#sbx-icon-clear-2"></use>
@@ -27,8 +27,20 @@
 <script type="text/javascript">
     //<![CDATA[
     document.querySelector('.searchbox [type="reset"]').addEventListener('click', function() {
-        this.parentNode.querySelector('input').focus();
+        document.querySelector('.aa-input').focus();
+        this.className += " hide";
     });
 
+    function updateReset() {
+      var searchbox = document.querySelector('.aa-input');
+      var reset = document.querySelector('.searchbox [type="reset"]');
+      reset.className = "";
+      reset.className = "sbx-custom__reset";
+      if (searchbox.value.length === 0){
+        reset.className += " hide";
+      }
+    }
+
+
     //]]>
-</script>
\ No newline at end of file
+</script>
diff --git a/docs/_layouts/default.html b/docs/_layouts/default.html
index f6fd2da14..0bdb964e0 100644
--- a/docs/_layouts/default.html
+++ b/docs/_layouts/default.html
@@ -35,7 +35,7 @@
     <link rel="icon" href="{{ "/img/favicon.png" | prepend: site.baseurl }}">
 
     <!-- Fonts -->
-    <link rel="stylesheet" media="screen" href="//fonts.googleapis.com/css?family=Raleway:300,800" />
+    <link rel="stylesheet" media="screen" href="//fonts.googleapis.com/css?family=Raleway:300,600" />
     <link rel="stylesheet" media="screen" href="//fonts.googleapis.com/css?family=Open+Sans:300,400,600" />
 
     <link rel="stylesheet" media="screen" href="{{ "/css/main.css" | prepend: site.baseurl }}" />
@@ -65,7 +65,10 @@
       docsearch({
         apiKey: '25626fae796133dc1e734c6bcaaeac3c',
         indexName: 'docsearch',
-        inputSelector: '.sbx-custom__input'
+        inputSelector: '.sbx-custom__input',
+        autocompleteOptions: {
+          debug: false
+        }
       });
     </script>
 
diff --git a/docs/css/_docsearch.scss b/docs/css/_docsearch.scss
index f51d9c9b3..97fff4401 100644
--- a/docs/css/_docsearch.scss
+++ b/docs/css/_docsearch.scss
@@ -1,12 +1,12 @@
-$color-border: #3A3A3A;
+$color-border: #EEE;
 $color-border-light: lighten($color-border, 15%);
-$color-category-header-background: #3C4658;
+$color-category-header-background: white;
 $color-highlight-header-background: lighten($color-category-header-background, 15%);
 $color-highlight-text: #0064E1;
-$color-selected-background: #E7EDF3;
-$color-selected-text: #0064E1;
-$color-left-column-bg: #F1F3F5;
-$color-left-column: #555;
+$color-selected-background: rgba(#40ADDC,.07);
+$color-selected-text: black;
+$color-left-column-bg: white;
+$color-left-column: #aaa;
 
 $breakpoint-medium: 568px;
 $breakpoint-large: 768px;
@@ -41,11 +41,13 @@ $dropdown-min-width-large: 600px;
 // Main category headers
 .algolia-docsearch-suggestion--category-header {
   display: none;
-  background: $color-category-header-background;
-  color: white;
+  border-bottom: solid 1px #ccc;
+  color: #40ADDC;
   font-weight: 600;
-  padding: 5px 10px;
+  padding: 5px 15px;
   text-align: left;
+  font-size: 1.1em;
+  background-color: white;
   // Only show it when flaggued as "__main"
   .algolia-docsearch-suggestion__main & {
     display: block;
@@ -55,9 +57,9 @@ $dropdown-min-width-large: 600px;
 // Highlight
 .algolia-docsearch-suggestion--highlight {
   padding: 0;
-  color: $color-highlight-text;
-  background: none;
-  font-weight: 600;
+  color: #40ADDC;
+  padding: 0 2px;
+  background: rgba(#40ADDC,.1);
   // Highlight the background in header
   .algolia-docsearch-suggestion--category-header & {
     color: inherit;
@@ -86,9 +88,8 @@ $dropdown-min-width-large: 600px;
 .algolia-docsearch-suggestion--content {
   padding: 3px 5px;
   width: 100%;
-  border-top: 1px solid lighten($color-border, 60%);
 }
-  
+
   .algolia-docsearch-suggestion__main .algolia-docsearch-suggestion--content,
   .algolia-docsearch-suggestion__secondary .algolia-docsearch-suggestion--content {
     border-top: 0;
@@ -96,17 +97,17 @@ $dropdown-min-width-large: 600px;
 
 .algolia-docsearch-suggestion--subcategory-inline {
   display: inline-block;
-  font-weight: bold;
+  font-weight: 400;
   &:after {
     content: " › ";
   }
 }
 .algolia-docsearch-suggestion--title {
   display: inline;
+  font-weight: 600;
 }
 
 // Footer
-
 .algolia-docsearch-footer {
   border-top: 1px solid $color-border-light;
   text-align: right;
@@ -128,70 +129,59 @@ $dropdown-min-width-large: 600px;
   }
 }
 
-// BREAKPOINT 1:
-// Screen is big enough to display the text snippets
-@media (min-width: $breakpoint-medium) {
-  .aa-dropdown-menu {
-    min-width: $dropdown-min-width-medium;
-  }
-  .algolia-docsearch-suggestion--text {
-    display: block;
-    font-size: .9em;
-    padding: 2px 0;
-  }
+.aa-dropdown-menu {
+  min-width: $dropdown-min-width-large;
+}
+.algolia-docsearch-suggestion {
+  display: table;
+  width: 100%;
 }
 
-// BREAKPOINT 2:
-// Screen is big enough to display results in two columns
-@media (min-width: $breakpoint-large) {
-  .aa-dropdown-menu {
-    min-width: $dropdown-min-width-large;
-  }
-  .algolia-docsearch-suggestion {
-    display: table;
-    width: 100%;
-  }
-
-  .algolia-docsearch-suggestion__secondary {
-    border-top: 1px solid $color-border-light;
-  }
+.algolia-docsearch-suggestion__secondary {
+  border-top: 1px solid $color-border-light;
+}
 
-  .algolia-docsearch-suggestion--subcategory-column {
-    border-right: 1px solid $color-border-light;
-    background: $color-left-column-bg;
-    color: $color-left-column;
-    display: table-cell;
-    overflow: hidden;
-    padding: 5px 7px 5px 5px;
-    text-align: right;
-    text-overflow: ellipsis;
-    vertical-align: top;
-
-    width: 135px; // Hardcoded
-    max-width: 135px; // Hardcoded
-    min-width: 135px; // Hardcoded
-  }
+.algolia-docsearch-suggestion--subcategory-column {
+  border-right: 1px solid $color-border-light;
+  background: transparent;
+  color: #999;
+  display: table-cell;
+  overflow: hidden;
+  padding: 5px 7px 5px 10px;
+  text-align: left;
+  font-size: 0.9em;
+  font-family: "Open Sans";
+  text-overflow: ellipsis;
+  vertical-align: top;
+  border-right: 1px solid #ccc;
+
+  width: 160px; // Hardcoded
+  max-width: 160px; // Hardcoded
+  min-width: 160px; // Hardcoded
+}
 
-  .algolia-docsearch-suggestion--subcategory-column-text {
-    display: none;
+.algolia-docsearch-suggestion--subcategory-column-text {
+  display: none;
 
-    .algolia-docsearch-suggestion__secondary & {
-      display: block;
-    }
-  }
-  .algolia-docsearch-suggestion--content {
-    display: table-cell;
-    padding: 5px 10px;
-  }
-  .algolia-docsearch-suggestion--subcategory-inline {
-    display: none;
-  }
-  .algolia-docsearch-suggestion--title {
-    font-weight: 600;
-  }
-  .algolia-docsearch-suggestion--text {
+  .algolia-docsearch-suggestion__secondary & {
     display: block;
-    font-weight: normal;
-    padding: 2px;
   }
 }
+.algolia-docsearch-suggestion--content {
+  display: table-cell;
+  padding: 5px 10px;
+}
+.algolia-docsearch-suggestion--subcategory-inline {
+  display: none;
+}
+.algolia-docsearch-suggestion--text {
+  display: block;
+  font-weight: 400;
+  font-family: "Open Sans";
+  font-size: .8em;
+  padding: 2px;
+}
+
+.algolia-docsearch-suggestion--wrapper {
+  margin: 10px;
+}
diff --git a/docs/css/_searchbar.scss b/docs/css/_searchbar.scss
index 04dc73f2c..e268a5d2a 100644
--- a/docs/css/_searchbar.scss
+++ b/docs/css/_searchbar.scss
@@ -1,22 +1,20 @@
 $custom:(
-        input-width: 240px,
-        input-height: 36px,
-        border-width: 2px,
-        border-radius: 18px,
-        input-border-color: #1D96C7,
-        input-focus-border-color: #1D96C7,
-        input-background: #091724,
-        input-focus-background: #091724,
-        font-size: 13px,
-        placeholder-color: #AAAAAA,
-        icon: sbx-icon-search-13,
-        icon-size: 16px,
-        icon-position: left,
-        icon-color: #1D96C7,
-        icon-background: #FFFFFF,
-        icon-background-opacity: 0,
-        icon-clear: sbx-icon-clear-2,
-        icon-clear-size: 12px
+  input-width: 240px,
+  input-height: 36px,
+  border-width: 2px,
+  border-radius: 18px,
+  input-border-color: darken(#1D96C7,10%),
+  input-focus-border-color: #1D96C7,
+  input-background: #091724,
+  input-focus-background: #091724,
+  font-size: 13px,
+  placeholder-color: #AAAAAA,
+  icon-size: 16px,
+  icon-position: left,
+  icon-color: #1D96C7,
+  icon-background: #FFFFFF,
+  icon-background-opacity: 0,
+  icon-clear-size: 12px
 );
 
 @mixin searchbox(
@@ -130,7 +128,6 @@ $custom:(
   }
 
   &__reset {
-    display: none;
     position: absolute;
     top: ($input-height - $icon-clear-size) / 2 - 4px;
     right: if($icon-position == 'right', 8px + $input-height, ($input-height - $icon-clear-size) / 2) - 4px;
@@ -140,7 +137,10 @@ $custom:(
     cursor: pointer;
     padding: 0;
     user-select: none;
-    fill: rgba(#000, .5);
+
+    &.hide{
+      display: none;
+    }
 
     &:focus {
       outline: 0;
@@ -151,6 +151,7 @@ $custom:(
       margin: 4px;
       width: $icon-clear-size;
       height: $icon-clear-size;
+      fill: $icon-color;
     }
   }
 
diff --git a/docs/documentation.md b/docs/documentation.md
index 19eabb446..8a0a3055f 100644
--- a/docs/documentation.md
+++ b/docs/documentation.md
@@ -32,7 +32,10 @@ need to add the following code snippet to your website:
 docsearch({
   apiKey: '<API_KEY>',
   indexName: '<INDEX_NAME>',
-  inputSelector: '<YOUR_INPUT_DOM_SELECTOR>'
+  inputSelector: '<YOUR_INPUT_DOM_SELECTOR>',
+  autocompleteOptions: {
+    debug: false
+  }
 });
 </script>
 ```
@@ -93,7 +96,7 @@ If you want to do heavily change the way results are displayed, you might find
 it easier to directly edit the `scss` files in this repository.
 
 [`_variables.scss`][18]
-contains all the color, breakpoints and size definitions while 
+contains all the color, breakpoints and size definitions while
 [`_main.scss`][19]
 holds the structure of the display.
 
@@ -113,7 +116,7 @@ results from the Algolia API. As such, you can use any options provided by
 
 You can pass any options to the underlying `autocomplete` instance through
 the`autocompleteOptions` parameter. You will find all `autocomplete` options in
-its [own documentation][22]. 
+its [own documentation][22].
 
 You can also listen to `autocomplete` events through the `.autocomplete`
 property of the `docsearch` instance.
@@ -175,7 +178,7 @@ You will find all Algolia API options in its [own documentation][23]
 [16]: https://community.algolia.com/docsearch/
 [17]: https://community.algolia.com/docsearch/img/default-colorscheme.png
 [18]: https://github.com/algolia/docsearch/blob/master/src/styles/_variables.scss
-[19]: https://github.com/algolia/docsearch/blob/master/src/styles/_main.scss
+[19]: https://github.com/algolia/docsearch/blob/master/src/styles/main.scss
 [20]: https://github.com/algolia/autocomplete.js
 [21]: https://github.com/algolia/autocomplete.js
 [22]: https://github.com/algolia/autocomplete.js#options
@@ -184,4 +187,3 @@ You will find all Algolia API options in its [own documentation][23]
 [25]: https://jekyllrb.com/
 [26]: https://www.ruby-lang.org/en/
 [27]: http://bundler.io/
-