diff --git a/homelab/docker-compose.yaml b/homelab/docker-compose.yaml
index 9efdac6..b484fce 100644
--- a/homelab/docker-compose.yaml
+++ b/homelab/docker-compose.yaml
@@ -17,11 +17,13 @@ services:
       - type: bind
         source: /srv/ext/sys/caddy
         target: /data/caddy
+      - type: bind
+        source: /srv/ext/sys/www
+        target: /www
+        read_only: true
     configs:
       - source: Caddyfile
         target: /etc/caddy/Caddyfile
-      - source: index.html
-        target: /www/index.html
     extra_hosts:
       - host.docker.internal:host-gateway
 
@@ -219,10 +221,7 @@ configs:
     name: dave.yaml-v3
   Caddyfile:
     file: Caddyfile
-    name: Caddyfile-v55
-  index.html:
-    file: index.html
-    name: index.html-v33
+    name: Caddyfile-v57
 
 
 secrets:
diff --git a/homelab/index.html b/homelab/index.html
index e8705f5..4d6eaea 100644
--- a/homelab/index.html
+++ b/homelab/index.html
@@ -2,96 +2,150 @@
 <html>
   <head>
     <title>Deer Grove</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="icon" href="/landing-page/deergrove.png">
     <style>
 body {
-  font-family: sans-serif;
-  background: #efe;
+  display: flex;
+  flex-flow: column;
+  height: 100vh;
+  margin: 0;
+  font-family: Helvetica, sans-serif;
+  background-color: #222;
+  color: white;
 }
-section {
-  margin: 3em auto;
-  max-width: 30em;
+
+nav {
+  overflow-x: scroll;
+  font-weight: bold;
+  font-size: 12pt;
+  display: flex;
 }
-menu, ul {
-  margin-block: auto;
-  padding-inline: inherit;
-  list-style: none;
+nav img {
+  max-height: 2em;
 }
-li {
-  margin: 1em;
+nav a {
+  padding: 0.5em 1.5em;
+  color: #aaa;
+  text-decoration: none;
+  white-space: nowrap;
+}
+nav a:hover {
+  background: #555;
+}
+nav a.active {
+  background: #8b8;
+  color: black;
+}
+
+iframe {
+  flex-grow: 1;
+  border: none;
+}
+
+.icons {
+  margin: auto 2em;
+}
+.icons {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  max-width: 40em;
+  margin: auto;
+  gap: 20px;
+}
+.icons a {
+  background-color: #444;
+  color: #fff;
+  width: 120px;
+  height: 120px;
+  border-radius: 10px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.icons a img {
+  max-width: 66%;
+  max-height: 66%;
+  width: 100%;
+  height: 100%;
+  image-rendering: pixelated;
 }
     </style>
+    <script type="module">
+function activate(event, element) {
+  if (element.target) {
+    return
+  }
+  let parent = element.parentElement
+  for (let e of parent.getElementsByClassName("active")) {
+    e.classList.remove("active")
+  }
+  element.classList.add("active")
+
+  let iframe = document.querySelector("iframe")
+  iframe.src = element.href
+
+  event.preventDefault()
+}
+
+function init() {
+  let doc = document.querySelector("iframe").contentDocument
+
+  for (let l of document.head.querySelectorAll("style")) {
+    doc.head.appendChild(l.cloneNode(true))
+  }
+
+  let icons = doc.body.appendChild(doc.createElement("section"))
+  icons.classList.add("icons")
+
+  for (let link of document.querySelectorAll("nav a")) {
+    let dlink = icons.appendChild(link.cloneNode(true))
+    dlink.textContent = ""
+
+    if (link.dataset.icon) {
+      let icon = dlink.appendChild(doc.createElement("img"))
+      icon.src = link.dataset.icon
+      icon.style.objectFit = "cover"
+    } else {
+      let text = dlink.appendChild(doc.createElement("div"))
+      text.textContent = link.textContent
+    }
+
+    // Make both of them update the selected tab
+    link.addEventListener("click", event => activate(event, link))
+    dlink.addEventListener("click", event => activate(event, link))
+  }
+}
+
+if (document.readyState === "loading") {
+  document.addEventListener("DOMContentLoaded", init)
+} else {
+  init()
+}
+    </script>
   </head>
   <body>
-    <h1>Deer Grove</h1>
-    <section>
-      <menu>
-        <h2>Major Services</h2>
-        <ul>
-          <li><a href="//drive.woozle.org/">📁 Drive</a></li>
-          <li><a href="//ancestry.woozle.org/">👪 Ancestry</a></li>
-          <li><a href="//git.woozle.org/">🗄️ Git</a></li>
-        </ul>
-
-        <h2>Smaller stuff</h2>
-        <ul>
-          <li><a href="/octoprint/">🖨️ Octoprint: 3d Printer</a></li>
-          <li><a href="/wallart/">🖼️ Wall Art Uploader</a></li>
-        </ul>
-
-        <h2>Media</h2>
-        <ul>
-          <li><a href="/sucker/">💿 Media Sucker: DVD/CD ripper</a></li>
-          <li><a href="/sonarr/">📺 Sonarr: TV episode manager</a></li>
-          <li><a href="/radarr/">🎬 Radarr: Movie manager</a></li>
-          <li><a href="/lidarr/">🎶 Lidarr: Music manager</a></li>
-          <li><a href="/readarr/">📖 Readarr: Book manager</a></li>
-        </ul>
-
-        <h2>Media Helpers</h2>
-        <ul>
-          <li><a href="/prowlarr/">🐯 Prowlarr: Indexer for downloaders</a></li>
-          <li><a href="/transmission/web/">📥 Transmission</a></li>
-          <li><a href="/nzbget/">📰 NZBGet: Usenet fetcher</a></li>
-        </ul>
-      </menu>
-    </section>
-    <section>
-      <h1>How all the media stuff fits together</h1>
-      <p>
-        Plex is the main interface for users.
-        It indexes media in <tt>/srv/ext/media</tt>
-        and lets everybody watch it whetever.
-      </p>
-      <p>
-        The Media Sucker automatically sucks things off of CDs and DVDs.
-        You still have to rename the files and move them into the right place, though.
-      </p>
-      <p>
-        Sonarr/Radarr/Lidarr/Readarr let you tell it what you'd like to have,
-        and watches various feeds,
-        waiting for it to appear.
-        Then it tells a downloader to download it.
-        Once a file is downloaded,
-        it moves it into a directory where Plex can see it,
-        making sure it's named properly.
-      </p>
-      <p>
-        Prowlarr connects to various download indexers,
-        to find whatever it is you're looking for.
-        <a href="https://nzbgeek.info/">NZBGeek</a> is a paid feed provider that I use:
-        it monitors Usenet for new posts,
-        and provides them as feeds.
-        I pay <a href="https://frugalusenet.com/">Frugal Usenet</a> $5 a month to run a Usenet server so I don't have to.
-      </p>
-      <p>
-        Transmission and NZBGet are downloaders.
-        Once you've found something in an index,
-        you can ask these to download it.
-      </p>
-    </section>
+    <nav>
+      <img src="/landing-page/deergrove.png">
+      <a href="/sonarr/" data-icon="/sonarr/Content/Images/logo.svg" title="Episode manager">Shows</a>
+      <a href="/radarr/" data-icon="/radarr/Content/Images/logo.svg" title="Movie manager">Movies</a>
+      <a href="/lidarr/" data-icon="/lidarr/Content/Images/logo.svg" title="Music manager">Music</a>
+      <a href="/readarr/" data-icon="/readarr/Content/Images/logo.svg" title="Book manager">Books</a>
+      <a href="/sucker/" data-icon="/landing-page/cd-dvd.svg" title="Media Sucker">Sucker</a>
+      <hr>
+      <a href="/prowlarr/" data-icon="/prowlarr/Content/Images/logo.png" title="Indexer/Searcher">Search</a>
+      <a href="/nzbget/" data-icon="/landing-page/nzbget.png" title="Usenet downloader">Usenet</a>
+      <a href="/transmission/web/" data-icon="/transmission/web/style/transmission/images/logo.png" title="BitTorrent downloader">BitTorrent</a>
+      <hr>
+      <a href="/octoprint/" data-icon="/octoprint/static/img/logo.png" title="3D Printer Front-End">Octoprint</a>
+      <a href="/wallart/" data-icon="/wallart/wallart.png" title="Wall Art uploader">Wall Art</a>
+      <hr>
+      <a href="https://git.woozle.org" target="_blank" data-icon="https://git.woozle.org/assets/img/logo.svg" title="Git repositories">Git</a>
+      <a href="https://drive.woozle.org/" target="_blank" data-icon="/landing-page/cloud-folder.png" titled="Shared storage">Drive</a>
+      <a href="https://ancestry.woozle.org/" target="_blank" data-icon="https://ancestry.woozle.org/images/favicon_gwd.png" title="Genealogy">Ancestry</a>
+    </nav>
+    <iframe></iframe>
   </body>
 </html>
-<!-- 
-vi: ts=2 sw=2 et ai 
--->
