diff --git a/detail.html b/detail.html
new file mode 100644
index 0000000..d99491f
--- /dev/null
+++ b/detail.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="UTF-8"/>
+        <title>Inhabitor - The Habitat Inspector</title>
+        <script src="index.js"></script>
+    </head>
+    <body>
+        <h1 id="filename"></h1>
+        <div id="states">
+            <h2>States</h1>
+        </div>
+        <div id="cels">
+            <h2>Cels</h1>
+        </div>
+        <div id="data">
+            <h2>Data</h1>
+        </div>
+        <div id="errors"></div>
+        <script>
+            const dumpProp = (prop, container) => {
+                container.appendChild(textNode(JSON.stringify(prop, null, 2), "pre"))
+            }
+
+            const onload = async () => {
+                const q = new URLSearchParams(window.location.search)
+                const filename = q.get("f")
+                document.getElementById("filename").innerText = filename
+                try {
+                    const prop = await decodeBinary(filename)
+                    dumpProp(prop, document.getElementById("data"))
+                    showStates(prop, document.getElementById("states"))
+                    showCels(prop, document.getElementById("cels"))
+                } catch (e) {
+                    showError(e, filename)
+                }
+            }
+            onload()
+        </script>
+    </body>
+</html>
\ No newline at end of file
diff --git a/index.html b/index.html
index ac6ffcd..f9e0e92 100644
--- a/index.html
+++ b/index.html
@@ -8,6 +8,13 @@
             function showErrors() {
                 document.getElementById('errors').style.display = 'block'
             }
+
+            const displayEverything = async () => {
+                await displayList("heads.json", "heads")
+                await displayList("props.json", "props")
+            }
+
+            displayEverything()
         </script>
     </head>
     <body>
diff --git a/index.js b/index.js
index 598d686..0629b26 100644
--- a/index.js
+++ b/index.js
@@ -332,12 +332,25 @@ const imageFromCanvas = (canvas) => {
     return img
 }
 
+const textNode = (text, type = "span") => {
+    const node = document.createElement(type)
+    node.innerText = text
+    return node
+}
+
+const linkDetail = (element, filename) => {
+    const detailLink = document.createElement("a")
+    detailLink.href = `detail.html?f=${filename}`
+    detailLink.appendChild(element)
+    return detailLink
+}
+
 const showStates = (prop, container) => {
     for (const celmask of prop.celmasks) {
         const state = compositeCels(celsFromMask(prop, celmask))
         const img = imageFromCanvas(state.canvas)
         img.alt = prop.filename
-        container.appendChild(img)
+        container.appendChild(linkDetail(img, prop.filename))
     }
 }
 
@@ -363,7 +376,8 @@ const showError = (e, filename) => {
     const container = document.getElementById("errors")
     const errNode = document.createElement("p")
     console.error(e)
-    errNode.innerHTML = `${filename}<br/>${e.toString()}`
+    errNode.appendChild(linkDetail(textNode(filename, "b"), filename))
+    errNode.appendChild(textNode(e.toString(), "p"))
     container.appendChild(errNode)
 }
 
@@ -388,10 +402,3 @@ const displayList = async (indexFile, containerId) => {
         displayFile(filename, container)
     }
 }
-
-const doTheThing = async () => {
-    await displayList("heads.json", "heads")
-    await displayList("props.json", "props")
-}
-
-doTheThing()
\ No newline at end of file
