diff --git a/packages/express/src/ThunderIDExpressClient.ts b/packages/express/src/ThunderIDExpressClient.ts
index ed79b2b8..b39dcb6f 100644
--- a/packages/express/src/ThunderIDExpressClient.ts
+++ b/packages/express/src/ThunderIDExpressClient.ts
@@ -44,10 +44,17 @@ class ThunderIDExpressClient<T extends ExpressClientConfig = ExpressClientConfig
   }
 
   public async getUserFromRequest(req: express.Request): Promise<User | undefined> {
-    const sessionId: string | undefined = req.cookies?.[this.getSessionCookieName()];
+    const cookies = req.cookies as Record<string, string | undefined> | undefined;
+    const sessionId: string | undefined = cookies?.[this.getSessionCookieName()];
     return this.getUser(sessionId);
   }
 
+  public async updateUserCredentialsFromRequest(req: express.Request, payload: Record<string, string>): Promise<void> {
+    const cookies = req.cookies as Record<string, string | undefined> | undefined;
+    const sessionId: string | undefined = cookies?.[this.getSessionCookieName()];
+    return this.updateUserCredentials(payload, sessionId);
+  }
+
   public override async signIn(
     req: express.Request,
     res: express.Response,
diff --git a/packages/express/src/__tests__/ThunderIDExpressClient.test.ts b/packages/express/src/__tests__/ThunderIDExpressClient.test.ts
new file mode 100644
index 00000000..b35b60dd
--- /dev/null
+++ b/packages/express/src/__tests__/ThunderIDExpressClient.test.ts
@@ -0,0 +1,32 @@
+// Copyright 2026 The ThunderID Authors
+// SPDX-License-Identifier: Apache-2.0
+
+import express from 'express';
+import {describe, it, expect, vi} from 'vitest';
+import ThunderIDExpressClient from '../ThunderIDExpressClient';
+
+describe('ThunderIDExpressClient', () => {
+  describe('updateUserCredentialsFromRequest', () => {
+    it('extracts session cookie and calls updateUserCredentials', async () => {
+      const client = new ThunderIDExpressClient();
+      await client.initialize({
+        baseUrl: 'https://auth.example.com',
+        clientId: 'test-client',
+      });
+
+      const updateCredentialsSpy = vi.spyOn(client, 'updateUserCredentials').mockResolvedValue(undefined);
+
+      const cookieName = client.getSessionCookieName();
+      const req = {
+        cookies: {
+          [cookieName]: 'session-cookie-123',
+        },
+      } as unknown as express.Request;
+
+      const payload = {password: 'new-password'};
+      await client.updateUserCredentialsFromRequest(req, payload);
+
+      expect(updateCredentialsSpy).toHaveBeenCalledWith(payload, 'session-cookie-123');
+    });
+  });
+});
diff --git a/packages/nextjs/src/ThunderIDNextClient.ts b/packages/nextjs/src/ThunderIDNextClient.ts
index b3759bc5..3aab4c10 100644
--- a/packages/nextjs/src/ThunderIDNextClient.ts
+++ b/packages/nextjs/src/ThunderIDNextClient.ts
@@ -21,6 +21,7 @@ import {
   generateFlattenedUserProfile,
   getUsersMe,
   getUsersMeMeta,
+  updateMeCredentials,
   updateMeProfile,
   resolveResourceEndpoint,
 } from '@thunderid/node';
@@ -202,6 +203,37 @@ class ThunderIDNextClient<T extends ThunderIDNextConfig = ThunderIDNextConfig> e
     }
   }
 
+  /**
+   * Updates one or more of the signed-in user's credentials (e.g. `password`, or any other
+   * attribute the user type schema declares `credential: true`).
+   *
+   * Not part of {@link ThunderIDJavaScriptClient}'s base surface — unlike `updateUserProfile`,
+   * no other SDK routes credential updates through a client method (React/Vue's
+   * `ChangeCredential` call the core `updateMeCredentials` function directly), so this is a
+   * Next.js-specific addition rather than an override. Kept here anyway so this SDK's own
+   * server actions have one consistent way to reach every `/users/me/*` operation.
+   *
+   * Deliberately does not catch and rewrap errors the way `updateUserProfile` does: the caller
+   * (`updateUserCredentialsAction`) needs the real `ThunderIDAPIError` instance, status code
+   * included, to map a failure onto the right form field before it crosses the server action
+   * boundary back to the client.
+   */
+  override async updateUserCredentials(payload: Record<string, string>, userId?: string): Promise<void> {
+    await this.ensureInitialized();
+
+    const configData: AuthClientConfig<T> = await this.getStorageManager().getConfigData();
+    const baseUrl: string | undefined = configData?.baseUrl;
+
+    await updateMeCredentials({
+      baseUrl,
+      url: resolveResourceEndpoint('usersMeCredentials', configData),
+      headers: {
+        Authorization: `Bearer ${await this.getAccessToken(userId)}`,
+      },
+      payload,
+    });
+  }
+
   override isLoading(): boolean {
     return false;
   }
diff --git a/packages/nextjs/src/client/components/presentation/ChangeCredential/ChangeCredential.tsx b/packages/nextjs/src/client/components/presentation/ChangeCredential/ChangeCredential.tsx
new file mode 100644
index 00000000..f73b43b5
--- /dev/null
+++ b/packages/nextjs/src/client/components/presentation/ChangeCredential/ChangeCredential.tsx
@@ -0,0 +1,149 @@
+// Copyright 2026 The ThunderID Authors
+// SPDX-License-Identifier: Apache-2.0
+
+'use client';
+
+import {CredentialConstants, PasswordPolicy, resolveChangeCredentialPolicy, supportsCredential} from '@thunderid/node';
+import {
+  BaseChangeCredential,
+  BaseChangeCredentialProps,
+  ChangePasswordValues,
+  useTranslation,
+  useUser,
+} from '@thunderid/react';
+import {FC, ReactElement, useMemo, useState} from 'react';
+import getSessionId from '../../../../server/actions/getSessionId';
+import updateUserCredentialsAction, {
+  UpdateUserCredentialsActionResult,
+} from '../../../../server/actions/updateUserCredentialsAction';
+import useThunderID from '../../../contexts/ThunderID/useThunderID';
+
+/**
+ * Title-cases a credential attribute name for use as a display-name fallback when the schema
+ * declares no `displayName` for it, e.g. `pin` -> `Pin`.
+ */
+const defaultDisplayName = (attribute: string): string => attribute.charAt(0).toUpperCase() + attribute.slice(1);
+
+/**
+ * Props for the ChangeCredential component.
+ * Mirrors `@thunderid/react`'s `ChangeCredentialProps` exactly, so a consumer moving between
+ * the React and Next.js SDKs doesn't need to change how they call it.
+ */
+export type ChangeCredentialProps = Omit<
+  BaseChangeCredentialProps,
+  'credentialDisplayName' | 'error' | 'fieldErrors' | 'loading' | 'onSubmit' | 'success'
+> & {
+  /**
+   * The credential attribute this instance manages, any attribute the user's entity type
+   * schema declares `credential: true` (for example `password` or `pin`). Defaults to
+   * `password`. Render the component once per credential to let a user manage more than one,
+   * for example `<ChangeCredential />` for the password and
+   * `<ChangeCredential attribute="pin" />` for a PIN.
+   */
+  attribute?: string;
+  /**
+   * Called after the credential has been changed successfully.
+   */
+  onSuccess?: () => void;
+};
+
+/**
+ * ChangeCredential lets the signed-in user set a new value for one of their own credentials.
+ *
+ * This is the Next.js-specific implementation: it uses `BaseChangeCredential` from
+ * `@thunderid/react` for rendering, but routes the write through
+ * `updateUserCredentialsAction` (a server action) instead of calling the ThunderID server
+ * directly from the browser, matching how `UserProfile` reaches `updateUserProfileAction`.
+ *
+ * Defaults to managing the `password` credential. To manage a different one (for example a
+ * PIN declared on the user type schema), set `attribute`; render the component once per
+ * credential to let a user manage several.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage, manages the password
+ * <ChangeCredential onSuccess={() => toast('Password updated')} />
+ *
+ * // Managing a different credential declared on the schema
+ * <ChangeCredential attribute="pin" />
+ * ```
+ */
+const ChangeCredential: FC<ChangeCredentialProps> = ({
+  attribute = CredentialConstants.PASSWORD,
+  onSuccess,
+  policy,
+  preferences,
+  ...rest
+}: ChangeCredentialProps): ReactElement => {
+  const {preferences: contextPreferences} = useThunderID();
+  const {userSchema} = useUser();
+  const resolvedDisplayName: string = userSchema?.[attribute]?.displayName ?? defaultDisplayName(attribute);
+
+  const resolvedPreferences = useMemo(
+    () => ({
+      ...contextPreferences,
+      ...preferences,
+      user: {...contextPreferences?.user, ...preferences?.user},
+    }),
+    [contextPreferences, preferences],
+  );
+  const {t} = useTranslation(resolvedPreferences?.i18n);
+
+  const [error, setError] = useState<string | null>(null);
+  const [fieldErrors, setFieldErrors] = useState<Record<string, string>>({});
+  const [loading, setLoading] = useState<boolean>(false);
+  const [success, setSuccess] = useState<boolean>(false);
+
+  const resolvedPolicy: PasswordPolicy = useMemo(
+    () => resolveChangeCredentialPolicy(userSchema, attribute, policy),
+    [userSchema, attribute, policy],
+  );
+
+  const handleSubmit = async ({newPassword}: ChangePasswordValues): Promise<void> => {
+    setError(null);
+    setFieldErrors({});
+    setSuccess(false);
+    setLoading(true);
+
+    const result: UpdateUserCredentialsActionResult = await updateUserCredentialsAction(
+      {[attribute]: newPassword},
+      await getSessionId(),
+    );
+
+    if (result.success) {
+      setSuccess(true);
+      onSuccess?.();
+    } else {
+      const text: string =
+        result.message ??
+        t(result.messageKey, {credential: resolvedDisplayName, credentialLower: resolvedDisplayName.toLowerCase()});
+
+      if (result.field) {
+        setFieldErrors({[result.field]: text});
+      } else {
+        setError(text);
+      }
+    }
+
+    setLoading(false);
+  };
+
+  return (
+    <BaseChangeCredential
+      {...rest}
+      credentialDisplayName={resolvedDisplayName}
+      error={error}
+      fieldErrors={fieldErrors}
+      loading={loading}
+      policy={resolvedPolicy}
+      preferences={resolvedPreferences}
+      success={success}
+      unavailable={!supportsCredential(userSchema, attribute)}
+      onSubmit={(values: ChangePasswordValues): void => {
+        void handleSubmit(values);
+      }}
+    />
+  );
+};
+
+export default ChangeCredential;
diff --git a/packages/nextjs/src/client/components/presentation/UserDropdown/UserDropdown.tsx b/packages/nextjs/src/client/components/presentation/UserDropdown/UserDropdown.tsx
index d11e8477..76cea9f0 100644
--- a/packages/nextjs/src/client/components/presentation/UserDropdown/UserDropdown.tsx
+++ b/packages/nextjs/src/client/components/presentation/UserDropdown/UserDropdown.tsx
@@ -36,6 +36,18 @@ export type UserDropdownProps = Omit<BaseUserDropdownProps, 'user' | 'onManagePr
    * When provided, this completely replaces the default dropdown rendering.
    */
   children?: (props: UserDropdownRenderProps) => ReactNode;
+  /**
+   * Called instead of opening the built-in "Manage Profile" popup when the "Manage Profile"
+   * menu item (see `manageProfileLabel`) is clicked. Use this when the app has its own
+   * profile/account page it wants to navigate to instead, for example with the router's
+   * `push()`.
+   *
+   * @example
+   * ```tsx
+   * <UserDropdown manageProfileLabel="Manage Account" onManageProfile={() => router.push('/account')} />
+   * ```
+   */
+  onManageProfile?: () => void;
   /**
    * Custom render function for the dropdown content.
    * When provided, this replaces just the dropdown content while keeping the trigger.
@@ -98,6 +110,7 @@ const UserDropdown: FC<UserDropdownProps> = ({
   children,
   renderTrigger,
   renderDropdown,
+  onManageProfile: onManageProfileOverride,
   onSignOut,
   ...rest
 }: UserDropdownProps): ReactElement => {
@@ -105,6 +118,10 @@ const UserDropdown: FC<UserDropdownProps> = ({
   const [isProfileOpen, setIsProfileOpen] = useState(false);
 
   const handleManageProfile = (): void => {
+    if (onManageProfileOverride) {
+      onManageProfileOverride();
+      return;
+    }
     setIsProfileOpen(true);
   };
 
@@ -134,7 +151,7 @@ const UserDropdown: FC<UserDropdownProps> = ({
     return (
       <>
         {children(renderProps)}
-        <UserProfile mode="popup" open={isProfileOpen} onOpenChange={setIsProfileOpen} />
+        {!onManageProfileOverride && <UserProfile mode="popup" open={isProfileOpen} onOpenChange={setIsProfileOpen} />}
       </>
     );
   }
@@ -157,7 +174,7 @@ const UserDropdown: FC<UserDropdownProps> = ({
           />
         )}
         {/* Note: renderDropdown would need BaseUserDropdown modifications to implement properly */}
-        <UserProfile mode="popup" open={isProfileOpen} onOpenChange={setIsProfileOpen} />
+        {!onManageProfileOverride && <UserProfile mode="popup" open={isProfileOpen} onOpenChange={setIsProfileOpen} />}
       </>
     );
   }
@@ -172,7 +189,9 @@ const UserDropdown: FC<UserDropdownProps> = ({
         onSignOut={handleSignOut}
         {...rest}
       />
-      {isProfileOpen && <UserProfile mode="popup" open={isProfileOpen} onOpenChange={setIsProfileOpen} />}
+      {!onManageProfileOverride && isProfileOpen && (
+        <UserProfile mode="popup" open={isProfileOpen} onOpenChange={setIsProfileOpen} />
+      )}
     </>
   );
 };
diff --git a/packages/nextjs/src/client/contexts/ThunderID/ThunderIDProvider.tsx b/packages/nextjs/src/client/contexts/ThunderID/ThunderIDProvider.tsx
index cb90eced..06a4f2f8 100644
--- a/packages/nextjs/src/client/contexts/ThunderID/ThunderIDProvider.tsx
+++ b/packages/nextjs/src/client/contexts/ThunderID/ThunderIDProvider.tsx
@@ -23,7 +23,6 @@ import {
   ThunderIDContext as ReactThunderIDContext,
   ThunderIDContextProps as ReactThunderIDContextProps,
   ThunderIDProviderProps,
-  getActiveTheme,
 } from '@thunderid/react';
 import {ReadonlyURLSearchParams} from 'next/dist/client/components/navigation.react-server';
 import {AppRouterInstance} from 'next/dist/shared/lib/app-router-context.shared-runtime';
@@ -405,7 +404,7 @@ const ThunderIDClientProvider: FC<PropsWithChildren<ThunderIDClientProviderProps
             initialMeta={initialMeta}
             fetchMeta={fetchMeta}
           >
-            <ThemeProvider theme={preferences?.theme?.overrides} mode={getActiveTheme(preferences?.theme?.mode as any)}>
+            <ThemeProvider theme={preferences?.theme?.overrides} mode={preferences?.theme?.mode}>
               <FlowProvider>
                 <UserProvider
                   profile={userProfile}
diff --git a/packages/nextjs/src/client/index.ts b/packages/nextjs/src/client/index.ts
index 9db02681..e844cb37 100644
--- a/packages/nextjs/src/client/index.ts
+++ b/packages/nextjs/src/client/index.ts
@@ -35,3 +35,6 @@ export type {UserAvatarProps} from './components/presentation/UserAvatar/UserAva
 
 export {default as UserProfile} from './components/presentation/UserProfile/UserProfile';
 export type {UserProfileProps} from './components/presentation/UserProfile/UserProfile';
+
+export {default as ChangeCredential} from './components/presentation/ChangeCredential/ChangeCredential';
+export type {ChangeCredentialProps} from './components/presentation/ChangeCredential/ChangeCredential';
diff --git a/packages/nextjs/src/server/actions/updateUserCredentialsAction.ts b/packages/nextjs/src/server/actions/updateUserCredentialsAction.ts
new file mode 100644
index 00000000..74fe8022
--- /dev/null
+++ b/packages/nextjs/src/server/actions/updateUserCredentialsAction.ts
@@ -0,0 +1,36 @@
+// Copyright 2026 The ThunderID Authors
+// SPDX-License-Identifier: Apache-2.0
+
+'use server';
+
+import {CredentialUpdateErrorResult, mapCredentialUpdateError} from '@thunderid/node';
+import getClient from '../getClient';
+
+export interface UpdateUserCredentialsActionResult extends CredentialUpdateErrorResult {
+  success: boolean;
+}
+
+/**
+ * Server action to update one of the signed-in user's own credentials (e.g. `password`).
+ *
+ * Never throws across the server action boundary — a thrown class instance loses its
+ * prototype chain crossing it, so `error instanceof ThunderIDAPIError` would no longer hold on
+ * the client. Instead, the real error is mapped to a field/message here, server-side, while it
+ * is still the genuine `ThunderIDAPIError` the core `updateMeCredentials` call threw, and only
+ * the plain, serializable result crosses back.
+ */
+const updateUserCredentialsAction = async (
+  payload: Record<string, string>,
+  sessionId?: string,
+): Promise<UpdateUserCredentialsActionResult> => {
+  try {
+    const client = getClient();
+    await client.updateUserCredentials(payload, sessionId);
+    return {field: null, messageKey: '', success: true};
+  } catch (error) {
+    const {field, message, messageKey}: CredentialUpdateErrorResult = mapCredentialUpdateError(error);
+    return {field, message, messageKey, success: false};
+  }
+};
+
+export default updateUserCredentialsAction;
diff --git a/packages/node/src/ThunderIDNodeClient.ts b/packages/node/src/ThunderIDNodeClient.ts
index 729c52d3..27622803 100644
--- a/packages/node/src/ThunderIDNodeClient.ts
+++ b/packages/node/src/ThunderIDNodeClient.ts
@@ -2,15 +2,18 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import {
-  ThunderIDJavaScriptClient,
-  ThunderIDAuthException,
+  AuthClientConfig,
   ExtendedAuthorizeRequestUrlParams,
   IdToken,
   OIDCEndpoints,
+  resolveResourceEndpoint,
   SessionData,
   Storage,
+  ThunderIDAuthException,
+  ThunderIDJavaScriptClient,
   TokenExchangeRequestConfig,
   TokenResponse,
+  updateMeCredentials,
   User,
 } from '@thunderid/javascript';
 import AuthURLCallback from './models/AuthURLCallback';
@@ -19,7 +22,7 @@ import MemoryCacheStore from './stores/MemoryCacheStore';
 import NodeCryptoUtils from './utils/NodeCryptoUtils';
 import SessionUtils from './utils/SessionUtils';
 
-class ThunderIDNodeClient<T = ThunderIDNodeConfig> extends ThunderIDJavaScriptClient<T> {
+class ThunderIDNodeClient<T extends ThunderIDNodeConfig = ThunderIDNodeConfig> extends ThunderIDJavaScriptClient<T> {
   private _nodeInstanceId = 0;
 
   public constructor(instanceId = 0) {
@@ -203,6 +206,24 @@ class ThunderIDNodeClient<T = ThunderIDNodeConfig> extends ThunderIDJavaScriptCl
   ): Promise<TokenResponse | Response | User> {
     return super.exchangeToken(config, userId);
   }
+
+  /**
+   * Updates one or more of the signed-in user's credentials (e.g. `password`, or any other
+   * attribute the user type schema declares `credential: true`).
+   */
+  public async updateUserCredentials(payload: Record<string, string>, userId?: string): Promise<void> {
+    const configData: AuthClientConfig<T> = await this.getStorageManager().getConfigData();
+    const baseUrl: string | undefined = configData?.baseUrl;
+
+    await updateMeCredentials({
+      baseUrl,
+      headers: {
+        Authorization: `Bearer ${await this.getAccessToken(userId)}`,
+      },
+      payload,
+      url: resolveResourceEndpoint('usersMeCredentials', configData),
+    });
+  }
 }
 
 export default ThunderIDNodeClient;
diff --git a/packages/node/src/__tests__/ThunderIDNodeClient.test.ts b/packages/node/src/__tests__/ThunderIDNodeClient.test.ts
new file mode 100644
index 00000000..a119dcce
--- /dev/null
+++ b/packages/node/src/__tests__/ThunderIDNodeClient.test.ts
@@ -0,0 +1,40 @@
+// Copyright 2026 The ThunderID Authors
+// SPDX-License-Identifier: Apache-2.0
+
+import * as thunderJS from '@thunderid/javascript';
+import {describe, it, expect, vi} from 'vitest';
+import ThunderIDNodeClient from '../ThunderIDNodeClient';
+
+vi.mock('@thunderid/javascript', async (importOriginal) => {
+  const actual = await importOriginal<typeof thunderJS>();
+  return {
+    ...actual,
+    updateMeCredentials: vi.fn().mockResolvedValue(undefined),
+  };
+});
+
+describe('ThunderIDNodeClient', () => {
+  describe('updateUserCredentials', () => {
+    it('calls updateMeCredentials with the correct payload and authorization header', async () => {
+      const client = new ThunderIDNodeClient();
+      await client.initialize({
+        baseUrl: 'https://auth.example.com',
+        clientId: 'test-client',
+      });
+
+      vi.spyOn(client, 'getAccessToken').mockResolvedValue('test-access-token');
+
+      const payload = {password: 'new-secure-password!'};
+      await client.updateUserCredentials(payload, 'user-123');
+
+      expect(thunderJS.updateMeCredentials).toHaveBeenCalledWith({
+        baseUrl: 'https://auth.example.com',
+        headers: {
+          Authorization: 'Bearer test-access-token',
+        },
+        payload,
+        url: undefined,
+      });
+    });
+  });
+});
diff --git a/packages/nuxt/src/module.ts b/packages/nuxt/src/module.ts
index 27d439d6..f2b90987 100644
--- a/packages/nuxt/src/module.ts
+++ b/packages/nuxt/src/module.ts
@@ -176,6 +176,11 @@ export default defineNuxtModule<ThunderIDNuxtConfig>({
         method: 'patch' as const,
         route: NuxtAPIRoutes.USER_PROFILE,
       },
+      {
+        handler: resolve('./runtime/server/routes/auth/user/credentials.patch'),
+        method: 'patch' as const,
+        route: NuxtAPIRoutes.USER_CREDENTIALS,
+      },
     ];
 
     serverRoutes.forEach((sr: ServerRoute): void => {
@@ -249,6 +254,7 @@ export default defineNuxtModule<ThunderIDNuxtConfig>({
     addComponent({filePath: resolve('./runtime/components/user/User'), name: 'User'});
     addComponent({filePath: resolve('./runtime/components/user/UserProfile'), name: 'UserProfile'});
     addComponent({filePath: resolve('./runtime/components/user/UserDropdown'), name: 'UserDropdown'});
+    addComponent({filePath: resolve('./runtime/components/user/ChangeCredential'), name: 'ChangeCredential'});
 
     // ── Auth callback ────────────────────────────────────────────────────────
     addComponent({filePath: resolve('./runtime/components/auth/Callback'), name: 'Callback'});
diff --git a/packages/nuxt/src/runtime/components/ThunderIDRoot.ts b/packages/nuxt/src/runtime/components/ThunderIDRoot.ts
index 311fcf09..8ef8736d 100644
--- a/packages/nuxt/src/runtime/components/ThunderIDRoot.ts
+++ b/packages/nuxt/src/runtime/components/ThunderIDRoot.ts
@@ -72,9 +72,8 @@ const ThunderIDRoot: Component = defineComponent({
     // Gate flags — mirror the same checks in thunderid-ssr.ts so client props
     // always agree with what the Nitro plugin decided to fetch server-side.
     const shouldFetchProfile: boolean = prefs?.user?.fetchUserProfile !== false;
-    // Defaults to 'light' — matches the Vue SDK's ThunderIDProvider, which
-    // passes no mode and therefore uses ThemeProvider's `DEFAULT_THEME`.
-    const themeMode: string = prefs?.theme?.mode ?? 'light';
+    // Defaults to 'class' so it dynamically detects theme classes (e.g. .dark) on document.documentElement.
+    const themeMode: string = prefs?.theme?.mode ?? 'class';
 
     // ── Callbacks ──────────────────────────────────────────────────────────
 
diff --git a/packages/nuxt/src/runtime/components/user/ChangeCredential.ts b/packages/nuxt/src/runtime/components/user/ChangeCredential.ts
new file mode 100644
index 00000000..60ca6e68
--- /dev/null
+++ b/packages/nuxt/src/runtime/components/user/ChangeCredential.ts
@@ -0,0 +1,168 @@
+// Copyright 2026 The ThunderID Authors
+// SPDX-License-Identifier: Apache-2.0
+
+import {
+  CredentialConstants,
+  resolveChangeCredentialPolicy,
+  supportsCredential,
+  withVendorCSSClassPrefix,
+  type CredentialUpdateErrorResult,
+  type PasswordPolicy,
+  type Preferences,
+} from '@thunderid/browser';
+import {BaseChangeCredential, type ChangePasswordValues, useI18n} from '@thunderid/vue';
+import {
+  type Component,
+  type ComputedRef,
+  type PropType,
+  type Ref,
+  type SetupContext,
+  type VNode,
+  computed,
+  defineComponent,
+  h,
+  ref,
+} from 'vue';
+import NuxtAPIRoutes from '../../constants/NuxtAPIRoutes';
+import {useUser} from '#imports';
+
+/**
+ * Title-cases a credential attribute name for use as a display-name fallback when the schema
+ * declares no `displayName` for it, e.g. `pin` -> `Pin`.
+ */
+const defaultDisplayName = (attribute: string): string => attribute.charAt(0).toUpperCase() + attribute.slice(1);
+
+interface UpdateUserCredentialsResult extends CredentialUpdateErrorResult {
+  success: boolean;
+}
+
+type ChangeCredentialProps = Readonly<{
+  attribute: string;
+  cardLayout: boolean;
+  className: string;
+  policy?: PasswordPolicy;
+  preferences?: Preferences;
+  showRequirements: boolean;
+  title?: string;
+}>;
+
+/**
+ * Nuxt-specific ChangeCredential container.
+ *
+ * Reads `userSchema` from `useUser()` (Nuxt auto-import, re-exported from `@thunderid/vue`) and
+ * delegates rendering to {@link BaseChangeCredential} from `@thunderid/vue`, same as
+ * `UserProfile` does for the profile form.
+ *
+ * The write itself goes through `PATCH /api/auth/user/credentials` (`NuxtAPIRoutes.
+ * USER_CREDENTIALS`) rather than calling the ThunderID server directly from the browser —
+ * matching `UserProfile`'s own `updateProfile`/`NuxtAPIRoutes.USER_PROFILE` round trip, and the
+ * same reason `ThunderIDRoot.ts`'s `fetchMeta` proxies flow metadata: the browser never talks
+ * to the ThunderID server directly, so no CORS configuration is required there.
+ *
+ * Preserves the same prop/event API as the Vue SDK's `ChangeCredential` component so consumers
+ * don't need to change their templates.
+ *
+ * @example
+ * ```vue
+ * <ChangeCredential @success="onPasswordUpdated" />
+ * <ChangeCredential attribute="pin" />
+ * ```
+ */
+const ChangeCredential: Component = defineComponent({
+  name: 'ChangeCredential',
+  props: {
+    attribute: {default: CredentialConstants.PASSWORD, type: String},
+    cardLayout: {default: false, type: Boolean},
+    className: {default: '', type: String},
+    policy: {default: undefined, type: Object as PropType<PasswordPolicy>},
+    preferences: {default: undefined, type: Object as PropType<Preferences>},
+    showRequirements: {default: true, type: Boolean},
+    title: {default: undefined, type: String},
+  },
+  emits: ['success'],
+  setup(props: ChangeCredentialProps, {emit}: SetupContext): () => VNode {
+    const {userSchema} = useUser();
+    const {t} = useI18n();
+
+    const resolvedDisplayName: ComputedRef<string> = computed(
+      () => userSchema?.value?.[props.attribute]?.displayName ?? defaultDisplayName(props.attribute),
+    );
+
+    const error: Ref<string | null> = ref<string | null>(null);
+    const fieldErrors: Ref<Record<string, string>> = ref<Record<string, string>>({});
+    const loading: Ref<boolean> = ref(false);
+    const success: Ref<boolean> = ref(false);
+
+    const resolvedPolicy: ComputedRef<PasswordPolicy> = computed(() =>
+      resolveChangeCredentialPolicy(userSchema?.value, props.attribute, props.policy),
+    );
+
+    async function handleSubmit({newPassword}: ChangePasswordValues): Promise<void> {
+      error.value = null;
+      fieldErrors.value = {};
+      success.value = false;
+      loading.value = true;
+
+      try {
+        const result: UpdateUserCredentialsResult = await $fetch(NuxtAPIRoutes.USER_CREDENTIALS, {
+          body: {payload: {[props.attribute]: newPassword}},
+          method: 'PATCH',
+        });
+
+        if (result.success) {
+          success.value = true;
+          emit('success');
+        } else {
+          const text: string =
+            result.message ??
+            t(result.messageKey, {
+              credential: resolvedDisplayName.value,
+              credentialLower: resolvedDisplayName.value.toLowerCase(),
+            });
+
+          if (result.field) {
+            fieldErrors.value = {[result.field]: text};
+          } else {
+            error.value = text;
+          }
+        }
+      } catch (caughtError: unknown) {
+        // The Nitro route itself failed to respond (network error, session expired outright),
+        // as opposed to the credential write it performed failing — that case resolves with
+        // `success: false` above instead of throwing.
+        error.value =
+          caughtError instanceof Error && caughtError.message
+            ? caughtError.message
+            : t('user.change_password.generic.error', {
+                credential: resolvedDisplayName.value,
+                credentialLower: resolvedDisplayName.value.toLowerCase(),
+              });
+      } finally {
+        loading.value = false;
+      }
+    }
+
+    return (): VNode =>
+      h(BaseChangeCredential, {
+        cardLayout: props.cardLayout,
+        class: withVendorCSSClassPrefix('change-credential--styled'),
+        className: props.className,
+        credentialDisplayName: resolvedDisplayName.value,
+        error: error.value,
+        fieldErrors: fieldErrors.value,
+        loading: loading.value,
+        onSubmit: (values: ChangePasswordValues): void => {
+          void handleSubmit(values);
+        },
+        policy: resolvedPolicy.value,
+        preferences: props.preferences,
+        showRequirements: props.showRequirements,
+        success: success.value,
+        t,
+        title: props.title,
+        unavailable: !supportsCredential(userSchema?.value, props.attribute),
+      });
+  },
+});
+
+export default ChangeCredential;
diff --git a/packages/nuxt/src/runtime/components/user/UserDropdown.ts b/packages/nuxt/src/runtime/components/user/UserDropdown.ts
index 8c282102..1b5a4d6b 100644
--- a/packages/nuxt/src/runtime/components/user/UserDropdown.ts
+++ b/packages/nuxt/src/runtime/components/user/UserDropdown.ts
@@ -2,8 +2,8 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import {withVendorCSSClassPrefix} from '@thunderid/browser';
-import {BaseUserDropdown, UserProfile as UserProfileComponent} from '@thunderid/vue';
-import {type Component, type Ref, type VNode, defineComponent, h, ref} from 'vue';
+import {BaseUserDropdown, type DropdownMenuItem, UserProfile as UserProfileComponent} from '@thunderid/vue';
+import {type Component, type PropType, type Ref, type VNode, defineComponent, h, ref} from 'vue';
 import {useThunderID, useUser} from '#imports';
 
 /**
@@ -19,9 +19,9 @@ import {useThunderID, useUser} from '#imports';
  * The embedded profile modal renders the Nuxt-specific `UserProfile` so that
  * profile update handlers are also wired through the Nuxt auto-import layer.
  *
- * @example
+ * @example With a custom account page instead of the built-in profile popup
  * ```vue
- * <UserDropdown />
+ * <UserDropdown :menu-items="menuItems" profile-label="Manage Account" :on-manage-profile="() => router.push('/account')" />
  * ```
  */
 const UserDropdown: Component = defineComponent({
@@ -29,8 +29,31 @@ const UserDropdown: Component = defineComponent({
   name: 'UserDropdown',
   props: {
     className: {default: '', type: String},
+    menuAlign: {default: 'auto', type: String as PropType<'auto' | 'left' | 'right'>},
+    menuItems: {default: () => [], type: Array as PropType<DropdownMenuItem[]>},
+    /**
+     * Called instead of opening the built-in profile popup when the profile menu item is
+     * clicked. Use this when the app has its own account page to navigate to.
+     */
+    onManageProfile: {default: undefined, type: Function as PropType<() => void>},
+    profileLabel: {default: 'Profile', type: String},
+    showChevron: {default: true, type: Boolean},
+    showTriggerLabel: {default: false, type: Boolean},
+    size: {default: 'md', type: String as PropType<'sm' | 'md' | 'lg'>},
   },
-  setup(props: {className: string}, {slots, emit}: {emit: any; slots: any}): () => VNode | VNode[] | null {
+  setup(
+    props: Readonly<{
+      className: string;
+      menuAlign: 'auto' | 'left' | 'right';
+      menuItems: DropdownMenuItem[];
+      onManageProfile?: () => void;
+      profileLabel: string;
+      showChevron: boolean;
+      showTriggerLabel: boolean;
+      size: 'sm' | 'md' | 'lg';
+    }>,
+    {slots, emit}: {emit: any; slots: any},
+  ): () => VNode | VNode[] | null {
     const {user, signOut} = useThunderID();
     const {revalidateProfile} = useUser();
     const isProfileModalOpen: Ref<boolean> = ref(false);
@@ -42,7 +65,13 @@ const UserDropdown: Component = defineComponent({
           class: withVendorCSSClassPrefix('user-dropdown--styled'),
           className: props.className,
           isProfileModalOpen: isProfileModalOpen.value,
+          menuAlign: props.menuAlign,
+          menuItems: props.menuItems,
           onProfileClick: (): void => {
+            if (props.onManageProfile) {
+              props.onManageProfile();
+              return;
+            }
             isProfileModalOpen.value = true;
             void revalidateProfile();
             emit('profileClick');
@@ -58,12 +87,17 @@ const UserDropdown: Component = defineComponent({
           // Nuxt UserProfile container; UserProfileComponent from @thunderid/vue
           // reads its data from the OrganizationProvider / UserProvider context
           // wired up by ThunderIDRoot, so it works identically.
-          profileContent: isProfileModalOpen.value
-            ? h(UserProfileComponent, {
-                cardLayout: false,
-                editable: true,
-              })
-            : null,
+          profileContent:
+            !props.onManageProfile && isProfileModalOpen.value
+              ? h(UserProfileComponent, {
+                  cardLayout: false,
+                  editable: true,
+                })
+              : null,
+          profileLabel: props.profileLabel,
+          showChevron: props.showChevron,
+          showTriggerLabel: props.showTriggerLabel,
+          size: props.size,
           user: user.value,
         },
         slots,
diff --git a/packages/nuxt/src/runtime/components/user/UserProfile.ts b/packages/nuxt/src/runtime/components/user/UserProfile.ts
index 892a3fd0..5648fec1 100644
--- a/packages/nuxt/src/runtime/components/user/UserProfile.ts
+++ b/packages/nuxt/src/runtime/components/user/UserProfile.ts
@@ -1,7 +1,7 @@
 // Copyright 2025 The ThunderID Authors
 // SPDX-License-Identifier: Apache-2.0
 
-import {withVendorCSSClassPrefix} from '@thunderid/browser';
+import {deepMerge, withVendorCSSClassPrefix} from '@thunderid/browser';
 import {BaseUserProfile} from '@thunderid/vue';
 import {type Component, type PropType, type SetupContext, type VNode, defineComponent, h} from 'vue';
 import {useUser} from '#imports';
@@ -44,6 +44,30 @@ const UserProfile: Component = defineComponent({
   ): () => VNode {
     const {flattenedProfile, profile, updateProfile, userSchema} = useUser();
 
+    // `BaseUserProfile` saves one field at a time (`onUpdate({fieldName: value})`), but
+    // `PATCH /api/auth/user/profile` -> the backend's `PUT /users/me` validates the submitted
+    // attributes against the full schema, including fields the caller didn't touch. Merge the
+    // edited field onto the rest of the stored profile before sending, the same way
+    // `@thunderid/react`'s and `@thunderid/vue`'s own `UserProfile` containers do, so a
+    // single-field edit doesn't get rejected for omitting every other required attribute.
+    async function handleProfileUpdate(payload: Record<string, unknown>): Promise<void> {
+      if (!updateProfile) return;
+
+      const rawProfile = (profile?.value?.profile ?? profile?.value) as Record<string, unknown> | undefined;
+      const updatedAttributes: Record<string, unknown> = deepMerge(
+        (rawProfile?.attributes as Record<string, unknown>) ?? {},
+        payload,
+      );
+
+      Object.keys(updatedAttributes).forEach((key) => {
+        if (updatedAttributes[key] === undefined || updatedAttributes[key] === null) {
+          delete updatedAttributes[key];
+        }
+      });
+
+      await updateProfile({payload: updatedAttributes} as any);
+    }
+
     return (): VNode =>
       h(
         BaseUserProfile,
@@ -54,8 +78,8 @@ const UserProfile: Component = defineComponent({
           editable: props.editable,
           flattenedProfile: flattenedProfile?.value,
           hideFields: props.hideFields,
-          onUpdate: updateProfile,
-          profile: profile?.value,
+          onUpdate: updateProfile ? handleProfileUpdate : undefined,
+          profile: profile?.value?.profile ?? flattenedProfile?.value,
           showFields: props.showFields,
           title: props.title,
           userSchema: userSchema?.value,
diff --git a/packages/nuxt/src/runtime/constants/NuxtAPIRoutes.ts b/packages/nuxt/src/runtime/constants/NuxtAPIRoutes.ts
index de08edbe..3df666de 100644
--- a/packages/nuxt/src/runtime/constants/NuxtAPIRoutes.ts
+++ b/packages/nuxt/src/runtime/constants/NuxtAPIRoutes.ts
@@ -25,6 +25,7 @@ const NuxtAPIRoutes: {
   SIGN_UP: string;
   TOKEN: string;
   USER: string;
+  USER_CREDENTIALS: string;
   USER_PROFILE: string;
 } = {
   /** Resolves the OAuth callback and completes sign-in. */
@@ -43,6 +44,8 @@ const NuxtAPIRoutes: {
   TOKEN: '/api/auth/token',
   /** Returns the current user object. */
   USER: '/api/auth/user',
+  /** Updates (PATCH) one of the signed-in user's own credentials, e.g. `password`. */
+  USER_CREDENTIALS: '/api/auth/user/credentials',
   /** Fetches (GET) and updates (PATCH) the user profile. */
   USER_PROFILE: '/api/auth/user/profile',
 } as const;
diff --git a/packages/nuxt/src/runtime/server/ThunderIDNuxtClient.ts b/packages/nuxt/src/runtime/server/ThunderIDNuxtClient.ts
index f55f5bf7..47d0f249 100644
--- a/packages/nuxt/src/runtime/server/ThunderIDNuxtClient.ts
+++ b/packages/nuxt/src/runtime/server/ThunderIDNuxtClient.ts
@@ -11,6 +11,7 @@ import {
   getUsersMeMeta,
   isEmpty,
   resolveResourceEndpoint,
+  updateMeCredentials,
   updateMeProfile,
   type AttributeSchema,
   type AuthClientConfig,
@@ -244,6 +245,28 @@ class ThunderIDNuxtClient extends ThunderIDNodeClient<ThunderIDNuxtConfig> {
     }
   }
 
+  /**
+   * Updates one or more of the signed-in user's credentials (e.g. `password`, or any other
+   * attribute the user type schema declares `credential: true`).
+   *
+   * Deliberately does not catch and rewrap errors the way `updateUserProfile` does: the caller
+   * (the `PATCH /api/auth/user/credentials` Nitro route) needs the real `ThunderIDAPIError`
+   * instance, status code included, to map a failure onto the right form field.
+   */
+  async updateUserCredentials(payload: Record<string, string>, sessionId?: string): Promise<void> {
+    const configData: AuthClientConfig<ThunderIDNuxtConfig> = await this.getStorageManager().getConfigData();
+    const baseUrl: string | undefined = configData?.baseUrl;
+
+    await updateMeCredentials({
+      baseUrl,
+      url: resolveResourceEndpoint('usersMeCredentials', configData),
+      headers: {
+        Authorization: `Bearer ${await this.getAccessToken(sessionId)}`,
+      },
+      payload,
+    });
+  }
+
   async getUserSchema(sessionId?: string): Promise<Record<string, AttributeSchema> | null> {
     const configData: AuthClientConfig<ThunderIDNuxtConfig> = await this.getStorageManager().getConfigData();
     const baseUrl: string | undefined = configData?.baseUrl;
diff --git a/packages/nuxt/src/runtime/server/routes/auth/user/credentials.patch.ts b/packages/nuxt/src/runtime/server/routes/auth/user/credentials.patch.ts
new file mode 100644
index 00000000..3f7bcdca
--- /dev/null
+++ b/packages/nuxt/src/runtime/server/routes/auth/user/credentials.patch.ts
@@ -0,0 +1,64 @@
+// Copyright 2026 The ThunderID Authors
+// SPDX-License-Identifier: Apache-2.0
+
+import type {CredentialUpdateErrorResult} from '@thunderid/node';
+import {mapCredentialUpdateError} from '@thunderid/node';
+import {defineEventHandler, readBody, createError} from 'h3';
+import type {H3Event} from 'h3';
+import ThunderIDNuxtClient from '../../../ThunderIDNuxtClient';
+import {verifyAndRehydrateSession} from '../../../utils/serverSession';
+import {useRuntimeConfig} from '#imports';
+
+export interface UpdateUserCredentialsResult extends CredentialUpdateErrorResult {
+  success: boolean;
+}
+
+interface UpdateUserCredentialsBody {
+  payload: Record<string, string>;
+}
+
+/**
+ * PATCH /api/auth/user/credentials
+ *
+ * Updates one of the signed-in user's own credentials (e.g. `password`). Mirrors the
+ * `updateUserCredentialsAction` Next.js server action.
+ *
+ * Request body: `{ payload: Record<string, string> }` — `payload` is keyed by credential attribute
+ * (e.g. `{ password: "n3wP@ssword!" }`), the same shape `updateMeCredentials`'s own `payload` takes.
+ *
+ * Response: `{ success: boolean; field: 'newPassword' | null; message?: string; messageKey: string }`.
+ * Always resolves 200, even on a failed credential write — the failure is carried in the body
+ * (`success: false` plus `field`/`message`/`messageKey`, from {@link mapCredentialUpdateError})
+ * rather than the HTTP status, so `<ChangeCredential />`'s client component can attach the
+ * error to the right form field without needing to parse a thrown H3 error. A `401` here means
+ * the caller's own session is invalid, not that the new credential was rejected — that one
+ * still throws, same as every other route in this file.
+ */
+export default defineEventHandler(async (event: H3Event): Promise<UpdateUserCredentialsResult> => {
+  const config: ReturnType<typeof useRuntimeConfig> = useRuntimeConfig();
+  const sessionSecret: string | undefined = config.thunderid?.sessionSecret;
+
+  const session: Awaited<ReturnType<typeof verifyAndRehydrateSession>> = await verifyAndRehydrateSession(
+    event,
+    sessionSecret,
+  );
+  if (!session) {
+    throw createError({statusCode: 401, statusMessage: 'Unauthorized: Invalid or expired session.'});
+  }
+
+  let body: UpdateUserCredentialsBody;
+  try {
+    body = await readBody<UpdateUserCredentialsBody>(event);
+  } catch {
+    throw createError({statusCode: 400, statusMessage: 'Invalid request body.'});
+  }
+
+  try {
+    const client: ThunderIDNuxtClient = ThunderIDNuxtClient.getInstance();
+    await client.updateUserCredentials(body.payload, session.sessionId);
+    return {field: null, messageKey: '', success: true};
+  } catch (error) {
+    const {field, message, messageKey}: CredentialUpdateErrorResult = mapCredentialUpdateError(error);
+    return {field, message, messageKey, success: false};
+  }
+});
diff --git a/packages/nuxt/tests/unit/thunderid-ssr.test.ts b/packages/nuxt/tests/unit/thunderid-ssr.test.ts
index 080bb4ac..5635afe4 100644
--- a/packages/nuxt/tests/unit/thunderid-ssr.test.ts
+++ b/packages/nuxt/tests/unit/thunderid-ssr.test.ts
@@ -168,13 +168,13 @@ describe('thunderid-ssr Nitro plugin', () => {
 
   it('sets isSignedIn:false when no session cookie is present', async () => {
     const event = await callHandler('/');
-    expect(event.context.thunderid).toEqual({session: null, isSignedIn: false});
+    expect(event.context.thunderid).toEqual({flowMeta: null, isSignedIn: false, session: null});
   });
 
   it('sets isSignedIn:false when session token verification fails', async () => {
     vi.mocked(verifySessionToken).mockRejectedValueOnce(new Error('invalid token'));
     const event = await callHandler('/', 'bad-token-value');
-    expect(event.context.thunderid).toEqual({session: null, isSignedIn: false});
+    expect(event.context.thunderid).toEqual({flowMeta: null, isSignedIn: false, session: null});
   });
 
   // ── Authenticated — full SSR data ────────────────────────────────────────
diff --git a/packages/react/src/contexts/Theme/ThemeProvider.tsx b/packages/react/src/contexts/Theme/ThemeProvider.tsx
index 3604c649..44a2b995 100644
--- a/packages/react/src/contexts/Theme/ThemeProvider.tsx
+++ b/packages/react/src/contexts/Theme/ThemeProvider.tsx
@@ -1,7 +1,17 @@
 // Copyright 2026 The ThunderID Authors
 // SPDX-License-Identifier: Apache-2.0
 
-import {createTheme, Theme, ThemeConfig, ThemeMode, RecursivePartial, FlowMetaTheme} from '@thunderid/browser';
+import {
+  createClassObserver,
+  createMediaQueryListener,
+  createTheme,
+  detectThemeMode,
+  FlowMetaTheme,
+  RecursivePartial,
+  Theme,
+  ThemeConfig,
+  ThemeMode,
+} from '@thunderid/browser';
 import {FC, PropsWithChildren, ReactElement, useCallback, useContext, useEffect, useMemo, useState} from 'react';
 import ThemeContext from './ThemeContext';
 import applyThemeToDOM from '../../utils/applyThemeToDOM';
@@ -53,6 +63,7 @@ export interface ThemeProviderProps {
  */
 const ThemeProvider: FC<PropsWithChildren<ThemeProviderProps>> = ({
   children,
+  mode,
   theme: themeOverrideProp,
 }: PropsWithChildren<ThemeProviderProps>): ReactElement => {
   const themeOverride: RecursivePartial<ThemeConfig> | undefined = normalizeThemeConfig(themeOverrideProp);
@@ -62,15 +73,47 @@ const ThemeProvider: FC<PropsWithChildren<ThemeProviderProps>> = ({
   const isLoading: boolean = flowMetaContext?.isLoading ?? false;
   const error: Error | null = flowMetaContext?.error ?? null;
 
-  // Seed the color scheme from the server's defaultColorScheme; allow local toggling.
-  const [colorScheme, setColorScheme] = useState<'light' | 'dark'>(() => flowMetaTheme?.defaultColorScheme ?? 'light');
+  // Seed the color scheme: a fixed mode wins outright, 'system'/'class' detect it from the
+  // environment via the same shared utilities Vue's ThemeProvider uses, and no mode falls back
+  // to the server's default (unchanged pre-`mode` behavior).
+  const getInitialColorScheme = (): 'light' | 'dark' => {
+    if (mode === 'light' || mode === 'dark') return mode;
+    if (mode === 'system' || mode === 'class') return detectThemeMode(mode);
+    return flowMetaTheme?.defaultColorScheme ?? 'light';
+  };
+
+  const [colorScheme, setColorScheme] = useState<'light' | 'dark'>(getInitialColorScheme);
 
-  // When meta finishes loading, sync the color scheme with the server default.
+  // When mode is unset, sync the color scheme with the server default once flow meta loads.
   useEffect(() => {
-    if (flowMetaTheme?.defaultColorScheme) {
+    if (mode === undefined && flowMetaTheme?.defaultColorScheme) {
       setColorScheme(flowMetaTheme.defaultColorScheme);
     }
-  }, [flowMetaTheme?.defaultColorScheme]);
+  }, [mode, flowMetaTheme?.defaultColorScheme]);
+
+  // Set up automatic detection listeners for 'system'/'class' modes.
+  useEffect(() => {
+    if (mode !== 'system' && mode !== 'class') return undefined;
+
+    const handleThemeChange = (isDark: boolean): void => {
+      setColorScheme(isDark ? 'dark' : 'light');
+    };
+
+    if (mode === 'class') {
+      if (typeof document === 'undefined') return undefined;
+      const observer = createClassObserver(document.documentElement, handleThemeChange);
+      return () => {
+        observer.disconnect();
+      };
+    }
+
+    const mediaQuery = createMediaQueryListener(handleThemeChange);
+    return () => {
+      if (mediaQuery?.removeEventListener) {
+        mediaQuery.removeEventListener('change', handleThemeChange as unknown as EventListener);
+      }
+    };
+  }, [mode]);
 
   const toggleTheme: () => void = useCallback(() => {
     setColorScheme((prev: 'light' | 'dark') => (prev === 'light' ? 'dark' : 'light'));
diff --git a/samples/express/quickstart/README.md b/samples/express/quickstart/README.md
index df8b1975..fb6cd027 100644
--- a/samples/express/quickstart/README.md
+++ b/samples/express/quickstart/README.md
@@ -43,7 +43,7 @@ Open [http://localhost:3000](http://localhost:3000) for the API documentation pa
 ## Trying the API
 
 - `GET /api/public` — no auth required.
-- `GET /api/protected` and `GET /api/me` — require `Authorization: Bearer <access_token>`.
+- `GET /api/protected`, `GET /api/me`, and `PATCH /api/me/credentials` — require `Authorization: Bearer <access_token>`.
 
 To get a token to test with, open [http://localhost:3000/login](http://localhost:3000/login),
 sign in once, and your access token (decoded claims included) will be shown at
diff --git a/samples/express/quickstart/index.mjs b/samples/express/quickstart/index.mjs
index 7b8a0fb0..b94cc0a4 100644
--- a/samples/express/quickstart/index.mjs
+++ b/samples/express/quickstart/index.mjs
@@ -2,7 +2,7 @@ import path from 'node:path';
 import {fileURLToPath} from 'node:url';
 import express from 'express';
 import cookieParser from 'cookie-parser';
-import {thunderID, handleSignIn, handleSignOut, protect} from '@thunderid/express';
+import {thunderID, handleSignIn, handleSignOut, protect, updateMeCredentials} from '@thunderid/express';
 import {verifyBearerToken} from './lib/auth.mjs';
 import {layout, esc, escAttr, COPY_ICON} from './lib/layout.mjs';
 import {thunderMark} from './lib/thunderMark.mjs';
@@ -232,6 +232,19 @@ app.get('/', async (req, res) => {
       curl: ['curl http://localhost:3000/api/me \\', `  -H "Authorization: ${bearerLine(accessToken)}"`],
       sample: JSON.stringify({sub: '...', email: 'jane@example.com', given_name: 'Jane'}, null, 2),
     })}
+    ${endpoint({
+      method: 'PATCH',
+      path: '/api/me/credentials',
+      summary: 'Updates credentials (such as password) for the authenticated caller.',
+      protectedRoute: true,
+      curl: [
+        'curl -X PATCH http://localhost:3000/api/me/credentials \\',
+        `  -H "Authorization: ${bearerLine(accessToken)}" \\`,
+        '  -H "Content-Type: application/json" \\',
+        '  -d \'{"password": "n3wP@ssword!"}\'',
+      ],
+      sample: '204 No Content',
+    })}
 
     <div class="section-label">Postman</div>
     <div class="card">
@@ -347,6 +360,24 @@ app.get('/api/me', requireBearer, (req, res) => {
   res.json(req.thunderIDUserInfo);
 });
 
+app.patch('/api/me/credentials', requireBearer, async (req, res) => {
+  try {
+    const authHeader = req.headers.authorization;
+    const token = authHeader?.split(' ')[1];
+    await updateMeCredentials({
+      baseUrl,
+      headers: {Authorization: `Bearer ${token}`},
+      payload: req.body,
+    });
+    res.status(204).end();
+  } catch (error) {
+    res.status(error?.statusCode || 500).json({
+      error: error?.code || 'CREDENTIAL_UPDATE_FAILED',
+      message: error?.message || 'Failed to update credentials',
+    });
+  }
+});
+
 // ── Postman collection download ─────────────────────────────────────────
 
 app.get('/postman-collection.json', (_req, res) => {
diff --git a/samples/express/quickstart/postman/ThunderID-Express-Quickstart.postman_collection.json b/samples/express/quickstart/postman/ThunderID-Express-Quickstart.postman_collection.json
index 7e0b995b..d2acf645 100644
--- a/samples/express/quickstart/postman/ThunderID-Express-Quickstart.postman_collection.json
+++ b/samples/express/quickstart/postman/ThunderID-Express-Quickstart.postman_collection.json
@@ -34,6 +34,21 @@
         "url": {"raw": "{{baseUrl}}/api/me", "host": ["{{baseUrl}}"], "path": ["api", "me"]}
       }
     },
+    {
+      "name": "Update credentials",
+      "request": {
+        "method": "PATCH",
+        "header": [
+          {"key": "Authorization", "value": "Bearer {{accessToken}}"},
+          {"key": "Content-Type", "value": "application/json"}
+        ],
+        "body": {
+          "mode": "raw",
+          "raw": "{\n  \"password\": \"n3wP@ssword!\"\n}"
+        },
+        "url": {"raw": "{{baseUrl}}/api/me/credentials", "host": ["{{baseUrl}}"], "path": ["api", "me", "credentials"]}
+      }
+    },
     {
       "name": "ThunderID userinfo (direct)",
       "request": {
diff --git a/samples/nextjs/quickstart/app/account/page.tsx b/samples/nextjs/quickstart/app/account/page.tsx
new file mode 100644
index 00000000..d0e17a40
--- /dev/null
+++ b/samples/nextjs/quickstart/app/account/page.tsx
@@ -0,0 +1,212 @@
+'use client'
+import { ChangeCredential, SignedIn, SignedOut, User, UserProfile } from '@thunderid/nextjs'
+import Link from 'next/link'
+import { useRouter, useSearchParams } from 'next/navigation'
+import { useState } from 'react'
+import Nav from '../components/Nav'
+
+function HomeIcon() {
+  return (
+    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+      <path d="M3 12l9-9 9 9" />
+      <path d="M5 10v10h14V10" />
+    </svg>
+  )
+}
+
+function PersonIcon() {
+  return (
+    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+      <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" />
+      <circle cx="12" cy="7" r="4" />
+    </svg>
+  )
+}
+
+function ShieldIcon() {
+  return (
+    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+      <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" />
+    </svg>
+  )
+}
+
+const TABS = [
+  { id: 'home', label: 'Home', icon: HomeIcon },
+  { id: 'personal', label: 'Personal info', icon: PersonIcon },
+  { id: 'security', label: 'Security', icon: ShieldIcon },
+]
+
+const CREDENTIALS = [
+  { attribute: 'password', title: 'Password', description: 'Used to sign in to your account.', cta: 'Change password' },
+]
+
+function ChevronIcon() {
+  return (
+    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+      <path d="M6 9l6 6 6-6" />
+    </svg>
+  )
+}
+
+function CredentialCard({ attribute, title, description, cta }: { attribute: string; title: string; description: string; cta: string }) {
+  const [open, setOpen] = useState(false)
+  const close = () => setOpen(false)
+
+  return (
+    <div className="account-security-card">
+      <div className="account-security-card-row">
+        <div>
+          <div className="account-security-card-title">{title}</div>
+          <div className="account-security-card-desc">{description}</div>
+        </div>
+        <button
+          type="button"
+          className="account-security-card-cta"
+          aria-expanded={open}
+          onClick={() => (open ? close() : setOpen(true))}
+        >
+          {cta}
+          <span className={`account-security-card-chevron${open ? ' account-security-card-chevron--open' : ''}`}>
+            <ChevronIcon />
+          </span>
+        </button>
+      </div>
+      {open && (
+        <div className="account-security-card-form">
+          <ChangeCredential attribute={attribute} title="" onSuccess={close} />
+        </div>
+      )}
+    </div>
+  )
+}
+
+const TILES = [
+  {
+    id: 'personal',
+    icon: PersonIcon,
+    tone: 'blue',
+    title: 'Personal info',
+    description: 'Name, email, phone, and profile photo',
+  },
+  {
+    id: 'security',
+    icon: ShieldIcon,
+    tone: 'green',
+    title: 'Security',
+    description: 'Password and other credentials',
+  },
+]
+
+// Google Account-style layout: a persistent left nav switching between tabs of
+// content on the right, rather than a single scrolling page or a modal.
+function AccountTabs() {
+  const router = useRouter()
+  const searchParams = useSearchParams()
+  const requestedTab = searchParams.get('tab')
+  const [tab, setTab] = useState(TABS.some((t) => t.id === requestedTab) ? requestedTab! : 'home')
+
+  const selectTab = (id: string) => {
+    setTab(id)
+    router.replace(id === 'home' ? '/account' : `/account?tab=${id}`)
+  }
+
+  return (
+    <div className="account-page">
+      <aside className="account-sidebar">
+        <h1 className="account-sidebar-title">Account</h1>
+        <nav className="account-nav">
+          {TABS.map(({ id, label, icon: Icon }) => (
+            <button
+              key={id}
+              type="button"
+              className={`account-nav-item${tab === id ? ' account-nav-item--active' : ''}`}
+              onClick={() => selectTab(id)}
+            >
+              <Icon />
+              {label}
+            </button>
+          ))}
+        </nav>
+      </aside>
+
+      <main className="account-content">
+        <div className="account-content-inner">
+          {tab === 'home' && (
+            <User>
+              {(user: { givenName?: string; given_name?: string; displayName?: string; username?: string } | null) => {
+                const givenName = user?.givenName ?? user?.given_name ?? user?.displayName ?? user?.username ?? 'there'
+
+                return (
+                  <>
+                    <h2 className="account-content-title">Hi, {givenName}</h2>
+                    <p className="account-content-subtitle">
+                      Manage your info and security across ThunderID apps.
+                    </p>
+                    <div className="account-tiles">
+                      {TILES.map(({ id, icon: Icon, tone, title, description }) => (
+                        <button
+                          key={id}
+                          type="button"
+                          className="account-tile"
+                          onClick={() => selectTab(id)}
+                        >
+                          <span className={`account-tile-icon account-tile-icon--${tone}`}>
+                            <Icon />
+                          </span>
+                          <span className="account-tile-title">{title}</span>
+                          <span className="account-tile-desc">{description}</span>
+                        </button>
+                      ))}
+                    </div>
+                  </>
+                )
+              }}
+            </User>
+          )}
+
+          {tab === 'personal' && (
+            <>
+              <h2 className="account-content-title">Personal info</h2>
+              <p className="account-content-subtitle">Manage the basic profile info others may see.</p>
+              <UserProfile />
+            </>
+          )}
+
+          {tab === 'security' && (
+            <>
+              <h2 className="account-content-title">Security</h2>
+              <p className="account-content-subtitle">Manage your password and other credentials.</p>
+              <div className="account-security-list">
+                {CREDENTIALS.map((credential) => (
+                  <CredentialCard key={credential.attribute} {...credential} />
+                ))}
+              </div>
+            </>
+          )}
+        </div>
+      </main>
+    </div>
+  )
+}
+
+export default function AccountPage() {
+  return (
+    <div className="app">
+      <Nav />
+
+      <SignedIn>
+        <AccountTabs />
+      </SignedIn>
+
+      <SignedOut>
+        <main className="auth-main">
+          <div className="auth-card">
+            <p className="auth-subtitle">Sign in to manage your account.</p>
+            <Link href="/signin" className="btn-primary">Sign in</Link>
+          </div>
+        </main>
+      </SignedOut>
+    </div>
+  )
+}
diff --git a/samples/nextjs/quickstart/app/components/Nav.tsx b/samples/nextjs/quickstart/app/components/Nav.tsx
index a837587f..e660f18e 100644
--- a/samples/nextjs/quickstart/app/components/Nav.tsx
+++ b/samples/nextjs/quickstart/app/components/Nav.tsx
@@ -1,7 +1,7 @@
 'use client'
-import { usePathname } from 'next/navigation'
-import Link from 'next/link'
 import { SignedIn, SignedOut, SignInButton, UserDropdown } from '@thunderid/nextjs'
+import Link from 'next/link'
+import { usePathname, useRouter } from 'next/navigation'
 import { useState } from 'react'
 import NextLogo from './icons/NextLogo'
 
@@ -46,6 +46,7 @@ function KeyIcon() {
 export default function Nav() {
   const [dark, setDark] = useState(false)
   const pathname = usePathname()
+  const router = useRouter()
   const isHome = pathname === '/'
 
   const toggle = () => {
@@ -79,7 +80,12 @@ export default function Nav() {
           {dark ? <SunIcon /> : <MoonIcon />}
         </button>
         <SignedIn>
-          <UserDropdown showTriggerLabel menuItems={menuItems} />
+          <UserDropdown
+            showTriggerLabel
+            menuItems={menuItems}
+            manageProfileLabel="Manage Account"
+            onManageProfile={() => router.push('/account')}
+          />
         </SignedIn>
         <SignedOut>
           <SignInButton>
diff --git a/samples/nextjs/quickstart/app/globals.css b/samples/nextjs/quickstart/app/globals.css
index 918b551c..6972b479 100644
--- a/samples/nextjs/quickstart/app/globals.css
+++ b/samples/nextjs/quickstart/app/globals.css
@@ -37,6 +37,22 @@ html.dark {
   --color-text-muted: rgba(224, 234, 255, 0.48);
   --color-muted: rgba(224, 234, 255, 0.48);
   --color-nav-bg: rgba(8, 15, 28, 0.92);
+
+  /* ThunderID Design Tokens for Dark Mode */
+  --thunderid-color-background-surface: #0f1a2d;
+  --thunderid-color-background-body: #080f1c;
+  --thunderid-color-background-disabled: rgba(255, 255, 255, 0.06);
+  --thunderid-color-background-muted: rgba(255, 255, 255, 0.05);
+  --thunderid-color-text-primary: #E0EAFF;
+  --thunderid-color-text-secondary: rgba(224, 234, 255, 0.65);
+  --thunderid-color-border: rgba(255, 255, 255, 0.09);
+  --thunderid-color-border-focus: var(--color-primary);
+  --thunderid-input-borderColor: rgba(255, 255, 255, 0.16);
+  --thunderid-input-focusBorderColor: var(--color-primary);
+  --thunderid-input-focusRing: 0 0 0 3px rgba(54, 136, 255, 0.25);
+  --thunderid-card-borderColor: rgba(255, 255, 255, 0.09);
+  --thunderid-card-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
+  --thunderid-color-action-hover: rgba(255, 255, 255, 0.06);
 }
 
 /* ── Base ── */
@@ -1055,3 +1071,451 @@ button:focus-visible {
     padding: 24px 16px;
   }
 }
+
+/* ─── Account page (Google Account-style left-nav layout) ─────────── */
+.account-page {
+  display: flex;
+  align-items: flex-start;
+  min-height: calc(100vh - 52px);
+  margin-top: 52px;
+}
+
+.account-sidebar {
+  width: 280px;
+  flex-shrink: 0;
+  padding: 40px 24px;
+  position: sticky;
+  top: 52px;
+}
+
+.account-sidebar-title {
+  font-size: 22px;
+  font-weight: 700;
+  letter-spacing: -0.03em;
+  color: var(--color-text);
+  margin: 0 0 24px 16px;
+}
+
+.account-nav {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.account-nav-item {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  width: 100%;
+  padding: 11px 16px;
+  border: none;
+  border-radius: 20px;
+  background: transparent;
+  color: var(--color-muted);
+  font-size: 14px;
+  font-weight: 500;
+  font-family: inherit;
+  text-align: left;
+  cursor: pointer;
+  white-space: nowrap;
+  transition: background 0.2s, color 0.2s;
+}
+
+.account-nav-item:hover {
+  background: var(--color-border);
+  color: var(--color-text);
+}
+
+.account-nav-item--active,
+.account-nav-item--active:hover {
+  background: rgba(54, 136, 255, 0.12);
+  color: var(--color-primary);
+}
+
+.account-content {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  justify-content: center;
+  padding: 40px 32px 80px;
+  border-left: 1px solid var(--color-border);
+}
+
+.account-content-inner {
+  width: 100%;
+  max-width: 720px;
+}
+
+/* UserProfile's `min-width: 600px` (a floor meant to keep the field grid from getting
+   cramped in other contexts) fights this page's own responsive layout, refusing to shrink
+   below 600px even when the viewport is narrower. The Security/Home boxes have no such floor
+   and already shrink fluidly with their container, so match that here. */
+.account-content .thunderid-user-profile {
+  min-width: 0;
+  background: var(--color-card) !important;
+  border: 1px solid var(--color-border) !important;
+  border-radius: var(--radius-card) !important;
+  box-shadow: var(--shadow-card);
+  color: var(--color-text);
+  box-sizing: border-box;
+}
+
+.account-content .thunderid-user-profile .thunderid-user-profile__hero {
+  border-bottom: 1px solid var(--color-border);
+}
+
+.account-content .thunderid-user-profile .thunderid-user-profile__hero-name {
+  color: var(--color-text);
+}
+
+.account-content .thunderid-user-profile .thunderid-user-profile__hero-subtitle {
+  color: var(--color-text-muted);
+}
+
+.account-content .thunderid-user-profile .thunderid-user-profile__field {
+  border-bottom: 1px solid var(--color-border);
+}
+
+.account-content .thunderid-user-profile .thunderid-user-profile__field-label {
+  color: var(--color-text-muted);
+}
+
+.account-content .thunderid-user-profile .thunderid-user-profile__field-value {
+  color: var(--color-text);
+}
+
+.account-content .thunderid-user-profile .thunderid-user-profile__field-placeholder {
+  color: var(--color-text-muted);
+}
+
+.account-content .thunderid-user-profile .thunderid-user-profile__field-edit-btn {
+  color: var(--color-text-muted);
+}
+
+.account-content .thunderid-user-profile .thunderid-user-profile__field-edit-btn:hover {
+  color: var(--color-primary);
+}
+
+.account-content .thunderid-user-profile input,
+.account-content .thunderid-user-profile select,
+.account-content .thunderid-user-profile textarea {
+  background: rgba(255, 255, 255, 0.05);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-btn);
+  color: var(--color-text);
+  padding: 6px 10px;
+}
+
+.account-content-title {
+  font-size: 26px;
+  font-weight: 700;
+  letter-spacing: -0.03em;
+  color: var(--color-text);
+  margin: 0 0 6px;
+}
+
+.account-content-subtitle {
+  font-size: 14px;
+  color: var(--color-muted);
+  margin: 0 0 32px;
+}
+
+.account-tiles {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+  gap: 16px;
+  margin-top: 8px;
+}
+
+.account-tile {
+  text-align: left;
+  background: var(--color-card);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-card);
+  padding: 22px;
+  cursor: pointer;
+  font-family: inherit;
+  display: flex;
+  flex-direction: column;
+  transition: border-color 0.2s;
+}
+
+.account-tile:hover {
+  border-color: rgba(54, 136, 255, 0.35);
+}
+
+.account-tile-icon {
+  width: 36px;
+  height: 36px;
+  border-radius: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 14px;
+}
+
+.account-tile-icon--blue {
+  background: rgba(54, 136, 255, 0.12);
+  color: var(--color-primary);
+}
+
+.account-tile-icon--green {
+  background: rgba(16, 185, 129, 0.12);
+  color: #10b981;
+}
+
+.account-tile-title {
+  font-size: 15px;
+  font-weight: 600;
+  color: var(--color-text);
+  margin-bottom: 4px;
+}
+
+.account-tile-desc {
+  font-size: 12.5px;
+  color: var(--color-muted);
+  line-height: 1.5;
+}
+
+.account-security-list {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.account-security-card {
+  background: var(--color-card);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-card);
+  padding: 20px 22px;
+}
+
+.account-security-card-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+}
+
+.account-security-card-title {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--color-text);
+  margin-bottom: 2px;
+}
+
+.account-security-card-desc {
+  font-size: 12.5px;
+  color: var(--color-muted);
+}
+
+.account-security-card-cta {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 0;
+  background: none;
+  border: none;
+  color: var(--color-primary);
+  font-size: 13px;
+  font-weight: 500;
+  font-family: inherit;
+  cursor: pointer;
+  transition: opacity 0.2s;
+}
+
+.account-security-card-cta:hover {
+  opacity: 0.8;
+}
+
+.account-security-card-chevron {
+  display: inline-flex;
+  transition: transform 0.2s;
+}
+
+.account-security-card-chevron--open {
+  transform: rotate(180deg);
+}
+
+.account-security-card-form {
+  margin-top: 18px;
+  padding-top: 18px;
+  border-top: 1px solid var(--color-border);
+}
+
+@media (max-width: 760px) {
+  .account-page {
+    flex-direction: column;
+  }
+  .account-sidebar {
+    width: 100%;
+    position: static;
+    padding: 20px 16px 8px;
+  }
+  .account-nav {
+    flex-direction: row;
+    overflow-x: auto;
+  }
+  .account-content {
+    max-width: 100%;
+    border-left: none;
+    border-top: 1px solid var(--color-border);
+    padding: 24px 20px 60px;
+  }
+}
+
+/* ── ThunderID inputs & forms dark mode ── */
+.dark .thunderid-password-field__wrapper,
+html.dark .thunderid-password-field__wrapper,
+.app.dark .thunderid-password-field__wrapper,
+.dark .thunderid-text-field__wrapper,
+html.dark .thunderid-text-field__wrapper,
+.app.dark .thunderid-text-field__wrapper,
+.dark .thunderid-text-field__input,
+html.dark .thunderid-text-field__input,
+.app.dark .thunderid-text-field__input {
+  background-color: rgba(255, 255, 255, 0.05) !important;
+  border-color: rgba(255, 255, 255, 0.16) !important;
+  color: var(--color-text) !important;
+}
+
+.dark .thunderid-password-field__label,
+html.dark .thunderid-password-field__label,
+.app.dark .thunderid-password-field__label,
+.dark .thunderid-text-field__label,
+html.dark .thunderid-text-field__label,
+.app.dark .thunderid-text-field__label,
+.dark .thunderid-input-label,
+html.dark .thunderid-input-label,
+.app.dark .thunderid-input-label {
+  color: var(--color-text) !important;
+}
+
+.dark .thunderid-password-field__input,
+html.dark .thunderid-password-field__input,
+.app.dark .thunderid-password-field__input {
+  background: transparent !important;
+  color: var(--color-text) !important;
+}
+
+.dark .thunderid-password-field__input::placeholder,
+html.dark .thunderid-password-field__input::placeholder,
+.app.dark .thunderid-password-field__input::placeholder,
+.dark .thunderid-text-field__input::placeholder,
+html.dark .thunderid-text-field__input::placeholder,
+.app.dark .thunderid-text-field__input::placeholder {
+  color: var(--color-text-muted) !important;
+}
+
+.dark .thunderid-password-field__toggle,
+html.dark .thunderid-password-field__toggle,
+.app.dark .thunderid-password-field__toggle {
+  color: var(--color-text-muted) !important;
+  background: transparent !important;
+}
+
+.dark .thunderid-password-field__toggle:hover,
+html.dark .thunderid-password-field__toggle:hover,
+.app.dark .thunderid-password-field__toggle:hover {
+  color: var(--color-text) !important;
+}
+
+.dark .thunderid-change-credential__requirements-heading,
+html.dark .thunderid-change-credential__requirements-heading,
+.app.dark .thunderid-change-credential__requirements-heading,
+.dark .thunderid-change-credential__requirement,
+html.dark .thunderid-change-credential__requirement,
+.app.dark .thunderid-change-credential__requirement {
+  color: var(--color-text-muted) !important;
+}
+
+.dark .thunderid-change-credential__requirement--passed,
+html.dark .thunderid-change-credential__requirement--passed,
+.app.dark .thunderid-change-credential__requirement--passed {
+  color: #38c172 !important;
+}
+
+/* ── ThunderID UserDropdown dark mode ── */
+.dark .thunderid-user-dropdown__menu,
+html.dark .thunderid-user-dropdown__menu,
+.app.dark .thunderid-user-dropdown__menu,
+.dark .thunderid-user-dropdown__content,
+html.dark .thunderid-user-dropdown__content,
+.app.dark .thunderid-user-dropdown__content {
+  background-color: var(--color-card) !important;
+  border: 1px solid var(--color-border) !important;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45) !important;
+  color: var(--color-text) !important;
+}
+
+.dark .thunderid-user-dropdown__menu-header,
+html.dark .thunderid-user-dropdown__menu-header,
+.app.dark .thunderid-user-dropdown__menu-header,
+.dark .thunderid-user-dropdown__header,
+html.dark .thunderid-user-dropdown__header,
+.app.dark .thunderid-user-dropdown__header {
+  border-bottom: 1px solid var(--color-border) !important;
+}
+
+.dark .thunderid-user-dropdown__menu-header-name,
+html.dark .thunderid-user-dropdown__menu-header-name,
+.app.dark .thunderid-user-dropdown__menu-header-name,
+.dark .thunderid-user-dropdown__header-name,
+html.dark .thunderid-user-dropdown__header-name,
+.app.dark .thunderid-user-dropdown__header-name {
+  color: var(--color-text) !important;
+}
+
+.dark .thunderid-user-dropdown__menu-header-subtitle,
+html.dark .thunderid-user-dropdown__menu-header-subtitle,
+.app.dark .thunderid-user-dropdown__menu-header-subtitle,
+.dark .thunderid-user-dropdown__header-subtitle,
+html.dark .thunderid-user-dropdown__header-subtitle,
+.app.dark .thunderid-user-dropdown__header-subtitle {
+  color: var(--color-text-muted) !important;
+}
+
+.dark .thunderid-user-dropdown__menu-divider,
+html.dark .thunderid-user-dropdown__menu-divider,
+.app.dark .thunderid-user-dropdown__menu-divider,
+.dark .thunderid-divider,
+html.dark .thunderid-divider,
+.app.dark .thunderid-divider {
+  background-color: var(--color-border) !important;
+  border-color: var(--color-border) !important;
+}
+
+.dark .thunderid-user-dropdown__item,
+html.dark .thunderid-user-dropdown__item,
+.app.dark .thunderid-user-dropdown__item {
+  color: var(--color-text) !important;
+}
+
+.dark .thunderid-user-dropdown__item:hover,
+html.dark .thunderid-user-dropdown__item:hover,
+.app.dark .thunderid-user-dropdown__item:hover {
+  background-color: rgba(255, 255, 255, 0.06) !important;
+  color: var(--color-text) !important;
+}
+
+.dark .thunderid-user-dropdown__item--danger,
+html.dark .thunderid-user-dropdown__item--danger,
+.app.dark .thunderid-user-dropdown__item--danger {
+  color: #f87171 !important;
+}
+
+.dark .thunderid-user-dropdown__item--danger:hover,
+html.dark .thunderid-user-dropdown__item--danger:hover,
+.app.dark .thunderid-user-dropdown__item--danger:hover {
+  background-color: rgba(239, 68, 68, 0.12) !important;
+}
+
+.dark .thunderid-card,
+html.dark .thunderid-card,
+.app.dark .thunderid-card {
+  background-color: var(--color-card) !important;
+  border-color: var(--color-border) !important;
+  color: var(--color-text) !important;
+}
+
diff --git a/samples/nextjs/quickstart/app/layout.tsx b/samples/nextjs/quickstart/app/layout.tsx
index 7340e107..d67dade0 100644
--- a/samples/nextjs/quickstart/app/layout.tsx
+++ b/samples/nextjs/quickstart/app/layout.tsx
@@ -37,7 +37,7 @@ export default function RootLayout({
         {missingEnvVars.length > 0 ? (
           <ConfigNotice missing={missingEnvVars} isRedirectFlow={isRedirectFlow} />
         ) : (
-          <ThunderIDProvider>
+          <ThunderIDProvider preferences={{ theme: { mode: 'class' } }}>
             {children}
           </ThunderIDProvider>
         )}
diff --git a/samples/nuxt/quickstart/app/assets/styles.css b/samples/nuxt/quickstart/app/assets/styles.css
index 8f2aaf68..82719ff9 100644
--- a/samples/nuxt/quickstart/app/assets/styles.css
+++ b/samples/nuxt/quickstart/app/assets/styles.css
@@ -32,13 +32,31 @@
 }
 
 /* ── Dark mode ── */
-.app.dark {
+.app.dark,
+.dark,
+html.dark {
   --color-bg: #080f1c;
   --color-card: #0f1a2d;
   --color-border: rgba(255, 255, 255, 0.09);
   --color-text: #E0EAFF;
   --color-text-muted: rgba(224, 234, 255, 0.48);
   --color-nav-bg: rgba(8, 15, 28, 0.92);
+
+  /* ThunderID Design Tokens for Dark Mode */
+  --thunderid-color-background-surface: #0f1a2d;
+  --thunderid-color-background-body: #080f1c;
+  --thunderid-color-background-disabled: rgba(255, 255, 255, 0.06);
+  --thunderid-color-background-muted: rgba(255, 255, 255, 0.05);
+  --thunderid-color-text-primary: #E0EAFF;
+  --thunderid-color-text-secondary: rgba(224, 234, 255, 0.65);
+  --thunderid-color-border: rgba(255, 255, 255, 0.09);
+  --thunderid-color-border-focus: var(--color-primary);
+  --thunderid-input-borderColor: rgba(255, 255, 255, 0.16);
+  --thunderid-input-focusBorderColor: var(--color-primary);
+  --thunderid-input-focusRing: 0 0 0 3px rgba(54, 136, 255, 0.25);
+  --thunderid-card-borderColor: rgba(255, 255, 255, 0.09);
+  --thunderid-card-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
+  --thunderid-color-action-hover: rgba(255, 255, 255, 0.06);
 }
 
 /* ── Navigation ── */
@@ -929,3 +947,451 @@ button:focus-visible {
   color: var(--color-text);
   letter-spacing: -0.01em;
 }
+
+/* ─── Account page (Google Account-style left-nav layout) ─────────── */
+.account-page {
+  display: flex;
+  align-items: flex-start;
+  min-height: calc(100vh - 52px);
+  margin-top: 52px;
+}
+
+.account-sidebar {
+  width: 280px;
+  flex-shrink: 0;
+  padding: 40px 24px;
+  position: sticky;
+  top: 52px;
+}
+
+.account-sidebar-title {
+  font-size: 22px;
+  font-weight: 700;
+  letter-spacing: -0.03em;
+  color: var(--color-text);
+  margin: 0 0 24px 16px;
+}
+
+.account-nav {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.account-nav-item {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  width: 100%;
+  padding: 11px 16px;
+  border: none;
+  border-radius: 20px;
+  background: transparent;
+  color: var(--color-text-muted);
+  font-size: 14px;
+  font-weight: 500;
+  font-family: inherit;
+  text-align: left;
+  cursor: pointer;
+  white-space: nowrap;
+  transition: background 0.2s, color 0.2s;
+}
+
+.account-nav-item:hover {
+  background: var(--color-border);
+  color: var(--color-text);
+}
+
+.account-nav-item--active,
+.account-nav-item--active:hover {
+  background: rgba(54, 136, 255, 0.12);
+  color: var(--color-primary);
+}
+
+.account-content {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  justify-content: center;
+  padding: 40px 32px 80px;
+  border-left: 1px solid var(--color-border);
+}
+
+.account-content-inner {
+  width: 100%;
+  max-width: 720px;
+}
+
+/* UserProfile's `min-width: 600px` (a floor meant to keep the field grid from getting
+   cramped in other contexts) fights this page's own responsive layout, refusing to shrink
+   below 600px even when the viewport is narrower. The Security/Home boxes have no such floor
+   and already shrink fluidly with their container, so match that here. */
+.account-content .thunderid-user-profile {
+  min-width: 0;
+  background: var(--color-card) !important;
+  border: 1px solid var(--color-border) !important;
+  border-radius: var(--radius-card) !important;
+  box-shadow: var(--shadow-card);
+  color: var(--color-text);
+  box-sizing: border-box;
+}
+
+.account-content .thunderid-user-profile .thunderid-user-profile__hero {
+  border-bottom: 1px solid var(--color-border);
+}
+
+.account-content .thunderid-user-profile .thunderid-user-profile__hero-name {
+  color: var(--color-text);
+}
+
+.account-content .thunderid-user-profile .thunderid-user-profile__hero-subtitle {
+  color: var(--color-text-muted);
+}
+
+.account-content .thunderid-user-profile .thunderid-user-profile__field {
+  border-bottom: 1px solid var(--color-border);
+}
+
+.account-content .thunderid-user-profile .thunderid-user-profile__field-label {
+  color: var(--color-text-muted);
+}
+
+.account-content .thunderid-user-profile .thunderid-user-profile__field-value {
+  color: var(--color-text);
+}
+
+.account-content .thunderid-user-profile .thunderid-user-profile__field-placeholder {
+  color: var(--color-text-muted);
+}
+
+.account-content .thunderid-user-profile .thunderid-user-profile__field-edit-btn {
+  color: var(--color-text-muted);
+}
+
+.account-content .thunderid-user-profile .thunderid-user-profile__field-edit-btn:hover {
+  color: var(--color-primary);
+}
+
+.account-content .thunderid-user-profile input,
+.account-content .thunderid-user-profile select,
+.account-content .thunderid-user-profile textarea {
+  background: rgba(255, 255, 255, 0.05);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-btn);
+  color: var(--color-text);
+  padding: 6px 10px;
+}
+
+.account-content-title {
+  font-size: 26px;
+  font-weight: 700;
+  letter-spacing: -0.03em;
+  color: var(--color-text);
+  margin: 0 0 6px;
+}
+
+.account-content-subtitle {
+  font-size: 14px;
+  color: var(--color-text-muted);
+  margin: 0 0 32px;
+}
+
+.account-tiles {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+  gap: 16px;
+  margin-top: 8px;
+}
+
+.account-tile {
+  text-align: left;
+  background: var(--color-card);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-card);
+  padding: 22px;
+  cursor: pointer;
+  font-family: inherit;
+  display: flex;
+  flex-direction: column;
+  transition: border-color 0.2s;
+}
+
+.account-tile:hover {
+  border-color: rgba(54, 136, 255, 0.35);
+}
+
+.account-tile-icon {
+  width: 36px;
+  height: 36px;
+  border-radius: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 14px;
+}
+
+.account-tile-icon--blue {
+  background: rgba(54, 136, 255, 0.12);
+  color: var(--color-primary);
+}
+
+.account-tile-icon--green {
+  background: rgba(16, 185, 129, 0.12);
+  color: #10b981;
+}
+
+.account-tile-title {
+  font-size: 15px;
+  font-weight: 600;
+  color: var(--color-text);
+  margin-bottom: 4px;
+}
+
+.account-tile-desc {
+  font-size: 12.5px;
+  color: var(--color-text-muted);
+  line-height: 1.5;
+}
+
+.account-security-list {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.account-security-card {
+  background: var(--color-card);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-card);
+  padding: 20px 22px;
+}
+
+.account-security-card-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+}
+
+.account-security-card-title {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--color-text);
+  margin-bottom: 2px;
+}
+
+.account-security-card-desc {
+  font-size: 12.5px;
+  color: var(--color-text-muted);
+}
+
+.account-security-card-cta {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 0;
+  background: none;
+  border: none;
+  color: var(--color-primary);
+  font-size: 13px;
+  font-weight: 500;
+  font-family: inherit;
+  cursor: pointer;
+  transition: opacity 0.2s;
+}
+
+.account-security-card-cta:hover {
+  opacity: 0.8;
+}
+
+.account-security-card-chevron {
+  display: inline-flex;
+  transition: transform 0.2s;
+}
+
+.account-security-card-chevron--open {
+  transform: rotate(180deg);
+}
+
+.account-security-card-form {
+  margin-top: 18px;
+  padding-top: 18px;
+  border-top: 1px solid var(--color-border);
+}
+
+@media (max-width: 760px) {
+  .account-page {
+    flex-direction: column;
+  }
+  .account-sidebar {
+    width: 100%;
+    position: static;
+    padding: 20px 16px 8px;
+  }
+  .account-nav {
+    flex-direction: row;
+    overflow-x: auto;
+  }
+  .account-content {
+    max-width: 100%;
+    border-left: none;
+    border-top: 1px solid var(--color-border);
+    padding: 24px 20px 60px;
+  }
+}
+
+/* ── ThunderID inputs & forms dark mode ── */
+.dark .thunderid-password-field__wrapper,
+html.dark .thunderid-password-field__wrapper,
+.app.dark .thunderid-password-field__wrapper,
+.dark .thunderid-text-field__wrapper,
+html.dark .thunderid-text-field__wrapper,
+.app.dark .thunderid-text-field__wrapper,
+.dark .thunderid-text-field__input,
+html.dark .thunderid-text-field__input,
+.app.dark .thunderid-text-field__input {
+  background-color: rgba(255, 255, 255, 0.05) !important;
+  border-color: rgba(255, 255, 255, 0.16) !important;
+  color: var(--color-text) !important;
+}
+
+.dark .thunderid-password-field__label,
+html.dark .thunderid-password-field__label,
+.app.dark .thunderid-password-field__label,
+.dark .thunderid-text-field__label,
+html.dark .thunderid-text-field__label,
+.app.dark .thunderid-text-field__label,
+.dark .thunderid-input-label,
+html.dark .thunderid-input-label,
+.app.dark .thunderid-input-label {
+  color: var(--color-text) !important;
+}
+
+.dark .thunderid-password-field__input,
+html.dark .thunderid-password-field__input,
+.app.dark .thunderid-password-field__input {
+  background: transparent !important;
+  color: var(--color-text) !important;
+}
+
+.dark .thunderid-password-field__input::placeholder,
+html.dark .thunderid-password-field__input::placeholder,
+.app.dark .thunderid-password-field__input::placeholder,
+.dark .thunderid-text-field__input::placeholder,
+html.dark .thunderid-text-field__input::placeholder,
+.app.dark .thunderid-text-field__input::placeholder {
+  color: var(--color-text-muted) !important;
+}
+
+.dark .thunderid-password-field__toggle,
+html.dark .thunderid-password-field__toggle,
+.app.dark .thunderid-password-field__toggle {
+  color: var(--color-text-muted) !important;
+  background: transparent !important;
+}
+
+.dark .thunderid-password-field__toggle:hover,
+html.dark .thunderid-password-field__toggle:hover,
+.app.dark .thunderid-password-field__toggle:hover {
+  color: var(--color-text) !important;
+}
+
+.dark .thunderid-change-credential__requirements-heading,
+html.dark .thunderid-change-credential__requirements-heading,
+.app.dark .thunderid-change-credential__requirements-heading,
+.dark .thunderid-change-credential__requirement,
+html.dark .thunderid-change-credential__requirement,
+.app.dark .thunderid-change-credential__requirement {
+  color: var(--color-text-muted) !important;
+}
+
+.dark .thunderid-change-credential__requirement--passed,
+html.dark .thunderid-change-credential__requirement--passed,
+.app.dark .thunderid-change-credential__requirement--passed {
+  color: #38c172 !important;
+}
+
+/* ── ThunderID UserDropdown dark mode ── */
+.dark .thunderid-user-dropdown__menu,
+html.dark .thunderid-user-dropdown__menu,
+.app.dark .thunderid-user-dropdown__menu,
+.dark .thunderid-user-dropdown__content,
+html.dark .thunderid-user-dropdown__content,
+.app.dark .thunderid-user-dropdown__content {
+  background-color: var(--color-card) !important;
+  border: 1px solid var(--color-border) !important;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45) !important;
+  color: var(--color-text) !important;
+}
+
+.dark .thunderid-user-dropdown__menu-header,
+html.dark .thunderid-user-dropdown__menu-header,
+.app.dark .thunderid-user-dropdown__menu-header,
+.dark .thunderid-user-dropdown__header,
+html.dark .thunderid-user-dropdown__header,
+.app.dark .thunderid-user-dropdown__header {
+  border-bottom: 1px solid var(--color-border) !important;
+}
+
+.dark .thunderid-user-dropdown__menu-header-name,
+html.dark .thunderid-user-dropdown__menu-header-name,
+.app.dark .thunderid-user-dropdown__menu-header-name,
+.dark .thunderid-user-dropdown__header-name,
+html.dark .thunderid-user-dropdown__header-name,
+.app.dark .thunderid-user-dropdown__header-name {
+  color: var(--color-text) !important;
+}
+
+.dark .thunderid-user-dropdown__menu-header-subtitle,
+html.dark .thunderid-user-dropdown__menu-header-subtitle,
+.app.dark .thunderid-user-dropdown__menu-header-subtitle,
+.dark .thunderid-user-dropdown__header-subtitle,
+html.dark .thunderid-user-dropdown__header-subtitle,
+.app.dark .thunderid-user-dropdown__header-subtitle {
+  color: var(--color-text-muted) !important;
+}
+
+.dark .thunderid-user-dropdown__menu-divider,
+html.dark .thunderid-user-dropdown__menu-divider,
+.app.dark .thunderid-user-dropdown__menu-divider,
+.dark .thunderid-divider,
+html.dark .thunderid-divider,
+.app.dark .thunderid-divider {
+  background-color: var(--color-border) !important;
+  border-color: var(--color-border) !important;
+}
+
+.dark .thunderid-user-dropdown__item,
+html.dark .thunderid-user-dropdown__item,
+.app.dark .thunderid-user-dropdown__item {
+  color: var(--color-text) !important;
+}
+
+.dark .thunderid-user-dropdown__item:hover,
+html.dark .thunderid-user-dropdown__item:hover,
+.app.dark .thunderid-user-dropdown__item:hover {
+  background-color: rgba(255, 255, 255, 0.06) !important;
+  color: var(--color-text) !important;
+}
+
+.dark .thunderid-user-dropdown__item--danger,
+html.dark .thunderid-user-dropdown__item--danger,
+.app.dark .thunderid-user-dropdown__item--danger {
+  color: #f87171 !important;
+}
+
+.dark .thunderid-user-dropdown__item--danger:hover,
+html.dark .thunderid-user-dropdown__item--danger:hover,
+.app.dark .thunderid-user-dropdown__item--danger:hover {
+  background-color: rgba(239, 68, 68, 0.12) !important;
+}
+
+.dark .thunderid-card,
+html.dark .thunderid-card,
+.app.dark .thunderid-card {
+  background-color: var(--color-card) !important;
+  border-color: var(--color-border) !important;
+  color: var(--color-text) !important;
+}
+
diff --git a/samples/nuxt/quickstart/app/components/AppNav.vue b/samples/nuxt/quickstart/app/components/AppNav.vue
index d785170f..91ac758c 100644
--- a/samples/nuxt/quickstart/app/components/AppNav.vue
+++ b/samples/nuxt/quickstart/app/components/AppNav.vue
@@ -10,7 +10,22 @@ const menuItems = [
 
 function toggleDark() {
   dark.value = !dark.value
+  if (typeof document !== 'undefined') {
+    document.documentElement.classList.toggle('dark', dark.value)
+  }
 }
+
+onMounted(() => {
+  if (typeof document !== 'undefined') {
+    document.documentElement.classList.toggle('dark', dark.value)
+  }
+})
+
+watch(dark, (isDark) => {
+  if (typeof document !== 'undefined') {
+    document.documentElement.classList.toggle('dark', isDark)
+  }
+})
 </script>
 
 <template>
@@ -51,7 +66,11 @@ function toggleDark() {
       </button>
 
       <SignedIn>
-        <UserDropdown :menu-items="menuItems" />
+        <UserDropdown
+          :menu-items="menuItems"
+          profile-label="Manage Account"
+          :on-manage-profile="() => router.push('/account')"
+        />
       </SignedIn>
       <SignedOut>
         <SignInButton class="btn-primary btn-sm" v-slot="{ isLoading }">
diff --git a/samples/nuxt/quickstart/app/pages/account.vue b/samples/nuxt/quickstart/app/pages/account.vue
new file mode 100644
index 00000000..addd18bd
--- /dev/null
+++ b/samples/nuxt/quickstart/app/pages/account.vue
@@ -0,0 +1,162 @@
+<script setup>
+import { ref } from 'vue'
+
+const dark = useState('dark', () => false)
+
+const TABS = [
+  { id: 'home', label: 'Home' },
+  { id: 'personal', label: 'Personal info' },
+  { id: 'security', label: 'Security' },
+]
+
+const TILES = [
+  {
+    id: 'personal',
+    tone: 'blue',
+    title: 'Personal info',
+    description: 'Name, email, phone, and profile photo',
+  },
+  {
+    id: 'security',
+    tone: 'green',
+    title: 'Security',
+    description: 'Password and other credentials',
+  },
+]
+
+const CREDENTIALS = [
+  { attribute: 'password', title: 'Password', description: 'Used to sign in to your account.', cta: 'Change password' },
+]
+
+const tab = ref('home')
+const openCredential = ref(null)
+
+function selectTab(id) {
+  tab.value = id
+}
+
+function toggleCredential(attribute) {
+  openCredential.value = openCredential.value === attribute ? null : attribute
+}
+
+function closeCredential() {
+  openCredential.value = null
+}
+</script>
+
+<template>
+  <div :class="['app', { dark }]">
+    <AppNav />
+
+    <SignedIn>
+      <div class="account-page">
+        <aside class="account-sidebar">
+          <h1 class="account-sidebar-title">Account</h1>
+          <nav class="account-nav">
+            <button
+              v-for="t in TABS"
+              :key="t.id"
+              type="button"
+              :class="['account-nav-item', { 'account-nav-item--active': tab === t.id }]"
+              @click="selectTab(t.id)"
+            >
+              <svg v-if="t.id === 'home'" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                <path d="M3 12l9-9 9 9" /><path d="M5 10v10h14V10" />
+              </svg>
+              <svg v-else-if="t.id === 'personal'" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" /><circle cx="12" cy="7" r="4" />
+              </svg>
+              <svg v-else width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" />
+              </svg>
+              {{ t.label }}
+            </button>
+          </nav>
+        </aside>
+
+        <main class="account-content">
+          <div class="account-content-inner">
+            <template v-if="tab === 'home'">
+              <User>
+                <template #default="{ user }">
+                  <h2 class="account-content-title">
+                    Hi, {{ user?.givenName || user?.given_name || user?.displayName || user?.username || 'there' }}
+                  </h2>
+                  <p class="account-content-subtitle">Manage your info and security across ThunderID apps.</p>
+                  <div class="account-tiles">
+                    <button
+                      v-for="tile in TILES"
+                      :key="tile.id"
+                      type="button"
+                      class="account-tile"
+                      @click="selectTab(tile.id)"
+                    >
+                      <span :class="['account-tile-icon', `account-tile-icon--${tile.tone}`]">
+                        <svg v-if="tile.id === 'personal'" width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                          <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" /><circle cx="12" cy="7" r="4" />
+                        </svg>
+                        <svg v-else width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                          <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" />
+                        </svg>
+                      </span>
+                      <span class="account-tile-title">{{ tile.title }}</span>
+                      <span class="account-tile-desc">{{ tile.description }}</span>
+                    </button>
+                  </div>
+                </template>
+              </User>
+            </template>
+
+            <template v-else-if="tab === 'personal'">
+              <h2 class="account-content-title">Personal info</h2>
+              <p class="account-content-subtitle">Manage the basic profile info others may see.</p>
+              <UserProfile />
+            </template>
+
+            <template v-else-if="tab === 'security'">
+              <h2 class="account-content-title">Security</h2>
+              <p class="account-content-subtitle">Manage your password and other credentials.</p>
+              <div class="account-security-list">
+                <div v-for="credential in CREDENTIALS" :key="credential.attribute" class="account-security-card">
+                  <div class="account-security-card-row">
+                    <div>
+                      <div class="account-security-card-title">{{ credential.title }}</div>
+                      <div class="account-security-card-desc">{{ credential.description }}</div>
+                    </div>
+                    <button
+                      type="button"
+                      class="account-security-card-cta"
+                      :aria-expanded="openCredential === credential.attribute"
+                      @click="toggleCredential(credential.attribute)"
+                    >
+                      {{ credential.cta }}
+                      <span
+                        :class="['account-security-card-chevron', { 'account-security-card-chevron--open': openCredential === credential.attribute }]"
+                      >
+                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                          <path d="M6 9l6 6 6-6" />
+                        </svg>
+                      </span>
+                    </button>
+                  </div>
+                  <div v-if="openCredential === credential.attribute" class="account-security-card-form">
+                    <ChangeCredential :attribute="credential.attribute" title="" @success="closeCredential" />
+                  </div>
+                </div>
+              </div>
+            </template>
+          </div>
+        </main>
+      </div>
+    </SignedIn>
+
+    <SignedOut>
+      <main class="auth-main">
+        <div class="auth-card">
+          <p class="auth-subtitle">Sign in to manage your account.</p>
+          <NuxtLink to="/signin" class="btn-primary">Sign in</NuxtLink>
+        </div>
+      </main>
+    </SignedOut>
+  </div>
+</template>
diff --git a/tests/e2e/constants/credential-test-users.ts b/tests/e2e/constants/credential-test-users.ts
index d034e711..767a816b 100644
--- a/tests/e2e/constants/credential-test-users.ts
+++ b/tests/e2e/constants/credential-test-users.ts
@@ -5,7 +5,8 @@
  * Credential Test Users
  *
  * One dedicated user per app whose E2E suite includes a change-credential spec
- * (react/quickstart, vue/quickstart, browser/quickstart). These specs change the signed-in
+ * (react/quickstart, vue/quickstart, nextjs/quickstart, nuxt/quickstart, browser/quickstart,
+ * express/quickstart). These specs change the signed-in
  * user's password mid-test (see each change-credential.spec.ts's own doc comment) and restore
  * it afterward, but the suite runs `fullyParallel`, so any other concurrently-running test file
  * signing in as the same identity would race that temporary change and fail transiently.
@@ -31,7 +32,7 @@ export interface CredentialTestUser {
   username: string;
 }
 
-export const CredentialTestUserApps = ['BROWSER', 'REACT', 'VUE'] as const;
+export const CredentialTestUserApps = ['BROWSER', 'REACT', 'VUE', 'NEXTJS', 'NUXT', 'EXPRESS'] as const;
 export type CredentialTestUserApp = (typeof CredentialTestUserApps)[number];
 
 export function credentialTestUser(app: CredentialTestUserApp): CredentialTestUser {
diff --git a/tests/e2e/fixtures/sample-apps/index.ts b/tests/e2e/fixtures/sample-apps/index.ts
index 1180d46b..1fb2f087 100644
--- a/tests/e2e/fixtures/sample-apps/index.ts
+++ b/tests/e2e/fixtures/sample-apps/index.ts
@@ -10,13 +10,13 @@
 import {test as base} from '@playwright/test';
 import {BrowserQuickstartPage} from '../../pages/browser-quickstart.page';
 import {ExpressQuickstartPage} from '../../pages/express-quickstart.page';
-import {ThunderIDAccountPageSamplePage, ThunderIDWebSamplePage} from '../../pages/thunderid-web-sample.page';
+import {ThunderIDAccountPageSamplePage} from '../../pages/thunderid-web-sample.page';
 
 interface SampleAppFixtures {
   browserQuickstartPage: BrowserQuickstartPage;
   expressQuickstartPage: ExpressQuickstartPage;
-  nextjsQuickstartPage: ThunderIDWebSamplePage;
-  nuxtQuickstartPage: ThunderIDWebSamplePage;
+  nextjsQuickstartPage: ThunderIDAccountPageSamplePage;
+  nuxtQuickstartPage: ThunderIDAccountPageSamplePage;
   reactQuickstartPage: ThunderIDAccountPageSamplePage;
   vueQuickstartPage: ThunderIDAccountPageSamplePage;
 }
@@ -28,14 +28,14 @@ export const test = base.extend<SampleAppFixtures>({
   expressQuickstartPage: async ({page}, use) => {
     await use(new ExpressQuickstartPage(page));
   },
+  // Every quickstart's Nav redirects "Manage Profile" to a full Account page instead of the
+  // SDK's built-in popup — see ThunderIDAccountPageSamplePage's doc comment.
   nextjsQuickstartPage: async ({page}, use) => {
-    await use(new ThunderIDWebSamplePage(page));
+    await use(new ThunderIDAccountPageSamplePage(page));
   },
   nuxtQuickstartPage: async ({page}, use) => {
-    await use(new ThunderIDWebSamplePage(page));
+    await use(new ThunderIDAccountPageSamplePage(page));
   },
-  // react/quickstart and vue/quickstart's Nav redirects "Manage Profile" to a full Account page
-  // instead of the SDK's built-in popup — see ThunderIDAccountPageSamplePage's doc comment.
   reactQuickstartPage: async ({page}, use) => {
     await use(new ThunderIDAccountPageSamplePage(page));
   },
diff --git a/tests/e2e/pages/thunderid-web-sample.page.ts b/tests/e2e/pages/thunderid-web-sample.page.ts
index a34be7de..e2664792 100644
--- a/tests/e2e/pages/thunderid-web-sample.page.ts
+++ b/tests/e2e/pages/thunderid-web-sample.page.ts
@@ -59,22 +59,41 @@ export class ThunderIDWebSamplePage extends GateLoginPage {
     await this.verifyHomePageLoaded();
   }
 
+  /** Non-throwing, immediate check for whether a session is currently active — unlike
+   * {@link verifyLoggedIn}, doesn't wait or assert. Used to recover a test's cleanup logic when
+   * an earlier step failed partway through a sign-out/sign-in cycle and it's unclear whether the
+   * page is currently authenticated. */
+  async isLoggedIn(): Promise<boolean> {
+    return this.page.locator(USER_DROPDOWN_TRIGGER).first().isVisible();
+  }
+
   /** Clicks the dropdown trigger and waits for `target` (a menu item scoped to the dropdown) to
    * appear, re-clicking if it doesn't. The redirect landing page is server-rendered, so the
    * trigger can be visible (and Playwright-clickable) before React/Vue finishes attaching its
    * click handler — the click lands on plain markup and is silently lost, no error, nothing left
    * to wait on. A second click after hydration catches up recovers cleanly; this has been
    * observed to matter specifically for nuxt/quickstart under CI-level CPU contention, where the
-   * gap is wide enough to lose the first click outright rather than just render it late. */
+   * gap is wide enough to lose the first click outright rather than just render it late.
+   *
+   * Each click attempt is bounded by `DEFAULT_ACTION` (15 s) rather than the whole test timeout.
+   * Without that bound, a trigger that is visible but not yet actionable (e.g. covered during a
+   * Next.js SSR re-render after an OAuth redirect) would silently consume the entire remaining
+   * budget before failing; with it, the loop retries at most three times and surfaces a clear
+   * error if the trigger never becomes clickable. */
   protected async openDropdown(target: Locator): Promise<void> {
     const trigger = this.page.locator(USER_DROPDOWN_TRIGGER).first();
+    // Fail fast before the loop if the trigger is absent outright (e.g. user not signed in).
+    await trigger.waitFor({state: 'visible', timeout: Timeouts.ELEMENT_VISIBILITY});
     for (let attempt = 1; attempt <= 3; attempt++) {
-      await trigger.click();
       try {
+        await trigger.click({timeout: Timeouts.DEFAULT_ACTION});
         await expect(target).toBeVisible({timeout: 3000});
         return;
       } catch (error) {
         if (attempt === 3) throw error;
+        // Brief pause before the next attempt - lets any transient animation or loading
+        // overlay settle so the click is more likely to land cleanly.
+        await this.page.waitForTimeout(500);
       }
     }
   }
@@ -115,10 +134,9 @@ export class ThunderIDWebSamplePage extends GateLoginPage {
   /** Opens the SDK-provided profile dialog — `UserDropdown`'s built-in profile action, under the
    * plain "Profile" label. Nuxt inherits this via its own `UserDropdown` wrapper, which delegates
    * to the same `@thunderid/vue` component; nextjs likewise inherits React's "Manage Profile"
-   * label and behavior. react/quickstart and vue/quickstart's own Nav components now override
-   * this action to redirect to a full Account page instead — see
-   * {@link ThunderIDAccountPageSamplePage} below for their variant of the methods in this
-   * section. */
+   * label and behavior. Every quickstart's own Nav component now overrides this action to
+   * redirect to a full Account page instead — see {@link ThunderIDAccountPageSamplePage} below
+   * for their variant of the methods in this section. */
   async openManageProfile(): Promise<void> {
     const profileButton = this.page.getByRole('button', {name: /^(Manage Profile|Profile)$/});
     await this.openDropdown(profileButton);
@@ -154,12 +172,12 @@ export class ThunderIDWebSamplePage extends GateLoginPage {
 }
 
 /**
- * Variant of {@link ThunderIDWebSamplePage} for react/quickstart and vue/quickstart, whose Nav
- * components redirect `UserDropdown`'s profile action to a full "Manage Account" page (Home /
- * Personal info / Security tabs) instead of opening the SDK's built-in profile popup. nuxt and
- * nextjs are unaffected by that change — their own Nav components still use the base class's
- * dialog-based behavior — so this exists as a separate subclass rather than a change to the
- * shared base.
+ * Variant of {@link ThunderIDWebSamplePage} for every quickstart (react, vue, nextjs, nuxt),
+ * whose Nav components redirect `UserDropdown`'s profile action to a full "Manage Account" page
+ * (Home / Personal info / Security tabs) instead of opening the SDK's built-in profile popup.
+ * Kept as a subclass rather than folded into the shared base since the base class's dialog-based
+ * behavior remains independently correct and testable (it's what the SDK components fall back to
+ * when an app doesn't override `onManageProfile`, e.g. `browser/quickstart`).
  */
 export class ThunderIDAccountPageSamplePage extends ThunderIDWebSamplePage {
   /** Opens the Account page via the nav dropdown's "Manage Account" item. Lands on the Home
@@ -220,6 +238,11 @@ export class ThunderIDAccountPageSamplePage extends ThunderIDWebSamplePage {
    * {@link openSecurityTab} first. */
   async changeCredential(cta: string, newValue: string): Promise<void> {
     const toggle = this.page.getByRole('button', {name: cta});
+    // Bounded wait before the click: if the caller's page state doesn't actually have this row
+    // (e.g. the Security tab isn't open), fail fast with a clear "not visible" error instead of
+    // hanging on Playwright's default click-actionability wait, which is effectively bounded
+    // only by the whole test's timeout.
+    await expect(toggle).toBeVisible({timeout: Timeouts.ELEMENT_VISIBILITY});
     await toggle.click();
 
     await this.fillCredentialFields(newValue, newValue);
diff --git a/tests/e2e/tests/express-quickstart/change-credential.spec.ts b/tests/e2e/tests/express-quickstart/change-credential.spec.ts
new file mode 100644
index 00000000..a3694e53
--- /dev/null
+++ b/tests/e2e/tests/express-quickstart/change-credential.spec.ts
@@ -0,0 +1,94 @@
+// Copyright 2026 The ThunderID Authors
+// SPDX-License-Identifier: Apache-2.0
+
+/**
+ * express/quickstart — updating a credential (password) via the sample's own
+ * `PATCH /api/me/credentials` route. Unlike react/vue/nextjs/nuxt/browser, express/quickstart
+ * has no profile UI at all (see sign-in-out.spec.ts's own note on this), so there is no Security
+ * tab to drive here: this calls the route directly with the access token read off the existing
+ * Token debug page, the same token every other spec in this file already exercises.
+ *
+ * Signs in as a dedicated credential-test user (see constants/credential-test-users.ts),
+ * distinct from the shared TEST_USER_USERNAME every sign-in-out spec uses: TC001 below changes
+ * this user's password and changes it back (see the `finally` block), and the suite runs
+ * `fullyParallel`, so mutating the shared user's password would race every other
+ * concurrently-running spec's login across every app.
+ */
+
+import {APIRequestContext} from '@playwright/test';
+import {credentialTestUser} from '../../constants/credential-test-users';
+import {SampleApps, sampleAppUrl} from '../../constants/sample-apps';
+import {expect, test} from '../../fixtures/sample-apps';
+
+const appUrl = sampleAppUrl(SampleApps.EXPRESS);
+const {username, password} = credentialTestUser('EXPRESS');
+// Derived from the real password rather than hardcoded, so this works regardless of what
+// policy the schema's password attribute is configured with in a given environment.
+const tempPassword = `${password}-Tmp1!`;
+
+function updateCredentials(request: APIRequestContext, accessToken: string, newPassword: string) {
+  return request.patch(`${appUrl}/api/me/credentials`, {
+    data: {password: newPassword},
+    headers: {Authorization: `Bearer ${accessToken}`},
+  });
+}
+
+test.describe('express/quickstart - Change credential', () => {
+  test('TC001: a password change via PATCH /api/me/credentials takes effect and can be reverted', async ({
+    expressQuickstartPage,
+    request,
+  }) => {
+    await expressQuickstartPage.goto(appUrl);
+    await expressQuickstartPage.verifyHomePageLoaded();
+    await expressQuickstartPage.clickSignInButton();
+    await expressQuickstartPage.verifyLoginPageLoaded();
+    await expressQuickstartPage.login(username, password);
+    await expressQuickstartPage.verifyLoggedIn();
+
+    try {
+      await expressQuickstartPage.openTokenDebug();
+      await expressQuickstartPage.verifyTokenDebugLoaded();
+      const accessToken = await expressQuickstartPage.getDisplayedAccessToken();
+
+      const changeResponse = await updateCredentials(request, accessToken, tempPassword);
+      expect(changeResponse.status()).toBe(204);
+
+      // Prove the change landed server-side, not just that the route returned 204: sign out
+      // and back in using the new password.
+      await expressQuickstartPage.logout();
+      await expressQuickstartPage.verifyLoggedOut();
+
+      await expressQuickstartPage.clickSignInButton();
+      await expressQuickstartPage.verifyLoginPageLoaded();
+      await expressQuickstartPage.login(username, tempPassword);
+      await expressQuickstartPage.verifyLoggedIn();
+    } finally {
+      // Always attempt to restore the shared test user's original password, even if an
+      // assertion above failed. Re-open the Token debug page rather than assuming the try block
+      // left us there: if it failed before reaching that point, the page could still be on the
+      // login page or a stale session, and reading the token would hang or return the wrong one.
+      await expressQuickstartPage.openTokenDebug();
+      await expressQuickstartPage.verifyTokenDebugLoaded();
+      const revertToken = await expressQuickstartPage.getDisplayedAccessToken();
+
+      const revertResponse = await updateCredentials(request, revertToken, password);
+      expect(revertResponse.status()).toBe(204);
+    }
+
+    // The restore itself also has to have actually worked, or the next test to sign in with
+    // the original password would fail.
+    await expressQuickstartPage.logout();
+    await expressQuickstartPage.verifyLoggedOut();
+    await expressQuickstartPage.clickSignInButton();
+    await expressQuickstartPage.verifyLoginPageLoaded();
+    await expressQuickstartPage.login(username, password);
+    await expressQuickstartPage.verifyLoggedIn();
+  });
+
+  test('TC002: rejects an unauthenticated request', async ({request}) => {
+    const response = await request.patch(`${appUrl}/api/me/credentials`, {
+      data: {password: 'irrelevant'},
+    });
+    expect(response.status()).toBe(401);
+  });
+});
diff --git a/tests/e2e/tests/nextjs-quickstart/change-credential.spec.ts b/tests/e2e/tests/nextjs-quickstart/change-credential.spec.ts
new file mode 100644
index 00000000..c80b85ac
--- /dev/null
+++ b/tests/e2e/tests/nextjs-quickstart/change-credential.spec.ts
@@ -0,0 +1,112 @@
+// Copyright 2026 The ThunderID Authors
+// SPDX-License-Identifier: Apache-2.0
+
+/**
+ * nextjs/quickstart — changing a credential (password) via the Account page's Security tab.
+ * See react-quickstart/change-credential.spec.ts for the full prerequisites; identical shape,
+ * different app.
+ *
+ * Signs in as a dedicated credential-test user (see constants/credential-test-users.ts),
+ * distinct from the shared TEST_USER_USERNAME every sign-in-out spec uses: TC001 below changes
+ * this user's password and changes it back (see the `finally` block), and the suite runs
+ * `fullyParallel`, so mutating the shared user's password would race every other
+ * concurrently-running spec's login across every app. The two tests in this file are run
+ * serially (below) so they don't race each other over their own shared dedicated user either.
+ */
+
+import {credentialTestUser} from '../../constants/credential-test-users';
+import {SampleApps, sampleAppUrl} from '../../constants/sample-apps';
+import {Timeouts} from '../../constants/timeouts';
+import {expect, test} from '../../fixtures/sample-apps';
+
+const appUrl = sampleAppUrl(SampleApps.NEXTJS);
+const {username, password} = credentialTestUser('NEXTJS');
+// Derived from the real password rather than hardcoded, so this works regardless of what
+// policy the schema's password attribute is configured with in a given environment.
+const tempPassword = `${password}-Tmp1!`;
+
+test.describe.configure({mode: 'serial'});
+
+test.describe('nextjs/quickstart - Change credential', () => {
+  test('TC001: a password change via the Security tab takes effect and can be reverted', async ({
+    nextjsQuickstartPage,
+  }) => {
+    // Three full redirect-login round trips plus two credential submits, versus one round trip
+    // for a typical test in this suite. Next.js adds SSR overhead to every OAuth round trip that
+    // pure-CSR apps (react, vue) avoid, so this test needs extra budget beyond the 2× that would
+    // cover a CSR equivalent.
+    test.setTimeout(Timeouts.GLOBAL_TEST * 3);
+
+    await nextjsQuickstartPage.goto(appUrl);
+    await nextjsQuickstartPage.verifyHomePageLoaded();
+    await nextjsQuickstartPage.clickSignInButton();
+    await nextjsQuickstartPage.verifyLoginPageLoaded();
+    await nextjsQuickstartPage.login(username, password);
+    await nextjsQuickstartPage.verifyLoggedIn();
+
+    await nextjsQuickstartPage.openSecurityTab();
+
+    try {
+      await nextjsQuickstartPage.changeCredential('Change password', tempPassword);
+
+      // Prove the change landed server-side, not just that the UI collapsed the form: sign
+      // out and back in using the new password.
+      await nextjsQuickstartPage.logout();
+      await nextjsQuickstartPage.verifyLoggedOut();
+
+      await nextjsQuickstartPage.clickSignInButton();
+      await nextjsQuickstartPage.verifyLoginPageLoaded();
+      await nextjsQuickstartPage.login(username, tempPassword);
+      await nextjsQuickstartPage.verifyLoggedIn();
+
+      await nextjsQuickstartPage.openSecurityTab();
+    } finally {
+      // Always attempt to restore the shared test user's original password, even if an
+      // assertion above failed. The try block can fail anywhere from right after the password
+      // was changed to tempPassword through to confirming the re-login with it, and every one of
+      // those failure points leaves the page signed out (logout already happened by then) with
+      // the password already changed server-side — so if there's no active session, sign back in
+      // with tempPassword (the password this point in the flow implies is current) before
+      // reverting, rather than assuming the try block left us signed in and on the Security tab.
+      if (!(await nextjsQuickstartPage.isLoggedIn())) {
+        await nextjsQuickstartPage.clickSignInButton();
+        await nextjsQuickstartPage.verifyLoginPageLoaded();
+        await nextjsQuickstartPage.login(username, tempPassword);
+        await nextjsQuickstartPage.verifyLoggedIn();
+      }
+      await nextjsQuickstartPage.openSecurityTab();
+      await nextjsQuickstartPage.changeCredential('Change password', password);
+    }
+
+    // The restore itself also has to have actually worked, or the next test to sign in with
+    // the original password would fail.
+    await nextjsQuickstartPage.logout();
+    await nextjsQuickstartPage.verifyLoggedOut();
+    await nextjsQuickstartPage.clickSignInButton();
+    await nextjsQuickstartPage.verifyLoginPageLoaded();
+    await nextjsQuickstartPage.login(username, password);
+    await nextjsQuickstartPage.verifyLoggedIn();
+  });
+
+  test('TC002: the submit button stays disabled until the new value and confirmation match', async ({
+    nextjsQuickstartPage,
+  }) => {
+    await nextjsQuickstartPage.goto(appUrl);
+    await nextjsQuickstartPage.verifyHomePageLoaded();
+    await nextjsQuickstartPage.clickSignInButton();
+    await nextjsQuickstartPage.verifyLoginPageLoaded();
+    await nextjsQuickstartPage.login(username, password);
+    await nextjsQuickstartPage.verifyLoggedIn();
+
+    await nextjsQuickstartPage.openSecurityTab();
+    await nextjsQuickstartPage.toggleCredential('Change password');
+
+    expect(await nextjsQuickstartPage.isCredentialSubmitDisabled()).toBe(true);
+
+    await nextjsQuickstartPage.fillCredentialFields('mismatch-one', 'mismatch-two');
+    expect(await nextjsQuickstartPage.isCredentialSubmitDisabled()).toBe(true);
+
+    // Collapse without submitting — nothing was written, so there is nothing to restore.
+    await nextjsQuickstartPage.toggleCredential('Change password');
+  });
+});
diff --git a/tests/e2e/tests/nuxt-quickstart/change-credential.spec.ts b/tests/e2e/tests/nuxt-quickstart/change-credential.spec.ts
new file mode 100644
index 00000000..a9882df3
--- /dev/null
+++ b/tests/e2e/tests/nuxt-quickstart/change-credential.spec.ts
@@ -0,0 +1,111 @@
+// Copyright 2026 The ThunderID Authors
+// SPDX-License-Identifier: Apache-2.0
+
+/**
+ * nuxt/quickstart — changing a credential (password) via the Account page's Security tab. See
+ * react-quickstart/change-credential.spec.ts for the full prerequisites; identical shape,
+ * different app.
+ *
+ * Signs in as a dedicated credential-test user (see constants/credential-test-users.ts),
+ * distinct from the shared TEST_USER_USERNAME every sign-in-out spec uses: TC001 below changes
+ * this user's password and changes it back (see the `finally` block), and the suite runs
+ * `fullyParallel`, so mutating the shared user's password would race every other
+ * concurrently-running spec's login across every app. The two tests in this file are run
+ * serially (below) so they don't race each other over their own shared dedicated user either.
+ */
+
+import {credentialTestUser} from '../../constants/credential-test-users';
+import {SampleApps, sampleAppUrl} from '../../constants/sample-apps';
+import {Timeouts} from '../../constants/timeouts';
+import {expect, test} from '../../fixtures/sample-apps';
+
+const appUrl = sampleAppUrl(SampleApps.NUXT);
+const {username, password} = credentialTestUser('NUXT');
+// Derived from the real password rather than hardcoded, so this works regardless of what
+// policy the schema's password attribute is configured with in a given environment.
+const tempPassword = `${password}-Tmp1!`;
+
+test.describe.configure({mode: 'serial'});
+
+test.describe('nuxt/quickstart - Change credential', () => {
+  test('TC001: a password change via the Security tab takes effect and can be reverted', async ({
+    nuxtQuickstartPage,
+  }) => {
+    // Three full redirect-login round trips plus two credential submits, versus one round trip
+    // for a typical test in this suite — the default per-test timeout leaves too little margin
+    // for normal CI slowness.
+    test.setTimeout(Timeouts.GLOBAL_TEST * 2);
+
+    await nuxtQuickstartPage.goto(appUrl);
+    await nuxtQuickstartPage.verifyHomePageLoaded();
+    await nuxtQuickstartPage.clickSignInButton();
+    await nuxtQuickstartPage.verifyLoginPageLoaded();
+    await nuxtQuickstartPage.login(username, password);
+    await nuxtQuickstartPage.verifyLoggedIn();
+
+    await nuxtQuickstartPage.openSecurityTab();
+
+    try {
+      await nuxtQuickstartPage.changeCredential('Change password', tempPassword);
+
+      // Prove the change landed server-side, not just that the UI collapsed the form: sign
+      // out and back in using the new password.
+      await nuxtQuickstartPage.logout();
+      await nuxtQuickstartPage.verifyLoggedOut();
+
+      await nuxtQuickstartPage.clickSignInButton();
+      await nuxtQuickstartPage.verifyLoginPageLoaded();
+      await nuxtQuickstartPage.login(username, tempPassword);
+      await nuxtQuickstartPage.verifyLoggedIn();
+
+      await nuxtQuickstartPage.openSecurityTab();
+    } finally {
+      // Always attempt to restore the shared test user's original password, even if an
+      // assertion above failed. The try block can fail anywhere from right after the password
+      // was changed to tempPassword through to confirming the re-login with it, and every one of
+      // those failure points leaves the page signed out (logout already happened by then) with
+      // the password already changed server-side — so if there's no active session, sign back in
+      // with tempPassword (the password this point in the flow implies is current) before
+      // reverting, rather than assuming the try block left us signed in and on the Security tab.
+      if (!(await nuxtQuickstartPage.isLoggedIn())) {
+        await nuxtQuickstartPage.clickSignInButton();
+        await nuxtQuickstartPage.verifyLoginPageLoaded();
+        await nuxtQuickstartPage.login(username, tempPassword);
+        await nuxtQuickstartPage.verifyLoggedIn();
+      }
+      await nuxtQuickstartPage.openSecurityTab();
+      await nuxtQuickstartPage.changeCredential('Change password', password);
+    }
+
+    // The restore itself also has to have actually worked, or the next test to sign in with
+    // the original password would fail.
+    await nuxtQuickstartPage.logout();
+    await nuxtQuickstartPage.verifyLoggedOut();
+    await nuxtQuickstartPage.clickSignInButton();
+    await nuxtQuickstartPage.verifyLoginPageLoaded();
+    await nuxtQuickstartPage.login(username, password);
+    await nuxtQuickstartPage.verifyLoggedIn();
+  });
+
+  test('TC002: the submit button stays disabled until the new value and confirmation match', async ({
+    nuxtQuickstartPage,
+  }) => {
+    await nuxtQuickstartPage.goto(appUrl);
+    await nuxtQuickstartPage.verifyHomePageLoaded();
+    await nuxtQuickstartPage.clickSignInButton();
+    await nuxtQuickstartPage.verifyLoginPageLoaded();
+    await nuxtQuickstartPage.login(username, password);
+    await nuxtQuickstartPage.verifyLoggedIn();
+
+    await nuxtQuickstartPage.openSecurityTab();
+    await nuxtQuickstartPage.toggleCredential('Change password');
+
+    expect(await nuxtQuickstartPage.isCredentialSubmitDisabled()).toBe(true);
+
+    await nuxtQuickstartPage.fillCredentialFields('mismatch-one', 'mismatch-two');
+    expect(await nuxtQuickstartPage.isCredentialSubmitDisabled()).toBe(true);
+
+    // Collapse without submitting — nothing was written, so there is nothing to restore.
+    await nuxtQuickstartPage.toggleCredential('Change password');
+  });
+});