diff --git a/src/main.rs b/src/main.rs
index 2118e3a..8d0fffa 100644
--- a/src/main.rs
+++ b/src/main.rs
@@ -1,7 +1,7 @@
 use std::env;
 use std::sync::Arc;
 
-use axum::{http::StatusCode, routing::get, Json, Router};
+use axum::{http::StatusCode, response::Html, routing::get, Json, Router};
 use axum_oidc_client::authentication::AuthenticationLayer;
 use axum_oidc_client::authentication::builder::OAuthConfigurationBuilder;
 use axum_oidc_client::authentication::logout::handle_default_logout::DefaultLogoutHandler;
@@ -13,6 +13,42 @@ use axum_oidc_client::authentication::CodeChallengeMethod;
 use base64::Engine;
 use serde::Serialize;
 
+const INDEX_HTML: &str = r#"<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Hello</title>
+    <style>
+        body { font-family: system-ui, sans-serif; max-width: 400px; margin: 80px auto 0; text-align: center; }
+        button { font-size: 1.2em; padding: 12px 32px; cursor: pointer; }
+        #greeting { margin-top: 24px; font-size: 1.1em; }
+        #error { color: red; margin-top: 24px; }
+    </style>
+</head>
+<body>
+    <button id="helloBtn">Hello</button>
+    <div id="greeting"></div>
+    <div id="error"></div>
+    <script>
+        document.getElementById("helloBtn").addEventListener("click", async () => {
+            const greeting = document.getElementById("greeting");
+            const error = document.getElementById("error");
+            greeting.textContent = "";
+            error.textContent = "";
+            try {
+                const res = await fetch("/hello");
+                if (!res.ok) throw new Error("Request failed");
+                const data = await res.json();
+                greeting.textContent = data.preferred_username;
+            } catch {
+                error.textContent = "Failed to fetch user info";
+            }
+        });
+    </script>
+</body>
+</html>"#;
+
 #[derive(Serialize)]
 struct HelloResponse {
     preferred_username: String,
@@ -42,6 +78,10 @@ async fn hello(session: AuthSession) -> Result<Json<HelloResponse>, StatusCode>
     Ok(Json(HelloResponse { preferred_username }))
 }
 
+async fn index(_session: AuthSession) -> Html<&'static str> {
+    Html(INDEX_HTML)
+}
+
 #[tokio::main]
 async fn main() -> anyhow::Result<()> {
     let provider_url = env_required("OIDC_PROVIDER_URL");
@@ -85,6 +125,7 @@ async fn main() -> anyhow::Result<()> {
     let logout_handler = Arc::new(DefaultLogoutHandler);
 
     let app = Router::new()
+        .route("/", get(index))
         .route("/hello", get(hello))
         .layer(AuthenticationLayer::new(
             Arc::new(config),
