diff --git a/pyproject.toml b/pyproject.toml
index 33066d3..646625a 100644
--- a/pyproject.toml
+++ b/pyproject.toml
@@ -5,7 +5,7 @@ description = "Draw an animated vector image"
 authors = ["Ruben van de Ven <git@rubenvandeven.com>"]
 
 [tool.poetry.dependencies]
-python = "^3.7"
+python = "^3.9"
 tornado = "^6.1"
 coloredlogs = "^15.0.1"
 pydub = "^0.25.1"
diff --git a/templates/index.html b/templates/index.html
new file mode 100644
index 0000000..338da91
--- /dev/null
+++ b/templates/index.html
@@ -0,0 +1,57 @@
+<html>
+
+<head>
+    <title>Annotations</title>
+    <style>
+        body {
+            background: darkgray;
+        }
+
+        ul {
+            margin: 0;
+            padding: 0;
+        }
+
+        li {
+            display: inline-block;
+            ;
+        }
+
+        img {
+            /* width: 400px; */
+            background: white;
+        }
+    </style>
+</head>
+
+<body>
+    {% for tag in index.tags %}
+    <h2>{{tag}}</h2>
+    <ul>
+        {% for annotation in index.tags[tag] %}
+        <li><img src="/annotation/{{ annotation.id }}.svg" data-audio="/annotation/{{ annotation.id }}.mp3"></li>
+        {% end %}
+    </ul>
+    {% end %}
+    <!-- <ul>
+        {% for annotation in index.annotations %}
+        <li>{{ annotation }}</li>
+        {% end %}
+    </ul> -->
+</body>
+<script>
+    let images = document.querySelectorAll('[data-audio]');
+    for (const image of images) {
+        const audio = new Audio(image.dataset.audio);
+        console.log(image, audio);
+        image.addEventListener('mouseover', (e) => {       
+            audio.play();
+        });
+        image.addEventListener('mouseout', (e) => {
+            audio.pause();
+            audio.currentTime = 0;
+        });
+    }
+</script>
+
+</html>
\ No newline at end of file
