diff --git a/src/main/resources/static/app.js b/src/main/resources/static/app.js
new file mode 100644
index 0000000..0dd1daa
--- /dev/null
+++ b/src/main/resources/static/app.js
@@ -0,0 +1,11 @@
+const $form = document.querySelector("#form")
+const $path = $form.querySelector("#path")
+const $textarea = document.querySelector("#response_area")
+
+$form.addEventListener("submit", e => {
+    e.preventDefault();
+    fetch(`/api/tess/path?absolute=${$path.value}`)
+        .then(response => response.text())
+        .then(data => $textarea.value = data)
+        .catch(err => console.log(err))
+})
diff --git a/src/main/resources/static/index.html b/src/main/resources/static/index.html
index 5ab2f8a..04f6d97 100644
--- a/src/main/resources/static/index.html
+++ b/src/main/resources/static/index.html
@@ -1 +1,29 @@
-Hello
\ No newline at end of file
+<!doctype html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>OCR Examples</title>
+    <link rel="stylesheet" href="main.css">
+</head>
+<body>
+
+<div class="container">
+    <form id="form">
+        <div>
+            <label for="path">Absolute path</label>
+            <input type="text" id="path" size="100">
+        </div>
+        <input type="submit" value="Send">
+    </form>
+
+    <div class="response">
+        <label for="response_area">Response</label>
+        <textarea id="response_area" cols="40" rows="10"></textarea>
+    </div>
+</div>
+
+<script src="app.js"></script>
+
+</body>
+</html>
+
diff --git a/src/main/resources/static/main.css b/src/main/resources/static/main.css
new file mode 100644
index 0000000..32141eb
--- /dev/null
+++ b/src/main/resources/static/main.css
@@ -0,0 +1,7 @@
+.response {
+    margin-top: 20px;
+}
+
+.response label {
+    display: block;
+}
\ No newline at end of file
