diff --git a/templates/index.html b/templates/index.html
new file mode 100644
index 00000000..4cefe1ea
--- /dev/null
+++ b/templates/index.html
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+
+    <style>
+        object {
+            position: absolute;
+        }
+
+        .on {
+            stroke: green;
+            cursor: pointer;
+        }
+
+        span {
+            display: inline-block;
+            width: 50vh;
+            height: 50vh;
+            background-size: cover;
+        }
+
+        svg {
+            width: 100%;
+            height: 100%;
+        }
+    </style>
+
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
+</head>
+<body>
+    <form action="{{ url_for('submit_kanji') }}" method="get">
+        <input type="text" name="kanji">
+        <input type="submit">
+    </form>
+    <span>
+        {{svg|safe}}
+    </span>
+
+    <script>
+        var allParts = $("svg > g > g > *");
+
+        allParts.on({
+            mouseenter: function () {
+                allParts.removeClass("on");
+                $(this).addClass("on");
+
+            },
+            mouseleave: function () {
+                $(this).removeClass("on");
+            },
+        });
+
+        allParts.click(function() {
+            window.location = "{{ url_for('submit_kanji') }}" + "?kanji=" + ((typeof $(this).attr("kvg:original") !== typeof undefined) ? $(this).attr("kvg:original") : $(this).attr("kvg:element"));
+        });
+
+    </script>
+</body>
+</html>
\ No newline at end of file
