diff --git a/share/web_surfaces/index.html b/share/web_surfaces/index.html
index 6cead8b251..a01a46d417 100644
--- a/share/web_surfaces/index.html
+++ b/share/web_surfaces/index.html
@@ -14,16 +14,25 @@
             <pre id="error" style="display:none"></pre>
             <div id="index" style="display:none">
                 <h1>Available Web Surfaces</h1>
-                <div class="surface-list">
-                    <h2>Built-In</h2>
-                    <ul id="builtin"></ul>
+                <div class="surface-list" id="builtin">
+                    <h2>
+                        Built-In
+                        &emsp;
+                        <span class="disk-path"></span>
+                    </h2>
+                    <ul></ul>
                 </div>
-                <div class="surface-list">
-                    <h2>User</h2>
-                    <ul id="user"></ul>
+                <div class="surface-list" id="user">
+                    <h2>
+                        User
+                        &emsp;
+                        <span class="disk-path"></span>
+                    </h2>
+                    <ul></ul>
                 </div>
             </div>
         </div>
+        <script src="shared/ardour.js"></script>
         <script src="index/main.js"></script>
     </body>
 </html>
diff --git a/share/web_surfaces/index/main.css b/share/web_surfaces/index/main.css
index 3b330fa36f..a10d9f84b9 100644
--- a/share/web_surfaces/index/main.css
+++ b/share/web_surfaces/index/main.css
@@ -78,4 +78,10 @@ h2 {
 
 .surface-list > ul > li {
 	margin: 4ex 0;
-}
\ No newline at end of file
+}
+
+.disk-path {
+	font-family: Monaco, monospace;
+	font-size: 0.66em;
+	color: #bbb;
+}
diff --git a/share/web_surfaces/index/main.js b/share/web_surfaces/index/main.js
index 9a8e9301a5..6c648653cb 100644
--- a/share/web_surfaces/index/main.js
+++ b/share/web_surfaces/index/main.js
@@ -30,29 +30,36 @@
         }
     }
 
-    function buildItem (group, model) {
+    function buildItem (groupPath, surface) {
         const li = document.createElement('li');
         li.innerHTML = `<li>
-                        <a href="${group}/${model.id}/">${model.name}</a>
-                        <p>${model.description}</p>
+                        <a href="${groupPath}/${surface.path}/">${surface.name}</a>
+                        <p>${surface.description}</p>
                     </li>`;
         return li;
     }
 
     function printIndex (index) {
-        ['builtin', 'user'].forEach((group) => {
-            const ul = document.getElementById(group);
-            let models = index[group];
+        for (let group of index) {
+            const path = group['path'];
+            const span = document.querySelector(`#${path} span`);
+            span.innerHTML = group['diskPath'];
 
-            if (models.length > 0) {
-                models.sort((a, b) => a.name.localeCompare(b.name));
-                for (model of models) {
-                    ul.appendChild(buildItem(group, model));
+            let surfaces = group.surfaces;
+
+            if (surfaces.length > 0) {
+                const ul = document.querySelector(`#${path} > ul`);
+                surfaces.sort((a, b) => a.name.localeCompare(b.name));
+                
+                for (surface of surfaces) {
+                    ul.appendChild(buildItem(path, surface));
                 }
             } else {
-                ul.parentNode.style.display = 'none';
+                const p = document.createElement('p');
+                p.innerHTML = '<p>No surfaces found</p>';
+                document.getElementById(path).appendChild(p);
             }
-        });
+        }
 
         document.getElementById('index').style.display = 'inline';
     }