diff --git a/apps/web/src/components/AccountSelectorModal/DeriveMnemonicAccountModal/DeriveMnemonicAccountModal.test.tsx b/apps/web/src/components/AccountSelectorModal/DeriveMnemonicAccountModal/DeriveMnemonicAccountModal.test.tsx
index 0976c667b6..4a3e61a79c 100644
--- a/apps/web/src/components/AccountSelectorModal/DeriveMnemonicAccountModal/DeriveMnemonicAccountModal.test.tsx
+++ b/apps/web/src/components/AccountSelectorModal/DeriveMnemonicAccountModal/DeriveMnemonicAccountModal.test.tsx
@@ -39,7 +39,7 @@ describe("<DeriveMnemonicAccountModal />", () => {
 
     const account = mockMnemonicAccount(0);
     await renderInModal(<DeriveMnemonicAccountModal account={account} />, store);
-    await act(() => user.type(screen.getByLabelText("Account name"), "Test Account"));
+    await act(() => user.type(screen.getByLabelText("Account name (Optional)"), "Test Account"));
     await act(() => user.click(screen.getByRole("button", { name: "Continue" })));
 
     await waitFor(() => {
@@ -53,7 +53,7 @@ describe("<DeriveMnemonicAccountModal />", () => {
     const account = mockMnemonicAccount(0);
     await renderInModal(<DeriveMnemonicAccountModal account={account} />, store);
 
-    await act(() => user.type(screen.getByLabelText("Account name"), "Test Account"));
+    await act(() => user.type(screen.getByLabelText("Account name (Optional)"), "Test Account"));
     await act(() => user.click(screen.getByRole("button", { name: "Continue" })));
     await act(() => user.type(screen.getByLabelText("Password"), "test-password"));
     await act(() => user.click(screen.getByRole("button", { name: "Submit" })));
diff --git a/apps/web/src/components/Menu/AdvancedMenu/AdvancedMenu.test.tsx b/apps/web/src/components/Menu/AdvancedMenu/AdvancedMenu.test.tsx
index 701930960f..eed3e7152e 100644
--- a/apps/web/src/components/Menu/AdvancedMenu/AdvancedMenu.test.tsx
+++ b/apps/web/src/components/Menu/AdvancedMenu/AdvancedMenu.test.tsx
@@ -19,7 +19,7 @@ beforeEach(() => {
 describe("<AdvancedMenu />", () => {
   describe("when user is verified", () => {
     it("renders advanced menu items correctly", async () => {
-      await renderInDrawer(<AdvancedMenu />);
+      await renderInDrawer(<AdvancedMenu />, store);
 
       expect(screen.getByText("Change Password")).toBeVisible();
       expect(screen.getByText("Network")).toBeVisible();
@@ -33,7 +33,7 @@ describe("<AdvancedMenu />", () => {
     ])("opens %label menu", async (label, Component) => {
       const { openWith } = dynamicDrawerContextMock;
 
-      await renderInDrawer(<AdvancedMenu />);
+      await renderInDrawer(<AdvancedMenu />, store);
 
       await userEvent.click(screen.getByText(label));
       expect(openWith).toHaveBeenCalledWith(<Component />);
diff --git a/apps/web/src/components/Menu/Menu.test.tsx b/apps/web/src/components/Menu/Menu.test.tsx
index e95c031ab5..d889d8214c 100644
--- a/apps/web/src/components/Menu/Menu.test.tsx
+++ b/apps/web/src/components/Menu/Menu.test.tsx
@@ -20,6 +20,7 @@ import {
   screen,
   userEvent,
 } from "../../testUtils";
+import { OnboardOptionsModal } from "../Onboarding/OnboardOptions";
 
 jest.mock("@chakra-ui/system", () => ({
   ...jest.requireActual("@chakra-ui/system"),
@@ -51,7 +52,7 @@ describe("<Menu />", () => {
 
   describe("when user is verified", () => {
     it("renders menu items correctly", async () => {
-      await renderInDrawer(<Menu />);
+      await renderInDrawer(<Menu />, store);
 
       expect(screen.getByText("Advanced")).toBeVisible();
       expect(screen.getByText("Address Book")).toBeVisible();
@@ -70,7 +71,7 @@ describe("<Menu />", () => {
       const user = userEvent.setup();
       const { openWith } = dynamicDrawerContextMock;
 
-      await renderInDrawer(<Menu />);
+      await renderInDrawer(<Menu />, store);
 
       await user.click(screen.getByText(label));
       expect(openWith).toHaveBeenCalledWith(<Component />);
@@ -80,7 +81,7 @@ describe("<Menu />", () => {
       const user = userEvent.setup();
       const { openWith } = dynamicModalContextMock;
 
-      await renderInDrawer(<Menu />);
+      await renderInDrawer(<Menu />, store);
 
       await user.click(screen.getByText("Logout"));
       expect(openWith).toHaveBeenCalledWith(<LogoutModal />);
@@ -88,7 +89,7 @@ describe("<Menu />", () => {
 
     it("calls downloadBackupFile function when Save Backup is clicked", async () => {
       const user = userEvent.setup();
-      await renderInDrawer(<Menu />);
+      await renderInDrawer(<Menu />, store);
 
       await user.click(screen.getByText("Save Backup"));
 
@@ -97,22 +98,22 @@ describe("<Menu />", () => {
 
     it("calls toggleColorMode function when Light mode is clicked", async () => {
       const user = userEvent.setup();
-      await renderInDrawer(<Menu />);
+      await renderInDrawer(<Menu />, store);
 
       await user.click(screen.getByText("Light mode"));
 
       expect(useColorMode().toggleColorMode).toHaveBeenCalled();
     });
 
-    // TODO: add when Add Account logic is ready
-    // it("opens Add Account modal when Add Account button is clicked", async () => {
-    //   const user = userEvent.setup();
-    //   await renderInDrawer(<Menu />);
+    it("opens Add Account modal when Add Account button is clicked", async () => {
+      const { openWith } = dynamicModalContextMock;
+      const user = userEvent.setup();
+      await renderInDrawer(<Menu />, store);
 
-    //   await user.click(screen.getByText("Add Account"));
+      await user.click(screen.getByText("Add Account"));
 
-    //   expect(useOnboardingModal().onOpen).toHaveBeenCalled();
-    // });
+      expect(openWith).toHaveBeenCalledWith(<OnboardOptionsModal />);
+    });
   });
 
   describe("when user is unverified", () => {
diff --git a/apps/web/src/components/NameAccountModal/NameAccountModal.test.tsx b/apps/web/src/components/NameAccountModal/NameAccountModal.test.tsx
index 8c4d88ce9c..93b9712435 100644
--- a/apps/web/src/components/NameAccountModal/NameAccountModal.test.tsx
+++ b/apps/web/src/components/NameAccountModal/NameAccountModal.test.tsx
@@ -1,3 +1,5 @@
+import { defaultDerivationPathTemplate } from "@umami/tezos";
+
 import { NameAccountModal } from "./NameAccountModal";
 import { act, renderInModal, screen, userEvent, waitFor } from "../../testUtils";
 
@@ -13,6 +15,7 @@ describe("NameAccountModal", () => {
       expect(screen.getByText("Custom Title")).toBeVisible();
     });
     expect(screen.getByText("Custom Subtitle")).toBeVisible();
+    expect(screen.queryByTestId("advanced-section")).not.toBeInTheDocument();
   });
 
   it("calls onSubmit with form data when submitted", async () => {
@@ -20,9 +23,34 @@ describe("NameAccountModal", () => {
 
     await renderInModal(<NameAccountModal onSubmit={mockOnSubmit} />);
 
-    await act(() => user.type(screen.getByLabelText("Account name"), "Test Account"));
+    await act(() => user.type(screen.getByLabelText("Account name (Optional)"), "Test Account"));
     await act(() => user.click(screen.getByRole("button", { name: "Continue" })));
 
     expect(mockOnSubmit).toHaveBeenCalled();
   });
+
+  it("renders advanced settings when enabled", async () => {
+    await renderInModal(<NameAccountModal onSubmit={mockOnSubmit} withAdvancedSettings />);
+
+    expect(screen.getByTestId("advanced-section")).toBeVisible();
+  });
+
+  it("submits the form with advanced settings when enabled", async () => {
+    const user = userEvent.setup();
+    await renderInModal(<NameAccountModal onSubmit={mockOnSubmit} withAdvancedSettings />);
+
+    const input = screen.getByTestId("accountName");
+    const submitButton = screen.getByRole("button", { name: "Continue" });
+
+    await user.type(input, "My Advanced Account");
+    await user.click(submitButton);
+
+    expect(mockOnSubmit).toHaveBeenCalledWith(
+      expect.objectContaining({
+        accountName: "My Advanced Account",
+        derivationPath: defaultDerivationPathTemplate,
+        curve: "ed25519",
+      })
+    );
+  });
 });
diff --git a/apps/web/src/components/NameAccountModal/NameAccountModal.tsx b/apps/web/src/components/NameAccountModal/NameAccountModal.tsx
index c4e907803b..86b736554e 100644
--- a/apps/web/src/components/NameAccountModal/NameAccountModal.tsx
+++ b/apps/web/src/components/NameAccountModal/NameAccountModal.tsx
@@ -13,22 +13,29 @@ import {
   Text,
 } from "@chakra-ui/react";
 import { useMultiForm } from "@umami/components";
+import { defaultDerivationPathTemplate } from "@umami/tezos";
+import { FormProvider } from "react-hook-form";
 
 import { UserIcon } from "../../assets/icons";
 import { useColor } from "../../styles/useColor";
 import { ModalBackButton } from "../BackButton";
 import { ModalCloseButton } from "../CloseButton";
+import { AdvancedAccountSettings } from "../Onboarding/AdvancedAccountSettings";
 
 type NameAccountModalProps = {
   title?: string;
   subtitle?: string;
   onSubmit: (values: { accountName: string }) => void;
+  withAdvancedSettings?: boolean;
+  buttonLabel?: string;
 };
 
 export const NameAccountModal = ({
   title = "Name Your Account",
   subtitle,
   onSubmit,
+  withAdvancedSettings = false,
+  buttonLabel = "Continue",
 }: NameAccountModalProps) => {
   const color = useColor();
 
@@ -36,6 +43,10 @@ export const NameAccountModal = ({
     mode: "onBlur",
     defaultValues: {
       accountName: "",
+      ...(withAdvancedSettings && {
+        derivationPath: defaultDerivationPathTemplate,
+        curve: "ed25519",
+      }),
     },
   });
 
@@ -50,32 +61,43 @@ export const NameAccountModal = ({
           <Icon as={UserIcon} boxSize="24px" marginBottom="4px" color={color("blue")} />
           <Heading size="xl">{title}</Heading>
           {subtitle && (
-            <Text width="full" color={color("700")} fontWeight="400" textAlign="center" size="md">
+            <Text
+              width="full"
+              maxWidth="340px"
+              color={color("700")}
+              fontWeight="400"
+              textAlign="center"
+              whiteSpace="pre-wrap"
+              size="md"
+            >
               {subtitle}
             </Text>
           )}
         </Center>
       </ModalHeader>
-      <form onSubmit={handleSubmit(onSubmit)} style={{ width: "100%" }}>
-        <ModalBody>
-          <FormControl>
-            <FormLabel>Account name</FormLabel>
-            <Input
-              data-testid="accountName"
-              type="text"
-              {...register("accountName", {
-                required: false,
-              })}
-              placeholder="Optional"
-            />
-          </FormControl>
-        </ModalBody>
-        <ModalFooter>
-          <Button width="full" type="submit" variant="primary">
-            Continue
-          </Button>
-        </ModalFooter>
-      </form>
+      <FormProvider {...form}>
+        <form onSubmit={handleSubmit(onSubmit)} style={{ width: "100%" }}>
+          <ModalBody gap="30px">
+            <FormControl>
+              <FormLabel>Account name (Optional)</FormLabel>
+              <Input
+                data-testid="accountName"
+                type="text"
+                {...register("accountName", {
+                  required: false,
+                })}
+                placeholder="Enter Account Name"
+              />
+            </FormControl>
+            {withAdvancedSettings && <AdvancedAccountSettings />}
+          </ModalBody>
+          <ModalFooter>
+            <Button width="full" type="submit" variant="primary">
+              {buttonLabel}
+            </Button>
+          </ModalFooter>
+        </form>
+      </FormProvider>
     </ModalContent>
   );
 };
diff --git a/apps/web/src/components/Onboarding/AdvancedAccountSettings/AdvancedAccountSettings.tsx b/apps/web/src/components/Onboarding/AdvancedAccountSettings/AdvancedAccountSettings.tsx
index 7a84d3394a..717fef4606 100644
--- a/apps/web/src/components/Onboarding/AdvancedAccountSettings/AdvancedAccountSettings.tsx
+++ b/apps/web/src/components/Onboarding/AdvancedAccountSettings/AdvancedAccountSettings.tsx
@@ -63,13 +63,10 @@ export const AdvancedAccountSettings = () => {
                 <InputRightElement>
                   <Button
                     marginRight="10px"
-                    color={color("200")}
-                    fontWeight="600"
-                    background={color("black")}
                     borderRadius="4px"
-                    _hover={{ background: color("400") }}
                     onClick={() => resetField("derivationPath")}
                     size="sm"
+                    variant="inputElement"
                   >
                     Reset
                   </Button>
diff --git a/apps/web/src/components/Onboarding/OnboardOptions/OnboardOptions.tsx b/apps/web/src/components/Onboarding/OnboardOptions/OnboardOptions.tsx
index fd192d7ed7..82e19951b6 100644
--- a/apps/web/src/components/Onboarding/OnboardOptions/OnboardOptions.tsx
+++ b/apps/web/src/components/Onboarding/OnboardOptions/OnboardOptions.tsx
@@ -8,13 +8,31 @@ import { OnboardWithRedditButton } from "./OnboardWithRedditButton";
 import { OnboardWithTwitterButton } from "./OnboardWithTwitterButton";
 import { useColor } from "../../../styles/useColor";
 import { AccountTileWrapper } from "../../AccountTile";
+import { NameAccountModal } from "../../NameAccountModal";
 import { ImportWallet } from "../ImportWallet";
 import { SetupPassword } from "../SetupPassword";
+import { useIsAccountVerified } from "../VerificationFlow";
 
 export const OnboardOptions = ({ children }: PropsWithChildren) => {
   const color = useColor();
-
   const { openWith } = useDynamicModalContext();
+  const isAccountVerified = useIsAccountVerified();
+
+  const handleCreateNewWallet = () => {
+    if (isAccountVerified) {
+      return openWith(
+        <NameAccountModal
+          buttonLabel="Continue"
+          onSubmit={() => openWith(<SetupPassword mode="add_account" />)}
+          subtitle={"Name your account or edit your\n account name later."}
+          title="Create Account"
+          withAdvancedSettings
+        />
+      );
+    } else {
+      return openWith(<SetupPassword mode="new_mnemonic" />);
+    }
+  };
 
   return (
     <Flex alignItems="center" flexDirection="column" width="full">
@@ -50,12 +68,7 @@ export const OnboardOptions = ({ children }: PropsWithChildren) => {
         </Center>
 
         <Flex flexDirection="column" gap="12px" width="full">
-          <Button
-            width="full"
-            onClick={() => openWith(<SetupPassword mode="new_mnemonic" />)}
-            size="lg"
-            variant="primary"
-          >
+          <Button width="full" onClick={handleCreateNewWallet} size="lg" variant="primary">
             Create a new wallet
           </Button>
           <Button
diff --git a/apps/web/src/components/Onboarding/SetupPassword/SetupPassword.test.tsx b/apps/web/src/components/Onboarding/SetupPassword/SetupPassword.test.tsx
index c3dde1e3dc..bf1a609e1f 100644
--- a/apps/web/src/components/Onboarding/SetupPassword/SetupPassword.test.tsx
+++ b/apps/web/src/components/Onboarding/SetupPassword/SetupPassword.test.tsx
@@ -230,7 +230,7 @@ describe("<SetupPassword />", () => {
     });
   });
 
-  describe("new_mnemonic mode", () => {
+  describe("adding new account mode", () => {
     const store = makeStore();
     const mockRestoreFromMnemonic = jest.fn();
 
@@ -239,13 +239,16 @@ describe("<SetupPassword />", () => {
       jest.mocked(generate24WordMnemonic).mockReturnValue(mnemonic1);
     });
 
-    it("doesn't render advanced section", async () => {
-      await renderInModal(<SetupPassword mode="new_mnemonic" />);
+    it.each(["new_mnemonic", "add_account"] as const)(
+      "doesn't render advanced section",
+      async mode => {
+        await renderInModal(<SetupPassword mode={mode} />);
 
-      expect(screen.queryByTestId("advanced-section")).not.toBeInTheDocument();
-    });
+        expect(screen.queryByTestId("advanced-section")).not.toBeInTheDocument();
+      }
+    );
 
-    it("calls restoreFromMnemonic with predefined mnemonic", async () => {
+    it("calls restoreFromMnemonic with predefined mnemonic for new_mnemonic mode", async () => {
       const user = userEvent.setup();
 
       await renderInModal(<SetupPassword mode="new_mnemonic" />, store);
@@ -270,6 +273,31 @@ describe("<SetupPassword />", () => {
         isVerified: false,
       });
     });
+
+    it("calls restoreFromMnemonic with predefined mnemonic for add_account mode", async () => {
+      jest.mocked(useIsPasswordSet).mockReturnValue(true);
+      const user = userEvent.setup();
+
+      await renderInModal(<SetupPassword mode="add_account" />, store);
+
+      const passwordInput = screen.getByLabelText("Password");
+
+      await act(() => user.type(passwordInput, password));
+
+      const submitButton = screen.getByRole("button", { name: "Add Account" });
+
+      await act(() => user.click(submitButton));
+
+      await waitFor(() => expect(mockRestoreFromMnemonic).toHaveBeenCalledTimes(1));
+      expect(mockRestoreFromMnemonic).toHaveBeenCalledWith({
+        mnemonic: mnemonic1,
+        password,
+        derivationPathTemplate: "44'/1729'/?'/0'",
+        label: "Account",
+        curve: "ed25519",
+        isVerified: false,
+      });
+    });
   });
 
   describe("verification mode", () => {
diff --git a/apps/web/src/components/Onboarding/SetupPassword/SetupPassword.tsx b/apps/web/src/components/Onboarding/SetupPassword/SetupPassword.tsx
index 8f733ab274..9385643beb 100644
--- a/apps/web/src/components/Onboarding/SetupPassword/SetupPassword.tsx
+++ b/apps/web/src/components/Onboarding/SetupPassword/SetupPassword.tsx
@@ -44,7 +44,7 @@ type FormFields = {
   curve: Exclude<Curves, "bip25519">;
 };
 
-type Mode = "mnemonic" | "secret_key" | "new_mnemonic" | "verification";
+export type Mode = "mnemonic" | "secret_key" | "new_mnemonic" | "verification" | "add_account";
 
 type SetupPasswordProps = {
   mode: Mode;
@@ -73,6 +73,13 @@ const getModeConfig = (mode: Mode) => {
         title: "Almost there",
         buttonLabel: "Import Wallet",
       };
+    case "add_account":
+      return {
+        icon: LockIcon,
+        title: "Confirm password",
+        buttonLabel: "Add Account",
+        subtitle: "Confirm the password to add your account.",
+      };
   }
 };
 
@@ -103,7 +110,7 @@ export const SetupPassword = ({ mode }: SetupPasswordProps) => {
     getValues,
   } = form;
 
-  const isNewMnemonic = mode === "new_mnemonic";
+  const isNewMnemonic = mode === "new_mnemonic" || mode === "add_account";
 
   const onSubmit = ({ password, curve, derivationPath }: FormFields) =>
     handleAsyncAction(async () => {
@@ -121,7 +128,8 @@ export const SetupPassword = ({ mode }: SetupPasswordProps) => {
           break;
         }
         case "mnemonic":
-        case "new_mnemonic": {
+        case "new_mnemonic":
+        case "add_account": {
           const mnemonic = isNewMnemonic
             ? generate24WordMnemonic()
             : allFormValues.current?.mnemonic.map(({ val }: { val: string }) => val).join(" ");
@@ -130,7 +138,7 @@ export const SetupPassword = ({ mode }: SetupPasswordProps) => {
             mnemonic,
             password,
             derivationPathTemplate: derivationPath,
-            label,
+            label: allFormValues.current?.accountName || label,
             curve,
             isVerified: !isNewMnemonic,
           });
@@ -151,7 +159,7 @@ export const SetupPassword = ({ mode }: SetupPasswordProps) => {
       return onClose();
     });
 
-  const { icon, title, buttonLabel, subtitle } = getModeConfig(mode);
+  const { title, subtitle, buttonLabel, icon } = getModeConfig(mode);
 
   return (
     <ModalContent>
diff --git a/apps/web/src/components/Onboarding/VerificationFlow/useIsAccountVerified.test.tsx b/apps/web/src/components/Onboarding/VerificationFlow/useIsAccountVerified.test.tsx
index 61d2c3a141..f3f3047256 100644
--- a/apps/web/src/components/Onboarding/VerificationFlow/useIsAccountVerified.test.tsx
+++ b/apps/web/src/components/Onboarding/VerificationFlow/useIsAccountVerified.test.tsx
@@ -13,12 +13,15 @@ beforeEach(() => {
 describe("useIsAccountVerified", () => {
   it.each([
     // verified status, account type, account
+    [false, "undefined", undefined],
     [true, "social", mockSocialAccount(0)],
     [true, "ledger", mockLedgerAccount(0)],
     [true, "verified mnemonic", mockMnemonicAccount(0)],
     [false, "unverified mnemonic", mockMnemonicAccount(0, { isVerified: false })],
   ])("returns %s for %s account", (isVerified, _, account) => {
-    addTestAccount(store, account);
+    if (account) {
+      addTestAccount(store, account);
+    }
     const { result } = renderHook(() => useIsAccountVerified(), { store });
 
     expect(result.current).toBe(isVerified);
diff --git a/apps/web/src/components/Onboarding/VerificationFlow/useIsAccountVerified.tsx b/apps/web/src/components/Onboarding/VerificationFlow/useIsAccountVerified.tsx
index 20e78651c3..b9eda1a6b7 100644
--- a/apps/web/src/components/Onboarding/VerificationFlow/useIsAccountVerified.tsx
+++ b/apps/web/src/components/Onboarding/VerificationFlow/useIsAccountVerified.tsx
@@ -3,5 +3,5 @@ import { useCurrentAccount } from "@umami/state";
 export const useIsAccountVerified = () => {
   const account = useCurrentAccount();
 
-  return account?.type !== "mnemonic" || account.isVerified;
+  return !!account && (account.type !== "mnemonic" || account.isVerified);
 };
diff --git a/apps/web/src/styles/colors.ts b/apps/web/src/styles/colors.ts
index 449f7f7837..4ba1e801a0 100644
--- a/apps/web/src/styles/colors.ts
+++ b/apps/web/src/styles/colors.ts
@@ -6,7 +6,7 @@ const light = {
   green: "#38A169",
   greenDark: "#25855A",
   bg: "#E0E0FF",
-  bgGradient: "linear-gradient(67deg, rgba(248, 248, 255, 0.70) 0%, #F8F8FF 100%)",
+  bgGradient: "linear-gradient(67deg, rgba(226, 232, 240, 0.7) 0%, #E2E8F0 100%);",
   bgMaskColor: "#F8F8FF",
   grey: {
     black: "#121224",
@@ -33,7 +33,8 @@ const dark = {
   green: "#38A169",
   greenDark: "#25855A",
   bg: "#121224",
-  bgGradient: "linear-gradient(67deg, rgba(22, 22, 43, 0.20) 0%, #16162B 100%)",
+  bgGradient:
+    "linear-gradient(67deg, rgba(22, 22, 43, 0.20) 0%, rgba(22, 22, 43, 0.90) 29%, #16162B 100%)",
   bgMaskColor: "#16162B",
   grey: {
     black: "#FFFFFF",
diff --git a/apps/web/src/styles/theme.ts b/apps/web/src/styles/theme.ts
index 82c38f9566..67caf812a2 100644
--- a/apps/web/src/styles/theme.ts
+++ b/apps/web/src/styles/theme.ts
@@ -595,10 +595,12 @@ const theme = extendTheme({
   config,
   styles: {
     global: (props: StyleFunctionProps) => ({
+      "#root": {
+        bg: mode(light.bgGradient, dark.bgGradient)(props),
+      },
       body: {
         color: mode(light.grey[600], dark.grey[600])(props),
         bg: mode(light.bg, dark.bg)(props),
-        bgImage: mode(light.bgGradient, dark.bgGradient)(props),
         _before: {
           maskImage: "url(/static/bg.svg)",
           bgColor: mode(light.bgMaskColor, dark.bgMaskColor)(props),