diff --git a/docs/img/showcase/.DS_Store b/docs/img/showcase/.DS_Store
deleted file mode 100644
index a0f3cd6c..00000000
Binary files a/docs/img/showcase/.DS_Store and /dev/null differ
diff --git a/docs/img/showcase/example-serge.png b/docs/img/showcase/example-serge.png
new file mode 100644
index 00000000..1eca185d
Binary files /dev/null and b/docs/img/showcase/example-serge.png differ
diff --git a/docs/img/showcase/logo-serge.svg b/docs/img/showcase/logo-serge.svg
new file mode 100644
index 00000000..d17a4a26
--- /dev/null
+++ b/docs/img/showcase/logo-serge.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<!-- Creator: CorelDRAW X6 -->
+<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="60.16mm" height="60.16mm" version="1.1" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"
+viewBox="0 0 91575 91575"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+ <defs>
+  <style type="text/css">
+   <![CDATA[
+    .fil0 {fill:#FEFEFE}
+   ]]>
+  </style>
+ </defs>
+ <g id="Layer_x0020_1">
+  <metadata id="CorelCorpID_0Corel-Layer"/>
+  <path class="fil0" d="M2713 39211l36498 -36498c3617,-3617 9536,-3617 13153,0l25662 25662 -16240 0c-702,-2278 -1936,-4303 -3702,-6079 -3064,-3081 -7206,-4613 -12446,-4613 -4926,0 -8930,1393 -12028,4178 -3099,2785 -4648,6145 -4648,10096 0,3865 1306,6998 3899,9400 2385,2195 6021,4345 10905,6452 457,196 926,389 1405,581 4683,2246 7746,4126 9174,5623 1427,1479 2141,3464 2141,5918 0,2333 -888,4369 -2698,6127 -1811,1741 -4422,2611 -7851,2611 -3377,0 -6040,-1114 -8007,-3342 -1967,-2228 -2959,-4839 -2959,-7850l-5762 0 -21384 0 -5112 -5113c-3617,-3617 -3617,-9536 0,-13153zm81036 -5113l5113 5113c3617,3617 3617,9536 0,13153l-36498 36498c-3617,3617 -9536,3617 -13153,0l-25662 -25662 16240 0c702,2277 1936,4302 3702,6079 3064,3081 7207,4613 12446,4613 4926,0 8930,-1393 12028,-4178 3099,-2785 4648,-6145 4648,-10096 0,-3865 -1306,-6998 -3899,-9400 -2385,-2195 -6020,-4346 -10904,-6453 -458,-195 -927,-388 -1406,-580 -4683,-2246 -7746,-4126 -9174,-5623 -1427,-1480 -2141,-3464 -2141,-5918 0,-2333 888,-4369 2698,-6128 1811,-1740 4422,-2611 7851,-2611 3377,0 6040,1115 8007,3343 1967,2228 2959,4839 2959,7850l5762 0 21383 0z"/>
+ </g>
+</svg>
diff --git a/docs/index.haml b/docs/index.haml
index 17251bd6..5cf5393d 100644
--- a/docs/index.haml
+++ b/docs/index.haml
@@ -108,9 +108,15 @@ layout: default
           %img.img-responsive.logo{:src => "./img/showcase/logo-echo.svg", :alt => "echo"}
           .screen-wrapper
             %img.img-responsive.example.freezeframe{:src => "./img/showcase/example-echo.png", :alt => "echo docsearch demo"}
-            %img.img-responsive.screen-mask{:src => "./img/mask.png", :alt => "mask"}
           .spacer10
           Echo
+      .col-sm-4.showcase
+        %a{:href => "https://serge.io/docs/", :target => "_blank"}
+          %img.img-responsive.logo{:src => "./img/showcase/logo-serge.svg", :alt => "serge"}
+          .screen-wrapper
+            %img.img-responsive.example.freezeframe{:src => "./img/showcase/example-serge.png", :alt => "serge docsearch demo"}
+          .spacer10
+          Serge
       .col-sm-4.showcase
         .placeholder-logo
         .placeholder-screen