diff --git a/.vscode/settings.json b/.vscode/settings.json
index e413016..2cd72ed 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -1,4 +1,8 @@
 {
     "json.format.keepLines": true,
     "typescript.format.semicolons": "insert",
+    "files.associations": {
+        "**/templates/**/*.html": "jinja-html",
+    },
+
 }
diff --git a/Cargo.lock b/Cargo.lock
index 671f849..c4a82a4 100644
--- a/Cargo.lock
+++ b/Cargo.lock
@@ -23,6 +23,52 @@ version = "1.0.72"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "3b13c32d80ecc7ab747b80c3784bce54ee8a7a0cc4fbda9bf4cda2cf6fe90854"
 
+[[package]]
+name = "askama"
+version = "0.12.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "47cbc3cf73fa8d9833727bbee4835ba5c421a0d65b72daf9a7b5d0e0f9cfb57e"
+dependencies = [
+ "askama_derive",
+ "askama_escape",
+ "humansize",
+ "num-traits",
+ "percent-encoding",
+]
+
+[[package]]
+name = "askama_axum"
+version = "0.3.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "07b336dea26a2eb67f04e1134385721f794b654a870ce5146d2fcb69ea39c3a4"
+dependencies = [
+ "askama",
+ "axum-core",
+ "http",
+]
+
+[[package]]
+name = "askama_derive"
+version = "0.12.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "c22fbe0413545c098358e56966ff22cdd039e10215ae213cfbd65032b119fc94"
+dependencies = [
+ "basic-toml",
+ "mime",
+ "mime_guess",
+ "nom",
+ "proc-macro2",
+ "quote",
+ "serde",
+ "syn",
+]
+
+[[package]]
+name = "askama_escape"
+version = "0.10.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "619743e34b5ba4e9703bba34deac3427c72507c7159f5fd030aea8cac0cfe341"
+
 [[package]]
 name = "async-trait"
 version = "0.1.72"
@@ -117,6 +163,15 @@ dependencies = [
  "rustc-demangle",
 ]
 
+[[package]]
+name = "basic-toml"
+version = "0.1.4"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "7bfc506e7a2370ec239e1d072507b2a80c833083699d3c6fa176fbb4de8448c6"
+dependencies = [
+ "serde",
+]
+
 [[package]]
 name = "bitflags"
 version = "1.3.2"
@@ -292,6 +347,15 @@ version = "1.0.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "c4a1e36c821dbe04574f602848a19f742f4fb3c98d40449f11bcad18d6b17421"
 
+[[package]]
+name = "humansize"
+version = "2.1.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "6cb51c9a029ddc91b07a787f1d86b53ccfa49b0e86688c946ebe8d3555685dd7"
+dependencies = [
+ "libm",
+]
+
 [[package]]
 name = "hyper"
 version = "0.14.27"
@@ -327,6 +391,12 @@ version = "0.2.147"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "b4668fb0ea861c1df094127ac5f1da3409a82116a4ba74fca2e58ef927159bb3"
 
+[[package]]
+name = "libm"
+version = "0.2.7"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "f7012b1bbb0719e1097c47611d3898568c546d597c2e74d66f6087edd5233ff4"
+
 [[package]]
 name = "lock_api"
 version = "0.4.10"
@@ -371,6 +441,12 @@ dependencies = [
  "unicase",
 ]
 
+[[package]]
+name = "minimal-lexical"
+version = "0.2.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "68354c5c6bd36d73ff3feceb05efa59b6acb7626617f4962be322a825e61f79a"
+
 [[package]]
 name = "miniz_oxide"
 version = "0.7.1"
@@ -391,6 +467,25 @@ dependencies = [
  "windows-sys",
 ]
 
+[[package]]
+name = "nom"
+version = "7.1.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "d273983c5a657a70a3e8f2a01329822f3b8c8172b73826411a55751e404a0a4a"
+dependencies = [
+ "memchr",
+ "minimal-lexical",
+]
+
+[[package]]
+name = "num-traits"
+version = "0.2.16"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "f30b0abd723be7e2ffca1272140fac1a2f084c77ec3e123c192b66af1ee9e6c2"
+dependencies = [
+ "autocfg",
+]
+
 [[package]]
 name = "num_cpus"
 version = "1.16.0"
@@ -576,6 +671,20 @@ name = "serde"
 version = "1.0.180"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "0ea67f183f058fe88a4e3ec6e2788e003840893b91bac4559cabedd00863b3ed"
+dependencies = [
+ "serde_derive",
+]
+
+[[package]]
+name = "serde_derive"
+version = "1.0.180"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "24e744d7782b686ab3b73267ef05697159cc0e5abbed3f47f9933165e5219036"
+dependencies = [
+ "proc-macro2",
+ "quote",
+ "syn",
+]
 
 [[package]]
 name = "serde_json"
@@ -668,6 +777,8 @@ name = "tablejohn"
 version = "0.0.0"
 dependencies = [
  "anyhow",
+ "askama",
+ "askama_axum",
  "axum",
  "mime_guess",
  "rust-embed",
diff --git a/Cargo.toml b/Cargo.toml
index d9d7943..b1111d3 100644
--- a/Cargo.toml
+++ b/Cargo.toml
@@ -5,6 +5,8 @@ edition = "2021"
 
 [dependencies]
 anyhow = "1.0.72"
+askama = { version = "0.12.0", features = ["with-axum"] }
+askama_axum = "0.3.0"
 axum = { version = "0.6.19", features = ["macros"] }
 mime_guess = "2.0.4"
 rust-embed = "6.8.1"
diff --git a/askama.toml b/askama.toml
new file mode 100644
index 0000000..991ecea
--- /dev/null
+++ b/askama.toml
@@ -0,0 +1,2 @@
+[general]
+whitespace = "minimize"
diff --git a/src/main.rs b/src/main.rs
index 708891c..0726c65 100644
--- a/src/main.rs
+++ b/src/main.rs
@@ -1,10 +1,24 @@
 mod r#static;
 
+use askama::Template;
 use axum::{routing::get, Router};
 
+#[derive(Template)]
+#[template(path = "index.html")]
+struct IndexTemplate {
+    greetee: String,
+}
+
 async fn run() -> anyhow::Result<()> {
     let app = Router::new()
-        .route("/", get(|| async { "Hello, world!" }))
+        .route(
+            "/",
+            get(|| async {
+                IndexTemplate {
+                    greetee: "world".to_string(),
+                }
+            }),
+        )
         .fallback(get(r#static::static_handler));
 
     axum::Server::bind(&"0.0.0.0:8000".parse().unwrap())
diff --git a/static/main.ts b/static/main.ts
index fa740c4..c991945 100644
--- a/static/main.ts
+++ b/static/main.ts
@@ -2,4 +2,5 @@ function main() {
     alert("Hello world!");
 }
 
-main();
+const BUTTON = document.getElementById("button");
+BUTTON?.addEventListener("click", main);
diff --git a/templates/index.html b/templates/index.html
new file mode 100644
index 0000000..956c8ee
--- /dev/null
+++ b/templates/index.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset="utf-8" />
+    <title>index</title>
+    <script type="module" src="main.js"></script>
+</head>
+
+<body>
+    <h1>Hello</h1>
+    <p>{{ greetee }}</p>
+    <button id="button">Click me!</button>
+</body>
+
+</html>