diff --git a/core/app/[locale]/(default)/(auth)/account-status-provider.tsx b/core/app/[locale]/(default)/(auth)/account-status-provider.tsx
deleted file mode 100644
index 9dac5c871..000000000
--- a/core/app/[locale]/(default)/(auth)/account-status-provider.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-'use client';
-
-import { createContext, ReactNode, useContext, useEffect, useState } from 'react';
-
-import { State as AccountState } from './account/[tab]/_actions/submit-customer-change-password-form';
-import { usePathname } from 'next/navigation';
-
-const defaultState: AccountState = { status: 'idle', message: '' };
-
-export const AccountStatusContext = createContext<{
-  accountState: AccountState;
-  setAccountState: (state: AccountState | ((prevState: AccountState) => AccountState)) => void;
-} | null>(null);
-
-export const AccountStatusProvider = ({ children }: { children: ReactNode; }) => {
-
-  const [accountState, setAccountState] = useState<AccountState>(defaultState);
-  const pathname = usePathname();  
-
-  useEffect(() => {    
-    // Reset account state when changing the route except the Account Page
-    if (pathname !== "/account/") {
-      setAccountState(defaultState);
-    }
-  }, [pathname])
-
-  return (
-    <AccountStatusContext.Provider value={{ accountState, setAccountState }}>
-      {children}
-    </AccountStatusContext.Provider>
-  );
-};
-
-export function useAccountStatusContext() {
-  const context = useContext(AccountStatusContext);
-
-  if (!context) {
-    throw new Error('useAccountStatusContext must be used within a AccountStatusProvider');
-  }
-
-  return context;
-}
diff --git a/core/app/[locale]/(default)/(auth)/account/[tab]/_actions/add-address.ts b/core/app/[locale]/(default)/(auth)/account/[tab]/_actions/add-address.ts
deleted file mode 100644
index 9b48c0828..000000000
--- a/core/app/[locale]/(default)/(auth)/account/[tab]/_actions/add-address.ts
+++ /dev/null
@@ -1,75 +0,0 @@
-'use server';
-
-import { revalidatePath } from 'next/cache';
-
-import {
-  addCustomerAddress,
-  AddCustomerAddressInput,
-} from '~/client/mutations/add-customer-address';
-
-const isAddCustomerAddressInput = (data: unknown): data is AddCustomerAddressInput => {
-  if (typeof data === 'object' && data !== null && 'address1' in data) {
-    return true;
-  }
-
-  return false;
-};
-
-export const addAddress = async ({
-  formData,
-  reCaptchaToken,
-}: {
-  formData: FormData;
-  reCaptchaToken?: string;
-}) => {
-  try {
-    const parsed: unknown = [...formData.entries()].reduce<
-      Record<string, FormDataEntryValue | Record<string, FormDataEntryValue>>
-    >((parsedData, [name, value]) => {
-      const key = name.split('-').at(-1) ?? '';
-      const sections = name.split('-').slice(0, -1);
-
-      if (sections.includes('customer')) {
-        parsedData[key] = value;
-      }
-
-      if (sections.includes('address')) {
-        parsedData[key] = value;
-      }
-
-      return parsedData;
-    }, {});
-
-    if (!isAddCustomerAddressInput(parsed)) {
-      return {
-        status: 'error',
-        error: 'Something went wrong with proccessing user input.',
-      };
-    }
-
-    const response = await addCustomerAddress({
-      input: parsed,
-      reCaptchaToken,
-    });
-
-    revalidatePath('/account/addresses', 'page');
-
-    if (response.errors.length === 0) {
-      return { status: 'success', message: 'The address has been added.' };
-    }
-
-    return {
-      status: 'error',
-      message: response.errors.map((error) => error.message).join('\n'),
-    };
-  } catch (error: unknown) {
-    if (error instanceof Error) {
-      return {
-        status: 'error',
-        message: error.message,
-      };
-    }
-
-    return { status: 'error', message: 'Unknown error.' };
-  }
-};
diff --git a/core/app/[locale]/(default)/(auth)/account/[tab]/_actions/delete-address.ts b/core/app/[locale]/(default)/(auth)/account/[tab]/_actions/delete-address.ts
deleted file mode 100644
index 272cc26a1..000000000
--- a/core/app/[locale]/(default)/(auth)/account/[tab]/_actions/delete-address.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-'use server';
-
-import { revalidatePath } from 'next/cache';
-
-import { deleteCustomerAddress } from '~/client/mutations/delete-customer-address';
-
-import { State } from './submit-customer-change-password-form';
-
-export const deleteAddress = async (addressId: number): Promise<State> => {
-  try {
-    const response = await deleteCustomerAddress(addressId);
-
-    revalidatePath('/account/addresses', 'page');
-
-    if (response.errors.length === 0) {
-      return { status: 'success', message: 'Address deleted from your account.' };
-    }
-
-    return {
-      status: 'error',
-      message: response.errors.map((error) => error.message).join('\n'),
-    };
-  } catch (error: unknown) {
-    if (error instanceof Error) {
-      return {
-        status: 'error',
-        message: error.message,
-      };
-    }
-
-    return { status: 'error', message: 'Unknown error.' };
-  }
-};
diff --git a/core/app/[locale]/(default)/(auth)/account/[tab]/_actions/submit-customer-change-password-form.ts b/core/app/[locale]/(default)/(auth)/account/[tab]/_actions/submit-customer-change-password-form.ts
deleted file mode 100644
index 8965d86c3..000000000
--- a/core/app/[locale]/(default)/(auth)/account/[tab]/_actions/submit-customer-change-password-form.ts
+++ /dev/null
@@ -1,61 +0,0 @@
-'use server';
-
-import { z } from 'zod';
-
-import { ChangePasswordFieldsSchema } from '~/client/mutations/submit-change-password';
-import { submitCustomerChangePassword } from '~/client/mutations/submit-customer-change-password';
-
-export const CustomerChangePasswordSchema = ChangePasswordFieldsSchema.omit({
-  customerId: true,
-  customerToken: true,
-});
-
-export interface State {
-  status: 'idle' | 'error' | 'success';
-  message?: string;
-}
-
-export const submitCustomerChangePasswordForm = async (
-  _previousState: unknown,
-  formData: FormData,
-) => {
-  try {
-    const parsedData = CustomerChangePasswordSchema.parse({
-      newPassword: formData.get('new-password'),
-      currentPassword: formData.get('current-password'),
-      confirmPassword: formData.get('confirm-password'),
-    });
-
-    const response = await submitCustomerChangePassword({
-      newPassword: parsedData.newPassword,
-      currentPassword: parsedData.currentPassword,
-    });
-
-    if (response.errors.length === 0) {
-      return { status: 'success', message: 'Password has been updated successfully.' };
-    }
-
-    return {
-      status: 'error',
-      message: response.errors.map((error) => error.message).join('\n'),
-    };
-  } catch (error: unknown) {
-    if (error instanceof z.ZodError) {
-      return {
-        status: 'error',
-        message: error.issues
-          .map(({ path, message }) => `${path.toString()}: ${message}.`)
-          .join('\n'),
-      };
-    }
-
-    if (error instanceof Error) {
-      return {
-        status: 'error',
-        message: error.message,
-      };
-    }
-
-    return { status: 'error', message: 'Unknown error.' };
-  }
-};
diff --git a/core/app/[locale]/(default)/(auth)/account/[tab]/_actions/update-address.ts b/core/app/[locale]/(default)/(auth)/account/[tab]/_actions/update-address.ts
deleted file mode 100644
index 87076524d..000000000
--- a/core/app/[locale]/(default)/(auth)/account/[tab]/_actions/update-address.ts
+++ /dev/null
@@ -1,90 +0,0 @@
-'use server';
-
-import { revalidatePath } from 'next/cache';
-
-import {
-  updateCustomerAddress,
-  UpdateCustomerAddressInput,
-} from '~/client/mutations/update-customer-address';
-
-const isUpdateCustomerAddressInput = (
-  data: unknown,
-): data is UpdateCustomerAddressInput['data'] => {
-  if (typeof data === 'object' && data !== null && 'address1' in data) {
-    return true;
-  }
-
-  return false;
-};
-
-export const updateAddress = async ({
-  addressId,
-  formData,
-  reCaptchaToken,
-}: {
-  addressId: number;
-  formData: FormData;
-  reCaptchaToken?: string;
-}) => {
-  try {
-    const parsed: unknown = [...formData.entries()].reduce<
-      Record<string, FormDataEntryValue | Record<string, FormDataEntryValue>>
-    >((parsedData, [name, value]) => {
-      const key = name.split('-').at(-1) ?? '';
-      const sections = name.split('-').slice(0, -1);
-
-      if (sections.includes('customer')) {
-        parsedData[key] = value;
-      }
-
-      if (sections.includes('address')) {
-        parsedData[key] = value;
-      }
-
-      return parsedData;
-    }, {});
-
-    if (!isUpdateCustomerAddressInput(parsed)) {
-      return {
-        status: 'error',
-        error: 'Something went wrong with proccessing user input.',
-      };
-    }
-
-    const response = await updateCustomerAddress({
-      input: {
-        addressEntityId: addressId,
-        data: parsed,
-      },
-      reCaptchaToken,
-    });
-
-    revalidatePath('/account/addresses', 'page');
-
-    if (response.errors.length === 0) {
-      return { status: 'success', message: 'The address has been updated.' };
-    }
-
-    return {
-      status: 'error',
-      message: response.errors
-        .map((error) => {
-          if (error.__typename === 'AddressDoesNotExistError') {
-            return 'Address does not exist.';
-          }
-
-          return error.message;
-        })
-        .join('\n'),
-    };
-  } catch (error: unknown) {
-    if (error instanceof Error) {
-      return {
-        status: 'error',
-        message: error.message,
-      };
-    }
-
-    return { status: 'error', message: 'Unknown error.' };
-  }
-};
diff --git a/core/app/[locale]/(default)/(auth)/account/[tab]/_components/addresses-content/add-address.tsx b/core/app/[locale]/(default)/(auth)/account/[tab]/_components/addresses-content/add-address.tsx
deleted file mode 100644
index a1d7b377f..000000000
--- a/core/app/[locale]/(default)/(auth)/account/[tab]/_components/addresses-content/add-address.tsx
+++ /dev/null
@@ -1,247 +0,0 @@
-'use client';
-
-import { useRouter } from 'next/navigation';
-import { useTranslations } from 'next-intl';
-import { useEffect, useRef, useState } from 'react';
-import { useFormStatus } from 'react-dom';
-import ReCaptcha from 'react-google-recaptcha';
-
-import {
-  createFieldName,
-  FieldNameToFieldId,
-  FieldWrapper,
-  Picklist,
-  PicklistOrText,
-  Text,
-} from '~/app/[locale]/(default)/(auth)/login/register-customer/_components/register-customer-form/fields';
-import { Link } from '~/components/link';
-import { Button } from '~/components/ui/button';
-import { Field, Form, FormSubmit } from '~/components/ui/form';
-import { Message } from '~/components/ui/message';
-
-import { addAddress } from '../../_actions/add-address';
-import { useAccountStatusContext } from '../../../../account-status-provider';
-
-import {
-  createCountryChangeHandler,
-  createTextInputValidationHandler,
-} from './address-field-handlers';
-import { NewAddressQueryResponseType } from './customer-new-address';
-
-interface FormStatus {
-  status: 'success' | 'error';
-  message: string;
-}
-
-export type AddressFields = NonNullable<
-  NewAddressQueryResponseType['site']['settings']
->['formFields']['shippingAddress'];
-
-export type Countries = NonNullable<NewAddressQueryResponseType['geography']['countries']>;
-type CountryCode = Countries[number]['code'];
-type CountryStates = Countries[number]['statesOrProvinces'];
-
-interface SumbitMessages {
-  messages: {
-    submit: string;
-    submitting: string;
-  };
-}
-
-const SubmitButton = ({ messages }: SumbitMessages) => {
-  const { pending } = useFormStatus();
-
-  return (
-    <Button
-      className="relative items-center px-8 py-2 md:w-fit"
-      loading={pending}
-      loadingText={messages.submitting}
-      variant="primary"
-    >
-      {messages.submit}
-    </Button>
-  );
-};
-
-interface AddAddressProps {
-  addressFields: AddressFields;
-  countries: Countries;
-  defaultCountry: {
-    id: number;
-    code: CountryCode;
-    states: CountryStates;
-  };
-  reCaptchaSettings?: {
-    isEnabledOnStorefront: boolean;
-    siteKey: string;
-  };
-}
-
-export const AddAddress = ({
-  addressFields,
-  countries,
-  defaultCountry,
-  reCaptchaSettings,
-}: AddAddressProps) => {
-  const form = useRef<HTMLFormElement>(null);
-  const [formStatus, setFormStatus] = useState<FormStatus | null>(null);
-
-  const reCaptchaRef = useRef<ReCaptcha>(null);
-  const router = useRouter();
-  const t = useTranslations('Account.Addresses');
-  const [reCaptchaToken, setReCaptchaToken] = useState('');
-  const [isReCaptchaValid, setReCaptchaValid] = useState(true);
-
-  const [textInputValid, setTextInputValid] = useState<Record<string, boolean>>({});
-  const [countryStates, setCountryStates] = useState(defaultCountry.states);
-
-  const { setAccountState } = useAccountStatusContext();
-
-  useEffect(() => {
-    setAccountState({ status: 'idle' });
-  }, [setAccountState]);
-
-  const handleTextInputValidation = createTextInputValidationHandler(
-    setTextInputValid,
-    textInputValid,
-  );
-  const handleCountryChange = createCountryChangeHandler(setCountryStates, countries);
-
-  const onReCaptchaChange = (token: string | null) => {
-    if (!token) {
-      setReCaptchaValid(false);
-
-      return;
-    }
-
-    setReCaptchaToken(token);
-    setReCaptchaValid(true);
-  };
-  const onSubmit = async (formData: FormData) => {
-    if (reCaptchaSettings?.isEnabledOnStorefront && !reCaptchaToken) {
-      setReCaptchaValid(false);
-    }
-
-    setReCaptchaValid(true);
-
-    const submit = await addAddress({ formData, reCaptchaToken });
-
-    if (submit.status === 'success') {
-      setAccountState({
-        status: 'success',
-        message: t('addNewAddressSuccessMessage'),
-      });
-
-      router.push('/account/addresses');
-
-      return;
-    }
-
-    if (submit.status === 'error') {
-      setFormStatus({ status: 'error', message: submit.message || '' });
-    }
-
-    window.scrollTo({
-      top: 0,
-      behavior: 'smooth',
-    });
-  };
-
-  return (
-    <>
-      {formStatus && (
-        <Message className="mx-auto mb-8 w-full" variant={formStatus.status}>
-          <p>{formStatus.message}</p>
-        </Message>
-      )}
-      <Form action={onSubmit} ref={form}>
-        <div className="grid grid-cols-1 gap-y-3 lg:grid-cols-2 lg:gap-x-6">
-          {addressFields.map((field) => {
-            switch (field.__typename) {
-              case 'TextFormField': {
-                return (
-                  <FieldWrapper fieldId={field.entityId} key={field.entityId}>
-                    <Text
-                      field={field}
-                      isValid={textInputValid[field.entityId]}
-                      name={createFieldName('address', field.entityId)}
-                      onChange={handleTextInputValidation}
-                    />
-                  </FieldWrapper>
-                );
-              }
-
-              case 'PicklistFormField':
-                return (
-                  <FieldWrapper fieldId={field.entityId} key={field.entityId}>
-                    <Picklist
-                      defaultValue={
-                        field.entityId === FieldNameToFieldId.countryCode
-                          ? defaultCountry.code
-                          : undefined
-                      }
-                      field={field}
-                      name={createFieldName('address', field.entityId)}
-                      onChange={
-                        field.entityId === FieldNameToFieldId.countryCode
-                          ? handleCountryChange
-                          : undefined
-                      }
-                      options={countries.map(({ name, code }) => {
-                        return { label: name, entityId: code };
-                      })}
-                    />
-                  </FieldWrapper>
-                );
-
-              case 'PicklistOrTextFormField':
-                return (
-                  <FieldWrapper fieldId={field.entityId} key={field.entityId}>
-                    <PicklistOrText
-                      defaultValue={
-                        field.entityId === FieldNameToFieldId.stateOrProvince
-                          ? countryStates[0]?.name
-                          : undefined
-                      }
-                      field={field}
-                      name={createFieldName('address', field.entityId)}
-                      options={countryStates.map(({ name }) => {
-                        return { entityId: name, label: name };
-                      })}
-                    />
-                  </FieldWrapper>
-                );
-
-              default:
-                return null;
-            }
-          })}
-
-          {reCaptchaSettings?.isEnabledOnStorefront && (
-            <Field className="relative col-span-full max-w-full space-y-2 pb-7" name="ReCAPTCHA">
-              <ReCaptcha
-                onChange={onReCaptchaChange}
-                ref={reCaptchaRef}
-                sitekey={reCaptchaSettings.siteKey}
-              />
-              {!isReCaptchaValid && (
-                <span className="absolute inset-x-0 bottom-0 inline-flex w-full text-xs font-normal text-error">
-                  {t('recaptchaText')}
-                </span>
-              )}
-            </Field>
-          )}
-        </div>
-
-        <div className="mt-8 flex flex-col justify-stretch gap-2 md:flex-row md:justify-start md:gap-6">
-          <FormSubmit asChild>
-            <SubmitButton messages={{ submit: t('submit'), submitting: t('submitting') }} />
-          </FormSubmit>
-          <Button asChild className="items-center px-8 md:w-fit" variant="secondary">
-            <Link href="/account/addresses">{t('cancel')}</Link>
-          </Button>
-        </div>
-      </Form>
-    </>
-  );
-};
diff --git a/core/app/[locale]/(default)/(auth)/account/[tab]/_components/addresses-content/address-book.tsx b/core/app/[locale]/(default)/(auth)/account/[tab]/_components/addresses-content/address-book.tsx
deleted file mode 100644
index 16f59cc53..000000000
--- a/core/app/[locale]/(default)/(auth)/account/[tab]/_components/addresses-content/address-book.tsx
+++ /dev/null
@@ -1,139 +0,0 @@
-'use client';
-
-import { useTranslations } from 'next-intl';
-import { PropsWithChildren, useState } from 'react';
-
-import { getCustomerAddresses } from '~/client/queries/get-customer-addresses';
-import { Link } from '~/components/link';
-import { Button } from '~/components/ui/button';
-import { Message } from '~/components/ui/message';
-
-import { deleteAddress } from '../../_actions/delete-address';
-import { useAccountStatusContext } from '../../../../account-status-provider';
-import { Modal } from '../modal';
-
-export type Addresses = NonNullable<Awaited<ReturnType<typeof getCustomerAddresses>>>['addresses'];
-
-interface AddressChangeProps {
-  addressId: number;
-  isAddressRemovable: boolean;
-  onDelete: (state: Addresses | ((prevState: Addresses) => Addresses)) => void;
-}
-
-const AddressChangeButtons = ({ addressId, isAddressRemovable, onDelete }: AddressChangeProps) => {
-  const { setAccountState } = useAccountStatusContext();
-  const t = useTranslations('Account.Addresses');
-
-  const handleDeleteAddress = async () => {
-    const { status } = await deleteAddress(addressId);
-
-    if (status === 'success') {
-      onDelete((prevAddressBook) =>
-        prevAddressBook.filter(({ entityId }) => entityId !== addressId),
-      );
-
-      setAccountState({
-        status: 'success',
-        message: t('deleteAddress'),
-      });
-    }
-  };
-
-  return (
-    <div className="flex w-fit gap-x-2 divide-y-0">
-      <Button aria-label={t('editButton')} asChild variant="secondary">
-        <Link
-          href={{
-            pathname: '/account/addresses',
-            query: { action: 'edit-address', 'address-id': addressId },
-          }}
-        >
-          {t('editButton')}
-        </Link>
-      </Button>
-      <Modal
-        actionHandler={handleDeleteAddress}
-        confirmationText={t('confirmDeleteAddress')}
-        title={t('deleteModalTitle')}
-      >
-        <Button aria-label={t('deleteButton')} disabled={!isAddressRemovable} variant="subtle">
-          {t('deleteButton')}
-        </Button>
-      </Modal>
-    </div>
-  );
-};
-
-interface AddressBookProps {
-  customerAddresses: Addresses;
-  addressesCount: number;
-}
-
-export const AddressBook = ({
-  children,
-  addressesCount,
-  customerAddresses,
-}: PropsWithChildren<AddressBookProps>) => {
-  const t = useTranslations('Account.Addresses');
-  const [addressBook, setAddressBook] = useState(customerAddresses);
-  const { accountState } = useAccountStatusContext();
-
-  return (
-    <>
-      {(accountState.status === 'error' || accountState.status === 'success') && (
-        <Message className="mb-8 w-full text-gray-500" variant={accountState.status}>
-          <p>{accountState.message}</p>
-        </Message>
-      )}
-      <ul className="mb-12">
-        {addressBook.map(
-          ({
-            entityId,
-            firstName,
-            lastName,
-            address1,
-            address2,
-            city,
-            stateOrProvince,
-            postalCode,
-            countryCode,
-          }) => (
-            <li
-              className="flex w-full border-collapse flex-col justify-start gap-3 border-t border-gray-200 py-6"
-              key={entityId}
-            >
-              <div className="inline-flex flex-col justify-start text-base">
-                <p>
-                  {firstName} {lastName}
-                </p>
-                <p>{address1}</p>
-                {Boolean(address2) && <p>{address2}</p>}
-                <p>
-                  {city}, {stateOrProvince} {postalCode}
-                </p>
-                <p>{countryCode}</p>
-              </div>
-              <AddressChangeButtons
-                addressId={entityId}
-                isAddressRemovable={addressesCount > 1}
-                onDelete={setAddressBook}
-              />
-            </li>
-          ),
-        )}
-        <li className="align-center flex w-full border-collapse flex-col justify-center gap-2 border-t border-gray-200 pt-8 md:flex-row md:justify-between">
-          <Button
-            aria-label={t('addNewAddress')}
-            asChild
-            className="w-full hover:text-white md:w-fit"
-          >
-            <Link href={{ pathname: '/account/addresses', query: { action: 'add-new-address' } }}>
-              {t('addNewAddress')}
-            </Link>
-          </Button>
-          {children}
-        </li>
-      </ul>
-    </>
-  );
-};
diff --git a/core/app/[locale]/(default)/(auth)/account/[tab]/_components/addresses-content/address-field-handlers.ts b/core/app/[locale]/(default)/(auth)/account/[tab]/_components/addresses-content/address-field-handlers.ts
deleted file mode 100644
index f67ac517a..000000000
--- a/core/app/[locale]/(default)/(auth)/account/[tab]/_components/addresses-content/address-field-handlers.ts
+++ /dev/null
@@ -1,85 +0,0 @@
-import { ChangeEvent } from 'react';
-
-import {
-  createFieldName,
-  FieldNameToFieldId,
-} from '~/app/[locale]/(default)/(auth)/login/register-customer/_components/register-customer-form/fields';
-
-import { Countries } from './add-address';
-
-type FieldState = Record<string, boolean>;
-
-type StateOrProvince = Countries[number]['statesOrProvinces'];
-type FieldStateSetFn<Type> = (state: Type | ((prevState: Type) => Type)) => void;
-
-const createTextInputValidationHandler =
-  (textInputStateSetter: FieldStateSetFn<FieldState>, textInputState: FieldState) =>
-  (e: ChangeEvent<HTMLInputElement>) => {
-    const fieldId = Number(e.target.id.split('-')[1]);
-
-    const validityState = e.target.validity;
-    const validationStatus = validityState.valueMissing || validityState.typeMismatch;
-
-    textInputStateSetter({ ...textInputState, [fieldId]: !validationStatus });
-  };
-
-const createPasswordValidationHandler =
-  (passwordStateSetter: FieldStateSetFn<FieldState>) => (e: ChangeEvent<HTMLInputElement>) => {
-    const fieldId = e.target.id.split('-')[1] ?? '';
-
-    switch (FieldNameToFieldId[Number(fieldId)]) {
-      case 'password': {
-        passwordStateSetter((prevState) => ({
-          ...prevState,
-          [fieldId]: !e.target.validity.valueMissing,
-        }));
-
-        return;
-      }
-
-      case 'confirmPassword': {
-        const confirmPassword = e.target.value;
-
-        const passwordFieldName = createFieldName('customer', +fieldId);
-        const password = new FormData(e.target.form ?? undefined).get(passwordFieldName);
-
-        passwordStateSetter((prevState) => ({
-          ...prevState,
-          [fieldId]: password === confirmPassword && !e.target.validity.valueMissing,
-        }));
-
-        return;
-      }
-
-      default: {
-        passwordStateSetter((prevState) => ({
-          ...prevState,
-          [fieldId]: !e.target.validity.valueMissing,
-        }));
-      }
-    }
-  };
-
-const createPicklistOrTextValidationHandler =
-  (picklistWithTextStateSetter: FieldStateSetFn<FieldState>, picklistWithTextState: FieldState) =>
-  (e: ChangeEvent<HTMLInputElement>) => {
-    const fieldId = Number(e.target.id.split('-')[1]);
-
-    const validationStatus = e.target.validity.valueMissing;
-
-    picklistWithTextStateSetter({ ...picklistWithTextState, [fieldId]: !validationStatus });
-  };
-
-const createCountryChangeHandler =
-  (provinceSetter: FieldStateSetFn<StateOrProvince>, countries: Countries) => (value: string) => {
-    const states = countries.find(({ code }) => code === value)?.statesOrProvinces;
-
-    provinceSetter(states ?? []);
-  };
-
-export {
-  createTextInputValidationHandler,
-  createPicklistOrTextValidationHandler,
-  createPasswordValidationHandler,
-  createCountryChangeHandler,
-};
diff --git a/core/app/[locale]/(default)/(auth)/account/[tab]/_components/addresses-content/customer-edit-address.tsx b/core/app/[locale]/(default)/(auth)/account/[tab]/_components/addresses-content/customer-edit-address.tsx
deleted file mode 100644
index 900ac2a0f..000000000
--- a/core/app/[locale]/(default)/(auth)/account/[tab]/_components/addresses-content/customer-edit-address.tsx
+++ /dev/null
@@ -1,95 +0,0 @@
-import { NextIntlClientProvider } from 'next-intl';
-import { getLocale, getMessages } from 'next-intl/server';
-
-import { getSessionCustomerId } from '~/auth';
-import { client } from '~/client';
-import { FORM_FIELDS_FRAGMENT } from '~/client/fragments/form-fields';
-import { graphql, ResultOf } from '~/client/graphql';
-import { getCustomerAddresses } from '~/client/queries/get-customer-addresses';
-
-import { EditAddress as EditAddressForm } from './edit-address';
-
-export const CustomerEditAdressQuery = graphql(
-  `
-    query customerNewAddress(
-      $countryCode: String
-      $shippingFilters: FormFieldFiltersInput
-      $shippingSorting: FormFieldSortInput
-    ) {
-      site {
-        settings {
-          contact {
-            country
-          }
-          reCaptcha {
-            isEnabledOnStorefront
-            siteKey
-          }
-          formFields {
-            shippingAddress(filters: $shippingFilters, sortBy: $shippingSorting) {
-              ...FormFields
-            }
-          }
-        }
-      }
-      geography {
-        countries(filters: { code: $countryCode }) {
-          __typename
-          name
-          entityId
-          code
-          statesOrProvinces {
-            __typename
-            entityId
-            name
-            abbreviation
-          }
-        }
-      }
-    }
-  `,
-  [FORM_FIELDS_FRAGMENT],
-);
-
-export type EditAddressQueryResponseType = ResultOf<typeof CustomerEditAdressQuery>;
-
-type CustomerAddresses = NonNullable<Awaited<ReturnType<typeof getCustomerAddresses>>>;
-
-export type Address = CustomerAddresses['addresses'][number];
-
-export async function CustomerEditAddress({
-  address,
-  isAddressRemovable,
-}: {
-  address: Address;
-  isAddressRemovable: boolean;
-}) {
-  const customerId = await getSessionCustomerId();
-  const locale = await getLocale();
-  const messages = await getMessages();
-
-  const { data } = await client.fetch({
-    document: CustomerEditAdressQuery,
-    customerId,
-    fetchOptions: { cache: 'no-store' },
-    variables: {
-      countryCode: null,
-      shippingSorting: 'SORT_ORDER',
-    },
-  });
-  const reCaptchaSettings = data.site.settings?.reCaptcha;
-  const countries = data.geography.countries;
-  const addressFields = [...(data.site.settings?.formFields.shippingAddress ?? [])];
-
-  return (
-    <NextIntlClientProvider locale={locale} messages={{ Account: messages.Account ?? {} }}>
-      <EditAddressForm
-        address={address}
-        addressFields={addressFields}
-        canBeDeleted={isAddressRemovable}
-        countries={countries || []}
-        reCaptchaSettings={reCaptchaSettings}
-      />
-    </NextIntlClientProvider>
-  );
-}
diff --git a/core/app/[locale]/(default)/(auth)/account/[tab]/_components/addresses-content/customer-new-address.tsx b/core/app/[locale]/(default)/(auth)/account/[tab]/_components/addresses-content/customer-new-address.tsx
deleted file mode 100644
index ca9ef35d1..000000000
--- a/core/app/[locale]/(default)/(auth)/account/[tab]/_components/addresses-content/customer-new-address.tsx
+++ /dev/null
@@ -1,96 +0,0 @@
-import { NextIntlClientProvider } from 'next-intl';
-import { getLocale, getMessages } from 'next-intl/server';
-
-import { getSessionCustomerId } from '~/auth';
-import { client } from '~/client';
-import { FORM_FIELDS_FRAGMENT } from '~/client/fragments/form-fields';
-import { graphql, ResultOf } from '~/client/graphql';
-
-import { AddAddress as AddAddressForm } from './add-address';
-
-const CustomerNewAdressQuery = graphql(
-  `
-    query customerNewAddress(
-      $countryCode: String
-      $shippingFilters: FormFieldFiltersInput
-      $shippingSorting: FormFieldSortInput
-    ) {
-      site {
-        settings {
-          contact {
-            country
-          }
-          reCaptcha {
-            isEnabledOnStorefront
-            siteKey
-          }
-          formFields {
-            shippingAddress(filters: $shippingFilters, sortBy: $shippingSorting) {
-              ...FormFields
-            }
-          }
-        }
-      }
-      geography {
-        countries(filters: { code: $countryCode }) {
-          __typename
-          name
-          entityId
-          code
-          statesOrProvinces {
-            __typename
-            entityId
-            name
-            abbreviation
-          }
-        }
-      }
-    }
-  `,
-  [FORM_FIELDS_FRAGMENT],
-);
-
-export type NewAddressQueryResponseType = ResultOf<typeof CustomerNewAdressQuery>;
-
-const FALLBACK_COUNTRY = {
-  entityId: 226,
-  name: 'United States',
-  code: 'US',
-  states: [],
-};
-
-export async function CustomerNewAddress() {
-  const customerId = await getSessionCustomerId();
-  const locale = await getLocale();
-  const messages = await getMessages();
-  const { data } = await client.fetch({
-    document: CustomerNewAdressQuery,
-    customerId,
-    fetchOptions: { cache: 'no-store' },
-    variables: {
-      shippingSorting: 'SORT_ORDER',
-    },
-  });
-
-  const addressFields = [...(data.site.settings?.formFields.shippingAddress ?? [])];
-  const reCaptchaSettings = data.site.settings?.reCaptcha;
-  const countries = data.geography.countries;
-  const defaultCountry = data.site.settings?.contact?.country || FALLBACK_COUNTRY.name;
-
-  const {
-    code = FALLBACK_COUNTRY.code,
-    entityId = FALLBACK_COUNTRY.entityId,
-    statesOrProvinces: defaultCountryStates = FALLBACK_COUNTRY.states,
-  } = countries?.find(({ name: country }) => country === defaultCountry) || {};
-
-  return (
-    <NextIntlClientProvider locale={locale} messages={{ Account: messages.Account ?? {} }}>
-      <AddAddressForm
-        addressFields={addressFields}
-        countries={countries || []}
-        defaultCountry={{ id: entityId, code, states: defaultCountryStates }}
-        reCaptchaSettings={reCaptchaSettings}
-      />
-    </NextIntlClientProvider>
-  );
-}
diff --git a/core/app/[locale]/(default)/(auth)/account/[tab]/_components/addresses-content/edit-address.tsx b/core/app/[locale]/(default)/(auth)/account/[tab]/_components/addresses-content/edit-address.tsx
deleted file mode 100644
index 9056bf91a..000000000
--- a/core/app/[locale]/(default)/(auth)/account/[tab]/_components/addresses-content/edit-address.tsx
+++ /dev/null
@@ -1,296 +0,0 @@
-'use client';
-
-import { useRouter } from 'next/navigation';
-import { useTranslations } from 'next-intl';
-import { useEffect, useRef, useState } from 'react';
-import { useFormStatus } from 'react-dom';
-import ReCaptcha from 'react-google-recaptcha';
-
-import {
-  createFieldName,
-  FieldNameToFieldId,
-  FieldWrapper,
-  Picklist,
-  PicklistOrText,
-  Text,
-} from '~/app/[locale]/(default)/(auth)/login/register-customer/_components/register-customer-form/fields';
-import { Link } from '~/components/link';
-import { Button } from '~/components/ui/button';
-import { Field, Form, FormSubmit } from '~/components/ui/form';
-import { Message } from '~/components/ui/message';
-
-import { deleteAddress } from '../../_actions/delete-address';
-import { updateAddress } from '../../_actions/update-address';
-import { useAccountStatusContext } from '../../../../account-status-provider';
-import { Modal } from '../modal';
-
-import { AddressFields, Countries } from './add-address';
-import {
-  createCountryChangeHandler,
-  createTextInputValidationHandler,
-} from './address-field-handlers';
-import { Address } from './customer-edit-address';
-
-interface FormStatus {
-  status: 'success' | 'error';
-  message: string;
-}
-
-type CountryStates = Countries[number]['statesOrProvinces'];
-type FieldUnionType = Exclude<
-  keyof typeof FieldNameToFieldId,
-  'email' | 'password' | 'confirmPassword' | 'exclusiveOffers' | 'currentPassword'
->;
-
-const isExistedField = (name: unknown): name is FieldUnionType => {
-  if (typeof name === 'string' && name in FieldNameToFieldId) {
-    return true;
-  }
-
-  return false;
-};
-
-interface SumbitMessages {
-  messages: {
-    submit: string;
-    submitting: string;
-  };
-}
-
-const SubmitButton = ({ messages }: SumbitMessages) => {
-  const { pending } = useFormStatus();
-
-  return (
-    <Button
-      className="relative items-center px-8 py-2 md:w-fit"
-      loading={pending}
-      loadingText={messages.submitting}
-      variant="primary"
-    >
-      {messages.submit}
-    </Button>
-  );
-};
-
-interface EditAddressProps {
-  address: Address;
-  addressFields: AddressFields;
-  canBeDeleted: boolean;
-  countries: Countries;
-  reCaptchaSettings?: {
-    isEnabledOnStorefront: boolean;
-    siteKey: string;
-  };
-}
-
-export const EditAddress = ({
-  address,
-  addressFields,
-  canBeDeleted,
-  countries,
-  reCaptchaSettings,
-}: EditAddressProps) => {
-  const form = useRef<HTMLFormElement>(null);
-  const [formStatus, setFormStatus] = useState<FormStatus | null>(null);
-
-  const t = useTranslations('Account.EditAddress');
-
-  const reCaptchaRef = useRef<ReCaptcha>(null);
-  const router = useRouter();
-  const [reCaptchaToken, setReCaptchaToken] = useState('');
-  const [isReCaptchaValid, setReCaptchaValid] = useState(true);
-  const { setAccountState } = useAccountStatusContext();
-
-  useEffect(() => {
-    setAccountState({ status: 'idle' });
-  }, [setAccountState]);
-
-  const [textInputValid, setTextInputValid] = useState<Record<string, boolean>>({});
-
-  const defaultStates = countries
-    .filter((country) => country.code === address.countryCode)
-    .flatMap((country) => country.statesOrProvinces);
-  const [countryStates, setCountryStates] = useState<CountryStates>(defaultStates);
-
-  const handleTextInputValidation = createTextInputValidationHandler(
-    setTextInputValid,
-    textInputValid,
-  );
-  const handleCountryChange = createCountryChangeHandler(setCountryStates, countries);
-
-  const onReCaptchaChange = (token: string | null) => {
-    if (!token) {
-      setReCaptchaValid(false);
-
-      return;
-    }
-
-    setReCaptchaToken(token);
-    setReCaptchaValid(true);
-  };
-
-  const onSubmit = async (formData: FormData) => {
-    if (reCaptchaSettings?.isEnabledOnStorefront && !reCaptchaToken) {
-      setReCaptchaValid(false);
-
-      return;
-    }
-
-    setReCaptchaValid(true);
-
-    const submit = await updateAddress({ addressId: address.entityId, formData });
-
-    if (submit.status === 'success') {
-      setAccountState({
-        status: 'success',
-        message: t('successMessage'),
-      });
-
-      router.push('/account/addresses');
-
-      return;
-    }
-
-    if (submit.status === 'error') {
-      setFormStatus({ status: 'error', message: submit.message || '' });
-    }
-
-    window.scrollTo({
-      top: 0,
-      behavior: 'smooth',
-    });
-  };
-  const onDeleteAddress = async () => {
-    const { status, message } = await deleteAddress(address.entityId);
-
-    if (status === 'success') {
-      setAccountState({ status, message: t('deleteAddress') });
-    }
-
-    if (status === 'error') {
-      setAccountState({ status, message });
-    }
-
-    router.push('/account/addresses');
-  };
-
-  return (
-    <>
-      {formStatus && (
-        <Message className="mx-auto mb-8 w-full" variant={formStatus.status}>
-          <p>{formStatus.message}</p>
-        </Message>
-      )}
-      <Form action={onSubmit} ref={form}>
-        <div className="grid grid-cols-1 gap-y-3 lg:grid-cols-2 lg:gap-x-6">
-          {addressFields.map((field) => {
-            const key = FieldNameToFieldId[field.entityId];
-
-            if (!isExistedField(key)) {
-              return null;
-            }
-
-            const defaultValue = address[key] || undefined;
-
-            switch (field.__typename) {
-              case 'TextFormField': {
-                return (
-                  <FieldWrapper fieldId={field.entityId} key={field.entityId}>
-                    <Text
-                      defaultValue={defaultValue}
-                      field={field}
-                      isValid={textInputValid[field.entityId]}
-                      name={createFieldName('address', field.entityId)}
-                      onChange={handleTextInputValidation}
-                    />
-                  </FieldWrapper>
-                );
-              }
-
-              case 'PicklistFormField':
-                return (
-                  <FieldWrapper fieldId={field.entityId} key={field.entityId}>
-                    <Picklist
-                      defaultValue={
-                        field.entityId === FieldNameToFieldId.countryCode ? defaultValue : undefined
-                      }
-                      field={field}
-                      name={createFieldName('address', field.entityId)}
-                      onChange={
-                        field.entityId === FieldNameToFieldId.countryCode
-                          ? handleCountryChange
-                          : undefined
-                      }
-                      options={countries.map(({ name, code }) => {
-                        return { label: name, entityId: code };
-                      })}
-                    />
-                  </FieldWrapper>
-                );
-
-              case 'PicklistOrTextFormField': {
-                return (
-                  <FieldWrapper fieldId={field.entityId} key={field.entityId}>
-                    <PicklistOrText
-                      defaultValue={
-                        field.entityId === FieldNameToFieldId.stateOrProvince
-                          ? defaultValue
-                          : undefined
-                      }
-                      field={field}
-                      key={countryStates.length}
-                      name={createFieldName('address', field.entityId)}
-                      options={countryStates.map(({ name }) => {
-                        return { entityId: name, label: name };
-                      })}
-                    />
-                  </FieldWrapper>
-                );
-              }
-
-              default:
-                return null;
-            }
-          })}
-
-          {reCaptchaSettings?.isEnabledOnStorefront && (
-            <Field className="relative col-span-full max-w-full space-y-2 pb-7" name="ReCAPTCHA">
-              <ReCaptcha
-                onChange={onReCaptchaChange}
-                ref={reCaptchaRef}
-                sitekey={reCaptchaSettings.siteKey}
-              />
-              {!isReCaptchaValid && (
-                <span className="absolute inset-x-0 bottom-0 inline-flex w-full text-xs font-normal text-error">
-                  {t('recaptchaText')}
-                </span>
-              )}
-            </Field>
-          )}
-        </div>
-
-        <div className="mt-8 flex flex-col justify-stretch gap-2 md:flex-row md:justify-between md:gap-0">
-          <FormSubmit asChild>
-            <SubmitButton messages={{ submit: t('submit'), submitting: t('submitting') }} />
-          </FormSubmit>
-          <Button asChild className="items-center px-8 md:ms-6 md:w-fit" variant="secondary">
-            <Link href="/account/addresses">{t('cancel')}</Link>
-          </Button>
-          <Modal
-            actionHandler={onDeleteAddress}
-            confirmationText={t('confirmDeleteAddress')}
-            title={t('deleteModalTitle')}
-          >
-            <Button
-              className="ms-auto items-center px-8 md:w-fit"
-              disabled={!canBeDeleted}
-              variant="subtle"
-            >
-              {t('deleteButton')}
-            </Button>
-          </Modal>
-        </div>
-      </Form>
-    </>
-  );
-};
diff --git a/core/app/[locale]/(default)/(auth)/account/[tab]/_components/addresses-content/index.tsx b/core/app/[locale]/(default)/(auth)/account/[tab]/_components/addresses-content/index.tsx
deleted file mode 100644
index 46cff0eb4..000000000
--- a/core/app/[locale]/(default)/(auth)/account/[tab]/_components/addresses-content/index.tsx
+++ /dev/null
@@ -1,71 +0,0 @@
-import { getLocale, getTranslations } from 'next-intl/server';
-
-import { getCustomerAddresses } from '~/client/queries/get-customer-addresses';
-import { Pagination } from '~/components/ui/pagination';
-
-import { TabHeading } from '../tab-heading';
-
-import { AddressBook } from './address-book';
-import { CustomerEditAddress } from './customer-edit-address';
-import { CustomerNewAddress } from './customer-new-address';
-
-type CustomerAddresses = NonNullable<Awaited<ReturnType<typeof getCustomerAddresses>>>;
-
-interface Props {
-  addresses: CustomerAddresses['addresses'];
-  activeAddressId?: string;
-  addressesCount: number;
-  customerAction?: 'add-new-address' | 'edit-address';
-  pageInfo: CustomerAddresses['pageInfo'];
-}
-
-export const AddressesContent = async ({
-  addresses,
-  addressesCount,
-  activeAddressId,
-  customerAction,
-  pageInfo,
-}: Props) => {
-  const locale = await getLocale();
-  const t = await getTranslations({ locale, namespace: 'Account.Addresses' });
-  const { hasNextPage, hasPreviousPage, startCursor, endCursor } = pageInfo;
-
-  if (customerAction === 'add-new-address') {
-    return (
-      <div className="mx-auto mb-14 lg:w-2/3">
-        <h1 className="mb-8 text-3xl font-black lg:text-4xl">{t('newAddress')}</h1>
-        <CustomerNewAddress />
-      </div>
-    );
-  }
-
-  if (customerAction === 'edit-address' && activeAddressId) {
-    const activeAddress = addresses
-      .filter(({ entityId }) => entityId.toString() === activeAddressId)
-      .shift();
-
-    return (
-      <div className="mx-auto mb-14 lg:w-2/3">
-        <h1 className="mb-8 text-3xl font-black lg:text-4xl">{t('editAddress')}</h1>
-        {activeAddress && Object.keys(activeAddress).length > 0 ? (
-          <CustomerEditAddress address={activeAddress} isAddressRemovable={addresses.length > 1} />
-        ) : null}
-      </div>
-    );
-  }
-
-  return (
-    <>
-      <TabHeading heading="addresses" />
-      <AddressBook addressesCount={addressesCount} customerAddresses={addresses} key={endCursor}>
-        <Pagination
-          className="my-0 inline-flex justify-center text-center"
-          endCursor={endCursor ?? undefined}
-          hasNextPage={hasNextPage}
-          hasPreviousPage={hasPreviousPage}
-          startCursor={startCursor ?? undefined}
-        />
-      </AddressBook>
-    </>
-  );
-};
diff --git a/core/app/[locale]/(default)/(auth)/account/[tab]/_components/change-password-form.tsx b/core/app/[locale]/(default)/(auth)/account/[tab]/_components/change-password-form.tsx
deleted file mode 100644
index 58974bcbc..000000000
--- a/core/app/[locale]/(default)/(auth)/account/[tab]/_components/change-password-form.tsx
+++ /dev/null
@@ -1,272 +0,0 @@
-'use client';
-
-import { useTranslations } from 'next-intl';
-import { ChangeEvent, useEffect, useRef, useState } from 'react';
-import { useFormState, useFormStatus } from 'react-dom';
-import { z } from 'zod';
-
-import { logout } from '~/components/header/_actions/logout';
-import { Link } from '~/components/link';
-import { Button } from '~/components/ui/button';
-import {
-  Field,
-  FieldControl,
-  FieldLabel,
-  FieldMessage,
-  Form,
-  FormSubmit,
-  Input,
-} from '~/components/ui/form';
-import { Message } from '~/components/ui/message';
-import { useRouter } from '~/navigation';
-
-import {
-  CustomerChangePasswordSchema,
-  submitCustomerChangePasswordForm,
-} from '../_actions/submit-customer-change-password-form';
-
-type Passwords = z.infer<typeof CustomerChangePasswordSchema>;
-
-const validateAgainstConfirmPassword = ({
-  newPassword,
-  confirmPassword,
-}: {
-  newPassword: Passwords['newPassword'];
-  confirmPassword: Passwords['confirmPassword'];
-}): boolean => newPassword === confirmPassword;
-
-const validateAgainstCurrentPassword = ({
-  newPassword,
-  currentPassword,
-}: {
-  newPassword: Passwords['newPassword'];
-  currentPassword: Passwords['currentPassword'];
-}): boolean => newPassword !== currentPassword;
-
-const validatePasswords = (
-  validationField: 'new-password' | 'confirm-password',
-  formData?: FormData,
-) => {
-  if (!formData) {
-    return false;
-  }
-
-  if (validationField === 'new-password') {
-    return CustomerChangePasswordSchema.omit({ confirmPassword: true })
-      .refine(validateAgainstCurrentPassword)
-      .safeParse({
-        currentPassword: formData.get('current-password'),
-        newPassword: formData.get('new-password'),
-      }).success;
-  }
-
-  return CustomerChangePasswordSchema.refine(validateAgainstConfirmPassword).safeParse({
-    currentPassword: formData.get('current-password'),
-    newPassword: formData.get('new-password'),
-    confirmPassword: formData.get('confirm-password'),
-  }).success;
-};
-
-const SubmitButton = () => {
-  const { pending } = useFormStatus();
-  const t = useTranslations('Account.SubmitChangePassword');
-
-  return (
-    <Button
-      className="relative w-full items-center px-8 py-2 md:w-fit"
-      data-button
-      loading={pending}
-      loadingText={t('spinnerText')}
-      variant="primary"
-    >
-      {t('submitText')}
-    </Button>
-  );
-};
-
-export const ChangePasswordForm = () => {
-  const router = useRouter();
-  const form = useRef<HTMLFormElement>(null);
-  const t = useTranslations('Account.ChangePassword');
-  const [state, formAction] = useFormState(submitCustomerChangePasswordForm, {
-    status: 'idle',
-    message: '',
-  });
-
-  const [isCurrentPasswordValid, setIsCurrentPasswordValid] = useState(true);
-  const [isNewPasswordValid, setIsNewPasswordValid] = useState(true);
-  const [isConfirmPasswordValid, setIsConfirmPasswordValid] = useState(true);
-
-  useEffect(() => {
-    if (state.status === 'success') {
-      setTimeout(() => {
-        void logout();
-        router.push('/login');
-      }, 2000);
-    }
-  }, [state, router]);
-
-  let messageText = '';
-
-  if (state.status === 'error') {
-    messageText = state.message;
-  }
-
-  if (state.status === 'success') {
-    messageText = t('successMessage');
-  }
-
-  const handleCurrentPasswordChange = (e: ChangeEvent<HTMLInputElement>) =>
-    setIsCurrentPasswordValid(!e.target.validity.valueMissing);
-  const handleNewPasswordChange = (e: ChangeEvent<HTMLInputElement>) => {
-    let formData;
-
-    if (e.target.form) {
-      formData = new FormData(e.target.form);
-    }
-
-    const confirmPassword = formData?.get('confirm-password');
-    const isValid = confirmPassword
-      ? validatePasswords('new-password', formData) &&
-        validatePasswords('confirm-password', formData)
-      : validatePasswords('new-password', formData);
-
-    setIsNewPasswordValid(isValid);
-  };
-  const handleConfirmPasswordValidation = (e: ChangeEvent<HTMLInputElement>) => {
-    let formData;
-
-    if (e.target.form) {
-      formData = new FormData(e.target.form);
-    }
-
-    const isValid = validatePasswords('confirm-password', formData);
-
-    setIsConfirmPasswordValid(isValid);
-  };
-
-  return (
-    <>
-      {(state.status === 'error' || state.status === 'success') && (
-        <Message className="mb-8 w-full text-gray-500" variant={state.status}>
-          <p>{messageText}</p>
-        </Message>
-      )}
-
-      <Form action={formAction} className="mb-14 flex flex-col gap-4 md:py-4 lg:p-0" ref={form}>
-        <Field className="relative space-y-2 pb-7" name="current-password">
-          <FieldLabel htmlFor="current-password" isRequired={true}>
-            {t('currentPasswordLabel')}
-          </FieldLabel>
-          <FieldControl asChild>
-            <Input
-              autoComplete="none"
-              error={!isCurrentPasswordValid}
-              id="current-password"
-              onChange={handleCurrentPasswordChange}
-              onInvalid={handleCurrentPasswordChange}
-              required
-              type="password"
-            />
-          </FieldControl>
-          <FieldMessage
-            className="absolute inset-x-0 bottom-0 inline-flex w-full text-sm text-error"
-            match="valueMissing"
-          >
-            {t('notEmptyMessage')}
-          </FieldMessage>
-        </Field>
-        <Field className="relative space-y-2 pb-7" name="new-password">
-          <FieldLabel htmlFor="new-password" isRequired={true}>
-            {t('newPasswordLabel')}
-          </FieldLabel>
-          <FieldControl asChild>
-            <Input
-              autoComplete="none"
-              error={!isNewPasswordValid}
-              id="new-password"
-              onChange={handleNewPasswordChange}
-              onInvalid={handleNewPasswordChange}
-              required
-              type="password"
-            />
-          </FieldControl>
-          <FieldMessage
-            className="absolute inset-x-0 bottom-0 inline-flex w-full text-sm text-error"
-            match="valueMissing"
-          >
-            {t('notEmptyMessage')}
-          </FieldMessage>
-          <FieldMessage
-            className="absolute inset-x-0 inline-flex w-full text-sm text-error md:bottom-0"
-            match={(newPasswordValue: string, formData: FormData) => {
-              const currentPasswordValue = formData.get('current-password');
-              const confirmPassword = formData.get('confirm-password');
-              let isMatched;
-
-              if (confirmPassword) {
-                isMatched =
-                  newPasswordValue !== currentPasswordValue && newPasswordValue === confirmPassword;
-
-                setIsNewPasswordValid(isMatched);
-
-                return !isMatched;
-              }
-
-              isMatched = currentPasswordValue === newPasswordValue;
-
-              setIsNewPasswordValid(!isMatched);
-
-              return isMatched;
-            }}
-          >
-            {t('newPasswordValidationMessage')}
-          </FieldMessage>
-        </Field>
-        <Field className="relative space-y-2 pb-7" name="confirm-password">
-          <FieldLabel htmlFor="confirm-password" isRequired={true}>
-            {t('confirmPasswordLabel')}
-          </FieldLabel>
-          <FieldControl asChild>
-            <Input
-              autoComplete="none"
-              error={!isConfirmPasswordValid}
-              id="confirm-password"
-              onChange={handleConfirmPasswordValidation}
-              onInvalid={handleConfirmPasswordValidation}
-              required
-              type="password"
-            />
-          </FieldControl>
-          <FieldMessage
-            className="absolute inset-x-0 bottom-0 inline-flex w-full text-sm text-error"
-            match="valueMissing"
-          >
-            {t('notEmptyMessage')}
-          </FieldMessage>
-          <FieldMessage
-            className="absolute inset-x-0 bottom-0 inline-flex w-full text-sm text-error"
-            match={(confirmPassword: string, formData: FormData) => {
-              const newPassword = formData.get('new-password');
-              const isMatched = confirmPassword === newPassword;
-
-              setIsConfirmPasswordValid(isMatched);
-
-              return !isMatched;
-            }}
-          >
-            {t('confirmPasswordValidationMessage')}
-          </FieldMessage>
-        </Field>
-        <div className="flex flex-col justify-start gap-4 md:flex-row">
-          <FormSubmit asChild>
-            <SubmitButton />
-          </FormSubmit>
-          <Button asChild className="w-full md:w-fit" variant="secondary">
-            <Link href="/account/settings">{t('cancel')}</Link>
-          </Button>
-        </div>
-      </Form>
-    </>
-  );
-};
diff --git a/core/app/[locale]/(default)/(auth)/account/[tab]/_components/modal.tsx b/core/app/[locale]/(default)/(auth)/account/[tab]/_components/modal.tsx
deleted file mode 100644
index 17b91235d..000000000
--- a/core/app/[locale]/(default)/(auth)/account/[tab]/_components/modal.tsx
+++ /dev/null
@@ -1,70 +0,0 @@
-'use client';
-
-import * as DialogPrimitive from '@radix-ui/react-alert-dialog';
-import { X } from 'lucide-react';
-import { MouseEventHandler, PropsWithChildren, useId } from 'react';
-
-import { Button } from '~/components/ui/button';
-
-interface Props extends PropsWithChildren {
-  actionHandler?: MouseEventHandler<HTMLButtonElement>;
-  title: string;
-  descriptionText?: string;
-  confirmationText?: string;
-  abortText?: string;
-}
-
-export const Modal = ({
-  abortText = 'Cancel',
-  actionHandler,
-  confirmationText = 'OK',
-  descriptionText,
-  title,
-  children,
-}: Props) => {
-  const id = useId();
-
-  return (
-    <DialogPrimitive.Root>
-      <DialogPrimitive.Trigger aria-controls={id} asChild>
-        {children}
-      </DialogPrimitive.Trigger>
-
-      <DialogPrimitive.Portal>
-        <DialogPrimitive.Overlay className="data-[state=open]:animate-overlayShow fixed inset-0 bg-black/[.2]" />
-        <DialogPrimitive.Content
-          className="data-[state=open]:animate-contentShow fixed left-[50%] top-[50%] w-full translate-x-[-50%] translate-y-[-50%] bg-white shadow-[hsl(206_22%_7%_/_35%)_0px_10px_38px_-10px,_hsl(206_22%_7%_/_20%)_0px_10px_20px_-15px] focus:outline-none sm:w-8/12 md:w-3/4 md:w-6/12 lg:w-3/5 lg:w-5/12"
-          id={id}
-        >
-          <div className="flex justify-between gap-4 p-6">
-            <DialogPrimitive.Title className="w-5/6 grow font-semibold">
-              {title}
-            </DialogPrimitive.Title>
-            <DialogPrimitive.Cancel asChild>
-              <Button className="ms-auto w-min p-2" type="button" variant="subtle">
-                <X>
-                  <title>{abortText}</title>
-                </X>
-              </Button>
-            </DialogPrimitive.Cancel>
-          </div>
-          {Boolean(descriptionText) && (
-            <DialogPrimitive.Description>{descriptionText}</DialogPrimitive.Description>
-          )}
-          <div className="flex flex-col gap-2 p-6 lg:flex-row">
-            <DialogPrimitive.Action asChild>
-              <Button className="w-full lg:w-fit" onClick={actionHandler} variant="primary">
-                {confirmationText}
-              </Button>
-            </DialogPrimitive.Action>
-            <DialogPrimitive.Cancel asChild>
-              <Button className="w-full lg:w-fit" variant="subtle">
-                {abortText}
-              </Button>
-            </DialogPrimitive.Cancel>
-          </div>
-        </DialogPrimitive.Content>
-      </DialogPrimitive.Portal>
-    </DialogPrimitive.Root>
-  );
-};
diff --git a/core/app/[locale]/(default)/(auth)/account/[tab]/_components/settings-content.tsx b/core/app/[locale]/(default)/(auth)/account/[tab]/_components/settings-content.tsx
deleted file mode 100644
index 28a1dff8f..000000000
--- a/core/app/[locale]/(default)/(auth)/account/[tab]/_components/settings-content.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-import { NextIntlClientProvider } from 'next-intl';
-import { getLocale, getMessages } from 'next-intl/server';
-
-import { getCustomerSettingsQuery } from '../page-data';
-
-import { ChangePasswordForm } from './change-password-form';
-import { TabHeading } from './tab-heading';
-import { UpdateSettingsForm } from './update-settings-form';
-
-interface Props {
-  action?: string | string[];
-  customerSettings: CustomerSettings;
-}
-
-type CustomerSettings = NonNullable<Awaited<ReturnType<typeof getCustomerSettingsQuery>>>;
-
-export const SettingsContent = async ({ action, customerSettings }: Props) => {
-  const locale = await getLocale();
-  const messages = await getMessages({ locale });
-
-  if (action === 'change_password') {
-    return (
-      <div className="mx-auto lg:w-2/3">
-        <TabHeading heading={action} />
-        <NextIntlClientProvider locale={locale} messages={{ Account: messages.Account ?? {} }}>
-          <ChangePasswordForm />
-        </NextIntlClientProvider>
-      </div>
-    );
-  }
-
-  return (
-    <div className="mx-auto lg:w-2/3">
-      <TabHeading heading="settings" />
-      <UpdateSettingsForm {...customerSettings} />
-    </div>
-  );
-};
diff --git a/core/app/[locale]/(default)/(auth)/account/[tab]/_components/tab-heading.tsx b/core/app/[locale]/(default)/(auth)/account/[tab]/_components/tab-heading.tsx
deleted file mode 100644
index 6b77ecf1e..000000000
--- a/core/app/[locale]/(default)/(auth)/account/[tab]/_components/tab-heading.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import { getLocale, getTranslations } from 'next-intl/server';
-
-import { TabType } from '../layout';
-
-export const TabHeading = async ({ heading }: { heading: TabType | 'change_password' }) => {
-  const locale = await getLocale();
-  const t = await getTranslations({ locale, namespace: 'Account.Home' });
-  const tab = heading === 'recently-viewed' ? 'recentlyViewed' : heading;
-  const title = tab === 'change_password' ? 'changePassword' : tab;
-
-  return <h2 className="mb-8 text-3xl font-black lg:text-4xl">{t(title)}</h2>;
-};
diff --git a/core/app/[locale]/(default)/(auth)/account/[tab]/_components/update-settings-form/_actions/update-customer.ts b/core/app/[locale]/(default)/(auth)/account/[tab]/_components/update-settings-form/_actions/update-customer.ts
deleted file mode 100644
index 151e8deaf..000000000
--- a/core/app/[locale]/(default)/(auth)/account/[tab]/_components/update-settings-form/_actions/update-customer.ts
+++ /dev/null
@@ -1,36 +0,0 @@
-'use server';
-
-import { updateCustomer as updateCustomerClient } from '~/client/mutations/update-customer';
-
-interface UpdateCustomerForm {
-  formData: FormData;
-  reCaptchaToken?: string;
-}
-
-export const updateCustomer = async ({ formData, reCaptchaToken }: UpdateCustomerForm) => {
-  formData.delete('g-recaptcha-response');
-
-  const formFields = Object.fromEntries(formData.entries());
-
-  const response = await updateCustomerClient({ formFields, reCaptchaToken });
-
-  if (response.errors.length === 0) {
-    const { customer } = response;
-
-    if (!customer) {
-      return {
-        status: 'error',
-        error: 'Customer does not exist',
-      };
-    }
-
-    const { firstName, lastName } = customer;
-
-    return { status: 'success', data: { firstName, lastName } };
-  }
-
-  return {
-    status: 'error',
-    error: response.errors.map((error) => error.message).join('\n'),
-  };
-};
diff --git a/core/app/[locale]/(default)/(auth)/account/[tab]/_components/update-settings-form/fields/text.tsx b/core/app/[locale]/(default)/(auth)/account/[tab]/_components/update-settings-form/fields/text.tsx
deleted file mode 100644
index 5ab8a112f..000000000
--- a/core/app/[locale]/(default)/(auth)/account/[tab]/_components/update-settings-form/fields/text.tsx
+++ /dev/null
@@ -1,57 +0,0 @@
-import { useTranslations } from 'next-intl';
-import { ChangeEvent } from 'react';
-
-import { Field, FieldControl, FieldLabel, FieldMessage, Input } from '~/components/ui/form';
-
-import { FieldNameToFieldId } from '..';
-
-interface TextProps {
-  defaultValue?: string;
-  entityId: number;
-  isRequired?: boolean;
-  isValid?: boolean;
-  label: string;
-  onChange: (e: ChangeEvent<HTMLInputElement>) => void;
-  type?: 'text' | 'email';
-}
-
-export const Text = ({
-  defaultValue,
-  entityId,
-  isRequired = false,
-  isValid,
-  label,
-  onChange,
-  type = 'text',
-}: TextProps) => {
-  const t = useTranslations('Account.Settings.validationMessages');
-  const fieldName = FieldNameToFieldId[entityId];
-  const name = fieldName ?? `field-${entityId}`;
-
-  return (
-    <Field className="relative space-y-2 pb-7" name={name}>
-      <FieldLabel htmlFor={name} isRequired={isRequired}>
-        {label}
-      </FieldLabel>
-      <FieldControl asChild>
-        <Input
-          defaultValue={defaultValue}
-          error={isValid === false}
-          id={`field-${entityId}`}
-          onChange={isRequired ? onChange : undefined}
-          onInvalid={isRequired ? onChange : undefined}
-          required={isRequired}
-          type={type}
-        />
-      </FieldControl>
-      {isRequired && (
-        <FieldMessage
-          className="absolute inset-x-0 bottom-0 inline-flex w-full text-xs font-normal text-error-secondary"
-          match="valueMissing"
-        >
-          {t(fieldName ?? 'empty')}
-        </FieldMessage>
-      )}
-    </Field>
-  );
-};
diff --git a/core/app/[locale]/(default)/(auth)/account/[tab]/_components/update-settings-form/index.tsx b/core/app/[locale]/(default)/(auth)/account/[tab]/_components/update-settings-form/index.tsx
deleted file mode 100644
index 31ba61ca7..000000000
--- a/core/app/[locale]/(default)/(auth)/account/[tab]/_components/update-settings-form/index.tsx
+++ /dev/null
@@ -1,223 +0,0 @@
-'use client';
-
-import { useTranslations } from 'next-intl';
-import { ChangeEvent, useRef, useState } from 'react';
-import { useFormStatus } from 'react-dom';
-import ReCaptcha from 'react-google-recaptcha';
-
-import { Link } from '~/components/link';
-import { Button } from '~/components/ui/button';
-import { Field, Form, FormSubmit } from '~/components/ui/form';
-import { Message } from '~/components/ui/message';
-
-import { getCustomerSettingsQuery } from '../../page-data';
-
-import { updateCustomer } from './_actions/update-customer';
-import { Text } from './fields/text';
-
-type CustomerInfo = NonNullable<
-  Awaited<ReturnType<typeof getCustomerSettingsQuery>>
->['customerInfo'];
-type CustomerFields = NonNullable<
-  Awaited<ReturnType<typeof getCustomerSettingsQuery>>
->['customerFields'];
-type AddressFields = NonNullable<
-  Awaited<ReturnType<typeof getCustomerSettingsQuery>>
->['addressFields'];
-
-interface FormProps {
-  addressFields: AddressFields;
-  customerInfo: CustomerInfo;
-  customerFields: CustomerFields;
-  reCaptchaSettings?: {
-    isEnabledOnStorefront: boolean;
-    siteKey: string;
-  };
-}
-
-interface FormStatus {
-  status: 'success' | 'error';
-  message: string;
-}
-
-interface SumbitMessages {
-  messages: {
-    submit: string;
-    submitting: string;
-  };
-}
-
-export enum FieldNameToFieldId {
-  email = 1,
-  firstName = 4,
-  lastName,
-  company,
-  phone,
-}
-
-type FieldUnionType = keyof typeof FieldNameToFieldId;
-
-const isExistedField = (name: unknown): name is FieldUnionType => {
-  if (typeof name === 'string' && name in FieldNameToFieldId) {
-    return true;
-  }
-
-  return false;
-};
-
-const SubmitButton = ({ messages }: SumbitMessages) => {
-  const { pending } = useFormStatus();
-
-  return (
-    <Button
-      className="relative items-center px-8 py-2 md:w-fit"
-      loading={pending}
-      loadingText={messages.submitting}
-      variant="primary"
-    >
-      {messages.submit}
-    </Button>
-  );
-};
-
-export const UpdateSettingsForm = ({
-  addressFields,
-  customerFields,
-  customerInfo,
-  reCaptchaSettings,
-}: FormProps) => {
-  const form = useRef<HTMLFormElement>(null);
-  const [formStatus, setFormStatus] = useState<FormStatus | null>(null);
-
-  const [textInputValid, setTextInputValid] = useState<Record<string, boolean>>({});
-
-  const reCaptchaRef = useRef<ReCaptcha>(null);
-  const [reCaptchaToken, setReCaptchaToken] = useState('');
-  const [isReCaptchaValid, setReCaptchaValid] = useState(true);
-
-  const t = useTranslations('Account.Settings');
-
-  const handleTextInputValidation = (e: ChangeEvent<HTMLInputElement>) => {
-    const fieldId = Number(e.target.id.split('-')[1]);
-
-    const validityState = e.target.validity;
-    const validationStatus = validityState.valueMissing || validityState.typeMismatch;
-
-    setTextInputValid({ ...textInputValid, [fieldId]: !validationStatus });
-  };
-
-  const onReCaptchaChange = (token: string | null) => {
-    if (!token) {
-      setReCaptchaValid(false);
-
-      return;
-    }
-
-    setReCaptchaToken(token);
-    setReCaptchaValid(true);
-  };
-
-  const onSubmit = async (formData: FormData) => {
-    if (reCaptchaSettings?.isEnabledOnStorefront && !reCaptchaToken) {
-      setReCaptchaValid(false);
-
-      return;
-    }
-
-    setReCaptchaValid(true);
-
-    const submit = await updateCustomer({ formData, reCaptchaToken });
-
-    if (submit.status === 'success') {
-      setFormStatus({
-        status: 'success',
-        message: t('successMessage', {
-          firstName: submit.data?.firstName,
-          lastName: submit.data?.lastName,
-        }),
-      });
-    }
-
-    if (submit.status === 'error') {
-      setFormStatus({ status: 'error', message: submit.error ?? '' });
-    }
-  };
-
-  return (
-    <>
-      {formStatus && (
-        <Message className="mx-auto" variant={formStatus.status}>
-          <p>{formStatus.message}</p>
-        </Message>
-      )}
-      <Form action={onSubmit} ref={form}>
-        <div className="mb-10 mt-8 grid grid-cols-1 gap-y-6 text-base lg:grid-cols-2 lg:gap-x-6 lg:gap-y-2">
-          {addressFields.map((field) => {
-            const fieldName = FieldNameToFieldId[field.entityId] ?? '';
-
-            if (!isExistedField(fieldName)) {
-              return null;
-            }
-
-            return (
-              <Text
-                defaultValue={customerInfo[fieldName]}
-                entityId={field.entityId}
-                isRequired={field.isRequired}
-                isValid={textInputValid[field.entityId]}
-                key={field.entityId}
-                label={field.label}
-                onChange={handleTextInputValidation}
-              />
-            );
-          })}
-          <div className="lg:col-span-2">
-            <Text
-              defaultValue={customerInfo.email}
-              entityId={FieldNameToFieldId.email}
-              isRequired
-              isValid={textInputValid.email}
-              label={
-                customerFields.find((field) => field.entityId === FieldNameToFieldId.email)
-                  ?.label ?? ''
-              }
-              onChange={handleTextInputValidation}
-              type="email"
-            />
-          </div>
-          {reCaptchaSettings?.isEnabledOnStorefront && (
-            <Field className="relative col-span-full max-w-full space-y-2 pb-7" name="ReCAPTCHA">
-              <ReCaptcha
-                onChange={onReCaptchaChange}
-                ref={reCaptchaRef}
-                sitekey={reCaptchaSettings.siteKey}
-              />
-              {!isReCaptchaValid && (
-                <span className="absolute inset-x-0 bottom-0 inline-flex w-full text-xs font-normal text-error">
-                  {t('recaptchaText')}
-                </span>
-              )}
-            </Field>
-          )}
-          <div className="mt-8 flex flex-col items-center md:flex-row md:flex-wrap md:justify-start lg:col-span-2">
-            <FormSubmit asChild>
-              <SubmitButton messages={{ submit: t('submit'), submitting: t('submitting') }} />
-            </FormSubmit>
-            <Button asChild className="mt-2 md:ms-4 md:mt-0 md:w-fit" variant="secondary">
-              <Link href="/account">{t('cancel')}</Link>
-            </Button>
-            <Link
-              className="mt-2 w-fit font-semibold text-primary hover:text-secondary md:ms-auto md:mt-0"
-              href={{
-                pathname: '/account/settings',
-                query: { action: 'change_password' },
-              }}
-            >
-              {t('changePassword')}
-            </Link>
-          </div>
-        </div>
-      </Form>
-    </>
-  );
-};
diff --git a/core/app/[locale]/(default)/(auth)/account/[tab]/layout.tsx b/core/app/[locale]/(default)/(auth)/account/[tab]/layout.tsx
deleted file mode 100644
index 5abcde080..000000000
--- a/core/app/[locale]/(default)/(auth)/account/[tab]/layout.tsx
+++ /dev/null
@@ -1,68 +0,0 @@
-import { NextIntlClientProvider } from 'next-intl';
-import { getMessages, getTranslations, unstable_setRequestLocale } from 'next-intl/server';
-import { PropsWithChildren } from 'react';
-
-import { Link } from '~/components/link';
-import { LocaleType } from '~/i18n';
-import { cn } from '~/lib/utils';
-
-const tabList = [
-  'orders',
-  'messages',
-  'addresses',
-  'wishlists',
-  'recently-viewed',
-  'settings',
-] as const;
-
-export type TabType = (typeof tabList)[number];
-
-interface Props extends PropsWithChildren {
-  params: { locale: LocaleType; tab?: TabType };
-}
-
-export default async function AccountTabLayout({
-  children,
-  params: { locale, tab: activeTab },
-}: Props) {
-  unstable_setRequestLocale(locale);
-
-  const t = await getTranslations({ locale, namespace: 'Account.Home' });
-
-  const messages = await getMessages();
-
-  const tabsTitles = {
-    orders: t('orders'),
-    messages: t('messages'),
-    addresses: t('addresses'),
-    wishlists: t('wishlists'),
-    'recently-viewed': t('recentlyViewed'),
-    settings: t('settings'),
-  };
-
-  return (
-    <NextIntlClientProvider locale={locale} messages={{ Account: messages.Account ?? {} }}>
-        <h1 className="my-8 text-4xl font-black lg:my-8 lg:text-5xl">{t('heading')}</h1>
-        <nav aria-label={t('accountTabsLabel')}>
-          <ul className="mb-8 flex items-start overflow-x-auto">
-            {tabList.map((tab) => (
-              <li key={tab}>
-                <Link
-                  className={cn(
-                    'block whitespace-nowrap px-4 pb-2 font-semibold',
-                    activeTab === tab && 'border-b-4 border-primary text-primary',
-                  )}
-                  href={`/account/${tab}`}
-                  prefetch="viewport"
-                  prefetchKind="full"
-                >
-                  {tabsTitles[tab]}
-                </Link>
-              </li>
-            ))}
-          </ul>
-        </nav>
-        {children}
-    </NextIntlClientProvider>
-  );
-}
diff --git a/core/app/[locale]/(default)/(auth)/account/[tab]/page-data.ts b/core/app/[locale]/(default)/(auth)/account/[tab]/page-data.ts
deleted file mode 100644
index aa19539f5..000000000
--- a/core/app/[locale]/(default)/(auth)/account/[tab]/page-data.ts
+++ /dev/null
@@ -1,117 +0,0 @@
-import { cache } from 'react';
-
-import { getSessionCustomerId } from '~/auth';
-import { client } from '~/client';
-import { FORM_FIELDS_FRAGMENT } from '~/client/fragments/form-fields';
-import { graphql, VariablesOf } from '~/client/graphql';
-
-const CustomerSettingsQuery = graphql(
-  `
-    query CustomerSettingsQuery(
-      $customerFilters: FormFieldFiltersInput
-      $customerSortBy: FormFieldSortInput
-      $addressFilters: FormFieldFiltersInput
-      $addressSortBy: FormFieldSortInput
-    ) {
-      customer {
-        entityId
-        company
-        email
-        firstName
-        lastName
-        phone
-        formFields {
-          entityId
-          name
-          __typename
-          ... on CheckboxesFormFieldValue {
-            valueEntityIds
-            values
-          }
-          ... on DateFormFieldValue {
-            date {
-              utc
-            }
-          }
-          ... on MultipleChoiceFormFieldValue {
-            valueEntityId
-            value
-          }
-          ... on NumberFormFieldValue {
-            number
-          }
-          ... on PasswordFormFieldValue {
-            password
-          }
-          ... on TextFormFieldValue {
-            text
-          }
-        }
-      }
-      site {
-        settings {
-          formFields {
-            customer(filters: $customerFilters, sortBy: $customerSortBy) {
-              ...FormFields
-            }
-            shippingAddress(filters: $addressFilters, sortBy: $addressSortBy) {
-              ...FormFields
-            }
-          }
-          reCaptcha {
-            isEnabledOnStorefront
-            siteKey
-          }
-        }
-      }
-    }
-  `,
-  [FORM_FIELDS_FRAGMENT],
-);
-
-type Variables = VariablesOf<typeof CustomerSettingsQuery>;
-
-interface Props {
-  address?: {
-    filters?: Variables['addressFilters'];
-    sortBy?: Variables['addressSortBy'];
-  };
-
-  customer?: {
-    filters?: Variables['customerFilters'];
-    sortBy?: Variables['customerSortBy'];
-  };
-}
-
-export const getCustomerSettingsQuery = cache(async ({ address, customer }: Props = {}) => {
-  const customerId = await getSessionCustomerId();
-
-  const response = await client.fetch({
-    document: CustomerSettingsQuery,
-    variables: {
-      addressFilters: address?.filters,
-      addressSortBy: address?.sortBy,
-      customerFilters: customer?.filters,
-      customerSortBy: customer?.sortBy,
-    },
-    fetchOptions: { cache: 'no-store' },
-    customerId,
-  });
-
-  const addressFields = response.data.site.settings?.formFields.shippingAddress;
-  const customerFields = response.data.site.settings?.formFields.customer;
-  const customerInfo = response.data.customer;
-
-  const reCaptchaSettings = response.data.site.settings?.reCaptcha;
-
-  if (!addressFields || !customerFields || !customerInfo) {
-    return null;
-  }
-
-  return {
-    addressFields,
-    customerFields,
-    customerInfo,
-    reCaptchaSettings,
-  };
-});
diff --git a/core/app/[locale]/(default)/(auth)/account/[tab]/page.tsx b/core/app/[locale]/(default)/(auth)/account/[tab]/page.tsx
deleted file mode 100644
index 635f64e49..000000000
--- a/core/app/[locale]/(default)/(auth)/account/[tab]/page.tsx
+++ /dev/null
@@ -1,91 +0,0 @@
-import type { Metadata } from 'next';
-import { notFound } from 'next/navigation';
-import { getLocale, getTranslations } from 'next-intl/server';
-
-import { getCustomerAddresses } from '~/client/queries/get-customer-addresses';
-
-import { AddressesContent } from './_components/addresses-content';
-import { SettingsContent } from './_components/settings-content';
-import { TabHeading } from './_components/tab-heading';
-import { TabType } from './layout';
-import { getCustomerSettingsQuery } from './page-data';
-
-interface Props {
-  params: {
-    tab: TabType;
-  };
-  searchParams: {
-    [key: string]: string | string[] | undefined;
-    action?: 'add-new-address' | 'edit-address';
-    before?: string;
-    after?: string;
-  };
-}
-
-export async function generateMetadata({ params: { tab } }: Props): Promise<Metadata> {
-  const locale = await getLocale();
-  const t = await getTranslations({ locale, namespace: 'Account.Home' });
-  const title = t(tab === 'recently-viewed' ? 'recentlyViewed' : tab);
-
-  return {
-    title,
-  };
-}
-
-export default async function AccountTabPage({ params: { tab }, searchParams }: Props) {
-  switch (tab) {
-    case 'orders':
-      return <TabHeading heading={tab} />;
-
-    case 'messages':
-      return <TabHeading heading={tab} />;
-
-    case 'addresses': {
-      const { before, after, action } = searchParams;
-      const customerAddressesDetails = await getCustomerAddresses({
-        ...(after && { after }),
-        ...(before && { before }),
-        limit: action === 'edit-address' ? undefined : 2,
-      });
-
-      if (!customerAddressesDetails) {
-        notFound();
-      }
-
-      const { addresses, pageInfo, addressesCount } = customerAddressesDetails;
-
-      return (
-        <AddressesContent
-          activeAddressId={searchParams['address-id']?.toString()}
-          addresses={addresses}
-          addressesCount={addressesCount}
-          customerAction={action}
-          pageInfo={pageInfo}
-        />
-      );
-    }
-
-    case 'wishlists':
-      return <TabHeading heading={tab} />;
-
-    case 'recently-viewed':
-      return <TabHeading heading={tab} />;
-
-    case 'settings': {
-      const customerSettings = await getCustomerSettingsQuery({
-        address: { filters: { entityIds: [4, 5, 6, 7] } },
-      });
-
-      if (!customerSettings) {
-        notFound();
-      }
-
-      return <SettingsContent action={searchParams.action} customerSettings={customerSettings} />;
-    }
-
-    default:
-      return notFound();
-  }
-}
-
-export const runtime = 'edge';
diff --git a/core/app/[locale]/(default)/(auth)/account/page-data.ts b/core/app/[locale]/(default)/(auth)/account/page-data.ts
deleted file mode 100644
index 3f21fcbd4..000000000
--- a/core/app/[locale]/(default)/(auth)/account/page-data.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import { cache } from 'react';
-
-import { client } from '~/client';
-import { graphql } from '~/client/graphql';
-import { revalidate } from '~/client/revalidate-target';
-
-const storeNameQuery = graphql(`
-  query storeNameQuery {
-    site {
-      settings {
-        storeName
-      }
-    }
-  }
-`);
-
-export const getStoreName = cache(async () => {
-  const { data } = await client.fetch({
-    document: storeNameQuery,
-    fetchOptions: { next: { revalidate } },
-  });
-
-  return data.site.settings?.storeName;
-});
diff --git a/core/app/[locale]/(default)/(auth)/account/page.tsx b/core/app/[locale]/(default)/(auth)/account/page.tsx
deleted file mode 100644
index 14ae8cae7..000000000
--- a/core/app/[locale]/(default)/(auth)/account/page.tsx
+++ /dev/null
@@ -1,80 +0,0 @@
-import { BookUser, Eye, Gift, Mail, Package, Settings } from 'lucide-react';
-import { getTranslations } from 'next-intl/server';
-import { ReactNode } from 'react';
-
-import { Link } from '~/components/link';
-import { Message } from '~/components/ui/message';
-import { LocaleType } from '~/i18n';
-
-
-import { getStoreName } from './page-data';
-import { MessageWrapper } from './[tab]/_components/message-wrapper';
-
-interface AccountItem {
-  children: ReactNode;
-  description?: string;
-  href: string;
-  title: string;
-}
-
-const AccountItem = ({ children, title, description, href }: AccountItem) => {
-  return (
-    <Link
-      className="flex items-center border border-gray-200 p-6 focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-primary/20"
-      href={href}
-    >
-      {children}
-      <span>
-        <h3 className="text-xl font-bold lg:text-2xl">{title}</h3>
-        {description ? <p>{description}</p> : null}
-      </span>
-    </Link>
-  );
-};
-
-interface SearchParams {
-  register?: string;
-}
-
-interface Props {
-  params: {
-    locale: LocaleType;
-  };
-  searchParams?: SearchParams;
-}
-
-export default async function AccountPage({ params: { locale }, searchParams }: Props) {
-  const t = await getTranslations({ locale, namespace: 'Account.Home' });
-  const storeName = await getStoreName();
-
-  return (
-    <div className="mx-auto">
-      <h1 className="my-8 text-4xl font-black lg:my-8 lg:text-5xl">{t('heading')}</h1>      
-
-      <MessageWrapper message={t('successMessage', { storeName: storeName })} />
-
-      <div className="mb-14 grid gap-6 md:grid-cols-2 lg:grid-cols-3">
-        <AccountItem href="/account/orders" title={t('orders')}>
-          <Package className="me-8" size={48} strokeWidth={1.5} />
-        </AccountItem>
-        <AccountItem href="/account/messages" title={t('messages')}>
-          <Mail className="me-8" size={48} strokeWidth={1.5} />
-        </AccountItem>
-        <AccountItem href="/account/addresses" title={t('addresses')}>
-          <BookUser className="me-8" size={48} strokeWidth={1.5} />
-        </AccountItem>
-        <AccountItem href="/account/wishlists" title={t('wishlists')}>
-          <Gift className="me-8" size={48} strokeWidth={1.5} />
-        </AccountItem>
-        <AccountItem href="/account/recently-viewed" title={t('recentlyViewed')}>
-          <Eye className="me-8" size={48} strokeWidth={1.5} />
-        </AccountItem>
-        <AccountItem href="/account/settings" title={t('settings')}>
-          <Settings className="me-8" size={48} strokeWidth={1.5} />
-        </AccountItem>
-      </div>
-    </div>
-  );
-}
-
-export const runtime = 'edge';
diff --git a/core/app/[locale]/(default)/(auth)/login/layout.tsx b/core/app/[locale]/(default)/(auth)/login/layout.tsx
deleted file mode 100644
index 616aea1b0..000000000
--- a/core/app/[locale]/(default)/(auth)/login/layout.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import { PropsWithChildren } from 'react';
-
-export default function LoginLayout({ children }: PropsWithChildren) {
-  return children;
-}
diff --git a/core/app/[locale]/(default)/(auth)/login/register-customer/_components/register-customer-form/index.tsx b/core/app/[locale]/(default)/(auth)/login/register-customer/_components/register-customer-form/index.tsx
deleted file mode 100644
index bc312a8df..000000000
--- a/core/app/[locale]/(default)/(auth)/login/register-customer/_components/register-customer-form/index.tsx
+++ /dev/null
@@ -1,336 +0,0 @@
-'use client';
-
-import { useTranslations } from 'next-intl';
-import { ChangeEvent, useRef, useState } from 'react';
-import { useFormStatus } from 'react-dom';
-import ReCaptcha from 'react-google-recaptcha';
-
-import { getRegisterCustomerQuery } from '~/app/[locale]/(default)/(auth)/login/register-customer/page-data';
-import { Button } from '~/components/ui/button';
-import { Field, Form, FormSubmit } from '~/components/ui/form';
-import { Message } from '~/components/ui/message';
-
-import { login } from './_actions/login';
-import { registerCustomer } from './_actions/register-customer';
-import {
-  createFieldName,
-  CUSTOMER_FIELDS_TO_EXCLUDE,
-  FieldNameToFieldId,
-  FieldWrapper,
-  Password,
-  Picklist,
-  PicklistOrText,
-  Text,
-} from './fields';
-import { useAccountStatusContext } from '../../../../account-status-provider';
-
-interface FormStatus {
-  status: 'success' | 'error';
-  message: string;
-}
-
-export type CustomerFields = NonNullable<
-  Awaited<ReturnType<typeof getRegisterCustomerQuery>>
->['customerFields'];
-export type AddressFields = NonNullable<
-  Awaited<ReturnType<typeof getRegisterCustomerQuery>>
->['addressFields'];
-type Countries = NonNullable<Awaited<ReturnType<typeof getRegisterCustomerQuery>>>['countries'];
-type CountryCode = Countries[number]['code'];
-type CountryStates = Countries[number]['statesOrProvinces'];
-
-interface RegisterCustomerProps {
-  addressFields: AddressFields;
-  countries: Countries;
-  customerFields: CustomerFields;
-  defaultCountry: {
-    entityId: number;
-    code: CountryCode;
-    states: CountryStates;
-  };
-  reCaptchaSettings?: {
-    isEnabledOnStorefront: boolean;
-    siteKey: string;
-  };
-}
-
-interface SumbitMessages {
-  messages: {
-    submit: string;
-    submitting: string;
-  };
-}
-
-const SubmitButton = ({ messages }: SumbitMessages) => {
-  const { pending } = useFormStatus();
-
-  return (
-    <Button
-      className="relative mt-8 w-fit items-center px-8 py-2"
-      loading={pending}
-      loadingText={messages.submitting}
-      variant="primary"
-    >
-      {messages.submit}
-    </Button>
-  );
-};
-
-export const RegisterCustomerForm = ({
-  addressFields,
-  countries,
-  customerFields,
-  defaultCountry,
-  reCaptchaSettings,
-}: RegisterCustomerProps) => {
-  const form = useRef<HTMLFormElement>(null);
-  const [formStatus, setFormStatus] = useState<FormStatus | null>(null);
-
-  const [textInputValid, setTextInputValid] = useState<Record<string, boolean>>({});
-  const [passwordValid, setPassswordValid] = useState<Record<string, boolean>>({
-    [FieldNameToFieldId.password]: true,
-    [FieldNameToFieldId.confirmPassword]: true,
-  });
-
-  const [countryStates, setCountryStates] = useState(defaultCountry.states);
-
-  const reCaptchaRef = useRef<ReCaptcha>(null);
-  const [reCaptchaToken, setReCaptchaToken] = useState('');
-  const [isReCaptchaValid, setReCaptchaValid] = useState(true);
-
-  const { setAccountState } = useAccountStatusContext();
-
-  const t = useTranslations('Account.Register');
-
-  const handleTextInputValidation = (e: ChangeEvent<HTMLInputElement>) => {
-    const fieldId = Number(e.target.id.split('-')[1]);
-
-    const validityState = e.target.validity;
-    const validationStatus = validityState.valueMissing || validityState.typeMismatch;
-
-    setTextInputValid({ ...textInputValid, [fieldId]: !validationStatus });
-  };
-
-  const handlePasswordValidation = (e: ChangeEvent<HTMLInputElement>) => {
-    const fieldId = e.target.id.split('-')[1] ?? '';
-
-    switch (FieldNameToFieldId[Number(fieldId)]) {
-      case 'password': {
-        setPassswordValid((prevState) => ({
-          ...prevState,
-          [fieldId]: !e.target.validity.valueMissing,
-        }));
-
-        return;
-      }
-
-      case 'confirmPassword': {
-        const confirmPassword = e.target.value;
-
-        const passwordFieldName = createFieldName('customer', FieldNameToFieldId.password);
-        const password = new FormData(e.target.form ?? undefined).get(passwordFieldName);
-
-        setPassswordValid((prevState) => ({
-          ...prevState,
-          [fieldId]: password === confirmPassword && !e.target.validity.valueMissing,
-        }));
-
-        return;
-      }
-
-      default: {
-        setPassswordValid((prevState) => ({
-          ...prevState,
-          [fieldId]: !e.target.validity.valueMissing,
-        }));
-      }
-    }
-  };
-
-  const handleCountryChange = (value: string) => {
-    const states = countries.find(({ code }) => code === value)?.statesOrProvinces;
-
-    setCountryStates(states ?? []);
-  };
-
-  const onReCaptchaChange = (token: string | null) => {
-    if (!token) {
-      setReCaptchaValid(false);
-
-      return;
-    }
-
-    setReCaptchaToken(token);
-    setReCaptchaValid(true);
-  };
-
-  const onSubmit = async (formData: FormData) => {
-    if (formData.get('customer-password') !== formData.get('customer-confirmPassword')) {
-      setFormStatus({
-        status: 'error',
-        message: t('equalPasswordValidatoinMessage'),
-      });
-
-      window.scrollTo({
-        top: 0,
-        behavior: 'smooth',
-      });
-
-      return;
-    }
-
-    if (reCaptchaSettings?.isEnabledOnStorefront && !reCaptchaToken) {
-      setReCaptchaValid(false);
-
-      return;
-    }
-
-    setReCaptchaValid(true);
-
-    const submit = await registerCustomer({ formData, reCaptchaToken });
-
-    if (submit.status === 'success') {
-      form.current?.reset();    
-
-      setAccountState({ status: 'success' });
-
-      await login(formData);
-    }
-
-    if (submit.status === 'error') {
-      setFormStatus({ status: 'error', message: submit.error ?? '' });
-    }
-
-    window.scrollTo({
-      top: 0,
-      behavior: 'smooth',
-    });
-  };
-
-  return (
-    <>
-      {formStatus && (
-        <Message className="mb-8" variant={formStatus.status}>
-          <p>{formStatus.message}</p>
-        </Message>
-      )}
-      <Form action={onSubmit} ref={form}>
-        <div className="mb-6 grid grid-cols-1 gap-y-6 lg:grid-cols-2 lg:gap-x-6 lg:gap-y-2">
-          {customerFields
-            .filter((field) => !CUSTOMER_FIELDS_TO_EXCLUDE.includes(field.entityId))
-            .map((field) => {
-              switch (field.__typename) {
-                case 'TextFormField':
-                  return (
-                    <FieldWrapper fieldId={field.entityId} key={field.entityId}>
-                      <Text
-                        field={field}
-                        isValid={textInputValid[field.entityId]}
-                        name={createFieldName('customer', field.entityId)}
-                        onChange={handleTextInputValidation}
-                        type={FieldNameToFieldId[field.entityId]}
-                      />
-                    </FieldWrapper>
-                  );
-
-                case 'PasswordFormField': {
-                  return (
-                    <FieldWrapper fieldId={field.entityId} key={field.entityId}>
-                      <Password
-                        field={field}
-                        isValid={passwordValid[field.entityId]}
-                        name={createFieldName('customer', field.entityId)}
-                        onChange={handlePasswordValidation}
-                      />
-                    </FieldWrapper>
-                  );
-                }
-
-                default:
-                  return null;
-              }
-            })}
-        </div>
-        <div className="grid grid-cols-1 gap-y-6 lg:grid-cols-2 lg:gap-x-6 lg:gap-y-2">
-          {addressFields.map((field) => {
-            switch (field.__typename) {
-              case 'TextFormField':
-                return (
-                  <FieldWrapper fieldId={field.entityId} key={field.entityId}>
-                    <Text
-                      field={field}
-                      isValid={textInputValid[field.entityId]}
-                      name={createFieldName('address', field.entityId)}
-                      onChange={handleTextInputValidation}
-                    />
-                  </FieldWrapper>
-                );
-
-              case 'PicklistFormField':
-                return (
-                  <FieldWrapper fieldId={field.entityId} key={field.entityId}>
-                    <Picklist
-                      defaultValue={
-                        field.entityId === FieldNameToFieldId.countryCode
-                          ? defaultCountry.code
-                          : undefined
-                      }
-                      field={field}
-                      name={createFieldName('address', field.entityId)}
-                      onChange={
-                        field.entityId === FieldNameToFieldId.countryCode
-                          ? handleCountryChange
-                          : undefined
-                      }
-                      options={countries.map(({ code, name }) => {
-                        return { entityId: code, label: name };
-                      })}
-                    />
-                  </FieldWrapper>
-                );
-
-              case 'PicklistOrTextFormField':
-                return (
-                  <FieldWrapper fieldId={field.entityId} key={field.entityId}>
-                    <PicklistOrText
-                      defaultValue={
-                        field.entityId === FieldNameToFieldId.stateOrProvince
-                          ? countryStates[0]?.name
-                          : undefined
-                      }
-                      field={field}
-                      name={createFieldName('address', field.entityId)}
-                      options={countryStates.map(({ name }) => {
-                        return { entityId: name, label: name };
-                      })}
-                    />
-                  </FieldWrapper>
-                );
-
-              default:
-                return null;
-            }
-          })}
-          {reCaptchaSettings?.isEnabledOnStorefront && (
-            <Field className="relative col-span-full max-w-full space-y-2 pb-7" name="ReCAPTCHA">
-              <ReCaptcha
-                onChange={onReCaptchaChange}
-                ref={reCaptchaRef}
-                sitekey={reCaptchaSettings.siteKey}
-              />
-              {!isReCaptchaValid && (
-                <span className="absolute inset-x-0 bottom-0 inline-flex w-full text-xs font-normal text-error">
-                  {t('recaptchaText')}
-                </span>
-              )}
-            </Field>
-          )}
-        </div>
-
-        <FormSubmit asChild>
-          <SubmitButton messages={{ submit: t('submit'), submitting: t('submitting') }} />
-        </FormSubmit>
-      </Form>
-    </>
-  );
-};
diff --git a/core/app/[locale]/(default)/account/(tabs)/_components/account-status-provider.tsx b/core/app/[locale]/(default)/account/(tabs)/_components/account-status-provider.tsx
index b73426812..ab173dc1e 100644
--- a/core/app/[locale]/(default)/account/(tabs)/_components/account-status-provider.tsx
+++ b/core/app/[locale]/(default)/account/(tabs)/_components/account-status-provider.tsx
@@ -1,30 +1,27 @@
 'use client';
 
+import { usePathname } from 'next/navigation';
 import { createContext, ReactNode, useContext, useEffect, useState } from 'react';
 
 import { State as AccountState } from '../settings/_actions/submit-customer-change-password-form';
 
+const defaultState: AccountState = { status: 'idle', message: '' };
+
 export const AccountStatusContext = createContext<{
   accountState: AccountState;
   setAccountState: (state: AccountState | ((prevState: AccountState) => AccountState)) => void;
 } | null>(null);
 
-export const AccountStatusProvider = ({
-  children,
-  isPermanentBanner = false,
-}: {
-  children: ReactNode;
-  isPermanentBanner?: boolean;
-}) => {
-  const [accountState, setAccountState] = useState<AccountState>({ status: 'idle', message: '' });
+export const AccountStatusProvider = ({ children }: { children: ReactNode }) => {
+  const [accountState, setAccountState] = useState<AccountState>(defaultState);
+  const pathname = usePathname();
 
   useEffect(() => {
-    if (accountState.status !== 'idle' && !isPermanentBanner) {
-      setTimeout(() => {
-        setAccountState({ status: 'idle', message: '' });
-      }, 3000);
+    // Reset account state when changing the route except the Account Page
+    if (pathname !== '/account/') {
+      setAccountState(defaultState);
     }
-  }, [accountState, setAccountState, isPermanentBanner]);
+  }, [pathname]);
 
   return (
     <AccountStatusContext.Provider value={{ accountState, setAccountState }}>
diff --git a/core/app/[locale]/(default)/(auth)/account/[tab]/_components/message-wrapper.tsx b/core/app/[locale]/(default)/account/(tabs)/_components/message-wrapper.tsx
similarity index 85%
rename from core/app/[locale]/(default)/(auth)/account/[tab]/_components/message-wrapper.tsx
rename to core/app/[locale]/(default)/account/(tabs)/_components/message-wrapper.tsx
index 783b33c3f..a9b613bb9 100644
--- a/core/app/[locale]/(default)/(auth)/account/[tab]/_components/message-wrapper.tsx
+++ b/core/app/[locale]/(default)/account/(tabs)/_components/message-wrapper.tsx
@@ -1,7 +1,8 @@
 'use client';
 
 import { Message } from '~/components/ui/message';
-import { useAccountStatusContext } from '../../../account-status-provider';
+
+import { useAccountStatusContext } from './account-status-provider';
 
 interface Props {
   message?: string;
diff --git a/core/app/[locale]/(default)/(auth)/account/layout.tsx b/core/app/[locale]/(default)/account/layout.tsx
similarity index 100%
rename from core/app/[locale]/(default)/(auth)/account/layout.tsx
rename to core/app/[locale]/(default)/account/layout.tsx
diff --git a/core/app/[locale]/(default)/account/page-data.ts b/core/app/[locale]/(default)/account/page-data.ts
deleted file mode 100644
index 3f21fcbd4..000000000
--- a/core/app/[locale]/(default)/account/page-data.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import { cache } from 'react';
-
-import { client } from '~/client';
-import { graphql } from '~/client/graphql';
-import { revalidate } from '~/client/revalidate-target';
-
-const storeNameQuery = graphql(`
-  query storeNameQuery {
-    site {
-      settings {
-        storeName
-      }
-    }
-  }
-`);
-
-export const getStoreName = cache(async () => {
-  const { data } = await client.fetch({
-    document: storeNameQuery,
-    fetchOptions: { next: { revalidate } },
-  });
-
-  return data.site.settings?.storeName;
-});
diff --git a/core/app/[locale]/(default)/account/page.tsx b/core/app/[locale]/(default)/account/page.tsx
new file mode 100644
index 000000000..a296448be
--- /dev/null
+++ b/core/app/[locale]/(default)/account/page.tsx
@@ -0,0 +1,52 @@
+import { BookUser, Settings } from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import { ReactNode } from 'react';
+
+import { Link } from '~/components/link';
+
+import { MessageWrapper } from './(tabs)/_components/message-wrapper';
+
+interface AccountItem {
+  children: ReactNode;
+  description?: string;
+  href: string;
+  title: string;
+}
+
+const AccountItem = ({ children, title, description, href }: AccountItem) => {
+  return (
+    <Link
+      className="flex items-center border border-gray-200 p-6 focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-primary/20"
+      href={href}
+    >
+      {children}
+      <span>
+        <h3 className="text-xl font-bold lg:text-2xl">{title}</h3>
+        {description ? <p>{description}</p> : null}
+      </span>
+    </Link>
+  );
+};
+
+export default function Account() {
+  const t = useTranslations('Account.Home');
+
+  return (
+    <div className="mx-auto">
+      <h1 className="my-8 text-4xl font-black lg:my-8 lg:text-5xl">{t('heading')}</h1>
+
+      <MessageWrapper message={t('successMessage')} />
+
+      <div className="mb-14 grid gap-6 md:grid-cols-2 lg:grid-cols-3">
+        <AccountItem href="/account/addresses" title={t('addresses')}>
+          <BookUser className="me-8" size={48} strokeWidth={1.5} />
+        </AccountItem>
+        <AccountItem href="/account/settings" title={t('settings')}>
+          <Settings className="me-8" size={48} strokeWidth={1.5} />
+        </AccountItem>
+      </div>
+    </div>
+  );
+}
+
+export const runtime = 'edge';
diff --git a/core/app/[locale]/(default)/(auth)/login/_actions/submit-change-password-form.ts b/core/app/[locale]/(default)/login/_actions/submit-change-password-form.ts
similarity index 100%
rename from core/app/[locale]/(default)/(auth)/login/_actions/submit-change-password-form.ts
rename to core/app/[locale]/(default)/login/_actions/submit-change-password-form.ts
diff --git a/core/app/[locale]/(default)/(auth)/login/_actions/submit-login-form.ts b/core/app/[locale]/(default)/login/_actions/submit-login-form.ts
similarity index 100%
rename from core/app/[locale]/(default)/(auth)/login/_actions/submit-login-form.ts
rename to core/app/[locale]/(default)/login/_actions/submit-login-form.ts
diff --git a/core/app/[locale]/(default)/(auth)/login/_actions/submit-reset-password-form.ts b/core/app/[locale]/(default)/login/_actions/submit-reset-password-form.ts
similarity index 100%
rename from core/app/[locale]/(default)/(auth)/login/_actions/submit-reset-password-form.ts
rename to core/app/[locale]/(default)/login/_actions/submit-reset-password-form.ts
diff --git a/core/app/[locale]/(default)/(auth)/login/_components/change-password-form.tsx b/core/app/[locale]/(default)/login/_components/change-password-form.tsx
similarity index 92%
rename from core/app/[locale]/(default)/(auth)/login/_components/change-password-form.tsx
rename to core/app/[locale]/(default)/login/_components/change-password-form.tsx
index bc37b15e5..c4f6e7b75 100644
--- a/core/app/[locale]/(default)/(auth)/login/_components/change-password-form.tsx
+++ b/core/app/[locale]/(default)/login/_components/change-password-form.tsx
@@ -12,14 +12,13 @@ import {
   FieldMessage,
   Form,
   FormSubmit,
+  Input,
 } from '~/components/ui/form';
-
 import { Message } from '~/components/ui/message';
-import { useRouter } from '~/navigation';
+import { useRouter } from '~/routing';
 
-import { useAccountStatusContext } from '../../account-status-provider';
+import { useAccountStatusContext } from '../../account/(tabs)/_components/account-status-provider';
 import { submitChangePasswordForm } from '../_actions/submit-change-password-form';
-import { Input } from '~/components/ui/header/input';
 
 interface Props {
   customerId: string;
@@ -101,11 +100,11 @@ export const ChangePasswordForm = ({ customerId, customerToken }: Props) => {
           <FieldControl asChild>
             <Input
               autoComplete="none"
+              error={state.status === 'error'}
               id="new-password"
               onChange={handleNewPasswordChange}
               required
               type="password"
-              variant={state.status === 'error' ? 'error' : undefined}
             />
           </FieldControl>
         </Field>
@@ -117,12 +116,12 @@ export const ChangePasswordForm = ({ customerId, customerToken }: Props) => {
           <FieldControl asChild>
             <Input
               autoComplete="none"
+              error={!isConfirmPasswordValid || state.status === 'error'}
               id="confirm-password"
               onChange={handleConfirmPasswordValidation}
               onInvalid={handleConfirmPasswordValidation}
               required
               type="password"
-              variant={!isConfirmPasswordValid || state.status === 'error' ? 'error' : undefined}
             />
           </FieldControl>
           <FieldMessage
diff --git a/core/app/[locale]/(default)/(auth)/login/_components/login-form.tsx b/core/app/[locale]/(default)/login/_components/login-form.tsx
similarity index 83%
rename from core/app/[locale]/(default)/(auth)/login/_components/login-form.tsx
rename to core/app/[locale]/(default)/login/_components/login-form.tsx
index 643fdfa55..e36820b50 100644
--- a/core/app/[locale]/(default)/(auth)/login/_components/login-form.tsx
+++ b/core/app/[locale]/(default)/login/_components/login-form.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import { useTranslations } from 'next-intl';
-import { ChangeEvent, useEffect, useState } from 'react';
+import { ChangeEvent, useState } from 'react';
 import { useFormState, useFormStatus } from 'react-dom';
 
 import { Link } from '~/components/link';
@@ -13,16 +13,16 @@ import {
   FieldMessage,
   Form,
   FormSubmit,
+  Input,
 } from '~/components/ui/form';
-import { Input } from '~/components/ui/header/input';
 import { Message } from '~/components/ui/message';
 
-import { useAccountStatusContext } from '../../account-status-provider';
+import { useAccountStatusContext } from '../../account/(tabs)/_components/account-status-provider';
 import { submitLoginForm } from '../_actions/submit-login-form';
 
 const SubmitButton = () => {
   const { pending } = useFormStatus();
-  const t = useTranslations('Account.Login');
+  const t = useTranslations('Login');
 
   return (
     <Button
@@ -42,9 +42,9 @@ export const LoginForm = () => {
   const [state, formAction] = useFormState(submitLoginForm, { status: 'idle' });
   const { accountState } = useAccountStatusContext();
 
-  const t = useTranslations('Account.Login');
+  const t = useTranslations('Login');
 
-  const isFormInvalid = state?.status === 'error';
+  const isFormInvalid = state.status === 'error';
 
   const handleInputValidation = (e: ChangeEvent<HTMLInputElement>) => {
     const validationStatus = e.target.validity.valueMissing;
@@ -71,14 +71,8 @@ export const LoginForm = () => {
       )}
 
       {isFormInvalid && (
-        <Message
-          aria-labelledby="error-message"
-          aria-live="polite"
-          className="mb-8 lg:col-span-2"
-          role="region"
-          variant="error"
-        >
-          <p id="error-message">{t('Form.errorMessage')}</p>
+        <Message className="mb-8 lg:col-span-2" variant="error">
+          <p>{t('Form.errorMessage')}</p>
         </Message>
       )}
       <Form action={formAction} className="mb-14 flex flex-col gap-3 md:p-8 lg:p-0">
@@ -87,12 +81,12 @@ export const LoginForm = () => {
           <FieldControl asChild>
             <Input
               autoComplete="email"
+              error={!isEmailValid}
               id="email"
               onChange={handleInputValidation}
               onInvalid={handleInputValidation}
               required
               type="email"
-              variant={!isEmailValid ? 'error' : undefined}
             />
           </FieldControl>
           <FieldMessage
@@ -106,12 +100,12 @@ export const LoginForm = () => {
           <FieldLabel htmlFor="password">{t('Form.passwordLabel')}</FieldLabel>
           <FieldControl asChild>
             <Input
+              error={!isPasswordValid}
               id="password"
               onChange={handleInputValidation}
               onInvalid={handleInputValidation}
               required
               type="password"
-              variant={!isPasswordValid ? 'error' : undefined}
             />
           </FieldControl>
           <FieldMessage
diff --git a/core/app/[locale]/(default)/(auth)/login/_components/reset-password-form/fragment.ts b/core/app/[locale]/(default)/login/_components/reset-password-form/fragment.ts
similarity index 100%
rename from core/app/[locale]/(default)/(auth)/login/_components/reset-password-form/fragment.ts
rename to core/app/[locale]/(default)/login/_components/reset-password-form/fragment.ts
diff --git a/core/app/[locale]/(default)/(auth)/login/_components/reset-password-form/index.tsx b/core/app/[locale]/(default)/login/_components/reset-password-form/index.tsx
similarity index 95%
rename from core/app/[locale]/(default)/(auth)/login/_components/reset-password-form/index.tsx
rename to core/app/[locale]/(default)/login/_components/reset-password-form/index.tsx
index 75c0e140a..9c5f259e7 100644
--- a/core/app/[locale]/(default)/(auth)/login/_components/reset-password-form/index.tsx
+++ b/core/app/[locale]/(default)/login/_components/reset-password-form/index.tsx
@@ -15,11 +15,11 @@ import {
   FieldMessage,
   Form,
   FormSubmit,
+  Input,
 } from '~/components/ui/form';
-import { Input } from '~/components/ui/header/input';
 import { Message } from '~/components/ui/message';
 
-import { useAccountStatusContext } from '../../../account-status-provider';
+import { useAccountStatusContext } from '../../../account/(tabs)/_components/account-status-provider';
 import { submitResetPasswordForm } from '../../_actions/submit-reset-password-form';
 
 import { ResetPasswordFormFragment } from './fragment';
@@ -65,7 +65,7 @@ export const ResetPasswordForm = ({ reCaptchaSettings }: Props) => {
 
   useEffect(() => {
     setAccountState({ status: 'idle' });
-  }, [])
+  }, []);
 
   const onReCatpchaChange = (token: string | null) => {
     if (!token) {
@@ -134,12 +134,12 @@ export const ResetPasswordForm = ({ reCaptchaSettings }: Props) => {
           <FieldControl asChild>
             <Input
               autoComplete="email"
+              error={!isEmailValid}
               id="email"
               onChange={handleEmailValidation}
               onInvalid={handleEmailValidation}
               required
               type="email"
-              variant={!isEmailValid ? 'error' : undefined}
             />
           </FieldControl>
           <FieldMessage
diff --git a/core/app/[locale]/(default)/login/layout.tsx b/core/app/[locale]/(default)/login/layout.tsx
deleted file mode 100644
index 5f3e39d30..000000000
--- a/core/app/[locale]/(default)/login/layout.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-import { PropsWithChildren } from 'react';
-
-import { AccountStatusProvider } from '../account/(tabs)/_components/account-status-provider';
-
-export default function LoginLayout({ children }: PropsWithChildren) {
-  return <AccountStatusProvider isPermanentBanner={true}>{children}</AccountStatusProvider>;
-}
diff --git a/core/app/[locale]/(default)/(auth)/login/page.tsx b/core/app/[locale]/(default)/login/page.tsx
similarity index 100%
rename from core/app/[locale]/(default)/(auth)/login/page.tsx
rename to core/app/[locale]/(default)/login/page.tsx
diff --git a/core/app/[locale]/(default)/(auth)/login/register-customer/_components/register-customer-form/_actions/login.ts b/core/app/[locale]/(default)/login/register-customer/_components/register-customer-form/_actions/login.ts
similarity index 100%
rename from core/app/[locale]/(default)/(auth)/login/register-customer/_components/register-customer-form/_actions/login.ts
rename to core/app/[locale]/(default)/login/register-customer/_components/register-customer-form/_actions/login.ts
diff --git a/core/app/[locale]/(default)/(auth)/login/register-customer/_components/register-customer-form/_actions/register-customer.ts b/core/app/[locale]/(default)/login/register-customer/_components/register-customer-form/_actions/register-customer.ts
similarity index 100%
rename from core/app/[locale]/(default)/(auth)/login/register-customer/_components/register-customer-form/_actions/register-customer.ts
rename to core/app/[locale]/(default)/login/register-customer/_components/register-customer-form/_actions/register-customer.ts
diff --git a/core/app/[locale]/(default)/(auth)/login/register-customer/_components/register-customer-form/fields/checkboxes.tsx b/core/app/[locale]/(default)/login/register-customer/_components/register-customer-form/fields/checkboxes.tsx
similarity index 100%
rename from core/app/[locale]/(default)/(auth)/login/register-customer/_components/register-customer-form/fields/checkboxes.tsx
rename to core/app/[locale]/(default)/login/register-customer/_components/register-customer-form/fields/checkboxes.tsx
diff --git a/core/app/[locale]/(default)/(auth)/login/register-customer/_components/register-customer-form/fields/date.tsx b/core/app/[locale]/(default)/login/register-customer/_components/register-customer-form/fields/date.tsx
similarity index 100%
rename from core/app/[locale]/(default)/(auth)/login/register-customer/_components/register-customer-form/fields/date.tsx
rename to core/app/[locale]/(default)/login/register-customer/_components/register-customer-form/fields/date.tsx
diff --git a/core/app/[locale]/(default)/(auth)/login/register-customer/_components/register-customer-form/fields/index.ts b/core/app/[locale]/(default)/login/register-customer/_components/register-customer-form/fields/index.ts
similarity index 100%
rename from core/app/[locale]/(default)/(auth)/login/register-customer/_components/register-customer-form/fields/index.ts
rename to core/app/[locale]/(default)/login/register-customer/_components/register-customer-form/fields/index.ts
diff --git a/core/app/[locale]/(default)/(auth)/login/register-customer/_components/register-customer-form/fields/multiline-text.tsx b/core/app/[locale]/(default)/login/register-customer/_components/register-customer-form/fields/multiline-text.tsx
similarity index 100%
rename from core/app/[locale]/(default)/(auth)/login/register-customer/_components/register-customer-form/fields/multiline-text.tsx
rename to core/app/[locale]/(default)/login/register-customer/_components/register-customer-form/fields/multiline-text.tsx
diff --git a/core/app/[locale]/(default)/(auth)/login/register-customer/_components/register-customer-form/fields/numbers-only.tsx b/core/app/[locale]/(default)/login/register-customer/_components/register-customer-form/fields/numbers-only.tsx
similarity index 100%
rename from core/app/[locale]/(default)/(auth)/login/register-customer/_components/register-customer-form/fields/numbers-only.tsx
rename to core/app/[locale]/(default)/login/register-customer/_components/register-customer-form/fields/numbers-only.tsx
diff --git a/core/app/[locale]/(default)/(auth)/login/register-customer/_components/register-customer-form/fields/parse-fields.ts b/core/app/[locale]/(default)/login/register-customer/_components/register-customer-form/fields/parse-fields.ts
similarity index 100%
rename from core/app/[locale]/(default)/(auth)/login/register-customer/_components/register-customer-form/fields/parse-fields.ts
rename to core/app/[locale]/(default)/login/register-customer/_components/register-customer-form/fields/parse-fields.ts
diff --git a/core/app/[locale]/(default)/(auth)/login/register-customer/_components/register-customer-form/fields/password.tsx b/core/app/[locale]/(default)/login/register-customer/_components/register-customer-form/fields/password.tsx
similarity index 100%
rename from core/app/[locale]/(default)/(auth)/login/register-customer/_components/register-customer-form/fields/password.tsx
rename to core/app/[locale]/(default)/login/register-customer/_components/register-customer-form/fields/password.tsx
diff --git a/core/app/[locale]/(default)/(auth)/login/register-customer/_components/register-customer-form/fields/picklist-or-text.tsx b/core/app/[locale]/(default)/login/register-customer/_components/register-customer-form/fields/picklist-or-text.tsx
similarity index 100%
rename from core/app/[locale]/(default)/(auth)/login/register-customer/_components/register-customer-form/fields/picklist-or-text.tsx
rename to core/app/[locale]/(default)/login/register-customer/_components/register-customer-form/fields/picklist-or-text.tsx
diff --git a/core/app/[locale]/(default)/(auth)/login/register-customer/_components/register-customer-form/fields/picklist.tsx b/core/app/[locale]/(default)/login/register-customer/_components/register-customer-form/fields/picklist.tsx
similarity index 100%
rename from core/app/[locale]/(default)/(auth)/login/register-customer/_components/register-customer-form/fields/picklist.tsx
rename to core/app/[locale]/(default)/login/register-customer/_components/register-customer-form/fields/picklist.tsx
diff --git a/core/app/[locale]/(default)/(auth)/login/register-customer/_components/register-customer-form/fields/radio-buttons.tsx b/core/app/[locale]/(default)/login/register-customer/_components/register-customer-form/fields/radio-buttons.tsx
similarity index 100%
rename from core/app/[locale]/(default)/(auth)/login/register-customer/_components/register-customer-form/fields/radio-buttons.tsx
rename to core/app/[locale]/(default)/login/register-customer/_components/register-customer-form/fields/radio-buttons.tsx
diff --git a/core/app/[locale]/(default)/(auth)/login/register-customer/_components/register-customer-form/fields/shared/field-wrapper.tsx b/core/app/[locale]/(default)/login/register-customer/_components/register-customer-form/fields/shared/field-wrapper.tsx
similarity index 100%
rename from core/app/[locale]/(default)/(auth)/login/register-customer/_components/register-customer-form/fields/shared/field-wrapper.tsx
rename to core/app/[locale]/(default)/login/register-customer/_components/register-customer-form/fields/shared/field-wrapper.tsx
diff --git a/core/app/[locale]/(default)/(auth)/login/register-customer/_components/register-customer-form/fields/text.tsx b/core/app/[locale]/(default)/login/register-customer/_components/register-customer-form/fields/text.tsx
similarity index 100%
rename from core/app/[locale]/(default)/(auth)/login/register-customer/_components/register-customer-form/fields/text.tsx
rename to core/app/[locale]/(default)/login/register-customer/_components/register-customer-form/fields/text.tsx
diff --git a/core/app/[locale]/(default)/(auth)/login/register-customer/_components/register-customer-form/fields/utils.ts b/core/app/[locale]/(default)/login/register-customer/_components/register-customer-form/fields/utils.ts
similarity index 100%
rename from core/app/[locale]/(default)/(auth)/login/register-customer/_components/register-customer-form/fields/utils.ts
rename to core/app/[locale]/(default)/login/register-customer/_components/register-customer-form/fields/utils.ts
diff --git a/core/app/[locale]/(default)/login/register-customer/_components/register-customer-form/index.tsx b/core/app/[locale]/(default)/login/register-customer/_components/register-customer-form/index.tsx
new file mode 100644
index 000000000..5a661c504
--- /dev/null
+++ b/core/app/[locale]/(default)/login/register-customer/_components/register-customer-form/index.tsx
@@ -0,0 +1,553 @@
+'use client';
+
+import { useTranslations } from 'next-intl';
+import { ChangeEvent, MouseEvent, useRef, useState } from 'react';
+import { useFormStatus } from 'react-dom';
+import ReCaptcha from 'react-google-recaptcha';
+
+import { useAccountStatusContext } from '~/app/[locale]/(default)/account/(tabs)/_components/account-status-provider';
+import {
+  createDatesValidationHandler,
+  createMultilineTextValidationHandler,
+  createNumbersInputValidationHandler,
+  createPreSubmitCheckboxesValidationHandler,
+  createPreSubmitPicklistValidationHandler,
+  createRadioButtonsValidationHandler,
+  isAddressOrAccountFormField,
+} from '~/app/[locale]/(default)/account/(tabs)/addresses/_components/address-field-handlers';
+import { getRegisterCustomerQuery } from '~/app/[locale]/(default)/login/register-customer/page-data';
+import { ExistingResultType } from '~/client/util';
+import { Button } from '~/components/ui/button';
+import { Field, Form, FormSubmit } from '~/components/ui/form';
+import { Message } from '~/components/ui/message';
+
+import { login } from './_actions/login';
+import { registerCustomer } from './_actions/register-customer';
+import {
+  Checkboxes,
+  createFieldName,
+  CUSTOMER_FIELDS_TO_EXCLUDE,
+  DateField,
+  FieldNameToFieldId,
+  FieldWrapper,
+  MultilineText,
+  NumbersOnly,
+  Password,
+  Picklist,
+  PicklistOrText,
+  RadioButtons,
+  Text,
+} from './fields';
+
+interface FormStatus {
+  status: 'success' | 'error';
+  message: string;
+}
+
+export type CustomerFields = ExistingResultType<typeof getRegisterCustomerQuery>['customerFields'];
+export type AddressFields = ExistingResultType<typeof getRegisterCustomerQuery>['addressFields'];
+type Countries = ExistingResultType<typeof getRegisterCustomerQuery>['countries'];
+type CountryCode = Countries[number]['code'];
+type CountryStates = Countries[number]['statesOrProvinces'];
+export type AddressOrAccountFormField = AddressFields[number];
+
+interface RegisterCustomerProps {
+  addressFields: AddressFields;
+  countries: Countries;
+  customerFields: CustomerFields;
+  defaultCountry: {
+    entityId: number;
+    code: CountryCode;
+    states: CountryStates;
+  };
+  reCaptchaSettings?: {
+    isEnabledOnStorefront: boolean;
+    siteKey: string;
+  };
+}
+
+interface SumbitMessages {
+  messages: {
+    submit: string;
+    submitting: string;
+  };
+}
+
+const SubmitButton = ({ messages }: SumbitMessages) => {
+  const { pending } = useFormStatus();
+
+  return (
+    <Button
+      className="relative mt-8 w-fit items-center px-8 py-2"
+      loading={pending}
+      loadingText={messages.submitting}
+      variant="primary"
+    >
+      {messages.submit}
+    </Button>
+  );
+};
+
+export const RegisterCustomerForm = ({
+  addressFields,
+  countries,
+  customerFields,
+  defaultCountry,
+  reCaptchaSettings,
+}: RegisterCustomerProps) => {
+  const form = useRef<HTMLFormElement>(null);
+  const [formStatus, setFormStatus] = useState<FormStatus | null>(null);
+
+  const [textInputValid, setTextInputValid] = useState<Record<string, boolean>>({});
+  const [passwordValid, setPassswordValid] = useState<Record<string, boolean>>({
+    [FieldNameToFieldId.password]: true,
+    [FieldNameToFieldId.confirmPassword]: true,
+  });
+  const [numbersInputValid, setNumbersInputValid] = useState<Record<string, boolean>>({});
+  const [datesValid, setDatesValid] = useState<Record<string, boolean>>({});
+  const [countryStates, setCountryStates] = useState(defaultCountry.states);
+  const [radioButtonsValid, setRadioButtonsValid] = useState<Record<string, boolean>>({});
+  const [picklistValid, setPicklistValid] = useState<Record<string, boolean>>({});
+  const [checkboxesValid, setCheckboxesValid] = useState<Record<string, boolean>>({});
+  const [multiTextValid, setMultiTextValid] = useState<Record<string, boolean>>({});
+
+  const reCaptchaRef = useRef<ReCaptcha>(null);
+  const [reCaptchaToken, setReCaptchaToken] = useState('');
+  const [isReCaptchaValid, setReCaptchaValid] = useState(true);
+
+  const { setAccountState } = useAccountStatusContext();
+
+  const t = useTranslations('Login.Register');
+
+  const handleTextInputValidation = (e: ChangeEvent<HTMLInputElement>) => {
+    const fieldId = Number(e.target.id.split('-')[1]);
+
+    const validityState = e.target.validity;
+    const validationStatus = validityState.valueMissing || validityState.typeMismatch;
+
+    setTextInputValid({ ...textInputValid, [fieldId]: !validationStatus });
+  };
+  const handleNumbersInputValidation = createNumbersInputValidationHandler(
+    setNumbersInputValid,
+    numbersInputValid,
+  );
+  const handleMultiTextValidation = createMultilineTextValidationHandler(
+    setMultiTextValid,
+    multiTextValid,
+  );
+  const handleDatesValidation = createDatesValidationHandler(setDatesValid, datesValid);
+  const handlePasswordValidation = (e: ChangeEvent<HTMLInputElement>) => {
+    const fieldId = e.target.id.split('-')[1] ?? '';
+
+    switch (FieldNameToFieldId[Number(fieldId)]) {
+      case 'password': {
+        setPassswordValid((prevState) => ({
+          ...prevState,
+          [fieldId]: !e.target.validity.valueMissing,
+        }));
+
+        return;
+      }
+
+      case 'confirmPassword': {
+        const confirmPassword = e.target.value;
+        const field = customerFields.filter(
+          ({ entityId }) => entityId === Number(FieldNameToFieldId.password),
+        )[0];
+
+        if (!isAddressOrAccountFormField(field)) {
+          return;
+        }
+
+        const passwordFieldName = createFieldName(field, 'customer');
+        const password = new FormData(e.target.form ?? undefined).get(passwordFieldName);
+
+        setPassswordValid((prevState) => ({
+          ...prevState,
+          [fieldId]: password === confirmPassword && !e.target.validity.valueMissing,
+        }));
+
+        return;
+      }
+
+      default: {
+        setPassswordValid((prevState) => ({
+          ...prevState,
+          [fieldId]: !e.target.validity.valueMissing,
+        }));
+      }
+    }
+  };
+
+  const handleCountryChange = (value: string) => {
+    const states = countries.find(({ code }) => code === value)?.statesOrProvinces;
+
+    setCountryStates(states ?? []);
+  };
+  const handleRadioButtonsChange = createRadioButtonsValidationHandler(
+    setRadioButtonsValid,
+    radioButtonsValid,
+  );
+  const validatePicklistFields = createPreSubmitPicklistValidationHandler(
+    [...customerFields, ...addressFields],
+    setPicklistValid,
+  );
+  const validateCheckboxFields = createPreSubmitCheckboxesValidationHandler(
+    [...customerFields, ...addressFields],
+    setCheckboxesValid,
+  );
+  const preSubmitFieldsValidation = (
+    e: MouseEvent<HTMLFormElement> & { target: HTMLButtonElement },
+  ) => {
+    if (e.target.nodeName === 'BUTTON' && e.target.type === 'submit') {
+      validatePicklistFields(form.current);
+      validateCheckboxFields(form.current);
+    }
+  };
+
+  const onReCaptchaChange = (token: string | null) => {
+    if (!token) {
+      setReCaptchaValid(false);
+
+      return;
+    }
+
+    setReCaptchaToken(token);
+    setReCaptchaValid(true);
+  };
+
+  const onSubmit = async (formData: FormData) => {
+    if (formData.get('customer-password') !== formData.get('customer-confirmPassword')) {
+      setFormStatus({
+        status: 'error',
+        message: t('equalPasswordValidatoinMessage'),
+      });
+
+      window.scrollTo({
+        top: 0,
+        behavior: 'smooth',
+      });
+
+      return;
+    }
+
+    if (reCaptchaSettings?.isEnabledOnStorefront && !reCaptchaToken) {
+      setReCaptchaValid(false);
+
+      return;
+    }
+
+    setReCaptchaValid(true);
+
+    const submit = await registerCustomer({ formData, reCaptchaToken });
+
+    if (submit.status === 'success') {
+      setAccountState({ status: 'success' });
+
+      await login(formData);
+    }
+
+    if (submit.status === 'error') {
+      setFormStatus({ status: 'error', message: submit.error ?? '' });
+    }
+
+    window.scrollTo({
+      top: 0,
+      behavior: 'smooth',
+    });
+  };
+
+  return (
+    <>
+      {formStatus && (
+        <Message className="mb-8" variant={formStatus.status}>
+          <p>{formStatus.message}</p>
+        </Message>
+      )}
+      <Form action={onSubmit} onClick={preSubmitFieldsValidation} ref={form}>
+        <div className="mb-4 grid grid-cols-1 gap-y-3 lg:grid-cols-2 lg:gap-x-6">
+          {customerFields
+            .filter((field) => !CUSTOMER_FIELDS_TO_EXCLUDE.includes(field.entityId))
+            .map((field) => {
+              const fieldId = field.entityId;
+              const fieldName = createFieldName(field, 'customer');
+
+              switch (field.__typename) {
+                case 'TextFormField':
+                  return (
+                    <FieldWrapper fieldId={fieldId} key={fieldId}>
+                      <Text
+                        field={field}
+                        isValid={textInputValid[fieldId]}
+                        name={fieldName}
+                        onChange={handleTextInputValidation}
+                        type={FieldNameToFieldId[fieldId]}
+                      />
+                    </FieldWrapper>
+                  );
+
+                case 'MultilineTextFormField': {
+                  return (
+                    <FieldWrapper fieldId={fieldId} key={fieldId}>
+                      <MultilineText
+                        field={field}
+                        isValid={multiTextValid[fieldId]}
+                        name={fieldName}
+                        onChange={handleMultiTextValidation}
+                      />
+                    </FieldWrapper>
+                  );
+                }
+
+                case 'NumberFormField': {
+                  return (
+                    <FieldWrapper fieldId={fieldId} key={fieldId}>
+                      <NumbersOnly
+                        field={field}
+                        isValid={numbersInputValid[fieldId]}
+                        name={fieldName}
+                        onChange={handleNumbersInputValidation}
+                      />
+                    </FieldWrapper>
+                  );
+                }
+
+                case 'DateFormField': {
+                  return (
+                    <FieldWrapper fieldId={fieldId} key={fieldId}>
+                      <DateField
+                        field={field}
+                        isValid={datesValid[fieldId]}
+                        name={fieldName}
+                        onChange={handleDatesValidation}
+                        onValidate={setDatesValid}
+                      />
+                    </FieldWrapper>
+                  );
+                }
+
+                case 'RadioButtonsFormField': {
+                  return (
+                    <FieldWrapper fieldId={fieldId} key={fieldId}>
+                      <RadioButtons
+                        field={field}
+                        isValid={radioButtonsValid[fieldId]}
+                        name={fieldName}
+                        onChange={handleRadioButtonsChange}
+                      />
+                    </FieldWrapper>
+                  );
+                }
+
+                case 'PicklistFormField': {
+                  return (
+                    <FieldWrapper fieldId={fieldId} key={fieldId}>
+                      <Picklist
+                        field={field}
+                        isValid={picklistValid[fieldId]}
+                        name={fieldName}
+                        onValidate={setPicklistValid}
+                        options={field.options}
+                      />
+                    </FieldWrapper>
+                  );
+                }
+
+                case 'CheckboxesFormField': {
+                  return (
+                    <FieldWrapper fieldId={fieldId} key={fieldId}>
+                      <Checkboxes
+                        field={field}
+                        isValid={checkboxesValid[fieldId]}
+                        name={fieldName}
+                        onValidate={setCheckboxesValid}
+                        options={field.options}
+                      />
+                    </FieldWrapper>
+                  );
+                }
+
+                case 'PasswordFormField': {
+                  return (
+                    <FieldWrapper fieldId={fieldId} key={fieldId}>
+                      <Password
+                        field={field}
+                        isValid={passwordValid[fieldId]}
+                        name={fieldName}
+                        onChange={handlePasswordValidation}
+                      />
+                    </FieldWrapper>
+                  );
+                }
+
+                default:
+                  return null;
+              }
+            })}
+        </div>
+        <div className="grid grid-cols-1 gap-y-3 lg:grid-cols-2 lg:gap-x-6">
+          {addressFields.map((field) => {
+            const fieldId = field.entityId;
+            const fieldName = createFieldName(field, 'address');
+
+            switch (field.__typename) {
+              case 'TextFormField': {
+                return (
+                  <FieldWrapper fieldId={fieldId} key={fieldId}>
+                    <Text
+                      field={field}
+                      isValid={textInputValid[fieldId]}
+                      name={fieldName}
+                      onChange={handleTextInputValidation}
+                    />
+                  </FieldWrapper>
+                );
+              }
+
+              case 'MultilineTextFormField': {
+                return (
+                  <FieldWrapper fieldId={fieldId} key={fieldId}>
+                    <MultilineText
+                      field={field}
+                      isValid={multiTextValid[fieldId]}
+                      name={fieldName}
+                      onChange={handleMultiTextValidation}
+                    />
+                  </FieldWrapper>
+                );
+              }
+
+              case 'NumberFormField': {
+                return (
+                  <FieldWrapper fieldId={fieldId} key={fieldId}>
+                    <NumbersOnly
+                      field={field}
+                      isValid={numbersInputValid[fieldId]}
+                      name={fieldName}
+                      onChange={handleNumbersInputValidation}
+                    />
+                  </FieldWrapper>
+                );
+              }
+
+              case 'DateFormField': {
+                return (
+                  <FieldWrapper fieldId={fieldId} key={fieldId}>
+                    <DateField
+                      field={field}
+                      isValid={datesValid[fieldId]}
+                      name={fieldName}
+                      onChange={handleDatesValidation}
+                      onValidate={setDatesValid}
+                    />
+                  </FieldWrapper>
+                );
+              }
+
+              case 'RadioButtonsFormField': {
+                return (
+                  <FieldWrapper fieldId={fieldId} key={fieldId}>
+                    <RadioButtons
+                      field={field}
+                      isValid={radioButtonsValid[fieldId]}
+                      name={fieldName}
+                      onChange={handleRadioButtonsChange}
+                    />
+                  </FieldWrapper>
+                );
+              }
+
+              case 'PicklistFormField': {
+                const isCountrySelector = fieldId === FieldNameToFieldId.countryCode;
+                const picklistOptions = isCountrySelector
+                  ? countries.map(({ name, code }) => ({ label: name, entityId: code }))
+                  : field.options;
+
+                return (
+                  <FieldWrapper fieldId={fieldId} key={fieldId}>
+                    <Picklist
+                      defaultValue={isCountrySelector ? defaultCountry.code : undefined}
+                      field={field}
+                      isValid={picklistValid[fieldId]}
+                      name={fieldName}
+                      onChange={isCountrySelector ? handleCountryChange : undefined}
+                      onValidate={setPicklistValid}
+                      options={picklistOptions}
+                    />
+                  </FieldWrapper>
+                );
+              }
+
+              case 'CheckboxesFormField': {
+                return (
+                  <FieldWrapper fieldId={fieldId} key={fieldId}>
+                    <Checkboxes
+                      field={field}
+                      isValid={checkboxesValid[fieldId]}
+                      name={fieldName}
+                      onValidate={setCheckboxesValid}
+                      options={field.options}
+                    />
+                  </FieldWrapper>
+                );
+              }
+
+              case 'PicklistOrTextFormField': {
+                return (
+                  <FieldWrapper fieldId={fieldId} key={fieldId}>
+                    <PicklistOrText
+                      defaultValue={
+                        fieldId === FieldNameToFieldId.stateOrProvince
+                          ? countryStates[0]?.name
+                          : undefined
+                      }
+                      field={field}
+                      name={fieldName}
+                      options={countryStates.map(({ name }) => {
+                        return { entityId: name, label: name };
+                      })}
+                    />
+                  </FieldWrapper>
+                );
+              }
+
+              case 'PasswordFormField': {
+                return (
+                  <FieldWrapper fieldId={fieldId} key={fieldId}>
+                    <Password
+                      field={field}
+                      isValid={passwordValid[fieldId]}
+                      name={fieldName}
+                      onChange={handlePasswordValidation}
+                    />
+                  </FieldWrapper>
+                );
+              }
+
+              default:
+                return null;
+            }
+          })}
+          {reCaptchaSettings?.isEnabledOnStorefront && (
+            <Field className="relative col-span-full max-w-full space-y-2 pb-7" name="ReCAPTCHA">
+              <ReCaptcha
+                onChange={onReCaptchaChange}
+                ref={reCaptchaRef}
+                sitekey={reCaptchaSettings.siteKey}
+              />
+              {!isReCaptchaValid && (
+                <span className="absolute inset-x-0 bottom-0 inline-flex w-full text-xs font-normal text-error">
+                  {t('recaptchaText')}
+                </span>
+              )}
+            </Field>
+          )}
+        </div>
+
+        <FormSubmit asChild>
+          <SubmitButton messages={{ submit: t('submit'), submitting: t('submitting') }} />
+        </FormSubmit>
+      </Form>
+    </>
+  );
+};
diff --git a/core/app/[locale]/(default)/(auth)/login/register-customer/page-data.ts b/core/app/[locale]/(default)/login/register-customer/page-data.ts
similarity index 100%
rename from core/app/[locale]/(default)/(auth)/login/register-customer/page-data.ts
rename to core/app/[locale]/(default)/login/register-customer/page-data.ts
diff --git a/core/app/[locale]/(default)/(auth)/login/register-customer/page.tsx b/core/app/[locale]/(default)/login/register-customer/page.tsx
similarity index 100%
rename from core/app/[locale]/(default)/(auth)/login/register-customer/page.tsx
rename to core/app/[locale]/(default)/login/register-customer/page.tsx
diff --git a/core/app/[locale]/layout.tsx b/core/app/[locale]/layout.tsx
index 830e2b660..56afb5be8 100644
--- a/core/app/[locale]/layout.tsx
+++ b/core/app/[locale]/layout.tsx
@@ -14,7 +14,8 @@ import { revalidate } from '~/client/revalidate-target';
 
 import { Notifications } from '../notifications';
 import { Providers } from '../providers';
-import { AccountStatusProvider } from './(default)/(auth)/account-status-provider';
+
+import { AccountStatusProvider } from './(default)/account/(tabs)/_components/account-status-provider';
 
 const inter = Inter({
   subsets: ['latin'],
@@ -77,7 +78,9 @@ export default function RootLayout({ children, params: { locale } }: Props) {
       <body className="flex h-screen min-w-[375px] flex-col">
         <Notifications />
         <NextIntlClientProvider locale={locale} messages={messages}>
-          <Providers>{children}</Providers>
+          <AccountStatusProvider>
+            <Providers>{children}</Providers>
+          </AccountStatusProvider>
         </NextIntlClientProvider>
         <Analytics />
         <SpeedInsights />
diff --git a/core/messages/en.json b/core/messages/en.json
index 2b6c57b88..6d9adcb46 100644
--- a/core/messages/en.json
+++ b/core/messages/en.json
@@ -69,7 +69,8 @@
       "wishlists": "Wish lists",
       "recentlyViewed": "Recently viewed",
       "settings": "Account settings",
-      "changePassword": "Change password"
+      "changePassword": "Change password",
+      "successMessage": "Your account has been successfully created"
     },
     "Addresses": {
       "defaultAddress": "Default",