diff --git a/src/client/index.ts b/src/client/index.ts
index 3dc5e02..874cb76 100644
--- a/src/client/index.ts
+++ b/src/client/index.ts
@@ -420,6 +420,51 @@ async function onPasskeyRemove(e: CustomEvent<{ id: string }>) {
 	}
 }
 
+// Passkey naming modal — returns a promise that resolves with the name (or empty string on cancel)
+function promptPasskeyName(): Promise<string> {
+	return new Promise((resolve) => {
+		const modal = document.getElementById("passkeyNameModal") as HTMLElement;
+		const input = document.getElementById("passkeyName") as HTMLInputElement;
+		const confirmBtn = document.getElementById(
+			"passkeyNameConfirm",
+		) as HTMLButtonElement;
+		const cancelBtn = document.getElementById(
+			"passkeyNameCancel",
+		) as HTMLButtonElement;
+
+		input.value = "";
+		modal.style.display = "flex";
+		input.focus();
+
+		function cleanup() {
+			modal.style.display = "none";
+			confirmBtn.removeEventListener("click", onConfirm);
+			cancelBtn.removeEventListener("click", onCancel);
+			input.removeEventListener("keydown", onKeydown);
+		}
+
+		function onConfirm() {
+			const val = input.value.trim();
+			cleanup();
+			resolve(val);
+		}
+
+		function onCancel() {
+			cleanup();
+			resolve("");
+		}
+
+		function onKeydown(e: KeyboardEvent) {
+			if (e.key === "Enter") onConfirm();
+			if (e.key === "Escape") onCancel();
+		}
+
+		confirmBtn.addEventListener("click", onConfirm);
+		cancelBtn.addEventListener("click", onCancel);
+		input.addEventListener("keydown", onKeydown);
+	});
+}
+
 // Add passkey button handler
 async function onAddPasskey() {
 	addPasskeyNativeBtn.disabled = true;
@@ -448,10 +493,8 @@ async function onAddPasskey() {
 
 		addPasskeyNativeBtn.textContent = "verifying...";
 
-		// Ask for a name
-		const name = prompt(
-			"Give this passkey a name (e.g., 'iPhone', 'Work Laptop'):",
-		);
+		// Ask for a name via modal
+		const name = await promptPasskeyName();
 
 		// Verify registration
 		const verifyRes = await fetch("/api/passkeys/add/verify", {
diff --git a/src/html/index.html b/src/html/index.html
index c769e19..ffbee0e 100644
--- a/src/html/index.html
+++ b/src/html/index.html
@@ -192,6 +192,22 @@
       <i-button id="addPasskeyBtn"><button type="button">add new passkey</button></i-button>
     </i-card>
 
+    <!-- Passkey naming modal -->
+    <div id="passkeyNameModal" class="modal" style="display:none; position:fixed; inset:0; background:rgba(0,0,0,0.8); z-index:1000; align-items:center; justify-content:center;">
+      <div style="background:var(--ink); border:2px solid var(--paper-dim); padding:var(--space-6); max-width:25rem; width:90%;">
+        <h3 style="font-size:var(--text-xl); font-weight:600; color:var(--paper); margin-bottom:var(--space-4);">name your passkey</h3>
+        <div class="form-group">
+          <label for="passkeyName">passkey name</label>
+          <input type="text" id="passkeyName" placeholder="e.g., iPhone, Work Laptop" autocomplete="off" />
+          <div class="form-help">A friendly name to identify this device</div>
+        </div>
+        <div style="display:flex; gap:var(--space-3); margin-top:var(--space-4);">
+          <button type="button" id="passkeyNameCancel" style="flex:1; background:rgba(188,141,160,0.2); color:var(--paper); border:none; cursor:pointer; font-family:inherit; font-size:var(--text-sm); font-weight:600; padding:var(--space-3);">cancel</button>
+          <button type="button" id="passkeyNameConfirm" style="flex:1; background:var(--accent); color:var(--paper); border:none; cursor:pointer; font-family:inherit; font-size:var(--text-sm); font-weight:600; padding:var(--space-3);">save</button>
+        </div>
+      </div>
+    </div>
+
     <i-card>
       <h2 class="card-title">profile settings</h2>
       <form id="profileForm">