diff --git a/packages/fxa-settings/src/components/Settings/PagePasskeyAdd/en.ftl b/packages/fxa-settings/src/components/Settings/PagePasskeyAdd/en.ftl
new file mode 100644
index 00000000000..50a272ea77f
--- /dev/null
+++ b/packages/fxa-settings/src/components/Settings/PagePasskeyAdd/en.ftl
@@ -0,0 +1,12 @@
+## PagePasskeyAdd - Loading page shown during passkey creation
+
+page-passkey-add-creating-heading = Creating passkey…
+page-passkey-add-follow-prompts = Follow the prompts on your device.
+page-passkey-add-cancel = Cancel
+
+## Success / Error messages (shown in alert bar after returning to settings)
+
+page-passkey-add-success = Passkey created
+page-passkey-add-error-system = System not available. Try again later.
+
+##
diff --git a/packages/fxa-settings/src/components/Settings/PagePasskeyAdd/index.stories.tsx b/packages/fxa-settings/src/components/Settings/PagePasskeyAdd/index.stories.tsx
new file mode 100644
index 00000000000..21395e4cffa
--- /dev/null
+++ b/packages/fxa-settings/src/components/Settings/PagePasskeyAdd/index.stories.tsx
@@ -0,0 +1,78 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+import React from 'react';
+import { Meta } from '@storybook/react';
+import { withLocalization } from 'fxa-react/lib/storybooks';
+import { LocationProvider } from '@reach/router';
+import { PagePasskeyAdd } from '.';
+import { AppContext } from 'fxa-settings/src/models';
+import {
+  mockAppContext,
+  mockSettingsContext,
+} from 'fxa-settings/src/models/mocks';
+import { SettingsContext } from 'fxa-settings/src/models/contexts/SettingsContext';
+import { MfaContext } from '../MfaGuard';
+import { getDefault } from '../../../lib/config';
+
+export default {
+  title: 'Pages/Settings/PasskeyAdd',
+  component: PagePasskeyAdd,
+  decorators: [withLocalization],
+} as Meta;
+
+const mockAccount = {
+  getCachedJwtByScope: () => 'mock-jwt',
+} as any;
+
+// Auth client that never resolves — keeps the loading page visible.
+const hangingAuthClient = {
+  beginPasskeyRegistration: () => new Promise(() => {}),
+  completePasskeyRegistration: () => new Promise(() => {}),
+};
+
+function initLocalAccount() {
+  const NS = '__fxa_storage';
+  const uid = 'abc123';
+  const accounts = {
+    [uid]: {
+      uid,
+      sessionToken: 'mock-session-token',
+      email: 'user@example.com',
+      verified: true,
+      lastLogin: Date.now(),
+    },
+  };
+  window.localStorage.setItem(`${NS}.accounts`, JSON.stringify(accounts));
+  window.localStorage.setItem(`${NS}.currentAccountUid`, JSON.stringify(uid));
+}
+
+const configWithPasskeys = {
+  ...getDefault(),
+  featureFlags: {
+    ...getDefault().featureFlags,
+    passkeyRegistrationEnabled: true,
+  },
+};
+
+export const CeremonyInProgress = () => {
+  initLocalAccount();
+  return (
+    <LocationProvider>
+      <AppContext.Provider
+        value={mockAppContext({
+          account: mockAccount,
+          authClient: hangingAuthClient as any,
+          config: configWithPasskeys,
+        })}
+      >
+        <SettingsContext.Provider value={mockSettingsContext()}>
+          <MfaContext.Provider value="passkey">
+            <PagePasskeyAdd />
+          </MfaContext.Provider>
+        </SettingsContext.Provider>
+      </AppContext.Provider>
+    </LocationProvider>
+  );
+};
diff --git a/packages/fxa-settings/src/components/Settings/PagePasskeyAdd/index.test.tsx b/packages/fxa-settings/src/components/Settings/PagePasskeyAdd/index.test.tsx
new file mode 100644
index 00000000000..bf8780638ba
--- /dev/null
+++ b/packages/fxa-settings/src/components/Settings/PagePasskeyAdd/index.test.tsx
@@ -0,0 +1,251 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+import React from 'react';
+import { render, screen, waitFor, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom';
+
+import { PagePasskeyAdd } from '.';
+import { Account, AppContext } from '../../../models';
+import { mockAppContext, mockSettingsContext } from '../../../models/mocks';
+import { SettingsContext } from '../../../models/contexts/SettingsContext';
+import { MfaContext } from '../MfaGuard';
+import {
+  WebAuthnErrorCategory,
+  WebAuthnErrorType,
+} from '../../../lib/passkeys/webauthn-errors';
+
+// Mock navigate
+const mockNavigateWithQuery = jest.fn();
+jest.mock('../../../lib/hooks/useNavigateWithQuery', () => ({
+  useNavigateWithQuery: () => mockNavigateWithQuery,
+}));
+
+// Mock LoadingSpinner
+jest.mock('fxa-react/components/LoadingSpinner', () => () => (
+  <div data-testid="loading-spinner">Loading…</div>
+));
+
+// Mock Sentry
+const mockCaptureException = jest.fn();
+jest.mock('@sentry/browser', () => ({
+  captureException: (...args: unknown[]) => mockCaptureException(...args),
+}));
+
+// Mock WebAuthn utilities
+const mockCreateCredential = jest.fn();
+jest.mock('../../../lib/passkeys/webauthn', () => ({
+  createCredential: (...args: unknown[]) => mockCreateCredential(...args),
+}));
+
+const mockHandleWebAuthnError = jest.fn();
+jest.mock('../../../lib/passkeys/webauthn-errors', () => ({
+  ...jest.requireActual('../../../lib/passkeys/webauthn-errors'),
+  handleWebAuthnError: (...args: unknown[]) => mockHandleWebAuthnError(...args),
+}));
+
+// Mock cache
+jest.mock('../../../lib/cache', () => ({
+  ...jest.requireActual('../../../lib/cache'),
+  JwtTokenCache: {
+    hasToken: jest.fn(() => true),
+    getToken: jest.fn(() => 'mock-jwt'),
+    subscribe: jest.fn(() => () => {}),
+    getSnapshot: jest.fn(() => ({})),
+    getKey: jest.fn(() => 'key'),
+  },
+  sessionToken: jest.fn(() => 'session-123'),
+}));
+
+// Mock auth client methods
+const mockBeginPasskeyRegistration = jest.fn();
+const mockCompletePasskeyRegistration = jest.fn();
+
+const mockAlertSuccess = jest.fn();
+const mockAlertError = jest.fn();
+
+const mockCreationOptions = {
+  rp: { name: 'Mozilla', id: 'accounts.firefox.com' },
+  user: { id: 'dXNlcg', name: 'test@example.com', displayName: 'Test' },
+  challenge: 'Y2hhbGxlbmdl',
+  pubKeyCredParams: [{ alg: -7, type: 'public-key' as const }],
+};
+
+const mockCredential = {
+  id: 'Y3JlZA',
+  rawId: 'Y3JlZA',
+  type: 'public-key' as const,
+  response: {
+    clientDataJSON: 'ZXlK',
+    attestationObject: 'bzJO',
+  },
+};
+
+function renderPage() {
+  const account = {
+    getCachedJwtByScope: jest.fn(() => 'mock-jwt'),
+  } as unknown as Account;
+
+  const authClient = {
+    beginPasskeyRegistration: mockBeginPasskeyRegistration,
+    completePasskeyRegistration: mockCompletePasskeyRegistration,
+  };
+
+  const alertBarInfo = {
+    success: mockAlertSuccess,
+    error: mockAlertError,
+    info: jest.fn(),
+    show: jest.fn(),
+    hide: jest.fn(),
+    setType: jest.fn(),
+    setContent: jest.fn(),
+    visible: false,
+    type: 'success' as const,
+    content: null,
+  };
+
+  return render(
+    <AppContext.Provider
+      value={mockAppContext({
+        account,
+        authClient: authClient as any,
+      })}
+    >
+      <SettingsContext.Provider
+        value={mockSettingsContext({
+          alertBarInfo: alertBarInfo as any,
+        })}
+      >
+        <MfaContext.Provider value="passkey">
+          <PagePasskeyAdd />
+        </MfaContext.Provider>
+      </SettingsContext.Provider>
+    </AppContext.Provider>
+  );
+}
+
+describe('PagePasskeyAdd', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+    mockBeginPasskeyRegistration.mockResolvedValue(mockCreationOptions);
+    mockCreateCredential.mockResolvedValue(mockCredential);
+    mockCompletePasskeyRegistration.mockResolvedValue({
+      credentialId: 'cred-1',
+      name: 'Test Passkey',
+      createdAt: Date.now(),
+      lastUsedAt: null,
+      transports: ['internal'],
+      aaguid: 'aaguid-1',
+      backupEligible: true,
+      backupState: false,
+      prfEnabled: false,
+    });
+  });
+
+  it('shows loading modal on mount', () => {
+    // Make the ceremony hang so we can see the modal
+    mockBeginPasskeyRegistration.mockReturnValue(new Promise(() => {}));
+    renderPage();
+    expect(screen.getByTestId('page-passkey-add')).toBeInTheDocument();
+    expect(screen.getByTestId('loading-spinner')).toBeInTheDocument();
+    expect(screen.getByText('Creating passkey…')).toBeInTheDocument();
+    expect(
+      screen.getByText('Follow the prompts on your device.')
+    ).toBeInTheDocument();
+    expect(screen.getByTestId('passkey-add-cancel')).toBeInTheDocument();
+  });
+
+  it('completes ceremony and shows success alert', async () => {
+    renderPage();
+    await waitFor(() => {
+      expect(mockAlertSuccess).toHaveBeenCalledWith('Passkey created');
+    });
+    expect(mockNavigateWithQuery).toHaveBeenCalledWith('/settings#security', {
+      replace: true,
+    });
+    expect(mockBeginPasskeyRegistration).toHaveBeenCalledWith('mock-jwt');
+    expect(mockCreateCredential).toHaveBeenCalledWith(mockCreationOptions);
+    expect(mockCompletePasskeyRegistration).toHaveBeenCalledWith(
+      'mock-jwt',
+      mockCredential,
+      'Y2hhbGxlbmdl'
+    );
+  });
+
+  it('handles user cancel (NotAllowedError)', async () => {
+    const cancelError = new DOMException('User cancelled', 'NotAllowedError');
+    mockCreateCredential.mockRejectedValue(cancelError);
+    mockHandleWebAuthnError.mockReturnValue({
+      category: WebAuthnErrorCategory.UserAction,
+      errorType: WebAuthnErrorType.NotAllowed,
+      userMessageKey: 'passkey-registration-error-not-allowed',
+      logToSentry: false,
+    });
+
+    renderPage();
+    await waitFor(() => {
+      expect(mockAlertError).toHaveBeenCalled();
+    });
+    expect(mockNavigateWithQuery).toHaveBeenCalledWith('/settings#security', {
+      replace: true,
+    });
+  });
+
+  it('handles timeout error', async () => {
+    const timeoutError = new DOMException('Timeout', 'TimeoutError');
+    mockCreateCredential.mockRejectedValue(timeoutError);
+    mockHandleWebAuthnError.mockReturnValue({
+      category: WebAuthnErrorCategory.UserAction,
+      errorType: WebAuthnErrorType.Timeout,
+      userMessageKey: 'passkey-registration-error-timeout',
+      logToSentry: false,
+    });
+
+    renderPage();
+    await waitFor(() => {
+      expect(mockAlertError).toHaveBeenCalled();
+    });
+    expect(mockNavigateWithQuery).toHaveBeenCalledWith('/settings#security', {
+      replace: true,
+    });
+  });
+
+  it('handles server error on beginPasskeyRegistration', async () => {
+    const serverError = new Error('Server error');
+    mockBeginPasskeyRegistration.mockRejectedValue(serverError);
+
+    renderPage();
+    await waitFor(() => {
+      expect(mockAlertError).toHaveBeenCalledWith(
+        'System not available. Try again later.'
+      );
+    });
+    expect(mockCaptureException).toHaveBeenCalledWith(serverError);
+    expect(mockNavigateWithQuery).toHaveBeenCalledWith('/settings#security', {
+      replace: true,
+    });
+  });
+
+  it('handles server error on completePasskeyRegistration', async () => {
+    const serverError = new Error('Completion failed');
+    mockCompletePasskeyRegistration.mockRejectedValue(serverError);
+
+    renderPage();
+    await waitFor(() => {
+      expect(mockAlertError).toHaveBeenCalledWith(
+        'System not available. Try again later.'
+      );
+    });
+    expect(mockCaptureException).toHaveBeenCalledWith(serverError);
+  });
+
+  it('cancel button navigates back to settings', () => {
+    mockBeginPasskeyRegistration.mockReturnValue(new Promise(() => {}));
+    renderPage();
+    fireEvent.click(screen.getByTestId('passkey-add-cancel'));
+    expect(mockNavigateWithQuery).toHaveBeenCalledWith('/settings#security', {
+      replace: true,
+    });
+  });
+});
diff --git a/packages/fxa-settings/src/components/Settings/PagePasskeyAdd/index.tsx b/packages/fxa-settings/src/components/Settings/PagePasskeyAdd/index.tsx
new file mode 100644
index 00000000000..ea6bc18ccde
--- /dev/null
+++ b/packages/fxa-settings/src/components/Settings/PagePasskeyAdd/index.tsx
@@ -0,0 +1,165 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+import React, { useCallback, useEffect, useRef } from 'react';
+import { RouteComponentProps } from '@reach/router';
+import * as Sentry from '@sentry/browser';
+
+import { SETTINGS_PATH } from '../../../constants';
+import { useNavigateWithQuery } from '../../../lib/hooks/useNavigateWithQuery';
+import { MfaReason } from '../../../lib/types';
+import {
+  useAccount,
+  useAlertBar,
+  useAuthClient,
+  useFtlMsgResolver,
+} from '../../../models';
+import { createCredential } from '../../../lib/passkeys/webauthn';
+import { handleWebAuthnError } from '../../../lib/passkeys/webauthn-errors';
+import { MfaGuard, useMfaErrorHandler } from '../MfaGuard';
+import LoadingSpinner from 'fxa-react/components/LoadingSpinner';
+import { FtlMsg } from 'fxa-react/lib/utils';
+
+export const MfaGuardPagePasskeyAdd = (_: RouteComponentProps) => {
+  return (
+    <MfaGuard requiredScope="passkey" reason={MfaReason.createPasskey}>
+      <PagePasskeyAdd />
+    </MfaGuard>
+  );
+};
+
+export const PagePasskeyAdd = () => {
+  const account = useAccount();
+  const authClient = useAuthClient();
+  const alertBar = useAlertBar();
+  const ftlMsgResolver = useFtlMsgResolver();
+  const navigateWithQuery = useNavigateWithQuery();
+  const handleMfaError = useMfaErrorHandler();
+
+  const ceremonyStarted = useRef(false);
+  const isMounted = useRef(true);
+
+  const navigateToSettings = useCallback(() => {
+    navigateWithQuery(SETTINGS_PATH + '#security', { replace: true });
+  }, [navigateWithQuery]);
+
+  const handleCancel = useCallback(() => {
+    navigateToSettings();
+  }, [navigateToSettings]);
+
+  useEffect(() => {
+    isMounted.current = true;
+    return () => {
+      isMounted.current = false;
+    };
+  }, []);
+
+  useEffect(() => {
+    if (ceremonyStarted.current) return;
+    ceremonyStarted.current = true;
+
+    const runCeremony = async () => {
+      try {
+        // Step 1: Get registration options from server
+        const jwt = account.getCachedJwtByScope('passkey');
+        const creationOptions = await authClient.beginPasskeyRegistration(jwt);
+        const challenge = creationOptions.challenge;
+
+        if (!isMounted.current) return;
+
+        // Step 2: Browser WebAuthn prompt
+        const credential = await createCredential(creationOptions);
+
+        if (!isMounted.current) return;
+
+        // Step 3: Complete registration with server
+        await authClient.completePasskeyRegistration(
+          jwt,
+          credential,
+          challenge
+        );
+
+        if (!isMounted.current) return;
+
+        // Success
+        alertBar.success(
+          ftlMsgResolver.getMsg('page-passkey-add-success', 'Passkey created')
+        );
+        navigateToSettings();
+      } catch (error) {
+        if (!isMounted.current) return;
+
+        // Check if MFA JWT expired
+        if (handleMfaError(error)) return;
+
+        // Check if WebAuthn error
+        if (error instanceof DOMException || error instanceof TypeError) {
+          const categorized = handleWebAuthnError(
+            error,
+            'registration',
+            Sentry.captureException
+          );
+          alertBar.error(
+            ftlMsgResolver.getMsg(
+              categorized.userMessageKey,
+              ftlMsgResolver.getMsg(
+                'page-passkey-add-error-system',
+                'System not available. Try again later.'
+              )
+            )
+          );
+          navigateToSettings();
+          return;
+        }
+
+        // Server error
+        Sentry.captureException(error);
+        alertBar.error(
+          ftlMsgResolver.getMsg(
+            'page-passkey-add-error-system',
+            'System not available. Try again later.'
+          )
+        );
+        navigateToSettings();
+      }
+    };
+
+    runCeremony();
+  }, [
+    account,
+    authClient,
+    alertBar,
+    ftlMsgResolver,
+    handleMfaError,
+    navigateToSettings,
+  ]);
+
+  return (
+    <div
+      className="max-w-lg mx-auto mt-6 p-10 tablet:my-10 flex flex-col items-center bg-white dark:bg-grey-700 shadow tablet:rounded-xl border border-transparent text-center"
+      data-testid="page-passkey-add"
+    >
+      <LoadingSpinner className="flex justify-center mb-6" />
+      <FtlMsg id="page-passkey-add-creating-heading">
+        <h2 className="text-xl font-bold mb-2">Creating passkey…</h2>
+      </FtlMsg>
+      <FtlMsg id="page-passkey-add-follow-prompts">
+        <p className="text-grey-400 dark:text-grey-200 mb-6">
+          Follow the prompts on your device.
+        </p>
+      </FtlMsg>
+      <FtlMsg id="page-passkey-add-cancel">
+        <button
+          onClick={handleCancel}
+          className="link-blue text-sm"
+          data-testid="passkey-add-cancel"
+        >
+          Cancel
+        </button>
+      </FtlMsg>
+    </div>
+  );
+};
+
+export default PagePasskeyAdd;
diff --git a/packages/fxa-settings/src/components/Settings/Security/index.stories.tsx b/packages/fxa-settings/src/components/Settings/Security/index.stories.tsx
index 11f2bc863b2..42374583353 100644
--- a/packages/fxa-settings/src/components/Settings/Security/index.stories.tsx
+++ b/packages/fxa-settings/src/components/Settings/Security/index.stories.tsx
@@ -6,10 +6,15 @@ import React from 'react';
 import { LocationProvider } from '@reach/router';
 import { Security } from '.';
 import { AppContext } from 'fxa-settings/src/models';
-import { mockAppContext } from 'fxa-settings/src/models/mocks';
+import {
+  mockAppContext,
+  mockSettingsContext,
+} from 'fxa-settings/src/models/mocks';
+import { SettingsContext } from 'fxa-settings/src/models/contexts/SettingsContext';
 import { Account } from '../../../models/Account';
 import { Meta } from '@storybook/react';
 import { withLocalization } from 'fxa-react/lib/storybooks';
+import { getDefault } from '../../../lib/config';
 
 export default {
   title: 'Components/Settings/Security',
@@ -17,16 +22,91 @@ export default {
   decorators: [withLocalization],
 } as Meta;
 
-const storyWithAccount = (account: Partial<Account>, storyName?: string) => {
-  const story = () => (
-    <LocationProvider>
-      <AppContext.Provider
-        value={mockAppContext({ account: account as Account })}
-      >
-        <Security />
-      </AppContext.Provider>
-    </LocationProvider>
-  );
+function initLocalAccount() {
+  const NS = '__fxa_storage';
+  const uid = 'abc123';
+  const accounts = {
+    [uid]: {
+      uid,
+      sessionToken: 'mock-session-token',
+      email: 'user@example.com',
+      verified: true,
+      lastLogin: Date.now(),
+    },
+  };
+  window.localStorage.setItem(`${NS}.accounts`, JSON.stringify(accounts));
+  window.localStorage.setItem(`${NS}.currentAccountUid`, JSON.stringify(uid));
+}
+
+const configWithPasskeys = {
+  ...getDefault(),
+  featureFlags: {
+    ...getDefault().featureFlags,
+    passkeyRegistrationEnabled: true,
+  },
+};
+
+const mockPasskeys = [
+  {
+    credentialId: 'passkey-1',
+    name: 'MacBook Pro',
+    createdAt: new Date('2026-01-01').getTime(),
+    lastUsedAt: new Date('2026-02-01').getTime(),
+    transports: ['internal'],
+    aaguid: 'aaguid-1',
+    backupEligible: false,
+    backupState: false,
+    prfEnabled: false,
+  },
+  {
+    credentialId: 'passkey-2',
+    name: 'iPhone 15',
+    createdAt: new Date('2025-12-01').getTime(),
+    lastUsedAt: new Date('2026-01-31').getTime(),
+    transports: ['internal', 'hybrid'],
+    aaguid: 'aaguid-2',
+    backupEligible: true,
+    backupState: true,
+    prfEnabled: false,
+  },
+];
+
+const storyWithAccount = (
+  account: Partial<Account>,
+  options?: {
+    storyName?: string;
+    passkeys?: boolean;
+    authClientOverrides?: Record<string, any>;
+  }
+) => {
+  const { storyName, passkeys, authClientOverrides } = options || {};
+  const authClient = passkeys
+    ? {
+        listPasskeys: () => Promise.resolve(mockPasskeys),
+        ...authClientOverrides,
+      }
+    : {};
+
+  const story = () => {
+    if (passkeys) initLocalAccount();
+    return (
+      <LocationProvider>
+        <AppContext.Provider
+          value={mockAppContext({
+            account: account as Account,
+            ...(passkeys && {
+              config: configWithPasskeys,
+              authClient: authClient as any,
+            }),
+          })}
+        >
+          <SettingsContext.Provider value={mockSettingsContext()}>
+            <Security />
+          </SettingsContext.Provider>
+        </AppContext.Provider>
+      </LocationProvider>
+    );
+  };
   if (storyName) story.storyName = storyName;
   return story;
 };
@@ -64,7 +144,7 @@ export const SecurityFeaturesEnabled = storyWithAccount(
       available: true,
     },
   },
-  'Account recovery key set and two factor enabled'
+  { storyName: 'Account recovery key set and two factor enabled' }
 );
 
 export const NoPassword = storyWithAccount(
@@ -76,5 +156,61 @@ export const NoPassword = storyWithAccount(
       hasBackupCodes: false,
     },
   },
-  'Third party auth, no password set'
+  { storyName: 'Third party auth, no password set' }
+);
+
+export const WithPasskeys = storyWithAccount(
+  {
+    recoveryKey: { exists: true },
+    totp: { verified: true, exists: true },
+    hasPassword: true,
+    passwordCreated: 1651860173938,
+    backupCodes: {
+      hasBackupCodes: true,
+      count: 5,
+    },
+    recoveryPhone: {
+      exists: true,
+      phoneNumber: '+1234567890',
+      nationalFormat: '123-456-7890',
+      available: true,
+    },
+  },
+  { storyName: 'All security features with passkeys enabled', passkeys: true }
+);
+
+export const WithPasskeysNoOtherMfa = storyWithAccount(
+  {
+    recoveryKey: { exists: false },
+    totp: { exists: false, verified: false },
+    hasPassword: true,
+    passwordCreated: 1651860173938,
+    backupCodes: {
+      hasBackupCodes: false,
+    },
+    recoveryPhone: {
+      exists: false,
+      phoneNumber: null,
+      nationalFormat: null,
+      available: true,
+    },
+  },
+  { storyName: 'Passkeys enabled, no other MFA', passkeys: true }
+);
+
+export const WithPasskeysEmpty = storyWithAccount(
+  {
+    recoveryKey: { exists: false },
+    totp: { exists: false, verified: false },
+    hasPassword: true,
+    passwordCreated: 1651860173938,
+    backupCodes: {
+      hasBackupCodes: false,
+    },
+  },
+  {
+    storyName: 'Passkeys enabled but none registered',
+    passkeys: true,
+    authClientOverrides: { listPasskeys: () => Promise.resolve([]) },
+  }
 );
diff --git a/packages/fxa-settings/src/components/Settings/Security/index.tsx b/packages/fxa-settings/src/components/Settings/Security/index.tsx
index f7e094f5767..5cfcf90bef4 100644
--- a/packages/fxa-settings/src/components/Settings/Security/index.tsx
+++ b/packages/fxa-settings/src/components/Settings/Security/index.tsx
@@ -7,7 +7,8 @@ import React, { forwardRef } from 'react';
 import UnitRowRecoveryKey from '../UnitRowRecoveryKey';
 import UnitRowTwoStepAuth from '../UnitRowTwoStepAuth';
 import { UnitRow } from '../UnitRow';
-import { useAccount } from '../../../models';
+import { useAccount, useConfig } from '../../../models';
+import UnitRowPasskey from '../UnitRowPasskey';
 import {
   FtlMsg,
   getLocalizedDate,
@@ -39,6 +40,7 @@ const PwdDate = ({ passwordCreated }: { passwordCreated: number }) => {
 
 export const Security = forwardRef<HTMLDivElement>((_, ref) => {
   const { passwordCreated, hasPassword } = useAccount();
+  const config = useConfig();
   const { l10n } = useLocalization();
   const localizedNotSet = l10n.getString('security-not-set', null, 'Not set');
 
@@ -83,6 +85,14 @@ export const Security = forwardRef<HTMLDivElement>((_, ref) => {
             )}
           </UnitRow>
         </Localized>
+
+        {config.featureFlags?.passkeysEnabled && (
+          <>
+            <hr className="unit-row-hr" />
+            <UnitRowPasskey />
+          </>
+        )}
+
         <hr className="unit-row-hr" />
 
         <UnitRowRecoveryKey />
diff --git a/packages/fxa-settings/src/components/Settings/SubRow/index.stories.tsx b/packages/fxa-settings/src/components/Settings/SubRow/index.stories.tsx
index f40bdc32a37..6cf5a25b5fc 100644
--- a/packages/fxa-settings/src/components/Settings/SubRow/index.stories.tsx
+++ b/packages/fxa-settings/src/components/Settings/SubRow/index.stories.tsx
@@ -135,10 +135,14 @@ export const BackupPhoneAvailableNoDelete: StoryFn = () => (
 export const PasskeyWithSync: StoryFn = () => (
   <PasskeySubRow
     passkey={{
-      id: '1',
+      credentialId: '1',
       name: 'MacBook Pro',
       createdAt: new Date('2026-01-01').getTime(),
-      lastUsed: new Date('2026-02-01').getTime(),
+      lastUsedAt: new Date('2026-02-01').getTime(),
+      transports: ['internal'],
+      aaguid: 'aaguid-1',
+      backupEligible: true,
+      backupState: true,
       prfEnabled: true,
     }}
   />
@@ -147,10 +151,14 @@ export const PasskeyWithSync: StoryFn = () => (
 export const PasskeyWithoutSync: StoryFn = () => (
   <PasskeySubRow
     passkey={{
-      id: '2',
+      credentialId: '2',
       name: 'iPhone 14 Pro',
       createdAt: new Date('2025-12-01').getTime(),
-      lastUsed: new Date('2026-01-31').getTime(),
+      lastUsedAt: new Date('2026-01-31').getTime(),
+      transports: ['hybrid'],
+      aaguid: 'aaguid-2',
+      backupEligible: true,
+      backupState: false,
       prfEnabled: false,
     }}
   />
@@ -159,9 +167,14 @@ export const PasskeyWithoutSync: StoryFn = () => (
 export const PasskeyNeverUsed: StoryFn = () => (
   <PasskeySubRow
     passkey={{
-      id: '3',
+      credentialId: '3',
       name: 'Windows PC',
       createdAt: new Date('2025-11-01').getTime(),
+      lastUsedAt: null,
+      transports: ['usb'],
+      aaguid: 'aaguid-3',
+      backupEligible: false,
+      backupState: false,
       prfEnabled: true,
     }}
   />
diff --git a/packages/fxa-settings/src/components/Settings/SubRow/index.test.tsx b/packages/fxa-settings/src/components/Settings/SubRow/index.test.tsx
index 495431f09c1..6dd245ebb00 100644
--- a/packages/fxa-settings/src/components/Settings/SubRow/index.test.tsx
+++ b/packages/fxa-settings/src/components/Settings/SubRow/index.test.tsx
@@ -15,7 +15,7 @@ import {
   MOCK_MASKED_NATIONAL_FORMAT_PHONE_NUMBER,
   MOCK_MASKED_PHONE_NUMBER_WITH_COPY,
 } from '../../../pages/mocks';
-import { PasskeyRowData } from '.';
+import { Passkey } from 'fxa-auth-client/browser';
 import { AppContext } from '../../../models';
 import { mockAppContext } from '../../../models/mocks';
 import { mockAuthClient } from './mock';
@@ -268,11 +268,15 @@ describe('BackupPhoneSubRow', () => {
 });
 
 describe('PasskeySubRow', () => {
-  const mockPasskey = {
-    id: 'passkey-1',
+  const mockPasskey: Passkey = {
+    credentialId: 'passkey-1',
     name: 'MacBook Pro',
     createdAt: new Date('2026-01-01').getTime(),
-    lastUsed: new Date('2026-02-01').getTime(),
+    lastUsedAt: new Date('2026-02-01').getTime(),
+    transports: ['internal'],
+    aaguid: 'aaguid-1',
+    backupEligible: true,
+    backupState: true,
     prfEnabled: true,
   };
 
@@ -285,7 +289,7 @@ describe('PasskeySubRow', () => {
   });
 
   const renderPasskeySubRow = (
-    passkey: PasskeyRowData = mockPasskey,
+    passkey: Passkey = mockPasskey,
     deletePasskey = mockDeletePasskey
   ) => {
     return render(
@@ -307,7 +311,7 @@ describe('PasskeySubRow', () => {
   });
 
   it('does not render last used date when not available', () => {
-    const passkeyWithoutLastUsed = { ...mockPasskey, lastUsed: undefined };
+    const passkeyWithoutLastUsed = { ...mockPasskey, lastUsedAt: null };
     renderPasskeySubRow(passkeyWithoutLastUsed);
     expect(screen.queryByText(/Last used:/)).not.toBeInTheDocument();
   });
diff --git a/packages/fxa-settings/src/components/Settings/SubRow/index.tsx b/packages/fxa-settings/src/components/Settings/SubRow/index.tsx
index 39fa6429a48..6e5f8620db3 100644
--- a/packages/fxa-settings/src/components/Settings/SubRow/index.tsx
+++ b/packages/fxa-settings/src/components/Settings/SubRow/index.tsx
@@ -4,6 +4,7 @@
 
 import React, { useCallback, useState } from 'react';
 import classNames from 'classnames';
+import { Passkey } from 'fxa-auth-client/browser';
 import { useAlertBar, useFtlMsgResolver } from '../../../models';
 import { MfaGuard } from '../MfaGuard';
 import { MfaReason } from '../../../lib/types';
@@ -342,19 +343,10 @@ export const BackupPhoneSubRow = ({
   );
 };
 
-export type PasskeyRowData = {
-  id: string;
-  name: string;
-  createdAt: number;
-  lastUsed?: number;
-  prfEnabled: boolean;
-};
-
 export type PasskeySubRowProps = {
-  passkey: PasskeyRowData;
-  // passing in as a prop for the sake of mocking.
+  passkey: Passkey;
   // TODO: replace with actual auth client API call
-  deletePasskey?: (passkeyId: string) => Promise<void>;
+  deletePasskey?: (credentialId: string) => Promise<void>;
 };
 
 const formatDateText = (timestamp: number): string => {
@@ -378,7 +370,7 @@ export const PasskeySubRow = ({
   const handleConfirmDelete = useCallback(async () => {
     setIsDeleting(true);
     try {
-      await deletePasskey(passkey.id);
+      await deletePasskey(passkey.credentialId);
       // a hack to avoid alert bar being immediately removed
       setTimeout(() => {
         alertBar.success(
@@ -399,7 +391,13 @@ export const PasskeySubRow = ({
       setIsDeleting(false);
       hideDeleteModal();
     }
-  }, [passkey.id, deletePasskey, alertBar, ftlMsgResolver, hideDeleteModal]);
+  }, [
+    passkey.credentialId,
+    deletePasskey,
+    alertBar,
+    ftlMsgResolver,
+    hideDeleteModal,
+  ]);
 
   const createdDateFluent = getLocalizedDate(
     passkey.createdAt,
@@ -408,12 +406,12 @@ export const PasskeySubRow = ({
 
   const createdDateText = formatDateText(passkey.createdAt);
 
-  const lastUsedDateFluent = passkey.lastUsed
-    ? getLocalizedDate(passkey.lastUsed, LocalizedDateOptions.NumericDate)
+  const lastUsedDateFluent = passkey.lastUsedAt
+    ? getLocalizedDate(passkey.lastUsedAt, LocalizedDateOptions.NumericDate)
     : undefined;
 
-  const lastUsedText = passkey.lastUsed
-    ? formatDateText(passkey.lastUsed)
+  const lastUsedText = passkey.lastUsedAt
+    ? formatDateText(passkey.lastUsedAt)
     : undefined;
 
   const localizedDescription = (
diff --git a/packages/fxa-settings/src/components/Settings/UnitRow/index.tsx b/packages/fxa-settings/src/components/Settings/UnitRow/index.tsx
index b787d11d9cf..7cfd887a6ad 100644
--- a/packages/fxa-settings/src/components/Settings/UnitRow/index.tsx
+++ b/packages/fxa-settings/src/components/Settings/UnitRow/index.tsx
@@ -207,7 +207,8 @@ export const UnitRow = ({
             route ||
             revealModal ||
             secondaryCtaRoute ||
-            revealSecondaryModal) && (
+            revealSecondaryModal ||
+            disabled) && (
             <div className="unit-row-actions @mobileLandscape/unitRow:flex-1 @mobileLandscape/unitRow:flex @mobileLandscape/unitRow:justify-end ">
               <div className="flex items-center h-8 gap-2 mt-4 @mobileLandscape/unitRow:mt-0 ">
                 {/* Primary Action */}
diff --git a/packages/fxa-settings/src/components/Settings/UnitRowPasskey/en.ftl b/packages/fxa-settings/src/components/Settings/UnitRowPasskey/en.ftl
index 2df5ed961cf..ee13fc5a440 100644
--- a/packages/fxa-settings/src/components/Settings/UnitRowPasskey/en.ftl
+++ b/packages/fxa-settings/src/components/Settings/UnitRowPasskey/en.ftl
@@ -17,4 +17,9 @@ passkey-row-max-limit-banner =
 # Tooltip shown on the disabled Create button when the passkey limit is reached
 passkey-row-max-limit-disabled-reason = You’ve reached the maximum number of passkeys.
 
+## Error / limit messages
+
+# Shown as an error banner when the user's browser or device does not support passkeys (WebAuthn Level 3).
+passkey-row-webauthn-not-supported = Your browser or device doesn’t support passkeys.
+
 ##
diff --git a/packages/fxa-settings/src/components/Settings/UnitRowPasskey/index.stories.tsx b/packages/fxa-settings/src/components/Settings/UnitRowPasskey/index.stories.tsx
index 01f99c8042f..e6c3fe7f825 100644
--- a/packages/fxa-settings/src/components/Settings/UnitRowPasskey/index.stories.tsx
+++ b/packages/fxa-settings/src/components/Settings/UnitRowPasskey/index.stories.tsx
@@ -7,10 +7,29 @@ import { Meta } from '@storybook/react';
 import { withLocalization } from 'fxa-react/lib/storybooks';
 import { LocationProvider } from '@reach/router';
 import UnitRowPasskey from '.';
-import { PasskeyRowData } from '../SubRow';
 import { AppContext } from 'fxa-settings/src/models';
-import { mockAppContext } from 'fxa-settings/src/models/mocks';
-import { initLocalAccount, mockAuthClient } from '../SubRow/mock';
+import {
+  mockAppContext,
+  mockSettingsContext,
+} from 'fxa-settings/src/models/mocks';
+import { SettingsContext } from 'fxa-settings/src/models/contexts/SettingsContext';
+import { Passkey } from 'fxa-auth-client/browser';
+
+function initLocalAccount() {
+  const NS = '__fxa_storage';
+  const uid = 'abc123';
+  const accounts = {
+    [uid]: {
+      uid,
+      sessionToken: 'mock-session-token',
+      email: 'user@example.com',
+      verified: true,
+      lastLogin: Date.now(),
+    },
+  };
+  window.localStorage.setItem(`${NS}.accounts`, JSON.stringify(accounts));
+  window.localStorage.setItem(`${NS}.currentAccountUid`, JSON.stringify(uid));
+}
 
 export default {
   title: 'Components/Settings/UnitRowPasskey',
@@ -18,39 +37,59 @@ export default {
   decorators: [withLocalization],
 } as Meta;
 
-const mockPasskeys = [
+const mockPasskeys: Passkey[] = [
   {
-    id: 'passkey-1',
+    credentialId: 'passkey-1',
     name: 'MacBook Pro',
     createdAt: new Date('2026-01-01').getTime(),
-    lastUsed: new Date('2026-02-01').getTime(),
+    lastUsedAt: new Date('2026-02-01').getTime(),
+    transports: ['internal'],
+    aaguid: 'aaguid-1',
+    backupEligible: false,
+    backupState: false,
     prfEnabled: false,
   },
   {
-    id: 'passkey-2',
+    credentialId: 'passkey-2',
     name: 'iPhone 15',
     createdAt: new Date('2025-12-01').getTime(),
-    lastUsed: new Date('2026-01-31').getTime(),
-    prfEnabled: true,
-  },
-  {
-    id: 'passkey-3',
-    name: 'Work Laptop',
-    createdAt: new Date('2025-11-01').getTime(),
-    lastUsed: undefined,
+    lastUsedAt: new Date('2026-01-31').getTime(),
+    transports: ['internal', 'hybrid'],
+    aaguid: 'aaguid-2',
+    backupEligible: true,
+    backupState: true,
     prfEnabled: false,
   },
 ];
 
-const storyWithPasskeys = (passkeys: PasskeyRowData[]) => {
+const storyWithMockPasskeys = (
+  passkeys: Passkey[],
+  { webAuthnSupported = true }: { webAuthnSupported?: boolean } = {}
+) => {
+  const authClient = {
+    listPasskeys: () => Promise.resolve(passkeys),
+  };
   const story = () => {
     initLocalAccount();
+    // Stub the WebAuthn Level 3 feature check for storybook previews.
+    const w = window as any;
+    if (webAuthnSupported) {
+      w.PublicKeyCredential = {
+        ...(w.PublicKeyCredential || {}),
+        parseCreationOptionsFromJSON: () => ({}),
+        parseRequestOptionsFromJSON: () => ({}),
+      };
+    } else {
+      delete w.PublicKeyCredential;
+    }
     return (
       <LocationProvider>
         <AppContext.Provider
-          value={mockAppContext({ authClient: mockAuthClient } as any)}
+          value={mockAppContext({ authClient: authClient as any })}
         >
-          <UnitRowPasskey passkeys={passkeys} />
+          <SettingsContext.Provider value={mockSettingsContext()}>
+            <UnitRowPasskey />
+          </SettingsContext.Provider>
         </AppContext.Provider>
       </LocationProvider>
     );
@@ -58,20 +97,26 @@ const storyWithPasskeys = (passkeys: PasskeyRowData[]) => {
   return story;
 };
 
-export const NoPasskeys = storyWithPasskeys([]);
-
-export const SinglePasskey = storyWithPasskeys([mockPasskeys[0]]);
+export const NoPasskeys = storyWithMockPasskeys([]);
 
-export const WithNeverUsedPasskey = storyWithPasskeys([mockPasskeys[2]]);
+export const SinglePasskey = storyWithMockPasskeys([mockPasskeys[0]]);
 
-export const MultiplePasskeys = storyWithPasskeys(mockPasskeys);
+export const MultiplePasskeys = storyWithMockPasskeys(mockPasskeys);
 
-export const AtMaxPasskeys = storyWithPasskeys(
+export const AtMaxPasskeys = storyWithMockPasskeys(
   Array.from({ length: 10 }, (_, i) => ({
-    id: `passkey-${i + 1}`,
+    credentialId: `passkey-${i + 1}`,
     name: `Passkey ${i + 1}`,
     createdAt: new Date('2026-01-01').getTime(),
-    lastUsed: new Date('2026-02-01').getTime(),
-    prfEnabled: i % 2 === 0,
+    lastUsedAt: new Date('2026-02-01').getTime(),
+    transports: ['internal'] as string[],
+    aaguid: `aaguid-${i + 1}`,
+    backupEligible: i % 2 === 0,
+    backupState: false,
+    prfEnabled: false,
   }))
 );
+
+export const WebAuthnNotSupported = storyWithMockPasskeys([], {
+  webAuthnSupported: false,
+});
diff --git a/packages/fxa-settings/src/components/Settings/UnitRowPasskey/index.test.tsx b/packages/fxa-settings/src/components/Settings/UnitRowPasskey/index.test.tsx
index 992cd2b60e1..30e1be127ae 100644
--- a/packages/fxa-settings/src/components/Settings/UnitRowPasskey/index.test.tsx
+++ b/packages/fxa-settings/src/components/Settings/UnitRowPasskey/index.test.tsx
@@ -3,59 +3,94 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 import React from 'react';
-import { screen } from '@testing-library/react';
+import { fireEvent, screen, waitFor } from '@testing-library/react';
 import { LocationProvider } from '@reach/router';
 import UnitRowPasskey from './index';
-import { PasskeyRowData } from '../SubRow';
 import { renderWithLocalizationProvider } from 'fxa-react/lib/test-utils/localizationProvider';
+import { Passkey } from 'fxa-auth-client/browser';
 
-const mockJwtState = {};
+const mockListPasskeys = jest.fn();
+
+jest.mock('../SubRow', () => ({
+  ...jest.requireActual('../SubRow'),
+  PasskeySubRow: ({ passkey }: { passkey: Passkey }) => {
+    return <div data-testid={`passkey-sub-row-${passkey.credentialId}`} />;
+  },
+}));
+
+jest.mock('../../../models', () => ({
+  ...jest.requireActual('../../../models'),
+  useFtlMsgResolver: () => ({
+    getMsg: (_id: string, fallback: string) => fallback,
+  }),
+  useAuthClient: () => ({
+    listPasskeys: mockListPasskeys,
+  }),
+}));
 
 jest.mock('../../../lib/cache', () => ({
   ...jest.requireActual('../../../lib/cache'),
   JwtTokenCache: {
     hasToken: jest.fn(() => true),
-    subscribe: jest.fn((listener) => {
-      return () => {}; // unsubscribe function
-    }),
-    getSnapshot: jest.fn(() => mockJwtState),
+    subscribe: jest.fn(() => () => {}),
+    getSnapshot: jest.fn(() => ({})),
   },
   sessionToken: jest.fn(() => 'session-123'),
 }));
 
-describe('UnitRowPasskey', () => {
-  const mockPasskeys: PasskeyRowData[] = [
-    {
-      id: 'passkey-1',
-      name: 'MacBook Pro',
-      createdAt: new Date('2026-01-01').getTime(),
-      lastUsed: new Date('2026-02-01').getTime(),
-      prfEnabled: true,
-    },
-    {
-      id: 'passkey-2',
-      name: 'iPhone 15',
-      createdAt: new Date('2025-12-01').getTime(),
-      lastUsed: new Date('2026-01-31').getTime(),
-      prfEnabled: false,
-    },
-  ];
+jest.mock('../../../lib/passkeys/webauthn', () => ({
+  isWebAuthnLevel3Supported: jest.fn(() => true),
+}));
+
+const { isWebAuthnLevel3Supported } = jest.requireMock(
+  '../../../lib/passkeys/webauthn'
+) as { isWebAuthnLevel3Supported: jest.Mock };
 
+const mockPasskeys: Passkey[] = [
+  {
+    credentialId: 'passkey-1',
+    name: 'MacBook Pro',
+    createdAt: new Date('2026-01-01').getTime(),
+    lastUsedAt: new Date('2026-02-01').getTime(),
+    transports: ['internal'],
+    aaguid: 'aaguid-1',
+    backupEligible: true,
+    backupState: true,
+    prfEnabled: false,
+  },
+  {
+    credentialId: 'passkey-2',
+    name: 'iPhone 15',
+    createdAt: new Date('2025-12-01').getTime(),
+    lastUsedAt: new Date('2026-01-31').getTime(),
+    transports: ['internal', 'hybrid'],
+    aaguid: 'aaguid-2',
+    backupEligible: false,
+    backupState: false,
+    prfEnabled: false,
+  },
+];
+
+describe('UnitRowPasskey', () => {
   beforeEach(() => {
     jest.clearAllMocks();
+    mockListPasskeys.mockResolvedValue(mockPasskeys);
+    isWebAuthnLevel3Supported.mockReturnValue(true);
   });
 
-  const renderUnitRowPasskey = (passkeys: PasskeyRowData[] = mockPasskeys) => {
+  const renderUnitRowPasskey = () => {
     return renderWithLocalizationProvider(
       <LocationProvider>
-        <UnitRowPasskey passkeys={passkeys} />
+        <UnitRowPasskey />
       </LocationProvider>
     );
   };
 
-  it('renders as expected', () => {
+  it('renders header and description', async () => {
     renderUnitRowPasskey();
-    expect(screen.getByText('Passkeys')).toBeInTheDocument();
+    await waitFor(() => {
+      expect(screen.getByText('Passkeys')).toBeInTheDocument();
+    });
     expect(
       screen.getByText(
         'Make sign in easier and more secure by using your phone or other supported device to get into your account.'
@@ -65,46 +100,78 @@ describe('UnitRowPasskey', () => {
       'href',
       'https://support.mozilla.org/kb/placeholder-article'
     );
-    expect(screen.getByRole('link', { name: 'Create' })).toHaveAttribute(
-      'href',
-      '/settings/passkeys/add'
-    );
   });
 
-  it('displays "Enabled" when passkeys exist', () => {
+  it('displays "Enabled" when passkeys exist', async () => {
     renderUnitRowPasskey();
-    expect(screen.getByText('Enabled')).toBeInTheDocument();
+    await waitFor(() => {
+      expect(screen.getByText('Enabled')).toBeInTheDocument();
+    });
   });
 
-  it('displays "Not set" when no passkeys exist', () => {
-    renderUnitRowPasskey([]);
-    expect(screen.getByText('Not set')).toBeInTheDocument();
+  it('displays "Not set" when no passkeys exist', async () => {
+    mockListPasskeys.mockResolvedValue([]);
+    renderUnitRowPasskey();
+    await waitFor(() => {
+      expect(screen.getByText('Not set')).toBeInTheDocument();
+    });
   });
 
-  it('renders all passkey sub-rows', () => {
+  it('shows create link when WebAuthn is supported', async () => {
     renderUnitRowPasskey();
-    expect(screen.getByText('MacBook Pro')).toBeInTheDocument();
-    expect(screen.getByText('iPhone 15')).toBeInTheDocument();
+    await waitFor(() => {
+      expect(screen.getByRole('link', { name: 'Create' })).toHaveAttribute(
+        'href',
+        '/settings/passkeys/add'
+      );
+    });
   });
 
-  it('does not show banner and Create is a link when below max', () => {
-    renderUnitRowPasskey(mockPasskeys);
-    expect(screen.queryByText(/You’ve used all/)).not.toBeInTheDocument();
-    expect(screen.getByRole('link', { name: 'Create' })).toBeInTheDocument();
+  it('shows a Create button (not a link) and no error banner until clicked when WebAuthn is not supported', async () => {
+    isWebAuthnLevel3Supported.mockReturnValue(false);
+    renderUnitRowPasskey();
+    await waitFor(() => {
+      expect(
+        screen.getByRole('button', { name: 'Create' })
+      ).toBeInTheDocument();
+    });
+    expect(
+      screen.queryByRole('link', { name: 'Create' })
+    ).not.toBeInTheDocument();
+    expect(
+      screen.queryByText('Your browser or device doesn’t support passkeys.')
+    ).not.toBeInTheDocument();
   });
 
-  it('shows warning banner and disabled Create button when at max passkeys', () => {
-    const atMaxPasskeys: PasskeyRowData[] = Array.from(
-      { length: 10 },
-      (_, i) => ({
-        id: `passkey-${i}`,
-        name: `Passkey ${i}`,
-        createdAt: new Date('2026-01-01').getTime(),
-        prfEnabled: false,
-      })
-    );
-    renderUnitRowPasskey(atMaxPasskeys);
-    expect(screen.getByText(/You’ve used all 10 passkeys/)).toBeInTheDocument();
+  it('reveals the error banner when the user clicks Create and WebAuthn is not supported', async () => {
+    isWebAuthnLevel3Supported.mockReturnValue(false);
+    renderUnitRowPasskey();
+    const createButton = await screen.findByRole('button', { name: 'Create' });
+    fireEvent.click(createButton);
+    expect(
+      screen.getByText('Your browser or device doesn’t support passkeys.')
+    ).toBeInTheDocument();
+  });
+
+  it('shows warning banner and disabled Create button when at max passkeys', async () => {
+    const atMaxPasskeys: Passkey[] = Array.from({ length: 10 }, (_, i) => ({
+      credentialId: `passkey-${i}`,
+      name: `Passkey ${i}`,
+      createdAt: new Date('2026-01-01').getTime(),
+      lastUsedAt: new Date('2026-02-01').getTime(),
+      transports: ['internal'],
+      aaguid: `aaguid-${i}`,
+      backupEligible: true,
+      backupState: false,
+      prfEnabled: false,
+    }));
+    mockListPasskeys.mockResolvedValue(atMaxPasskeys);
+    renderUnitRowPasskey();
+    await waitFor(() => {
+      expect(
+        screen.getByText(/You\u2019ve used all 10 passkeys/)
+      ).toBeInTheDocument();
+    });
     expect(screen.getByRole('button', { name: 'Create' })).toBeDisabled();
   });
 });
diff --git a/packages/fxa-settings/src/components/Settings/UnitRowPasskey/index.tsx b/packages/fxa-settings/src/components/Settings/UnitRowPasskey/index.tsx
index 6a6aa72a7e6..75b31d8f597 100644
--- a/packages/fxa-settings/src/components/Settings/UnitRowPasskey/index.tsx
+++ b/packages/fxa-settings/src/components/Settings/UnitRowPasskey/index.tsx
@@ -2,24 +2,49 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
-import React from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import UnitRow, { UnitRowProps } from '../UnitRow';
-import { useFtlMsgResolver, useConfig } from '../../../models';
+import { useAuthClient, useConfig, useFtlMsgResolver } from '../../../models';
 import { FtlMsg } from 'fxa-react/lib/utils';
 import LinkExternal from 'fxa-react/components/LinkExternal';
-import { PasskeySubRow, PasskeyRowData } from '../SubRow';
+import { PasskeySubRow } from '../SubRow';
+import { Passkey } from 'fxa-auth-client/browser';
+import { isWebAuthnLevel3Supported } from '../../../lib/passkeys/webauthn';
+import { sessionToken } from '../../../lib/cache';
 import { Banner } from '../../Banner';
 
-export type UnitRowPasskeyProps = {
-  passkeys?: PasskeyRowData[];
-};
-
-export const UnitRowPasskey = ({ passkeys = [] }: UnitRowPasskeyProps) => {
+export const UnitRowPasskey = () => {
   const ftlMsgResolver = useFtlMsgResolver();
+  const authClient = useAuthClient();
   const config = useConfig();
   const maxPasskeys = config.passkeys.maxPerUser;
+  const [passkeys, setPasskeys] = useState<Passkey[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [showWebAuthnError, setShowWebAuthnError] = useState(false);
+
+  const fetchPasskeys = useCallback(async () => {
+    const token = sessionToken();
+    if (!token) {
+      setLoading(false);
+      return;
+    }
+    try {
+      const result = await authClient.listPasskeys(token);
+      setPasskeys(result);
+    } catch {
+      // Silently fail — passkeys list will appear empty
+    } finally {
+      setLoading(false);
+    }
+  }, [authClient]);
+
+  useEffect(() => {
+    fetchPasskeys();
+  }, [fetchPasskeys]);
+
   const hasPasskeys = passkeys.length > 0;
   const isAtLimit = passkeys.length >= maxPasskeys;
+  const webAuthnSupported = isWebAuthnLevel3Supported();
 
   const conditionalUnitRowProps: Partial<UnitRowProps> = hasPasskeys
     ? {
@@ -36,7 +61,19 @@ export const UnitRowPasskey = ({ passkeys = [] }: UnitRowPasskeyProps) => {
 
   const getSubRows = () => (
     <>
-      {isAtLimit && (
+      {showWebAuthnError && (
+        <Banner
+          type="error"
+          className="mb-2"
+          content={{
+            localizedDescription: ftlMsgResolver.getMsg(
+              'passkey-row-webauthn-not-supported',
+              'Your browser or device doesn’t support passkeys.'
+            ),
+          }}
+        />
+      )}
+      {webAuthnSupported && isAtLimit && (
         <Banner
           type="warning"
           className="mb-2"
@@ -50,7 +87,7 @@ export const UnitRowPasskey = ({ passkeys = [] }: UnitRowPasskeyProps) => {
         />
       )}
       {passkeys.map((passkey) => (
-        <PasskeySubRow key={passkey.id} passkey={passkey} />
+        <PasskeySubRow key={passkey.credentialId} passkey={passkey} />
       ))}
     </>
   );
@@ -66,6 +103,10 @@ export const UnitRowPasskey = ({ passkeys = [] }: UnitRowPasskeyProps) => {
     </FtlMsg>
   );
 
+  if (loading) {
+    return <></>;
+  }
+
   return (
     <>
       <UnitRow
@@ -73,8 +114,13 @@ export const UnitRowPasskey = ({ passkeys = [] }: UnitRowPasskeyProps) => {
         headerId="passkeys"
         prefixDataTestId="passkey"
         ctaText={ftlMsgResolver.getMsg('passkey-row-action-create', 'Create')}
-        route="/settings/passkeys/add"
-        disabled={isAtLimit}
+        route={
+          webAuthnSupported && !isAtLimit ? '/settings/passkeys/add' : undefined
+        }
+        revealModal={
+          !webAuthnSupported ? () => setShowWebAuthnError(true) : undefined
+        }
+        disabled={webAuthnSupported && isAtLimit}
         disabledReason={ftlMsgResolver.getMsg(
           'passkey-row-max-limit-disabled-reason',
           "You've reached the maximum number of passkeys."
diff --git a/packages/fxa-settings/src/components/Settings/index.tsx b/packages/fxa-settings/src/components/Settings/index.tsx
index 0e1c2039e3c..305ccab7882 100644
--- a/packages/fxa-settings/src/components/Settings/index.tsx
+++ b/packages/fxa-settings/src/components/Settings/index.tsx
@@ -7,7 +7,7 @@ import * as Sentry from '@sentry/browser';
 import SettingsLayout from './SettingsLayout';
 import LoadingSpinner from 'fxa-react/components/LoadingSpinner';
 import AppErrorDialog from 'fxa-react/components/AppErrorDialog';
-import { useAccount, useAuthClient, useSession } from '../../models';
+import { useAccount, useAuthClient, useConfig, useSession } from '../../models';
 import {
   useAccountData,
   InvalidTokenError,
@@ -39,6 +39,7 @@ import { hasAccount, setCurrentAccount } from '../../lib/storage-utils';
 import GleanMetrics from '../../lib/glean';
 import Head from 'fxa-react/components/Head';
 import { PageMfaGuardRecoveryPhoneRemove } from './PageRecoveryPhoneRemove';
+import { MfaGuardPagePasskeyAdd } from './PagePasskeyAdd';
 import { SettingsIntegration } from './interfaces';
 import { useNavigateWithQuery } from '../../lib/hooks/useNavigateWithQuery';
 
@@ -50,6 +51,7 @@ export const Settings = ({
   const session = useSession();
   const authClient = useAuthClient();
   const account = useAccount();
+  const config = useConfig();
   const location = useLocation();
   const navigateWithQuery = useNavigateWithQuery();
   const [sessionVerified, setSessionVerified] = useState<boolean | undefined>();
@@ -224,6 +226,11 @@ export const Settings = ({
           <MfaGuardPageRecoveryPhoneSetup path="/recovery_phone/setup" />
           <PageMfaGuardRecoveryPhoneRemove path="/recovery_phone/remove" />
 
+          {config.featureFlags?.passkeysEnabled &&
+            config.featureFlags?.passkeyRegistrationEnabled && (
+              <MfaGuardPagePasskeyAdd path="/passkeys/add" />
+            )}
+
           <PageMfaGuardTestWithAuthClient path="/mfa_guard/test/auth_client" />
         </ScrollToTop>
       </Router>