diff --git a/index.html b/index.html
new file mode 100644
index 0000000..470e830
--- /dev/null
+++ b/index.html
@@ -0,0 +1,98 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <title>Services</title>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width,initial-scale=1" />
+
+    <style>
+        * {
+            box-sizing: border-box;
+        }
+
+        body {
+            font-size: 1.35em;
+            font-family: "sans-serif";
+        }
+
+        a, p {
+            margin: 0.45rem;
+            padding: 0;
+            text-decoration: none;
+        }
+
+        .service-link {
+            display: block;
+            border-bottom: 1px solid #000000;
+        }
+
+        .large {
+            font-size: 1.4em;
+        }
+    </style>
+</head>
+<body>
+    <main>
+        <p class="large">services</p>
+        <a href="#" id="load-services">load service list</a><span> | </span><a href="/services.json">view raw json</a><br>
+        <p class="large">list</p>
+        <div id="service-list-container">
+            <p>nothing here yet.</p>
+        </div>
+    </main>
+
+    <script>
+        const serviceListContainer = document.getElementById("service-list-container");
+        const loadServicesButton = document.getElementById("load-services");
+
+        async function loadServicesJson() {
+            const res = await fetch("/services.json");
+            const json = await res.json();
+
+            return json;
+        }
+
+        function insertServices(container, data) {
+            while (container.firstChild) {
+                container.removeChild(container.firstChild);
+            }
+
+            data.services.forEach(({ id, name }) => {
+                const idText = document.createElement("span");
+                idText.style.setProperty("color", "black");
+                idText.style.setProperty("float", "right");
+                idText.innerText = `[${id}]`;
+
+                const link = document.createElement("a");
+                link.href = `${data.provider.prefix}/${id}/${name}`;
+                link.innerText = `${name}`;
+                link.classList.add("service-link");
+
+                link.appendChild(idText);
+
+                container.appendChild(link);
+            });
+        }
+
+        async function displayServices() {
+            insertServices(serviceListContainer, await loadServicesJson());
+        }
+
+        async function main() {
+            loadServicesButton.onclick = displayServices;
+
+            if (location.hash !== "") {
+                const name = location.hash.substring(1, location.hash.length);
+                const serviceData = await loadServicesJson();
+                const foundService = serviceData.services.find(e => e.name === name);
+                if (foundService) {
+                    window.location.hash = "";
+                    window.location.pathname = `${serviceData.provider.prefix}/${foundService.id}/${foundService.name}`;
+                }
+            }
+        }
+
+        main();
+    </script>
+</body>
+</html>
