diff --git a/html/demo.js b/html/demo.js
index 088b3cf..953a1eb 100644
--- a/html/demo.js
+++ b/html/demo.js
@@ -1166,7 +1166,7 @@ function update_active_users(
   }
 
   // Don't update the mixing console and we are not looking at that screen.
-  if (window.debugSettings.style.display == "none") {
+  if (window.advancedSettings.style.display == "none") {
     return;
   }
   if (mic_volume_inputs.length == 0) {
diff --git a/html/index.html b/html/index.html
index 75745ec..308c595 100644
--- a/html/index.html
+++ b/html/index.html
@@ -555,8 +555,6 @@
     <h1 id=instanceName>Bucket Brigade</h1>
     </div>
 
-    <a target="_blank" href="recordings/">Recent Recordings</a>
-
     <a target="_blank" href="https://github.com/gwillen/solstice-audio-test">Source Code</a>
 
     <a target="_blank" href="https://github.com/gwillen/solstice-audio-test/issues/new">Report a problem</a>
@@ -572,6 +570,7 @@ <h1 id=instanceName>Bucket Brigade</h1>
 <div id=tabbar>
   <span class=activeTab id=mainViewTab>Home</span>
   <span id=advancedSettingsTab>Advanced</span>
+  <span id=recordingsTab>Recordings</span>
   <span id=debugTab>Debug</span>
   <span id=booktimeTab>Reserve</span>
   <span id=aboutTab>About</span>
@@ -728,6 +727,10 @@ <h3>Debug Info</h3>
 </div>
 </div>
 
+<div id=recordings class=middlePane>
+<div id=recordingsGoHere></div>
+</div>
+
 <div id=about class=middlePane>
 <div style="max-width: 40em">
 
@@ -1241,6 +1244,7 @@ <h2>Then refresh the page and try again.</h2>
     "Debug": window.debugInfo,
     "Reserve": window.booktime,
     "About": window.about,
+    "Recordings": window.recordings,
     "AdvancedSettings": window.advancedSettings,
     "UnsupportedBrowser": window.noAudioWorklet,
     "UnsupportedDevice": window.isMobile,
@@ -1252,6 +1256,7 @@ <h2>Then refresh the page and try again.</h2>
     "Reserve": window.booktimeTab,
     "About": window.aboutTab,
     "AdvancedSettings": window.advancedSettingsTab,
+    "Recordings": window.recordingsTab,
   };
 
   for (const [paneName, paneTab] of Object.entries(tabs)) {
@@ -1267,6 +1272,14 @@ <h2>Then refresh the page and try again.</h2>
       });
   }
 
+  async function updateRecordings() {
+    window.recordingsGoHere.innerHTML = "";
+    const response = await fetch("recordings/");
+    const html = await response.text();
+    window.recordingsGoHere.innerHTML =
+       html.replace(/href='/g, "target=_blank href='recordings/");
+  }
+
   function showPane(paneName) {
     for (const [otherPaneName, otherPaneDiv] of Object.entries(middlePanes)) {
       otherPaneDiv.style.display = "none";
@@ -1279,6 +1292,10 @@ <h2>Then refresh the page and try again.</h2>
       tabs[paneName].classList.add("activeTab");
     }
     window.location.hash = (paneName === "Main" ? "" : paneName);
+
+    if (paneName == "Recordings") {
+      updateRecordings();
+    }
   }
 
   if (window.location.hash && !showingWarningPane) {
diff --git a/server.py b/server.py
index c060967..c380117 100755
--- a/server.py
+++ b/server.py
@@ -271,9 +271,6 @@ def update_directory_listing_(self):
             def w(s):
                 outf.write(s)
                 outf.write("\n")
-            w("<html>")
-            w("<title>Recordings</title>")
-            w("<h1>Recordings</h1>")
             w("All times (and dates!) are in UTC.")
             w("<ul>")
             for fname in reversed(sorted(os.listdir(RECORDINGS_DIR))):
@@ -286,7 +283,6 @@ def w(s):
             w("</ul>")
             w("Because these files are large we only keep the most recent %s" %
               RECORDING_N_TO_KEEP)
-            w("</html>")
 
     def cleanup_(self):
         recordings = os.listdir(RECORDINGS_DIR)
