diff --git a/docs/css/_home.scss b/docs/css/_home.scss
index e39516f6..aa3d8010 100644
--- a/docs/css/_home.scss
+++ b/docs/css/_home.scss
@@ -156,27 +156,41 @@ html, body {
       text-decoration: none;
     }
   }
+  .img-container {
+    height: 55px;
+  }
+
   .showcase {
     margin-top: 40px;
     text-align: center;
+
     .logo {
-      display: inline-block;;
-      height: 60px;
+      display: inline-block;
       margin-bottom: 20px;
+      max-width: 90px;
+      max-height: 40px;
     }
     .example {
       width: 100%;
     }
   }
+
   .screen-wrapper {
     position: relative;
-    height: 201px;
     overflow: hidden;
+
+    figure {
+      height: 0;
+      padding-bottom: 60%;
+      background-repeat: no-repeat;
+    }
+
     .freezeframe-container {
 	    border-radius: 3px;
-      max-height: 100%;
+
     }
     .screen-mask {
+      width: 100%;
       position: absolute;
       top: 0;
       pointer-events: none;
diff --git a/docs/img/showcase/example-mailjet.gif b/docs/img/showcase/example-mailjet.gif
new file mode 100644
index 00000000..2666b718
Binary files /dev/null and b/docs/img/showcase/example-mailjet.gif differ
diff --git a/docs/img/showcase/example-stripe.gif b/docs/img/showcase/example-stripe.gif
new file mode 100644
index 00000000..a94e863a
Binary files /dev/null and b/docs/img/showcase/example-stripe.gif differ
diff --git a/docs/img/showcase/logo-mailjet.png b/docs/img/showcase/logo-mailjet.png
new file mode 100644
index 00000000..b0f559e4
Binary files /dev/null and b/docs/img/showcase/logo-mailjet.png differ
diff --git a/docs/img/showcase/logo-stripe.png b/docs/img/showcase/logo-stripe.png
new file mode 100644
index 00000000..86e555ce
Binary files /dev/null and b/docs/img/showcase/logo-stripe.png differ
diff --git a/docs/index.haml b/docs/index.haml
index 4343965e..636b22c5 100644
--- a/docs/index.haml
+++ b/docs/index.haml
@@ -31,9 +31,19 @@ layout: default
       %h2.page-section-title DocSearch is live
       %p We’ve integrated DocSearch into several open source projects. Take a look.
     .row
+      .col-sm-4.showcase
+        %a{:href => "https://stripe.com/docs", :target => "_blank"}
+          .img-container
+            %img.img-responsive.logo{:src => "./img/showcase/logo-stripe.png", :alt => "stripe", :height => "10px"}
+          .screen-wrapper
+            %img.img-responsive.example.freezeframe{:src => "./img/showcase/example-stripe.gif", :alt => "stripe docsearch demo"}
+            %img.img-responsive.screen-mask{:src => "./img/mask.png", :alt => "mask"}
+          .spacer10
+          Stripe
       .col-sm-4.showcase
         %a{:href => "https://facebook.github.io/react/", :target => "_blank"}
-          %img.img-responsive.logo{:src => "./img/showcase/logo-react.png", :alt => "reactjs"}
+          .img-container
+            %img.img-responsive.logo{:src => "./img/showcase/logo-react.png", :alt => "reactjs"}
           .screen-wrapper
             %img.img-responsive.example.freezeframe{:src => "./img/showcase/example-react.gif", :alt => "react docsearch demo"}
             %img.img-responsive.screen-mask{:src => "./img/mask.png", :alt => "mask"}
@@ -41,7 +51,8 @@ layout: default
           React
       .col-sm-4.showcase
         %a{:href => "http://facebook.github.io/react-native/docs/getting-started.html", :target => "_blank"}
-          %img.img-responsive.logo{:src => "./img/showcase/logo-react.png", :alt => "react native"}
+          .img-container
+            %img.img-responsive.logo{:src => "./img/showcase/logo-react.png", :alt => "react native"}
           .screen-wrapper
             %img.img-responsive.example.freezeframe{:src => "./img/showcase/example-reactnative.gif", :alt => "react native docsearch demo"}
             %img.img-responsive.screen-mask{:src => "./img/mask.png", :alt => "mask"}
@@ -49,7 +60,8 @@ layout: default
           React Native
       .col-sm-4.showcase
         %a{:href => "http://eslint.org/", :target => "_blank"}
-          %img.img-responsive.logo{:src => "./img/showcase/logo-eslint.png", :alt => "eslint"}
+          .img-container
+            %img.img-responsive.logo{:src => "./img/showcase/logo-eslint.png", :alt => "eslint"}
           .screen-wrapper
             %img.img-responsive.example.freezeframe{:src => "./img/showcase/example-eslint.gif", :alt => "eslint docsearch demo"}
             %img.img-responsive.screen-mask{:src => "./img/mask.png", :alt => "mask"}
@@ -57,7 +69,8 @@ layout: default
           ESLint
       .col-sm-4.showcase
         %a{:href => "http://docs.scala-lang.org/", :target => "_blank"}
-          %img.img-responsive.logo{:src => "./img/showcase/logo-scala.png", :alt => "scala"}
+          .img-container
+            %img.img-responsive.logo{:src => "./img/showcase/logo-scala.png", :alt => "scala"}
           .screen-wrapper
             %img.img-responsive.example.freezeframe{:src => "./img/showcase/example-scala.gif", :alt => "scala docsearch demo"}
             %img.img-responsive.screen-mask{:src => "./img/mask.png", :alt => "mask"}
@@ -65,7 +78,8 @@ layout: default
           Scala
       .col-sm-4.showcase
         %a{:href => "https://babeljs.algolia.com/", :target => "_blank"}
-          %img.img-responsive.logo{:src => "./img/showcase/logo-babel.png", :alt => "babel"}
+          .img-container
+            %img.img-responsive.logo{:src => "./img/showcase/logo-babel.png", :alt => "babel"}
           .screen-wrapper
             %img.img-responsive.example.freezeframe{:src => "./img/showcase/example-babel.gif", :alt => "babel docsearch demo"}
             %img.img-responsive.screen-mask{:src => "./img/mask.png", :alt => "mask"}
@@ -73,7 +87,8 @@ layout: default
           Babel.js
       .col-sm-4.showcase
         %a{:href => "http://vuejs.org/guide/", :target => "_blank"}
-          %img.img-responsive.logo{:src => "./img/showcase/logo-vuejs.png", :alt => "vuejs"}
+          .img-container
+            %img.img-responsive.logo{:src => "./img/showcase/logo-vuejs.png", :alt => "vuejs"}
           .screen-wrapper
             %img.img-responsive.example.freezeframe{:src => "./img/showcase/example-vuejs.gif", :alt => "vuejs docsearch demo"}
             %img.img-responsive.screen-mask{:src => "./img/mask.png", :alt => "mask"}
@@ -81,7 +96,8 @@ layout: default
           Vue.js
       .col-sm-4.showcase
         %a{:href => "https://docs.influxdata.com/", :target => "_blank"}
-          %img.img-responsive.logo{:src => "./img/showcase/logo-influxdata.png", :alt => "influxdata"}
+          .img-container
+            %img.img-responsive.logo{:src => "./img/showcase/logo-influxdata.png", :alt => "influxdata"}
           .screen-wrapper
             %img.img-responsive.example.freezeframe{:src => "./img/showcase/example-influxdata.gif", :alt => "influxdata docsearch demo"}
             %img.img-responsive.screen-mask{:src => "./img/mask.png", :alt => "mask"}
@@ -89,7 +105,8 @@ layout: default
           Influxdata
       .col-sm-4.showcase
         %a{:href => "http://help.apiary.io/", :target => "_blank"}
-          %img.img-responsive.logo{:src => "./img/showcase/logo-apiary.png", :alt => "apiary"}
+          .img-container
+            %img.img-responsive.logo{:src => "./img/showcase/logo-apiary.png", :alt => "apiary"}
           .screen-wrapper
             %img.img-responsive.example.freezeframe{:src => "./img/showcase/example-apiary.gif", :alt => "apiary docsearch demo"}
             %img.img-responsive.screen-mask{:src => "./img/mask.png", :alt => "mask"}
@@ -97,7 +114,8 @@ layout: default
           Apiary
       .col-sm-4.showcase
         %a{:href => "http://marionettejs.com/", :target => "_blank"}
-          %img.img-responsive.logo{:src => "./img/showcase/logo-marionettejs.png", :alt => "marionnette"}
+          .img-container
+            %img.img-responsive.logo{:src => "./img/showcase/logo-marionettejs.png", :alt => "marionnette"}
           .screen-wrapper
             %img.img-responsive.example.freezeframe{:src => "./img/showcase/example-marionettejs.gif", :alt => "marionette docsearch demo"}
             %img.img-responsive.screen-mask{:src => "./img/mask.png", :alt => "mask"}
@@ -105,7 +123,8 @@ layout: default
           Marionette.js
       .col-sm-4.showcase
         %a{:href => "https://echo.labstack.com", :target => "_blank"}
-          %img.img-responsive.logo{:src => "./img/showcase/logo-echo.png", :alt => "echo"}
+          .img-container
+            %img.img-responsive.logo{:src => "./img/showcase/logo-echo.png", :alt => "echo"}
           .screen-wrapper
             %img.img-responsive.example.freezeframe{:src => "./img/showcase/example-echo.gif", :alt => "echo docsearch demo"}
             %img.img-responsive.screen-mask{:src => "./img/mask.png", :alt => "mask"}
@@ -113,7 +132,8 @@ layout: default
           Echo
       .col-sm-4.showcase
         %a{:href => "https://serge.io/", :target => "_blank"}
-          %img.img-responsive.logo{:src => "./img/showcase/logo-serge.svg", :alt => "serge"}
+          .img-container
+            %img.img-responsive.logo{:src => "./img/showcase/logo-serge.svg", :alt => "serge"}
           .screen-wrapper
             %img.img-responsive.example.freezeframe{:src => "./img/showcase/example-serge.gif", :alt => "serge docsearch demo"}
             %img.img-responsive.screen-mask{:src => "./img/mask.png", :alt => "mask"}
@@ -121,15 +141,26 @@ layout: default
           Serge
       .col-sm-4.showcase
         %a{:href => "https://batch.com/", :target => "_blank"}
-          %img.img-responsive.logo{:src => "./img/showcase/logo-batch.svg", :alt => "batch"}
+          .img-container
+            %img.img-responsive.logo{:src => "./img/showcase/logo-batch.svg", :alt => "batch"}
           .screen-wrapper
             %img.img-responsive.example.freezeframe{:src => "./img/showcase/example-batch.gif", :alt => "batch docsearch demo"}
             %img.img-responsive.screen-mask{:src => "./img/mask.png", :alt => "mask"}
           .spacer10
           Batch
       .col-sm-4.showcase
-        %a{:href => "https://api-platform.com/", :target => "_blank"}
-          %img.img-responsive.logo{:src => "./img/showcase/logo-apiplatform.svg", :alt => "API Platform"}
+        %a{:href => "https://dev.mailjet.com/guides/", :target => "_blank"}
+          .img-container
+            %img.img-responsive.logo{:src => "./img/showcase/logo-mailjet.png", :alt => "mailjet"}
+          .screen-wrapper
+            %img.img-responsive.example.freezeframe{:src => "./img/showcase/example-mailjet.gif", :alt => "mailjet docsearch demo"}
+            %img.img-responsive.screen-mask{:src => "./img/mask.png", :alt => "mask"}
+          .spacer10
+          Batch
+      .col-sm-4.showcase
+        %a{:href => "https://dev.mailjet.com/guides/", :target => "_blank"}
+          .img-container
+            %img.img-responsive.logo{:src => "./img/showcase/logo-apiplatform.svg", :alt => "API Platform"}
           .screen-wrapper
             %img.img-responsive.example.freezeframe{:src => "./img/showcase/example-apiplatform.gif", :alt => "API Platform docsearch demo"}
             %img.img-responsive.screen-mask{:src => "./img/mask.png", :alt => "mask"}