diff --git a/src/index.html b/src/index.html
index 76e37f8..aaa7981 100644
--- a/src/index.html
+++ b/src/index.html
@@ -37,12 +37,33 @@
             <option>ECDH-ES+A256KW</option>
           </select>
         </label>
+        <label style="display: block">
+          Public Key Use
+          <select name="use">
+            <option value="sig">signature</option>
+            <option value="enc">encryption</option>
+            <option value="">-</option>
+          </select>
+        </label>
+        <label style="display: block">
+          Key ID
+          <select name="kid-method">
+            <option value="rfc7638-s256">JWK Thumbprint (SHA-256)</option>
+            <option value="rfc7638-s384">JWK Thumbprint (SHA-384)</option>
+            <option value="rfc7638-s512">JWK Thumbprint (SHA-512)</option>
+            <option value="rfc9278-s256">JWK Thumbprint URI (SHA-256)</option>
+            <option value="rfc9278-s384">JWK Thumbprint URI (SHA-384)</option>
+            <option value="rfc9278-s512">JWK Thumbprint URI (SHA-512)</option>
+            <option value="date-time">Date and Time</option>
+            <option value="">-</option>
+          </select>
+        </label>
         <input type="submit" value="Generate" style="display: block" />
       </form>
       <pre id="output"></pre>
     </main>
     <footer>
-      by <a href="https://github.com/kou029w" rel="noreferrer">kou029w</a>
+      by <a href="https://github.com/kou029w/" rel="noreferrer">kou029w</a>
     </footer>
   </body>
 </html>
diff --git a/src/main.ts b/src/main.ts
index fdb230d..df3d586 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,15 +1,35 @@
 import "@exampledev/new.css";
-import { exportJWK, generateKeyPair } from "jose";
+import {
+  calculateJwkThumbprint,
+  calculateJwkThumbprintUri,
+  exportJWK,
+  generateKeyPair,
+} from "jose";
 
 const form = document.querySelector("form") as HTMLFormElement;
 const output = document.querySelector("#output") as HTMLPreElement;
 
 async function onSubmit(e: SubmitEvent) {
   e.preventDefault();
-  const alg = new FormData(form).get("alg") as string;
+  const data = new FormData(form);
+  const alg = data.get("alg") as string;
+  const use = (data.get("use") as string) || undefined;
   const { privateKey } = await generateKeyPair(alg, { extractable: true });
   const jwk = await exportJWK(privateKey);
-  output.textContent = JSON.stringify(jwk, null, "  ");
+  const createKid = {
+    "rfc7638-s256": () => calculateJwkThumbprint(jwk, "sha256"),
+    "rfc7638-s384": () => calculateJwkThumbprint(jwk, "sha384"),
+    "rfc7638-s512": () => calculateJwkThumbprint(jwk, "sha512"),
+    "rfc9278-s256": () => calculateJwkThumbprintUri(jwk, "sha256"),
+    "rfc9278-s384": () => calculateJwkThumbprintUri(jwk, "sha384"),
+    "rfc9278-s512": () => calculateJwkThumbprintUri(jwk, "sha512"),
+    "date-time": () => new Date().toISOString(),
+  }[data.get("kid-method") as string];
+  output.textContent = JSON.stringify(
+    { ...{ alg, use, kid: await createKid?.() }, ...jwk },
+    null,
+    "  "
+  );
 }
 
 form?.addEventListener("submit", onSubmit);