diff --git a/frontend/index.html b/frontend/index.html
index 7459f57..ee2d7f9 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -8,5 +8,4 @@
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&family=Roboto:wght@400;700&display=swap" rel="stylesheet">
 <script type="module" src="/src/main.ts"></script>
-
-<div id="app"></div>
+<body id="app">
diff --git a/frontend/src/assets/main.css b/frontend/src/assets/main.css
index 9a764f1..11d6650 100644
--- a/frontend/src/assets/main.css
+++ b/frontend/src/assets/main.css
@@ -89,9 +89,10 @@
     --header-background: none;
     --header-color: black;
   }
-  nav,
+  .headermain,
   .menu,
-  .rename-button {
+  .rename-button,
+  .suggest-gallery {
     display: none !important;
   }
   .breadcrumb > a {
@@ -107,9 +108,12 @@
   }
   .breadcrumb svg {
     fill: black !important;
+    margin: 0 .5rem 0 1rem !important;
+  }
+  body#app {
+    height: auto !important;
   }
   main {
-    height: auto !important;
     padding-bottom: 0 !important;
   }
   thead tr {
@@ -118,6 +122,17 @@
     background: none !important;
     border-bottom: 1pt solid black !important;
   }
+  audio::-webkit-media-controls-timeline,
+  video::-webkit-media-controls-timeline {
+    display: none;
+  }
+  audio::-webkit-media-controls,
+  video::-webkit-media-controls {
+    display: none;
+  }
+  tr, figure {
+    page-break-inside: avoid;
+  }
   .selection {
     min-width: 0 !important;
     padding: 0 !important;
@@ -157,6 +172,7 @@ tbody .modified {
   font-family: 'Roboto Mono';
 }
 header {
+  flex: 0 0 auto;
   background-color: var(--header-background);
   color: var(--header-color);
   font-size: var(--header-font-size);
@@ -198,21 +214,23 @@ table {
   border: 0;
   gap: 0;
 }
-#app {
-  height: 100%;
+body#app {
+  height: 100vh;
   display: flex;
   flex-direction: column;
 }
+main {
+  flex: 1 1 auto;
+  padding-bottom: 3em; /* convenience space on the bottom */
+  overflow-y: scroll;
+  text-align: center;
+}
+
 header nav.headermain {
   /* Position so that tooltips can appear on top of other positioned elements */
   position: relative;
   z-index: 100;
 }
-main {
-  height: calc(100svh - var(--header-height));
-  padding-bottom: 3em; /* convenience space on the bottom */
-  overflow-y: scroll;
-}
 .spacer { flex-grow: 1 }
 .smallgap { flex-shrink: 1; width: 2em }
 
diff --git a/frontend/src/components/BreadCrumb.vue b/frontend/src/components/BreadCrumb.vue
index a25aad8..ad6288e 100644
--- a/frontend/src/components/BreadCrumb.vue
+++ b/frontend/src/components/BreadCrumb.vue
@@ -10,6 +10,7 @@
   >
     <a href="#/"
       :ref="el => setLinkRef(0, el)"
+      class="home"
       :class="{ current: !!isCurrent(0) }"
       :aria-current="isCurrent(0)"
       @click.prevent="navigate(0)"
diff --git a/frontend/src/components/Gallery.vue b/frontend/src/components/Gallery.vue
index 6ec5902..02b57b0 100644
--- a/frontend/src/components/Gallery.vue
+++ b/frontend/src/components/Gallery.vue
@@ -244,12 +244,13 @@ const contextMenu = (ev: MouseEvent, doc: Doc) => {
 
 <style scoped>
 .gallery {
-  padding: 1rem;
+  padding: 1em;
   width: 100%;
   display: grid;
-  gap: .5rem;
-  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
-  grid-auto-rows: 15rem;
+  gap: .5em;
+  grid-template-columns: repeat(auto-fill, minmax(15em, 1fr));
+  grid-template-rows: repeat(minmax(auto, 15em));
+  align-items: end;
 }
 .breadcrumb {
   position: absolute;
diff --git a/frontend/src/components/GalleryFigure.vue b/frontend/src/components/GalleryFigure.vue
index 045dd61..f92fab6 100644
--- a/frontend/src/components/GalleryFigure.vue
+++ b/frontend/src/components/GalleryFigure.vue
@@ -37,21 +37,24 @@ const m = ref<typeof MediaPreview | null>(null)
 
 <style scoped>
 .gallery figure {
-  height: 15rem;
+  max-height: 15em;
   position: relative;
-  border-radius: .5rem;
+  border-radius: .5em;
   overflow: hidden;
   margin: 0;
   display: flex;
   flex-direction: column;
   align-items: center;
-  justify-content: space-between;
+  justify-content: end;
   overflow: hidden;
 }
+.icon {
+  justify-self: end;
+}
 figure caption {
   font-weight: 600;
   color: var(--text-color);
-  text-shadow: 0 0 .2rem var(--primary-background), 0 0 .2rem var(--primary-background);
+  text-shadow: 0 0 .2em var(--primary-background), 0 0 .2em var(--primary-background);
 }
 .cursor caption {
   background: var(--accent-color);
@@ -73,15 +76,15 @@ caption label {
 }
 label span {
   flex: 1 1;
-  margin-right: 2rem;
+  margin-right: 2em;
   text-align: center;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
 }
 label input[type='checkbox'] {
-  width: 2rem;
-  height: 2rem;
+  width: 2em;
+  height: 2em;
   opacity: 0;
   flex-shrink: 0;
 }
diff --git a/frontend/src/components/MediaPreview.vue b/frontend/src/components/MediaPreview.vue
index ba5a2e0..28bd1f8 100644
--- a/frontend/src/components/MediaPreview.vue
+++ b/frontend/src/components/MediaPreview.vue
@@ -2,8 +2,8 @@
   <img v-if=preview() :src="`${doc.previewurl}?${quality}&t=${doc.mtime}`" alt="">
   <img v-else-if=doc.img :src=doc.url alt="">
   <span v-else-if=doc.dir class="folder icon"></span>
-  <video ref=vid v-else-if=video() :src=doc.url :poster="`${doc.previewurl}?${quality}&t=${doc.mtime}`" controls preload=none @click.prevent>📄</video>
-  <audio ref=aud v-else-if=audio() :src=doc.url controls preload=metadata @click.stop>📄</audio>
+  <video ref=vid v-else-if=video() :src=doc.url :poster="`${doc.previewurl}?${quality}&t=${doc.mtime}`" controls preload=none @click.prevent>🎞️</video>
+  <audio ref=aud v-else-if=audio() :src=doc.url controls preload=metadata @click.stop>🔈</audio>
   <span v-else-if=archive() class="archive icon"></span>
   <span v-else class="file icon" :class="`ext-${doc.ext}`"></span>
 </template>
@@ -43,22 +43,21 @@ const preview = () => (
 </script>
 
 <style scoped>
-img, embed, .icon {
+img, embed, .icon, audio, video {
   font-size: 10em;
-  border-radius: .5rem;
   overflow: hidden;
-  text-align: center;
-  object-fit: cover;
-  object-position: center;
-  min-width: 50%;
-  height: 100%;
-}
-audio, video {
-  height: 100%;
   min-width: 50%;
   max-width: 100%;
+  min-height: 50%;
+  max-height: 100%;
+  object-fit: cover;
+  border-radius: .05em;
+}
+img {
+  justify-self: start;
+}
+audio, video {
   padding-bottom: 2rem;
-  margin: auto;
 }
 .folder::before {
   content: '📁';
diff --git a/frontend/src/views/ExplorerView.vue b/frontend/src/views/ExplorerView.vue
index 1186c8e..73a9a50 100644
--- a/frontend/src/views/ExplorerView.vue
+++ b/frontend/src/views/ExplorerView.vue
@@ -4,7 +4,7 @@
     <p v-if="!store.connected">No Connection</p>
     <p v-else-if="store.document.length === 0">Waiting for File List</p>
     <p v-else-if="store.query">No matches!</p>
-    <p v-else-if="!store.document.some(doc => (doc.loc ? `${doc.loc}/${doc.name}` : doc.name) === props.path.join('/'))">Folder not found.</p>
+    <p v-else-if="!store.document.some(doc => (doc.loc ? `${doc.loc}/${doc.name}` : doc.name) === props.path.join('/'))">Folder not found</p>
     <p v-else>Empty folder</p>
   </div>
   <Gallery
