diff --git a/dev/app.js b/dev/app.js
index cc61695e..e621b6f0 100644
--- a/dev/app.js
+++ b/dev/app.js
@@ -1,7 +1,9 @@
 import docSearch from '../index.js';
 
 docSearch({
-  apiKey: '14d0acfb8112462711980dd2a5e5c43d',
-  indexName: 'stripe-dev',
+  apiKey: '52a6d7ab710fcef44537c3cff5290e55',
+  indexName: 'tim_stripe',
   inputSelector: '#search-input'
 });
+
+document.getElementById('search-input').focus();
diff --git a/src/lib/DocSearch.js b/src/lib/DocSearch.js
index 4c9a6bc8..36e3ab9f 100644
--- a/src/lib/DocSearch.js
+++ b/src/lib/DocSearch.js
@@ -98,15 +98,24 @@ class DocSearch {
     // Translate hits into smaller objects to be send to the template
     return groupedHits.map((hit) => {
       let url = hit.anchor ? `${hit.url}#${hit.anchor}` : hit.url;
-      let displayTitle = utils.compact([hit.lvl2, hit.lvl3, hit.lvl4, hit.lvl5, hit.lvl6]).join(' › ');
+      let category = this.getHighlightedValue(hit, 'lvl0');
+      let subcategory = this.getHighlightedValue(hit, 'lvl1') || category;
+      let displayTitle = utils.compact([
+        this.getHighlightedValue(hit, 'lvl2') || subcategory,
+        this.getHighlightedValue(hit, 'lvl3'),
+        this.getHighlightedValue(hit, 'lvl4'),
+        this.getHighlightedValue(hit, 'lvl5'),
+        this.getHighlightedValue(hit, 'lvl6')
+      ]).join(' › ');
+      let text = this.getSnippettedValue(hit, 'content');
 
       return {
         isCategoryHeader: hit.isCategoryHeader,
         isSubcategoryHeader: hit.isSubcategoryHeader,
-        category: this.getHighlightedValue(hit, 'lvl0'),
-        subcategory: this.getHighlightedValue(hit, 'lvl1'),
+        category: category,
+        subcategory: subcategory,
         title: displayTitle,
-        text: hit.content,
+        text: text,
         url: url
       };
     });
@@ -117,6 +126,20 @@ class DocSearch {
     return highlight ? highlight.value : object[key];
   }
 
+  getSnippettedValue(object, key) {
+    if (!object._snippetResult || !object._snippetResult[key].value) {
+      return object[key];
+    }
+    let snippet = object._snippetResult[key].value;
+    if (snippet[0] !== snippet[0].toUpperCase()) {
+      snippet = `…${snippet}`;
+    }
+    if (['.', '!', '?'].indexOf(snippet[snippet.length - 1]) === -1) {
+      snippet = `${snippet}…`;
+    }
+    return snippet;
+  }
+
   getSuggestionTemplate() {
     const template = Hogan.compile(templates.suggestion);
     return (suggestion) => {
diff --git a/src/lib/templates.js b/src/lib/templates.js
index 3a232d67..138432ca 100644
--- a/src/lib/templates.js
+++ b/src/lib/templates.js
@@ -5,9 +5,9 @@ let templates = {
   <div class="${prefix} {{#isCategoryHeader}}${prefix}__main{{/isCategoryHeader}} {{#isSubcategoryHeader}}${prefix}__secondary{{/isSubcategoryHeader}}">
     <div class="${prefix}--category-header">{{{category}}}</div>
     <div class="${prefix}--wrapper">
-      <div class="${prefix}--subcategory">{{{subcategory}}}</div>
+      <div class="${prefix}--subcategory-column">{{{subcategory}}}</div>
       <div class="${prefix}--content">
-        <div class="${prefix}--subcategory">{{{subcategory}}}</div>
+        <div class="${prefix}--subcategory-inline">{{{subcategory}}}</div>
         <div class="${prefix}--title">{{{title}}}</div>
         <div class="${prefix}--text">{{{text}}}</div>
       </div>
diff --git a/src/styles/_variables.scss b/src/styles/_variables.scss
new file mode 100644
index 00000000..298f4493
--- /dev/null
+++ b/src/styles/_variables.scss
@@ -0,0 +1,3 @@
+$color1: #4B54DE;
+$color2: #4D47D5;
+$color3: #3A33D1;
diff --git a/src/styles/main.scss b/src/styles/main.scss
index dfbc7d08..0ad2538f 100644
--- a/src/styles/main.scss
+++ b/src/styles/main.scss
@@ -1,95 +1,126 @@
-// /* Main autocomplete wrapper */
-// .eslint-nav .algolia-autocomplete {
-//   width: 100%;
-// }
-// .eslint-nav .aa-dropdown-menu {
-//   background-color: #FFF;
-//   border: 1px solid #333;
-//   border-radius: 4px;
-//   font-size: 16px;
-//   margin: 6px 0 0;
-//   padding: 4px;
-//   text-align: left;
-//   left: -20px !important;
-//   right: -20px !important;
-// }
+@import "variables";
+$color-border: #3A33D1;
+$color-category-header: #4B54DE;
+$color-highlight-header: #4D47D5;
+$color-highlight: #3A33D1;
+$color-selected-text: #272296;
+$color-selected-background: #EBEBFB;
+$breakpoint-small: 568px;
+
+
+// Need to add to the readme something along the lines of:
+//
+// The dropdown adapts to screen size. It more or less follows the breakpoints
+// of Bootstrap (need to list them). The code is written mobile-first. The
+// larger the screen size, the more rules we add to overwrite the previous one,
+// moving from one to two column.
+//
+// It is expected that the page layout also follow those breakpoints. The
+// breakpoints are defined as variables in the SCSS, so one can update them.
+
+// Main autocomplete wrapper
+.aa-dropdown-menu {
+  background-color: #FFF;
+  border: 1px solid #333;
+  border-radius: 4px;
+  font-size: 16px;
+  margin: 6px 0 0;
+  padding: 4px;
+  text-align: left;
+  left: -20px !important; // Hardcoded
+  right: -320px !important; // Hardcoded
+}
+
+// Each suggestion
+.ads-suggestion {
+  color: #333;
+  cursor: pointer;
+  overflow: hidden;
+  border-bottom: 1px solid $color-border;
+}
+
+// Main category headers
+.ads-suggestion--category-header {
+  display: none;
+  background-color: $color-category-header;
+  color: white;
+  font-weight: 600;
+  padding: 5px 10px;
+  text-align: left;
+  // Only show it when flaggued as "__main"
+  .ads-suggestion__main & {
+    display: block;
+  }
+}
+
+// Highlight
+.ads-suggestion--highlight {
+  padding: 0;
+  color: $color-highlight;
+  background: none;
+  font-weight: 600;
+  // Highlight the background in header
+  .ads-suggestion--category-header & {
+    color: inherit;
+    background-color: $color-highlight-header;
+  }
+}
+
+// Selected suggestion
+.aa-cursor .ads-suggestion--content {
+  color: $color-selected-text;
+}
+.aa-cursor .ads-suggestion {
+  background: $color-selected-background;
+}
+
+// The secondary column is hidden on small screens
+.ads-suggestion--subcategory-column {
+  display: none;
+}
+// The text snippet is hidden on small screens
+.ads-suggestion--text {
+  display: none;
+}
+
+.ads-suggestion--content {
+  padding: 3px 5px;
+}
+
+.ads-suggestion--subcategory-inline {
+  display: inline-block;
+  font-weight: bold;
+  &:after {
+    content: " › ";
+  }
+}
+.ads-suggestion--title {
+  display: inline;
+}
+
+// BREAKPOINT 1:
+// Screen is big enough to display the text snippets
+@media (min-width: $breakpoint-small) {
+  .ads-suggestion--text {
+    display: block;
+    font-size: .9em;
+    padding: 2px 0;
+  }
+}
+
+
+
 // 
-// /* Category headers */
-// .eslint-nav .suggestion-category {
-//   background-color: #4B54DE;
-//   color: white;
-//   font-weight: 600;
-//   padding: 5px 10px;
-//   text-align: left;
-// }
-// .eslint-nav .suggestion-category mark {
-//   background-color: #4D47D5;
-//   color: white;
-//   padding: 0;
-// }
-// 
-// /* Suggestion */
-// .eslint-nav .suggestion {
-//   color: #333;
-//   cursor: pointer;
-//   overflow: hidden;
-//   border-bottom: 1px solid #3A33D1;
-// }
-// .eslint-nav .aa-suggestion:last-child .suggestion {
-//   border-bottom-color: transparent;
-// }
-// .eslint-nav .suggestion mark {
-//   padding: 0;
-//   color: #3A33D1;
-//   background: none;
-//   font-weight: 600;
-// }
-// .eslint-nav .suggestion-subcategory-secondary {
-//   display: inline-block;
-//   font-weight: bold;
-// }
-// .eslint-nav .suggestion-subcategory-secondary:after {
-//   content: " › ";
-// }
-// .eslint-nav .suggestion-title {
-//   display: inline;
-// }
-// .eslint-nav .suggestion-content {
-//   padding: 3px 5px;
-// }
-// /* Hidden elements for this viewport */
-// .eslint-nav .suggestion-subcategory-main,
-// .eslint-nav .suggestion-text {
-//   display: none;
-// }
-// 
-// /* Selected suggestion */
-// .eslint-nav .aa-cursor .suggestion-content,
-// .eslint-nav .aa-cursor .suggestion-content code,
-// .eslint-nav .aa-cursor .suggestion-content mark {
-//   color: #272296;
-// }
-// .eslint-nav .aa-cursor .suggestion {
-//   background: #EBEBFB;
-// }
-// 
-// /* Screen big enough to display the text snippets */
-// @media (min-width: 568px) {
-//   .eslint-nav .suggestion-text {
-//     display: block;
-//     font-size: .9em;
-//   }
-// }
 // 
 // /* Screen big enough to display results in two columns */
 // @media (min-width: 768px) {
 //    /* Use table display for the two columns */
-//   .eslint-nav .suggestion {
+//   .suggestion {
 //     display: table;
 //     width: 100%;
 //     border-bottom: 1px solid #9D99E8;
 //   }
-//   .eslint-nav .suggestion-subcategory-main {
+//   .suggestion-subcategory-main {
 //     border-right: 1px solid #9D99E8;
 //     background: #F2F2FF;
 //     color: #4E4726;
@@ -103,17 +134,17 @@
 //     vertical-align: top;
 //     width: 135px;
 //   }
-//   .eslint-nav .suggestion-content {
+//   .suggestion-content {
 //     display: table-cell;
 //     padding: 5px 10px;
 //   }
-//   .eslint-nav .suggestion-subcategory-secondary {
+//   .suggestion-subcategory-secondary {
 //     display: none;
 //   }
-//   .eslint-nav .suggestion-title {
+//   .suggestion-title {
 //     font-weight: 600;
 //   }
-//   .eslint-nav .suggestion-text {
+//   .suggestion-text {
 //     display: block;
 //     font-weight: normal;
 //     padding: 2px;
@@ -122,7 +153,7 @@
 // 
 // /* Enough room to display the autocomplete in the header directly */
 // @media (min-width: 996px) {
-//   .eslint-nav .aa-dropdown-menu {
+//   .aa-dropdown-menu {
 //     left: -30px !important;
 //     right: -270px !important;
 //   }