diff --git a/public/hero.jpg b/public/hero.jpg
new file mode 100644
index 0000000..5dd5a8f
Binary files /dev/null and b/public/hero.jpg differ
diff --git a/templates/themes/default/sidebar-album.hbs b/templates/themes/cards/sidebar-album.hbs
similarity index 100%
rename from templates/themes/default/sidebar-album.hbs
rename to templates/themes/cards/sidebar-album.hbs
diff --git a/templates/themes/default/theme.hbs b/templates/themes/cards/theme.hbs
similarity index 96%
rename from templates/themes/default/theme.hbs
rename to templates/themes/cards/theme.hbs
index b0495b5..230a3ed 100644
--- a/templates/themes/default/theme.hbs
+++ b/templates/themes/cards/theme.hbs
@@ -17,12 +17,12 @@
     <!--
       Sidebar with album hierarchy
     -->
-    <input id="hamburger" class="hamburger-checkbox" type="checkbox" />
+    <!-- <input id="hamburger" class="hamburger-checkbox" type="checkbox" />
     <nav id="sidebar">
       <ul>
         {{> sidebar-album gallery.home }}
       </ul>
-    </nav>
+    </nav> -->
 
     <!--
       Main gallery panel
diff --git a/templates/themes/default/theme.less b/templates/themes/cards/theme.less
similarity index 100%
rename from templates/themes/default/theme.less
rename to templates/themes/cards/theme.less
diff --git a/templates/themes/classic/theme.hbs b/templates/themes/classic/theme.hbs
deleted file mode 100644
index e69de29..0000000
diff --git a/templates/themes/classic/theme.less b/templates/themes/classic/theme.less
deleted file mode 100644
index e69de29..0000000
diff --git a/templates/themes/mosaic/sidebar-album.hbs b/templates/themes/mosaic/sidebar-album.hbs
new file mode 100644
index 0000000..0618e10
--- /dev/null
+++ b/templates/themes/mosaic/sidebar-album.hbs
@@ -0,0 +1,17 @@
+<li>
+  <!-- This album -->
+  <a href="{{filename}}.html">
+    {{#if albums.length}}
+      <i class="fa fa-folder-o"></i>
+    {{else}}
+      <i class="fa fa-photo"></i>
+    {{/if}}
+    {{title}}<span class="count">{{stats.total}}</span>
+  </a>
+  <!-- And nested album -->
+  <ul>
+    {{#each albums}}
+      {{> sidebar-album}}
+    {{/each}}
+  </ul>
+</li>
diff --git a/templates/themes/mosaic/theme.hbs b/templates/themes/mosaic/theme.hbs
new file mode 100644
index 0000000..81fbc3f
--- /dev/null
+++ b/templates/themes/mosaic/theme.hbs
@@ -0,0 +1,105 @@
+<div id="wrapper">
+
+  <!--
+    Sidebar with album hierarchy
+  -->
+  <!-- <input id="hamburger" class="hamburger-checkbox" type="checkbox" />
+  <nav id="sidebar">
+    <ul>
+      {{> sidebar-album gallery.home }}
+    </ul>
+  </nav> -->
+
+  <div id="container">
+
+    <!--
+      Gallery title
+    -->
+    <header style="color: #17baef;">
+      <h1>
+        <label for="hamburger" class="hamburger-label noselect" role="button">
+          <i class="fa fa-navicon"></i>
+        </label>
+        {{gallery.title}}
+      </h1>
+    </header>
+
+    <!--
+      Breadcrumbs of parent albums
+    -->
+
+    <nav class="breadcrumbs">
+      <div class="mask"></div>
+      {{#each breadcrumbs~}}
+        <a class="breadcrumb-item" href="{{filename}}.html">{{title}}</a>&nbsp;/&nbsp;
+      {{~/each~}}
+      <a class="breadcrumb-item" href="{{album.filename}}.html">{{album.title}}</a>
+    </nav>
+
+    <!--
+      Main gallery panel
+    -->
+    <section id="content">
+
+      <!--
+        Nested albums, if any
+      -->
+      <ul id="albums">
+        {{#each album.albums~}}
+        <li>
+          <a href="{{filename}}.html">
+            <h3>{{title}}</h3>
+            <div class="meta">
+              <time>{{{date stats.fromDate}}} - {{{date stats.toDate}}}</time>,
+              <span class="summary">{{summary}}</span>
+            </div>
+            <!-- <div class="mosaic" style="opacity: 0.8">
+              <img src="{{filename}}.png" />
+            </div> -->
+            <ul class="grid clearfix">
+              {{~#slice previews count=8~}}
+                <li><img src="{{this.urls.thumb}}" /></li>
+              {{~/slice}}
+            </ul>
+          </a>
+        </li>
+        {{~/each}}
+      </ul>
+
+      <!--
+        All photos and videos
+      -->
+      <ul id="media">
+        {{#each album.files}}
+          {{#if isVideo}}
+            <li data-html="#media{{id}}"
+                data-poster="{{urls.poster}}"
+                data-download-url="{{{download this}}}">
+              <a href="{{{download this}}}">
+                <img src="{{urls.thumb}}"
+                     width="{{../gallery.thumbsSize}}"
+                     height="{{../gallery.thumbSize}}"
+                     alt="{{filename}}" />
+              </a>
+              <img class="video-overlay" src="public/play.png" />
+            </li>
+          {{else}}
+            <li data-src="{{urls.large}}"
+                data-sub-html="{{caption}}"
+                data-download-url="{{{download this}}}">
+              <a href="{{{download this}}}">
+                <img src="{{urls.thumb}}"
+                     width="{{../gallery.thumbSize}}"
+                     height="{{../gallery.thumbSize}}"
+                     alt="{{filename}}" />
+             </a>
+            </li>
+          {{/if}}
+        {{/each}}
+      </ul>
+
+    </section>
+
+  </div>
+
+</div>
diff --git a/templates/themes/mosaic/theme.less b/templates/themes/mosaic/theme.less
new file mode 100644
index 0000000..f8654c1
--- /dev/null
+++ b/templates/themes/mosaic/theme.less
@@ -0,0 +1,314 @@
+
+// -----------------------------------
+// Variables for user customisation
+// -----------------------------------
+
+@body-background: #f6f6f6;
+@header-background: #444;
+@header-foreground: #fff;
+@nav-background: #fafafa;
+@nav-highlight: #fff;
+@album-background: #fafafa;
+@text-color: #444;
+@text-light: #999;
+@borders: #ddd;
+@mobile-trigger: 900px;
+
+// -----------------------------------
+// Page structure
+// -----------------------------------
+
+* {
+  box-sizing: border-box;
+  -moz-box-sizing: border-box;
+}
+
+html {
+  height: 100%;
+}
+
+html, body {
+  padding: 0;
+  margin: 0;
+}
+
+#wrapper {
+  display: flex;
+  min-height: 100vh;
+  flex-direction: column;
+}
+
+#container {
+  // display: flex;
+  // flex: 1;
+}
+
+#sidebar {
+  overflow: hidden;
+  order: -1;
+}
+
+#content {
+  flex: 1;
+}
+
+// -----------------------------------
+// Slide-out navigation
+// -----------------------------------
+
+.hamburger-checkbox {
+  position: absolute;
+  opacity: 0;
+}
+
+.hamburger-label {
+  display: none;
+}
+
+#sidebar {
+  flex: 0 0 15em;
+}
+
+@media only screen and (max-width: @mobile-trigger) {
+
+  .hamburger-label {
+    display: inline-block;
+  }
+
+  #sidebar {
+    flex: 0 0 0;
+    transition: all .2s;
+    white-space: nowrap;
+  }
+
+  #sidebar .count {
+    opacity: 0;
+  }
+
+  .hamburger-checkbox:checked ~ #sidebar {
+    flex: 0 0 100%;
+    font-size: 1.1em;
+  }
+
+  .hamburger-checkbox:checked ~ #content {
+    flex: 0 0 0;
+  }
+
+  .hamburger-checkbox:checked ~ #sidebar .count {
+    opacity: 100;
+  }
+
+}
+
+// -----------------------------------
+// Generic styles
+// -----------------------------------
+
+body {
+  background: #fff;
+  color: #444;
+  font-family: 'Open Sans', sans-serif;
+  font-size: 16px;
+  font-weight: lighter;
+  -webkit-font-smoothing: antialiased;
+}
+
+a {
+  text-decoration: none;
+}
+
+.clearfix:after {
+  content: " ";
+  display: block;
+  clear: both;
+}
+
+.noselect {
+  cursor: default;
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+// -----------------------------------
+// Header
+// -----------------------------------
+
+header {
+  background: #fff;
+  font-size: 1.4em;
+  font-family: 'Montserrat', sans-serif;
+  padding: 0;
+  color: #17baef;
+}
+
+header .hamburger-label {
+  // color: #fff;
+  margin-right: 0.4em;
+}
+
+h1 {
+  margin: 1em;
+  color: #17baef;
+  display: inline-block;
+}
+
+// -----------------------------------
+// Sidebar navigation
+// -----------------------------------
+
+#sidebar {
+  background: @nav-background;
+  border-right: 1px solid @borders;
+}
+
+#sidebar ul:not(:first-child) {
+  margin-left: 1.5em;
+}
+
+#sidebar i.fa {
+  margin-right: 0.3em;
+}
+
+#sidebar a {
+  border-bottom: 1px solid @borders;
+  color: @text-color;
+  display: block;
+  padding: 0.8em 1em;
+  position: relative;
+}
+
+#sidebar .count {
+  background-color: #fcfcfc;
+  border: 1px solid @borders;
+  border-radius: 0.4em;
+  color: @text-light;
+  font-size: 0.7em;
+  padding: 0.4em 0.6em 0.3em 0.5em;
+  position: absolute;
+  right: 1em;
+  margin-top: -2px;
+}
+
+// -----------------------------------
+// Breadcrumbs navigation
+// -----------------------------------
+
+nav.breadcrumbs {
+  margin: 0;
+  padding: 1.5em;
+  font-weight: bold;
+  height: 4em;
+  background: url('hero.jpg') center center repeat;
+  background-size: contain;
+  color: #fff;
+  position: relative;
+}
+
+nav.breadcrumbs .mask {
+  background-color: #17baef;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  opacity: 0.9;
+  z-index: 1;
+}
+
+nav.breadcrumbs a, nav span {
+  position: relative;
+  z-index: 2;
+  display: inline;
+}
+
+nav.breadcrumbs a {
+  color: #fff;
+  text-decoration: none;
+}
+
+// -----------------------------------
+// Nested albums
+// -----------------------------------
+
+#albums, #media {
+  margin: 1em;
+  overflow: hidden;
+}
+
+#albums a {
+  display: inline-block;
+  padding: 0.7em;
+}
+
+#albums h3 {
+  color: #444;
+  margin-top: 1em;
+  font-size: 1em;
+}
+
+#albums .meta {
+  color: #999;
+  font-size: 0.9em;
+  font-style: italic;
+  line-height: 1.2em;
+  margin: 0.5em 0;
+  width: 100%;
+}
+
+#albums > li {
+  display: inline-block;
+  margin-right: 1em;
+  margin-bottom: 0em;
+}
+
+#albums .grid {
+  opacity: 0.8;
+  width: 400px;
+  height: 50px;
+  overflow: hidden;
+}
+
+#albums .grid li {
+  float: left;
+  padding: 0;
+  padding-right: 0px;
+  padding-bottom: 0px;
+}
+
+#albums .grid img {
+  display: block;
+  width: 50px;
+}
+
+// -----------------------------------
+// Navigation hovers
+// -----------------------------------
+
+#sidebar a:hover {
+  background-color: @nav-highlight;
+}
+
+// -----------------------------------
+// Photo and video thumbnails
+// -----------------------------------
+
+#media li {
+  float: left;
+  margin-right: 0.4em;
+  margin-bottom: 0.2em;
+  position: relative;
+}
+
+#media li .video-overlay {
+  left: 50%;
+  height: 48px;
+  margin-left: -24px;
+  margin-top: -24px;
+  position: absolute;
+  top: 50%;
+  width: 48px;
+}