diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js
index c5033d8f4..13e390bc9 100644
--- a/docs/.vuepress/config.js
+++ b/docs/.vuepress/config.js
@@ -8,7 +8,10 @@ module.exports = {
     ['link', { rel: 'icon', href: '/favicon.png' }],
     ['script', { src: 'https://cdn.jsdelivr.net/npm/uevent@2/browser.js', defer: 'defer' }],
     ['script', { src: 'https://cdn.jsdelivr.net/npm/three/build/three.min.js', defer: 'defer' }],
-    ['script', { src: 'https://cdn.jsdelivr.net/npm/photo-sphere-viewer@4/dist/photo-sphere-viewer.js', defer: 'defer' }],
+    ['script', {
+      src  : 'https://cdn.jsdelivr.net/npm/photo-sphere-viewer@4/dist/photo-sphere-viewer.js',
+      defer: 'defer'
+    }],
     ['link', {
       rel : 'stylesheet',
       href: 'https://cdn.jsdelivr.net/npm/photo-sphere-viewer@4/dist/photo-sphere-viewer.css'
@@ -104,17 +107,6 @@ module.exports = {
           ],
         },
       ],
-      '/demos/'  : [
-        {
-          title       : 'Demos',
-          sidebarDepth: 3,
-          collapsable : false,
-          children    : [
-            '',
-            'intro',
-          ],
-        },
-      ],
     },
   },
   plugins    : [
@@ -122,5 +114,6 @@ module.exports = {
       'ga': 'UA-28192323-3',
     }],
     ['@vuepress/back-to-top'],
+    require('./plugins/gallery'),
   ],
 };
diff --git a/docs/.vuepress/plugins/gallery/Gallery.vue b/docs/.vuepress/plugins/gallery/Gallery.vue
new file mode 100644
index 000000000..3c951b1de
--- /dev/null
+++ b/docs/.vuepress/plugins/gallery/Gallery.vue
@@ -0,0 +1,17 @@
+<template>
+  <div class="demo-gallery"><slot></slot></div>
+</template>
+
+<script>
+  export default {
+
+  };
+</script>
+
+<style lang="stylus">
+  .demo-gallery
+    display flex
+    flex-wrap wrap
+    margin-top 10px
+    margin-right -10px
+</style>
diff --git a/docs/.vuepress/plugins/gallery/GalleryItem.vue b/docs/.vuepress/plugins/gallery/GalleryItem.vue
new file mode 100644
index 000000000..dce64e285
--- /dev/null
+++ b/docs/.vuepress/plugins/gallery/GalleryItem.vue
@@ -0,0 +1,36 @@
+<template>
+  <a class="demo-gallery-item" :href="link">
+    <img v-if="image" :src="image">
+    <video v-if="video" :src="video" autoplay loop mute></video>
+    <div class="demo-gallery-item-content">
+      <slot></slot>
+    </div>
+  </a>
+</template>
+
+<script>
+  export default {
+    props: ['image', 'video', 'link'],
+  };
+</script>
+
+<style lang="stylus">
+  .demo-gallery-item
+    width 280px
+    margin-right 10px
+    margin-bottom 10px
+    box-shadow 0 0 10px rgba(0, 0, 0, 0.5)
+    transition box-shadow .2s ease-in-out !important
+    color inherit !important
+
+    &:hover
+      box-shadow 0 0 20px rgba(0, 0, 0, 0.8)
+      text-decoration none !important
+
+  .demo-gallery-item-content
+    h3, p
+      margin 1rem
+
+    .header-anchor
+      display none
+</style>
diff --git a/docs/.vuepress/plugins/gallery/enhanceApp.js b/docs/.vuepress/plugins/gallery/enhanceApp.js
new file mode 100644
index 000000000..31064fbe3
--- /dev/null
+++ b/docs/.vuepress/plugins/gallery/enhanceApp.js
@@ -0,0 +1,7 @@
+import Gallery from './Gallery.vue';
+import GalleryItem from './GalleryItem.vue';
+
+export default ({ Vue }) => {
+  Vue.component('Gallery', Gallery);
+  Vue.component('GalleryItem', GalleryItem);
+};
diff --git a/docs/.vuepress/plugins/gallery/index.js b/docs/.vuepress/plugins/gallery/index.js
new file mode 100644
index 000000000..d80bc768e
--- /dev/null
+++ b/docs/.vuepress/plugins/gallery/index.js
@@ -0,0 +1,34 @@
+const container = require('markdown-it-container');
+const path = require('path');
+
+module.exports = (options, ctx) => ({
+  name           : 'gallery',
+  enhanceAppFiles: path.resolve(__dirname, './enhanceApp.js'),
+  extendMarkdown : (md) => {
+    md.use(container, 'gallery', {
+      render: (tokens, idx) => {
+        const token = tokens[idx];
+        if (token.nesting === 1) {
+          return `<Gallery>\n`
+        }
+        else {
+          return `</Gallery>\n`
+        }
+      },
+    });
+
+    md.use(container, 'item', {
+      render: (tokens, idx) => {
+        const token = tokens[idx];
+        const attributes = token.info.trim().slice('item '.length);
+
+        if (token.nesting === 1) {
+          return `<GalleryItem ${attributes}>\n`
+        }
+        else {
+          return `</GalleryItem>\n`
+        }
+      },
+    });
+  }
+});
diff --git a/docs/.vuepress/public/assets/demos/base.webm b/docs/.vuepress/public/assets/demos/base.webm
new file mode 100644
index 000000000..c0f24d307
Binary files /dev/null and b/docs/.vuepress/public/assets/demos/base.webm differ
diff --git a/docs/.vuepress/public/assets/demos/custom-marker.jpg b/docs/.vuepress/public/assets/demos/custom-marker.jpg
new file mode 100644
index 000000000..5112d996e
Binary files /dev/null and b/docs/.vuepress/public/assets/demos/custom-marker.jpg differ
diff --git a/docs/.vuepress/public/assets/demos/fisheye.webm b/docs/.vuepress/public/assets/demos/fisheye.webm
new file mode 100644
index 000000000..180b1de88
Binary files /dev/null and b/docs/.vuepress/public/assets/demos/fisheye.webm differ
diff --git a/docs/demos/README.md b/docs/demos/README.md
index f1626bbfc..27ad83e96 100644
--- a/docs/demos/README.md
+++ b/docs/demos/README.md
@@ -1,9 +1,41 @@
-# User demos
+---
+sidebar: auto
+---
 
-This sections contains various examples of Photo Sphere Viewer created my users or myself when providing support.
+# Demos
 
-### Want your demo here ?
+::: tip Want your demo here ?
+Create a JSFiddle by forking [PSV Home Demo](https://jsfiddle.net/mistic100/5r684etx/) and submit a pull request to add it to the documentation.
+:::
 
-Create a JSFiddle by forking [PSV Home Demo](https://jsfiddle.net/mistic100/5r684etx/) and submit a Pull Request to add it to the documentation, if it is interesting enough it will be added.
+::: tip Plugins
+Visit each [plugin page](../plugins/) to see an example.
+:::
 
-Alternatively open an issue withe your JSFiddle link and a short description and I will add it.
+## Basic
+
+:::: gallery
+
+::: item video="/assets/demos/base.webm" link="https://jsfiddle.net/mistic100/5r684etx/show"
+### Zero config
+Simple panorama with default options.
+:::
+
+::: item video="/assets/demos/fisheye.webm" link="https://jsfiddle.net/mistic100/wsL1x5k0/show"
+### Intro animation
+Use the `Animation` helper to create a cool intro.
+:::
+
+::::
+
+
+## Markers
+
+:::: gallery
+
+::: item image="/assets/demos/custom-marker.jpg" link="https://jsfiddle.net/mistic100/Lm3wzesb/show"
+### Custom tooltip
+Advanced styling of a marker's tooltip.
+:::
+
+::::
diff --git a/docs/demos/intro.md b/docs/demos/intro.md
deleted file mode 100644
index 12d8f53a4..000000000
--- a/docs/demos/intro.md
+++ /dev/null
@@ -1,5 +0,0 @@
-# Intro animation
-
-This a simple intro animation using the `Animation` helper.
-
-<iframe style="width: 100%; height: 600px;" src="//jsfiddle.net/mistic100/wsL1x5k0/embedded/result,js/dark" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
diff --git a/docs/guide/README.md b/docs/guide/README.md
index f3d90722a..1bb911590 100644
--- a/docs/guide/README.md
+++ b/docs/guide/README.md
@@ -88,6 +88,8 @@ const viewer = new Viewer({
 </md-tab>
 </md-tabs>
 
+<iframe style="width: 100%; height: 500px;" src="//jsfiddle.net/mistic100/5r684etx/embedded/result/dark" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
+
 
 The `panorama` must be an [equirectangular projection](https://en.wikipedia.org/wiki/Equirectangular_projection) of your photo. Other modes are supported through [adapters](./adapters/).
 
diff --git a/docs/plugins/plugin-gallery.md b/docs/plugins/plugin-gallery.md
index 608fa23e2..909e970af 100644
--- a/docs/plugins/plugin-gallery.md
+++ b/docs/plugins/plugin-gallery.md
@@ -1,4 +1,4 @@
-# GalleryPlugin
+# GalleryPlugin <Badge text="NEW"/>
 
 <ApiButton page="PSV.plugins.GalleryPlugin.html"/>