diff --git a/extension/src/popup/components/types/login.ts b/extension/src/popup/components/types/login.ts
index c2e3b97..c891c64 100644
--- a/extension/src/popup/components/types/login.ts
+++ b/extension/src/popup/components/types/login.ts
@@ -14,6 +14,7 @@ import {
   renderSectionsEditor,
   wireSectionsEditor,
 } from '../fields';
+import { openGeneratorPopover, closeGeneratorPopover } from '../generator-popover';
 
 /// Called by the dispatcher before each render. Stops any in-flight
 /// tickers / intervals / listeners the previous view may have attached.
@@ -28,6 +29,7 @@ export function teardown(): void {
     activeFormEscHandler = null;
   }
   sectionsExpanded = false;
+  closeGeneratorPopover();
 }
 
 // ----------------------------------------------------------------------
@@ -263,14 +265,17 @@ export function renderForm(app: HTMLElement, mode: 'add' | 'edit', existing: Ite
   };
   wireSectionsEditor(app, sectionsDraft, rerender);
 
-  document.getElementById('gen-btn')?.addEventListener('click', async () => {
-    const resp = await sendMessage({ type: 'generate_password', request: DEFAULT_PASSWORD_REQUEST });
-    if (resp.ok) {
-      const data = resp.data as { password: string };
-      const pw = document.getElementById('f-password') as HTMLInputElement;
-      pw.value = data.password;
-      pw.type = 'text';
-    } else setState({ error: resp.error });
+  document.getElementById('gen-btn')?.addEventListener('click', (e) => {
+    const anchor = e.currentTarget as HTMLElement;
+    const initial = getState().generatorDefaults ?? DEFAULT_PASSWORD_REQUEST;
+    openGeneratorPopover({
+      anchor,
+      initial,
+      onPicked: (value) => {
+        const pw = document.getElementById('f-password') as HTMLInputElement | null;
+        if (pw) { pw.value = value; pw.type = 'text'; }
+      },
+    });
   });
 
   document.getElementById('cancel-btn')?.addEventListener('click', () => {