diff --git a/docs/img/showcase/example-batch.gif b/docs/img/showcase/example-batch.gif
new file mode 100644
index 00000000..e7c86810
Binary files /dev/null and b/docs/img/showcase/example-batch.gif differ
diff --git a/docs/img/showcase/example-echo.gif b/docs/img/showcase/example-echo.gif
new file mode 100644
index 00000000..3c460c2a
Binary files /dev/null and b/docs/img/showcase/example-echo.gif differ
diff --git a/docs/img/showcase/example-echo.png b/docs/img/showcase/example-echo.png
deleted file mode 100644
index 66462e0e..00000000
Binary files a/docs/img/showcase/example-echo.png and /dev/null differ
diff --git a/docs/img/showcase/example-serge.gif b/docs/img/showcase/example-serge.gif
new file mode 100644
index 00000000..5ef16c5a
Binary files /dev/null and b/docs/img/showcase/example-serge.gif differ
diff --git a/docs/img/showcase/logo-batch.svg b/docs/img/showcase/logo-batch.svg
new file mode 100644
index 00000000..daaaa692
--- /dev/null
+++ b/docs/img/showcase/logo-batch.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/docs/img/showcase/logo-echo.png b/docs/img/showcase/logo-echo.png
new file mode 100644
index 00000000..1285160a
Binary files /dev/null and b/docs/img/showcase/logo-echo.png differ
diff --git a/docs/img/showcase/logo-echo.svg b/docs/img/showcase/logo-echo.svg
deleted file mode 100644
index bec45351..00000000
--- a/docs/img/showcase/logo-echo.svg
+++ /dev/null
@@ -1,45 +0,0 @@
-
-
diff --git a/docs/index.haml b/docs/index.haml
index 9f5f9a86..855c1b73 100644
--- a/docs/index.haml
+++ b/docs/index.haml
@@ -105,18 +105,28 @@ layout: default
Marionette.js
.col-sm-4.showcase
%a{:href => "https://labstack.com/echo", :target => "_blank"}
- %img.img-responsive.logo{:src => "./img/showcase/logo-echo.svg", :alt => "echo"}
+ %img.img-responsive.logo{:src => "./img/showcase/logo-echo.png", :alt => "echo"}
.screen-wrapper
- %img.img-responsive.example.freezeframe{:src => "./img/showcase/example-echo.png", :alt => "echo docsearch demo"}
+ %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"}
.spacer10
Echo
.col-sm-4.showcase
%a{:href => "https://serge.io/", :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"}
+ %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"}
.spacer10
Serge
+ .col-sm-4.showcase
+ %a{:href => "https://batch.com/", :target => "_blank"}
+ %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
.placeholder-logo
.placeholder-screen