From 9f5683682250a6bcfb4fbf0b2fd28875260a2603 Mon Sep 17 00:00:00 2001
From: evavirseda <evirseda@boxfish.studio>
Date: Tue, 5 May 2026 08:42:05 +0200
Subject: [PATCH 1/8] add change password

---
 .changeset/clever-masks-share.md              |   5 +
 .../components/atoms/checkbox/Checkbox.tsx    |   4 +-
 .../background/connections/uiConnection.ts    |  54 +++++++++
 .../messages/payloads/methodPayload.ts        |   1 +
 .../src/ui/app/background-client/index.ts     |  12 ++
 .../menu/content/ChangePasswordSettings.tsx   | 112 ++++++++++++++++++
 .../menu/content/WalletSettingsMenuList.tsx   |  11 ++
 .../ui/app/components/menu/content/index.tsx  |   2 +
 8 files changed, 199 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/clever-masks-share.md
 create mode 100644 apps/wallet/src/ui/app/components/menu/content/ChangePasswordSettings.tsx

diff --git a/.changeset/clever-masks-share.md b/.changeset/clever-masks-share.md
new file mode 100644
index 0000000000..8496f1324a
--- /dev/null
+++ b/.changeset/clever-masks-share.md
@@ -0,0 +1,5 @@
+---
+'@iota/apps-ui-kit': minor
+---
+
+fix checkbox alignment
diff --git a/apps/ui-kit/src/lib/components/atoms/checkbox/Checkbox.tsx b/apps/ui-kit/src/lib/components/atoms/checkbox/Checkbox.tsx
index 8620115f14..241383b8fa 100644
--- a/apps/ui-kit/src/lib/components/atoms/checkbox/Checkbox.tsx
+++ b/apps/ui-kit/src/lib/components/atoms/checkbox/Checkbox.tsx
@@ -98,7 +98,7 @@ export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
                 <span
                     onClick={() => inputRef.current?.click()}
                     className={cx(
-                        'checkbox-base checkbox-state checkbox-icon checkbox-icon-hidden',
+                        'checkbox-base checkbox-state checkbox-icon checkbox-icon-hidden shrink-0',
                         'checkbox-border-default',
                         'peer-[&:is(:checked,:indeterminate)]:checkbox-border-checked',
                         'peer-[&:is(:checked,:indeterminate)]:checkbox-bg-checked',
@@ -119,7 +119,7 @@ export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
 
 function LabelText({ label, name }: Pick<CheckboxProps, 'label' | 'name'>) {
     return (
-        <label htmlFor={name} className="checkbox-label checkbox-label-disabled">
+        <label htmlFor={name} className="checkbox-label checkbox-label-disabled flex-1">
             {label}
         </label>
     );
diff --git a/apps/wallet/src/background/connections/uiConnection.ts b/apps/wallet/src/background/connections/uiConnection.ts
index fd11606be5..ad945d9624 100644
--- a/apps/wallet/src/background/connections/uiConnection.ts
+++ b/apps/wallet/src/background/connections/uiConnection.ts
@@ -47,6 +47,7 @@ import {
 import { accountsEvents } from '../accounts/events';
 import { getAutoLockMinutes, notifyUserActive, setAutoLockMinutes } from '../autoLockAccounts';
 import { backupDB, getDB, SETTINGS_KEYS } from '../db';
+import { decrypt, encrypt } from '_src/shared/cryptography/keystore';
 import { clearStatus, doMigration, getStatus } from '../storageMigration';
 import NetworkEnv from '../networkEnv';
 import { Connection } from './connection';
@@ -276,6 +277,59 @@ export class UiConnection extends Connection {
                 this.send(createMessage({ type: 'done' }, msg.id));
                 accountSourcesEvents.emit('accountSourcesChanged');
                 accountsEvents.emit('accountsChanged');
+            } else if (isMethodPayload(payload, 'changePassword')) {
+                const { currentPassword, newPassword } = payload.args;
+                const db = await getDB();
+                const allSources = await db.accountSources.toArray();
+                const allAccounts = await db.accounts.toArray();
+
+                let verified = false;
+                for (const source of allSources) {
+                    try {
+                        await decrypt(currentPassword, (source as unknown as { encryptedData: string }).encryptedData);
+                        verified = true;
+                        break;
+                    } catch {
+                        // continue to next
+                    }
+                }
+                if (!verified) {
+                    for (const account of allAccounts) {
+                        const acc = account as unknown as { encrypted?: string };
+                        if (acc.encrypted) {
+                            try {
+                                await decrypt(currentPassword, acc.encrypted);
+                                verified = true;
+                                break;
+                            } catch {
+                                // continue to next
+                            }
+                        }
+                    }
+                }
+                if (!verified) {
+                    throw new Error('Current password is incorrect');
+                }
+
+                await db.transaction('rw', db.accountSources, db.accounts, async () => {
+                    for (const source of allSources) {
+                        const src = source as unknown as { id: string; encryptedData: string };
+                        const decrypted = await Dexie.waitFor(decrypt(currentPassword, src.encryptedData));
+                        const newEncryptedData = await Dexie.waitFor(encrypt(newPassword, decrypted));
+                        await db.accountSources.update(src.id, { encryptedData: newEncryptedData });
+                    }
+                    for (const account of allAccounts) {
+                        const acc = account as { id: string; encrypted?: string };
+                        if (acc.encrypted) {
+                            const decrypted = await Dexie.waitFor(decrypt(currentPassword, acc.encrypted));
+                            const newEncrypted = await Dexie.waitFor(encrypt(newPassword, decrypted));
+                            await db.accounts.update(acc.id, { encrypted: newEncrypted });
+                        }
+                    }
+                });
+
+                await backupDB();
+                this.send(createMessage({ type: 'done' }, msg.id));
             } else if (isDeriveBipPathAccountsFinder(payload)) {
                 const accountSource = await getAccountSourceByID(payload.sourceID);
 
diff --git a/apps/wallet/src/shared/messaging/messages/payloads/methodPayload.ts b/apps/wallet/src/shared/messaging/messages/payloads/methodPayload.ts
index 55ff00cddb..f4846e8d29 100644
--- a/apps/wallet/src/shared/messaging/messages/payloads/methodPayload.ts
+++ b/apps/wallet/src/shared/messaging/messages/payloads/methodPayload.ts
@@ -112,6 +112,7 @@ type MethodPayloads = {
         data: PasswordRecoveryData;
     };
     removeAccount: { accountID: string };
+    changePassword: { currentPassword: string; newPassword: string };
 };
 
 type Methods = keyof MethodPayloads;
diff --git a/apps/wallet/src/ui/app/background-client/index.ts b/apps/wallet/src/ui/app/background-client/index.ts
index 61bb7ee72f..6a20902371 100644
--- a/apps/wallet/src/ui/app/background-client/index.ts
+++ b/apps/wallet/src/ui/app/background-client/index.ts
@@ -603,6 +603,18 @@ export class BackgroundClient {
         );
     }
 
+    public changePassword(args: MethodPayload<'changePassword'>['args']) {
+        return lastValueFrom(
+            this.sendMessage(
+                createMessage<MethodPayload<'changePassword'>>({
+                    type: 'method-payload',
+                    method: 'changePassword',
+                    args,
+                }),
+            ).pipe(take(1)),
+        );
+    }
+
     public verifyPasswordRecoveryData(args: MethodPayload<'verifyPasswordRecoveryData'>['args']) {
         return lastValueFrom(
             this.sendMessage(
diff --git a/apps/wallet/src/ui/app/components/menu/content/ChangePasswordSettings.tsx b/apps/wallet/src/ui/app/components/menu/content/ChangePasswordSettings.tsx
new file mode 100644
index 0000000000..0da6516cac
--- /dev/null
+++ b/apps/wallet/src/ui/app/components/menu/content/ChangePasswordSettings.tsx
@@ -0,0 +1,112 @@
+// Copyright (c) 2026 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import { useZodForm, toast } from '@iota/core';
+import { z } from 'zod';
+import { useNavigate } from 'react-router-dom';
+import { Button, ButtonHtmlType, ButtonType, Input, InputType } from '@iota/apps-ui-kit';
+import { Overlay } from '_components';
+import { Form } from '_src/ui/app/shared/forms/Form';
+import { CheckboxField } from '_src/ui/app/shared/forms/CheckboxField';
+import { useBackgroundClient } from '_src/ui/app/hooks/useBackgroundClient';
+
+const formSchema = z
+    .object({
+        currentPassword: z.string().nonempty('Required'),
+        newPassword: z.string().nonempty('Required'),
+        confirmPassword: z.string().nonempty('Required'),
+        confirmed: z.literal<boolean>(true, {
+            errorMap: () => ({ message: 'You must confirm you understand this change' }),
+        }),
+    })
+    .refine((data) => data.newPassword === data.confirmPassword, {
+        path: ['confirmPassword'],
+        message: "Passwords don't match",
+    });
+
+type FormValues = z.infer<typeof formSchema>;
+
+export function ChangePasswordSettings() {
+    const navigate = useNavigate();
+    const backgroundClient = useBackgroundClient();
+
+    const form = useZodForm({
+        mode: 'all',
+        schema: formSchema,
+        defaultValues: {
+            currentPassword: '',
+            newPassword: '',
+            confirmPassword: '',
+            confirmed: false as unknown as true,
+        },
+    });
+
+    const {
+        register,
+        formState: { isSubmitting, isValid, errors },
+    } = form;
+
+    async function handleSubmit(values: FormValues) {
+        try {
+            await backgroundClient.changePassword({
+                currentPassword: values.currentPassword,
+                newPassword: values.newPassword,
+            });
+            toast.success('Password updated successfully');
+            navigate(-1);
+        } catch (e) {
+            toast.error((e as Error)?.message || 'Failed to update password');
+        }
+    }
+
+    return (
+        <Overlay
+            showModal
+            title="Change Password"
+            closeOverlay={() => navigate('/tokens')}
+            showBackButton
+        >
+            <Form className="flex h-full flex-col gap-y-md" form={form} onSubmit={handleSubmit}>
+                <Input
+                    type={InputType.Password}
+                    isVisibilityToggleEnabled
+                    label="Current Password"
+                    placeholder="Enter current password"
+                    errorMessage={errors.currentPassword?.message}
+                    {...register('currentPassword')}
+                    data-amp-mask
+                />
+                <Input
+                    type={InputType.Password}
+                    isVisibilityToggleEnabled
+                    label="New Password"
+                    placeholder="Enter new password"
+                    errorMessage={errors.newPassword?.message}
+                    {...register('newPassword')}
+                    data-amp-mask
+                />
+                <Input
+                    type={InputType.Password}
+                    isVisibilityToggleEnabled
+                    label="Confirm New Password"
+                    placeholder="Confirm new password"
+                    errorMessage={errors.confirmPassword?.message}
+                    {...register('confirmPassword')}
+                    data-amp-mask
+                />
+                <div className="flex-1" />
+                <CheckboxField
+                    name="confirmed"
+                    label="This password secures all accounts. If I forget it, IOTA cannot restore access"
+                />
+                <Button
+                    type={ButtonType.Primary}
+                    htmlType={ButtonHtmlType.Submit}
+                    text="Update Password"
+                    disabled={!isValid || isSubmitting}
+                    fullWidth
+                />
+            </Form>
+        </Overlay>
+    );
+}
diff --git a/apps/wallet/src/ui/app/components/menu/content/WalletSettingsMenuList.tsx b/apps/wallet/src/ui/app/components/menu/content/WalletSettingsMenuList.tsx
index 111ce21ed8..352c04b1d5 100644
--- a/apps/wallet/src/ui/app/components/menu/content/WalletSettingsMenuList.tsx
+++ b/apps/wallet/src/ui/app/components/menu/content/WalletSettingsMenuList.tsx
@@ -14,6 +14,7 @@ import {
     DarkMode,
     Globe,
     Info,
+    Key,
     LockLocked,
     Logout,
     Expand,
@@ -45,6 +46,7 @@ export function MenuList() {
     const networkUrl = useNextMenuUrl(true, '/network');
     const autoLockUrl = useNextMenuUrl(true, '/auto-lock');
     const themeUrl = useNextMenuUrl(true, '/theme');
+    const changePasswordUrl = useNextMenuUrl(true, '/change-password');
     const network = useAppSelector((state) => state.app.network);
     const networkConfig = network === Network.Custom ? getCustomNetwork() : getNetwork(network);
     const version = Browser.runtime.getManifest().version;
@@ -79,6 +81,10 @@ export function MenuList() {
     function onThemeClick() {
         navigate(themeUrl);
     }
+
+    function onChangePasswordClick() {
+        navigate(changePasswordUrl);
+    }
     async function onSidePanelClick(
         _isToggled: boolean,
         event: React.ChangeEvent<HTMLInputElement>,
@@ -133,6 +139,11 @@ export function MenuList() {
             icon: <LockLocked />,
             onClick: onAutoLockClick,
         },
+        {
+            title: 'Change Password',
+            icon: <Key />,
+            onClick: onChangePasswordClick,
+        },
         {
             title: 'Themes',
             icon: <DarkMode />,
diff --git a/apps/wallet/src/ui/app/components/menu/content/index.tsx b/apps/wallet/src/ui/app/components/menu/content/index.tsx
index c0b67da854..550b69335c 100644
--- a/apps/wallet/src/ui/app/components/menu/content/index.tsx
+++ b/apps/wallet/src/ui/app/components/menu/content/index.tsx
@@ -17,6 +17,7 @@ import { AutoLockAccounts } from './AutoLockAccounts';
 import { NetworkSettings } from './NetworkSettings';
 import { MenuList } from './WalletSettingsMenuList';
 import { ThemeSettings } from './ThemeSettings';
+import { ChangePasswordSettings } from './ChangePasswordSettings';
 
 const CLOSE_KEY_CODES: string[] = ['Escape'];
 
@@ -51,6 +52,7 @@ export function MenuContent() {
                         <Route path="/network" element={<NetworkSettings />} />
                         <Route path="/auto-lock" element={<AutoLockAccounts />} />
                         <Route path="/theme" element={<ThemeSettings />} />
+                        <Route path="/change-password" element={<ChangePasswordSettings />} />
                         <Route path="*" element={<Navigate to={menuHomeUrl} replace={true} />} />
                     </Routes>
                 </MainLocationContext.Provider>

From 84c3b2d51cb0b4af39491058c6c77d7f41a828b5 Mon Sep 17 00:00:00 2001
From: evavirseda <evirseda@boxfish.studio>
Date: Tue, 5 May 2026 09:05:15 +0200
Subject: [PATCH 2/8] add validation

---
 .../menu/content/ChangePasswordSettings.tsx   | 25 ++++++++++++++++---
 1 file changed, 22 insertions(+), 3 deletions(-)

diff --git a/apps/wallet/src/ui/app/components/menu/content/ChangePasswordSettings.tsx b/apps/wallet/src/ui/app/components/menu/content/ChangePasswordSettings.tsx
index 0da6516cac..976e39ae5f 100644
--- a/apps/wallet/src/ui/app/components/menu/content/ChangePasswordSettings.tsx
+++ b/apps/wallet/src/ui/app/components/menu/content/ChangePasswordSettings.tsx
@@ -9,11 +9,26 @@ import { Overlay } from '_components';
 import { Form } from '_src/ui/app/shared/forms/Form';
 import { CheckboxField } from '_src/ui/app/shared/forms/CheckboxField';
 import { useBackgroundClient } from '_src/ui/app/hooks/useBackgroundClient';
+import zxcvbn from 'zxcvbn';
 
 const formSchema = z
     .object({
         currentPassword: z.string().nonempty('Required'),
-        newPassword: z.string().nonempty('Required'),
+        newPassword: z
+            .string()
+            .nonempty('Required')
+            .superRefine((val, ctx) => {
+                const {
+                    score,
+                    feedback: { warning, suggestions },
+                } = zxcvbn(val);
+                if (score <= 2) {
+                    ctx.addIssue({
+                        code: z.ZodIssueCode.custom,
+                        message: `${warning ? `${warning}.` : 'Password is not strong enough.'}${suggestions?.length ? ` ${suggestions.join(' ')}` : ''}`,
+                    });
+                }
+            }),
         confirmPassword: z.string().nonempty('Required'),
         confirmed: z.literal<boolean>(true, {
             errorMap: () => ({ message: 'You must confirm you understand this change' }),
@@ -22,6 +37,10 @@ const formSchema = z
     .refine((data) => data.newPassword === data.confirmPassword, {
         path: ['confirmPassword'],
         message: "Passwords don't match",
+    })
+    .refine((data) => data.newPassword !== data.currentPassword, {
+        path: ['newPassword'],
+        message: 'New password must be different from current password',
     });
 
 type FormValues = z.infer<typeof formSchema>;
@@ -49,8 +68,8 @@ export function ChangePasswordSettings() {
     async function handleSubmit(values: FormValues) {
         try {
             await backgroundClient.changePassword({
-                currentPassword: values.currentPassword,
-                newPassword: values.newPassword,
+                currentPassword: values.currentPassword.trim(),
+                newPassword: values.newPassword.trim(),
             });
             toast.success('Password updated successfully');
             navigate(-1);

From d349e0b63988fa853bb7e95f623dfec30f3c1239 Mon Sep 17 00:00:00 2001
From: evavirseda <evirseda@boxfish.studio>
Date: Tue, 5 May 2026 09:06:56 +0200
Subject: [PATCH 3/8] fix format

---
 .../background/connections/uiConnection.ts    | 21 ++++++++++++++-----
 1 file changed, 16 insertions(+), 5 deletions(-)

diff --git a/apps/wallet/src/background/connections/uiConnection.ts b/apps/wallet/src/background/connections/uiConnection.ts
index ad945d9624..d12884dd39 100644
--- a/apps/wallet/src/background/connections/uiConnection.ts
+++ b/apps/wallet/src/background/connections/uiConnection.ts
@@ -286,7 +286,10 @@ export class UiConnection extends Connection {
                 let verified = false;
                 for (const source of allSources) {
                     try {
-                        await decrypt(currentPassword, (source as unknown as { encryptedData: string }).encryptedData);
+                        await decrypt(
+                            currentPassword,
+                            (source as unknown as { encryptedData: string }).encryptedData,
+                        );
                         verified = true;
                         break;
                     } catch {
@@ -314,15 +317,23 @@ export class UiConnection extends Connection {
                 await db.transaction('rw', db.accountSources, db.accounts, async () => {
                     for (const source of allSources) {
                         const src = source as unknown as { id: string; encryptedData: string };
-                        const decrypted = await Dexie.waitFor(decrypt(currentPassword, src.encryptedData));
-                        const newEncryptedData = await Dexie.waitFor(encrypt(newPassword, decrypted));
+                        const decrypted = await Dexie.waitFor(
+                            decrypt(currentPassword, src.encryptedData),
+                        );
+                        const newEncryptedData = await Dexie.waitFor(
+                            encrypt(newPassword, decrypted),
+                        );
                         await db.accountSources.update(src.id, { encryptedData: newEncryptedData });
                     }
                     for (const account of allAccounts) {
                         const acc = account as { id: string; encrypted?: string };
                         if (acc.encrypted) {
-                            const decrypted = await Dexie.waitFor(decrypt(currentPassword, acc.encrypted));
-                            const newEncrypted = await Dexie.waitFor(encrypt(newPassword, decrypted));
+                            const decrypted = await Dexie.waitFor(
+                                decrypt(currentPassword, acc.encrypted),
+                            );
+                            const newEncrypted = await Dexie.waitFor(
+                                encrypt(newPassword, decrypted),
+                            );
                             await db.accounts.update(acc.id, { encrypted: newEncrypted });
                         }
                     }

From 99486a59abb31fadfff54196940294af343640ba Mon Sep 17 00:00:00 2001
From: evavirseda <evirseda@boxfish.studio>
Date: Tue, 5 May 2026 09:11:17 +0200
Subject: [PATCH 4/8] minor fix

---
 .../menu/content/ChangePasswordSettings.tsx          | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/apps/wallet/src/ui/app/components/menu/content/ChangePasswordSettings.tsx b/apps/wallet/src/ui/app/components/menu/content/ChangePasswordSettings.tsx
index 976e39ae5f..35251c122e 100644
--- a/apps/wallet/src/ui/app/components/menu/content/ChangePasswordSettings.tsx
+++ b/apps/wallet/src/ui/app/components/menu/content/ChangePasswordSettings.tsx
@@ -89,8 +89,8 @@ export function ChangePasswordSettings() {
                 <Input
                     type={InputType.Password}
                     isVisibilityToggleEnabled
-                    label="Current Password"
-                    placeholder="Enter current password"
+                    label="Current password"
+                    placeholder="********"
                     errorMessage={errors.currentPassword?.message}
                     {...register('currentPassword')}
                     data-amp-mask
@@ -98,8 +98,8 @@ export function ChangePasswordSettings() {
                 <Input
                     type={InputType.Password}
                     isVisibilityToggleEnabled
-                    label="New Password"
-                    placeholder="Enter new password"
+                    label="New password"
+                    placeholder="********"
                     errorMessage={errors.newPassword?.message}
                     {...register('newPassword')}
                     data-amp-mask
@@ -107,8 +107,8 @@ export function ChangePasswordSettings() {
                 <Input
                     type={InputType.Password}
                     isVisibilityToggleEnabled
-                    label="Confirm New Password"
-                    placeholder="Confirm new password"
+                    label="Confirm new password"
+                    placeholder="********"
                     errorMessage={errors.confirmPassword?.message}
                     {...register('confirmPassword')}
                     data-amp-mask

From 3fe2feadf5f3548528e53ea5c877ff97481a0482 Mon Sep 17 00:00:00 2001
From: evavirseda <evirseda@boxfish.studio>
Date: Tue, 26 May 2026 14:49:39 +0200
Subject: [PATCH 5/8] trigger vercel deploy


From f40a70ee507f6718491d433eed8f217869d7f245 Mon Sep 17 00:00:00 2001
From: evavirseda <evirseda@boxfish.studio>
Date: Wed, 27 May 2026 16:22:40 +0200
Subject: [PATCH 6/8] apply suggestions

---
 .../app/components/menu/content/ChangePasswordSettings.tsx   | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/apps/wallet/src/ui/app/components/menu/content/ChangePasswordSettings.tsx b/apps/wallet/src/ui/app/components/menu/content/ChangePasswordSettings.tsx
index 35251c122e..516105d197 100644
--- a/apps/wallet/src/ui/app/components/menu/content/ChangePasswordSettings.tsx
+++ b/apps/wallet/src/ui/app/components/menu/content/ChangePasswordSettings.tsx
@@ -17,6 +17,7 @@ const formSchema = z
         newPassword: z
             .string()
             .nonempty('Required')
+            .min(8, 'Must be at least 8 characters')
             .superRefine((val, ctx) => {
                 const {
                     score,
@@ -68,8 +69,8 @@ export function ChangePasswordSettings() {
     async function handleSubmit(values: FormValues) {
         try {
             await backgroundClient.changePassword({
-                currentPassword: values.currentPassword.trim(),
-                newPassword: values.newPassword.trim(),
+                currentPassword: values.currentPassword,
+                newPassword: values.newPassword,
             });
             toast.success('Password updated successfully');
             navigate(-1);

From e8ba4993abcd152e05e23722b6522682c96423b7 Mon Sep 17 00:00:00 2001
From: evavirseda <evirseda@boxfish.studio>
Date: Thu, 28 May 2026 12:28:48 +0200
Subject: [PATCH 7/8] make it scrollable

---
 .../ui/app/components/menu/content/WalletSettingsMenuList.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/wallet/src/ui/app/components/menu/content/WalletSettingsMenuList.tsx b/apps/wallet/src/ui/app/components/menu/content/WalletSettingsMenuList.tsx
index 352c04b1d5..d6f7618ec5 100644
--- a/apps/wallet/src/ui/app/components/menu/content/WalletSettingsMenuList.tsx
+++ b/apps/wallet/src/ui/app/components/menu/content/WalletSettingsMenuList.tsx
@@ -186,7 +186,7 @@ export function MenuList() {
     return (
         <Overlay showModal title="Settings" closeOverlay={() => navigate('/tokens')}>
             <div className="flex h-full w-full flex-col justify-between">
-                <div className="flex flex-col">
+                <div className="flex min-h-0 flex-1 flex-col overflow-y-auto">
                     {MENU_ITEMS.filter((item) => !item.hidden).map((item, index) => (
                         <Card key={index} type={CardType.Default} onClick={item.onClick}>
                             <CardImage type={ImageType.BgSolid}>
@@ -224,7 +224,7 @@ export function MenuList() {
                         }}
                     />
                 </div>
-                <div className="flex flex-col gap-y-lg">
+                <div className="flex flex-col gap-y-sm pt-sm">
                     <FaucetRequestButton />
                     <div className="flex flex-row items-center justify-center gap-x-md">
                         <span className="text-label-sm text-iota-neutral-40 dark:text-iota-neutral-60">

From 53b36e6630e75fe1fc9e36387cc3b094cd0135f4 Mon Sep 17 00:00:00 2001
From: evavirseda <evirseda@boxfish.studio>
Date: Thu, 16 Jul 2026 11:33:45 +0200
Subject: [PATCH 8/8] apply suggestions

---
 .../accounts/ProtectAccountForm.tsx           | 27 +-------
 .../menu/content/ChangePasswordSettings.tsx   | 67 ++++++++++++-------
 .../ui/app/shared/forms/passwordValidation.ts | 27 ++++++++
 3 files changed, 72 insertions(+), 49 deletions(-)
 create mode 100644 apps/wallet/src/ui/app/shared/forms/passwordValidation.ts

diff --git a/apps/wallet/src/ui/app/components/accounts/ProtectAccountForm.tsx b/apps/wallet/src/ui/app/components/accounts/ProtectAccountForm.tsx
index 4a6e798b82..3c0d8e9f33 100644
--- a/apps/wallet/src/ui/app/components/accounts/ProtectAccountForm.tsx
+++ b/apps/wallet/src/ui/app/components/accounts/ProtectAccountForm.tsx
@@ -7,42 +7,19 @@ import { useEffect } from 'react';
 import { type SubmitHandler } from 'react-hook-form';
 import { useNavigate } from 'react-router-dom';
 import { z } from 'zod';
-import zxcvbn from 'zxcvbn';
 import { parseAutoLock, useAutoLockMinutes } from '_hooks';
 import { CheckboxField } from '../../shared/forms/CheckboxField';
 import { Form } from '../../shared/forms/Form';
+import { validatePasswordStrength } from '../../shared/forms/passwordValidation';
 import { AutoLockSelector, zodSchema } from './AutoLockSelector';
 import { Button, ButtonHtmlType, ButtonType, Input, InputType } from '@iota/apps-ui-kit';
 import { ExternalLink } from '_components';
 
-function addDot(str: string | undefined) {
-    if (str && !str.endsWith('.')) {
-        return `${str}.`;
-    }
-    return str;
-}
-
 const formSchema = z
     .object({
         password: z
             .object({
-                input: z
-                    .string()
-                    .nonempty('Required')
-                    .superRefine((val, ctx) => {
-                        const {
-                            score,
-                            feedback: { warning, suggestions },
-                        } = zxcvbn(val);
-                        if (score <= 2) {
-                            ctx.addIssue({
-                                code: z.ZodIssueCode.custom,
-                                message: `${addDot(warning) || 'Password is not strong enough.'}${
-                                    suggestions ? ` ${suggestions.join(' ')}` : ''
-                                }`,
-                            });
-                        }
-                    }),
+                input: z.string().nonempty('Required').superRefine(validatePasswordStrength),
                 confirmation: z.string().nonempty('Required'),
             })
             .refine(({ input, confirmation }) => input && confirmation && input === confirmation, {
diff --git a/apps/wallet/src/ui/app/components/menu/content/ChangePasswordSettings.tsx b/apps/wallet/src/ui/app/components/menu/content/ChangePasswordSettings.tsx
index 516105d197..b468387906 100644
--- a/apps/wallet/src/ui/app/components/menu/content/ChangePasswordSettings.tsx
+++ b/apps/wallet/src/ui/app/components/menu/content/ChangePasswordSettings.tsx
@@ -1,6 +1,7 @@
 // Copyright (c) 2026 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
 
+import { useEffect } from 'react';
 import { useZodForm, toast } from '@iota/core';
 import { z } from 'zod';
 import { useNavigate } from 'react-router-dom';
@@ -8,8 +9,8 @@ import { Button, ButtonHtmlType, ButtonType, Input, InputType } from '@iota/apps
 import { Overlay } from '_components';
 import { Form } from '_src/ui/app/shared/forms/Form';
 import { CheckboxField } from '_src/ui/app/shared/forms/CheckboxField';
+import { validatePasswordStrength } from '_src/ui/app/shared/forms/passwordValidation';
 import { useBackgroundClient } from '_src/ui/app/hooks/useBackgroundClient';
-import zxcvbn from 'zxcvbn';
 
 const formSchema = z
     .object({
@@ -18,30 +19,32 @@ const formSchema = z
             .string()
             .nonempty('Required')
             .min(8, 'Must be at least 8 characters')
-            .superRefine((val, ctx) => {
-                const {
-                    score,
-                    feedback: { warning, suggestions },
-                } = zxcvbn(val);
-                if (score <= 2) {
-                    ctx.addIssue({
-                        code: z.ZodIssueCode.custom,
-                        message: `${warning ? `${warning}.` : 'Password is not strong enough.'}${suggestions?.length ? ` ${suggestions.join(' ')}` : ''}`,
-                    });
-                }
-            }),
+            .superRefine(validatePasswordStrength),
         confirmPassword: z.string().nonempty('Required'),
-        confirmed: z.literal<boolean>(true, {
-            errorMap: () => ({ message: 'You must confirm you understand this change' }),
-        }),
+        confirmed: z.boolean(),
     })
-    .refine((data) => data.newPassword === data.confirmPassword, {
-        path: ['confirmPassword'],
-        message: "Passwords don't match",
-    })
-    .refine((data) => data.newPassword !== data.currentPassword, {
-        path: ['newPassword'],
-        message: 'New password must be different from current password',
+    .superRefine((data, ctx) => {
+        if (data.confirmPassword && data.newPassword !== data.confirmPassword) {
+            ctx.addIssue({
+                code: z.ZodIssueCode.custom,
+                path: ['confirmPassword'],
+                message: "Passwords don't match",
+            });
+        }
+        if (data.currentPassword && data.newPassword === data.currentPassword) {
+            ctx.addIssue({
+                code: z.ZodIssueCode.custom,
+                path: ['newPassword'],
+                message: 'New password must be different from current password',
+            });
+        }
+        if (!data.confirmed) {
+            ctx.addIssue({
+                code: z.ZodIssueCode.custom,
+                path: ['confirmed'],
+                message: 'You must confirm you understand this change',
+            });
+        }
     });
 
 type FormValues = z.infer<typeof formSchema>;
@@ -57,15 +60,31 @@ export function ChangePasswordSettings() {
             currentPassword: '',
             newPassword: '',
             confirmPassword: '',
-            confirmed: false as unknown as true,
+            confirmed: false,
         },
     });
 
     const {
         register,
+        watch,
+        trigger,
+        getValues,
         formState: { isSubmitting, isValid, errors },
     } = form;
 
+    useEffect(() => {
+        const { unsubscribe } = watch((_, { name, type }) => {
+            if (type !== 'change') return;
+            if (name !== 'newPassword' && getValues('newPassword')) {
+                trigger('newPassword');
+            }
+            if (name !== 'confirmPassword' && getValues('confirmPassword')) {
+                trigger('confirmPassword');
+            }
+        });
+        return unsubscribe;
+    }, [watch, trigger, getValues]);
+
     async function handleSubmit(values: FormValues) {
         try {
             await backgroundClient.changePassword({
diff --git a/apps/wallet/src/ui/app/shared/forms/passwordValidation.ts b/apps/wallet/src/ui/app/shared/forms/passwordValidation.ts
new file mode 100644
index 0000000000..956c932289
--- /dev/null
+++ b/apps/wallet/src/ui/app/shared/forms/passwordValidation.ts
@@ -0,0 +1,27 @@
+// Copyright (c) 2026 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import { z } from 'zod';
+import zxcvbn from 'zxcvbn';
+
+function addDot(str: string | undefined) {
+    if (str && !str.endsWith('.')) {
+        return `${str}.`;
+    }
+    return str;
+}
+
+export function validatePasswordStrength(val: string, ctx: z.RefinementCtx) {
+    const {
+        score,
+        feedback: { warning, suggestions },
+    } = zxcvbn(val);
+    if (score <= 2) {
+        ctx.addIssue({
+            code: z.ZodIssueCode.custom,
+            message: `${addDot(warning) || 'Password is not strong enough.'}${
+                suggestions?.length ? ` ${suggestions.join(' ')}` : ''
+            }`,
+        });
+    }
+}