From 65ca387f60d0e9cbbdc7f0599e3c56ea0964c8be Mon Sep 17 00:00:00 2001
From: Kieran O'Neill <hello@kieranoneill.com>
Date: Tue, 27 Aug 2024 11:42:07 +0100
Subject: [PATCH] feat: pre release UI updates (#290)

* refactor: rename password lock to credential lock

* refactor: decrease size of network badges

* refactor: add border radius to network select container

* refactor: reposition account page header and fix broken scroll in tab containers

* feat: add tab bar control component and use in asset and activity tabs

* chore: squash

* refactor: replace edit name with edit account and a new edit account modal

* refactor: update select modal styles

* chore: squash

* refactor: remove pills from network select and use concise select

* chore: squash

* refactor: update inputs to have full border radius

* chore: squash

* refactor: use new password hook and update new password component to be more dumb

* refactor: add amount input and address input hooks and update send asset modal
---
 .../ARC0300AccountImportModalContent.tsx      |   4 +-
 .../ARC0300AssetAddModalContent.tsx           |   6 +-
 ...egistrationTransactionSendModalContent.tsx |   2 +
 .../components/AccountItem/AccountItem.tsx    |   1 +
 .../AccountSelect/AccountSelect.tsx           | 101 ++++--
 .../AccountSelect}/AccountSelectModal.tsx     |  32 +-
 .../components/AccountSelect/index.ts         |   2 +
 .../components/AccountSelect/types/IProps.ts  |   8 +-
 .../types/TAccountSelectModalProps.ts         |  21 ++
 .../components/AccountSelect/types/index.ts   |   1 +
 .../components/ActivityTab/ActivityTab.tsx    |  28 +-
 .../components/ActivityTab/types/IProps.ts    |   3 +-
 .../components/AddressInput/AddressInput.tsx  | 114 +++---
 .../components/AddressInput/types/IProps.ts   |  21 --
 .../components/AddressInput/types/TProps.ts   |  23 ++
 .../components/AddressInput/types/index.ts    |   2 +-
 .../components/AmountInput/AmountInput.tsx    | 141 +++-----
 .../AmountInput/types/IOnEventOptions.ts      |   9 +
 .../components/AmountInput/types/IProps.ts    |  12 +-
 .../components/AmountInput/types/index.ts     |   1 +
 .../components/AssetSelect/AssetSelect.tsx    | 100 +++--
 .../AssetSelect}/AssetSelectModal.tsx         |  26 +-
 .../components/AssetSelect/types/IProps.ts    |   3 +-
 .../types/TAssetSelectModalProps.ts}          |   9 +-
 .../components/AssetSelect/types/index.ts     |   1 +
 .../components/AssetsTab/AssetsTab.tsx        | 123 +++----
 .../components/AssetsTab/types/IProps.ts      |   4 +-
 .../components/CreatePasswordInput/index.ts   |   2 -
 .../CreatePasswordInput/utils/index.ts        |   1 -
 .../CreatePasswordInput/utils/validate.ts     |  33 --
 .../EditableAccountNameField.tsx              |   7 +-
 .../EnterMnemonicPhraseInput/index.ts         |   2 -
 .../components/GenericInput/GenericInput.tsx  |  73 +---
 .../components/GenericInput/types/IProps.ts   |   5 +-
 .../GenericTextarea/GenericTextarea.tsx       |  73 +---
 .../GenericTextarea/types/IProps.ts           |   5 +-
 .../components/IconButton/IconButton.tsx      |  31 +-
 .../components/IconButton/types/IProps.ts     |   8 +
 .../IconButton}/types/index.ts                |   0
 .../KeyRegistrationTransactionModalBody.tsx   |   2 +-
 src/extension/components/Label/Label.tsx      |  15 +-
 .../components/Label/types/IProps.ts          |   4 +-
 .../MoreInformationAccordion.tsx              |  11 +-
 src/extension/components/NFTsTab/NFTsTab.tsx  |   3 +-
 .../NativeBalance/NativeBalance.tsx           |  31 +-
 .../components/NetworkBadge/NetworkBadge.tsx  |   5 +-
 .../NetworkBadge/utils/parseFontSize/index.ts |   1 +
 .../utils/parseFontSize/parseFontSize.ts      |  16 +
 .../NetworkSelect/NetworkSelect.tsx           |  22 +-
 .../NetworkSelect/NetworkSelectModal.tsx      |  96 ++++-
 .../components/NetworkSelect/types/IProps.ts  |   6 +-
 .../NewPasswordInput.tsx}                     | 109 ++----
 .../components/NewPasswordInput/index.ts      |   2 +
 .../NewPasswordInput/types/IProps.ts          |  13 +
 .../NewPasswordInput}/types/index.ts          |   0
 .../PasswordInput/PasswordInput.tsx           |  77 ++--
 .../components/PasswordInput/hooks/index.ts   |   1 -
 .../PasswordInput/hooks/usePassword.ts        |  43 ---
 .../components/PasswordInput/index.ts         |   2 -
 .../components/PasswordInput/types/IProps.ts  |   5 +-
 .../PasswordInput/types/IUsePasswordState.ts  |  13 -
 .../components/PasswordInput/types/index.ts   |   1 -
 .../components/PasswordInput/utils/index.ts   |   1 -
 .../PasswordInput/utils/validate.ts           |  17 -
 .../ReKeyedAccountBadge.tsx                   |  12 +-
 .../SeedPhraseInput.tsx}                      |  90 ++---
 .../components/SeedPhraseInput/index.ts       |   3 +
 .../SeedPhraseInput/types/IProps.ts           |  11 +
 .../components/SeedPhraseInput/types/index.ts |   1 +
 .../utils/index.ts                            |   0
 .../utils/isPhrasesEmpty.ts                   |   0
 .../utils/validate.ts                         |   5 +-
 src/extension/components/Select/Select.tsx    |   8 +-
 .../components/Select/SelectModal.tsx         |  38 +-
 .../components/Select/SelectOption.tsx        |   2 +-
 src/extension/components/Select/index.ts      |   2 +
 .../SettingsLinkItem/SettingsLinkItem.tsx     |   7 +-
 .../SettingsSelectItem/SettingsSelectItem.tsx |   4 +-
 .../SettingsSessionItem.tsx                   |   6 +-
 src/extension/components/SideBar/SideBar.tsx  |   8 +-
 .../TabControlBar/TabControlBar.tsx           |  77 ++++
 .../components/TabControlBar/index.ts         |   2 +
 .../components/TabControlBar/types/IProps.ts  |  11 +
 .../types/ITabControlBarButtonProps.ts        |   8 +
 .../components/TabControlBar/types/index.ts   |   2 +
 .../WatchAccountBadge/WatchAccountBadge.tsx   |  12 +-
 src/extension/constants/Dimensions.ts         |   1 +
 src/extension/constants/Durations.ts          |  12 +-
 .../accounts/thunks/updateAccountsThunk.ts    |   1 -
 src/extension/features/registration/slice.ts  |  15 +-
 .../registration/types/ISetPasswordPayload.ts |   6 -
 .../features/registration/types/IState.ts     |   2 -
 .../features/registration/types/index.ts      |   1 -
 .../registration/utils/getInitialState.ts     |   1 -
 src/extension/features/send-assets/slice.ts   |  54 +--
 .../thunks/createUnsignedTransactionsThunk.ts |  86 ++---
 .../thunks/submitTransactionThunk.ts          |  34 +-
 .../ICreateUnsignedTransactionsPayload.ts     |   7 +
 .../send-assets/types/IInitializePayload.ts   |  13 +
 .../types/IInitializeSendAssetPayload.ts      |   8 -
 .../features/send-assets/types/IState.ts      |  20 +-
 .../features/send-assets/types/index.ts       |   3 +-
 .../send-assets/utils/getInitialState.ts      |   7 +-
 .../settings/utils/getInitialState.ts         |   4 +-
 src/extension/hooks/useAddressInput/index.ts  |   2 +
 .../hooks/useAddressInput/types/IOptions.ts   |   8 +
 .../hooks/useAddressInput/types/IState.ts     |  17 +
 .../hooks/useAddressInput/types/index.ts      |   2 +
 .../hooks/useAddressInput/useAddressInput.ts  |  63 ++++
 src/extension/hooks/useAmountInput/index.ts   |   2 +
 .../hooks/useAmountInput/types/IOptions.ts    |   6 +
 .../hooks/useAmountInput/types/IState.ts      |  20 +
 .../hooks/useAmountInput/types/index.ts       |   2 +
 .../hooks/useAmountInput/useAmountInput.ts    |  88 +++++
 .../hooks/useGenericInput/types/IOptions.ts   |   1 +
 .../hooks/useGenericInput/types/IState.ts     |   9 +-
 .../hooks/useGenericInput/useGenericInput.ts  |  48 ++-
 .../hooks/useNewPasswordInput/index.ts        |   2 +
 .../useNewPasswordInput/types/IOptions.ts     |   6 +
 .../hooks/useNewPasswordInput/types/IState.ts |  21 ++
 .../types/IValidateOptions.ts                 |   6 +
 .../hooks/useNewPasswordInput/types/index.ts  |   3 +
 .../useNewPasswordInput.ts                    |  79 ++++
 ...yRegistrationTransactionSendEventModal.tsx |   3 +
 .../modals/AccountSelectModal/index.ts        |   2 -
 .../modals/AccountSelectModal/types/IProps.ts |  12 -
 .../modals/AddAssetsModal/AddAssetsModal.tsx  |  16 +-
 .../AddCustomNodeModal/AddCustomNodeModal.tsx | 129 ++-----
 .../modals/AssetSelectModal/index.ts          |   2 -
 .../AuthenticationModal.tsx                   |  41 ++-
 .../modals/ConfirmModal/ConfirmModal.tsx      |  26 +-
 .../ConfirmPasswordModal.tsx                  |  41 ++-
 .../EditAccountModal/EditAccountModal.tsx     | 233 ++++++++++++
 .../modals/EditAccountModal/index.ts          |   2 +
 .../modals/EditAccountModal/types/IProps.ts   |   8 +
 .../modals/EditAccountModal/types/index.ts    |   1 +
 .../modals/EnableModal/EnableModal.tsx        |   2 +-
 .../ManageSessionModal/ManageSessionModal.tsx |   4 +-
 .../ReKeyAccountModal/ReKeyAccountModal.tsx   |  61 +++-
 ...egistrationImportAccountViaQRCodeModal.tsx |   3 +-
 .../RemoveAssetsModal/RemoveAssetsModal.tsx   |   3 +
 .../RemovePasskeyModal/RemovePasskeyModal.tsx |   2 +
 .../ScanQRCodeModal/ScanQRCodeModal.tsx       |   7 +-
 .../modals/SendAssetModal/SendAssetModal.tsx  | 341 ++++++++++--------
 .../ShareAddressModal/ShareAddressModal.tsx   |  22 +-
 .../SignMessageModal/SignMessageModal.tsx     |   7 +-
 .../ApplicationTransactionContent.tsx         |   2 +-
 .../AssetConfigTransactionContent.tsx         |   2 +-
 .../AssetCreateTransactionContent.tsx         |   2 +-
 .../AssetFreezeTransactionContent.tsx         |   2 +-
 .../AssetTransferTransactionContent.tsx       |   2 +-
 .../AtomicTransactionsContent.tsx             |   2 +-
 .../GroupOfTransactionsContent.tsx            |   2 +-
 .../PaymentTransactionContent.tsx             |   2 +-
 .../SignTransactionsModal.tsx                 |   3 +-
 .../pages/AccountPage/AccountPage.tsx         | 130 ++++---
 .../AddWatchAccountPage.tsx                   | 126 ++++---
 .../AdvancedSettingsPage.tsx                  |   9 +-
 src/extension/pages/AssetPage/AssetPage.tsx   |  18 +-
 .../ChangePasswordPage/ChangePasswordPage.tsx |  62 ++--
 .../CreateNewAccountPage.tsx                  |  55 ++-
 .../CreatePasswordPage/CreatePasswordPage.tsx |  82 +++--
 .../ExportAccountPage/ExportAcountPage.tsx    |   9 +-
 .../pages/GetStartedPage/GetStartedPage.tsx   |  10 +-
 .../ImportAccountViaSeedPhrasePage.tsx        |  59 ++-
 .../SecuritySettingsPage.tsx                  |  76 ++--
 .../ViewSeedPhrasePage/ViewSeedPhrasePage.tsx |   1 +
 src/extension/selectors/accounts/index.ts     |   1 +
 ...SelectActiveAccountTransactionsUpdating.ts |  25 ++
 src/extension/selectors/registration/index.ts |   1 -
 .../useSelectRegistrationScore.ts             |   9 -
 src/extension/selectors/send-assets/index.ts  |   7 +-
 ...useSelectSendAssetAmountInStandardUnits.ts |  10 -
 .../send-assets/useSelectSendAssetAsset.ts    |  17 +
 .../useSelectSendAssetFromAccount.ts          |  30 --
 .../send-assets/useSelectSendAssetNote.ts     |  10 -
 .../useSelectSendAssetSelectedAsset.ts        |  13 -
 .../send-assets/useSelectSendAssetSender.ts   |  23 ++
 .../useSelectSendAssetToAddress.ts            |  10 -
 .../SettingsService/SettingsService.ts        |   4 +-
 src/extension/translations/en.ts              |  49 +--
 .../types/components/IPropsWithContext.ts     |   5 +
 src/extension/types/components/index.ts       |   1 +
 .../types/modals/IARC0300ModalContentProps.ts |   6 +-
 .../validateAddressInput.ts                   |   4 +-
 .../utils/validateGenericInput/index.ts       |   2 +
 .../types/IOptions.ts                         |   2 +-
 .../types/index.ts                            |   0
 .../validateGenericInput.ts}                  |  12 +-
 src/extension/utils/validateInput/index.ts    |   2 -
 .../utils/validateNewPasswordInput/index.ts   |   2 +
 .../types/IOptions.ts                         |  11 +
 .../validateNewPasswordInput/types/index.ts   |   1 +
 .../validateNewPasswordInput.ts               |  34 ++
 194 files changed, 2595 insertions(+), 1823 deletions(-)
 rename src/extension/{modals/AccountSelectModal => components/AccountSelect}/AccountSelectModal.tsx (92%)
 create mode 100644 src/extension/components/AccountSelect/types/TAccountSelectModalProps.ts
 delete mode 100644 src/extension/components/AddressInput/types/IProps.ts
 create mode 100644 src/extension/components/AddressInput/types/TProps.ts
 create mode 100644 src/extension/components/AmountInput/types/IOnEventOptions.ts
 rename src/extension/{modals/AssetSelectModal => components/AssetSelect}/AssetSelectModal.tsx (92%)
 rename src/extension/{modals/AssetSelectModal/types/IProps.ts => components/AssetSelect/types/TAssetSelectModalProps.ts} (54%)
 delete mode 100644 src/extension/components/CreatePasswordInput/index.ts
 delete mode 100644 src/extension/components/CreatePasswordInput/utils/index.ts
 delete mode 100644 src/extension/components/CreatePasswordInput/utils/validate.ts
 delete mode 100644 src/extension/components/EnterMnemonicPhraseInput/index.ts
 create mode 100644 src/extension/components/IconButton/types/IProps.ts
 rename src/extension/{modals/AccountSelectModal => components/IconButton}/types/index.ts (100%)
 create mode 100644 src/extension/components/NetworkBadge/utils/parseFontSize/index.ts
 create mode 100644 src/extension/components/NetworkBadge/utils/parseFontSize/parseFontSize.ts
 rename src/extension/components/{CreatePasswordInput/CreatePasswordInput.tsx => NewPasswordInput/NewPasswordInput.tsx} (52%)
 create mode 100644 src/extension/components/NewPasswordInput/index.ts
 create mode 100644 src/extension/components/NewPasswordInput/types/IProps.ts
 rename src/extension/{modals/AssetSelectModal => components/NewPasswordInput}/types/index.ts (100%)
 delete mode 100644 src/extension/components/PasswordInput/hooks/index.ts
 delete mode 100644 src/extension/components/PasswordInput/hooks/usePassword.ts
 delete mode 100644 src/extension/components/PasswordInput/types/IUsePasswordState.ts
 delete mode 100644 src/extension/components/PasswordInput/utils/index.ts
 delete mode 100644 src/extension/components/PasswordInput/utils/validate.ts
 rename src/extension/components/{EnterMnemonicPhraseInput/EnterMnemonicPhraseInput.tsx => SeedPhraseInput/SeedPhraseInput.tsx} (69%)
 create mode 100644 src/extension/components/SeedPhraseInput/index.ts
 create mode 100644 src/extension/components/SeedPhraseInput/types/IProps.ts
 create mode 100644 src/extension/components/SeedPhraseInput/types/index.ts
 rename src/extension/components/{EnterMnemonicPhraseInput => SeedPhraseInput}/utils/index.ts (100%)
 rename src/extension/components/{EnterMnemonicPhraseInput => SeedPhraseInput}/utils/isPhrasesEmpty.ts (100%)
 rename src/extension/components/{EnterMnemonicPhraseInput => SeedPhraseInput}/utils/validate.ts (83%)
 create mode 100644 src/extension/components/TabControlBar/TabControlBar.tsx
 create mode 100644 src/extension/components/TabControlBar/index.ts
 create mode 100644 src/extension/components/TabControlBar/types/IProps.ts
 create mode 100644 src/extension/components/TabControlBar/types/ITabControlBarButtonProps.ts
 create mode 100644 src/extension/components/TabControlBar/types/index.ts
 delete mode 100644 src/extension/features/registration/types/ISetPasswordPayload.ts
 create mode 100644 src/extension/features/send-assets/types/ICreateUnsignedTransactionsPayload.ts
 create mode 100644 src/extension/features/send-assets/types/IInitializePayload.ts
 delete mode 100644 src/extension/features/send-assets/types/IInitializeSendAssetPayload.ts
 create mode 100644 src/extension/hooks/useAddressInput/index.ts
 create mode 100644 src/extension/hooks/useAddressInput/types/IOptions.ts
 create mode 100644 src/extension/hooks/useAddressInput/types/IState.ts
 create mode 100644 src/extension/hooks/useAddressInput/types/index.ts
 create mode 100644 src/extension/hooks/useAddressInput/useAddressInput.ts
 create mode 100644 src/extension/hooks/useAmountInput/index.ts
 create mode 100644 src/extension/hooks/useAmountInput/types/IOptions.ts
 create mode 100644 src/extension/hooks/useAmountInput/types/IState.ts
 create mode 100644 src/extension/hooks/useAmountInput/types/index.ts
 create mode 100644 src/extension/hooks/useAmountInput/useAmountInput.ts
 create mode 100644 src/extension/hooks/useNewPasswordInput/index.ts
 create mode 100644 src/extension/hooks/useNewPasswordInput/types/IOptions.ts
 create mode 100644 src/extension/hooks/useNewPasswordInput/types/IState.ts
 create mode 100644 src/extension/hooks/useNewPasswordInput/types/IValidateOptions.ts
 create mode 100644 src/extension/hooks/useNewPasswordInput/types/index.ts
 create mode 100644 src/extension/hooks/useNewPasswordInput/useNewPasswordInput.ts
 delete mode 100644 src/extension/modals/AccountSelectModal/index.ts
 delete mode 100644 src/extension/modals/AccountSelectModal/types/IProps.ts
 delete mode 100644 src/extension/modals/AssetSelectModal/index.ts
 create mode 100644 src/extension/modals/EditAccountModal/EditAccountModal.tsx
 create mode 100644 src/extension/modals/EditAccountModal/index.ts
 create mode 100644 src/extension/modals/EditAccountModal/types/IProps.ts
 create mode 100644 src/extension/modals/EditAccountModal/types/index.ts
 create mode 100644 src/extension/selectors/accounts/useSelectActiveAccountTransactionsUpdating.ts
 delete mode 100644 src/extension/selectors/registration/useSelectRegistrationScore.ts
 delete mode 100644 src/extension/selectors/send-assets/useSelectSendAssetAmountInStandardUnits.ts
 create mode 100644 src/extension/selectors/send-assets/useSelectSendAssetAsset.ts
 delete mode 100644 src/extension/selectors/send-assets/useSelectSendAssetFromAccount.ts
 delete mode 100644 src/extension/selectors/send-assets/useSelectSendAssetNote.ts
 delete mode 100644 src/extension/selectors/send-assets/useSelectSendAssetSelectedAsset.ts
 create mode 100644 src/extension/selectors/send-assets/useSelectSendAssetSender.ts
 delete mode 100644 src/extension/selectors/send-assets/useSelectSendAssetToAddress.ts
 create mode 100644 src/extension/types/components/IPropsWithContext.ts
 create mode 100644 src/extension/utils/validateGenericInput/index.ts
 rename src/extension/utils/{validateInput => validateGenericInput}/types/IOptions.ts (82%)
 rename src/extension/utils/{validateInput => validateGenericInput}/types/index.ts (100%)
 rename src/extension/utils/{validateInput/validateInput.ts => validateGenericInput/validateGenericInput.ts} (92%)
 delete mode 100644 src/extension/utils/validateInput/index.ts
 create mode 100644 src/extension/utils/validateNewPasswordInput/index.ts
 create mode 100644 src/extension/utils/validateNewPasswordInput/types/IOptions.ts
 create mode 100644 src/extension/utils/validateNewPasswordInput/types/index.ts
 create mode 100644 src/extension/utils/validateNewPasswordInput/validateNewPasswordInput.ts

diff --git a/src/extension/components/ARC0300AccountImportModalContent/ARC0300AccountImportModalContent.tsx b/src/extension/components/ARC0300AccountImportModalContent/ARC0300AccountImportModalContent.tsx
index df672bbc..3e46c78e 100644
--- a/src/extension/components/ARC0300AccountImportModalContent/ARC0300AccountImportModalContent.tsx
+++ b/src/extension/components/ARC0300AccountImportModalContent/ARC0300AccountImportModalContent.tsx
@@ -12,12 +12,14 @@ import {
 } from '@chakra-ui/react';
 import React, { FC, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
+import { IoDownloadOutline } from 'react-icons/io5';
 import { useDispatch } from 'react-redux';
 import { useNavigate } from 'react-router-dom';
 
 // components
 import AccountItem from '@extension/components/AccountItem';
 import Button from '@extension/components/Button';
+import EmptyState from '@extension/components/EmptyState';
 
 // constants
 import {
@@ -73,7 +75,6 @@ import type {
 import convertPublicKeyToAVMAddress from '@extension/utils/convertPublicKeyToAVMAddress';
 import ellipseAddress from '@extension/utils/ellipseAddress';
 import flattenAccountImportSchemaToNewAccounts from '@extension/utils/flattenAccountImportSchemaToNewAccounts';
-import EmptyState from '@extension/components/EmptyState';
 
 const ARC0300AccountImportModalContent: FC<
   IARC0300ModalContentProps<IARC0300AccountImportSchema[]>
@@ -310,6 +311,7 @@ const ARC0300AccountImportModalContent: FC<
             <Button
               isLoading={saving}
               onClick={handleImportClick}
+              rightIcon={<IoDownloadOutline />}
               size="lg"
               variant="solid"
               w="full"
diff --git a/src/extension/components/ARC0300AssetAddModalContent/ARC0300AssetAddModalContent.tsx b/src/extension/components/ARC0300AssetAddModalContent/ARC0300AssetAddModalContent.tsx
index 12853ffc..ec4258de 100644
--- a/src/extension/components/ARC0300AssetAddModalContent/ARC0300AssetAddModalContent.tsx
+++ b/src/extension/components/ARC0300AssetAddModalContent/ARC0300AssetAddModalContent.tsx
@@ -17,6 +17,7 @@ import {
 import BigNumber from 'bignumber.js';
 import React, { FC, useState } from 'react';
 import { useTranslation } from 'react-i18next';
+import { IoAddOutline } from 'react-icons/io5';
 import { useDispatch } from 'react-redux';
 import { useNavigate } from 'react-router-dom';
 
@@ -90,6 +91,7 @@ import isAssetInAccountHoldings from '@extension/utils/isAssetInAccountHoldings'
 const ARC0300AssetAddModalContent: FC<
   IARC0300ModalContentProps<IARC0300AssetAddSchema>
 > = ({
+  _context,
   cancelButtonIcon,
   cancelButtonLabel,
   onComplete,
@@ -261,6 +263,7 @@ const ARC0300AssetAddModalContent: FC<
                 <ModalSubHeading text={t<string>('headings.selectAccount')} />
 
                 <AccountSelect
+                  _context={_context}
                   accounts={accounts}
                   allowWatchAccounts={true}
                   disabled={loading || saving}
@@ -341,7 +344,7 @@ const ARC0300AssetAddModalContent: FC<
                 {/*type*/}
                 <ModalItem
                   label={`${t<string>('labels.chain')}:`}
-                  value={<NetworkBadge network={network} />}
+                  value={<NetworkBadge network={network} size="xs" />}
                 />
 
                 {/*type*/}
@@ -409,6 +412,7 @@ const ARC0300AssetAddModalContent: FC<
             <Button
               isLoading={loading || saving}
               onClick={handleAddClick}
+              rightIcon={<IoAddOutline />}
               size="lg"
               variant="solid"
               w="full"
diff --git a/src/extension/components/ARC0300KeyRegistrationTransactionSendModalContent/ARC0300KeyRegistrationTransactionSendModalContent.tsx b/src/extension/components/ARC0300KeyRegistrationTransactionSendModalContent/ARC0300KeyRegistrationTransactionSendModalContent.tsx
index 59bd24f2..75527373 100644
--- a/src/extension/components/ARC0300KeyRegistrationTransactionSendModalContent/ARC0300KeyRegistrationTransactionSendModalContent.tsx
+++ b/src/extension/components/ARC0300KeyRegistrationTransactionSendModalContent/ARC0300KeyRegistrationTransactionSendModalContent.tsx
@@ -15,6 +15,7 @@ import {
 } from '@stablelib/base64';
 import type { Transaction } from 'algosdk';
 import React, { type FC, useEffect, useState } from 'react';
+import { IoArrowUpOutline } from 'react-icons/io5';
 import { useTranslation } from 'react-i18next';
 import { useDispatch } from 'react-redux';
 
@@ -411,6 +412,7 @@ const ARC0300KeyRegistrationTransactionSendModalContent: FC<
             <Button
               isLoading={sending}
               onClick={handleSendClick}
+              rightIcon={<IoArrowUpOutline />}
               size="lg"
               variant="solid"
               w="full"
diff --git a/src/extension/components/AccountItem/AccountItem.tsx b/src/extension/components/AccountItem/AccountItem.tsx
index ff4bc7d3..388c8154 100644
--- a/src/extension/components/AccountItem/AccountItem.tsx
+++ b/src/extension/components/AccountItem/AccountItem.tsx
@@ -50,6 +50,7 @@ const AccountItem: FC<IProps> = ({
           >
             {name}
           </Text>
+
           <Text
             color={subTextColor || defaultSubTextColor}
             fontSize="xs"
diff --git a/src/extension/components/AccountSelect/AccountSelect.tsx b/src/extension/components/AccountSelect/AccountSelect.tsx
index 0ce3a6f2..cea08be0 100644
--- a/src/extension/components/AccountSelect/AccountSelect.tsx
+++ b/src/extension/components/AccountSelect/AccountSelect.tsx
@@ -1,97 +1,128 @@
 import {
-  HStack,
+  Button as ChakraButton,
+  Icon,
   Stack,
-  Tooltip,
   useDisclosure,
   VStack,
 } from '@chakra-ui/react';
-import React, { FC } from 'react';
+import React, { type FC } from 'react';
 import { useTranslation } from 'react-i18next';
-import { GoSingleSelect } from 'react-icons/go';
+import { IoChevronDownOutline } from 'react-icons/io5';
 
 // components
 import AccountItem from '@extension/components/AccountItem';
-import IconButton from '@extension/components/IconButton';
 import Label from '@extension/components/Label';
 
 // constants
 import { DEFAULT_GAP, INPUT_HEIGHT } from '@extension/constants';
 
+// hooks
+import useBorderColor from '@extension/hooks/useBorderColor';
+import useButtonHoverBackgroundColor from '@extension/hooks/useButtonHoverBackgroundColor';
+import useColorModeValue from '@extension/hooks/useColorModeValue';
+import usePrimaryColor from '@extension/hooks/usePrimaryColor';
+import useSubTextColor from '@extension/hooks/useSubTextColor';
+
 // modals
-import AccountSelectModal from '@extension/modals/AccountSelectModal';
+import AccountSelectModal from './AccountSelectModal';
+
+// theme
+import { theme } from '@extension/theme';
 
 // types
 import type { IAccountWithExtendedProps } from '@extension/types';
 import type { IProps } from './types';
 
 // utils
+import calculateIconSize from '@extension/utils/calculateIconSize';
 import convertPublicKeyToAVMAddress from '@extension/utils/convertPublicKeyToAVMAddress';
 
 const AccountSelect: FC<IProps> = ({
+  _context,
   accounts,
   allowWatchAccounts,
-  disabled = false,
   label,
   onSelect,
   required = false,
+  selectModalTitle,
   value,
 }) => {
   const { t } = useTranslation();
+  // hooks
+  const borderColor = useBorderColor();
+  const buttonHoverBackgroundColor = useButtonHoverBackgroundColor();
+  const primaryColorCode = useColorModeValue(
+    theme.colors.primaryLight['500'],
+    theme.colors.primaryDark['500']
+  );
+  const primaryColor = usePrimaryColor();
+  const subTextColor = useSubTextColor();
   const {
     isOpen: isAccountSelectModalOpen,
     onClose: onAccountSelectClose,
     onOpen: onAccountSelectModalOpen,
   } = useDisclosure();
   // handlers
-  const handleAccountClick = () => onAccountSelectModalOpen();
-  const handleOnAccountSelect = (_value: IAccountWithExtendedProps[]) =>
+  const handleOnClick = () => onAccountSelectModalOpen();
+  const handleOnSelect = (_value: IAccountWithExtendedProps[]) =>
     onSelect(_value[0]);
 
   return (
     <>
       {/*account select modal*/}
       <AccountSelectModal
+        _context={_context}
         accounts={accounts}
         allowWatchAccounts={allowWatchAccounts}
         isOpen={isAccountSelectModalOpen}
         multiple={false}
         onClose={onAccountSelectClose}
-        onSelect={handleOnAccountSelect}
+        onSelect={handleOnSelect}
+        title={selectModalTitle}
       />
 
       <VStack alignItems="flex-start" spacing={DEFAULT_GAP / 3} w="full">
         {/*label*/}
-        {label && <Label label={label} required={required} />}
+        {label && (
+          <Label label={label} px={DEFAULT_GAP - 2} required={required} />
+        )}
 
-        <HStack justifyContent="center" spacing={DEFAULT_GAP / 3} w="full">
-          {/*account view*/}
-          <Stack
-            borderRadius="md"
-            borderWidth={1}
-            flexGrow={1}
-            height={INPUT_HEIGHT}
-            justifyContent="center"
-            px={DEFAULT_GAP - 2}
-            w="full"
-          >
+        <ChakraButton
+          _focus={{
+            borderColor: primaryColor,
+            boxShadow: `0 0 0 1px ${primaryColorCode}`,
+          }}
+          _hover={{
+            bg: buttonHoverBackgroundColor,
+            borderColor: borderColor,
+          }}
+          aria-label={t<string>('labels.selectAccount')}
+          alignItems="center"
+          borderStyle="solid"
+          borderWidth="1px"
+          borderRadius="full"
+          h={INPUT_HEIGHT}
+          justifyContent="space-between"
+          onClick={handleOnClick}
+          px={DEFAULT_GAP - 2}
+          py={0}
+          rightIcon={
+            <Icon
+              as={IoChevronDownOutline}
+              boxSize={calculateIconSize()}
+              color={subTextColor}
+            />
+          }
+          variant="ghost"
+          w="full"
+        >
+          <Stack flexGrow={1} justifyContent="center" w="full">
             <AccountItem
               address={convertPublicKeyToAVMAddress(value.publicKey)}
               {...(value.name && { name: value.name })}
             />
           </Stack>
-
-          {/*open account select modal button*/}
-          <Tooltip label={t<string>('labels.selectAccount')}>
-            <IconButton
-              aria-label="Select an account from the list of available accounts"
-              disabled={disabled}
-              icon={GoSingleSelect}
-              onClick={handleAccountClick}
-              size="lg"
-              variant="ghost"
-            />
-          </Tooltip>
-        </HStack>
+        </ChakraButton>
       </VStack>
     </>
   );
diff --git a/src/extension/modals/AccountSelectModal/AccountSelectModal.tsx b/src/extension/components/AccountSelect/AccountSelectModal.tsx
similarity index 92%
rename from src/extension/modals/AccountSelectModal/AccountSelectModal.tsx
rename to src/extension/components/AccountSelect/AccountSelectModal.tsx
index 13a54e96..8c1b325a 100644
--- a/src/extension/modals/AccountSelectModal/AccountSelectModal.tsx
+++ b/src/extension/components/AccountSelect/AccountSelectModal.tsx
@@ -16,9 +16,9 @@ import {
   Tooltip,
   VStack,
 } from '@chakra-ui/react';
-import React, { FC, useState } from 'react';
+import React, { type FC, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { IoChevronForward } from 'react-icons/io5';
+import { IoCheckmarkOutline, IoChevronForward } from 'react-icons/io5';
 
 // components
 import AccountAvatarWithBadges from '@extension/components/AccountAvatarWithBadges';
@@ -49,7 +49,7 @@ import { theme } from '@extension/theme';
 
 // types
 import type { IAccountWithExtendedProps } from '@extension/types';
-import type { IProps } from './types';
+import type { TAccountSelectModalProps } from './types';
 
 // utils
 import calculateIconSize from '@extension/utils/calculateIconSize';
@@ -57,13 +57,15 @@ import convertPublicKeyToAVMAddress from '@extension/utils/convertPublicKeyToAVM
 import ellipseAddress from '@extension/utils/ellipseAddress';
 import upsertItemsById from '@extension/utils/upsertItemsById';
 
-const AccountSelectModal: FC<IProps> = ({
+const AccountSelectModal: FC<TAccountSelectModalProps> = ({
+  _context,
   accounts,
   allowWatchAccounts = true,
   isOpen,
   multiple,
   onClose,
   onSelect,
+  title,
 }) => {
   const { t } = useTranslation();
   // selectors
@@ -143,12 +145,12 @@ const AccountSelectModal: FC<IProps> = ({
           _hover={{
             bg: BODY_BACKGROUND_COLOR,
           }}
-          borderRadius={0}
+          borderRadius="full"
           cursor="not-allowed"
           fontSize="md"
           h={TAB_ITEM_HEIGHT}
           justifyContent="start"
-          key={`account-select-modal-item-${index}`}
+          key={`${_context}-account-select-modal-item-${index}`}
           px={DEFAULT_GAP / 2}
           py={0}
           sx={{
@@ -270,9 +272,12 @@ const AccountSelectModal: FC<IProps> = ({
               textAlign="center"
               w="full"
             >
-              {t<string>(
-                multiple ? 'headings.selectAccounts' : 'headings.selectAccount'
-              )}
+              {title ||
+                t<string>(
+                  multiple
+                    ? 'headings.selectAccounts'
+                    : 'headings.selectAccount'
+                )}
             </Heading>
 
             {/*select all accounts*/}
@@ -302,8 +307,12 @@ const AccountSelectModal: FC<IProps> = ({
           </VStack>
         </ModalHeader>
 
-        {/*content*/}
-        <ModalBody px={DEFAULT_GAP}>{renderContent()}</ModalBody>
+        {/*body*/}
+        <ModalBody px={DEFAULT_GAP}>
+          <VStack spacing={1} w="full">
+            {renderContent()}
+          </VStack>
+        </ModalBody>
 
         {/*footer*/}
         <ModalFooter p={DEFAULT_GAP}>
@@ -320,6 +329,7 @@ const AccountSelectModal: FC<IProps> = ({
             {multiple && (
               <Button
                 onClick={handleConfirmClick}
+                rightIcon={<IoCheckmarkOutline />}
                 size="lg"
                 variant="solid"
                 w="full"
diff --git a/src/extension/components/AccountSelect/index.ts b/src/extension/components/AccountSelect/index.ts
index 843dbe8c..1f46d142 100644
--- a/src/extension/components/AccountSelect/index.ts
+++ b/src/extension/components/AccountSelect/index.ts
@@ -1 +1,3 @@
 export { default } from './AccountSelect';
+export { default as AccountSelectModal } from './AccountSelectModal';
+export * from './types';
diff --git a/src/extension/components/AccountSelect/types/IProps.ts b/src/extension/components/AccountSelect/types/IProps.ts
index c8750ff3..f7b0acbf 100644
--- a/src/extension/components/AccountSelect/types/IProps.ts
+++ b/src/extension/components/AccountSelect/types/IProps.ts
@@ -1,13 +1,17 @@
 // types
-import type { IAccountWithExtendedProps } from '@extension/types';
+import type {
+  IAccountWithExtendedProps,
+  IPropsWithContext,
+} from '@extension/types';
 
-interface IProps {
+interface IProps extends IPropsWithContext {
   accounts: IAccountWithExtendedProps[];
   allowWatchAccounts?: boolean;
   disabled?: boolean;
   label?: string;
   onSelect: (account: IAccountWithExtendedProps) => void;
   required?: boolean;
+  selectModalTitle?: string;
   value: IAccountWithExtendedProps;
 }
 
diff --git a/src/extension/components/AccountSelect/types/TAccountSelectModalProps.ts b/src/extension/components/AccountSelect/types/TAccountSelectModalProps.ts
new file mode 100644
index 00000000..18fecbe3
--- /dev/null
+++ b/src/extension/components/AccountSelect/types/TAccountSelectModalProps.ts
@@ -0,0 +1,21 @@
+// types
+import type {
+  IAccountWithExtendedProps,
+  IModalProps,
+  IPropsWithContext,
+} from '@extension/types';
+
+interface IAccountSelectModalProps {
+  accounts: IAccountWithExtendedProps[];
+  allowWatchAccounts?: boolean;
+  isOpen: boolean;
+  multiple?: boolean;
+  onSelect: (accounts: IAccountWithExtendedProps[]) => void;
+  title?: string;
+}
+
+type TAccountSelectModalProps = IAccountSelectModalProps &
+  IModalProps &
+  IPropsWithContext;
+
+export default TAccountSelectModalProps;
diff --git a/src/extension/components/AccountSelect/types/index.ts b/src/extension/components/AccountSelect/types/index.ts
index f404deed..5b7160c6 100644
--- a/src/extension/components/AccountSelect/types/index.ts
+++ b/src/extension/components/AccountSelect/types/index.ts
@@ -1 +1,2 @@
+export type { default as TAccountSelectModalProps } from './TAccountSelectModalProps';
 export type { default as IProps } from './IProps';
diff --git a/src/extension/components/ActivityTab/ActivityTab.tsx b/src/extension/components/ActivityTab/ActivityTab.tsx
index 978653b7..ddd23006 100644
--- a/src/extension/components/ActivityTab/ActivityTab.tsx
+++ b/src/extension/components/ActivityTab/ActivityTab.tsx
@@ -5,18 +5,25 @@ import { useTranslation } from 'react-i18next';
 // components
 import EmptyState from '@extension/components/EmptyState';
 import ScrollableContainer from '@extension/components/ScrollableContainer';
+import TabControlBar from '@extension/components/TabControlBar';
 import TransactionItem, {
   TransactionItemSkeleton,
 } from '@extension/components/TransactionItem';
 
+// constants
+import { ACCOUNT_PAGE_TAB_CONTENT_HEIGHT } from '@extension/constants';
+
+// selectors
+import { useSelectActiveAccountTransactionsUpdating } from '@extension/selectors';
+
 // services
 import AccountService from '@extension/services/AccountService';
 
 // types
-import type { ITransactions } from '@extension/types';
 import type { IProps } from './types';
 
 const ActivityTab: FC<IProps> = ({
+  _context,
   account,
   accounts,
   fetching,
@@ -24,8 +31,11 @@ const ActivityTab: FC<IProps> = ({
   onScrollEnd,
 }) => {
   const { t } = useTranslation();
+  // selectors
+  const updatingActiveAccountTransactions =
+    useSelectActiveAccountTransactionsUpdating();
   // misc
-  const transactions: ITransactions[] | null =
+  const transactions =
     AccountService.extractAccountTransactionsForNetwork(account, network)
       ?.transactions || null;
   // handlers
@@ -39,7 +49,7 @@ const ActivityTab: FC<IProps> = ({
         <TransactionItem
           account={account}
           accounts={accounts}
-          key={`activity-tab-item-${index}`}
+          key={`${_context}-activity-tab-item-${index}`}
           network={network}
           transaction={value}
         />
@@ -51,7 +61,7 @@ const ActivityTab: FC<IProps> = ({
           ...nodes,
           ...Array.from({ length: 3 }, (_, index) => (
             <TransactionItemSkeleton
-              key={`activity-tab-fetching-item-${index}`}
+              key={`${_context}-activity-tab-fetching-item-${index}`}
             />
           )),
         ];
@@ -85,12 +95,20 @@ const ActivityTab: FC<IProps> = ({
 
   return (
     <TabPanel
-      height="70vh"
+      height={ACCOUNT_PAGE_TAB_CONTENT_HEIGHT}
       m={0}
       p={0}
       sx={{ display: 'flex', flexDirection: 'column' }}
       w="full"
     >
+      {/*controls*/}
+      <TabControlBar
+        _context={`${_context}-activity-tab`}
+        buttons={[]}
+        isLoading={updatingActiveAccountTransactions}
+        loadingTooltipLabel={t<string>('captions.updatingTransactions')}
+      />
+
       {renderContent()}
     </TabPanel>
   );
diff --git a/src/extension/components/ActivityTab/types/IProps.ts b/src/extension/components/ActivityTab/types/IProps.ts
index 27e229e9..ab525156 100644
--- a/src/extension/components/ActivityTab/types/IProps.ts
+++ b/src/extension/components/ActivityTab/types/IProps.ts
@@ -2,9 +2,10 @@
 import type {
   IAccountWithExtendedProps,
   INetworkWithTransactionParams,
+  IPropsWithContext,
 } from '@extension/types';
 
-interface IProps {
+interface IProps extends IPropsWithContext {
   account: IAccountWithExtendedProps;
   accounts: IAccountWithExtendedProps[];
   fetching: boolean;
diff --git a/src/extension/components/AddressInput/AddressInput.tsx b/src/extension/components/AddressInput/AddressInput.tsx
index 8f570ee7..d3fa9826 100644
--- a/src/extension/components/AddressInput/AddressInput.tsx
+++ b/src/extension/components/AddressInput/AddressInput.tsx
@@ -1,14 +1,15 @@
 import {
-  HStack,
   Input,
+  InputGroup,
+  InputRightElement,
   Tooltip,
   useDisclosure,
   VStack,
 } from '@chakra-ui/react';
 import { encodeURLSafe as encodeBase64URLSafe } from '@stablelib/base64';
-import React, { type ChangeEvent, type FocusEvent, type FC } from 'react';
+import React, { type FC } from 'react';
 import { useTranslation } from 'react-i18next';
-import { GoSingleSelect } from 'react-icons/go';
+import { IoChevronDownOutline } from 'react-icons/io5';
 import { randomBytes } from 'tweetnacl';
 
 // components
@@ -22,29 +23,29 @@ import { DEFAULT_GAP, INPUT_HEIGHT } from '@extension/constants';
 import usePrimaryColor from '@extension/hooks/usePrimaryColor';
 
 // modals
-import AccountSelectModal from '@extension/modals/AccountSelectModal';
+import { AccountSelectModal } from '@extension/components/AccountSelect';
 
 // types
 import type { IAccountWithExtendedProps } from '@extension/types';
-import type { IProps } from './types';
+import type { TProps } from './types';
 
 // utils
 import convertPublicKeyToAVMAddress from '@extension/utils/convertPublicKeyToAVMAddress';
-import validateAddressInput from '@extension/utils/validateAddressInput';
 
-const AddressInput: FC<IProps> = ({
+const AddressInput: FC<TProps> = ({
+  _context,
   accounts,
   allowWatchAccounts = true,
   error,
   id,
-  disabled,
+  isDisabled,
   label,
-  onBlur,
-  onChange,
-  onError,
+  onSelect,
   required = false,
+  selectButtonLabel,
+  selectModalTitle,
   validate,
-  value,
+  ...inputProps
 }) => {
   const { t } = useTranslation();
   const {
@@ -57,66 +58,27 @@ const AddressInput: FC<IProps> = ({
   // misc
   const _id = id || encodeBase64URLSafe(randomBytes(6));
   // handlers
-  const handleOnBlur = (event: FocusEvent<HTMLInputElement>) => {
-    onError &&
-      onError(
-        validateAddressInput({
-          field: label,
-          t,
-          required,
-          validate,
-          value: event.target.value,
-        })
-      );
-
-    return onBlur && onBlur(event);
-  };
-  const handleOnChange = (event: ChangeEvent<HTMLInputElement>) => {
-    const _value = event.target.value;
-
-    onError &&
-      onError(
-        validateAddressInput({
-          field: label,
-          t,
-          required,
-          validate,
-          value: _value,
-        })
-      );
-
-    return onChange(_value);
-  };
   const handleOnClick = () => onAccountSelectModalOpen();
   const handleOnSelect = (_accounts: IAccountWithExtendedProps[]) => {
     const _value = _accounts[0]
       ? convertPublicKeyToAVMAddress(_accounts[0].publicKey)
-      : '';
-
-    onError &&
-      onError(
-        validateAddressInput({
-          field: label,
-          t,
-          required,
-          validate,
-          value: _value,
-        })
-      );
+      : null;
 
-    return onChange(_value);
+    return _value && onSelect && onSelect(_value);
   };
 
   return (
     <>
       {/*account select modal*/}
       <AccountSelectModal
+        _context={_context}
         accounts={accounts}
         allowWatchAccounts={allowWatchAccounts}
         isOpen={isAccountSelectModalOpen}
         multiple={false}
         onClose={onAccountSelectClose}
         onSelect={handleOnSelect}
+        title={selectModalTitle}
       />
 
       <VStack alignItems="flex-start" spacing={DEFAULT_GAP / 3} w="full">
@@ -125,37 +87,45 @@ const AddressInput: FC<IProps> = ({
           error={error}
           inputID={_id}
           label={label || t<string>('labels.address')}
+          px={DEFAULT_GAP - 2}
           required={required}
         />
 
-        <HStack justifyContent="center" spacing={DEFAULT_GAP / 3} w="full">
+        {/*input*/}
+        <InputGroup size="md">
           {/*input*/}
           <Input
+            {...inputProps}
+            borderRadius="full"
             focusBorderColor={error ? 'red.300' : primaryColor}
             id={_id}
-            isDisabled={disabled}
+            isDisabled={isDisabled}
             isInvalid={!!error}
             h={INPUT_HEIGHT}
-            onBlur={handleOnBlur}
-            onChange={handleOnChange}
             placeholder={t<string>('placeholders.enterAddress')}
             type="text"
-            value={value}
             w="full"
           />
 
-          {/*open account select modal button*/}
-          <Tooltip label={t<string>('labels.selectAccount')}>
-            <IconButton
-              aria-label="Select an account from the list of available accounts"
-              disabled={disabled}
-              icon={GoSingleSelect}
-              onClick={handleOnClick}
-              size="lg"
-              variant="ghost"
-            />
-          </Tooltip>
-        </HStack>
+          <InputRightElement h={INPUT_HEIGHT}>
+            {/*open account select modal button*/}
+            <Tooltip
+              label={selectButtonLabel || t<string>('labels.selectAccount')}
+            >
+              <IconButton
+                aria-label={
+                  selectButtonLabel || t<string>('labels.selectAccount')
+                }
+                borderRadius="full"
+                isDisabled={isDisabled}
+                icon={IoChevronDownOutline}
+                onClick={handleOnClick}
+                size="sm"
+                variant="ghost"
+              />
+            </Tooltip>
+          </InputRightElement>
+        </InputGroup>
       </VStack>
     </>
   );
diff --git a/src/extension/components/AddressInput/types/IProps.ts b/src/extension/components/AddressInput/types/IProps.ts
deleted file mode 100644
index fcd4dd2f..00000000
--- a/src/extension/components/AddressInput/types/IProps.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import type { FocusEvent } from 'react';
-
-// types
-import type { IAccountWithExtendedProps } from '@extension/types';
-
-interface IProps {
-  accounts: IAccountWithExtendedProps[];
-  allowWatchAccounts?: boolean;
-  disabled?: boolean;
-  error?: string | null;
-  id?: string;
-  label?: string;
-  onBlur?: (event: FocusEvent<HTMLInputElement>) => void;
-  onChange: (value: string) => void;
-  onError?: (error: string | null) => void;
-  required?: boolean;
-  validate?: (value: string) => string | null;
-  value: string;
-}
-
-export default IProps;
diff --git a/src/extension/components/AddressInput/types/TProps.ts b/src/extension/components/AddressInput/types/TProps.ts
new file mode 100644
index 00000000..77673758
--- /dev/null
+++ b/src/extension/components/AddressInput/types/TProps.ts
@@ -0,0 +1,23 @@
+import type { InputProps } from '@chakra-ui/react';
+
+// types
+import type {
+  IAccountWithExtendedProps,
+  IPropsWithContext,
+} from '@extension/types';
+
+interface IProps {
+  accounts: IAccountWithExtendedProps[];
+  allowWatchAccounts?: boolean;
+  error?: string | null;
+  id?: string;
+  label?: string;
+  onSelect?: (value: string) => void;
+  required?: boolean;
+  selectButtonLabel?: string;
+  selectModalTitle?: string;
+  validate?: (value: string) => string | null;
+}
+type TProps = IProps & IPropsWithContext & Omit<InputProps, 'onSelect'>;
+
+export default TProps;
diff --git a/src/extension/components/AddressInput/types/index.ts b/src/extension/components/AddressInput/types/index.ts
index f404deed..dd00bc93 100644
--- a/src/extension/components/AddressInput/types/index.ts
+++ b/src/extension/components/AddressInput/types/index.ts
@@ -1 +1 @@
-export type { default as IProps } from './IProps';
+export type { default as TProps } from './TProps';
diff --git a/src/extension/components/AmountInput/AmountInput.tsx b/src/extension/components/AmountInput/AmountInput.tsx
index d946a56b..f40ca004 100644
--- a/src/extension/components/AmountInput/AmountInput.tsx
+++ b/src/extension/components/AmountInput/AmountInput.tsx
@@ -1,24 +1,21 @@
 import {
   Button,
   HStack,
-  Icon,
   NumberInput,
   NumberInputField,
-  Spacer,
   Text,
   Tooltip,
   VStack,
 } from '@chakra-ui/react';
 import { encodeURLSafe as encodeBase64URLSafe } from '@stablelib/base64';
 import BigNumber from 'bignumber.js';
-import numbro from 'numbro';
-import React, { FC, FocusEvent, ReactElement } from 'react';
+import React, { type FC, type ReactElement } from 'react';
 import { useTranslation } from 'react-i18next';
-import { IoInformationCircleOutline } from 'react-icons/io5';
 import { randomBytes } from 'tweetnacl';
 
 // components
 import Label from '@extension/components/Label';
+import InformationIcon from '@extension/components/InformationIcon';
 
 // constants
 import { DEFAULT_GAP, INPUT_HEIGHT } from '@extension/constants';
@@ -48,13 +45,13 @@ import convertGenesisHashToHex from '@extension/utils/convertGenesisHashToHex';
 const AmountInput: FC<IProps> = ({
   account,
   asset,
-  disabled = false,
   id,
+  label,
   network,
-  maximumTransactionAmount,
-  onChange,
+  maximumAmountInAtomicUnits,
+  onMaximumAmountClick,
   required = false,
-  value,
+  ...inputProps
 }) => {
   const { t } = useTranslation();
   // hooks
@@ -77,42 +74,21 @@ const AmountInput: FC<IProps> = ({
     ]?.minAtomicBalance || 0
   );
   const maximumTransactionAmountInStandardUnit = convertToStandardUnit(
-    new BigNumber(maximumTransactionAmount),
+    new BigNumber(maximumAmountInAtomicUnits),
     asset.decimals
   );
   // handlers
-  const handleOnBlur = (event: FocusEvent<HTMLInputElement>) => {
-    const blurValue = new BigNumber(event.target.value || '0');
-
-    // if the entered value is greater than the maximum allowed, use the max
-    if (blurValue.gt(maximumTransactionAmountInStandardUnit)) {
-      onChange(maximumTransactionAmountInStandardUnit.toString());
-
-      return;
-    }
-
-    // format the number to use an absolute value (no negatives), the maximum decimals for the asset and trim any zeroes
-    onChange(
-      numbro(blurValue.absoluteValue().toString()).format({
-        mantissa: asset.decimals,
-        trimMantissa: true,
-      })
-    );
-  };
-  const handleOnChange = (valueAsString: string | undefined) =>
-    onChange(valueAsString || '');
-  const handleOnFocus = (event: FocusEvent<HTMLInputElement>) => {
-    // remove the padded zero
-    if (event.target.value === '0') {
-      onChange('');
-    }
+  const handleMaximumAmountClick = () => {
+    onMaximumAmountClick({
+      asset,
+      maximumAmountInAtomicUnits,
+    });
   };
-  const handleMaximumAmountClick = () =>
-    onChange(maximumTransactionAmountInStandardUnit.toString());
   // renders
   const renderMaximumTransactionAmountLabel = () => {
-    let symbol = '';
+    let informationLabel: string;
     let maximumTransactionAmountLabel: ReactElement;
+    let symbol = '';
 
     switch (asset.type) {
       case AssetTypeEnum.ARC0200:
@@ -149,6 +125,28 @@ const AmountInput: FC<IProps> = ({
     );
 
     if (asset.type === AssetTypeEnum.Native) {
+      informationLabel = t<string>(
+        'captions.maximumNativeCurrencyTransactionAmount',
+        {
+          balance: formatCurrencyUnit(
+            convertToStandardUnit(balance, asset.decimals),
+            { decimals: asset.decimals }
+          ),
+          minBalance: formatCurrencyUnit(
+            convertToStandardUnit(minBalance, asset.decimals),
+            { decimals: asset.decimals }
+          ),
+          minFee: formatCurrencyUnit(
+            convertToStandardUnit(
+              new BigNumber(network.minFee),
+              asset.decimals
+            ),
+            { decimals: asset.decimals }
+          ),
+          nativeCurrencyCode: asset.symbol,
+        }
+      );
+
       return (
         <HStack
           alignItems="center"
@@ -156,39 +154,10 @@ const AmountInput: FC<IProps> = ({
           spacing={1}
           w="full"
         >
-          <Tooltip
-            aria-label="Maximum transaction amount"
-            label={t<string>(
-              'captions.maximumNativeCurrencyTransactionAmount',
-              {
-                balance: formatCurrencyUnit(
-                  convertToStandardUnit(balance, asset.decimals),
-                  { decimals: asset.decimals }
-                ),
-                minBalance: formatCurrencyUnit(
-                  convertToStandardUnit(minBalance, asset.decimals),
-                  { decimals: asset.decimals }
-                ),
-                minFee: formatCurrencyUnit(
-                  convertToStandardUnit(
-                    new BigNumber(network.minFee),
-                    asset.decimals
-                  ),
-                  { decimals: asset.decimals }
-                ),
-                nativeCurrencyCode: asset.symbol,
-              }
-            )}
-          >
-            <span
-              style={{
-                height: '1em',
-                lineHeight: '1em',
-              }}
-            >
-              <Icon as={IoInformationCircleOutline} color={defaultTextColor} />
-            </span>
-          </Tooltip>
+          <InformationIcon
+            ariaLabel={informationLabel}
+            tooltipLabel={informationLabel}
+          />
 
           {maximumTransactionAmountLabel}
         </HStack>
@@ -199,12 +168,13 @@ const AmountInput: FC<IProps> = ({
   };
 
   return (
-    <VStack w="full">
+    <VStack alignItems="flex-start" spacing={DEFAULT_GAP / 3} w="full">
       <HStack justifyContent="space-between" spacing={1} w="full">
         {/*label*/}
         <Label
           inputID={_id}
-          label={t<string>('labels.amount')}
+          label={label || t<string>('labels.amount')}
+          px={DEFAULT_GAP - 2}
           required={required}
         />
 
@@ -212,21 +182,22 @@ const AmountInput: FC<IProps> = ({
         {renderMaximumTransactionAmountLabel()}
       </HStack>
 
-      <HStack alignItems="center" spacing={1} w="full">
+      <HStack spacing={1} w="full">
         {/*input*/}
         <NumberInput
+          {...inputProps}
           colorScheme={primaryColorScheme}
           clampValueOnBlur={false}
-          id={_id}
-          isDisabled={disabled}
           focusBorderColor={primaryColor}
-          onBlur={handleOnBlur}
-          onChange={handleOnChange}
-          onFocus={handleOnFocus}
-          value={value || undefined}
+          id={_id}
           w="full"
         >
-          <NumberInputField h={INPUT_HEIGHT} textAlign="right" />
+          <NumberInputField
+            borderRadius="full"
+            h={INPUT_HEIGHT}
+            p={DEFAULT_GAP - 2}
+            textAlign="right"
+          />
         </NumberInput>
 
         {/*maximum button*/}
@@ -234,15 +205,15 @@ const AmountInput: FC<IProps> = ({
           _hover={{
             bg: buttonHoverBackgroundColor,
           }}
-          aria-label="Add maximum amount"
-          borderRadius={0}
-          h="100%"
+          aria-label={t<string>('labels.addMaximumAmount')}
+          borderRadius="md"
+          h="full"
           onClick={handleMaximumAmountClick}
           p={0}
           variant="ghost"
         >
           <Text color={defaultTextColor} fontSize="md">
-            {t<string>('labels.max').toUpperCase()}
+            {t<string>('buttons.max').toUpperCase()}
           </Text>
         </Button>
       </HStack>
diff --git a/src/extension/components/AmountInput/types/IOnEventOptions.ts b/src/extension/components/AmountInput/types/IOnEventOptions.ts
new file mode 100644
index 00000000..8622b452
--- /dev/null
+++ b/src/extension/components/AmountInput/types/IOnEventOptions.ts
@@ -0,0 +1,9 @@
+// types
+import type { IAssetTypes, INativeCurrency } from '@extension/types';
+
+interface IOnEventOptions {
+  asset: IAssetTypes | INativeCurrency | null;
+  maximumAmountInAtomicUnits: string;
+}
+
+export default IOnEventOptions;
diff --git a/src/extension/components/AmountInput/types/IProps.ts b/src/extension/components/AmountInput/types/IProps.ts
index 05d4eff4..baf955fa 100644
--- a/src/extension/components/AmountInput/types/IProps.ts
+++ b/src/extension/components/AmountInput/types/IProps.ts
@@ -1,3 +1,5 @@
+import type { NumberInputProps } from '@chakra-ui/react';
+
 // types
 import type {
   IAccountWithExtendedProps,
@@ -5,17 +7,17 @@ import type {
   INativeCurrency,
   INetworkWithTransactionParams,
 } from '@extension/types';
+import type IOnEventOptions from './IOnEventOptions';
 
-interface IProps {
+interface IProps extends NumberInputProps {
   account: IAccountWithExtendedProps;
   asset: IAssetTypes | INativeCurrency;
-  disabled?: boolean;
   id?: string;
+  label?: string;
+  maximumAmountInAtomicUnits: string;
   network: INetworkWithTransactionParams;
-  maximumTransactionAmount: string;
-  onChange: (value: string) => void;
+  onMaximumAmountClick: (options: IOnEventOptions) => void;
   required?: boolean;
-  value: string | null;
 }
 
 export default IProps;
diff --git a/src/extension/components/AmountInput/types/index.ts b/src/extension/components/AmountInput/types/index.ts
index f404deed..efd9c847 100644
--- a/src/extension/components/AmountInput/types/index.ts
+++ b/src/extension/components/AmountInput/types/index.ts
@@ -1 +1,2 @@
+export type { default as IOnEventOptions } from './IOnEventOptions';
 export type { default as IProps } from './IProps';
diff --git a/src/extension/components/AssetSelect/AssetSelect.tsx b/src/extension/components/AssetSelect/AssetSelect.tsx
index 102a0c94..1ca02b94 100644
--- a/src/extension/components/AssetSelect/AssetSelect.tsx
+++ b/src/extension/components/AssetSelect/AssetSelect.tsx
@@ -1,30 +1,43 @@
 import {
-  HStack,
+  Button as ChakraButton,
+  Icon,
   Stack,
-  Tooltip,
   useDisclosure,
   VStack,
 } from '@chakra-ui/react';
-import React, { FC } from 'react';
+import React, { type FC } from 'react';
 import { useTranslation } from 'react-i18next';
-import { GoSingleSelect } from 'react-icons/go';
+import { IoChevronDownOutline } from 'react-icons/io5';
 
 // components
 import AssetItem from '@extension/components/AssetItem';
-import IconButton from '@extension/components/IconButton';
 import Label from '@extension/components/Label';
 
 // constants
 import { DEFAULT_GAP, INPUT_HEIGHT } from '@extension/constants';
 
+// hooks
+import useBorderColor from '@extension/hooks/useBorderColor';
+import useButtonHoverBackgroundColor from '@extension/hooks/useButtonHoverBackgroundColor';
+import useColorModeValue from '@extension/hooks/useColorModeValue';
+import usePrimaryColor from '@extension/hooks/usePrimaryColor';
+import useSubTextColor from '@extension/hooks/useSubTextColor';
+
 // modals
-import AssetSelectModal from '@extension/modals/AssetSelectModal';
+import AssetSelectModal from './AssetSelectModal';
+
+// theme
+import { theme } from '@extension/theme';
 
 // types
 import type { IAssetTypes, INativeCurrency } from '@extension/types';
 import type { IProps } from './types';
 
+// utils
+import calculateIconSize from '@extension/utils/calculateIconSize';
+
 const AssetSelect: FC<IProps> = ({
+  _context,
   assets,
   disabled = false,
   label,
@@ -34,57 +47,76 @@ const AssetSelect: FC<IProps> = ({
   value,
 }) => {
   const { t } = useTranslation();
+  // hooks
+  const borderColor = useBorderColor();
+  const buttonHoverBackgroundColor = useButtonHoverBackgroundColor();
+  const primaryColorCode = useColorModeValue(
+    theme.colors.primaryLight['500'],
+    theme.colors.primaryDark['500']
+  );
+  const primaryColor = usePrimaryColor();
+  const subTextColor = useSubTextColor();
   const {
     isOpen: isAssetSelectModalOpen,
     onClose: onAssetSelectClose,
     onOpen: onAssetSelectModalOpen,
   } = useDisclosure();
   // handlers
-  const handleAssetClick = () => onAssetSelectModalOpen();
-  const handleOnAssetSelect = (_value: (IAssetTypes | INativeCurrency)[]) =>
+  const handleOnClick = () => onAssetSelectModalOpen();
+  const handleOnSelect = (_value: (IAssetTypes | INativeCurrency)[]) =>
     onSelect(_value[0]);
 
   return (
     <>
       {/*asset select modal*/}
       <AssetSelectModal
+        _context={_context}
         assets={assets}
         isOpen={isAssetSelectModalOpen}
         multiple={false}
         onClose={onAssetSelectClose}
-        onSelect={handleOnAssetSelect}
+        onSelect={handleOnSelect}
       />
 
       <VStack alignItems="flex-start" spacing={DEFAULT_GAP / 3} w="full">
         {/*label*/}
-        {label && <Label label={label} required={required} />}
+        {label && (
+          <Label label={label} px={DEFAULT_GAP - 2} required={required} />
+        )}
 
-        <HStack justifyContent="center" spacing={DEFAULT_GAP / 3} w="full">
-          {/*asset view*/}
-          <Stack
-            borderRadius="md"
-            borderWidth="1px"
-            flexGrow={1}
-            height={INPUT_HEIGHT}
-            justifyContent="center"
-            px={DEFAULT_GAP - 2}
-            w="full"
-          >
+        <ChakraButton
+          _focus={{
+            borderColor: primaryColor,
+            boxShadow: `0 0 0 1px ${primaryColorCode}`,
+          }}
+          _hover={{
+            bg: buttonHoverBackgroundColor,
+            borderColor: borderColor,
+          }}
+          aria-label={t<string>('labels.selectAsset')}
+          alignItems="center"
+          borderStyle="solid"
+          borderWidth="1px"
+          borderRadius="full"
+          h={INPUT_HEIGHT}
+          justifyContent="space-between"
+          onClick={handleOnClick}
+          px={DEFAULT_GAP - 2}
+          py={0}
+          rightIcon={
+            <Icon
+              as={IoChevronDownOutline}
+              boxSize={calculateIconSize()}
+              color={subTextColor}
+            />
+          }
+          variant="ghost"
+          w="full"
+        >
+          <Stack flexGrow={1} justifyContent="center" w="full">
             <AssetItem asset={value} network={network} />
           </Stack>
-
-          {/*open asset select modal button*/}
-          <Tooltip label={t<string>('labels.selectAsset')}>
-            <IconButton
-              aria-label="Select an asset from the list of available assets"
-              disabled={disabled}
-              icon={GoSingleSelect}
-              onClick={handleAssetClick}
-              size="lg"
-              variant="ghost"
-            />
-          </Tooltip>
-        </HStack>
+        </ChakraButton>
       </VStack>
     </>
   );
diff --git a/src/extension/modals/AssetSelectModal/AssetSelectModal.tsx b/src/extension/components/AssetSelect/AssetSelectModal.tsx
similarity index 92%
rename from src/extension/modals/AssetSelectModal/AssetSelectModal.tsx
rename to src/extension/components/AssetSelect/AssetSelectModal.tsx
index f0d0ea08..a9695a2f 100644
--- a/src/extension/modals/AssetSelectModal/AssetSelectModal.tsx
+++ b/src/extension/components/AssetSelect/AssetSelectModal.tsx
@@ -15,9 +15,13 @@ import {
   Tooltip,
   VStack,
 } from '@chakra-ui/react';
-import React, { FC, useState } from 'react';
+import React, { type FC, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { IoChevronForward } from 'react-icons/io5';
+import {
+  IoCheckmarkDoneCircleOutline,
+  IoCheckmarkOutline,
+  IoChevronForward,
+} from 'react-icons/io5';
 
 // components
 import AssetItem from '@extension/components/AssetItem';
@@ -47,12 +51,13 @@ import { theme } from '@extension/theme';
 
 // types
 import type { IAssetTypes, INativeCurrency } from '@extension/types';
-import type { IProps } from './types';
+import type { TAssetSelectModalProps } from './types';
 
 // utils
 import calculateIconSize from '@extension/utils/calculateIconSize';
 
-const AssetSelectModal: FC<IProps> = ({
+const AssetSelectModal: FC<TAssetSelectModalProps> = ({
+  _context,
   assets,
   isOpen,
   multiple,
@@ -148,11 +153,11 @@ const AssetSelectModal: FC<IProps> = ({
           _hover={{
             bg: buttonHoverBackgroundColor,
           }}
-          borderRadius={0}
+          borderRadius="full"
           fontSize="md"
           h={TAB_ITEM_HEIGHT}
           justifyContent="start"
-          key={`asset-select-modal-item-${index}`}
+          key={`${_context}-asset-select-modal-item-${index}`}
           onClick={handleOnChange(asset)}
           px={DEFAULT_GAP / 2}
           py={0}
@@ -259,8 +264,12 @@ const AssetSelectModal: FC<IProps> = ({
           </VStack>
         </ModalHeader>
 
-        {/*content*/}
-        <ModalBody px={DEFAULT_GAP}>{renderContent()}</ModalBody>
+        {/*body*/}
+        <ModalBody px={DEFAULT_GAP}>
+          <VStack spacing={1} w="full">
+            {renderContent()}
+          </VStack>
+        </ModalBody>
 
         {/*footer*/}
         <ModalFooter p={DEFAULT_GAP}>
@@ -277,6 +286,7 @@ const AssetSelectModal: FC<IProps> = ({
             {multiple && (
               <Button
                 onClick={handleConfirmClick}
+                rightIcon={<IoCheckmarkOutline />}
                 size="lg"
                 variant="solid"
                 w="full"
diff --git a/src/extension/components/AssetSelect/types/IProps.ts b/src/extension/components/AssetSelect/types/IProps.ts
index 0fbc002f..4c6deb78 100644
--- a/src/extension/components/AssetSelect/types/IProps.ts
+++ b/src/extension/components/AssetSelect/types/IProps.ts
@@ -3,9 +3,10 @@ import type {
   IAssetTypes,
   INativeCurrency,
   INetworkWithTransactionParams,
+  IPropsWithContext,
 } from '@extension/types';
 
-interface IProps {
+interface IProps extends IPropsWithContext {
   assets: (IAssetTypes | INativeCurrency)[];
   disabled?: boolean;
   label?: string;
diff --git a/src/extension/modals/AssetSelectModal/types/IProps.ts b/src/extension/components/AssetSelect/types/TAssetSelectModalProps.ts
similarity index 54%
rename from src/extension/modals/AssetSelectModal/types/IProps.ts
rename to src/extension/components/AssetSelect/types/TAssetSelectModalProps.ts
index 3869007d..5616bf89 100644
--- a/src/extension/modals/AssetSelectModal/types/IProps.ts
+++ b/src/extension/components/AssetSelect/types/TAssetSelectModalProps.ts
@@ -3,13 +3,18 @@ import type {
   IAssetTypes,
   IModalProps,
   INativeCurrency,
+  IPropsWithContext,
 } from '@extension/types';
 
-interface IProps extends IModalProps {
+interface IAssetSelectModalProps extends IModalProps {
   assets: (IAssetTypes | INativeCurrency)[];
   isOpen: boolean;
   multiple?: boolean;
   onSelect: (assets: (IAssetTypes | INativeCurrency)[]) => void;
 }
 
-export default IProps;
+type TAssetSelectModalProps = IAssetSelectModalProps &
+  IModalProps &
+  IPropsWithContext;
+
+export default TAssetSelectModalProps;
diff --git a/src/extension/components/AssetSelect/types/index.ts b/src/extension/components/AssetSelect/types/index.ts
index f404deed..dadb368b 100644
--- a/src/extension/components/AssetSelect/types/index.ts
+++ b/src/extension/components/AssetSelect/types/index.ts
@@ -1 +1,2 @@
+export type { default as TAssetSelectModalProps } from './TAssetSelectModalProps';
 export type { default as IProps } from './IProps';
diff --git a/src/extension/components/AssetsTab/AssetsTab.tsx b/src/extension/components/AssetsTab/AssetsTab.tsx
index a3a0d147..ef2c6cf0 100644
--- a/src/extension/components/AssetsTab/AssetsTab.tsx
+++ b/src/extension/components/AssetsTab/AssetsTab.tsx
@@ -1,34 +1,25 @@
-import {
-  HStack,
-  Spacer,
-  Spinner,
-  TabPanel,
-  Tooltip,
-  VStack,
-} from '@chakra-ui/react';
-import React, { FC, ReactNode } from 'react';
+import { Spacer, TabPanel, VStack } from '@chakra-ui/react';
+import React, { type FC, type ReactNode } from 'react';
 import { useTranslation } from 'react-i18next';
-import { IoAddCircleOutline, IoAddOutline } from 'react-icons/io5';
+import { IoAddCircleOutline } from 'react-icons/io5';
 import { useDispatch } from 'react-redux';
 
 // components
 import AssetTabLoadingItem from '@extension/components/AssetTabLoadingItem';
 import EmptyState from '@extension/components/EmptyState';
-import IconButton from '@extension/components/IconButton';
 import ScrollableContainer from '@extension/components/ScrollableContainer';
+import TabControlBar from '@extension/components/TabControlBar';
 import AssetTabARC0200AssetItem from './AssetTabARC0200AssetItem';
 import AssetTabStandardAssetItem from './AssetTabStandardAssetItem';
 
 // constants
-import { DEFAULT_GAP } from '@extension/constants';
+import { ACCOUNT_PAGE_TAB_CONTENT_HEIGHT } from '@extension/constants';
 
 // features
 import { setAccountId as setAddAssetAccountId } from '@extension/features/add-assets';
 
 // hooks
 import useAccountInformation from '@extension/hooks/useAccountInformation';
-import useDefaultTextColor from '@extension/hooks/useDefaultTextColor';
-import useItemBorderColor from '@extension/hooks/useItemBorderColor';
 
 // selectors
 import {
@@ -50,7 +41,7 @@ import type {
 } from '@extension/types';
 import type { IProps } from './types';
 
-const AssetsTab: FC<IProps> = ({ account }) => {
+const AssetsTab: FC<IProps> = ({ _context, account }) => {
   const { t } = useTranslation();
   const dispatch = useDispatch<IAppThunkDispatch<IMainRootState>>();
   // selectors
@@ -63,8 +54,6 @@ const AssetsTab: FC<IProps> = ({ account }) => {
   const updatingStandardAssets = useSelectStandardAssetsUpdating();
   // hooks
   const accountInformation = useAccountInformation(account.id);
-  const defaultTextColor = useDefaultTextColor();
-  const itemBorderColor = useItemBorderColor();
   // misc
   const allAssetHoldings = accountInformation
     ? [
@@ -88,14 +77,16 @@ const AssetsTab: FC<IProps> = ({ account }) => {
 
     if (fetchingARC0200Assets || fetchingStandardAssets) {
       return Array.from({ length: 3 }, (_, index) => (
-        <AssetTabLoadingItem key={`asset-tab-loading-item-${index}`} />
+        <AssetTabLoadingItem
+          key={`${_context}-asset-tab-loading-item-${index}`}
+        />
       ));
     }
 
     if (selectedNetwork && accountInformation && allAssetHoldings.length > 0) {
       assetNodes = allAssetHoldings.reduce<ReactNode[]>(
         (acc, { amount, id, isARC0200 }, currentIndex) => {
-          const key: string = `asset-tab-item-${currentIndex}`;
+          const key = `${_context}-asset-tab-item-${currentIndex}`;
           let arc200Asset: IARC0200Asset | null;
           let standardAsset: IStandardAsset | null;
 
@@ -140,73 +131,24 @@ const AssetsTab: FC<IProps> = ({ account }) => {
     }
 
     return assetNodes.length > 0 ? (
-      <>
-        {/*controls*/}
-        <HStack
-          alignItems="center"
-          borderBottomColor={itemBorderColor}
-          borderBottomStyle="solid"
-          borderBottomWidth="1px"
-          justifyContent="flex-start"
-          px={DEFAULT_GAP / 2}
-          py={DEFAULT_GAP / 3}
-          spacing={1}
-          w="full"
-        >
-          {/*updating asset spinner*/}
-          {updatingARC0200Assets ||
-            (updatingStandardAssets && (
-              <Tooltip
-                aria-label="Updating asset information spinner"
-                label={t<string>('captions.updatingAssetInformation')}
-              >
-                <Spinner
-                  thickness="1px"
-                  speed="0.65s"
-                  color={defaultTextColor}
-                  size="sm"
-                />
-              </Tooltip>
-            ))}
-
-          <Spacer />
-
-          {/*add asset button*/}
-          <Tooltip label={t<string>('buttons.addAsset')}>
-            <IconButton
-              aria-label="Add asset"
-              icon={IoAddCircleOutline}
-              onClick={handleAddAssetClick}
-              size="sm"
-              variant="ghost"
-            />
-          </Tooltip>
-        </HStack>
-
-        {/*asset list*/}
-        <ScrollableContainer
-          direction="column"
-          m={0}
-          pb={8}
-          pt={0}
-          px={0}
-          spacing={0}
-          w="full"
-        >
-          {assetNodes}
-        </ScrollableContainer>
-      </>
+      // asset list
+      <ScrollableContainer
+        direction="column"
+        m={0}
+        pb={8}
+        pt={0}
+        px={0}
+        spacing={0}
+        w="full"
+      >
+        {assetNodes}
+      </ScrollableContainer>
     ) : (
       <VStack flexGrow={1} w="full">
         <Spacer />
 
         {/*empty state*/}
         <EmptyState
-          button={{
-            icon: IoAddOutline,
-            label: t<string>('buttons.addAsset'),
-            onClick: handleAddAssetClick,
-          }}
           description={t<string>('captions.noAssetsFound')}
           text={t<string>('headings.noAssetsFound')}
         />
@@ -218,12 +160,31 @@ const AssetsTab: FC<IProps> = ({ account }) => {
 
   return (
     <TabPanel
-      height="70vh"
+      height={ACCOUNT_PAGE_TAB_CONTENT_HEIGHT}
       m={0}
       p={0}
       sx={{ display: 'flex', flexDirection: 'column' }}
       w="full"
     >
+      {/*controls*/}
+      <TabControlBar
+        _context={`${_context}-asset-tab`}
+        buttons={[
+          {
+            button: {
+              ['aria-label']: t<string>('buttons.addAsset'),
+              icon: <IoAddCircleOutline />,
+              onClick: handleAddAssetClick,
+              size: 'sm',
+              variant: 'ghost',
+            },
+            tooltipLabel: t<string>('buttons.addAsset'),
+          },
+        ]}
+        isLoading={updatingARC0200Assets || updatingStandardAssets}
+        loadingTooltipLabel={t<string>('captions.updatingAssetInformation')}
+      />
+
       {renderContent()}
     </TabPanel>
   );
diff --git a/src/extension/components/AssetsTab/types/IProps.ts b/src/extension/components/AssetsTab/types/IProps.ts
index c4fb4a20..07f0a06c 100644
--- a/src/extension/components/AssetsTab/types/IProps.ts
+++ b/src/extension/components/AssetsTab/types/IProps.ts
@@ -1,7 +1,7 @@
 // types
-import type { IAccount } from '@extension/types';
+import type { IAccount, IPropsWithContext } from '@extension/types';
 
-interface IProps {
+interface IProps extends IPropsWithContext {
   account: IAccount;
 }
 
diff --git a/src/extension/components/CreatePasswordInput/index.ts b/src/extension/components/CreatePasswordInput/index.ts
deleted file mode 100644
index 4b015ac3..00000000
--- a/src/extension/components/CreatePasswordInput/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export { default } from './CreatePasswordInput';
-export * from './utils';
diff --git a/src/extension/components/CreatePasswordInput/utils/index.ts b/src/extension/components/CreatePasswordInput/utils/index.ts
deleted file mode 100644
index 99cccdcf..00000000
--- a/src/extension/components/CreatePasswordInput/utils/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default as validate } from './validate';
diff --git a/src/extension/components/CreatePasswordInput/utils/validate.ts b/src/extension/components/CreatePasswordInput/utils/validate.ts
deleted file mode 100644
index 81641243..00000000
--- a/src/extension/components/CreatePasswordInput/utils/validate.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-import { TFunction } from 'i18next';
-
-// constants
-import { PASSWORD_MIN_LENGTH, PASSWORD_MIN_SCORE } from '@extension/constants';
-
-/**
- * Validates the password and the score. The password is valid if null is returned, otherwise the string will contain
- * a human-readable error.
- * @param {string} password - the password.
- * @param {number} score - the password score.
- * @param {TFunction} t - translate function from i18next.
- * @returns {string | null} null if the password is valid, or if it is invalid, a string detailing a human-readable
- * error.
- */
-export default function validate(
-  password: string,
-  score: number,
-  t: TFunction
-): string | null {
-  if (password.length <= 0) {
-    return t<string>('errors.inputs.requiredWithLabel', { name: 'Password' });
-  }
-
-  if (password.length < PASSWORD_MIN_LENGTH) {
-    return t<string>('errors.inputs.passwordMinLength');
-  }
-
-  if (score < PASSWORD_MIN_SCORE) {
-    return t<string>('errors.inputs.passwordTooWeak');
-  }
-
-  return null;
-}
diff --git a/src/extension/components/EditableAccountNameField/EditableAccountNameField.tsx b/src/extension/components/EditableAccountNameField/EditableAccountNameField.tsx
index cafefe8b..f532d13f 100644
--- a/src/extension/components/EditableAccountNameField/EditableAccountNameField.tsx
+++ b/src/extension/components/EditableAccountNameField/EditableAccountNameField.tsx
@@ -15,7 +15,6 @@ import React, {
   ChangeEvent,
   FC,
   KeyboardEvent,
-  MutableRefObject,
   useEffect,
   useRef,
   useState,
@@ -58,10 +57,8 @@ const EditableAccountNameField: FC<IProps> = ({
   onSubmitChange,
 }) => {
   const { t } = useTranslation();
-  const containerRef: MutableRefObject<HTMLDivElement | null> =
-    useRef<HTMLDivElement | null>(null);
-  const inputRef: MutableRefObject<HTMLInputElement | null> =
-    useRef<HTMLInputElement | null>(null);
+  const containerRef = useRef<HTMLDivElement | null>(null);
+  const inputRef = useRef<HTMLInputElement | null>(null);
   // hooks
   const buttonHoverBackgroundColor = useButtonHoverBackgroundColor();
   const defaultTextColor = useDefaultTextColor();
diff --git a/src/extension/components/EnterMnemonicPhraseInput/index.ts b/src/extension/components/EnterMnemonicPhraseInput/index.ts
deleted file mode 100644
index ea1d2cb9..00000000
--- a/src/extension/components/EnterMnemonicPhraseInput/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export { default } from './EnterMnemonicPhraseInput';
-export * from './utils';
diff --git a/src/extension/components/GenericInput/GenericInput.tsx b/src/extension/components/GenericInput/GenericInput.tsx
index 4ffd5590..658edcbc 100644
--- a/src/extension/components/GenericInput/GenericInput.tsx
+++ b/src/extension/components/GenericInput/GenericInput.tsx
@@ -7,12 +7,7 @@ import {
   VStack,
 } from '@chakra-ui/react';
 import { encodeURLSafe as encodeBase64URLSafe } from '@stablelib/base64';
-import React, {
-  type ChangeEvent,
-  type FocusEvent,
-  type FC,
-  useState,
-} from 'react';
+import React, { type FC } from 'react';
 import { useTranslation } from 'react-i18next';
 import { randomBytes } from 'tweetnacl';
 
@@ -30,18 +25,12 @@ import useSubTextColor from '@extension/hooks/useSubTextColor';
 // types
 import type { IProps } from './types';
 
-// utils
-import validateInput from '@extension/utils/validateInput';
-
 const GenericInput: FC<IProps> = ({
-  characterLimit,
+  charactersRemaining,
   error,
   id,
   informationText,
   label,
-  onBlur,
-  onChange,
-  onError,
   required = false,
   validate,
   ...inputProps
@@ -50,68 +39,29 @@ const GenericInput: FC<IProps> = ({
   // hooks
   const primaryColor = usePrimaryColor();
   const subTextColor = useSubTextColor();
-  // state
-  const [charactersRemaining, setCharactersRemaining] = useState<number | null>(
-    characterLimit || null
-  );
   // misc
   const _id = id || encodeBase64URLSafe(randomBytes(6));
-  // handlers
-  const handleOnBlur = (event: FocusEvent<HTMLInputElement>) => {
-    onError &&
-      onError(
-        validateInput({
-          characterLimit,
-          field: label,
-          t,
-          required,
-          validate,
-          value: event.target.value,
-        })
-      );
-
-    return onBlur && onBlur(event);
-  };
-  const handleOnChange = (event: ChangeEvent<HTMLInputElement>) => {
-    const value = event.target.value;
-    let byteLength: number;
-
-    // update the characters remaining
-    if (characterLimit) {
-      byteLength = new TextEncoder().encode(value).byteLength;
-
-      setCharactersRemaining(characterLimit - byteLength);
-    }
-
-    onError &&
-      onError(
-        validateInput({
-          characterLimit,
-          field: label,
-          t,
-          required,
-          validate,
-          value,
-        })
-      );
-
-    return onChange && onChange(event);
-  };
 
   return (
     <VStack alignItems="flex-start" spacing={DEFAULT_GAP / 3} w="full">
-      <Label error={error} inputID={_id} label={label} required={required} />
+      {/*label*/}
+      <Label
+        error={error}
+        inputID={_id}
+        label={label}
+        px={DEFAULT_GAP - 2}
+        required={required}
+      />
 
       {/*input*/}
       <InputGroup size="md">
         <Input
           {...inputProps}
+          borderRadius="full"
           focusBorderColor={error ? 'red.300' : primaryColor}
           id={_id}
           isInvalid={!!error}
           h={INPUT_HEIGHT}
-          onBlur={handleOnBlur}
-          onChange={handleOnChange}
           w="full"
         />
 
@@ -132,6 +82,7 @@ const GenericInput: FC<IProps> = ({
         <Text
           color={charactersRemaining >= 0 ? subTextColor : 'red.300'}
           fontSize="xs"
+          px={DEFAULT_GAP - 2}
           textAlign="right"
           w="full"
         >
diff --git a/src/extension/components/GenericInput/types/IProps.ts b/src/extension/components/GenericInput/types/IProps.ts
index b7a3a86b..86cdc6c9 100644
--- a/src/extension/components/GenericInput/types/IProps.ts
+++ b/src/extension/components/GenericInput/types/IProps.ts
@@ -1,12 +1,11 @@
 import type { InputProps } from '@chakra-ui/react';
 
-interface IProps extends Omit<InputProps, 'onError'> {
-  characterLimit?: number;
+interface IProps extends InputProps {
+  charactersRemaining?: number;
   error?: string | null;
   id?: string;
   informationText?: string;
   label: string;
-  onError?: (value: string | null) => void;
   required?: boolean;
   validate?: (value: string) => string | null;
 }
diff --git a/src/extension/components/GenericTextarea/GenericTextarea.tsx b/src/extension/components/GenericTextarea/GenericTextarea.tsx
index 71c0148c..0059c563 100644
--- a/src/extension/components/GenericTextarea/GenericTextarea.tsx
+++ b/src/extension/components/GenericTextarea/GenericTextarea.tsx
@@ -1,11 +1,6 @@
 import { Text, Textarea, VStack } from '@chakra-ui/react';
 import { encodeURLSafe as encodeBase64URLSafe } from '@stablelib/base64';
-import React, {
-  type ChangeEvent,
-  type FocusEvent,
-  type FC,
-  useState,
-} from 'react';
+import React, { type FC, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import { randomBytes } from 'tweetnacl';
 
@@ -22,17 +17,11 @@ import useSubTextColor from '@extension/hooks/useSubTextColor';
 // types
 import type { IProps } from './types';
 
-// utils
-import validateInput from '@extension/utils/validateInput';
-
 const GenericTextarea: FC<IProps> = ({
-  characterLimit,
+  charactersRemaining,
   error,
   id,
   label,
-  onBlur,
-  onChange,
-  onError,
   required = false,
   validate,
   ...textAreaProps
@@ -41,67 +30,26 @@ const GenericTextarea: FC<IProps> = ({
   // hooks
   const primaryColor = usePrimaryColor();
   const subTextColor = useSubTextColor();
-  // state
-  const [charactersRemaining, setCharactersRemaining] = useState<number | null>(
-    characterLimit || null
-  );
   // misc
   const _id = id || encodeBase64URLSafe(randomBytes(6));
-  // handlers
-  const handleOnBlur = (event: FocusEvent<HTMLTextAreaElement>) => {
-    onError &&
-      onError(
-        validateInput({
-          characterLimit,
-          field: label,
-          t,
-          required,
-          validate,
-          value: event.target.value,
-        })
-      );
-
-    return onBlur && onBlur(event);
-  };
-  const handleOnChange = (event: ChangeEvent<HTMLTextAreaElement>) => {
-    const value = event.target.value;
-    let byteLength: number;
-
-    // update the characters remaining
-    if (characterLimit) {
-      byteLength = new TextEncoder().encode(value).byteLength;
-
-      setCharactersRemaining(characterLimit - byteLength);
-    }
-
-    onError &&
-      onError(
-        validateInput({
-          characterLimit,
-          field: label,
-          t,
-          required,
-          validate,
-          value,
-        })
-      );
-
-    return onChange && onChange(event);
-  };
 
   return (
     <VStack alignItems="flex-start" spacing={DEFAULT_GAP / 3} w="full">
-      <Label error={error} inputID={_id} label={label} required={required} />
+      <Label
+        error={error}
+        inputID={_id}
+        label={label}
+        px={DEFAULT_GAP - 2}
+        required={required}
+      />
 
       {/*textarea*/}
       <Textarea
-        resize="vertical"
         {...textAreaProps}
+        borderRadius="md"
         focusBorderColor={error ? 'red.300' : primaryColor}
         id={_id}
         isInvalid={!!error}
-        onBlur={handleOnBlur}
-        onChange={handleOnChange}
         w="full"
       />
 
@@ -110,6 +58,7 @@ const GenericTextarea: FC<IProps> = ({
         <Text
           color={charactersRemaining >= 0 ? subTextColor : 'red.300'}
           fontSize="xs"
+          px={DEFAULT_GAP - 2}
           textAlign="right"
           w="full"
         >
diff --git a/src/extension/components/GenericTextarea/types/IProps.ts b/src/extension/components/GenericTextarea/types/IProps.ts
index 4f592bcf..08e04c99 100644
--- a/src/extension/components/GenericTextarea/types/IProps.ts
+++ b/src/extension/components/GenericTextarea/types/IProps.ts
@@ -1,11 +1,10 @@
 import type { TextareaProps } from '@chakra-ui/react';
 
-interface IProps extends Omit<TextareaProps, 'onError'> {
-  characterLimit?: number;
+interface IProps extends TextareaProps {
+  charactersRemaining?: number;
   error?: string | null;
   id?: string;
   label: string;
-  onError?: (value: string | null) => void;
   required?: boolean;
   validate?: (value: string) => string | null;
 }
diff --git a/src/extension/components/IconButton/IconButton.tsx b/src/extension/components/IconButton/IconButton.tsx
index 78a330d4..9cfb7d82 100644
--- a/src/extension/components/IconButton/IconButton.tsx
+++ b/src/extension/components/IconButton/IconButton.tsx
@@ -1,31 +1,26 @@
-import {
-  Icon,
-  IconButton as ChakraIconButton,
-  IconButtonProps,
-} from '@chakra-ui/react';
+import { Icon, IconButton as ChakraIconButton } from '@chakra-ui/react';
 import React, {
-  PropsWithoutRef,
-  ForwardRefExoticComponent,
+  type PropsWithoutRef,
+  type ForwardRefExoticComponent,
   forwardRef,
-  LegacyRef,
-  RefAttributes,
+  type LegacyRef,
+  type RefAttributes,
 } from 'react';
-import { IconType } from 'react-icons';
 
 // hooks
 import useButtonHoverBackgroundColor from '@extension/hooks/useButtonHoverBackgroundColor';
-import useDefaultTextColor from '@extension/hooks/useDefaultTextColor';
+import useSubTextColor from '@extension/hooks/useSubTextColor';
 
-interface IProps extends Omit<IconButtonProps, 'icon'> {
-  icon: IconType;
-}
+// types
+import type { IProps } from './types';
 
 const IconButton: ForwardRefExoticComponent<
   PropsWithoutRef<IProps> & RefAttributes<HTMLButtonElement>
 > = forwardRef<HTMLButtonElement, IProps>(
-  ({ icon, ...iconProps }: IProps, ref) => {
-    const buttonHoverBackgroundColor: string = useButtonHoverBackgroundColor();
-    const defaultTextColor: string = useDefaultTextColor();
+  ({ color, icon, ...iconProps }: IProps, ref) => {
+    // hooks
+    const buttonHoverBackgroundColor = useButtonHoverBackgroundColor();
+    const subTextColor = useSubTextColor();
 
     return (
       <ChakraIconButton
@@ -36,7 +31,7 @@ const IconButton: ForwardRefExoticComponent<
         _hover={{
           bg: buttonHoverBackgroundColor,
         }}
-        icon={<Icon as={icon} color={defaultTextColor} />}
+        icon={<Icon as={icon} color={color || subTextColor} />}
         ref={ref as LegacyRef<HTMLButtonElement>}
       />
     );
diff --git a/src/extension/components/IconButton/types/IProps.ts b/src/extension/components/IconButton/types/IProps.ts
new file mode 100644
index 00000000..f2903293
--- /dev/null
+++ b/src/extension/components/IconButton/types/IProps.ts
@@ -0,0 +1,8 @@
+import type { IconButtonProps } from '@chakra-ui/react';
+import type { IconType } from 'react-icons';
+
+interface IProps extends Omit<IconButtonProps, 'icon'> {
+  icon: IconType;
+}
+
+export default IProps;
diff --git a/src/extension/modals/AccountSelectModal/types/index.ts b/src/extension/components/IconButton/types/index.ts
similarity index 100%
rename from src/extension/modals/AccountSelectModal/types/index.ts
rename to src/extension/components/IconButton/types/index.ts
diff --git a/src/extension/components/KeyRegistrationTransactionModalBody/KeyRegistrationTransactionModalBody.tsx b/src/extension/components/KeyRegistrationTransactionModalBody/KeyRegistrationTransactionModalBody.tsx
index 0d974c62..10d4f5f2 100644
--- a/src/extension/components/KeyRegistrationTransactionModalBody/KeyRegistrationTransactionModalBody.tsx
+++ b/src/extension/components/KeyRegistrationTransactionModalBody/KeyRegistrationTransactionModalBody.tsx
@@ -140,7 +140,7 @@ const KeyRegistrationTransactionModalBody: FC<IProps> = ({
       {!hideNetwork && (
         <ModalItem
           label={`${t<string>('labels.network')}:`}
-          value={<NetworkBadge network={network} />}
+          value={<NetworkBadge network={network} size="xs" />}
         />
       )}
 
diff --git a/src/extension/components/Label/Label.tsx b/src/extension/components/Label/Label.tsx
index 4a26c9fc..43c4ff59 100644
--- a/src/extension/components/Label/Label.tsx
+++ b/src/extension/components/Label/Label.tsx
@@ -8,13 +8,24 @@ import useDefaultTextColor from '@extension/hooks/useDefaultTextColor';
 // types
 import type { IProps } from './types';
 
-const Label: FC<IProps> = ({ error, inputID, label, required = false }) => {
+const Label: FC<IProps> = ({
+  error,
+  inputID,
+  label,
+  required = false,
+  ...stackProps
+}) => {
   const { t } = useTranslation();
   // hooks
   const defaultTextColor = useDefaultTextColor();
 
   return (
-    <HStack alignItems="flex-end" justifyContent="space-between" w="full">
+    <HStack
+      alignItems="flex-end"
+      justifyContent="space-between"
+      w="full"
+      {...stackProps}
+    >
       {/*label*/}
       {required ? (
         <HStack alignItems="center" spacing={1}>
diff --git a/src/extension/components/Label/types/IProps.ts b/src/extension/components/Label/types/IProps.ts
index d7d3204a..f75a0d00 100644
--- a/src/extension/components/Label/types/IProps.ts
+++ b/src/extension/components/Label/types/IProps.ts
@@ -1,4 +1,6 @@
-interface IProps {
+import type { StackProps } from '@chakra-ui/react';
+
+interface IProps extends StackProps {
   error?: string | null;
   inputID?: string;
   label: string;
diff --git a/src/extension/components/MoreInformationAccordion/MoreInformationAccordion.tsx b/src/extension/components/MoreInformationAccordion/MoreInformationAccordion.tsx
index 696d6bc1..a540f3c1 100644
--- a/src/extension/components/MoreInformationAccordion/MoreInformationAccordion.tsx
+++ b/src/extension/components/MoreInformationAccordion/MoreInformationAccordion.tsx
@@ -9,6 +9,9 @@ import {
 import React, { type FC } from 'react';
 import { useTranslation } from 'react-i18next';
 
+// constants
+import { DEFAULT_GAP } from '@extension/constants';
+
 // hooks
 import useDefaultTextColor from '@extension/hooks/useDefaultTextColor';
 
@@ -25,7 +28,9 @@ const MoreInformationAccordion: FC<IProps> = ({
   onChange,
 }) => {
   const { t } = useTranslation();
-  const defaultTextColor: string = useDefaultTextColor();
+  // hooks
+  const defaultTextColor = useDefaultTextColor();
+  // handlers
   const handleOnChange = (value: number) => onChange(value > -1);
 
   return (
@@ -45,9 +50,11 @@ const MoreInformationAccordion: FC<IProps> = ({
           >
             {label || t<string>('labels.moreInformation')}
           </Text>
+
           <AccordionIcon />
         </AccordionButton>
-        <AccordionPanel pb={0} pt={2} px={0}>
+
+        <AccordionPanel pb={0} pt={DEFAULT_GAP / 3} px={0}>
           {children}
         </AccordionPanel>
       </AccordionItem>
diff --git a/src/extension/components/NFTsTab/NFTsTab.tsx b/src/extension/components/NFTsTab/NFTsTab.tsx
index 803deb3a..45adf86e 100644
--- a/src/extension/components/NFTsTab/NFTsTab.tsx
+++ b/src/extension/components/NFTsTab/NFTsTab.tsx
@@ -32,6 +32,7 @@ import type { INFTsTabProps } from './types';
 
 // utils
 import convertPublicKeyToAVMAddress from '@extension/utils/convertPublicKeyToAVMAddress';
+import { ACCOUNT_PAGE_TAB_CONTENT_HEIGHT } from '@extension/constants';
 
 const NFTsTab: FC<INFTsTabProps> = ({ account }) => {
   const { t } = useTranslation();
@@ -129,7 +130,7 @@ const NFTsTab: FC<INFTsTabProps> = ({ account }) => {
 
   return (
     <TabPanel
-      height="70vh"
+      height={ACCOUNT_PAGE_TAB_CONTENT_HEIGHT}
       m={0}
       p={0}
       sx={{ display: 'flex', flexDirection: 'column' }}
diff --git a/src/extension/components/NativeBalance/NativeBalance.tsx b/src/extension/components/NativeBalance/NativeBalance.tsx
index db0cb462..02944f45 100644
--- a/src/extension/components/NativeBalance/NativeBalance.tsx
+++ b/src/extension/components/NativeBalance/NativeBalance.tsx
@@ -1,5 +1,5 @@
 import { HStack, Text, Tooltip } from '@chakra-ui/react';
-import React, { FC } from 'react';
+import React, { type FC } from 'react';
 import { useTranslation } from 'react-i18next';
 
 // components
@@ -17,9 +17,6 @@ import convertToStandardUnit from '@common/utils/convertToStandardUnit';
 import formatCurrencyUnit from '@common/utils/formatCurrencyUnit';
 import createIconFromDataUri from '@extension/utils/createIconFromDataUri';
 
-// theme
-import { theme } from '@extension/theme';
-
 // types
 import type { IProps } from './types';
 
@@ -40,7 +37,6 @@ const NativeBalance: FC<IProps> = ({
     atomicBalance,
     nativeCurrency.decimals
   );
-  const iconSize = calculateIconSize('xs');
   const minimumStandardUnit = convertToStandardUnit(
     minAtomicBalance,
     nativeCurrency.decimals
@@ -48,16 +44,6 @@ const NativeBalance: FC<IProps> = ({
 
   return (
     <HStack alignItems="center" justifyContent="center" spacing={1}>
-      <InformationIcon
-        ariaLabel="Minimum balance information"
-        tooltipLabel={t<string>('captions.minimumBalance', {
-          amount: formatCurrencyUnit(minimumStandardUnit, {
-            decimals: nativeCurrency.decimals,
-          }),
-          code: nativeCurrency.symbol.toUpperCase(),
-        })}
-      />
-
       <Tooltip
         aria-label="Full balance"
         label={`${formatCurrencyUnit(balanceStandardUnit, {
@@ -67,7 +53,7 @@ const NativeBalance: FC<IProps> = ({
       >
         <HStack
           backgroundColor={textBackgroundColor}
-          borderRadius={theme.radii['3xl']}
+          borderRadius="full"
           px={DEFAULT_GAP / 2}
           py={1}
           spacing={1}
@@ -83,11 +69,22 @@ const NativeBalance: FC<IProps> = ({
           </Text>
 
           {createIconFromDataUri(nativeCurrency.iconUrl, {
-            color: 'black.500',
+            color: defaultTextColor,
             boxSize: calculateIconSize('xs'),
           })}
         </HStack>
       </Tooltip>
+
+      {/*minimum balance icon*/}
+      <InformationIcon
+        ariaLabel="Minimum balance information"
+        tooltipLabel={t<string>('captions.minimumBalance', {
+          amount: formatCurrencyUnit(minimumStandardUnit, {
+            decimals: nativeCurrency.decimals,
+          }),
+          code: nativeCurrency.symbol.toUpperCase(),
+        })}
+      />
     </HStack>
   );
 };
diff --git a/src/extension/components/NetworkBadge/NetworkBadge.tsx b/src/extension/components/NetworkBadge/NetworkBadge.tsx
index fe21a517..43fd0c8b 100644
--- a/src/extension/components/NetworkBadge/NetworkBadge.tsx
+++ b/src/extension/components/NetworkBadge/NetworkBadge.tsx
@@ -1,6 +1,9 @@
 import { HStack, StackProps, Text } from '@chakra-ui/react';
 import React, { type FC } from 'react';
 
+// constants
+import { DEFAULT_GAP } from '@extension/constants';
+
 // enums
 import { NetworkTypeEnum } from '@extension/enums';
 
@@ -15,9 +18,9 @@ import type { IProps } from './types';
 
 // utils
 import createIconFromDataUri from '@extension/utils/createIconFromDataUri';
+import parseFontSize from './utils/parseFontSize';
 import parseIconSize from './utils/parseIconSize';
 import parsePadding from './utils/parsePadding';
-import { DEFAULT_GAP } from '@extension/constants';
 
 const NetworkBadge: FC<IProps> = ({ network, size = 'sm' }) => {
   // hooks
diff --git a/src/extension/components/NetworkBadge/utils/parseFontSize/index.ts b/src/extension/components/NetworkBadge/utils/parseFontSize/index.ts
new file mode 100644
index 00000000..e18c301a
--- /dev/null
+++ b/src/extension/components/NetworkBadge/utils/parseFontSize/index.ts
@@ -0,0 +1 @@
+export { default } from './parseFontSize';
diff --git a/src/extension/components/NetworkBadge/utils/parseFontSize/parseFontSize.ts b/src/extension/components/NetworkBadge/utils/parseFontSize/parseFontSize.ts
new file mode 100644
index 00000000..1a494773
--- /dev/null
+++ b/src/extension/components/NetworkBadge/utils/parseFontSize/parseFontSize.ts
@@ -0,0 +1,16 @@
+// types
+import type { TSizes } from '@extension/types';
+
+export default function parseFontSize(size: TSizes): string {
+  switch (size) {
+    case 'lg':
+      return 'xl';
+    case 'md':
+      return 'lg';
+    case 'xs':
+      return 'xs';
+    case 'sm':
+    default:
+      return 'md';
+  }
+}
diff --git a/src/extension/components/NetworkSelect/NetworkSelect.tsx b/src/extension/components/NetworkSelect/NetworkSelect.tsx
index f1f7a694..a024a455 100644
--- a/src/extension/components/NetworkSelect/NetworkSelect.tsx
+++ b/src/extension/components/NetworkSelect/NetworkSelect.tsx
@@ -11,7 +11,11 @@ import { IoChevronDownOutline } from 'react-icons/io5';
 // components
 import NetworkBadge from '@extension/components/NetworkBadge';
 
+// constants
+import { DEFAULT_GAP } from '@extension/constants';
+
 // hooks
+import useBorderColor from '@extension/hooks/useBorderColor';
 import useButtonHoverBackgroundColor from '@extension/hooks/useButtonHoverBackgroundColor';
 import useSubTextColor from '@extension/hooks/useSubTextColor';
 
@@ -24,9 +28,14 @@ import type { IProps } from './types';
 
 // utils
 import calculateIconSize from '@extension/utils/calculateIconSize';
-import { DEFAULT_GAP } from '@extension/constants';
 
-const NetworkSelect: FC<IProps> = ({ _context, networks, onSelect, value }) => {
+const NetworkSelect: FC<IProps> = ({
+  _context,
+  networks,
+  onSelect,
+  size,
+  value,
+}) => {
   const { t } = useTranslation();
   const {
     isOpen: isSelectModalOpen,
@@ -34,6 +43,7 @@ const NetworkSelect: FC<IProps> = ({ _context, networks, onSelect, value }) => {
     onOpen: onSelectModalOpen,
   } = useDisclosure();
   // hooks
+  const borderColor = useBorderColor();
   const buttonHoverBackgroundColor = useButtonHoverBackgroundColor();
   const subTextColor = useSubTextColor();
   // misc
@@ -58,10 +68,14 @@ const NetworkSelect: FC<IProps> = ({ _context, networks, onSelect, value }) => {
         <ChakraButton
           _hover={{
             bg: buttonHoverBackgroundColor,
+            borderColor: borderColor,
           }}
           aria-label={t<string>('labels.chooseANetwork')}
           alignItems="center"
-          borderRightRadius="full"
+          borderColor="transparent"
+          borderStyle="solid"
+          borderWidth="1px"
+          borderRadius="full"
           h="auto"
           justifyContent="space-between"
           onClick={handleOnClick}
@@ -78,7 +92,7 @@ const NetworkSelect: FC<IProps> = ({ _context, networks, onSelect, value }) => {
           }
           variant="ghost"
         >
-          <NetworkBadge network={value} />
+          <NetworkBadge network={value} size={size} />
         </ChakraButton>
       </Tooltip>
     </>
diff --git a/src/extension/components/NetworkSelect/NetworkSelectModal.tsx b/src/extension/components/NetworkSelect/NetworkSelectModal.tsx
index ddfe426c..3c72bd3c 100644
--- a/src/extension/components/NetworkSelect/NetworkSelectModal.tsx
+++ b/src/extension/components/NetworkSelect/NetworkSelectModal.tsx
@@ -1,6 +1,7 @@
 import {
   Button as ChakraButton,
   Heading,
+  HStack,
   Icon,
   Modal,
   ModalBody,
@@ -9,16 +10,18 @@ import {
   ModalHeader,
   ModalOverlay,
   Spacer,
+  Tag,
+  TagLabel,
+  Text,
   VStack,
 } from '@chakra-ui/react';
-import React, { type FC } from 'react';
+import React, { type FC, type ReactNode } from 'react';
 import { useTranslation } from 'react-i18next';
 import { IoChevronForward } from 'react-icons/io5';
 
 // components
 import Button from '@extension/components/Button';
 import EmptyState from '@extension/components/EmptyState';
-import NetworkBadge from '@extension/components/NetworkBadge';
 
 // constants
 import {
@@ -31,7 +34,6 @@ import {
 import useButtonHoverBackgroundColor from '@extension/hooks/useButtonHoverBackgroundColor';
 import useColorModeValue from '@extension/hooks/useColorModeValue';
 import useDefaultTextColor from '@extension/hooks/useDefaultTextColor';
-import usePrimaryButtonTextColor from '@extension/hooks/usePrimaryButtonTextColor';
 import useSubTextColor from '@extension/hooks/useSubTextColor';
 
 // theme
@@ -43,6 +45,8 @@ import type { INetworkSelectModalProps } from './types';
 
 // utils
 import calculateIconSize from '@extension/utils/calculateIconSize';
+import createIconFromDataUri from '@extension/utils/createIconFromDataUri';
+import { NetworkTypeEnum } from '@extension/enums';
 
 const NetworkSelectModal: FC<INetworkSelectModalProps> = ({
   _context,
@@ -55,16 +59,11 @@ const NetworkSelectModal: FC<INetworkSelectModalProps> = ({
   const { t } = useTranslation();
   // hooks
   const buttonHoverBackgroundColor = useButtonHoverBackgroundColor();
-  const primaryHoverBackgroundColor: string = useColorModeValue(
-    theme.colors.primaryDark['200'],
-    theme.colors.primaryDark['200']
-  );
-  const primaryBackgroundColor: string = useColorModeValue(
-    theme.colors.primaryDark['300'],
-    theme.colors.primaryDark['300']
-  );
   const defaultTextColor = useDefaultTextColor();
-  const primaryButtonTextColor = usePrimaryButtonTextColor();
+  const primaryButtonTextColor: string = useColorModeValue(
+    theme.colors.primaryLight['600'],
+    theme.colors.primaryDark['600']
+  );
   const subTextColor = useSubTextColor();
   // misc
   const iconSize = calculateIconSize('md');
@@ -93,17 +92,47 @@ const NetworkSelectModal: FC<INetworkSelectModalProps> = ({
     return networks.map((value, index) => {
       const isSelected = selectedGenesisHash === value.genesisHash;
       const textColor = isSelected ? primaryButtonTextColor : subTextColor;
+      let node: ReactNode = null;
+
+      switch (value.type) {
+        case NetworkTypeEnum.Beta:
+          node = (
+            <Tag
+              borderRadius="full"
+              colorScheme="blue"
+              size="sm"
+              variant="solid"
+            >
+              <TagLabel>{`BetaNet`}</TagLabel>
+            </Tag>
+          );
+          break;
+        case NetworkTypeEnum.Test:
+          node = (
+            <Tag
+              borderRadius="full"
+              colorScheme="yellow"
+              size="sm"
+              variant="solid"
+            >
+              <TagLabel>{`TestNet`}</TagLabel>
+            </Tag>
+          );
+          break;
+        default:
+          break;
+      }
 
       return (
         <ChakraButton
           _hover={{
-            bg: isSelected
-              ? primaryHoverBackgroundColor
-              : buttonHoverBackgroundColor,
+            bg: buttonHoverBackgroundColor,
           }}
           alignItems="center"
-          backgroundColor={isSelected ? primaryBackgroundColor : 'transparent'}
-          borderRadius="md"
+          backgroundColor={
+            isSelected ? buttonHoverBackgroundColor : 'transparent'
+          }
+          borderRadius="full"
           fontSize="md"
           h={TAB_ITEM_HEIGHT}
           justifyContent="space-between"
@@ -116,7 +145,30 @@ const NetworkSelectModal: FC<INetworkSelectModalProps> = ({
           variant="ghost"
           w="full"
         >
-          <NetworkBadge network={value} />
+          <HStack
+            alignItems="center"
+            justifyContent="flex-start"
+            m={0}
+            p={DEFAULT_GAP / 2}
+            spacing={DEFAULT_GAP - 2}
+            w="full"
+          >
+            {/*icon*/}
+            {createIconFromDataUri(value.nativeCurrency.iconUrl, {
+              color: textColor,
+              boxSize: calculateIconSize(),
+            })}
+
+            {/*name*/}
+            <Text color={textColor} maxW={250} noOfLines={1}>
+              {value.canonicalName}
+            </Text>
+
+            <Spacer />
+
+            {/*type*/}
+            {node}
+          </HStack>
         </ChakraButton>
       );
     });
@@ -155,8 +207,12 @@ const NetworkSelectModal: FC<INetworkSelectModalProps> = ({
           </VStack>
         </ModalHeader>
 
-        {/*content*/}
-        <ModalBody px={DEFAULT_GAP}>{renderContent()}</ModalBody>
+        {/*body*/}
+        <ModalBody px={DEFAULT_GAP}>
+          <VStack spacing={1} w="full">
+            {renderContent()}
+          </VStack>
+        </ModalBody>
 
         {/*footer*/}
         <ModalFooter p={DEFAULT_GAP}>
diff --git a/src/extension/components/NetworkSelect/types/IProps.ts b/src/extension/components/NetworkSelect/types/IProps.ts
index 2fe536ea..ec92ebb0 100644
--- a/src/extension/components/NetworkSelect/types/IProps.ts
+++ b/src/extension/components/NetworkSelect/types/IProps.ts
@@ -1,10 +1,10 @@
 // types
-import type { INetwork } from '@extension/types';
+import type { INetwork, IPropsWithContext, TSizes } from '@extension/types';
 
-interface IProps {
-  _context: string;
+interface IProps extends IPropsWithContext {
   networks: INetwork[];
   onSelect: (value: INetwork) => void;
+  size?: TSizes;
   value: INetwork;
 }
 
diff --git a/src/extension/components/CreatePasswordInput/CreatePasswordInput.tsx b/src/extension/components/NewPasswordInput/NewPasswordInput.tsx
similarity index 52%
rename from src/extension/components/CreatePasswordInput/CreatePasswordInput.tsx
rename to src/extension/components/NewPasswordInput/NewPasswordInput.tsx
index 36115498..1410442b 100644
--- a/src/extension/components/CreatePasswordInput/CreatePasswordInput.tsx
+++ b/src/extension/components/NewPasswordInput/NewPasswordInput.tsx
@@ -1,6 +1,5 @@
 import {
   Button,
-  HStack,
   Input,
   InputGroup,
   InputRightElement,
@@ -8,118 +7,88 @@ import {
   Text,
   VStack,
 } from '@chakra-ui/react';
-import zxcvbn from 'zxcvbn';
-import React, {
-  ChangeEvent,
-  FC,
-  KeyboardEvent,
-  MutableRefObject,
-  useState,
-} from 'react';
+import { encodeURLSafe as encodeBase64URLSafe } from '@stablelib/base64';
+import { randomBytes } from 'tweetnacl';
+import React, { type FC, useState } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 import { IoEye, IoEyeOff, IoOpenOutline } from 'react-icons/io5';
 
 // components
 import IconButton from '@extension/components/IconButton';
+import Label from '@extension/components/Label';
 import StrengthMeter from '@extension/components/StrengthMeter';
 
 // constants
-import { STRONG_PASSWORD_POLICY_LINK } from '@extension/constants';
+import {
+  DEFAULT_GAP,
+  INPUT_HEIGHT,
+  STRONG_PASSWORD_POLICY_LINK,
+} from '@extension/constants';
 
 // hooks
-import useDefaultTextColor from '@extension/hooks/useDefaultTextColor';
 import usePrimaryColor from '@extension/hooks/usePrimaryColor';
 import usePrimaryColorScheme from '@extension/hooks/usePrimaryColorScheme';
 import useSubTextColor from '@extension/hooks/useSubTextColor';
 
-// utils
-import { validate } from './utils';
-
-interface IProps {
-  disabled?: boolean;
-  inputRef?: MutableRefObject<HTMLInputElement | null>;
-  label?: string;
-  onChange: (value: string, score: number) => void;
-  onKeyUp?: (event: KeyboardEvent<HTMLInputElement>) => void;
-  score: number;
-  value: string;
-}
+// types
+import type { IProps } from './types';
 
-const CreatePasswordInput: FC<IProps> = ({
-  disabled,
-  inputRef,
+const NewPasswordInput: FC<IProps> = ({
+  error,
+  id,
   label,
-  onChange,
-  onKeyUp,
   score,
   value,
-}: IProps) => {
+  ...inputProps
+}) => {
   const { t } = useTranslation();
   // hooks
-  const defaultTextColor = useDefaultTextColor();
   const primaryColor = usePrimaryColor();
   const primaryColorScheme = usePrimaryColorScheme();
   const subTextColor = useSubTextColor();
   // state
   const [show, setShow] = useState<boolean>(false);
-  const [error, setError] = useState<string | null>(
-    value.length > 0 ? validate(value, score, t) : null
-  ); // misc
-  const inputId: string = 'create-password-input';
+  // misc
+  const _id = id || encodeBase64URLSafe(randomBytes(6));
   // handlers
-  const handleOnChange = (event: ChangeEvent<HTMLInputElement>) => {
-    const value: string = event.target.value;
-    const newScore: number = value.length <= 0 ? -1 : zxcvbn(value).score;
-    const error: string | null = validate(value, newScore, t);
-
-    // update the local state
-    setError(error);
-
-    onChange(value, newScore);
-  };
   const handleShowHideClick = () => setShow(!show);
 
   return (
-    <VStack w="full">
-      <HStack alignItems="flex-end" justifyContent="space-between" w="full">
-        {/*label*/}
-        <Text
-          as={'label'}
-          color={error ? 'red.300' : defaultTextColor}
-          htmlFor={inputId}
-          textAlign="left"
-        >
-          {label || t<string>('labels.password')}
-        </Text>
-
-        <Text color="red.300" fontSize="xs" textAlign="right">
-          {error}
-        </Text>
-      </HStack>
+    <VStack alignItems="flex-start" spacing={DEFAULT_GAP / 3} w="full">
+      {/*label*/}
+      <Label
+        error={error}
+        inputID={_id}
+        label={label || t<string>('labels.password')}
+        px={DEFAULT_GAP - 2}
+        required={true}
+      />
 
       {/*input*/}
       <InputGroup size="md">
         <Input
+          {...inputProps}
           autoComplete="new-password"
-          disabled={disabled}
+          borderRadius="full"
           focusBorderColor={error ? 'red.300' : primaryColor}
-          id={inputId}
+          h={INPUT_HEIGHT}
+          id={_id}
           isInvalid={!!error}
-          onChange={handleOnChange}
-          onKeyUp={onKeyUp}
           placeholder={t<string>('placeholders.enterPassword')}
-          ref={inputRef}
+          pr={DEFAULT_GAP * 2}
           type={show ? 'text' : 'password'}
           value={value}
+          w="full"
         />
 
-        <InputRightElement>
+        <InputRightElement h={INPUT_HEIGHT}>
           <IconButton
-            aria-label="Eye open and closed"
-            disabled={disabled}
+            aria-label={t<string>('labels.showHidePassword')}
+            borderRadius="full"
             icon={show ? IoEye : IoEyeOff}
+            mr={DEFAULT_GAP / 3}
             onClick={handleShowHideClick}
-            size="sm"
+            size="md"
             variant="ghost"
           />
         </InputRightElement>
@@ -150,4 +119,4 @@ const CreatePasswordInput: FC<IProps> = ({
   );
 };
 
-export default CreatePasswordInput;
+export default NewPasswordInput;
diff --git a/src/extension/components/NewPasswordInput/index.ts b/src/extension/components/NewPasswordInput/index.ts
new file mode 100644
index 00000000..a2471822
--- /dev/null
+++ b/src/extension/components/NewPasswordInput/index.ts
@@ -0,0 +1,2 @@
+export { default } from './NewPasswordInput';
+export * from './types';
diff --git a/src/extension/components/NewPasswordInput/types/IProps.ts b/src/extension/components/NewPasswordInput/types/IProps.ts
new file mode 100644
index 00000000..a8d19a02
--- /dev/null
+++ b/src/extension/components/NewPasswordInput/types/IProps.ts
@@ -0,0 +1,13 @@
+import type { InputProps } from '@chakra-ui/react';
+import type { MutableRefObject } from 'react';
+
+interface IProps extends InputProps {
+  error?: string | null;
+  id?: string;
+  label?: string;
+  ref?: MutableRefObject<HTMLInputElement | null>;
+  required?: boolean;
+  score: number;
+}
+
+export default IProps;
diff --git a/src/extension/modals/AssetSelectModal/types/index.ts b/src/extension/components/NewPasswordInput/types/index.ts
similarity index 100%
rename from src/extension/modals/AssetSelectModal/types/index.ts
rename to src/extension/components/NewPasswordInput/types/index.ts
diff --git a/src/extension/components/PasswordInput/PasswordInput.tsx b/src/extension/components/PasswordInput/PasswordInput.tsx
index 3c9b75d8..885b957b 100644
--- a/src/extension/components/PasswordInput/PasswordInput.tsx
+++ b/src/extension/components/PasswordInput/PasswordInput.tsx
@@ -1,26 +1,24 @@
 import {
-  HStack,
   Input,
   InputGroup,
   InputRightElement,
   Text,
   VStack,
 } from '@chakra-ui/react';
-import React, {
-  ChangeEvent,
-  FC,
-  KeyboardEvent,
-  MutableRefObject,
-  useState,
-} from 'react';
+import { encodeURLSafe as encodeBase64URLSafe } from '@stablelib/base64';
+import React, { type FC, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { IoEye, IoEyeOff } from 'react-icons/io5';
+import { randomBytes } from 'tweetnacl';
 
 // components
 import IconButton from '@extension/components/IconButton';
+import Label from '@extension/components/Label';
+
+// constants
+import { DEFAULT_GAP, INPUT_HEIGHT } from '@extension/constants';
 
 // hooks
-import useDefaultTextColor from '@extension/hooks/useDefaultTextColor';
 import usePrimaryColor from '@extension/hooks/usePrimaryColor';
 import useSubTextColor from '@extension/hooks/useSubTextColor';
 
@@ -31,69 +29,66 @@ const PasswordInput: FC<IProps> = ({
   disabled,
   error,
   hint,
+  id,
   inputRef,
+  label,
   onKeyUp,
   onChange,
+  required = false,
   value,
 }) => {
   const { t } = useTranslation();
   // hooks
-  const defaultTextColor = useDefaultTextColor();
   const primaryColor = usePrimaryColor();
   const subTextColor = useSubTextColor();
   // state
   const [show, setShow] = useState<boolean>(false);
   // misc
-  const inputId: string = 'password-input';
+  const _id = id || encodeBase64URLSafe(randomBytes(6));
   // handlers
-  const handleShowHideClick = () => {
-    setShow(!show);
-  };
+  const handleShowHideClick = () => setShow(!show);
 
   return (
-    <VStack alignItems="flex-start" w="full">
-      <HStack alignItems="flex-end" justifyContent="space-between" w="full">
-        {/*label*/}
-        <Text
-          as={'label'}
-          color={error ? 'red.300' : defaultTextColor}
-          htmlFor={inputId}
-          textAlign="left"
-        >
-          {t<string>('labels.password')}
-        </Text>
-
-        {/*error*/}
-        {error && (
-          <Text color="red.300" fontSize="xs" textAlign="right">
-            {error}
-          </Text>
-        )}
-      </HStack>
+    <VStack alignItems="flex-start" spacing={DEFAULT_GAP / 3} w="full">
+      {/*label*/}
+      <Label
+        error={error}
+        inputID={_id}
+        label={label || t<string>('labels.password')}
+        px={DEFAULT_GAP - 2}
+        required={required}
+      />
 
       {/*input*/}
       <InputGroup size="md">
         <Input
           autoComplete="current-password"
+          borderRadius="full"
           focusBorderColor={error ? 'red.300' : primaryColor}
-          id={inputId}
+          h={INPUT_HEIGHT}
+          id={_id}
           isDisabled={disabled}
           isInvalid={!!error}
           name="password"
           onChange={onChange}
           onKeyUp={onKeyUp}
           placeholder={t<string>('placeholders.enterPassword')}
+          pr={DEFAULT_GAP * 2}
           ref={inputRef}
           type={show ? 'text' : 'password'}
           value={value}
+          w="full"
         />
 
-        <InputRightElement>
+        <InputRightElement h={INPUT_HEIGHT}>
           <IconButton
-            aria-label="Eye open and closed"
+            aria-label={t<string>('labels.showHidePassword')}
+            borderRadius="full"
+            disabled={disabled}
             icon={show ? IoEye : IoEyeOff}
+            mr={DEFAULT_GAP / 3}
             onClick={handleShowHideClick}
-            size="sm"
+            size="md"
             variant="ghost"
           />
         </InputRightElement>
@@ -101,7 +96,13 @@ const PasswordInput: FC<IProps> = ({
 
       {/*info*/}
       {hint && (
-        <Text color={subTextColor} fontSize="xs" textAlign="left">
+        <Text
+          color={subTextColor}
+          fontSize="xs"
+          px={DEFAULT_GAP - 2}
+          textAlign="left"
+          w="full"
+        >
           {hint}
         </Text>
       )}
diff --git a/src/extension/components/PasswordInput/hooks/index.ts b/src/extension/components/PasswordInput/hooks/index.ts
deleted file mode 100644
index 982d5fe4..00000000
--- a/src/extension/components/PasswordInput/hooks/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default as usePassword } from './usePassword';
diff --git a/src/extension/components/PasswordInput/hooks/usePassword.ts b/src/extension/components/PasswordInput/hooks/usePassword.ts
deleted file mode 100644
index a983ac7b..00000000
--- a/src/extension/components/PasswordInput/hooks/usePassword.ts
+++ /dev/null
@@ -1,43 +0,0 @@
-import { ChangeEvent, FocusEvent, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-
-// types
-import { IUsePasswordState } from '../types';
-
-// utils
-import { validate as validatePassword } from '../utils';
-
-export default function usePassword(): IUsePasswordState {
-  const { t } = useTranslation();
-  // state
-  const [error, setError] = useState<string | null>(null);
-  const [value, setValue] = useState<string>('');
-  // actions
-  const onBlur = (event: FocusEvent<HTMLInputElement>) =>
-    setError(validatePassword(event.target.value, t));
-  const onChange = (event: ChangeEvent<HTMLInputElement>) => {
-    setError(null);
-    setValue(event.target.value);
-  };
-  const reset = () => {
-    setError(null);
-    setValue('');
-  };
-  const validate: () => string | null = () => {
-    const newError: string | null = validatePassword(value, t);
-
-    setError(newError);
-
-    return newError;
-  };
-
-  return {
-    error,
-    onBlur,
-    onChange,
-    reset,
-    setError,
-    validate,
-    value,
-  };
-}
diff --git a/src/extension/components/PasswordInput/index.ts b/src/extension/components/PasswordInput/index.ts
index f5559a76..56083ae5 100644
--- a/src/extension/components/PasswordInput/index.ts
+++ b/src/extension/components/PasswordInput/index.ts
@@ -1,4 +1,2 @@
 export { default } from './PasswordInput';
-export * from './hooks';
 export * from './types';
-export * from './utils';
diff --git a/src/extension/components/PasswordInput/types/IProps.ts b/src/extension/components/PasswordInput/types/IProps.ts
index 5ae6c32f..fdc6ad71 100644
--- a/src/extension/components/PasswordInput/types/IProps.ts
+++ b/src/extension/components/PasswordInput/types/IProps.ts
@@ -3,10 +3,13 @@ import type { ChangeEvent, KeyboardEvent, MutableRefObject } from 'react';
 interface IProps {
   disabled?: boolean;
   error: string | null;
-  hint: string | null;
+  hint?: string;
+  id?: string;
   inputRef?: MutableRefObject<HTMLInputElement | null>;
+  label?: string;
   onChange: (event: ChangeEvent<HTMLInputElement>) => void;
   onKeyUp?: (event: KeyboardEvent<HTMLInputElement>) => void;
+  required?: boolean;
   value: string;
 }
 
diff --git a/src/extension/components/PasswordInput/types/IUsePasswordState.ts b/src/extension/components/PasswordInput/types/IUsePasswordState.ts
deleted file mode 100644
index 3d2faae3..00000000
--- a/src/extension/components/PasswordInput/types/IUsePasswordState.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import { ChangeEvent, FocusEvent } from 'react';
-
-interface IUsePasswordState {
-  error: string | null;
-  onBlur: (event: FocusEvent<HTMLInputElement>) => void;
-  onChange: (event: ChangeEvent<HTMLInputElement>) => void;
-  reset: () => void;
-  setError: (value: string | null) => void;
-  validate: () => string | null;
-  value: string;
-}
-
-export default IUsePasswordState;
diff --git a/src/extension/components/PasswordInput/types/index.ts b/src/extension/components/PasswordInput/types/index.ts
index a3cd4300..f404deed 100644
--- a/src/extension/components/PasswordInput/types/index.ts
+++ b/src/extension/components/PasswordInput/types/index.ts
@@ -1,2 +1 @@
 export type { default as IProps } from './IProps';
-export type { default as IUsePasswordState } from './IUsePasswordState';
diff --git a/src/extension/components/PasswordInput/utils/index.ts b/src/extension/components/PasswordInput/utils/index.ts
deleted file mode 100644
index 99cccdcf..00000000
--- a/src/extension/components/PasswordInput/utils/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default as validate } from './validate';
diff --git a/src/extension/components/PasswordInput/utils/validate.ts b/src/extension/components/PasswordInput/utils/validate.ts
deleted file mode 100644
index b6bb0f19..00000000
--- a/src/extension/components/PasswordInput/utils/validate.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import { TFunction } from 'i18next';
-
-/**
- * Validates the password. The password is valid if null is returned, otherwise the string will contain a human-readable
- * error.
- * @param {string} input - the input password.
- * @param {TFunction} t - translate function from i18next.
- * @returns {string | null} null if the password is valid, or if it is invalid, a string detailing a human-readable
- * error.
- */
-export default function validate(input: string, t: TFunction): string | null {
-  if (input.length <= 0) {
-    return t<string>('errors.inputs.requiredWithLabel', { name: 'Password' });
-  }
-
-  return null;
-}
diff --git a/src/extension/components/RekeyedAccountBadge/ReKeyedAccountBadge.tsx b/src/extension/components/RekeyedAccountBadge/ReKeyedAccountBadge.tsx
index 3373eb4b..56e9fdf9 100644
--- a/src/extension/components/RekeyedAccountBadge/ReKeyedAccountBadge.tsx
+++ b/src/extension/components/RekeyedAccountBadge/ReKeyedAccountBadge.tsx
@@ -9,9 +9,6 @@ import React, { FC } from 'react';
 import { useTranslation } from 'react-i18next';
 import { IoAlertCircleOutline, IoLockClosedOutline } from 'react-icons/io5';
 
-// selectors
-import { useSelectSettingsColorMode } from '@extension/selectors';
-
 // types
 import type { IProps } from './types';
 
@@ -22,16 +19,9 @@ const ReKeyedAccountBadge: FC<IProps> = ({
   tooltipLabel,
 }) => {
   const { t } = useTranslation();
-  // selectors
-  const colorMode = useSelectSettingsColorMode();
   // misc
   const tag = (
-    <Tag
-      borderRadius="full"
-      colorScheme="orange"
-      size={size}
-      variant={colorMode === 'dark' ? 'solid' : 'outline'}
-    >
+    <Tag borderRadius="full" colorScheme="orange" size={size} variant="solid">
       <TagLeftIcon as={IoLockClosedOutline} />
 
       <TagLabel>{t('labels.reKeyed')}</TagLabel>
diff --git a/src/extension/components/EnterMnemonicPhraseInput/EnterMnemonicPhraseInput.tsx b/src/extension/components/SeedPhraseInput/SeedPhraseInput.tsx
similarity index 69%
rename from src/extension/components/EnterMnemonicPhraseInput/EnterMnemonicPhraseInput.tsx
rename to src/extension/components/SeedPhraseInput/SeedPhraseInput.tsx
index 504650f3..a1f74499 100644
--- a/src/extension/components/EnterMnemonicPhraseInput/EnterMnemonicPhraseInput.tsx
+++ b/src/extension/components/SeedPhraseInput/SeedPhraseInput.tsx
@@ -11,41 +11,41 @@ import {
   VStack,
 } from '@chakra-ui/react';
 import React, {
-  ChangeEvent,
-  ClipboardEvent,
-  FC,
-  ReactNode,
+  type ChangeEvent,
+  type ClipboardEvent,
+  type FC,
+  type ReactNode,
   useState,
 } from 'react';
 import { useTranslation } from 'react-i18next';
 
+// components
+import Label from '@extension/components/Label';
+
+// constants
+import { DEFAULT_GAP, INPUT_HEIGHT } from '@extension/constants';
+
 // hooks
 import useButtonHoverBackgroundColor from '@extension/hooks/useButtonHoverBackgroundColor';
-import useDefaultTextColor from '@extension/hooks/useDefaultTextColor';
 import usePrimaryColor from '@extension/hooks/usePrimaryColor';
 import useSubTextColor from '@extension/hooks/useSubTextColor';
 
+// types
+import type { IProps } from './types';
+
 // utils
 import { isPhrasesEmpty } from './utils';
-import { DEFAULT_GAP } from '@extension/constants';
 
-interface IProps {
-  disabled?: boolean;
-  error: string | null;
-  onChange: (phrases: string[]) => void;
-  phrases: string[];
-}
-
-const EnterMnemonicPhraseInput: FC<IProps> = ({
+const SeedPhraseInput: FC<IProps> = ({
+  _context,
   disabled,
   error,
   onChange,
   phrases,
-}: IProps) => {
+}) => {
   const { t } = useTranslation();
   // hooks
   const buttonHoverBackgroundColor = useButtonHoverBackgroundColor();
-  const defaultTextColor = useDefaultTextColor();
   const primaryColor = usePrimaryColor();
   const subTextColor = useSubTextColor();
   // states
@@ -81,21 +81,19 @@ const EnterMnemonicPhraseInput: FC<IProps> = ({
 
   return (
     <VStack>
-      <HStack alignItems="center" minH={8} spacing={DEFAULT_GAP / 3} w="full">
+      <HStack
+        alignItems="center"
+        minH={DEFAULT_GAP + 2}
+        spacing={DEFAULT_GAP / 3}
+        w="full"
+      >
         {/*label*/}
-        <HStack alignItems="flex-end" justifyContent="space-between" w="full">
-          <Text
-            color={error ? 'red.300' : defaultTextColor}
-            fontSize="sm"
-            textAlign="left"
-          >
-            {t<string>('labels.seedPhrase')}
-          </Text>
-
-          <Text color="red.300" fontSize="xs" textAlign="right">
-            {error}
-          </Text>
-        </HStack>
+        <Label
+          error={error}
+          label={t<string>('labels.seedPhrase')}
+          pl={DEFAULT_GAP / 3}
+          required={true}
+        />
 
         <Spacer />
 
@@ -105,13 +103,15 @@ const EnterMnemonicPhraseInput: FC<IProps> = ({
             _hover={{
               bg: buttonHoverBackgroundColor,
             }}
-            aria-label="Reset the phrases"
-            borderRadius={0}
+            aria-label={t<string>('labels.resetSeedPhrase')}
+            borderRadius="md"
             onClick={handleResetClick}
             size="sm"
             variant="ghost"
           >
-            {t<string>('buttons.reset')}
+            <Text color={subTextColor} fontSize="md">
+              {t<string>('buttons.reset').toUpperCase()}
+            </Text>
           </Button>
         )}
       </HStack>
@@ -123,26 +123,28 @@ const EnterMnemonicPhraseInput: FC<IProps> = ({
             <InputGroup size="md">
               <InputLeftElement
                 color={subTextColor}
+                h="full"
                 pointerEvents="none"
-                width={5}
+                w={DEFAULT_GAP + 2}
               >
-                <Text color={subTextColor} fontSize="xs">
+                <Text as="b" color={subTextColor} fontSize="sm">
                   {index + 1}
                 </Text>
               </InputLeftElement>
 
               <Input
                 autoFocus={currentFocusIndex === index}
-                disabled={disabled}
+                borderRadius="full"
                 focusBorderColor={error ? 'red.300' : primaryColor}
+                h={INPUT_HEIGHT}
+                isDisabled={disabled}
                 isInvalid={!!error}
                 onChange={handleOnChange(index)}
                 onFocus={handleOnFocus(index)}
                 onPaste={handleOnPaste}
-                pb={4}
-                pl={5}
-                pr={3}
-                pt={4}
+                pl={DEFAULT_GAP + 1}
+                pr={DEFAULT_GAP / 2}
+                py={DEFAULT_GAP - 2}
                 type="text"
                 value={value}
               />
@@ -154,7 +156,7 @@ const EnterMnemonicPhraseInput: FC<IProps> = ({
               <GridItem
                 colEnd={2}
                 colStart={2}
-                key={`enter-mnemonic-phrase-input-phrase-input-item-${index}`}
+                key={`${_context}-seed-phrase-input-item-${index}`}
               >
                 {input}
               </GridItem>
@@ -162,9 +164,7 @@ const EnterMnemonicPhraseInput: FC<IProps> = ({
           }
 
           return (
-            <GridItem
-              key={`enter-mnemonic-phrase-input-phrase-input-item-${index}`}
-            >
+            <GridItem key={`${_context}-seed-phrase-input-item-${index}`}>
               {input}
             </GridItem>
           );
@@ -174,4 +174,4 @@ const EnterMnemonicPhraseInput: FC<IProps> = ({
   );
 };
 
-export default EnterMnemonicPhraseInput;
+export default SeedPhraseInput;
diff --git a/src/extension/components/SeedPhraseInput/index.ts b/src/extension/components/SeedPhraseInput/index.ts
new file mode 100644
index 00000000..2249d93a
--- /dev/null
+++ b/src/extension/components/SeedPhraseInput/index.ts
@@ -0,0 +1,3 @@
+export { default } from './SeedPhraseInput';
+export * from './types';
+export * from './utils';
diff --git a/src/extension/components/SeedPhraseInput/types/IProps.ts b/src/extension/components/SeedPhraseInput/types/IProps.ts
new file mode 100644
index 00000000..c7d90b6b
--- /dev/null
+++ b/src/extension/components/SeedPhraseInput/types/IProps.ts
@@ -0,0 +1,11 @@
+// types
+import type { IPropsWithContext } from '@extension/types';
+
+interface IProps extends IPropsWithContext {
+  disabled?: boolean;
+  error: string | null;
+  onChange: (phrases: string[]) => void;
+  phrases: string[];
+}
+
+export default IProps;
diff --git a/src/extension/components/SeedPhraseInput/types/index.ts b/src/extension/components/SeedPhraseInput/types/index.ts
new file mode 100644
index 00000000..f404deed
--- /dev/null
+++ b/src/extension/components/SeedPhraseInput/types/index.ts
@@ -0,0 +1 @@
+export type { default as IProps } from './IProps';
diff --git a/src/extension/components/EnterMnemonicPhraseInput/utils/index.ts b/src/extension/components/SeedPhraseInput/utils/index.ts
similarity index 100%
rename from src/extension/components/EnterMnemonicPhraseInput/utils/index.ts
rename to src/extension/components/SeedPhraseInput/utils/index.ts
diff --git a/src/extension/components/EnterMnemonicPhraseInput/utils/isPhrasesEmpty.ts b/src/extension/components/SeedPhraseInput/utils/isPhrasesEmpty.ts
similarity index 100%
rename from src/extension/components/EnterMnemonicPhraseInput/utils/isPhrasesEmpty.ts
rename to src/extension/components/SeedPhraseInput/utils/isPhrasesEmpty.ts
diff --git a/src/extension/components/EnterMnemonicPhraseInput/utils/validate.ts b/src/extension/components/SeedPhraseInput/utils/validate.ts
similarity index 83%
rename from src/extension/components/EnterMnemonicPhraseInput/utils/validate.ts
rename to src/extension/components/SeedPhraseInput/utils/validate.ts
index b8984450..4079b0ee 100644
--- a/src/extension/components/EnterMnemonicPhraseInput/utils/validate.ts
+++ b/src/extension/components/SeedPhraseInput/utils/validate.ts
@@ -4,6 +4,7 @@ import { TFunction } from 'i18next';
 import isMnemonicValid from '@extension/utils/isMnemonicValid';
 
 export default function validate(
+  label: string,
   phrases: string[],
   t: TFunction
 ): string | null {
@@ -13,12 +14,12 @@ export default function validate(
 
   if (phrases.every((value) => value.length <= 0)) {
     return t<string>('errors.inputs.requiredWithLabel', {
-      name: 'Mnemonic phrase',
+      name: label,
     });
   }
 
   if (!isMnemonicValid(phrases.join(' '))) {
-    return t<string>('errors.inputs.invalidMnemonic');
+    return t<string>('errors.inputs.invalidSeedPhrase');
   }
 
   return null;
diff --git a/src/extension/components/Select/Select.tsx b/src/extension/components/Select/Select.tsx
index 1a294d15..57cc0f27 100644
--- a/src/extension/components/Select/Select.tsx
+++ b/src/extension/components/Select/Select.tsx
@@ -10,7 +10,7 @@ import {
 } from '@chakra-ui/react';
 import React, { type FC, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { GoSingleSelect } from 'react-icons/go';
+import { IoChevronDownOutline } from 'react-icons/io5';
 
 // components
 import Label from '@extension/components/Label';
@@ -66,7 +66,7 @@ const Select: FC<IProps> = ({
   );
   const subTextColor = useSubTextColor();
   // misc
-  const iconSize = calculateIconSize('md');
+  const iconSize = calculateIconSize('sm');
   // handlers
   const handleOnClick = () => !disabled && onSelectModalOpen();
   const handleOnSelect = (index: number) => {
@@ -125,7 +125,7 @@ const Select: FC<IProps> = ({
             borderColor={borderColor}
             borderStyle="solid"
             borderWidth="1px"
-            borderRadius="md"
+            borderRadius="full"
             cursor={!disabled ? 'pointer' : 'not-allowed'}
             fontSize="md"
             h={INPUT_HEIGHT}
@@ -135,7 +135,7 @@ const Select: FC<IProps> = ({
             py={DEFAULT_GAP / 3}
             rightIcon={
               <Icon
-                as={GoSingleSelect}
+                as={IoChevronDownOutline}
                 boxSize={iconSize}
                 color={subTextColor}
               />
diff --git a/src/extension/components/Select/SelectModal.tsx b/src/extension/components/Select/SelectModal.tsx
index 54f9df9a..f26280a5 100644
--- a/src/extension/components/Select/SelectModal.tsx
+++ b/src/extension/components/Select/SelectModal.tsx
@@ -31,7 +31,6 @@ import {
 import useButtonHoverBackgroundColor from '@extension/hooks/useButtonHoverBackgroundColor';
 import useColorModeValue from '@extension/hooks/useColorModeValue';
 import useDefaultTextColor from '@extension/hooks/useDefaultTextColor';
-import usePrimaryButtonTextColor from '@extension/hooks/usePrimaryButtonTextColor';
 import useSubTextColor from '@extension/hooks/useSubTextColor';
 
 // theme
@@ -56,16 +55,11 @@ const SelectModal: FC<ISelectModalProps> = ({
   const { t } = useTranslation();
   // hooks
   const buttonHoverBackgroundColor = useButtonHoverBackgroundColor();
-  const primaryHoverBackgroundColor: string = useColorModeValue(
-    theme.colors.primaryDark['200'],
-    theme.colors.primaryDark['200']
-  );
-  const primaryBackgroundColor: string = useColorModeValue(
-    theme.colors.primaryDark['300'],
-    theme.colors.primaryDark['300']
-  );
   const defaultTextColor = useDefaultTextColor();
-  const primaryButtonTextColor = usePrimaryButtonTextColor();
+  const primaryButtonTextColor: string = useColorModeValue(
+    theme.colors.primaryLight['600'],
+    theme.colors.primaryDark['600']
+  );
   const subTextColor = useSubTextColor();
   // misc
   const iconSize = calculateIconSize('md');
@@ -95,17 +89,17 @@ const SelectModal: FC<ISelectModalProps> = ({
 
     return options.map((value, index) => {
       const isSelected = selectedIndex === index;
-      const textColor = isSelected ? primaryButtonTextColor : subTextColor;
+      const fontColor = isSelected ? primaryButtonTextColor : subTextColor;
 
       return (
         <ChakraButton
           _hover={{
-            bg: isSelected
-              ? primaryHoverBackgroundColor
-              : buttonHoverBackgroundColor,
+            bg: buttonHoverBackgroundColor,
           }}
-          backgroundColor={isSelected ? primaryBackgroundColor : 'transparent'}
-          borderRadius="md"
+          backgroundColor={
+            isSelected ? buttonHoverBackgroundColor : 'transparent'
+          }
+          borderRadius="full"
           fontSize="md"
           h={TAB_ITEM_HEIGHT}
           justifyContent="space-between"
@@ -113,12 +107,12 @@ const SelectModal: FC<ISelectModalProps> = ({
           onClick={handleOnChange(index)}
           p={DEFAULT_GAP / 3}
           rightIcon={
-            <Icon as={IoChevronForward} boxSize={iconSize} color={textColor} />
+            <Icon as={IoChevronForward} boxSize={iconSize} color={fontColor} />
           }
           variant="ghost"
           w="full"
         >
-          <SelectOption color={textColor} fontSize="md" value={value} />
+          <SelectOption color={fontColor} fontSize="md" value={value} />
         </ChakraButton>
       );
     });
@@ -157,8 +151,12 @@ const SelectModal: FC<ISelectModalProps> = ({
           </VStack>
         </ModalHeader>
 
-        {/*content*/}
-        <ModalBody px={DEFAULT_GAP}>{renderContent()}</ModalBody>
+        {/*body*/}
+        <ModalBody px={DEFAULT_GAP}>
+          <VStack spacing={1} w="full">
+            {renderContent()}
+          </VStack>
+        </ModalBody>
 
         {/*footer*/}
         <ModalFooter p={DEFAULT_GAP}>
diff --git a/src/extension/components/Select/SelectOption.tsx b/src/extension/components/Select/SelectOption.tsx
index 51c9cbee..15e7fac7 100644
--- a/src/extension/components/Select/SelectOption.tsx
+++ b/src/extension/components/Select/SelectOption.tsx
@@ -15,7 +15,7 @@ import calculateIconSize from '@extension/utils/calculateIconSize';
 
 const SelectOption: FC<ISelectOptionProps> = ({
   color,
-  fontSize = 'sm',
+  fontSize = 'md',
   value,
 }) => {
   // hooks
diff --git a/src/extension/components/Select/index.ts b/src/extension/components/Select/index.ts
index 1c40941d..9861706d 100644
--- a/src/extension/components/Select/index.ts
+++ b/src/extension/components/Select/index.ts
@@ -1,2 +1,4 @@
 export { default } from './Select';
+export { default as SelectModal } from './SelectModal';
+export { default as SelectOption } from './SelectOption';
 export * from './types';
diff --git a/src/extension/components/SettingsLinkItem/SettingsLinkItem.tsx b/src/extension/components/SettingsLinkItem/SettingsLinkItem.tsx
index 93953afe..da61260e 100644
--- a/src/extension/components/SettingsLinkItem/SettingsLinkItem.tsx
+++ b/src/extension/components/SettingsLinkItem/SettingsLinkItem.tsx
@@ -20,15 +20,10 @@ import { DEFAULT_GAP, SETTINGS_ITEM_HEIGHT } from '@extension/constants';
 import useButtonHoverBackgroundColor from '@extension/hooks/useButtonHoverBackgroundColor';
 import useDefaultTextColor from '@extension/hooks/useDefaultTextColor';
 
-// selectors
-import { useSelectSettingsColorMode } from '@extension/selectors';
-
 // types
 import type { IProps } from './types';
 
 const SettingsLinkItem: FC<IProps> = ({ badges, icon, label, to }) => {
-  // selectors
-  const colorMode = useSelectSettingsColorMode();
   // hooks
   const buttonHoverBackgroundColor = useButtonHoverBackgroundColor();
   const defaultTextColor = useDefaultTextColor();
@@ -82,7 +77,7 @@ const SettingsLinkItem: FC<IProps> = ({ badges, icon, label, to }) => {
                   colorScheme={colorScheme}
                   key={`settings-${labelHash.slice(0, 12)}-item-${index}`}
                   size="sm"
-                  variant={colorMode === 'dark' ? 'solid' : 'outline'}
+                  variant="solid"
                 >
                   <TagLabel>{label}</TagLabel>
                 </Tag>
diff --git a/src/extension/components/SettingsSelectItem/SettingsSelectItem.tsx b/src/extension/components/SettingsSelectItem/SettingsSelectItem.tsx
index c5f1b024..99ca924c 100644
--- a/src/extension/components/SettingsSelectItem/SettingsSelectItem.tsx
+++ b/src/extension/components/SettingsSelectItem/SettingsSelectItem.tsx
@@ -26,8 +26,8 @@ const SettingsSelectItem: FC<IProps> = ({
   value,
 }) => {
   // hooks
-  const defaultTextColor: string = useDefaultTextColor();
-  const subTextColor: string = useSubTextColor();
+  const defaultTextColor = useDefaultTextColor();
+  const subTextColor = useSubTextColor();
   // handlers
   const handleSelect = (option: IOption | null) => option && onChange(option);
 
diff --git a/src/extension/components/SettingsSessionItem/SettingsSessionItem.tsx b/src/extension/components/SettingsSessionItem/SettingsSessionItem.tsx
index 7abca655..de466bfe 100644
--- a/src/extension/components/SettingsSessionItem/SettingsSessionItem.tsx
+++ b/src/extension/components/SettingsSessionItem/SettingsSessionItem.tsx
@@ -29,7 +29,7 @@ const SettingsSessionItem: FC<IProps> = ({
   // hooks
   const defaultTextColor = useDefaultTextColor();
   const itemBorderColor = useItemBorderColor();
-  const subTextColor: string = useSubTextColor();
+  const subTextColor = useSubTextColor();
   // handlers
   const handleOnDisconnectClick = () => onDisconnect(item.id);
   const handleOnSelectClick = () => onSelect(item.id);
@@ -77,7 +77,7 @@ const SettingsSessionItem: FC<IProps> = ({
           </Tooltip>
 
           {/*network*/}
-          <NetworkBadge network={network} size="sm" />
+          <NetworkBadge network={network} size="xs" />
         </HStack>
 
         <HStack
@@ -123,7 +123,7 @@ const SettingsSessionItem: FC<IProps> = ({
           {
             icon: IoUnlinkOutline,
             label: t<string>('labels.disconnect'),
-            onSelect: handleOnSelectClick,
+            onSelect: handleOnDisconnectClick,
           },
         ]}
       />
diff --git a/src/extension/components/SideBar/SideBar.tsx b/src/extension/components/SideBar/SideBar.tsx
index 09a9961a..fcdeed85 100644
--- a/src/extension/components/SideBar/SideBar.tsx
+++ b/src/extension/components/SideBar/SideBar.tsx
@@ -44,7 +44,7 @@ import { AccountTabEnum } from '@extension/enums';
 // features
 import { saveActiveAccountDetails } from '@extension/features/accounts';
 import { setScanQRCodeModal } from '@extension/features/layout';
-import { initializeSendAsset } from '@extension/features/send-assets';
+import { initialize as initializeSendAssets } from '@extension/features/send-assets';
 
 // hooks
 import useBorderColor from '@extension/hooks/useBorderColor';
@@ -142,9 +142,9 @@ const SideBar: FC = () => {
     }
 
     dispatch(
-      initializeSendAsset({
-        fromAddress: convertPublicKeyToAVMAddress(fromAccount.publicKey),
-        selectedAsset: network.nativeCurrency, // use native currency
+      initializeSendAssets({
+        sender: fromAccount,
+        asset: network.nativeCurrency, // use native currency
       })
     );
   };
diff --git a/src/extension/components/TabControlBar/TabControlBar.tsx b/src/extension/components/TabControlBar/TabControlBar.tsx
new file mode 100644
index 00000000..ab032520
--- /dev/null
+++ b/src/extension/components/TabControlBar/TabControlBar.tsx
@@ -0,0 +1,77 @@
+import { HStack, IconButton, Spacer, Spinner, Tooltip } from '@chakra-ui/react';
+import React, { type FC } from 'react';
+
+// constants
+import { DEFAULT_GAP } from '@extension/constants';
+
+// hooks
+import useItemBorderColor from '@extension/hooks/useItemBorderColor';
+import usePrimaryColor from '@extension/hooks/usePrimaryColor';
+
+// types
+import type { IProps } from './types';
+
+const TabControlBar: FC<IProps> = ({
+  _context,
+  buttons,
+  isLoading = false,
+  loadingTooltipLabel,
+}) => {
+  // hooks
+  const itemBorderColor = useItemBorderColor();
+  const primaryColor = usePrimaryColor();
+  // renders
+  const renderLoader = () => {
+    const node = (
+      <Spinner thickness="1px" speed="0.65s" color={primaryColor} size="sm" />
+    );
+
+    if (!loadingTooltipLabel) {
+      return node;
+    }
+
+    return <Tooltip label={loadingTooltipLabel}>{node}</Tooltip>;
+  };
+
+  return (
+    <HStack
+      alignItems="center"
+      borderBottomColor={itemBorderColor}
+      borderBottomStyle="solid"
+      borderBottomWidth="1px"
+      justifyContent="flex-start"
+      px={DEFAULT_GAP / 2}
+      py={DEFAULT_GAP / 3}
+      spacing={1}
+      w="full"
+    >
+      {/*spinner*/}
+      {isLoading && renderLoader()}
+
+      <Spacer minH={DEFAULT_GAP + 2} />
+
+      {/*buttons*/}
+      {buttons.map((value, index) => {
+        const button = (
+          <IconButton
+            {...value.button}
+            key={`${_context}-tab-control-bar-button-${index}`}
+          />
+        );
+
+        return !value.tooltipLabel ? (
+          button
+        ) : (
+          <Tooltip
+            key={`${_context}-tab-control-bar-button-${index}`}
+            label={value.tooltipLabel}
+          >
+            {button}
+          </Tooltip>
+        );
+      })}
+    </HStack>
+  );
+};
+
+export default TabControlBar;
diff --git a/src/extension/components/TabControlBar/index.ts b/src/extension/components/TabControlBar/index.ts
new file mode 100644
index 00000000..d3a82521
--- /dev/null
+++ b/src/extension/components/TabControlBar/index.ts
@@ -0,0 +1,2 @@
+export { default } from './TabControlBar';
+export * from './types';
diff --git a/src/extension/components/TabControlBar/types/IProps.ts b/src/extension/components/TabControlBar/types/IProps.ts
new file mode 100644
index 00000000..bb8d1379
--- /dev/null
+++ b/src/extension/components/TabControlBar/types/IProps.ts
@@ -0,0 +1,11 @@
+// types
+import type { IPropsWithContext } from '@extension/types';
+import type ITabControlBarButtonProps from './ITabControlBarButtonProps';
+
+interface IProps extends IPropsWithContext {
+  buttons: ITabControlBarButtonProps[];
+  isLoading?: boolean;
+  loadingTooltipLabel?: string;
+}
+
+export default IProps;
diff --git a/src/extension/components/TabControlBar/types/ITabControlBarButtonProps.ts b/src/extension/components/TabControlBar/types/ITabControlBarButtonProps.ts
new file mode 100644
index 00000000..b396fb7d
--- /dev/null
+++ b/src/extension/components/TabControlBar/types/ITabControlBarButtonProps.ts
@@ -0,0 +1,8 @@
+import type { IconButtonProps } from '@chakra-ui/react';
+
+interface ITabControlBarButtonProps {
+  button: IconButtonProps;
+  tooltipLabel?: string;
+}
+
+export default ITabControlBarButtonProps;
diff --git a/src/extension/components/TabControlBar/types/index.ts b/src/extension/components/TabControlBar/types/index.ts
new file mode 100644
index 00000000..0c08e6a2
--- /dev/null
+++ b/src/extension/components/TabControlBar/types/index.ts
@@ -0,0 +1,2 @@
+export type { default as IProps } from './IProps';
+export type { default as ITabControlBarButtonProps } from './ITabControlBarButtonProps';
diff --git a/src/extension/components/WatchAccountBadge/WatchAccountBadge.tsx b/src/extension/components/WatchAccountBadge/WatchAccountBadge.tsx
index 56a2bc6c..f7c08800 100644
--- a/src/extension/components/WatchAccountBadge/WatchAccountBadge.tsx
+++ b/src/extension/components/WatchAccountBadge/WatchAccountBadge.tsx
@@ -3,24 +3,14 @@ import React, { FC } from 'react';
 import { useTranslation } from 'react-i18next';
 import { IoEyeOutline } from 'react-icons/io5';
 
-// selectors
-import { useSelectSettingsColorMode } from '@extension/selectors';
-
 // types
 import type { IProps } from './types';
 
 const WatchAccountBadge: FC<IProps> = ({ size = 'sm', tooltipLabel }) => {
   const { t } = useTranslation();
-  // selectors
-  const colorMode = useSelectSettingsColorMode();
   // misc
   const tag = (
-    <Tag
-      borderRadius="full"
-      colorScheme="blue"
-      size={size}
-      variant={colorMode === 'dark' ? 'solid' : 'outline'}
-    >
+    <Tag borderRadius="full" colorScheme="blue" size={size} variant="solid">
       <TagLeftIcon as={IoEyeOutline} />
       <TagLabel>{t('labels.watch')}</TagLabel>
     </Tag>
diff --git a/src/extension/constants/Dimensions.ts b/src/extension/constants/Dimensions.ts
index 17dc8b61..d988babc 100644
--- a/src/extension/constants/Dimensions.ts
+++ b/src/extension/constants/Dimensions.ts
@@ -1,4 +1,5 @@
 export const ACCOUNT_PAGE_HEADER_ITEM_HEIGHT = 10; // 2.5rem - 40px
+export const ACCOUNT_PAGE_TAB_CONTENT_HEIGHT = '60dvh';
 export const ACCOUNT_SELECT_ITEM_MINIMUM_HEIGHT = 60; // px
 export const DEFAULT_GAP = 6;
 export const DEFAULT_POPUP_HEIGHT = 750;
diff --git a/src/extension/constants/Durations.ts b/src/extension/constants/Durations.ts
index c1c63b25..1fe94782 100644
--- a/src/extension/constants/Durations.ts
+++ b/src/extension/constants/Durations.ts
@@ -1,5 +1,11 @@
 export const ACCOUNT_INFORMATION_REFRESH_INTERVAL = 54000; // 54 seconds in milliseconds
 export const ACCOUNT_INFORMATION_ANTIQUATED_TIMEOUT = 28000; // 28 seconds in milliseconds
+export const CREDENTIALS_LOCK_DURATION_LOWEST = 60000; // 1 minute in milliseconds
+export const CREDENTIALS_LOCK_DURATION_LOW = 120000; // 2 minutes in milliseconds
+export const CREDENTIALS_LOCK_DURATION_NORMAL = 300000; // 5 minutes in milliseconds
+export const CREDENTIALS_LOCK_DURATION_HIGH = 600000; // 10 minutes in milliseconds
+export const CREDENTIALS_LOCK_DURATION_HIGHER = 900000; // 15 minutes in milliseconds
+export const CREDENTIALS_LOCK_DURATION_HIGHEST = 1800000; // 30 minutes in milliseconds
 export const DEFAULT_NOTIFICATION_DURATION = 6000; // 6 seconds in milliseconds
 export const EXPORT_ACCOUNT_QR_CODE_DURATION = 1500; // 1.5 seconds in milliseconds
 export const HEARTBEAT_DURATION = 20000; // 20 seconds in milliseconds
@@ -7,10 +13,4 @@ export const NETWORK_TRANSACTION_PARAMS_REFRESH_INTERVAL = 1800000; // 30 minute
 export const NETWORK_TRANSACTION_PARAMS_ANTIQUATED_TIMEOUT = 900000; // 15 minutes in milliseconds
 export const NETWORK_CONNECTIVITY_CHECK_INTERVAL = 36000; // 36 seconds in milliseconds
 export const NODE_REQUEST_DELAY = 100; // in milliseconds
-export const PASSWORD_LOCK_DURATION_LOWEST = 60000; // 1 minute in milliseconds
-export const PASSWORD_LOCK_DURATION_LOW = 120000; // 2 minutes in milliseconds
-export const PASSWORD_LOCK_DURATION_NORMAL = 300000; // 5 minutes in milliseconds
-export const PASSWORD_LOCK_DURATION_HIGH = 600000; // 10 minutes in milliseconds
-export const PASSWORD_LOCK_DURATION_HIGHER = 900000; // 15 minutes in milliseconds
-export const PASSWORD_LOCK_DURATION_HIGHEST = 1800000; // 30 minutes in milliseconds
 export const QR_CODE_SCAN_INTERVAL = 3000; // 3 seconds in milliseconds
diff --git a/src/extension/features/accounts/thunks/updateAccountsThunk.ts b/src/extension/features/accounts/thunks/updateAccountsThunk.ts
index b2dfc3d6..3943b789 100644
--- a/src/extension/features/accounts/thunks/updateAccountsThunk.ts
+++ b/src/extension/features/accounts/thunks/updateAccountsThunk.ts
@@ -61,7 +61,6 @@ const updateAccountsThunk: AsyncThunk<
     let accounts = getState().accounts.items.map((value) =>
       mapAccountWithExtendedPropsToAccount(value)
     );
-    let address: string;
     let encodedGenesisHash: string;
     let network: INetwork | null;
     let nodeID: string | null;
diff --git a/src/extension/features/registration/slice.ts b/src/extension/features/registration/slice.ts
index 452682e4..7a3f3e4c 100644
--- a/src/extension/features/registration/slice.ts
+++ b/src/extension/features/registration/slice.ts
@@ -7,7 +7,7 @@ import { StoreNameEnum } from '@extension/enums';
 import { saveCredentialsThunk } from './thunks';
 
 // types
-import type { ISetPasswordPayload, IState } from './types';
+import type { IState } from './types';
 
 // utils
 import { getInitialState } from './utils';
@@ -20,7 +20,6 @@ const slice = createSlice({
 
       state.password = initialState.password;
       state.saving = initialState.saving;
-      state.score = initialState.score;
     });
     builder.addCase(saveCredentialsThunk.pending, (state: IState) => {
       state.saving = true;
@@ -39,7 +38,6 @@ const slice = createSlice({
         initialState.importAccountViaQRCodeModalOpen;
       state.password = initialState.password;
       state.saving = initialState.saving;
-      state.score = initialState.score;
     },
     setImportAccountViaQRCodeOpen: (
       state: Draft<IState>,
@@ -47,19 +45,14 @@ const slice = createSlice({
     ) => {
       state.importAccountViaQRCodeModalOpen = action.payload;
     },
-    setPassword: (
-      state: Draft<IState>,
-      action: PayloadAction<ISetPasswordPayload>
-    ) => {
-      if (action.payload.password.length <= 0) {
+    setPassword: (state: Draft<IState>, action: PayloadAction<string>) => {
+      if (action.payload.length <= 0) {
         state.password = null;
-        state.score = -1;
 
         return;
       }
 
-      state.password = action.payload.password;
-      state.score = action.payload.score;
+      state.password = action.payload;
     },
   },
 });
diff --git a/src/extension/features/registration/types/ISetPasswordPayload.ts b/src/extension/features/registration/types/ISetPasswordPayload.ts
deleted file mode 100644
index 421602c3..00000000
--- a/src/extension/features/registration/types/ISetPasswordPayload.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-interface ISetPasswordPayload {
-  password: string;
-  score: number;
-}
-
-export default ISetPasswordPayload;
diff --git a/src/extension/features/registration/types/IState.ts b/src/extension/features/registration/types/IState.ts
index 0cd80fe7..6dc958fa 100644
--- a/src/extension/features/registration/types/IState.ts
+++ b/src/extension/features/registration/types/IState.ts
@@ -2,13 +2,11 @@
  * @property {boolean} importAccountViaQRCodeModalOpen - toggles the state of the import account via QR code modal.
  * @property {string | null} password - the password to use to secure accounts.
  * @property {saving} saving - whether the credentials are being saved or not.
- * @property {number} score - the score of the password.
  */
 interface IState {
   importAccountViaQRCodeModalOpen: boolean;
   password: string | null;
   saving: boolean;
-  score: number;
 }
 
 export default IState;
diff --git a/src/extension/features/registration/types/index.ts b/src/extension/features/registration/types/index.ts
index 183a5150..bf812279 100644
--- a/src/extension/features/registration/types/index.ts
+++ b/src/extension/features/registration/types/index.ts
@@ -1,2 +1 @@
-export type { default as ISetPasswordPayload } from './ISetPasswordPayload';
 export type { default as IState } from './IState';
diff --git a/src/extension/features/registration/utils/getInitialState.ts b/src/extension/features/registration/utils/getInitialState.ts
index fd7627e2..2ca97dcd 100644
--- a/src/extension/features/registration/utils/getInitialState.ts
+++ b/src/extension/features/registration/utils/getInitialState.ts
@@ -6,6 +6,5 @@ export default function getInitialState(): IState {
     importAccountViaQRCodeModalOpen: false,
     password: null,
     saving: false,
-    score: -1,
   };
 }
diff --git a/src/extension/features/send-assets/slice.ts b/src/extension/features/send-assets/slice.ts
index 44e89da7..8e60a669 100644
--- a/src/extension/features/send-assets/slice.ts
+++ b/src/extension/features/send-assets/slice.ts
@@ -10,8 +10,12 @@ import {
 } from './thunks';
 
 // types
-import type { IAssetTypes, INativeCurrency } from '@extension/types';
-import type { IInitializeSendAssetPayload, IState } from './types';
+import type {
+  IAccountWithExtendedProps,
+  IAssetTypes,
+  INativeCurrency,
+} from '@extension/types';
+import type { IInitializePayload, IState } from './types';
 
 // utils
 import { getInitialState } from './utils';
@@ -51,53 +55,33 @@ const slice = createSlice({
   initialState: getInitialState(),
   name: StoreNameEnum.SendAssets,
   reducers: {
-    initializeSendAsset: (
+    initialize: (
       state: Draft<IState>,
-      action: PayloadAction<IInitializeSendAssetPayload>
+      action: PayloadAction<IInitializePayload>
     ) => {
-      state.fromAddress = action.payload.fromAddress;
-      state.selectedAsset = action.payload.selectedAsset;
+      state.asset = action.payload.asset;
+      state.sender = action.payload.sender;
     },
     reset: (state: Draft<IState>) => {
-      state.amountInStandardUnits = '0';
+      state.asset = null;
       state.confirming = false;
       state.creating = false;
-      state.fromAddress = null;
-      state.note = null;
-      state.selectedAsset = null;
-      state.toAddress = null;
+      state.sender = null;
     },
-    setAmount: (state: Draft<IState>, action: PayloadAction<string>) => {
-      state.amountInStandardUnits = action.payload;
-    },
-    setFromAddress: (state: Draft<IState>, action: PayloadAction<string>) => {
-      state.fromAddress = action.payload;
-    },
-    setNote: (state: Draft<IState>, action: PayloadAction<string | null>) => {
-      state.note = action.payload;
-    },
-    setSelectedAsset: (
+    setAsset: (
       state: Draft<IState>,
-      action: PayloadAction<IAssetTypes | INativeCurrency>
+      action: PayloadAction<IAssetTypes | INativeCurrency | null>
     ) => {
-      state.selectedAsset = action.payload;
+      state.asset = action.payload;
     },
-    setToAddress: (
+    setSender: (
       state: Draft<IState>,
-      action: PayloadAction<string | null>
+      action: PayloadAction<IAccountWithExtendedProps | null>
     ) => {
-      state.toAddress = action.payload;
+      state.sender = action.payload;
     },
   },
 });
 
 export const reducer: Reducer = slice.reducer;
-export const {
-  initializeSendAsset,
-  reset,
-  setAmount,
-  setFromAddress,
-  setNote,
-  setSelectedAsset,
-  setToAddress,
-} = slice.actions;
+export const { initialize, reset, setAsset, setSender } = slice.actions;
diff --git a/src/extension/features/send-assets/thunks/createUnsignedTransactionsThunk.ts b/src/extension/features/send-assets/thunks/createUnsignedTransactionsThunk.ts
index 72fd2205..c98d0b34 100644
--- a/src/extension/features/send-assets/thunks/createUnsignedTransactionsThunk.ts
+++ b/src/extension/features/send-assets/thunks/createUnsignedTransactionsThunk.ts
@@ -18,55 +18,50 @@ import AccountService from '@extension/services/AccountService';
 
 // types
 import type {
-  IAccount,
   IAccountInformation,
   IAsyncThunkConfigWithRejectValue,
   IMainRootState,
+  INetworkWithTransactionParams,
 } from '@extension/types';
+import type { ICreateUnsignedTransactionsPayload } from '../types';
 
 // utils
 import convertToAtomicUnit from '@common/utils/convertToAtomicUnit';
-import convertPublicKeyToAVMAddress from '@extension/utils/convertPublicKeyToAVMAddress';
 import createUnsignedARC0200TransferTransactions from '@extension/utils/createUnsignedARC0200TransferTransactions';
 import createUnsignedPaymentTransactions from '@extension/utils/createUnsignedPaymentTransactions';
 import createUnsignedStandardAssetTransferTransactions from '@extension/utils/createUnsignedStandardAssetTransferTransactions';
 import selectNetworkFromSettings from '@extension/utils/selectNetworkFromSettings';
 import selectNodeIDByGenesisHashFromSettings from '@extension/utils/selectNodeIDByGenesisHashFromSettings';
+import convertPublicKeyToAVMAddress from '@extension/utils/convertPublicKeyToAVMAddress';
 
 const createUnsignedTransactionsThunk: AsyncThunk<
   Transaction[], // return
-  undefined, // args
+  ICreateUnsignedTransactionsPayload, // args
   IAsyncThunkConfigWithRejectValue<IMainRootState>
 > = createAsyncThunk<
   Transaction[],
-  undefined,
+  ICreateUnsignedTransactionsPayload,
   IAsyncThunkConfigWithRejectValue<IMainRootState>
 >(
   SendAssetsThunkEnum.CreateUnsignedTransactions,
-  async (_, { getState, rejectWithValue }) => {
-    const amountInStandardUnits =
-      getState().sendAssets.amountInStandardUnits.length > 0
-        ? getState().sendAssets.amountInStandardUnits
-        : '0';
-    const asset = getState().sendAssets.selectedAsset;
-    const fromAddress = getState().sendAssets.fromAddress;
+  async (
+    { amountInStandardUnits, note, receiverAddress },
+    { getState, rejectWithValue }
+  ) => {
+    const asset = getState().sendAssets.asset;
     const logger = getState().system.logger;
     const networks = getState().networks.items;
     const online = getState().system.networkConnectivity.online;
+    const sender = getState().sendAssets.sender;
     const settings = getState().settings;
-    const network = selectNetworkFromSettings({
-      networks,
-      settings,
-    });
-    const note = getState().sendAssets.note;
-    const toAddress = getState().sendAssets.toAddress;
     let _error: string;
     let amountInAtomicUnits: string;
-    let fromAccountInformation: IAccountInformation | null;
-    let fromAccount: IAccount | null;
+    let network: INetworkWithTransactionParams | null;
     let nodeID: string | null;
+    let senderAccountInformation: IAccountInformation | null;
+    let senderAddress: string;
 
-    if (!asset || !fromAddress || !toAddress) {
+    if (!asset || !sender) {
       _error = 'required fields not completed';
 
       logger.debug(
@@ -76,21 +71,6 @@ const createUnsignedTransactionsThunk: AsyncThunk<
       return rejectWithValue(new MalformedDataError(_error));
     }
 
-    fromAccount =
-      getState().accounts.items.find(
-        (value) => convertPublicKeyToAVMAddress(value.publicKey) === fromAddress
-      ) || null;
-
-    if (!fromAccount) {
-      _error = `no account found for "${fromAddress}"`;
-
-      logger.debug(
-        `${SendAssetsThunkEnum.CreateUnsignedTransactions}: ${_error}`
-      );
-
-      return rejectWithValue(new MalformedDataError(_error));
-    }
-
     if (!online) {
       logger.debug(
         `${SendAssetsThunkEnum.CreateUnsignedTransactions}: extension offline`
@@ -101,6 +81,11 @@ const createUnsignedTransactionsThunk: AsyncThunk<
       );
     }
 
+    network = selectNetworkFromSettings({
+      networks,
+      settings,
+    });
+
     if (!network) {
       logger.debug(
         `${SendAssetsThunkEnum.CreateUnsignedTransactions}: no network selected`
@@ -113,13 +98,12 @@ const createUnsignedTransactionsThunk: AsyncThunk<
       );
     }
 
-    fromAccountInformation = AccountService.extractAccountInformationForNetwork(
-      fromAccount,
-      network
-    );
+    senderAccountInformation =
+      AccountService.extractAccountInformationForNetwork(sender, network);
+    senderAddress = convertPublicKeyToAVMAddress(sender.publicKey);
 
-    if (!fromAccountInformation) {
-      _error = `no account information found for "${fromAddress}" on network "${network.genesisId}"`;
+    if (!senderAccountInformation) {
+      _error = `no account information found for "${senderAddress}" on network "${network.genesisId}"`;
 
       logger.debug(
         `${SendAssetsThunkEnum.CreateUnsignedTransactions}: ${_error}`
@@ -144,34 +128,34 @@ const createUnsignedTransactionsThunk: AsyncThunk<
           return await createUnsignedARC0200TransferTransactions({
             amountInAtomicUnits,
             asset,
-            authAddress: fromAccountInformation.authAddress,
-            fromAddress,
+            authAddress: senderAccountInformation.authAddress,
+            fromAddress: senderAddress,
             logger,
             network,
             nodeID,
-            note,
-            toAddress,
+            note: note || null,
+            toAddress: receiverAddress,
           });
         case AssetTypeEnum.Standard:
           return await createUnsignedStandardAssetTransferTransactions({
             amountInAtomicUnits,
             asset,
-            fromAddress,
+            fromAddress: senderAddress,
             logger,
             network,
             nodeID,
-            note,
-            toAddress,
+            note: note || null,
+            toAddress: receiverAddress,
           });
         case AssetTypeEnum.Native:
           return await createUnsignedPaymentTransactions({
             amountInAtomicUnits,
-            fromAddress,
+            fromAddress: senderAddress,
             logger,
             network,
             nodeID,
-            note,
-            toAddress,
+            note: note || null,
+            toAddress: receiverAddress,
           });
         default:
           throw new Error('unknown asset');
diff --git a/src/extension/features/send-assets/thunks/submitTransactionThunk.ts b/src/extension/features/send-assets/thunks/submitTransactionThunk.ts
index 9c53cf6f..9522534e 100644
--- a/src/extension/features/send-assets/thunks/submitTransactionThunk.ts
+++ b/src/extension/features/send-assets/thunks/submitTransactionThunk.ts
@@ -1,4 +1,4 @@
-import { AsyncThunk, createAsyncThunk } from '@reduxjs/toolkit';
+import { type AsyncThunk, createAsyncThunk } from '@reduxjs/toolkit';
 
 // enums
 import { SendAssetsThunkEnum } from '@extension/enums';
@@ -18,7 +18,6 @@ import NetworkClient from '@extension/models/NetworkClient';
 
 // types
 import type {
-  IAccount,
   IAsyncThunkConfigWithRejectValue,
   IMainRootState,
   INetworkWithTransactionParams,
@@ -48,34 +47,21 @@ const submitTransactionThunk: AsyncThunk<
     { getState, rejectWithValue }
   ) => {
     const accounts = getState().accounts.items;
-    const fromAddress = getState().sendAssets.fromAddress;
     const logger = getState().system.logger;
     const genesisHash =
       uniqueGenesisHashesFromTransactions(transactions).pop() || null;
     const networks = getState().networks.items;
     const online = getState().system.networkConnectivity.online;
+    const sender = getState().sendAssets.sender;
     const settings = getState().settings;
     let _error: string;
-    let fromAccount: IAccount | null;
     let network: INetworkWithTransactionParams | null;
     let networkClient: NetworkClient;
+    let senderAddress: string;
     let signedTransactions: Uint8Array[];
 
-    if (!fromAddress) {
-      _error = `fromAddress field missing`;
-
-      logger.debug(`${SendAssetsThunkEnum.SubmitTransaction}: ${_error}`);
-
-      return rejectWithValue(new MalformedDataError(_error));
-    }
-
-    fromAccount =
-      accounts.find(
-        (value) => convertPublicKeyToAVMAddress(value.publicKey) === fromAddress
-      ) || null;
-
-    if (!fromAccount) {
-      _error = `from address "${fromAddress}" not a known account`;
+    if (!sender) {
+      _error = `sender not assigned`;
 
       logger.debug(`${SendAssetsThunkEnum.SubmitTransaction}: ${_error}`);
 
@@ -115,9 +101,11 @@ const submitTransactionThunk: AsyncThunk<
       return rejectWithValue(new NetworkNotSelectedError(_error));
     }
 
+    senderAddress = convertPublicKeyToAVMAddress(sender.publicKey);
+
     // check if we actually have the account
-    if (!isAccountKnown(accounts, fromAddress)) {
-      _error = `no account data found for "${fromAddress}" in wallet`;
+    if (!isAccountKnown(accounts, senderAddress)) {
+      _error = `no account data found for "${senderAddress}" in wallet`;
 
       logger.debug(`${SendAssetsThunkEnum.SubmitTransaction}: ${_error}`);
 
@@ -127,13 +115,13 @@ const submitTransactionThunk: AsyncThunk<
     // ensure the transaction does not fall below the minimum balance requirement
     if (
       doesAccountFallBelowMinimumBalanceRequirementForTransactions({
-        account: fromAccount,
+        account: sender,
         logger,
         network,
         transactions,
       })
     ) {
-      _error = `total transaction cost will bring the account "${fromAddress}" balance below the minimum balance requirement`;
+      _error = `total transaction cost will bring the account "${senderAddress}" balance below the minimum balance requirement`;
 
       logger.debug(`${SendAssetsThunkEnum.SubmitTransaction}: ${_error}`);
 
diff --git a/src/extension/features/send-assets/types/ICreateUnsignedTransactionsPayload.ts b/src/extension/features/send-assets/types/ICreateUnsignedTransactionsPayload.ts
new file mode 100644
index 00000000..7afaa234
--- /dev/null
+++ b/src/extension/features/send-assets/types/ICreateUnsignedTransactionsPayload.ts
@@ -0,0 +1,7 @@
+interface ICreateUnsignedTransactionsPayload {
+  amountInStandardUnits: string;
+  note?: string;
+  receiverAddress: string;
+}
+
+export default ICreateUnsignedTransactionsPayload;
diff --git a/src/extension/features/send-assets/types/IInitializePayload.ts b/src/extension/features/send-assets/types/IInitializePayload.ts
new file mode 100644
index 00000000..db77f37d
--- /dev/null
+++ b/src/extension/features/send-assets/types/IInitializePayload.ts
@@ -0,0 +1,13 @@
+// types
+import type {
+  IAccountWithExtendedProps,
+  IAssetTypes,
+  INativeCurrency,
+} from '@extension/types';
+
+interface IInitializePayload {
+  sender: IAccountWithExtendedProps;
+  asset: IAssetTypes | INativeCurrency;
+}
+
+export default IInitializePayload;
diff --git a/src/extension/features/send-assets/types/IInitializeSendAssetPayload.ts b/src/extension/features/send-assets/types/IInitializeSendAssetPayload.ts
deleted file mode 100644
index 68dc9c1f..00000000
--- a/src/extension/features/send-assets/types/IInitializeSendAssetPayload.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import { IAssetTypes, INativeCurrency } from '@extension/types';
-
-interface IInitializeSendAssetPayload {
-  fromAddress: string | null;
-  selectedAsset: IAssetTypes | INativeCurrency;
-}
-
-export default IInitializeSendAssetPayload;
diff --git a/src/extension/features/send-assets/types/IState.ts b/src/extension/features/send-assets/types/IState.ts
index 5a38f013..66ff15f9 100644
--- a/src/extension/features/send-assets/types/IState.ts
+++ b/src/extension/features/send-assets/types/IState.ts
@@ -1,23 +1,21 @@
 // types
-import type { IAssetTypes, INativeCurrency } from '@extension/types';
+import type {
+  IAccountWithExtendedProps,
+  IAssetTypes,
+  INativeCurrency,
+} from '@extension/types';
 
 /**
- * @property {string} amountInStandardUnits - the amount, in standard units, to send. Defaults to "0".
+ * @property {IAssetTypes | INativeCurrency | null} asset - the asset that is being sent.
  * @property {boolean} confirming - confirming the transaction to the network.
  * @property {boolean} creating - true, when building the transactions.
- * @property {string | null} fromAddress - the address to send from.
- * @property {string | null} note - the note to send.
- * @property {IAssetTypes | INativeCurrency | null} selectedAsset - the selected asset to send.
- * @property {string | null} toAddress - the address to send to.
+ * @property {IAccountWithExtendedProps | null} sender - the account where this is eing sent from.
  */
 interface IState {
-  amountInStandardUnits: string;
+  asset: IAssetTypes | INativeCurrency | null;
   confirming: boolean;
   creating: boolean;
-  fromAddress: string | null;
-  note: string | null;
-  selectedAsset: IAssetTypes | INativeCurrency | null;
-  toAddress: string | null;
+  sender: IAccountWithExtendedProps | null;
 }
 
 export default IState;
diff --git a/src/extension/features/send-assets/types/index.ts b/src/extension/features/send-assets/types/index.ts
index c3934d8c..6772f0ed 100644
--- a/src/extension/features/send-assets/types/index.ts
+++ b/src/extension/features/send-assets/types/index.ts
@@ -1,3 +1,4 @@
-export type { default as IInitializeSendAssetPayload } from './IInitializeSendAssetPayload';
+export type { default as ICreateUnsignedTransactionsPayload } from './ICreateUnsignedTransactionsPayload';
+export type { default as IInitializePayload } from './IInitializePayload';
 export type { default as IState } from './IState';
 export type { default as TSubmitTransactionsThunkPayload } from './TSubmitTransactionsThunkPayload';
diff --git a/src/extension/features/send-assets/utils/getInitialState.ts b/src/extension/features/send-assets/utils/getInitialState.ts
index cc6690cd..30007ac8 100644
--- a/src/extension/features/send-assets/utils/getInitialState.ts
+++ b/src/extension/features/send-assets/utils/getInitialState.ts
@@ -3,12 +3,9 @@ import type { IState } from '../types';
 
 export default function getInitialState(): IState {
   return {
-    amountInStandardUnits: '0',
+    asset: null,
     confirming: false,
     creating: false,
-    fromAddress: null,
-    note: null,
-    selectedAsset: null,
-    toAddress: null,
+    sender: null,
   };
 }
diff --git a/src/extension/features/settings/utils/getInitialState.ts b/src/extension/features/settings/utils/getInitialState.ts
index b4f36272..77bef3dd 100644
--- a/src/extension/features/settings/utils/getInitialState.ts
+++ b/src/extension/features/settings/utils/getInitialState.ts
@@ -1,5 +1,5 @@
 // constants
-import { PASSWORD_LOCK_DURATION_NORMAL } from '@extension/constants';
+import { CREDENTIALS_LOCK_DURATION_NORMAL } from '@extension/constants';
 
 // types
 import type { IState } from '../types';
@@ -27,7 +27,7 @@ export default function getInitialState(): IState {
     },
     saving: false,
     security: {
-      credentialLockTimeoutDuration: PASSWORD_LOCK_DURATION_NORMAL,
+      credentialLockTimeoutDuration: CREDENTIALS_LOCK_DURATION_NORMAL,
       enableCredentialLock: false,
     },
   };
diff --git a/src/extension/hooks/useAddressInput/index.ts b/src/extension/hooks/useAddressInput/index.ts
new file mode 100644
index 00000000..e84b1d0b
--- /dev/null
+++ b/src/extension/hooks/useAddressInput/index.ts
@@ -0,0 +1,2 @@
+export { default } from './useAddressInput';
+export * from './types';
diff --git a/src/extension/hooks/useAddressInput/types/IOptions.ts b/src/extension/hooks/useAddressInput/types/IOptions.ts
new file mode 100644
index 00000000..cc4814c1
--- /dev/null
+++ b/src/extension/hooks/useAddressInput/types/IOptions.ts
@@ -0,0 +1,8 @@
+interface IOptions {
+  defaultValue?: string;
+  label: string;
+  required?: boolean;
+  validate?: (value: string) => string | null;
+}
+
+export default IOptions;
diff --git a/src/extension/hooks/useAddressInput/types/IState.ts b/src/extension/hooks/useAddressInput/types/IState.ts
new file mode 100644
index 00000000..f270aca8
--- /dev/null
+++ b/src/extension/hooks/useAddressInput/types/IState.ts
@@ -0,0 +1,17 @@
+import type { ChangeEvent, FocusEvent } from 'react';
+
+interface IState {
+  error: string | null;
+  label: string;
+  onBlur: (event: FocusEvent<HTMLInputElement>) => void;
+  onChange: (event: ChangeEvent<HTMLInputElement>) => void;
+  onSelect: (value: string) => void;
+  required?: boolean;
+  reset: () => void;
+  setError: (value: string | null) => void;
+  setValue: (value: string) => void;
+  validate: (value: string) => string | null;
+  value: string;
+}
+
+export default IState;
diff --git a/src/extension/hooks/useAddressInput/types/index.ts b/src/extension/hooks/useAddressInput/types/index.ts
new file mode 100644
index 00000000..d5d5d702
--- /dev/null
+++ b/src/extension/hooks/useAddressInput/types/index.ts
@@ -0,0 +1,2 @@
+export type { default as IOptions } from './IOptions';
+export type { default as IState } from './IState';
diff --git a/src/extension/hooks/useAddressInput/useAddressInput.ts b/src/extension/hooks/useAddressInput/useAddressInput.ts
new file mode 100644
index 00000000..cee7bfea
--- /dev/null
+++ b/src/extension/hooks/useAddressInput/useAddressInput.ts
@@ -0,0 +1,63 @@
+import { type ChangeEvent, type FocusEvent, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+// types
+import type { IOptions, IState } from './types';
+
+// utils
+import validateAddressInput from '@extension/utils/validateAddressInput';
+
+export default function useAddressInput({
+  defaultValue,
+  label,
+  required,
+  validate,
+}: IOptions): IState {
+  const { t } = useTranslation();
+  // state
+  const [error, setError] = useState<string | null>(null);
+  const [value, setValue] = useState<string>(defaultValue || '');
+  // actions
+  const _onBlur = (event: FocusEvent<HTMLInputElement>) => {
+    setError(_validate(event.target.value));
+  };
+  const _onChange = (event: ChangeEvent<HTMLInputElement>) => {
+    setError(_validate(event.target.value));
+    setValue(event.target.value);
+  };
+  const _onSelect = (_value: string) => {
+    setError(_validate(_value));
+    setValue(_value);
+  };
+  const _validate = (_value: string) => {
+    const _error = validateAddressInput({
+      field: label,
+      t,
+      required,
+      value: _value,
+      validate,
+    });
+
+    setError(_error);
+
+    return _error;
+  };
+  const reset = () => {
+    setError(null);
+    setValue(defaultValue || '');
+  };
+
+  return {
+    error,
+    label,
+    onBlur: _onBlur,
+    onChange: _onChange,
+    onSelect: _onSelect,
+    reset,
+    required,
+    setError,
+    setValue,
+    validate: _validate,
+    value,
+  };
+}
diff --git a/src/extension/hooks/useAmountInput/index.ts b/src/extension/hooks/useAmountInput/index.ts
new file mode 100644
index 00000000..746cfc46
--- /dev/null
+++ b/src/extension/hooks/useAmountInput/index.ts
@@ -0,0 +1,2 @@
+export { default } from './useAmountInput';
+export * from './types';
diff --git a/src/extension/hooks/useAmountInput/types/IOptions.ts b/src/extension/hooks/useAmountInput/types/IOptions.ts
new file mode 100644
index 00000000..e57218a5
--- /dev/null
+++ b/src/extension/hooks/useAmountInput/types/IOptions.ts
@@ -0,0 +1,6 @@
+interface IOptions {
+  label?: string;
+  required?: boolean;
+}
+
+export default IOptions;
diff --git a/src/extension/hooks/useAmountInput/types/IState.ts b/src/extension/hooks/useAmountInput/types/IState.ts
new file mode 100644
index 00000000..b97d4a9d
--- /dev/null
+++ b/src/extension/hooks/useAmountInput/types/IState.ts
@@ -0,0 +1,20 @@
+import type { FocusEvent } from 'react';
+
+// types
+import type { IOnEventOptions } from '@extension/components/AmountInput';
+
+interface IState {
+  label?: string;
+  onBlur: (
+    options: IOnEventOptions
+  ) => (event: FocusEvent<HTMLInputElement>) => void;
+  onChange: (valueAsString: string, valueAsNumber: number) => void;
+  onFocus: (event: FocusEvent<HTMLInputElement>) => void;
+  onMaximumAmountClick: (options: IOnEventOptions) => void;
+  required?: boolean;
+  reset: () => void;
+  setValue: (value: string) => void;
+  value: string;
+}
+
+export default IState;
diff --git a/src/extension/hooks/useAmountInput/types/index.ts b/src/extension/hooks/useAmountInput/types/index.ts
new file mode 100644
index 00000000..d5d5d702
--- /dev/null
+++ b/src/extension/hooks/useAmountInput/types/index.ts
@@ -0,0 +1,2 @@
+export type { default as IOptions } from './IOptions';
+export type { default as IState } from './IState';
diff --git a/src/extension/hooks/useAmountInput/useAmountInput.ts b/src/extension/hooks/useAmountInput/useAmountInput.ts
new file mode 100644
index 00000000..c8f9cee9
--- /dev/null
+++ b/src/extension/hooks/useAmountInput/useAmountInput.ts
@@ -0,0 +1,88 @@
+import BigNumber from 'bignumber.js';
+import numbro from 'numbro';
+import { type FocusEvent, useState } from 'react';
+
+// types
+import type { IOnEventOptions } from '@extension/components/AmountInput';
+import type { IOptions, IState } from './types';
+
+// utils
+import convertToStandardUnit from '@common/utils/convertToStandardUnit';
+
+export default function useAmountInput({ label, required }: IOptions): IState {
+  // state
+  const [value, setValue] = useState<string>('0');
+  // actions
+  const _onBlur =
+    ({ asset, maximumAmountInAtomicUnits }: IOnEventOptions) =>
+    (event: FocusEvent<HTMLInputElement>) => {
+      let _value: BigNumber;
+      let maximumAmountInStandardUnits: BigNumber;
+
+      if (!asset || !maximumAmountInAtomicUnits) {
+        setValue('0');
+
+        return;
+      }
+
+      _value = new BigNumber(
+        event.target.value.length > 0 ? event.target.value : '0'
+      );
+      maximumAmountInStandardUnits = convertToStandardUnit(
+        new BigNumber(maximumAmountInAtomicUnits),
+        asset.decimals
+      );
+
+      // if the entered value is greater than the maximum allowed, use the max
+      if (_value.gt(maximumAmountInStandardUnits)) {
+        setValue(_value.toString());
+
+        return;
+      }
+
+      // format the number to use an absolute value (no negatives), the maximum decimals for the asset and trim any zeroes
+      setValue(
+        numbro(_value.absoluteValue().toString()).format({
+          mantissa: asset.decimals,
+          trimMantissa: true,
+        })
+      );
+    };
+  const _onChange = (valueAsString: string) => setValue(valueAsString);
+  const _onFocus = (event: FocusEvent<HTMLInputElement>) => {
+    // remove the padded zero
+    if (event.target.value === '0') {
+      setValue('');
+    }
+  };
+  const _onMaximumAmountClick = ({
+    asset,
+    maximumAmountInAtomicUnits,
+  }: IOnEventOptions) => {
+    if (!asset || !maximumAmountInAtomicUnits) {
+      return;
+    }
+
+    setValue(
+      convertToStandardUnit(
+        new BigNumber(maximumAmountInAtomicUnits),
+        asset.decimals
+      ).toString()
+    );
+  };
+  const reset = () => {
+    setValue('0');
+  };
+
+  return {
+    label,
+    onBlur: _onBlur,
+    onChange: _onChange,
+    onFocus: _onFocus,
+    onMaximumAmountClick: _onMaximumAmountClick,
+    reset,
+    required,
+    setValue,
+    value,
+  };
+}
diff --git a/src/extension/hooks/useGenericInput/types/IOptions.ts b/src/extension/hooks/useGenericInput/types/IOptions.ts
index 9caa02e4..09966719 100644
--- a/src/extension/hooks/useGenericInput/types/IOptions.ts
+++ b/src/extension/hooks/useGenericInput/types/IOptions.ts
@@ -1,5 +1,6 @@
 interface IOptions {
   characterLimit?: number;
+  defaultValue?: string;
   label: string;
   required?: boolean;
   validate?: (value: string) => string | null;
diff --git a/src/extension/hooks/useGenericInput/types/IState.ts b/src/extension/hooks/useGenericInput/types/IState.ts
index cb440704..19979e67 100644
--- a/src/extension/hooks/useGenericInput/types/IState.ts
+++ b/src/extension/hooks/useGenericInput/types/IState.ts
@@ -1,9 +1,14 @@
-interface IState {
-  characterLimit?: number;
+import type { ChangeEvent, FocusEvent } from 'react';
+
+interface IState<InputElement extends HTMLInputElement | HTMLTextAreaElement> {
+  charactersRemaining?: number;
   error: string | null;
   label: string;
+  onBlur: (event: FocusEvent<InputElement>) => void;
+  onChange: (event: ChangeEvent<InputElement>) => void;
   required?: boolean;
   reset: () => void;
+  setCharactersRemaining: (value: number) => void;
   setError: (value: string | null) => void;
   setValue: (value: string) => void;
   validate: (value: string) => string | null;
diff --git a/src/extension/hooks/useGenericInput/useGenericInput.ts b/src/extension/hooks/useGenericInput/useGenericInput.ts
index 27926747..9e006839 100644
--- a/src/extension/hooks/useGenericInput/useGenericInput.ts
+++ b/src/extension/hooks/useGenericInput/useGenericInput.ts
@@ -1,29 +1,47 @@
-import { useState } from 'react';
+import { type ChangeEvent, type FocusEvent, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
 // types
 import type { IOptions, IState } from './types';
 
 // utils
-import validateInput from '@extension/utils/validateInput';
+import validateGenericInput from '@extension/utils/validateGenericInput';
 
-export default function useGenericInput({
+export default function useGenericInput<
+  InputElement extends HTMLInputElement | HTMLTextAreaElement
+>({
   characterLimit,
+  defaultValue,
   label,
   required,
   validate,
-}: IOptions): IState {
+}: IOptions): IState<InputElement> {
   const { t } = useTranslation();
   // state
+  const [charactersRemaining, setCharactersRemaining] = useState<number | null>(
+    characterLimit || null
+  );
   const [error, setError] = useState<string | null>(null);
-  const [value, setValue] = useState<string>('');
+  const [value, setValue] = useState<string>(defaultValue || '');
   // actions
-  const reset = () => {
-    setError(null);
-    setValue('');
+  const _onBlur = (event: FocusEvent<InputElement>) => {
+    setError(_validate(event.target.value));
+  };
+  const _onChange = (event: ChangeEvent<InputElement>) => {
+    let byteLength: number;
+
+    // update the characters remaining
+    if (characterLimit) {
+      byteLength = new TextEncoder().encode(event.target.value).byteLength;
+
+      setCharactersRemaining(characterLimit - byteLength);
+    }
+
+    setError(_validate(event.target.value));
+    setValue(event.target.value);
   };
   const _validate = (_value: string) => {
-    const _error = validateInput({
+    const _error = validateGenericInput({
       characterLimit,
       field: label,
       t,
@@ -36,16 +54,26 @@ export default function useGenericInput({
 
     return _error;
   };
+  const reset = () => {
+    setCharactersRemaining(characterLimit || null);
+    setError(null);
+    setValue(defaultValue || '');
+  };
 
   return {
-    characterLimit,
     error,
     label,
+    onBlur: _onBlur,
+    onChange: _onChange,
     reset,
     required,
+    setCharactersRemaining,
     setError,
     setValue,
     validate: _validate,
     value,
+    ...(charactersRemaining && {
+      charactersRemaining,
+    }),
   };
 }
diff --git a/src/extension/hooks/useNewPasswordInput/index.ts b/src/extension/hooks/useNewPasswordInput/index.ts
new file mode 100644
index 00000000..08911f54
--- /dev/null
+++ b/src/extension/hooks/useNewPasswordInput/index.ts
@@ -0,0 +1,2 @@
+export { default } from './useNewPasswordInput';
+export * from './types';
diff --git a/src/extension/hooks/useNewPasswordInput/types/IOptions.ts b/src/extension/hooks/useNewPasswordInput/types/IOptions.ts
new file mode 100644
index 00000000..9ffc3243
--- /dev/null
+++ b/src/extension/hooks/useNewPasswordInput/types/IOptions.ts
@@ -0,0 +1,6 @@
+interface IOptions {
+  label: string;
+  required?: boolean;
+}
+
+export default IOptions;
diff --git a/src/extension/hooks/useNewPasswordInput/types/IState.ts b/src/extension/hooks/useNewPasswordInput/types/IState.ts
new file mode 100644
index 00000000..8a083cdf
--- /dev/null
+++ b/src/extension/hooks/useNewPasswordInput/types/IState.ts
@@ -0,0 +1,21 @@
+import type { ChangeEvent, FocusEvent } from 'react';
+
+// types
+import type IValidateOptions from './IValidateOptions';
+
+interface IState {
+  error: string | null;
+  label: string;
+  onBlur: (event: FocusEvent<HTMLInputElement>) => void;
+  onChange: (event: ChangeEvent<HTMLInputElement>) => void;
+  required?: boolean;
+  reset: () => void;
+  score: number;
+  setError: (value: string | null) => void;
+  setScore: (value: number) => void;
+  setValue: (value: string) => void;
+  validate: (options: IValidateOptions) => string | null;
+  value: string;
+}
+
+export default IState;
diff --git a/src/extension/hooks/useNewPasswordInput/types/IValidateOptions.ts b/src/extension/hooks/useNewPasswordInput/types/IValidateOptions.ts
new file mode 100644
index 00000000..32d848bd
--- /dev/null
+++ b/src/extension/hooks/useNewPasswordInput/types/IValidateOptions.ts
@@ -0,0 +1,6 @@
+interface IValidateOptions {
+  score: number;
+  value: string;
+}
+
+export default IValidateOptions;
diff --git a/src/extension/hooks/useNewPasswordInput/types/index.ts b/src/extension/hooks/useNewPasswordInput/types/index.ts
new file mode 100644
index 00000000..d5c1f669
--- /dev/null
+++ b/src/extension/hooks/useNewPasswordInput/types/index.ts
@@ -0,0 +1,3 @@
+export type { default as IOptions } from './IOptions';
+export type { default as IState } from './IState';
+export type { default as IValidateOptions } from './IValidateOptions';
diff --git a/src/extension/hooks/useNewPasswordInput/useNewPasswordInput.ts b/src/extension/hooks/useNewPasswordInput/useNewPasswordInput.ts
new file mode 100644
index 00000000..6206f79e
--- /dev/null
+++ b/src/extension/hooks/useNewPasswordInput/useNewPasswordInput.ts
@@ -0,0 +1,79 @@
+import { type ChangeEvent, type FocusEvent, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import zxcvbn from 'zxcvbn';
+
+// types
+import type { IOptions, IState, IValidateOptions } from './types';
+
+// utils
+import validateNewPasswordInput from '@extension/utils/validateNewPasswordInput';
+
+export default function useNewPasswordInput({
+  label,
+  required,
+}: IOptions): IState {
+  const { t } = useTranslation();
+  // state
+  const [error, setError] = useState<string | null>(null);
+  const [score, setScore] = useState<number>(-1);
+  const [value, setValue] = useState<string>('');
+  // actions
+  const _onBlur = (event: FocusEvent<HTMLInputElement>) => {
+    // validate
+    setError(
+      _validate({
+        score:
+          event.target.value.length <= 0
+            ? -1
+            : zxcvbn(event.target.value).score,
+        value: event.target.value,
+      })
+    );
+  };
+  const _onChange = (event: ChangeEvent<HTMLInputElement>) => {
+    // validate
+    setError(
+      _validate({
+        score:
+          event.target.value.length <= 0
+            ? -1
+            : zxcvbn(event.target.value).score,
+        value: event.target.value,
+      })
+    );
+    setValue(event.target.value);
+  };
+  const _validate = ({ score: _score, value: _value }: IValidateOptions) => {
+    const _error = validateNewPasswordInput({
+      field: label,
+      t,
+      required,
+      score: _score,
+      value: _value,
+    });
+
+    setError(_error);
+
+    return _error;
+  };
+  const reset = () => {
+    setError(null);
+    setScore(-1);
+    setValue('');
+  };
+
+  return {
+    error,
+    label,
+    onBlur: _onBlur,
+    onChange: _onChange,
+    reset,
+    required,
+    score,
+    setError,
+    setScore,
+    setValue,
+    validate: _validate,
+    value,
+  };
+}
diff --git a/src/extension/modals/ARC0300KeyRegistrationTransactionSendEventModal/ARC0300KeyRegistrationTransactionSendEventModal.tsx b/src/extension/modals/ARC0300KeyRegistrationTransactionSendEventModal/ARC0300KeyRegistrationTransactionSendEventModal.tsx
index 28cd840a..e94dafc8 100644
--- a/src/extension/modals/ARC0300KeyRegistrationTransactionSendEventModal/ARC0300KeyRegistrationTransactionSendEventModal.tsx
+++ b/src/extension/modals/ARC0300KeyRegistrationTransactionSendEventModal/ARC0300KeyRegistrationTransactionSendEventModal.tsx
@@ -33,6 +33,8 @@ const ARC0300KeyRegistrationTransactionSendEventModal: FC<IModalProps> = ({
   // state
   const [event, setEvent] =
     useState<IARC0300KeyRegistrationTransactionSendEvent | null>(null);
+  // misc
+  const _context = 'arc-0300-key-registration-send-event-modal';
   // handlers
   const handleClose = async () => {
     if (event) {
@@ -62,6 +64,7 @@ const ARC0300KeyRegistrationTransactionSendEventModal: FC<IModalProps> = ({
     >
       {event ? (
         <ARC0300KeyRegistrationTransactionSendModalContent
+          _context={_context}
           onComplete={handleClose}
           onCancel={handleClose}
           schemaOrSchemas={event.payload}
diff --git a/src/extension/modals/AccountSelectModal/index.ts b/src/extension/modals/AccountSelectModal/index.ts
deleted file mode 100644
index 7d463b03..00000000
--- a/src/extension/modals/AccountSelectModal/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export { default } from './AccountSelectModal';
-export * from './types';
diff --git a/src/extension/modals/AccountSelectModal/types/IProps.ts b/src/extension/modals/AccountSelectModal/types/IProps.ts
deleted file mode 100644
index 6f0892e0..00000000
--- a/src/extension/modals/AccountSelectModal/types/IProps.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-// types
-import type { IAccountWithExtendedProps, IModalProps } from '@extension/types';
-
-interface IProps extends IModalProps {
-  accounts: IAccountWithExtendedProps[];
-  allowWatchAccounts?: boolean;
-  isOpen: boolean;
-  multiple?: boolean;
-  onSelect: (accounts: IAccountWithExtendedProps[]) => void;
-}
-
-export default IProps;
diff --git a/src/extension/modals/AddAssetsModal/AddAssetsModal.tsx b/src/extension/modals/AddAssetsModal/AddAssetsModal.tsx
index f1f18946..75a208d6 100644
--- a/src/extension/modals/AddAssetsModal/AddAssetsModal.tsx
+++ b/src/extension/modals/AddAssetsModal/AddAssetsModal.tsx
@@ -29,6 +29,7 @@ import { useDispatch } from 'react-redux';
 // components
 import Button from '@extension/components/Button';
 import IconButton from '@extension/components/IconButton';
+import Label from '@extension/components/Label';
 import AddAssetsARC0200AssetItem from './AddAssetsARC0200AssetItem';
 import AddAssetsARC0200AssetSummaryModalContent from './AddAssetsARC0200AssetSummaryModalContent';
 import AddAssetsConfirmingModalContent from './AddAssetsConfirmingModalContent';
@@ -36,7 +37,11 @@ import AddAssetsStandardAssetSummaryModalContent from './AddAssetsStandardAssetS
 import AddAssetsStandardAssetItem from './AddAssetsStandardAssetItem';
 
 // constants
-import { BODY_BACKGROUND_COLOR, DEFAULT_GAP } from '@extension/constants';
+import {
+  BODY_BACKGROUND_COLOR,
+  DEFAULT_GAP,
+  INPUT_HEIGHT,
+} from '@extension/constants';
 
 // enums
 import { AssetTypeEnum, ErrorCodeEnum } from '@extension/enums';
@@ -537,6 +542,7 @@ const AddAssetsModal: FC<IModalProps> = ({ onClose }) => {
     return (
       <VStack flexGrow={1} spacing={DEFAULT_GAP / 2} w="full">
         <VStack px={DEFAULT_GAP} spacing={DEFAULT_GAP / 2} w="full">
+          {/*caption*/}
           <Text
             color={defaultTextColor}
             fontSize="sm"
@@ -547,19 +553,20 @@ const AddAssetsModal: FC<IModalProps> = ({ onClose }) => {
           </Text>
 
           {/*search*/}
-          <InputGroup w="full">
+          <InputGroup size="md">
             <Input
+              borderRadius="full"
               colorScheme={primaryColorScheme}
               focusBorderColor={primaryColor}
+              h={INPUT_HEIGHT}
               onChange={handleOnQueryChange}
               onKeyUp={handleKeyUp}
-              size="md"
               type="text"
               value={query}
               w="full"
             />
 
-            <InputRightElement>
+            <InputRightElement h={INPUT_HEIGHT}>
               {fetching && (
                 <Spinner
                   thickness="1px"
@@ -571,6 +578,7 @@ const AddAssetsModal: FC<IModalProps> = ({ onClose }) => {
               {!fetching && query.length > 0 && (
                 <IconButton
                   aria-label="Clear query"
+                  borderRadius="full"
                   icon={IoCloseOutline}
                   onClick={handleClearQuery}
                   size="sm"
diff --git a/src/extension/modals/AddCustomNodeModal/AddCustomNodeModal.tsx b/src/extension/modals/AddCustomNodeModal/AddCustomNodeModal.tsx
index 35b512de..1922fb0c 100644
--- a/src/extension/modals/AddCustomNodeModal/AddCustomNodeModal.tsx
+++ b/src/extension/modals/AddCustomNodeModal/AddCustomNodeModal.tsx
@@ -98,10 +98,10 @@ const AddCustomNodeModal: FC<IProps> = ({ isOpen, onClose, onComplete }) => {
   const {
     error: algodURLError,
     label: algodURLLabel,
+    onBlur: algodURLOnBlur,
+    onChange: algodURLOnChange,
     required: algodURLRequired,
     reset: resetAlgodURL,
-    setError: setAlgodURLError,
-    setValue: setAlgodURLValue,
     validate: validateAlgodURL,
     value: algodURLValue,
   } = useGenericInput({
@@ -111,9 +111,9 @@ const AddCustomNodeModal: FC<IProps> = ({ isOpen, onClose, onComplete }) => {
   const {
     error: algodPortError,
     label: algodPortLabel,
+    onBlur: algodPortOnBlur,
+    onChange: algodPortOnChange,
     reset: resetAlgodPort,
-    setError: setAlgodPortError,
-    setValue: setAlgodPortValue,
     validate: validateAlgodPort,
     value: algodPortValue,
   } = useGenericInput({
@@ -122,9 +122,9 @@ const AddCustomNodeModal: FC<IProps> = ({ isOpen, onClose, onComplete }) => {
   const {
     error: algodTokenError,
     label: algodTokenLabel,
+    onBlur: algodTokenOnBlur,
+    onChange: algodTokenOnChange,
     reset: resetAlgodToken,
-    setError: setAlgodTokenError,
-    setValue: setAlgodTokenValue,
     validate: validateAlgodToken,
     value: algodTokenValue,
   } = useGenericInput({
@@ -133,9 +133,9 @@ const AddCustomNodeModal: FC<IProps> = ({ isOpen, onClose, onComplete }) => {
   const {
     error: indexerURLError,
     label: indexerURLLabel,
+    onBlur: indexerURLOnBlur,
+    onChange: indexerURLOnChange,
     reset: resetIndexerURL,
-    setError: setIndexerURLError,
-    setValue: setIndexerURLValue,
     validate: validateIndexerURL,
     value: indexerURLValue,
   } = useGenericInput({
@@ -144,9 +144,9 @@ const AddCustomNodeModal: FC<IProps> = ({ isOpen, onClose, onComplete }) => {
   const {
     error: indexerPortError,
     label: indexerPortLabel,
+    onBlur: indexerPortOnBlur,
+    onChange: indexerPortOnChange,
     reset: resetIndexerPort,
-    setError: setIndexerPortError,
-    setValue: setIndexerPortValue,
     validate: validateIndexerPort,
     value: indexerPortValue,
   } = useGenericInput({
@@ -155,22 +155,22 @@ const AddCustomNodeModal: FC<IProps> = ({ isOpen, onClose, onComplete }) => {
   const {
     error: indexerTokenError,
     label: indexerTokenLabel,
+    onBlur: indexerTokenOnBlur,
+    onChange: indexerTokenOnChange,
     reset: resetIndexerToken,
-    setError: setIndexerTokenError,
-    setValue: setIndexerTokenValue,
     validate: validateIndexerToken,
     value: indexerTokenValue,
   } = useGenericInput({
     label: t<string>('labels.token'),
   });
   const {
-    characterLimit: nameCharacterLimit,
+    charactersRemaining: nameCharactersRemaining,
     error: nameError,
     label: nameLabel,
+    onBlur: nameOnBlur,
+    onChange: nameOnChange,
     required: nameRequired,
     reset: resetName,
-    setError: setNameError,
-    setValue: setNameValue,
     validate: validateName,
     value: nameValue,
   } = useGenericInput({
@@ -341,61 +341,6 @@ const AddCustomNodeModal: FC<IProps> = ({ isOpen, onClose, onComplete }) => {
     });
     setNetwork(_network);
   };
-  const handleOnChange =
-    (field: string) => (event: ChangeEvent<HTMLInputElement>) => {
-      switch (field) {
-        case 'name':
-          setNameValue(event.target.value);
-          break;
-        case 'algodURL':
-          setAlgodURLValue(event.target.value);
-          break;
-        case 'algodPort':
-          setAlgodPortValue(event.target.value);
-          break;
-        case 'algodToken':
-          setAlgodTokenValue(event.target.value);
-          break;
-        case 'indexerURL':
-          setIndexerURLValue(event.target.value);
-          break;
-        case 'indexerPort':
-          setIndexerPortValue(event.target.value);
-          break;
-        case 'indexerToken':
-          setIndexerTokenValue(event.target.value);
-          break;
-        default:
-          break;
-      }
-    };
-  const handleOnError = (field: string) => (value: string | null) => {
-    switch (field) {
-      case 'name':
-        setNameError(value);
-        break;
-      case 'algodURL':
-        setAlgodURLError(value);
-        break;
-      case 'algodPort':
-        setAlgodPortError(value);
-        break;
-      case 'algodToken':
-        setAlgodTokenError(value);
-        break;
-      case 'indexerURL':
-        setIndexerURLError(value);
-        break;
-      case 'indexerPort':
-        setIndexerPortError(value);
-        break;
-      case 'indexerToken':
-        setIndexerTokenError(value);
-        break;
-      default:
-        break;
-    }
-  };
   const handlePreviousClick = () => {
     setCustomNode(null);
     setNetwork(null);
@@ -459,17 +404,17 @@ const AddCustomNodeModal: FC<IProps> = ({ isOpen, onClose, onComplete }) => {
 
         {/*name*/}
         <GenericInput
-          characterLimit={nameCharacterLimit}
+          charactersRemaining={nameCharactersRemaining}
           error={nameError}
           label={nameLabel}
           isDisabled={fetching}
-          onChange={handleOnChange('name')}
-          onError={handleOnError('name')}
+          onBlur={nameOnBlur}
+          onChange={nameOnChange}
           placeholder={t<string>('placeholders.customNodeName')}
           required={nameRequired}
           type="text"
           validate={validateName}
-          value={nameValue || ''}
+          value={nameValue}
         />
 
         {/*activate on add*/}
@@ -494,13 +439,13 @@ const AddCustomNodeModal: FC<IProps> = ({ isOpen, onClose, onComplete }) => {
           error={algodURLError}
           label={algodURLLabel}
           isDisabled={fetching}
-          onChange={handleOnChange('algodURL')}
-          onError={handleOnError('algodURL')}
+          onBlur={algodURLOnBlur}
+          onChange={algodURLOnChange}
           placeholder={t<string>('placeholders.url')}
           required={algodURLRequired}
           type="text"
           validate={validateAlgodURL}
-          value={algodURLValue || ''}
+          value={algodURLValue}
         />
 
         {/*algod port*/}
@@ -508,12 +453,12 @@ const AddCustomNodeModal: FC<IProps> = ({ isOpen, onClose, onComplete }) => {
           error={algodPortError}
           label={algodPortLabel}
           isDisabled={fetching}
-          onChange={handleOnChange('algodPort')}
-          onError={handleOnError('algodPort')}
+          onBlur={algodPortOnBlur}
+          onChange={algodPortOnChange}
           placeholder={t<string>('placeholders.port')}
           type="text"
           validate={validateAlgodPort}
-          value={algodPortValue || ''}
+          value={algodPortValue}
         />
 
         {/*algod token*/}
@@ -522,11 +467,11 @@ const AddCustomNodeModal: FC<IProps> = ({ isOpen, onClose, onComplete }) => {
           label={algodTokenLabel}
           informationText={t<string>('captions.algodToken')}
           isDisabled={fetching}
-          onChange={handleOnChange('algodToken')}
-          onError={handleOnError('algodToken')}
+          onBlur={algodTokenOnBlur}
+          onChange={algodTokenOnChange}
           type="text"
           validate={validateAlgodToken}
-          value={algodTokenValue || ''}
+          value={algodTokenValue}
         />
 
         <MoreInformationAccordion
@@ -546,12 +491,12 @@ const AddCustomNodeModal: FC<IProps> = ({ isOpen, onClose, onComplete }) => {
               error={indexerURLError}
               label={indexerURLLabel}
               isDisabled={fetching}
-              onChange={handleOnChange('indexerURL')}
-              onError={handleOnError('indexerURL')}
+              onBlur={indexerURLOnBlur}
+              onChange={indexerURLOnChange}
               placeholder={t<string>('placeholders.url')}
               type="text"
               validate={validateIndexerURL}
-              value={indexerURLValue || ''}
+              value={indexerURLValue}
             />
 
             {/*indexer port*/}
@@ -559,12 +504,12 @@ const AddCustomNodeModal: FC<IProps> = ({ isOpen, onClose, onComplete }) => {
               error={indexerPortError}
               label={indexerPortLabel}
               isDisabled={fetching}
-              onChange={handleOnChange('indexerPort')}
-              onError={handleOnError('indexerPort')}
+              onBlur={indexerPortOnBlur}
+              onChange={indexerPortOnChange}
               placeholder={t<string>('placeholders.port')}
               type="text"
               validate={validateIndexerPort}
-              value={indexerPortValue || ''}
+              value={indexerPortValue}
             />
 
             {/*indexer token*/}
@@ -573,11 +518,11 @@ const AddCustomNodeModal: FC<IProps> = ({ isOpen, onClose, onComplete }) => {
               label={indexerTokenLabel}
               informationText={t<string>('captions.indexerToken')}
               isDisabled={fetching}
-              onChange={handleOnChange('indexerToken')}
-              onError={handleOnError('indexerToken')}
+              onBlur={indexerTokenOnBlur}
+              onChange={indexerTokenOnChange}
               type="text"
               validate={validateIndexerToken}
-              value={indexerTokenValue || ''}
+              value={indexerTokenValue}
             />
           </VStack>
         </MoreInformationAccordion>
diff --git a/src/extension/modals/AssetSelectModal/index.ts b/src/extension/modals/AssetSelectModal/index.ts
deleted file mode 100644
index 6ef72d15..00000000
--- a/src/extension/modals/AssetSelectModal/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export { default } from './AssetSelectModal';
-export * from './types';
diff --git a/src/extension/modals/AuthenticationModal/AuthenticationModal.tsx b/src/extension/modals/AuthenticationModal/AuthenticationModal.tsx
index 4cc37685..8640afde 100644
--- a/src/extension/modals/AuthenticationModal/AuthenticationModal.tsx
+++ b/src/extension/modals/AuthenticationModal/AuthenticationModal.tsx
@@ -8,9 +8,16 @@ import {
   Text,
   VStack,
 } from '@chakra-ui/react';
-import React, { FC, KeyboardEvent, useEffect, useRef, useState } from 'react';
+import React, {
+  type ChangeEvent,
+  type FC,
+  type KeyboardEvent,
+  useEffect,
+  useRef,
+  useState,
+} from 'react';
 import { useTranslation } from 'react-i18next';
-import { IoLockClosedOutline } from 'react-icons/io5';
+import { IoCheckmarkOutline, IoLockClosedOutline } from 'react-icons/io5';
 import { Radio } from 'react-loader-spinner';
 import browser from 'webextension-polyfill';
 
@@ -26,8 +33,8 @@ import { BODY_BACKGROUND_COLOR, DEFAULT_GAP } from '@extension/constants';
 import { EncryptionMethodEnum } from '@extension/enums';
 
 // hooks
-import { usePassword } from '@extension/components/PasswordInput';
 import useColorModeValue from '@extension/hooks/useColorModeValue';
+import useGenericInput from '@extension/hooks/useGenericInput';
 import useSubTextColor from '@extension/hooks/useSubTextColor';
 
 // selectors
@@ -68,12 +75,17 @@ const AuthenticationModal: FC<IProps> = ({
   );
   const {
     error: passwordError,
-    onChange: onPasswordChange,
+    label: passwordLabel,
+    required: isPasswordRequired,
     reset: resetPassword,
     setError: setPasswordError,
+    setValue: setPasswordValue,
     validate: validatePassword,
-    value: password,
-  } = usePassword();
+    value: passwordValue,
+  } = useGenericInput({
+    required: true,
+    label: t<string>('labels.password'),
+  });
   const subTextColor = useSubTextColor();
   // states
   const [verifying, setVerifying] = useState<boolean>(false);
@@ -89,7 +101,7 @@ const AuthenticationModal: FC<IProps> = ({
     let passwordService: PasswordService;
 
     // check if the input is valid
-    if (validatePassword()) {
+    if (!!passwordError || !!validatePassword(passwordValue)) {
       return;
     }
 
@@ -100,7 +112,7 @@ const AuthenticationModal: FC<IProps> = ({
 
     setVerifying(true);
 
-    isValid = await passwordService.verifyPassword(password);
+    isValid = await passwordService.verifyPassword(passwordValue);
 
     setVerifying(false);
 
@@ -111,7 +123,7 @@ const AuthenticationModal: FC<IProps> = ({
     }
 
     onConfirm({
-      password,
+      password: passwordValue,
       type: EncryptionMethodEnum.Password,
     });
 
@@ -129,6 +141,10 @@ const AuthenticationModal: FC<IProps> = ({
       await handleConfirmClick();
     }
   };
+  const handleOnPasswordChange = (event: ChangeEvent<HTMLInputElement>) => {
+    validatePassword(event.target.value);
+    setPasswordValue(event.target.value);
+  };
   // renders
   const renderContent = () => {
     // if the credential lock is not active, show a loader
@@ -188,9 +204,11 @@ const AuthenticationModal: FC<IProps> = ({
             passwordHint || t<string>('captions.mustEnterPasswordToConfirm')
           }
           inputRef={passwordInputRef}
-          onChange={onPasswordChange}
+          label={passwordLabel}
+          onChange={handleOnPasswordChange}
           onKeyUp={handleKeyUpPasswordInput}
-          value={password || ''}
+          required={isPasswordRequired}
+          value={passwordValue || ''}
         />
       </VStack>
     );
@@ -284,6 +302,7 @@ const AuthenticationModal: FC<IProps> = ({
               <Button
                 isLoading={verifying}
                 onClick={handleConfirmClick}
+                rightIcon={<IoCheckmarkOutline />}
                 size="lg"
                 variant="solid"
                 w="full"
diff --git a/src/extension/modals/ConfirmModal/ConfirmModal.tsx b/src/extension/modals/ConfirmModal/ConfirmModal.tsx
index 526f3ccd..ef27b7ac 100644
--- a/src/extension/modals/ConfirmModal/ConfirmModal.tsx
+++ b/src/extension/modals/ConfirmModal/ConfirmModal.tsx
@@ -10,8 +10,9 @@ import {
   Text,
   VStack,
 } from '@chakra-ui/react';
-import React, { createRef, FC, RefObject } from 'react';
+import React, { type FC, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
+import { IoCheckmarkOutline } from 'react-icons/io5';
 
 // components
 import Button from '@extension/components/Button';
@@ -32,13 +33,12 @@ import { useSelectConfirmModal } from '@extension/selectors';
 // theme
 import { theme } from '@extension/theme';
 
-interface IProps {
-  onClose: () => void;
-}
+// types
+import type { IModalProps } from '@extension/types';
 
-const ConfirmModal: FC<IProps> = ({ onClose }: IProps) => {
+const ConfirmModal: FC<IModalProps> = ({ onClose }) => {
   const { t } = useTranslation();
-  const initialRef: RefObject<HTMLButtonElement> | undefined = createRef();
+  const initialRef = useRef<HTMLButtonElement | null>(null);
   // hooks
   const confirm: IConfirmModal | null = useSelectConfirmModal();
   // selectors
@@ -49,14 +49,17 @@ const ConfirmModal: FC<IProps> = ({ onClose }: IProps) => {
       confirm.onCancel();
     }
 
-    onClose();
+    handleClose();
   };
   const handleConfirmClick = () => {
     if (confirm?.onConfirm) {
       confirm.onConfirm();
     }
 
-    onClose();
+    handleClose();
+  };
+  const handleClose = () => {
+    onClose && onClose();
   };
 
   return (
@@ -64,7 +67,7 @@ const ConfirmModal: FC<IProps> = ({ onClose }: IProps) => {
       initialFocusRef={initialRef}
       isOpen={!!confirm}
       motionPreset="slideInBottom"
-      onClose={onClose}
+      onClose={handleClose}
       size="full"
       scrollBehavior="inside"
     >
@@ -84,7 +87,7 @@ const ConfirmModal: FC<IProps> = ({ onClose }: IProps) => {
         </ModalHeader>
 
         <ModalBody>
-          <VStack spacing={4} w="full">
+          <VStack spacing={DEFAULT_GAP - 2} w="full">
             {/*description*/}
             <Text color={defaultTextColor} fontSize="sm" textAlign="left">
               {confirm?.description || t<string>('captions.defaultConfirm')}
@@ -98,7 +101,7 @@ const ConfirmModal: FC<IProps> = ({ onClose }: IProps) => {
         </ModalBody>
 
         <ModalFooter p={DEFAULT_GAP}>
-          <HStack spacing={4} w="full">
+          <HStack spacing={DEFAULT_GAP - 2} w="full">
             {/*cancel*/}
             <Button
               onClick={handleCancelClick}
@@ -113,6 +116,7 @@ const ConfirmModal: FC<IProps> = ({ onClose }: IProps) => {
             {/*confirm*/}
             <Button
               onClick={handleConfirmClick}
+              rightIcon={<IoCheckmarkOutline />}
               size="lg"
               variant="solid"
               w="full"
diff --git a/src/extension/modals/ConfirmPasswordModal/ConfirmPasswordModal.tsx b/src/extension/modals/ConfirmPasswordModal/ConfirmPasswordModal.tsx
index 5b91fd59..27b3fa13 100644
--- a/src/extension/modals/ConfirmPasswordModal/ConfirmPasswordModal.tsx
+++ b/src/extension/modals/ConfirmPasswordModal/ConfirmPasswordModal.tsx
@@ -5,10 +5,16 @@ import {
   ModalContent,
   ModalFooter,
   ModalOverlay,
-  Text,
   VStack,
 } from '@chakra-ui/react';
-import React, { FC, KeyboardEvent, useEffect, useRef, useState } from 'react';
+import React, {
+  type ChangeEvent,
+  type FC,
+  type KeyboardEvent,
+  useEffect,
+  useRef,
+  useState,
+} from 'react';
 import { useTranslation } from 'react-i18next';
 import browser from 'webextension-polyfill';
 
@@ -20,7 +26,7 @@ import PasswordInput from '@extension/components/PasswordInput';
 import { BODY_BACKGROUND_COLOR, DEFAULT_GAP } from '@extension/constants';
 
 // hooks
-import { usePassword } from '@extension/components/PasswordInput';
+import useGenericInput from '@extension/hooks/useGenericInput';
 
 // selectors
 import { useSelectLogger } from '@extension/selectors';
@@ -33,6 +39,7 @@ import { theme } from '@extension/theme';
 
 // types
 import type { IProps } from './types';
+import { IoCheckmarkOutline } from 'react-icons/io5';
 
 const ConfirmPasswordModal: FC<IProps> = ({
   isOpen,
@@ -47,12 +54,17 @@ const ConfirmPasswordModal: FC<IProps> = ({
   // hooks
   const {
     error: passwordError,
-    onChange: onPasswordChange,
+    label: passwordLabel,
+    required: isPasswordRequired,
     reset: resetPassword,
     setError: setPasswordError,
+    setValue: setPasswordValue,
     validate: validatePassword,
-    value: password,
-  } = usePassword();
+    value: passwordValue,
+  } = useGenericInput({
+    required: true,
+    label: t<string>('labels.password'),
+  });
   // states
   const [verifying, setVerifying] = useState<boolean>(false);
   // misc
@@ -67,7 +79,7 @@ const ConfirmPasswordModal: FC<IProps> = ({
     let passwordService: PasswordService;
 
     // check if the input is valid
-    if (validatePassword()) {
+    if (!!passwordError || !!validatePassword(passwordValue)) {
       return;
     }
 
@@ -78,7 +90,7 @@ const ConfirmPasswordModal: FC<IProps> = ({
 
     setVerifying(true);
 
-    isValid = await passwordService.verifyPassword(password);
+    isValid = await passwordService.verifyPassword(passwordValue);
 
     setVerifying(false);
 
@@ -88,7 +100,7 @@ const ConfirmPasswordModal: FC<IProps> = ({
       return;
     }
 
-    onConfirm(password);
+    onConfirm(passwordValue);
     handleClose();
   };
   const handleClose = () => {
@@ -103,6 +115,10 @@ const ConfirmPasswordModal: FC<IProps> = ({
       await handleConfirmClick();
     }
   };
+  const handleOnPasswordChange = (event: ChangeEvent<HTMLInputElement>) => {
+    validatePassword(event.target.value);
+    setPasswordValue(event.target.value);
+  };
 
   // set focus when opening
   useEffect(() => {
@@ -137,9 +153,11 @@ const ConfirmPasswordModal: FC<IProps> = ({
               error={passwordError}
               hint={hint || t<string>('captions.mustEnterPasswordToConfirm')}
               inputRef={passwordInputRef}
-              onChange={onPasswordChange}
+              label={passwordLabel}
+              onChange={handleOnPasswordChange}
               onKeyUp={handleKeyUpPasswordInput}
-              value={password || ''}
+              required={isPasswordRequired}
+              value={passwordValue || ''}
             />
           </VStack>
         </ModalBody>
@@ -159,6 +177,7 @@ const ConfirmPasswordModal: FC<IProps> = ({
             <Button
               isLoading={verifying}
               onClick={handleConfirmClick}
+              rightIcon={<IoCheckmarkOutline />}
               size="lg"
               variant="solid"
               w="full"
diff --git a/src/extension/modals/EditAccountModal/EditAccountModal.tsx b/src/extension/modals/EditAccountModal/EditAccountModal.tsx
new file mode 100644
index 00000000..127049ac
--- /dev/null
+++ b/src/extension/modals/EditAccountModal/EditAccountModal.tsx
@@ -0,0 +1,233 @@
+import {
+  Heading,
+  HStack,
+  Modal,
+  ModalBody,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+  Text,
+  Tooltip,
+  VStack,
+} from '@chakra-ui/react';
+import React, { type FC } from 'react';
+import { useTranslation } from 'react-i18next';
+import { IoSaveOutline } from 'react-icons/io5';
+import { useDispatch } from 'react-redux';
+
+// components
+import Button from '@extension/components/Button';
+import GenericInput from '@extension/components/GenericInput';
+
+// constants
+import {
+  ACCOUNT_NAME_BYTE_LIMIT,
+  BODY_BACKGROUND_COLOR,
+  DEFAULT_GAP,
+} from '@extension/constants';
+
+// features
+import { saveAccountNameThunk } from '@extension/features/accounts';
+import { create as createNotification } from '@extension/features/notifications';
+
+// hooks
+import useDefaultTextColor from '@extension/hooks/useDefaultTextColor';
+import useGenericInput from '@extension/hooks/useGenericInput';
+import useSubTextColor from '@extension/hooks/useSubTextColor';
+
+// selectors
+import {
+  useSelectActiveAccount,
+  useSelectAccountsSaving,
+} from '@extension/selectors';
+
+// theme
+import { theme } from '@extension/theme';
+
+// types
+import type {
+  IAccountWithExtendedProps,
+  IAppThunkDispatch,
+  IMainRootState,
+} from '@extension/types';
+import type { IProps } from './types';
+
+// utils
+import convertPublicKeyToAVMAddress from '@extension/utils/convertPublicKeyToAVMAddress';
+import ellipseAddress from '@extension/utils/ellipseAddress';
+
+const EditAccountModal: FC<IProps> = ({ isOpen, onClose }) => {
+  const { t } = useTranslation();
+  const dispatch = useDispatch<IAppThunkDispatch<IMainRootState>>();
+  // selectors
+  const account = useSelectActiveAccount();
+  const saving = useSelectAccountsSaving();
+  // hooks
+  const defaultTextColor = useDefaultTextColor();
+  const {
+    charactersRemaining: nameCharactersRemaining,
+    error: nameError,
+    label: nameLabel,
+    onBlur: nameOnBlur,
+    onChange: nameOnChange,
+    required: isNameRequired,
+    reset: resetName,
+    value: nameValue,
+    validate: validateName,
+  } = useGenericInput({
+    characterLimit: ACCOUNT_NAME_BYTE_LIMIT,
+    label: t<string>('labels.name'),
+    ...(account?.name && {
+      defaultValue: account.name,
+    }),
+  });
+  const subTextColor = useSubTextColor();
+  // handlers
+  const handleCancelClick = () => handleClose();
+  const handleClose = () => {
+    // reset inputs
+    resetName();
+    // close
+    onClose && onClose();
+  };
+  const handleSaveClick = async () => {
+    let _account: IAccountWithExtendedProps | null;
+
+    if (
+      !account ||
+      !!nameError ||
+      [validateName(nameValue)].some((value) => !!value)
+    ) {
+      return;
+    }
+
+    if (account && account.name === nameValue) {
+      handleClose();
+
+      return;
+    }
+
+    _account = await dispatch(
+      saveAccountNameThunk({
+        accountId: account.id,
+        name: nameValue,
+      })
+    ).unwrap();
+
+    if (_account) {
+      dispatch(
+        createNotification({
+          ephemeral: true,
+          title: t<string>('headings.accountUpdated'),
+          type: 'info',
+        })
+      );
+    }
+
+    handleClose();
+  };
+
+  return (
+    <Modal
+      isOpen={isOpen}
+      motionPreset="slideInBottom"
+      onClose={handleClose}
+      size="full"
+      scrollBehavior="inside"
+    >
+      <ModalContent
+        backgroundColor={BODY_BACKGROUND_COLOR}
+        borderTopRadius={theme.radii['3xl']}
+        borderBottomRadius={0}
+      >
+        {/*header*/}
+        <ModalHeader justifyContent="center" px={DEFAULT_GAP}>
+          <VStack
+            alignItems="center"
+            justifyContent="center"
+            spacing={1}
+            w="full"
+          >
+            <Heading
+              color={defaultTextColor}
+              size="md"
+              textAlign="center"
+              w="full"
+            >
+              {t<string>('headings.editAccount')}
+            </Heading>
+
+            {/*address*/}
+            {account && (
+              <Tooltip label={convertPublicKeyToAVMAddress(account.publicKey)}>
+                <Text
+                  color={subTextColor}
+                  fontSize="sm"
+                  textAlign="center"
+                  w="full"
+                >
+                  {ellipseAddress(
+                    convertPublicKeyToAVMAddress(account.publicKey),
+                    {
+                      end: 10,
+                      start: 10,
+                    }
+                  )}
+                </Text>
+              </Tooltip>
+            )}
+          </VStack>
+        </ModalHeader>
+
+        {/*body*/}
+        <ModalBody display="flex" px={DEFAULT_GAP}>
+          <VStack flexGrow={1} spacing={DEFAULT_GAP - 2} w="full">
+            {/*name*/}
+            <GenericInput
+              charactersRemaining={nameCharactersRemaining}
+              error={nameError}
+              label={nameLabel}
+              isDisabled={saving}
+              onBlur={nameOnBlur}
+              onChange={nameOnChange}
+              required={isNameRequired}
+              placeholder={t<string>('placeholders.nameAccount')}
+              type="text"
+              validate={validateName}
+              value={nameValue}
+            />
+          </VStack>
+        </ModalBody>
+
+        {/*footer*/}
+        <ModalFooter p={DEFAULT_GAP}>
+          <HStack spacing={DEFAULT_GAP - 2} w="full">
+            {/*cancel button*/}
+            <Button
+              onClick={handleCancelClick}
+              size="lg"
+              variant="outline"
+              w="full"
+            >
+              {t<string>('buttons.cancel')}
+            </Button>
+
+            {/*save button*/}
+            <Button
+              isLoading={saving}
+              onClick={handleSaveClick}
+              rightIcon={<IoSaveOutline />}
+              size="lg"
+              variant="solid"
+              w="full"
+            >
+              {t<string>('buttons.save')}
+            </Button>
+          </HStack>
+        </ModalFooter>
+      </ModalContent>
+    </Modal>
+  );
+};
+
+export default EditAccountModal;
diff --git a/src/extension/modals/EditAccountModal/index.ts b/src/extension/modals/EditAccountModal/index.ts
new file mode 100644
index 00000000..99edd165
--- /dev/null
+++ b/src/extension/modals/EditAccountModal/index.ts
@@ -0,0 +1,2 @@
+export { default } from './EditAccountModal';
+export * from './types';
diff --git a/src/extension/modals/EditAccountModal/types/IProps.ts b/src/extension/modals/EditAccountModal/types/IProps.ts
new file mode 100644
index 00000000..eeec4756
--- /dev/null
+++ b/src/extension/modals/EditAccountModal/types/IProps.ts
@@ -0,0 +1,8 @@
+// types
+import type { IModalProps } from '@extension/types';
+
+interface IProps extends IModalProps {
+  isOpen: boolean;
+}
+
+export default IProps;
diff --git a/src/extension/modals/EditAccountModal/types/index.ts b/src/extension/modals/EditAccountModal/types/index.ts
new file mode 100644
index 00000000..f404deed
--- /dev/null
+++ b/src/extension/modals/EditAccountModal/types/index.ts
@@ -0,0 +1 @@
+export type { default as IProps } from './IProps';
diff --git a/src/extension/modals/EnableModal/EnableModal.tsx b/src/extension/modals/EnableModal/EnableModal.tsx
index 2d9fb7ce..b939f963 100644
--- a/src/extension/modals/EnableModal/EnableModal.tsx
+++ b/src/extension/modals/EnableModal/EnableModal.tsx
@@ -310,7 +310,7 @@ const EnableModal: FC<IModalProps> = ({ onClose }) => {
               />
 
               {/*network*/}
-              {network && <NetworkBadge network={network} />}
+              {network && <NetworkBadge network={network} size="xs" />}
 
               {/*caption*/}
               <Text color={subTextColor} fontSize="sm" textAlign="center">
diff --git a/src/extension/modals/ManageSessionModal/ManageSessionModal.tsx b/src/extension/modals/ManageSessionModal/ManageSessionModal.tsx
index e1e94733..b545ae34 100644
--- a/src/extension/modals/ManageSessionModal/ManageSessionModal.tsx
+++ b/src/extension/modals/ManageSessionModal/ManageSessionModal.tsx
@@ -15,6 +15,7 @@ import {
 import { generateAccount } from 'algosdk';
 import React, { ChangeEvent, FC, ReactNode, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
+import { IoSaveOutline } from 'react-icons/io5';
 import { useDispatch } from 'react-redux';
 
 // components
@@ -237,7 +238,7 @@ const ManageSessionModal: FC<IProps> = ({ onClose, session }) => {
         />
 
         {/*network*/}
-        {network && <NetworkBadge network={network} />}
+        {network && <NetworkBadge network={network} size="xs" />}
 
         {/*creation date*/}
         <Text color={defaultTextColor} fontSize="xs" textAlign="center">
@@ -298,6 +299,7 @@ const ManageSessionModal: FC<IProps> = ({ onClose, session }) => {
             <Button
               isLoading={saving}
               onClick={handleSaveClick}
+              rightIcon={<IoSaveOutline />}
               size="lg"
               variant="solid"
               w="full"
diff --git a/src/extension/modals/ReKeyAccountModal/ReKeyAccountModal.tsx b/src/extension/modals/ReKeyAccountModal/ReKeyAccountModal.tsx
index 60525dbc..54f7dc71 100644
--- a/src/extension/modals/ReKeyAccountModal/ReKeyAccountModal.tsx
+++ b/src/extension/modals/ReKeyAccountModal/ReKeyAccountModal.tsx
@@ -11,8 +11,9 @@ import {
   VStack,
 } from '@chakra-ui/react';
 import BigNumber from 'bignumber.js';
-import React, { FC, ReactNode, useState } from 'react';
+import React, { type FC, type ReactNode } from 'react';
 import { useTranslation } from 'react-i18next';
+import { IoArrowUndoOutline, IoLockClosedOutline } from 'react-icons/io5';
 import { useDispatch } from 'react-redux';
 
 // components
@@ -44,6 +45,7 @@ import {
 } from '@extension/features/re-key-account';
 
 // hooks
+import useAddressInput from '@extension/hooks/useAddressInput';
 import useDefaultTextColor from '@extension/hooks/useDefaultTextColor';
 import useReKeyAccountModal from './hooks/useReKeyAccountModal';
 import useSubTextColor from '@extension/hooks/useSubTextColor';
@@ -80,8 +82,21 @@ const ReKeyAccountModal: FC<IModalProps> = ({ onClose }) => {
   // selectors
   const accounts = useSelectAccounts();
   // hooks
+  const {
+    error: reKeyToAddressError,
+    label: reKeyToAddressLabel,
+    onBlur: reKeyToAddressOnBlur,
+    onChange: reKeyToAddressOnChange,
+    onSelect: reKeyToAddressOnSelect,
+    required: isReKeyToAddressRequired,
+    reset: resetReKeyToAddress,
+    value: reKeyToAddressValue,
+    validate: validateReKeyToAddress,
+  } = useAddressInput({
+    label: t<string>('labels.reKeyTo'),
+    required: true,
+  });
   const defaultTextColor = useDefaultTextColor();
-  const subTextColor = useSubTextColor();
   const {
     account,
     accountInformation,
@@ -89,10 +104,9 @@ const ReKeyAccountModal: FC<IModalProps> = ({ onClose }) => {
     network,
     type: reKeyType,
   } = useReKeyAccountModal();
-  // states
-  const [authAddress, setAuthAddress] = useState<string>('');
-  const [authAddressError, setAuthAddressError] = useState<string | null>(null);
+  const subTextColor = useSubTextColor();
   // misc
+  const _context = 're-key-account-modal';
   const isOpen = !!account && !!accountInformation;
   const reKeyAccount = async (result: TEncryptionCredentials) => {
     let transactionId: string | null;
@@ -100,9 +114,9 @@ const ReKeyAccountModal: FC<IModalProps> = ({ onClose }) => {
     if (
       !account ||
       !accountInformation ||
-      !authAddress ||
-      authAddressError ||
-      !network
+      !network ||
+      !!reKeyToAddressError ||
+      !!validateReKeyToAddress(reKeyToAddressValue)
     ) {
       return;
     }
@@ -110,7 +124,7 @@ const ReKeyAccountModal: FC<IModalProps> = ({ onClose }) => {
     try {
       transactionId = await dispatch(
         reKeyAccountThunk({
-          authorizedAddress: authAddress,
+          authorizedAddress: reKeyToAddressValue,
           reKeyAccount: account,
           network: network,
           ...result,
@@ -208,11 +222,9 @@ const ReKeyAccountModal: FC<IModalProps> = ({ onClose }) => {
   };
   const handleCancelClick = () => handleClose();
   const handleClose = () => {
+    resetReKeyToAddress();
     onClose && onClose();
   };
-  const handleAuthAddressChange = (address: string) => setAuthAddress(address);
-  const handleOnAuthAddressError = (error: string | null) =>
-    setAuthAddressError(error);
   const handleOnAuthenticationModalConfirm = async (
     result: TEncryptionCredentials
   ) => {
@@ -254,7 +266,7 @@ const ReKeyAccountModal: FC<IModalProps> = ({ onClose }) => {
 
       // re-key account
       if (reKeyType === 'rekey') {
-        if (confirming && authAddress) {
+        if (confirming && reKeyToAddressValue.length > 0) {
           return (
             <ReKeyAccountConfirmingModalContent
               accounts={accounts}
@@ -263,7 +275,7 @@ const ReKeyAccountModal: FC<IModalProps> = ({ onClose }) => {
                 convertPublicKeyToAVMAddress(account.publicKey)
               }
               network={network}
-              reKeyAddress={authAddress}
+              reKeyAddress={reKeyToAddressValue}
               reKeyType={reKeyType}
             />
           );
@@ -337,13 +349,17 @@ const ReKeyAccountModal: FC<IModalProps> = ({ onClose }) => {
 
               {/*re-key to*/}
               <AddressInput
+                _context={_context}
                 accounts={accounts}
                 allowWatchAccounts={true}
-                label={t<string>('labels.reKeyTo')}
-                onChange={handleAuthAddressChange}
-                onError={handleOnAuthAddressError}
-                required={true}
-                value={authAddress}
+                error={reKeyToAddressError}
+                label={reKeyToAddressLabel}
+                onBlur={reKeyToAddressOnBlur}
+                onChange={reKeyToAddressOnChange}
+                onSelect={reKeyToAddressOnSelect}
+                required={isReKeyToAddressRequired}
+                validate={validateReKeyToAddress}
+                value={reKeyToAddressValue}
               />
             </VStack>
           </VStack>
@@ -377,6 +393,13 @@ const ReKeyAccountModal: FC<IModalProps> = ({ onClose }) => {
 
           <Button
             onClick={handleReKeyOrUndoClick}
+            rightIcon={
+              reKeyType === 'undo' ? (
+                <IoArrowUndoOutline />
+              ) : (
+                <IoLockClosedOutline />
+              )
+            }
             size="lg"
             variant="solid"
             w="full"
diff --git a/src/extension/modals/RegistrationImportAccountViaQRCodeModal/RegistrationImportAccountViaQRCodeModal.tsx b/src/extension/modals/RegistrationImportAccountViaQRCodeModal/RegistrationImportAccountViaQRCodeModal.tsx
index b568ba33..779fe8af 100644
--- a/src/extension/modals/RegistrationImportAccountViaQRCodeModal/RegistrationImportAccountViaQRCodeModal.tsx
+++ b/src/extension/modals/RegistrationImportAccountViaQRCodeModal/RegistrationImportAccountViaQRCodeModal.tsx
@@ -11,7 +11,7 @@ import {
 } from '@chakra-ui/react';
 import React, { FC, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { IoArrowBackOutline } from 'react-icons/io5';
+import { IoArrowBackOutline, IoDownloadOutline } from 'react-icons/io5';
 
 // components
 import AccountItem from '@extension/components/AccountItem';
@@ -214,6 +214,7 @@ const RegistrationImportAccountViaQRCodeModal: FC<IProps> = ({
                 <Button
                   isLoading={saving}
                   onClick={handleImportClick(accounts)}
+                  rightIcon={<IoDownloadOutline />}
                   size="lg"
                   variant="solid"
                   w="full"
diff --git a/src/extension/modals/RemoveAssetsModal/RemoveAssetsModal.tsx b/src/extension/modals/RemoveAssetsModal/RemoveAssetsModal.tsx
index 3b438e82..7aca652a 100644
--- a/src/extension/modals/RemoveAssetsModal/RemoveAssetsModal.tsx
+++ b/src/extension/modals/RemoveAssetsModal/RemoveAssetsModal.tsx
@@ -13,6 +13,7 @@ import {
 import BigNumber from 'bignumber.js';
 import React, { FC, ReactNode } from 'react';
 import { useTranslation } from 'react-i18next';
+import { IoEyeOffOutline, IoTrashOutline } from 'react-icons/io5';
 import { useDispatch } from 'react-redux';
 import { useNavigate } from 'react-router-dom';
 
@@ -434,6 +435,7 @@ const RemoveAssetsModal: FC<IRemoveAssetsModalProps> = ({ onClose }) => {
 
             <Button
               onClick={handleRemoveARC0200AssetClick}
+              rightIcon={<IoEyeOffOutline />}
               size="lg"
               variant="solid"
               w="full"
@@ -451,6 +453,7 @@ const RemoveAssetsModal: FC<IRemoveAssetsModalProps> = ({ onClose }) => {
 
             <Button
               onClick={handleRemoveStandardAssetClick}
+              rightIcon={<IoTrashOutline />}
               size="lg"
               variant="solid"
               w="full"
diff --git a/src/extension/modals/RemovePasskeyModal/RemovePasskeyModal.tsx b/src/extension/modals/RemovePasskeyModal/RemovePasskeyModal.tsx
index bf5145f4..e169bac1 100644
--- a/src/extension/modals/RemovePasskeyModal/RemovePasskeyModal.tsx
+++ b/src/extension/modals/RemovePasskeyModal/RemovePasskeyModal.tsx
@@ -13,6 +13,7 @@ import {
 } from '@chakra-ui/react';
 import React, { FC, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
+import { IoTrashOutline } from 'react-icons/io5';
 import { GoShieldSlash } from 'react-icons/go';
 import { Radio } from 'react-loader-spinner';
 import { useDispatch } from 'react-redux';
@@ -265,6 +266,7 @@ const RemovePasskeyModal: FC<IProps> = ({ onClose, removePasskey }) => {
               <Button
                 isLoading={isLoading}
                 onClick={handleRemoveClick}
+                rightIcon={<IoTrashOutline />}
                 size="lg"
                 variant="solid"
                 w="full"
diff --git a/src/extension/modals/ScanQRCodeModal/ScanQRCodeModal.tsx b/src/extension/modals/ScanQRCodeModal/ScanQRCodeModal.tsx
index b00d5ba5..bb98ca52 100644
--- a/src/extension/modals/ScanQRCodeModal/ScanQRCodeModal.tsx
+++ b/src/extension/modals/ScanQRCodeModal/ScanQRCodeModal.tsx
@@ -1,6 +1,6 @@
 import { Modal } from '@chakra-ui/react';
 import { TransactionType } from 'algosdk';
-import React, { FC, useState } from 'react';
+import React, { type FC, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { IoArrowBackOutline } from 'react-icons/io5';
 
@@ -51,13 +51,13 @@ const ScanQRCodeModal: FC<IModalProps> = ({ onClose }) => {
   const networks = useSelectNetworks();
   const scanQRCodeModal = useSelectScanQRCodeModal();
   // state
-  // const [pagination, setPagination] = useState<[number, number] | null>(null);
   const [scanViaCamera, setScanViaCamera] = useState<boolean>(false);
   const [scanViaScreenCapture, setScanViaScreenCapture] =
     useState<boolean>(false);
   const [scanViaTab, setScanViaTab] = useState<boolean>(false);
   const [uris, setURIs] = useState<string[]>([]);
   // misc
+  const _context = 'scan-qr-code-modal';
   const reset = () => {
     setURIs([]);
     setScanViaCamera(false);
@@ -133,6 +133,7 @@ const ScanQRCodeModal: FC<IModalProps> = ({ onClose }) => {
               if (isARC0300SchemaPaginationComplete(schemas)) {
                 return (
                   <ARC0300AccountImportModalContent
+                    _context={_context}
                     cancelButtonIcon={<IoArrowBackOutline />}
                     cancelButtonLabel={t<string>('buttons.previous')}
                     onComplete={handleClose}
@@ -163,6 +164,7 @@ const ScanQRCodeModal: FC<IModalProps> = ({ onClose }) => {
             ) {
               return (
                 <ARC0300AssetAddModalContent
+                  _context={_context}
                   cancelButtonIcon={<IoArrowBackOutline />}
                   cancelButtonLabel={t<string>('buttons.previous')}
                   onComplete={handleClose}
@@ -193,6 +195,7 @@ const ScanQRCodeModal: FC<IModalProps> = ({ onClose }) => {
                 case TransactionType.keyreg:
                   return (
                     <ARC0300KeyRegistrationTransactionSendModalContent
+                      _context={_context}
                       cancelButtonIcon={<IoArrowBackOutline />}
                       cancelButtonLabel={t<string>('buttons.previous')}
                       onComplete={handleClose}
diff --git a/src/extension/modals/SendAssetModal/SendAssetModal.tsx b/src/extension/modals/SendAssetModal/SendAssetModal.tsx
index b5b89525..734b0ddb 100644
--- a/src/extension/modals/SendAssetModal/SendAssetModal.tsx
+++ b/src/extension/modals/SendAssetModal/SendAssetModal.tsx
@@ -11,9 +11,13 @@ import {
 } from '@chakra-ui/react';
 import { type Transaction } from 'algosdk';
 import BigNumber from 'bignumber.js';
-import React, { type ChangeEvent, type FC, useEffect, useState } from 'react';
+import React, { type FC, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { IoArrowBackOutline, IoArrowForwardOutline } from 'react-icons/io5';
+import {
+  IoArrowBackOutline,
+  IoArrowForwardOutline,
+  IoArrowUpOutline,
+} from 'react-icons/io5';
 import { useDispatch } from 'react-redux';
 
 // components
@@ -47,16 +51,16 @@ import { create as createNotification } from '@extension/features/notifications'
 import {
   createUnsignedTransactionsThunk,
   reset as resetSendAssets,
-  setAmount,
-  setFromAddress,
-  setNote,
-  setSelectedAsset,
-  setToAddress,
+  setAsset,
+  setSender,
   submitTransactionThunk,
 } from '@extension/features/send-assets';
 
 // hooks
+import useAddressInput from '@extension/hooks/useAddressInput';
+import useAmountInput from '@extension/hooks/useAmountInput';
 import useDefaultTextColor from '@extension/hooks/useDefaultTextColor';
+import useGenericInput from '@extension/hooks/useGenericInput';
 
 // modals
 import AuthenticationModal from '@extension/modals/AuthenticationModal';
@@ -68,13 +72,10 @@ import {
   useSelectAvailableAccountsForSelectedNetwork,
   useSelectLogger,
   useSelectSettingsSelectedNetwork,
-  useSelectSendAssetAmountInStandardUnits,
+  useSelectSendAssetAsset,
   useSelectSendAssetConfirming,
   useSelectSendAssetCreating,
-  useSelectSendAssetFromAccount,
-  useSelectSendAssetNote,
-  useSelectSendAssetSelectedAsset,
-  useSelectSendAssetToAddress,
+  useSelectSendAssetSender,
   useSelectStandardAssetsBySelectedNetwork,
 } from '@extension/selectors';
 
@@ -99,7 +100,6 @@ import type {
 // utils
 import calculateMaxTransactionAmount from '@extension/utils/calculateMaxTransactionAmount';
 import convertPublicKeyToAVMAddress from '@extension/utils/convertPublicKeyToAVMAddress';
-import validateAddressInput from '@extension/utils/validateAddressInput';
 
 const SendAssetModal: FC<IModalProps> = ({ onClose }) => {
   const { t } = useTranslation();
@@ -111,27 +111,66 @@ const SendAssetModal: FC<IModalProps> = ({ onClose }) => {
   } = useDisclosure();
   // selectors
   const accounts = useSelectAccounts();
-  const amountInStandardUnits = useSelectSendAssetAmountInStandardUnits();
   const arc200Assets = useSelectARC0200AssetsBySelectedNetwork();
+  const asset = useSelectSendAssetAsset();
   const availableAccounts = useSelectAvailableAccountsForSelectedNetwork();
   const standardAssets = useSelectStandardAssetsBySelectedNetwork();
   const confirming = useSelectSendAssetConfirming();
   const creating = useSelectSendAssetCreating();
-  const fromAccount = useSelectSendAssetFromAccount();
   const logger = useSelectLogger();
   const network = useSelectSettingsSelectedNetwork();
-  const note = useSelectSendAssetNote();
-  const selectedAsset = useSelectSendAssetSelectedAsset();
-  const toAddress = useSelectSendAssetToAddress();
+  const sender = useSelectSendAssetSender();
   // hooks
   const defaultTextColor = useDefaultTextColor();
+  const {
+    label: amountLabel,
+    onBlur: amountOnBlur,
+    onChange: amountOnChange,
+    onFocus: amountOnFocus,
+    onMaximumAmountClick: amountOnMaximumClick,
+    required: isAmountRequired,
+    reset: resetAmount,
+    setValue: setAmountValue,
+    value: amountValue,
+  } = useAmountInput({
+    label: t<string>('labels.amount'),
+    required: true,
+  });
+  const {
+    charactersRemaining: noteCharactersRemaining,
+    error: noteError,
+    label: noteLabel,
+    onBlur: noteOnBlur,
+    onChange: noteOnChange,
+    required: isNoteRequired,
+    reset: resetNote,
+    value: noteValue,
+    validate: validateNote,
+  } = useGenericInput<HTMLTextAreaElement>({
+    characterLimit: TRANSACTION_NOTE_BYTE_LIMIT,
+    label: t<string>('labels.note'),
+    required: false,
+  });
+  const {
+    error: receiverAddressError,
+    label: receiverAddressLabel,
+    onBlur: receiverAddressOnBlur,
+    onChange: receiverAddressOnChange,
+    onSelect: receiverAddressOnSelect,
+    required: isReceiverAddressRequired,
+    reset: resetReceiverAddress,
+    value: receiverAddressValue,
+    validate: validateReceiverAddress,
+  } = useAddressInput({
+    label: t<string>('labels.to'),
+    required: true,
+  });
   // state
-  const [maximumTransactionAmount, setMaximumTransactionAmount] =
+  const [maximumAmountInAtomicUnits, setMaximumAmountInAtomicUnits] =
     useState<string>('0');
-  const [noteError, setNoteError] = useState<string | null>(null);
-  const [toAddressError, setToAddressError] = useState<string | null>(null);
   const [transactions, setTransactions] = useState<Transaction[] | null>(null);
   // misc
+  const _context = 'send-asset-modal';
   const allAssets: (IAssetTypes | INativeCurrency)[] = [
     ...arc200Assets,
     ...standardAssets,
@@ -143,23 +182,12 @@ const SendAssetModal: FC<IModalProps> = ({ onClose }) => {
       return aName < bName ? -1 : aName > bName ? 1 : 0;
     }) // sort each alphabetically by name
     .sort((a, b) => (a.verified === b.verified ? 0 : a.verified ? -1 : 1)); // then sort to bring the verified to the front
-  const isOpen: boolean = !!selectedAsset;
-  const validateToAddress = (value: string) => {
-    let _error = validateAddressInput({
-      field: t<string>('labels.to'),
-      t,
-      required: true,
-      value,
-    });
-
-    setToAddressError(_error);
-
-    return _error;
-  };
+  const isOpen = !!asset && !!sender;
   // handlers
-  const handleAmountChange = (value: string) => dispatch(setAmount(value));
-  const handleAssetChange = (value: IAssetTypes | INativeCurrency) =>
-    dispatch(setSelectedAsset(value));
+  const handleOnAssetSelect = (value: IAssetTypes | INativeCurrency) =>
+    dispatch(setAsset(value));
+  const handleOnSenderAccountSelect = (value: IAccountWithExtendedProps) =>
+    dispatch(setSender(value));
   const handleCancelClick = () => handleClose();
   const handleClose = () => {
     // reset modal store - should close modal
@@ -167,6 +195,9 @@ const SendAssetModal: FC<IModalProps> = ({ onClose }) => {
 
     // reset modal input and transactions
     setTransactions(null);
+    resetAmount();
+    resetNote();
+    resetReceiverAddress();
 
     onClose && onClose();
   };
@@ -174,7 +205,14 @@ const SendAssetModal: FC<IModalProps> = ({ onClose }) => {
     const _functionName = 'handleNextClick';
     let _transactions: Transaction[];
 
-    if (toAddressError || noteError || !!validateToAddress(toAddress || '')) {
+    if (
+      !!noteError ||
+      !!receiverAddressError ||
+      [
+        validateNote(noteValue),
+        validateReceiverAddress(receiverAddressValue),
+      ].some((value) => !!value)
+    ) {
       return;
     }
 
@@ -184,7 +222,13 @@ const SendAssetModal: FC<IModalProps> = ({ onClose }) => {
 
     try {
       _transactions = await dispatch(
-        createUnsignedTransactionsThunk()
+        createUnsignedTransactionsThunk({
+          amountInStandardUnits: amountValue,
+          receiverAddress: receiverAddressValue,
+          ...(noteValue.length > 0 && {
+            note: noteValue,
+          }),
+        })
       ).unwrap();
 
       logger.debug(
@@ -204,44 +248,24 @@ const SendAssetModal: FC<IModalProps> = ({ onClose }) => {
       return;
     }
   };
-  const handleOnAccountSelect =
-    (field: string) => (value: IAccountWithExtendedProps) => {
-      const address = convertPublicKeyToAVMAddress(value.publicKey);
-
-      switch (field) {
-        case 'fromAddress':
-          dispatch(setFromAddress(address));
-          break;
-        default:
-          break;
-      }
-    };
-  const handleOnAddressInputChange = (field: string) => (value: string) => {
-    switch (field) {
-      case 'toAddress':
-        dispatch(setToAddress(value.length > 0 ? value : null));
-        break;
-      default:
-        break;
-    }
-  };
   const handleOnAuthenticationModalConfirm = async (
     result: TEncryptionCredentials
   ) => {
     const _functionName = 'handleOnAuthenticationModalConfirm';
-    let fromAddress: string;
     let hasQuestBeenCompletedToday: boolean = false;
     let questsService: QuestsService;
     let questsSent: boolean = false;
-    let toAccount: IAccount | null;
+    let receiverAccount: IAccount | null;
+    let senderAddress: string;
     let transactionIds: string[];
 
     if (
-      !fromAccount ||
+      !asset ||
       !network ||
+      receiverAddressValue.length <= 0 ||
+      !sender ||
       !transactions ||
-      transactions.length <= 0 ||
-      !toAddress
+      transactions.length <= 0
     ) {
       return;
     }
@@ -262,28 +286,30 @@ const SendAssetModal: FC<IModalProps> = ({ onClose }) => {
           .join(',')}] to the network`
       );
 
-      toAccount =
+      receiverAccount =
         accounts.find(
-          (value) => convertPublicKeyToAVMAddress(value.publicKey) === toAddress
+          (value) =>
+            convertPublicKeyToAVMAddress(value.publicKey) ===
+            receiverAddressValue
         ) || null;
-      fromAddress = convertPublicKeyToAVMAddress(fromAccount.publicKey);
+      senderAddress = convertPublicKeyToAVMAddress(sender.publicKey);
       questsService = new QuestsService({
         logger,
       });
 
       // track the action
-      switch (selectedAsset?.type) {
+      switch (asset?.type) {
         case AssetTypeEnum.ARC0200:
           hasQuestBeenCompletedToday =
             await questsService.hasQuestBeenCompletedTodayByName(
               QuestNameEnum.SendARC0200AssetAction
             );
           questsSent = await questsService.sendARC0200AssetQuest(
-            fromAddress,
-            toAddress,
-            amountInStandardUnits,
+            senderAddress,
+            receiverAddressValue,
+            amountValue,
             {
-              appID: selectedAsset.id,
+              appID: asset.id,
               genesisHash: network.genesisHash,
             }
           );
@@ -294,9 +320,9 @@ const SendAssetModal: FC<IModalProps> = ({ onClose }) => {
               QuestNameEnum.SendNativeCurrencyAction
             );
           questsSent = await questsService.sendNativeCurrencyQuest(
-            fromAddress,
-            toAddress,
-            amountInStandardUnits,
+            senderAddress,
+            receiverAddressValue,
+            amountValue,
             {
               genesisHash: network.genesisHash,
             }
@@ -308,11 +334,11 @@ const SendAssetModal: FC<IModalProps> = ({ onClose }) => {
               QuestNameEnum.SendStandardAssetAction
             );
           questsSent = await questsService.sendStandardAssetQuest(
-            fromAddress,
-            toAddress,
-            amountInStandardUnits,
+            senderAddress,
+            receiverAddressValue,
+            amountValue,
             {
-              assetID: selectedAsset.id,
+              assetID: asset.id,
               genesisHash: network.genesisHash,
             }
           );
@@ -346,9 +372,9 @@ const SendAssetModal: FC<IModalProps> = ({ onClose }) => {
       // force update the account information as we spent fees and refresh all the new transactions
       dispatch(
         updateAccountsThunk({
-          accountIds: toAccount
-            ? [fromAccount.id, toAccount.id]
-            : [fromAccount.id],
+          accountIds: receiverAccount
+            ? [sender.id, receiverAccount.id]
+            : [sender.id],
           forceInformationUpdate: true,
           refreshTransactions: true,
         })
@@ -388,36 +414,12 @@ const SendAssetModal: FC<IModalProps> = ({ onClose }) => {
         break;
     }
   };
-  const handleOnInputChange =
-    (field: string) => (event: ChangeEvent<HTMLTextAreaElement>) => {
-      switch (field) {
-        case 'note':
-          dispatch(
-            setNote(event.target.value.length > 0 ? event.target.value : null)
-          );
-          break;
-        default:
-          break;
-      }
-    };
-  const handleOnInputError = (field: string) => (error: string | null) => {
-    switch (field) {
-      case 'toAddress':
-        setToAddressError(error);
-        break;
-      case 'note':
-        setNoteError(error);
-        break;
-      default:
-        break;
-    }
-  };
   const handlePreviousClick = () => setTransactions(null);
   const handleSendClick = () => onAuthenticationModalOpen();
 
   // renders
   const renderContent = () => {
-    if (!fromAccount || !network || !selectedAsset) {
+    if (!asset || !network || !sender) {
       return <SendAssetModalContentSkeleton />;
     }
 
@@ -429,16 +431,16 @@ const SendAssetModal: FC<IModalProps> = ({ onClose }) => {
       );
     }
 
-    if (toAddress && transactions && transactions.length > 0) {
+    if (receiverAddressValue && transactions && transactions.length > 0) {
       return (
         <SendAssetModalSummaryContent
           accounts={accounts}
-          amountInStandardUnits={amountInStandardUnits}
-          asset={selectedAsset}
-          fromAccount={fromAccount}
+          amountInStandardUnits={amountValue}
+          asset={asset}
+          fromAccount={sender}
           network={network}
-          note={note}
-          toAddress={toAddress}
+          note={noteValue}
+          toAddress={receiverAddressValue}
           transactions={transactions}
         />
       );
@@ -448,18 +450,23 @@ const SendAssetModal: FC<IModalProps> = ({ onClose }) => {
       <VStack spacing={DEFAULT_GAP - 2} w="full">
         {/*amount*/}
         <AmountInput
-          account={fromAccount}
-          asset={selectedAsset}
-          disabled={creating}
+          account={sender}
+          asset={asset}
+          isDisabled={creating}
+          label={amountLabel}
           network={network}
-          maximumTransactionAmount={maximumTransactionAmount}
-          onChange={handleAmountChange}
-          required={true}
-          value={amountInStandardUnits}
+          maximumAmountInAtomicUnits={maximumAmountInAtomicUnits}
+          onBlur={amountOnBlur({ asset, maximumAmountInAtomicUnits })}
+          onChange={amountOnChange}
+          onFocus={amountOnFocus}
+          onMaximumAmountClick={amountOnMaximumClick}
+          required={isAmountRequired}
+          value={amountValue}
         />
 
         {/*select asset*/}
         <AssetSelect
+          _context={_context}
           assets={[
             network.nativeCurrency, // add the native currency to the front
             ...allAssets,
@@ -467,44 +474,53 @@ const SendAssetModal: FC<IModalProps> = ({ onClose }) => {
           disabled={creating}
           label={t<string>('labels.asset')}
           network={network}
-          onSelect={handleAssetChange}
+          onSelect={handleOnAssetSelect}
           required={true}
-          value={selectedAsset}
+          value={asset}
         />
 
         {/*from account*/}
         <AccountSelect
+          _context={_context}
           accounts={availableAccounts}
           disabled={creating}
           label={t<string>('labels.from')}
-          onSelect={handleOnAccountSelect('fromAddress')}
+          onSelect={handleOnSenderAccountSelect}
           required={true}
-          value={fromAccount}
+          selectModalTitle={t<string>('headings.selectSenderAccount')}
+          value={sender}
         />
 
         {/*to address*/}
         <AddressInput
+          _context={_context}
           accounts={accounts}
-          disabled={creating}
-          error={toAddressError}
-          label={t<string>('labels.to')}
-          onChange={handleOnAddressInputChange('toAddress')}
-          onError={handleOnInputError('toAddress')}
-          required={true}
-          validate={validateToAddress}
-          value={toAddress || ''}
+          error={receiverAddressError}
+          isDisabled={creating}
+          label={receiverAddressLabel}
+          onBlur={receiverAddressOnBlur}
+          onChange={receiverAddressOnChange}
+          onSelect={receiverAddressOnSelect}
+          required={isReceiverAddressRequired}
+          selectButtonLabel={t<string>('buttons.selectReceiverAccount')}
+          selectModalTitle={t<string>('headings.selectReceiverAccount')}
+          validate={validateReceiverAddress}
+          value={receiverAddressValue}
         />
 
         {/*note*/}
         <GenericTextarea
-          characterLimit={TRANSACTION_NOTE_BYTE_LIMIT}
+          charactersRemaining={noteCharactersRemaining}
           error={noteError}
+          label={noteLabel}
           isDisabled={creating}
-          label={t<string>('labels.note')}
-          onChange={handleOnInputChange('note')}
-          onError={handleOnInputError('note')}
+          onBlur={noteOnBlur}
+          onChange={noteOnChange}
           placeholder={t<string>('placeholders.enterNote')}
-          value={note || ''}
+          required={isNoteRequired}
+          resize="vertical"
+          validate={validateNote}
+          value={noteValue}
         />
       </VStack>
     );
@@ -527,7 +543,13 @@ const SendAssetModal: FC<IModalProps> = ({ onClose }) => {
             {t<string>('buttons.previous')}
           </Button>
 
-          <Button onClick={handleSendClick} size="lg" variant="solid" w="full">
+          <Button
+            onClick={handleSendClick}
+            rightIcon={<IoArrowUpOutline />}
+            size="lg"
+            variant="solid"
+            w="full"
+          >
             {t<string>('buttons.send')}
           </Button>
         </HStack>
@@ -559,13 +581,13 @@ const SendAssetModal: FC<IModalProps> = ({ onClose }) => {
     );
   };
   const renderHeader = () => {
-    switch (selectedAsset?.type) {
+    switch (asset?.type) {
       case AssetTypeEnum.ARC0200:
       case AssetTypeEnum.Native:
         return (
           <Heading color={defaultTextColor} size="md" textAlign="center">
             {t<string>('headings.sendAsset', {
-              asset: selectedAsset.symbol,
+              asset: asset.symbol,
             })}
           </Heading>
         );
@@ -573,7 +595,7 @@ const SendAssetModal: FC<IModalProps> = ({ onClose }) => {
         return (
           <Heading color={defaultTextColor} size="md" textAlign="center">
             {t<string>('headings.sendAsset', {
-              asset: selectedAsset?.unitName || 'Asset',
+              asset: asset?.unitName || 'Asset',
             })}
           </Heading>
         );
@@ -589,30 +611,29 @@ const SendAssetModal: FC<IModalProps> = ({ onClose }) => {
   };
 
   useEffect(() => {
-    let newMaximumTransactionAmount: BigNumber;
+    let _maximumAmountInAtomicUnits: BigNumber;
 
-    if (fromAccount && network && selectedAsset) {
-      newMaximumTransactionAmount = calculateMaxTransactionAmount({
-        account: fromAccount,
-        asset: selectedAsset,
-        network,
-      });
+    if (!asset || !network || !sender) {
+      setMaximumAmountInAtomicUnits('0');
+
+      return;
+    }
+
+    _maximumAmountInAtomicUnits = calculateMaxTransactionAmount({
+      account: sender,
+      asset,
+      network,
+    });
 
-      setMaximumTransactionAmount(newMaximumTransactionAmount.toString());
+    setMaximumAmountInAtomicUnits(_maximumAmountInAtomicUnits.toString());
 
-      // if the amount exceeds the new maximum transaction amount, set the amount to the maximum transaction amount
-      if (
-        amountInStandardUnits &&
-        new BigNumber(amountInStandardUnits).gt(newMaximumTransactionAmount)
-      ) {
-        dispatch(setAmount(newMaximumTransactionAmount.toString()));
-      }
+    // if the amount exceeds the new maximum transaction amount, set the amount to the maximum transaction amount
+    if (new BigNumber(amountValue).gt(_maximumAmountInAtomicUnits)) {
+      setAmountValue(_maximumAmountInAtomicUnits.toString());
 
       return;
     }
-
-    setMaximumTransactionAmount('0');
-  }, [fromAccount, network, selectedAsset]);
+  }, [asset, network, sender]);
 
   return (
     <>
diff --git a/src/extension/modals/ShareAddressModal/ShareAddressModal.tsx b/src/extension/modals/ShareAddressModal/ShareAddressModal.tsx
index c039bb3a..6fd7ad0a 100644
--- a/src/extension/modals/ShareAddressModal/ShareAddressModal.tsx
+++ b/src/extension/modals/ShareAddressModal/ShareAddressModal.tsx
@@ -14,9 +14,9 @@ import {
 } from '@chakra-ui/react';
 import { sanitize } from 'dompurify';
 import { toString } from 'qrcode';
-import React, { FC, useEffect, useState } from 'react';
+import React, { type FC, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { IoQrCodeOutline } from 'react-icons/io5';
+import { IoCheckmarkOutline, IoQrCodeOutline } from 'react-icons/io5';
 
 // components
 import Button from '@extension/components/Button';
@@ -28,7 +28,6 @@ import PillSwitch from '@extension/components/PillSwitch';
 import { BODY_BACKGROUND_COLOR, DEFAULT_GAP } from '@extension/constants';
 
 // hooks
-import useColorModeValue from '@extension/hooks/useColorModeValue';
 import useDefaultTextColor from '@extension/hooks/useDefaultTextColor';
 import useTextBackgroundColor from '@extension/hooks/useTextBackgroundColor';
 
@@ -39,7 +38,6 @@ import { useSelectLogger, useSelectSettings } from '@extension/selectors';
 import { theme } from '@extension/theme';
 
 // types
-import type { ISettings } from '@extension/types';
 import type { IProps } from './types';
 
 // utils
@@ -49,7 +47,7 @@ const ShareAddressModal: FC<IProps> = ({ address, isOpen, onClose }) => {
   const { t } = useTranslation();
   // selectors
   const logger = useSelectLogger();
-  const settings: ISettings = useSelectSettings();
+  const settings = useSelectSettings();
   // hooks
   const defaultTextColor = useDefaultTextColor();
   const textBackgroundColor = useTextBackgroundColor();
@@ -100,12 +98,14 @@ const ShareAddressModal: FC<IProps> = ({ address, isOpen, onClose }) => {
         borderTopRadius={theme.radii['3xl']}
         borderBottomRadius={0}
       >
+        {/*header*/}
         <ModalHeader justifyContent="center" px={DEFAULT_GAP}>
           <Heading color={defaultTextColor} size="md" textAlign="center">
             {t<string>('headings.shareAddress')}
           </Heading>
         </ModalHeader>
 
+        {/*body*/}
         <ModalBody px={DEFAULT_GAP}>
           <VStack alignItems="center" spacing={DEFAULT_GAP / 3} w="full">
             {settings.advanced.allowDidTokenFormat && (
@@ -142,7 +142,7 @@ const ShareAddressModal: FC<IProps> = ({ address, isOpen, onClose }) => {
               <Box
                 backgroundColor={textBackgroundColor}
                 borderRadius={theme.radii['3xl']}
-                px={2}
+                px={DEFAULT_GAP / 3}
                 py={1}
               >
                 <Tooltip label={getFormatFromIndex(pillIndex, address)}>
@@ -166,8 +166,16 @@ const ShareAddressModal: FC<IProps> = ({ address, isOpen, onClose }) => {
             </HStack>
           </VStack>
         </ModalBody>
+
+        {/*footer*/}
         <ModalFooter p={DEFAULT_GAP}>
-          <Button onClick={onClose} size="lg" variant="solid" w="full">
+          <Button
+            onClick={handleClose}
+            rightIcon={<IoCheckmarkOutline />}
+            size="lg"
+            variant="solid"
+            w="full"
+          >
             {t<string>('buttons.ok')}
           </Button>
         </ModalFooter>
diff --git a/src/extension/modals/SignMessageModal/SignMessageModal.tsx b/src/extension/modals/SignMessageModal/SignMessageModal.tsx
index 28348a1c..4cadae47 100644
--- a/src/extension/modals/SignMessageModal/SignMessageModal.tsx
+++ b/src/extension/modals/SignMessageModal/SignMessageModal.tsx
@@ -17,6 +17,7 @@ import {
 import { encode as encodeBase64 } from '@stablelib/base64';
 import React, { FC } from 'react';
 import { useTranslation } from 'react-i18next';
+import { IoCreateOutline } from 'react-icons/io5';
 import { useDispatch } from 'react-redux';
 
 // components
@@ -62,6 +63,7 @@ import { theme } from '@extension/theme';
 // types
 import type {
   IAccountWithExtendedProps,
+  IBackgroundRootState,
   IAppThunkDispatch,
   IMainRootState,
   IModalProps,
@@ -71,7 +73,6 @@ import type {
 // utils
 import convertPublicKeyToAVMAddress from '@extension/utils/convertPublicKeyToAVMAddress';
 import signBytes from '@extension/utils/signBytes';
-import IBackgroundRootState from '../../types/states/IBackgroundRootState';
 
 const SignMessageModal: FC<IModalProps> = ({ onClose }) => {
   const { t } = useTranslation();
@@ -94,6 +95,8 @@ const SignMessageModal: FC<IModalProps> = ({ onClose }) => {
     setSigner,
   } = useSignMessageModal();
   const subTextColor = useSubTextColor();
+  // misc
+  const _context = 'sign-message-modal';
   // handlers
   const handleAccountSelect = (account: IAccountWithExtendedProps) =>
     setSigner(account);
@@ -238,6 +241,7 @@ const SignMessageModal: FC<IModalProps> = ({ onClose }) => {
               )}:`}</Text>
 
               <AccountSelect
+                _context={_context}
                 accounts={authorizedAccounts}
                 allowWatchAccounts={false}
                 onSelect={handleAccountSelect}
@@ -323,6 +327,7 @@ const SignMessageModal: FC<IModalProps> = ({ onClose }) => {
 
               <Button
                 onClick={handleSignClick}
+                rightIcon={<IoCreateOutline />}
                 size="lg"
                 variant="solid"
                 w="full"
diff --git a/src/extension/modals/SignTransactionsModal/ApplicationTransactionContent.tsx b/src/extension/modals/SignTransactionsModal/ApplicationTransactionContent.tsx
index fc484af1..3e3940ec 100644
--- a/src/extension/modals/SignTransactionsModal/ApplicationTransactionContent.tsx
+++ b/src/extension/modals/SignTransactionsModal/ApplicationTransactionContent.tsx
@@ -105,7 +105,7 @@ const ApplicationTransactionContent: FC<ITransactionBodyProps> = ({
       {!hideNetwork && (
         <ModalItem
           label={`${t<string>('labels.network')}:`}
-          value={<NetworkBadge network={network} size="sm" />}
+          value={<NetworkBadge network={network} size="xs" />}
         />
       )}
 
diff --git a/src/extension/modals/SignTransactionsModal/AssetConfigTransactionContent.tsx b/src/extension/modals/SignTransactionsModal/AssetConfigTransactionContent.tsx
index 28823824..59d2966e 100644
--- a/src/extension/modals/SignTransactionsModal/AssetConfigTransactionContent.tsx
+++ b/src/extension/modals/SignTransactionsModal/AssetConfigTransactionContent.tsx
@@ -90,7 +90,7 @@ const AssetConfigTransactionContent: FC<IAssetTransactionBodyProps> = ({
         {!hideNetwork && (
           <ModalItem
             label={`${t<string>('labels.network')}:`}
-            value={<NetworkBadge network={network} size="sm" />}
+            value={<NetworkBadge network={network} size="xs" />}
           />
         )}
 
diff --git a/src/extension/modals/SignTransactionsModal/AssetCreateTransactionContent.tsx b/src/extension/modals/SignTransactionsModal/AssetCreateTransactionContent.tsx
index 15f7e004..02ec2cc4 100644
--- a/src/extension/modals/SignTransactionsModal/AssetCreateTransactionContent.tsx
+++ b/src/extension/modals/SignTransactionsModal/AssetCreateTransactionContent.tsx
@@ -74,7 +74,7 @@ const AssetCreateTransactionContent: FC<ITransactionBodyProps> = ({
         {!hideNetwork && (
           <ModalItem
             label={`${t<string>('labels.network')}:`}
-            value={<NetworkBadge network={network} size="sm" />}
+            value={<NetworkBadge network={network} size="xs" />}
           />
         )}
 
diff --git a/src/extension/modals/SignTransactionsModal/AssetFreezeTransactionContent.tsx b/src/extension/modals/SignTransactionsModal/AssetFreezeTransactionContent.tsx
index f9e9338c..1986e776 100644
--- a/src/extension/modals/SignTransactionsModal/AssetFreezeTransactionContent.tsx
+++ b/src/extension/modals/SignTransactionsModal/AssetFreezeTransactionContent.tsx
@@ -148,7 +148,7 @@ const AssetFreezeTransactionContent: FC<IAssetTransactionBodyProps> = ({
         {!hideNetwork && (
           <ModalItem
             label={`${t<string>('labels.network')}:`}
-            value={<NetworkBadge network={network} size="sm" />}
+            value={<NetworkBadge network={network} size="xs" />}
           />
         )}
 
diff --git a/src/extension/modals/SignTransactionsModal/AssetTransferTransactionContent.tsx b/src/extension/modals/SignTransactionsModal/AssetTransferTransactionContent.tsx
index db183f0f..5cab4a0f 100644
--- a/src/extension/modals/SignTransactionsModal/AssetTransferTransactionContent.tsx
+++ b/src/extension/modals/SignTransactionsModal/AssetTransferTransactionContent.tsx
@@ -134,7 +134,7 @@ const AssetTransferTransactionContent: FC<IAssetTransactionBodyProps> = ({
         {!hideNetwork && (
           <ModalItem
             label={`${t<string>('labels.network')}:`}
-            value={<NetworkBadge network={network} size="sm" />}
+            value={<NetworkBadge network={network} size="xs" />}
           />
         )}
 
diff --git a/src/extension/modals/SignTransactionsModal/AtomicTransactionsContent.tsx b/src/extension/modals/SignTransactionsModal/AtomicTransactionsContent.tsx
index 4e7e7ec0..e06fb158 100644
--- a/src/extension/modals/SignTransactionsModal/AtomicTransactionsContent.tsx
+++ b/src/extension/modals/SignTransactionsModal/AtomicTransactionsContent.tsx
@@ -327,7 +327,7 @@ const AtomicTransactionsContent: FC<IAtomicTransactionsContentProps> = ({
       {network && (
         <ModalItem
           label={t<string>('labels.network')}
-          value={<NetworkBadge network={network} />}
+          value={<NetworkBadge network={network} size="xs" />}
         />
       )}
 
diff --git a/src/extension/modals/SignTransactionsModal/GroupOfTransactionsContent.tsx b/src/extension/modals/SignTransactionsModal/GroupOfTransactionsContent.tsx
index f6f6ed6e..654c3946 100644
--- a/src/extension/modals/SignTransactionsModal/GroupOfTransactionsContent.tsx
+++ b/src/extension/modals/SignTransactionsModal/GroupOfTransactionsContent.tsx
@@ -124,7 +124,7 @@ const GroupOfTransactionsContent: FC<IGroupOfTransactionsContentProps> = ({
               {network && (
                 <ModalItem
                   label={t<string>('labels.network')}
-                  value={<NetworkBadge network={network} />}
+                  value={<NetworkBadge network={network} size="xs" />}
                 />
               )}
 
diff --git a/src/extension/modals/SignTransactionsModal/PaymentTransactionContent.tsx b/src/extension/modals/SignTransactionsModal/PaymentTransactionContent.tsx
index 05e94939..65ed5c63 100644
--- a/src/extension/modals/SignTransactionsModal/PaymentTransactionContent.tsx
+++ b/src/extension/modals/SignTransactionsModal/PaymentTransactionContent.tsx
@@ -98,7 +98,7 @@ const PaymentTransactionContent: FC<ITransactionBodyProps> = ({
       {!hideNetwork && (
         <ModalItem
           label={`${t<string>('labels.network')}:`}
-          value={<NetworkBadge network={network} size="sm" />}
+          value={<NetworkBadge network={network} size="xs" />}
         />
       )}
 
diff --git a/src/extension/modals/SignTransactionsModal/SignTransactionsModal.tsx b/src/extension/modals/SignTransactionsModal/SignTransactionsModal.tsx
index 450610c0..74149664 100644
--- a/src/extension/modals/SignTransactionsModal/SignTransactionsModal.tsx
+++ b/src/extension/modals/SignTransactionsModal/SignTransactionsModal.tsx
@@ -18,7 +18,7 @@ import { decode as decodeBase64 } from '@stablelib/base64';
 import { Transaction } from 'algosdk';
 import React, { FC, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { IoArrowBackOutline } from 'react-icons/io5';
+import { IoArrowBackOutline, IoCreateOutline } from 'react-icons/io5';
 import { useDispatch } from 'react-redux';
 
 // components
@@ -337,6 +337,7 @@ const SignTransactionsModal: FC<IModalProps> = ({ onClose }) => {
               <Button
                 isLoading={signing}
                 onClick={handleSignClick}
+                rightIcon={<IoCreateOutline />}
                 size="lg"
                 variant="solid"
                 w="full"
diff --git a/src/extension/pages/AccountPage/AccountPage.tsx b/src/extension/pages/AccountPage/AccountPage.tsx
index 1cce3bdb..5996ae98 100644
--- a/src/extension/pages/AccountPage/AccountPage.tsx
+++ b/src/extension/pages/AccountPage/AccountPage.tsx
@@ -1,8 +1,9 @@
 import {
+  Heading,
   HStack,
   Icon,
   Spacer,
-  StackProps,
+  type StackProps,
   Tab,
   TabList,
   TabPanels,
@@ -13,14 +14,14 @@ import {
   VStack,
 } from '@chakra-ui/react';
 import BigNumber from 'bignumber.js';
-import React, { FC, useEffect, useState } from 'react';
+import React, { type FC, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import {
   IoAdd,
   IoCloudOfflineOutline,
-  IoCreateOutline,
   IoLockClosedOutline,
   IoLockOpenOutline,
+  IoPencil,
   IoQrCodeOutline,
   IoTrashOutline,
 } from 'react-icons/io5';
@@ -31,7 +32,6 @@ import { useNavigate } from 'react-router-dom';
 import ActivityTab from '@extension/components/ActivityTab';
 import AssetsTab from '@extension/components/AssetsTab';
 import CopyIconButton from '@extension/components/CopyIconButton';
-import EditableAccountNameField from '@extension/components/EditableAccountNameField';
 import EmptyState from '@extension/components/EmptyState';
 import IconButton from '@extension/components/IconButton';
 import OpenTabIconButton from '@extension/components/OpenTabIconButton';
@@ -56,7 +56,6 @@ import { AccountTabEnum } from '@extension/enums';
 // features
 import {
   removeAccountByIdThunk,
-  saveAccountNameThunk,
   saveActiveAccountDetails,
   updateAccountsThunk,
 } from '@extension/features/accounts';
@@ -73,7 +72,8 @@ import usePrimaryColorScheme from '@extension/hooks/usePrimaryColorScheme';
 import useSubTextColor from '@extension/hooks/useSubTextColor';
 
 // modals
-import ShareAddressModal from '@extension/modals//ShareAddressModal';
+import EditAccountModal from '@extension/modals/EditAccountModal';
+import ShareAddressModal from '@extension/modals/ShareAddressModal';
 
 // selectors
 import {
@@ -87,7 +87,6 @@ import {
   useSelectIsOnline,
   useSelectNetworks,
   useSelectSettingsPreferredBlockExplorer,
-  useSelectAccountsSaving,
   useSelectSettingsSelectedNetwork,
   useSelectSettings,
 } from '@extension/selectors';
@@ -110,6 +109,11 @@ import isReKeyedAuthAccountAvailable from '@extension/utils/isReKeyedAuthAccount
 const AccountPage: FC = () => {
   const { t } = useTranslation();
   const dispatch = useDispatch<IAppThunkDispatch<IMainRootState>>();
+  const {
+    isOpen: isEditAccountModalOpen,
+    onClose: onEditAccountModalClose,
+    onOpen: onEditAccountModalOpen,
+  } = useDisclosure();
   const {
     isOpen: isShareAddressModalOpen,
     onClose: onShareAddressModalClose,
@@ -128,13 +132,11 @@ const AccountPage: FC = () => {
   const network = useSelectSettingsSelectedNetwork();
   const networks = useSelectNetworks();
   const explorer = useSelectSettingsPreferredBlockExplorer();
-  const savingAccounts = useSelectAccountsSaving();
   const settings = useSelectSettings();
   // hooks
+  const defaultTextColor = useDefaultTextColor();
   const primaryColorScheme = usePrimaryColorScheme();
   const subTextColor = useSubTextColor();
-  // state
-  const [isEditing, setIsEditing] = useState<boolean>(false);
   // misc
   const _context = 'account-page';
   const canReKeyAccount = () => {
@@ -166,20 +168,7 @@ const AccountPage: FC = () => {
     }
   };
   const handleAddAccountClick = () => navigate(ADD_ACCOUNT_ROUTE);
-  const handleEditAccountNameCancel = () => setIsEditing(false);
-  const handleEditAccountNameClick = () => setIsEditing(!isEditing);
-  const handleEditAccountNameSubmit = (value: string | null) => {
-    if (account) {
-      dispatch(
-        saveAccountNameThunk({
-          accountId: account.id,
-          name: value,
-        })
-      );
-    }
-
-    setIsEditing(false);
-  };
+  const handleOnEditAccountClick = () => onEditAccountModalOpen();
   const handleNetworkSelect = (value: INetwork) => {
     dispatch(
       saveSettingsToStorageThunk({
@@ -238,12 +227,18 @@ const AccountPage: FC = () => {
     const headerContainerProps: StackProps = {
       alignItems: 'flex-start',
       px: DEFAULT_GAP - 2,
+      spacing: DEFAULT_GAP / 3,
       w: 'full',
     };
     let address: string;
 
     if (fetchingAccounts || fetchingSettings) {
-      return <AccountPageSkeletonContent {...headerContainerProps} />;
+      return (
+        <AccountPageSkeletonContent
+          {...headerContainerProps}
+          pt={DEFAULT_GAP - 2}
+        />
+      );
     }
 
     if (account && accountInformation && network) {
@@ -256,7 +251,11 @@ const AccountPage: FC = () => {
           {/*header*/}
           <VStack {...headerContainerProps}>
             {/*network connectivity & network selection*/}
-            <HStack minH={ACCOUNT_PAGE_HEADER_ITEM_HEIGHT} w="full">
+            <HStack
+              minH={ACCOUNT_PAGE_HEADER_ITEM_HEIGHT}
+              pt={DEFAULT_GAP - 2}
+              w="full"
+            >
               {!online && (
                 <Tooltip
                   aria-label="Offline icon"
@@ -280,29 +279,48 @@ const AccountPage: FC = () => {
                 _context={_context}
                 networks={networks}
                 onSelect={handleNetworkSelect}
+                size="xs"
                 value={network}
               />
             </HStack>
 
-            {/*name/address and native currency balance*/}
+            {/*name/address*/}
+            <VStack alignItems="flex-start" spacing={DEFAULT_GAP / 3} w="full">
+              <Tooltip label={account.name || address}>
+                <Heading
+                  color={defaultTextColor}
+                  maxW="650px" // full address length
+                  noOfLines={1}
+                  size="md"
+                  textAlign="left"
+                  w="full"
+                >
+                  {account.name || address}
+                </Heading>
+              </Tooltip>
+
+              {/*address*/}
+              {account.name && (
+                <Tooltip label={address}>
+                  <Text
+                    color={subTextColor}
+                    fontSize="xs"
+                    textAlign="left"
+                    w="full"
+                  >
+                    {ellipseAddress(address, { end: 15, start: 15 })}
+                  </Text>
+                </Tooltip>
+              )}
+            </VStack>
+
+            {/*balance*/}
             <HStack
               alignItems="center"
-              h={ACCOUNT_PAGE_HEADER_ITEM_HEIGHT}
+              justifyContent="flex-end"
+              spacing={1}
               w="full"
             >
-              {/*name/address*/}
-              <EditableAccountNameField
-                address={address}
-                isEditing={isEditing}
-                isLoading={savingAccounts}
-                name={account.name}
-                onCancel={handleEditAccountNameCancel}
-                onSubmitChange={handleEditAccountNameSubmit}
-              />
-
-              <Spacer />
-
-              {/*balance*/}
               <NativeBalance
                 atomicBalance={new BigNumber(accountInformation.atomicBalance)}
                 minAtomicBalance={
@@ -312,27 +330,20 @@ const AccountPage: FC = () => {
               />
             </HStack>
 
-            {/*address and controls*/}
+            {/*controls*/}
             <HStack
               alignItems="center"
               h={ACCOUNT_PAGE_HEADER_ITEM_HEIGHT}
+              justifyContent="flex-end"
               spacing={1}
               w="full"
             >
-              <Tooltip label={address}>
-                <Text color={subTextColor} fontSize="xs">
-                  {ellipseAddress(address, { end: 5, start: 5 })}
-                </Text>
-              </Tooltip>
-
-              <Spacer />
-
-              {/*edit account name*/}
-              <Tooltip label={t<string>('labels.editAccountName')}>
+              {/*edit account*/}
+              <Tooltip label={t<string>('labels.editAccount')}>
                 <IconButton
-                  aria-label="Edit account name"
-                  icon={IoCreateOutline}
-                  onClick={handleEditAccountNameClick}
+                  aria-label={t<string>('labels.editAccount')}
+                  icon={IoPencil}
+                  onClick={handleOnEditAccountClick}
                   size="sm"
                   variant="ghost"
                 />
@@ -440,11 +451,12 @@ const AccountPage: FC = () => {
             </TabList>
 
             <TabPanels sx={{ display: 'flex', flexDirection: 'column' }}>
-              <AssetsTab account={account} />
+              <AssetsTab _context={_context} account={account} />
 
               <NFTsTab account={account} />
 
               <ActivityTab
+                _context={_context}
                 account={account}
                 accounts={accounts}
                 fetching={fetchingAccounts}
@@ -545,6 +557,11 @@ const AccountPage: FC = () => {
     <>
       {account && (
         <>
+          <EditAccountModal
+            isOpen={isEditAccountModalOpen}
+            onClose={onEditAccountModalClose}
+          />
+
           <ShareAddressModal
             address={convertPublicKeyToAVMAddress(
               PrivateKeyService.decode(account.publicKey)
@@ -559,7 +576,6 @@ const AccountPage: FC = () => {
         alignItems="center"
         justifyContent="flex-start"
         flexGrow={1}
-        mt={DEFAULT_GAP - 2}
         w="full"
       >
         {renderContent()}
diff --git a/src/extension/pages/AddWatchAccountPage/AddWatchAccountPage.tsx b/src/extension/pages/AddWatchAccountPage/AddWatchAccountPage.tsx
index 73189ae7..e205a776 100644
--- a/src/extension/pages/AddWatchAccountPage/AddWatchAccountPage.tsx
+++ b/src/extension/pages/AddWatchAccountPage/AddWatchAccountPage.tsx
@@ -1,8 +1,13 @@
 import { Heading, HStack, Spacer, Text, VStack } from '@chakra-ui/react';
 import { isValidAddress } from 'algosdk';
 import { Step, useSteps } from 'chakra-ui-steps';
-import React, { ChangeEvent, FC, useState } from 'react';
+import React, { type FC } from 'react';
 import { useTranslation } from 'react-i18next';
+import {
+  IoArrowBackOutline,
+  IoArrowForwardOutline,
+  IoSaveOutline,
+} from 'react-icons/io5';
 import { useNavigate } from 'react-router-dom';
 
 // components
@@ -19,6 +24,7 @@ import { StepsEnum } from './enums';
 
 // hooks
 import useDefaultTextColor from '@extension/hooks/useDefaultTextColor';
+import useGenericInput from '@extension/hooks/useGenericInput';
 import usePrimaryColorScheme from '@extension/hooks/usePrimaryColorScheme';
 import useSubTextColor from '@extension/hooks/useSubTextColor';
 
@@ -28,62 +34,65 @@ import type { IProps } from './types';
 const AddWatchAccountPage: FC<IProps> = ({ onComplete, saving }) => {
   const { t } = useTranslation();
   const navigate = useNavigate();
-  const { activeStep, nextStep, prevStep, setStep } = useSteps({
+  const { activeStep, nextStep, prevStep } = useSteps({
     initialStep: StepsEnum.Address,
   });
   // hooks
   const defaultTextColor = useDefaultTextColor();
+  const {
+    error: addressError,
+    label: addressLabel,
+    onBlur: addressOnBlur,
+    onChange: addressOnChange,
+    required: isAddressRequired,
+    value: addressValue,
+    validate: addressValidate,
+  } = useGenericInput({
+    label: t<string>('labels.address'),
+    required: true,
+    validate: (_value: string) => {
+      if (!isValidAddress(_value)) {
+        return t<string>('errors.inputs.invalidAddress');
+      }
+
+      return null;
+    },
+  });
+  const {
+    charactersRemaining: nameCharactersRemaining,
+    error: nameError,
+    label: nameLabel,
+    onBlur: nameOnBlur,
+    onChange: nameOnChange,
+    required: isNameRequired,
+    value: nameValue,
+    validate: nameValidate,
+  } = useGenericInput({
+    characterLimit: ACCOUNT_NAME_BYTE_LIMIT,
+    label: t<string>('labels.accountName'),
+    required: false,
+  });
   const primaryColorScheme = usePrimaryColorScheme();
   const subTextColor = useSubTextColor();
-  // state
-  const [address, setAddress] = useState<string | null>(null);
-  const [addressError, setAddressError] = useState<string | null>(null);
-  const [name, setName] = useState<string | null>(null);
-  const [nameError, setNameError] = useState<string | null>(null);
   // misc
-  const stepsLabels: string[] = [
+  const stepsLabels = [
     t<string>('headings.enterAnAddress'),
     t<string>('headings.nameYourAccount'),
   ];
-  const hasCompletedAllSteps: boolean = activeStep === stepsLabels.length;
-  const validateAddress = (value: string): string | null => {
-    if (value.length <= 0) {
-      return t<string>('errors.inputs.requiredWithLabel', {
-        name: t<string>('labels.address'),
-      });
-    }
-
-    if (!isValidAddress(value)) {
-      return t<string>('errors.inputs.invalidAddress');
-    }
-
-    return null;
-  };
+  const hasCompletedAllSteps = activeStep === stepsLabels.length;
   // handlers
-  const handleOnAddressChange = (event: ChangeEvent<HTMLInputElement>) =>
-    setAddress(event.target.value);
   const handleNextClick = () => {
-    const _addressError = validateAddress(address || '');
-
-    if (_addressError) {
-      setAddressError(_addressError);
-
-      return;
-    }
-
     if (
-      (activeStep === StepsEnum.Address && addressError) ||
-      (activeStep === StepsEnum.AccountName && nameError)
+      (activeStep === StepsEnum.Address &&
+        (!!addressError || !!addressValidate(addressValue))) ||
+      (activeStep === StepsEnum.AccountName &&
+        (!!nameError || !!nameValidate(nameValue)))
     ) {
       return;
     }
 
     nextStep();
   };
-  const handleOnAddressError = (value: string | null) => setAddressError(value);
-  const handleOnNameChange = (event: ChangeEvent<HTMLInputElement>) =>
-    setName(event.target.value);
-  const handleOnNameError = (value: string | null) => setNameError(value);
   const handlePreviousClick = () => {
     // if the step is on the first step, navigate back
     if (activeStep <= StepsEnum.Address) {
@@ -95,15 +104,9 @@ const AddWatchAccountPage: FC<IProps> = ({ onComplete, saving }) => {
     prevStep();
   };
   const handleSaveClick = async () => {
-    if (!address) {
-      setStep(StepsEnum.Address);
-
-      return;
-    }
-
     await onComplete({
-      address,
-      name,
+      address: addressValue,
+      name: nameValue.length > 0 ? nameValue : null,
     });
   };
 
@@ -148,15 +151,15 @@ const AddWatchAccountPage: FC<IProps> = ({ onComplete, saving }) => {
 
               <GenericInput
                 error={addressError}
-                label={t<string>('labels.address')}
+                label={addressLabel}
                 isDisabled={saving}
-                onChange={handleOnAddressChange}
-                onError={handleOnAddressError}
+                onBlur={addressOnBlur}
+                onChange={addressOnChange}
                 placeholder={t<string>('placeholders.enterAddress')}
-                required={true}
+                required={isAddressRequired}
                 type="text"
-                validate={validateAddress}
-                value={address || ''}
+                validate={addressValidate}
+                value={addressValue}
               />
             </VStack>
           </Step>
@@ -179,15 +182,17 @@ const AddWatchAccountPage: FC<IProps> = ({ onComplete, saving }) => {
               </Text>
 
               <GenericInput
-                characterLimit={ACCOUNT_NAME_BYTE_LIMIT}
+                charactersRemaining={nameCharactersRemaining}
                 error={nameError}
-                label={t<string>('labels.accountName')}
+                label={nameLabel}
                 isDisabled={saving}
-                onChange={handleOnNameChange}
-                onError={handleOnNameError}
+                onBlur={nameOnBlur}
+                onChange={nameOnChange}
+                required={isNameRequired}
                 placeholder={t<string>('placeholders.nameAccount')}
                 type="text"
-                value={name || ''}
+                validate={nameValidate}
+                value={nameValue}
               />
             </VStack>
           </Step>
@@ -211,8 +216,9 @@ const AddWatchAccountPage: FC<IProps> = ({ onComplete, saving }) => {
         <HStack spacing={DEFAULT_GAP - 2} w="full">
           {/*previous button*/}
           <Button
-            onClick={handlePreviousClick}
             isDisabled={saving}
+            leftIcon={<IoArrowBackOutline />}
+            onClick={handlePreviousClick}
             size="lg"
             variant="outline"
             w="full"
@@ -223,8 +229,9 @@ const AddWatchAccountPage: FC<IProps> = ({ onComplete, saving }) => {
           {hasCompletedAllSteps ? (
             // save button
             <Button
-              onClick={handleSaveClick}
               isLoading={saving}
+              onClick={handleSaveClick}
+              rightIcon={<IoSaveOutline />}
               size="lg"
               variant="solid"
               w="full"
@@ -235,6 +242,7 @@ const AddWatchAccountPage: FC<IProps> = ({ onComplete, saving }) => {
             // next button
             <Button
               onClick={handleNextClick}
+              rightIcon={<IoArrowForwardOutline />}
               size="lg"
               variant="solid"
               w="full"
diff --git a/src/extension/pages/AdvancedSettingsPage/AdvancedSettingsPage.tsx b/src/extension/pages/AdvancedSettingsPage/AdvancedSettingsPage.tsx
index fcaa7640..4464bdd8 100644
--- a/src/extension/pages/AdvancedSettingsPage/AdvancedSettingsPage.tsx
+++ b/src/extension/pages/AdvancedSettingsPage/AdvancedSettingsPage.tsx
@@ -30,17 +30,16 @@ import type {
   IAdvancedSettings,
   IAppThunkDispatch,
   IMainRootState,
-  ISettings,
 } from '@extension/types';
 
 const AdvancedSettingsPage: FC = () => {
   const { t } = useTranslation();
   const dispatch = useDispatch<IAppThunkDispatch<IMainRootState>>();
   // selectors
-  const settings: ISettings = useSelectSettings();
+  const settings = useSelectSettings();
   // handlers
   const handleMainNetSwitchChange = (event: ChangeEvent<HTMLInputElement>) => {
-    const allowMainNet: boolean = event.target.checked;
+    const allowMainNet = event.target.checked;
 
     // if the switch is being enabled, get the user to confirmation
     if (allowMainNet) {
@@ -117,9 +116,9 @@ const AdvancedSettingsPage: FC = () => {
           />
         </VStack>
 
-        {/* beta */}
+        {/*experimental*/}
         <VStack w="full">
-          <SettingsSubHeading text={t<string>('headings.beta')} />
+          <SettingsSubHeading text={t<string>('headings.experimental')} />
 
           <SettingsSwitchItem
             checked={settings.advanced.allowMainNet}
diff --git a/src/extension/pages/AssetPage/AssetPage.tsx b/src/extension/pages/AssetPage/AssetPage.tsx
index 7c8857df..91b70b2c 100644
--- a/src/extension/pages/AssetPage/AssetPage.tsx
+++ b/src/extension/pages/AssetPage/AssetPage.tsx
@@ -44,7 +44,7 @@ import { AssetTypeEnum } from '@extension/enums';
 
 // features
 import { initializeRemoveAssets } from '@extension/features/remove-assets';
-import { initializeSendAsset } from '@extension/features/send-assets';
+import { initialize as initializeSendAssets } from '@extension/features/send-assets';
 
 // hooks
 import useDefaultTextColor from '@extension/hooks/useDefaultTextColor';
@@ -74,6 +74,7 @@ import PrivateKeyService from '@extension/services/PrivateKeyService';
 import type { IAppThunkDispatch, IMainRootState } from '@extension/types';
 
 // utils
+import calculateIconSize from '@extension/utils/calculateIconSize';
 import convertToStandardUnit from '@common/utils/convertToStandardUnit';
 import formatCurrencyUnit from '@common/utils/formatCurrencyUnit';
 import convertPublicKeyToAVMAddress from '@extension/utils/convertPublicKeyToAVMAddress';
@@ -124,11 +125,9 @@ const AssetPage: FC = () => {
     }
 
     dispatch(
-      initializeSendAsset({
-        fromAddress: convertPublicKeyToAVMAddress(
-          PrivateKeyService.decode(account.publicKey)
-        ),
-        selectedAsset: asset,
+      initializeSendAssets({
+        asset,
+        sender: account,
       })
     );
   };
@@ -212,8 +211,7 @@ const AssetPage: FC = () => {
               <AssetIcon
                 color={primaryButtonTextColor}
                 networkTheme={selectedNetwork?.chakraTheme}
-                h={6}
-                w={6}
+                boxSize={calculateIconSize('md')}
               />
             }
             size="md"
@@ -592,8 +590,8 @@ const AssetPage: FC = () => {
           {/*only allow sending for available accounts; accounts that are not watch accounts or accounts that are re-keyed and have the auth account present*/}
           {!!availableAccounts.find((value) => value.id === account.id) && (
             <Button
-              leftIcon={<IoArrowUpOutline />}
               onClick={handleSendClick}
+              rightIcon={<IoArrowUpOutline />}
               size="md"
               variant="solid"
               w="full"
@@ -603,8 +601,8 @@ const AssetPage: FC = () => {
           )}
 
           <Button
-            leftIcon={<IoArrowDownOutline />}
             onClick={handleReceiveClick}
+            rightIcon={<IoArrowDownOutline />}
             size="md"
             variant="solid"
             w="full"
diff --git a/src/extension/pages/ChangePasswordPage/ChangePasswordPage.tsx b/src/extension/pages/ChangePasswordPage/ChangePasswordPage.tsx
index 48c2faf0..fd0e32a1 100644
--- a/src/extension/pages/ChangePasswordPage/ChangePasswordPage.tsx
+++ b/src/extension/pages/ChangePasswordPage/ChangePasswordPage.tsx
@@ -1,14 +1,12 @@
 import { Text, VStack, useDisclosure } from '@chakra-ui/react';
-import React, { FC, useEffect, useState } from 'react';
+import React, { type FC, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
 import { useDispatch } from 'react-redux';
 
 // components
 import Button from '@extension/components/Button';
-import CreatePasswordInput, {
-  validate,
-} from '@extension/components/CreatePasswordInput';
+import NewPasswordInput from '@extension/components/NewPasswordInput';
 import PageHeader from '@extension/components/PageHeader';
 
 // constants
@@ -23,6 +21,7 @@ import { create as createNotification } from '@extension/features/notifications'
 
 // hooks
 import useChangePassword from '@extension/hooks/useChangePassword';
+import useNewPasswordInput from '@extension/hooks/useNewPasswordInput';
 import useSubTextColor from '@extension/hooks/useSubTextColor';
 
 // modals
@@ -51,35 +50,50 @@ const ChangePasswordPage: FC = () => {
     resetAction,
     validating,
   } = useChangePassword();
+  const {
+    error: newPasswordError,
+    label: newPasswordLabel,
+    onBlur: handleOnNewPasswordBlur,
+    onChange: handleOnNewPasswordChange,
+    required: isNewPasswordRequired,
+    reset: resetNewPassword,
+    score: newPasswordScore,
+    validate: newPasswordValidate,
+    value: newPasswordValue,
+  } = useNewPasswordInput({
+    label: t<string>('labels.newPassword'),
+    required: true,
+  });
   const subTextColor = useSubTextColor();
-  // state
-  const [newPassword, setNewPassword] = useState<string | null>(null);
-  const [score, setScore] = useState<number>(-1);
   // misc
   const isLoading = encrypting || validating;
   // handlers
-  const handlePasswordChange = (newPassword: string, newScore: number) => {
-    setNewPassword(newPassword);
-    setScore(newScore);
-  };
   const handleChangeClick = () => {
-    if (!validate(newPassword || '', score, t)) {
-      onConfirmPasswordModalOpen();
+    if (
+      !!newPasswordError ||
+      !!newPasswordValidate({
+        score: newPasswordScore,
+        value: newPasswordValue,
+      })
+    ) {
+      return;
     }
+
+    onConfirmPasswordModalOpen();
   };
   const handleOnConfirmPasswordModalConfirm = async (
     currentPassword: string
   ) => {
     let success: boolean;
 
-    if (!newPassword) {
+    if (!newPasswordValue) {
       return;
     }
 
     // save the new password
     success = await changePasswordAction({
       currentPassword,
-      newPassword,
+      newPassword: newPasswordValue,
     });
 
     if (success) {
@@ -99,8 +113,7 @@ const ChangePasswordPage: FC = () => {
     }
   };
   const reset = () => {
-    setNewPassword(null);
-    setScore(-1);
+    resetNewPassword();
     resetAction();
   };
 
@@ -162,12 +175,15 @@ const ChangePasswordPage: FC = () => {
             {t<string>('captions.changePassword2')}
           </Text>
 
-          <CreatePasswordInput
-            disabled={isLoading}
-            label={t<string>('labels.newPassword')}
-            onChange={handlePasswordChange}
-            score={score}
-            value={newPassword || ''}
+          <NewPasswordInput
+            error={newPasswordError}
+            isDisabled={isLoading}
+            label={newPasswordLabel}
+            onBlur={handleOnNewPasswordBlur}
+            onChange={handleOnNewPasswordChange}
+            required={isNewPasswordRequired}
+            score={newPasswordScore}
+            value={newPasswordValue}
           />
         </VStack>
 
diff --git a/src/extension/pages/CreateNewAccountPage/CreateNewAccountPage.tsx b/src/extension/pages/CreateNewAccountPage/CreateNewAccountPage.tsx
index 92a6f0d3..c6bb48b7 100644
--- a/src/extension/pages/CreateNewAccountPage/CreateNewAccountPage.tsx
+++ b/src/extension/pages/CreateNewAccountPage/CreateNewAccountPage.tsx
@@ -7,8 +7,13 @@ import {
   VStack,
 } from '@chakra-ui/react';
 import { Step, useSteps } from 'chakra-ui-steps';
-import React, { ChangeEvent, FC, useState } from 'react';
+import React, { type ChangeEvent, type FC, useState } from 'react';
 import { useTranslation } from 'react-i18next';
+import {
+  IoArrowBackOutline,
+  IoArrowForwardOutline,
+  IoSaveOutline,
+} from 'react-icons/io5';
 import { useNavigate } from 'react-router-dom';
 
 // components
@@ -27,7 +32,6 @@ import { StepsEnum } from './enums';
 
 // hooks
 import useDefaultTextColor from '@extension/hooks/useDefaultTextColor';
-import usePrimaryColor from '@extension/hooks/usePrimaryColor';
 import usePrimaryColorScheme from '@extension/hooks/usePrimaryColorScheme';
 import useSubTextColor from '@extension/hooks/useSubTextColor';
 
@@ -42,7 +46,7 @@ import type { IAddAccountPageProps } from '@extension/types';
 
 // utils
 import convertPrivateKeyToSeedPhrase from '@extension/utils/convertPrivateKeyToSeedPhrase';
-import convertPublicKeyToAVMAddress from '@extension/utils/convertPublicKeyToAVMAddress';
+import useGenericInput from '@extension/hooks/useGenericInput';
 
 const CreateNewAccountPage: FC<IAddAccountPageProps> = ({
   onComplete,
@@ -57,6 +61,20 @@ const CreateNewAccountPage: FC<IAddAccountPageProps> = ({
   const logger = useSelectLogger();
   // hooks
   const defaultTextColor = useDefaultTextColor();
+  const {
+    charactersRemaining: nameCharactersRemaining,
+    error: nameError,
+    label: nameLabel,
+    onBlur: nameOnBlur,
+    onChange: nameOnChange,
+    required: isNameRequired,
+    value: nameValue,
+    validate: nameValidate,
+  } = useGenericInput({
+    characterLimit: ACCOUNT_NAME_BYTE_LIMIT,
+    label: t<string>('labels.accountName'),
+    required: false,
+  });
   const primaryColorScheme = usePrimaryColorScheme();
   const subTextColor = useSubTextColor();
   // state
@@ -66,8 +84,6 @@ const CreateNewAccountPage: FC<IAddAccountPageProps> = ({
     null
   );
   const [keyPair] = useState<Ed21559KeyPair>(Ed21559KeyPair.generate());
-  const [name, setName] = useState<string | null>(null);
-  const [nameError, setNameError] = useState<string | null>(null);
   // misc
   const _context = 'create-new-account-page';
   const seedPhrase = convertPrivateKeyToSeedPhrase({
@@ -87,14 +103,15 @@ const CreateNewAccountPage: FC<IAddAccountPageProps> = ({
     setCopySeedPhraseConfirm(event.target.checked);
   };
   const handleNextClick = () => {
-    if (activeStep === StepsEnum.AccountName && nameError) {
+    if (
+      activeStep === StepsEnum.AccountName &&
+      (!!nameError || !!nameValidate(nameValue))
+    ) {
       return;
     }
 
     nextStep();
   };
-  const handleOnNameChange = (event: ChangeEvent<HTMLInputElement>) =>
-    setName(event.target.value);
   const handlePreviousClick = () => {
     // if the step is on the first step, navigate back
     if (activeStep <= StepsEnum.SeedPhrase) {
@@ -105,7 +122,6 @@ const CreateNewAccountPage: FC<IAddAccountPageProps> = ({
 
     prevStep();
   };
-  const handleOnNameError = (value: string | null) => setNameError(value);
   const handleSaveClick = async () => {
     if (!copySeedPhraseConfirm) {
       setCopySeedPhraseError(t<string>('errors.inputs.copySeedPhraseRequired'));
@@ -115,7 +131,7 @@ const CreateNewAccountPage: FC<IAddAccountPageProps> = ({
 
     await onComplete({
       keyPair,
-      name,
+      name: nameValue.length > 0 ? nameValue : null,
     });
   };
 
@@ -160,7 +176,7 @@ const CreateNewAccountPage: FC<IAddAccountPageProps> = ({
                   textAlign="left"
                   w="full"
                 >
-                  {t<string>('captions.saveMnemonicPhrase1')}
+                  {t<string>('captions.saveSeedPhrase1')}
                 </Text>
 
                 <Text
@@ -169,7 +185,7 @@ const CreateNewAccountPage: FC<IAddAccountPageProps> = ({
                   textAlign="left"
                   w="full"
                 >
-                  {t<string>('captions.saveMnemonicPhrase2')}
+                  {t<string>('captions.saveSeedPhrase2')}
                 </Text>
 
                 {/*seed phrase*/}
@@ -210,15 +226,17 @@ const CreateNewAccountPage: FC<IAddAccountPageProps> = ({
               </Text>
 
               <GenericInput
-                characterLimit={ACCOUNT_NAME_BYTE_LIMIT}
+                charactersRemaining={nameCharactersRemaining}
                 error={nameError}
-                label={t<string>('labels.accountName')}
+                label={nameLabel}
                 isDisabled={saving}
-                onChange={handleOnNameChange}
-                onError={handleOnNameError}
+                onBlur={nameOnBlur}
+                onChange={nameOnChange}
+                required={isNameRequired}
                 placeholder={t<string>('placeholders.nameAccount')}
                 type="text"
-                value={name || ''}
+                validate={nameValidate}
+                value={nameValue}
               />
             </VStack>
           </Step>
@@ -265,6 +283,7 @@ const CreateNewAccountPage: FC<IAddAccountPageProps> = ({
           {/*previous button*/}
           <Button
             onClick={handlePreviousClick}
+            leftIcon={<IoArrowBackOutline />}
             isDisabled={saving}
             size="lg"
             variant="outline"
@@ -278,6 +297,7 @@ const CreateNewAccountPage: FC<IAddAccountPageProps> = ({
             <Button
               onClick={handleSaveClick}
               isLoading={saving}
+              rightIcon={<IoSaveOutline />}
               size="lg"
               variant="solid"
               w="full"
@@ -288,6 +308,7 @@ const CreateNewAccountPage: FC<IAddAccountPageProps> = ({
             // next button
             <Button
               onClick={handleNextClick}
+              rightIcon={<IoArrowForwardOutline />}
               size="lg"
               variant="solid"
               w="full"
diff --git a/src/extension/pages/CreatePasswordPage/CreatePasswordPage.tsx b/src/extension/pages/CreatePasswordPage/CreatePasswordPage.tsx
index 01fb2c39..17b894df 100644
--- a/src/extension/pages/CreatePasswordPage/CreatePasswordPage.tsx
+++ b/src/extension/pages/CreatePasswordPage/CreatePasswordPage.tsx
@@ -1,14 +1,13 @@
 import { Text, VStack } from '@chakra-ui/react';
-import React, { FC, KeyboardEvent, useEffect, useRef } from 'react';
+import React, { type FC, type KeyboardEvent, useEffect, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
+import { IoArrowForwardOutline } from 'react-icons/io5';
 import { useNavigate } from 'react-router-dom';
 import { useDispatch } from 'react-redux';
 
 // components
 import Button from '@extension/components/Button';
-import CreatePasswordInput, {
-  validate,
-} from '@extension/components/CreatePasswordInput';
+import NewPasswordInput from '@extension/components/NewPasswordInput';
 import PageHeader from '@extension/components/PageHeader';
 
 // constants
@@ -19,14 +18,9 @@ import { setPassword } from '@extension/features/registration';
 
 // hooks
 import useDefaultTextColor from '@extension/hooks/useDefaultTextColor';
+import useNewPasswordInput from '@extension/hooks/useNewPasswordInput';
 import useSubTextColor from '@extension/hooks/useSubTextColor';
 
-// selectors
-import {
-  useSelectRegistrationPassword,
-  useSelectRegistrationScore,
-} from '@extension/selectors';
-
 // types
 import type {
   IAppThunkDispatch,
@@ -36,40 +30,51 @@ import type {
 const CreatePasswordPage: FC = () => {
   const { t } = useTranslation();
   const dispatch = useDispatch<IAppThunkDispatch<IRegistrationRootState>>();
-  const createPasswordInputRef = useRef<HTMLInputElement | null>(null);
   const navigate = useNavigate();
+  const newPasswordInputRef = useRef<HTMLInputElement | null>(null);
   // hooks
   const defaultTextColor = useDefaultTextColor();
+  const {
+    error: newPasswordError,
+    label: newPasswordLabel,
+    onBlur: handleOnNewPasswordBlur,
+    onChange: handleOnNewPasswordChange,
+    required: isNewPasswordRequired,
+    score: newPasswordScore,
+    validate: newPasswordValidate,
+    value: newPasswordValue,
+  } = useNewPasswordInput({
+    label: t<string>('labels.newPassword'),
+    required: true,
+  });
   const subTextColor = useSubTextColor();
-  // selectors
-  const password = useSelectRegistrationPassword();
-  const score = useSelectRegistrationScore();
   // handlers
-  const handleKeyUpCreatePasswordInput = (
-    event: KeyboardEvent<HTMLInputElement>
-  ) => {
+  const handleOnNewPasswordKeyUp = (event: KeyboardEvent<HTMLInputElement>) => {
     if (event.key === 'Enter') {
       handleNextClick();
     }
   };
   const handleNextClick = () => {
-    if (!validate(password || '', score, t)) {
-      navigate(ADD_ACCOUNT_ROUTE);
-    }
-  };
-  const handlePasswordChange = (newPassword: string, newScore: number) => {
-    dispatch(
-      setPassword({
-        password: newPassword,
-        score: newScore,
+    if (
+      !!newPasswordError ||
+      !!newPasswordValidate({
+        score: newPasswordScore,
+        value: newPasswordValue,
       })
-    );
+    ) {
+      return;
+    }
+
+    // set the password
+    dispatch(setPassword(newPasswordValue));
+
+    navigate(ADD_ACCOUNT_ROUTE);
   };
 
   // focus on password input
   useEffect(() => {
-    if (createPasswordInputRef.current) {
-      createPasswordInputRef.current.focus();
+    if (newPasswordInputRef.current) {
+      newPasswordInputRef.current.focus();
     }
   }, []);
 
@@ -84,7 +89,7 @@ const CreatePasswordPage: FC = () => {
         flexGrow={1}
         pb={DEFAULT_GAP}
         px={DEFAULT_GAP}
-        spacing={2}
+        spacing={DEFAULT_GAP / 3}
         w="full"
       >
         <VStack flexGrow={1} spacing={DEFAULT_GAP + 2} w="full">
@@ -105,18 +110,23 @@ const CreatePasswordPage: FC = () => {
           </VStack>
 
           {/*create password input*/}
-          <CreatePasswordInput
-            inputRef={createPasswordInputRef}
-            onChange={handlePasswordChange}
-            onKeyUp={handleKeyUpCreatePasswordInput}
-            score={score}
-            value={password || ''}
+          <NewPasswordInput
+            error={newPasswordError}
+            label={newPasswordLabel}
+            onBlur={handleOnNewPasswordBlur}
+            onChange={handleOnNewPasswordChange}
+            onKeyUp={handleOnNewPasswordKeyUp}
+            ref={newPasswordInputRef}
+            required={isNewPasswordRequired}
+            score={newPasswordScore}
+            value={newPasswordValue}
           />
         </VStack>
 
         {/*next button*/}
         <Button
           onClick={handleNextClick}
+          rightIcon={<IoArrowForwardOutline />}
           size="lg"
           type="submit"
           variant="solid"
diff --git a/src/extension/pages/ExportAccountPage/ExportAcountPage.tsx b/src/extension/pages/ExportAccountPage/ExportAcountPage.tsx
index addb2d51..a217d8f4 100644
--- a/src/extension/pages/ExportAccountPage/ExportAcountPage.tsx
+++ b/src/extension/pages/ExportAccountPage/ExportAcountPage.tsx
@@ -10,7 +10,7 @@ import { sanitize } from 'dompurify';
 import { toString } from 'qrcode';
 import React, { FC, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { IoEyeOffOutline } from 'react-icons/io5';
+import { IoEyeOffOutline, IoListOutline } from 'react-icons/io5';
 import { useDispatch } from 'react-redux';
 
 // components
@@ -42,7 +42,7 @@ import useSubTextColor from '@extension/hooks/useSubTextColor';
 import qrCodePlaceholderImage from '@extension/images/placeholder_qr_code.png';
 
 // modals
-import AccountSelectModal from '@extension/modals/AccountSelectModal';
+import { AccountSelectModal } from '@extension/components/AccountSelect';
 import AuthenticationModal from '@extension/modals/AuthenticationModal';
 
 // models
@@ -96,7 +96,8 @@ const ExportAccountPage: FC = () => {
     IAccountWithExtendedProps[] | null
   >(null);
   const [svgStrings, setSvgStrings] = useState<string[] | null>(null);
-  //
+  // misc
+  const _context = 'export-account-page';
   const placeholderIconSize = calculateIconSize('md');
   const qrCodeSize = 300;
   const reset = () => {
@@ -260,6 +261,7 @@ const ExportAccountPage: FC = () => {
 
       {/*account select modal*/}
       <AccountSelectModal
+        _context={_context}
         accounts={accounts}
         allowWatchAccounts={false}
         isOpen={isAccountSelectModalOpen}
@@ -356,6 +358,7 @@ const ExportAccountPage: FC = () => {
         {/*select accounts button*/}
         <Button
           onClick={handleSelectAccountsClick}
+          rightIcon={<IoListOutline />}
           size="lg"
           variant="solid"
           w="full"
diff --git a/src/extension/pages/GetStartedPage/GetStartedPage.tsx b/src/extension/pages/GetStartedPage/GetStartedPage.tsx
index 0f0bd806..d7cf5fe7 100644
--- a/src/extension/pages/GetStartedPage/GetStartedPage.tsx
+++ b/src/extension/pages/GetStartedPage/GetStartedPage.tsx
@@ -1,6 +1,7 @@
 import { Heading, Text, VStack } from '@chakra-ui/react';
-import React, { FC } from 'react';
+import React, { type FC } from 'react';
 import { useTranslation } from 'react-i18next';
+import { IoArrowForwardOutline } from 'react-icons/io5';
 import { useNavigate } from 'react-router-dom';
 
 // components
@@ -53,7 +54,12 @@ const GetStartedPage: FC = () => {
         )}
       </VStack>
 
-      <Button onClick={handleGetStartedClick} size="lg" w="full">
+      <Button
+        onClick={handleGetStartedClick}
+        rightIcon={<IoArrowForwardOutline />}
+        size="lg"
+        w="full"
+      >
         {t<string>('buttons.getStarted')}
       </Button>
     </VStack>
diff --git a/src/extension/pages/ImportAccountViaSeedPhrasePage/ImportAccountViaSeedPhrasePage.tsx b/src/extension/pages/ImportAccountViaSeedPhrasePage/ImportAccountViaSeedPhrasePage.tsx
index 2f94be6d..dcf0e968 100644
--- a/src/extension/pages/ImportAccountViaSeedPhrasePage/ImportAccountViaSeedPhrasePage.tsx
+++ b/src/extension/pages/ImportAccountViaSeedPhrasePage/ImportAccountViaSeedPhrasePage.tsx
@@ -1,17 +1,16 @@
 import { Heading, HStack, Spacer, Text, VStack } from '@chakra-ui/react';
 import { Step, useSteps } from 'chakra-ui-steps';
-import React, { ChangeEvent, FC, useState } from 'react';
+import React, { type FC, useState } from 'react';
 import { useTranslation } from 'react-i18next';
+import { IoArrowBackOutline, IoDownloadOutline } from 'react-icons/io5';
 import { useDispatch } from 'react-redux';
 import { useNavigate } from 'react-router-dom';
 
 // components
 import Button from '@extension/components/Button';
-import EnterMnemonicPhraseInput, {
-  validate,
-} from '@extension/components/EnterMnemonicPhraseInput';
 import GenericInput from '@extension/components/GenericInput';
 import PageHeader from '@extension/components/PageHeader';
+import SeedPhraseInput from '@extension/components/SeedPhraseInput';
 import Steps from '@extension/components/Steps';
 
 // constants
@@ -25,6 +24,7 @@ import { create as createNotification } from '@extension/features/notifications'
 
 // hooks
 import useDefaultTextColor from '@extension/hooks/useDefaultTextColor';
+import useGenericInput from '@extension/hooks/useGenericInput';
 import usePrimaryColorScheme from '@extension/hooks/usePrimaryColorScheme';
 import useSubTextColor from '@extension/hooks/useSubTextColor';
 
@@ -43,6 +43,7 @@ import type {
 } from '@extension/types';
 
 // utils
+import { validate } from '@extension/components/SeedPhraseInput';
 import convertPublicKeyToAVMAddress from '@extension/utils/convertPublicKeyToAVMAddress';
 import convertSeedPhraseToPrivateKey from '@extension/utils/convertSeedPhraseToPrivateKey';
 
@@ -58,6 +59,20 @@ const ImportAccountViaSeedPhrasePage: FC<IAddAccountPageProps> = ({
   const logger = useSelectLogger();
   // hooks
   const defaultTextColor = useDefaultTextColor();
+  const {
+    charactersRemaining: nameCharactersRemaining,
+    error: nameError,
+    label: nameLabel,
+    onBlur: nameOnBlur,
+    onChange: nameOnChange,
+    required: isNameRequired,
+    value: nameValue,
+    validate: nameValidate,
+  } = useGenericInput({
+    characterLimit: ACCOUNT_NAME_BYTE_LIMIT,
+    label: t<string>('labels.accountName'),
+    required: false,
+  });
   const primaryColorScheme = usePrimaryColorScheme();
   const subTextColor = useSubTextColor();
   // states
@@ -65,13 +80,12 @@ const ImportAccountViaSeedPhrasePage: FC<IAddAccountPageProps> = ({
     initialStep: StepsEnum.SeedPhrase,
   });
   const [keyPair, setKeyPair] = useState<Ed21559KeyPair | null>(null);
-  const [name, setName] = useState<string | null>(null);
-  const [nameError, setNameError] = useState<string | null>(null);
   const [seedPhrases, setSeedPhrases] = useState<string[]>(
     Array.from({ length: 25 }, () => '')
   );
   const [seedPhraseError, setSeedPhraseError] = useState<string | null>(null);
   // misc
+  const _context = 'import-account-via-seed-phrase-page';
   const stepsLabels = [
     t<string>('headings.enterYourSeedPhrase'),
     t<string>('headings.nameYourAccount'),
@@ -108,20 +122,21 @@ const ImportAccountViaSeedPhrasePage: FC<IAddAccountPageProps> = ({
 
     await onComplete({
       keyPair,
-      name,
+      name: nameValue.length > 0 ? nameValue : null,
     });
   };
   const handleOnMnemonicPhraseChange = (value: string[]) =>
     setSeedPhrases(value);
-  const handleOnNameChange = (event: ChangeEvent<HTMLInputElement>) =>
-    setName(event.target.value);
-  const handleOnNameError = (value: string | null) => setNameError(value);
   const handleNextClick = () => {
     let _seedPhraseError: string | null;
 
     // if this is the first step, validate the mnemonic
     if (activeStep <= StepsEnum.SeedPhrase) {
-      _seedPhraseError = validate(seedPhrases, t);
+      _seedPhraseError = validate(
+        t<string>('labels.seedPhrase'),
+        seedPhrases,
+        t
+      );
 
       setSeedPhraseError(_seedPhraseError);
 
@@ -140,7 +155,10 @@ const ImportAccountViaSeedPhrasePage: FC<IAddAccountPageProps> = ({
       );
     }
 
-    if (activeStep === StepsEnum.AccountName && nameError) {
+    if (
+      activeStep === StepsEnum.AccountName &&
+      (!!nameError || !!nameValidate(nameValue))
+    ) {
       return;
     }
 
@@ -193,7 +211,8 @@ const ImportAccountViaSeedPhrasePage: FC<IAddAccountPageProps> = ({
                 {t<string>('captions.enterSeedPhrase')}
               </Text>
 
-              <EnterMnemonicPhraseInput
+              <SeedPhraseInput
+                _context={_context}
                 disabled={saving}
                 error={seedPhraseError}
                 onChange={handleOnMnemonicPhraseChange}
@@ -215,15 +234,17 @@ const ImportAccountViaSeedPhrasePage: FC<IAddAccountPageProps> = ({
               </Text>
 
               <GenericInput
-                characterLimit={ACCOUNT_NAME_BYTE_LIMIT}
+                charactersRemaining={nameCharactersRemaining}
                 error={nameError}
-                label={t<string>('labels.accountName')}
+                label={nameLabel}
                 isDisabled={saving}
-                onChange={handleOnNameChange}
-                onError={handleOnNameError}
+                onBlur={nameOnBlur}
+                onChange={nameOnChange}
+                required={isNameRequired}
                 placeholder={t<string>('placeholders.nameAccount')}
                 type="text"
-                value={name || ''}
+                validate={nameValidate}
+                value={nameValue}
               />
             </VStack>
           </Step>
@@ -248,6 +269,7 @@ const ImportAccountViaSeedPhrasePage: FC<IAddAccountPageProps> = ({
           {/*previous button*/}
           <Button
             isDisabled={saving}
+            leftIcon={<IoArrowBackOutline />}
             onClick={handlePreviousClick}
             size="lg"
             variant="outline"
@@ -261,6 +283,7 @@ const ImportAccountViaSeedPhrasePage: FC<IAddAccountPageProps> = ({
             <Button
               isLoading={saving}
               onClick={handleImportClick}
+              rightIcon={<IoDownloadOutline />}
               size="lg"
               variant="solid"
               w="full"
diff --git a/src/extension/pages/SecuritySettingsPage/SecuritySettingsPage.tsx b/src/extension/pages/SecuritySettingsPage/SecuritySettingsPage.tsx
index d6ef0564..6a65c870 100644
--- a/src/extension/pages/SecuritySettingsPage/SecuritySettingsPage.tsx
+++ b/src/extension/pages/SecuritySettingsPage/SecuritySettingsPage.tsx
@@ -21,12 +21,12 @@ import {
   CHANGE_PASSWORD_ROUTE,
   EXPORT_ACCOUNT_ROUTE,
   PASSKEY_ROUTE,
-  PASSWORD_LOCK_DURATION_HIGH,
-  PASSWORD_LOCK_DURATION_HIGHER,
-  PASSWORD_LOCK_DURATION_HIGHEST,
-  PASSWORD_LOCK_DURATION_LOW,
-  PASSWORD_LOCK_DURATION_LOWEST,
-  PASSWORD_LOCK_DURATION_NORMAL,
+  CREDENTIALS_LOCK_DURATION_HIGH,
+  CREDENTIALS_LOCK_DURATION_HIGHER,
+  CREDENTIALS_LOCK_DURATION_HIGHEST,
+  CREDENTIALS_LOCK_DURATION_LOW,
+  CREDENTIALS_LOCK_DURATION_LOWEST,
+  CREDENTIALS_LOCK_DURATION_NORMAL,
   SECURITY_ROUTE,
   SETTINGS_ROUTE,
   VIEW_SEED_PHRASE_ROUTE,
@@ -83,51 +83,51 @@ const SecuritySettingsPage: FC = () => {
   const _context = 'security-settings-page';
   const durationOptions: IOption<number>[] = [
     {
-      label: t<string>('labels.passwordLockDuration', {
-        context: PASSWORD_LOCK_DURATION_LOWEST,
+      label: t<string>('labels.credentialsLockDuration', {
+        context: CREDENTIALS_LOCK_DURATION_LOWEST,
       }),
-      value: PASSWORD_LOCK_DURATION_LOWEST,
+      value: CREDENTIALS_LOCK_DURATION_LOWEST,
     },
     {
-      label: t<string>('labels.passwordLockDuration', {
-        context: PASSWORD_LOCK_DURATION_LOW,
+      label: t<string>('labels.credentialsLockDuration', {
+        context: CREDENTIALS_LOCK_DURATION_LOW,
       }),
-      value: PASSWORD_LOCK_DURATION_LOW,
+      value: CREDENTIALS_LOCK_DURATION_LOW,
     },
     {
-      label: t<string>('labels.passwordLockDuration', {
-        context: PASSWORD_LOCK_DURATION_NORMAL,
+      label: t<string>('labels.credentialsLockDuration', {
+        context: CREDENTIALS_LOCK_DURATION_NORMAL,
       }),
-      value: PASSWORD_LOCK_DURATION_NORMAL,
+      value: CREDENTIALS_LOCK_DURATION_NORMAL,
     },
     {
-      label: t<string>('labels.passwordLockDuration', {
-        context: PASSWORD_LOCK_DURATION_HIGH,
+      label: t<string>('labels.credentialsLockDuration', {
+        context: CREDENTIALS_LOCK_DURATION_HIGH,
       }),
-      value: PASSWORD_LOCK_DURATION_HIGH,
+      value: CREDENTIALS_LOCK_DURATION_HIGH,
     },
     {
-      label: t<string>('labels.passwordLockDuration', {
-        context: PASSWORD_LOCK_DURATION_HIGHER,
+      label: t<string>('labels.credentialsLockDuration', {
+        context: CREDENTIALS_LOCK_DURATION_HIGHER,
       }),
-      value: PASSWORD_LOCK_DURATION_HIGHER,
+      value: CREDENTIALS_LOCK_DURATION_HIGHER,
     },
     {
-      label: t<string>('labels.passwordLockDuration', {
-        context: PASSWORD_LOCK_DURATION_HIGHEST,
+      label: t<string>('labels.credentialsLockDuration', {
+        context: CREDENTIALS_LOCK_DURATION_HIGHEST,
       }),
-      value: PASSWORD_LOCK_DURATION_HIGHEST,
+      value: CREDENTIALS_LOCK_DURATION_HIGHEST,
     },
     {
-      label: t<string>('labels.passwordLockDuration'), // never
+      label: t<string>('labels.credentialsLockDuration'), // never
       value: 0,
     },
   ];
   // handlers
-  const handleEnablePasswordLockSwitchChange = async (
+  const handleOnEnableCredentialsLockSwitchChange = async (
     event: ChangeEvent<HTMLInputElement>
   ) => {
-    const _functionName = 'handleEnablePasswordLockSwitchChange';
+    const _functionName = 'handleOnEnableCredentialsLockSwitchChange';
 
     // if we are enabling, we need to get the credentials
     if (event.target.checked) {
@@ -197,7 +197,7 @@ const SecuritySettingsPage: FC = () => {
         type: 'error',
       })
     );
-  const handlePasswordTimeoutDurationChange = ({ value }: IOption<number>) => {
+  const handleOnCredentialsLockTimeoutChange = ({ value }: IOption<number>) => {
     // update the settings
     dispatch(
       saveSettingsToStorageThunk({
@@ -227,31 +227,31 @@ const SecuritySettingsPage: FC = () => {
         {/*authentication*/}
         <SettingsSubHeading text={t<string>('headings.authentication')} />
 
-        {/*enable password lock*/}
+        {/*enable credentials lock*/}
         <SettingsSwitchItem
           checked={settings.security.enableCredentialLock}
-          description={t<string>('captions.enablePasswordLock')}
-          label={t<string>('labels.enablePasswordLock')}
-          onChange={handleEnablePasswordLockSwitchChange}
+          description={t<string>('captions.enableCredentialsLock')}
+          label={t<string>('labels.enableCredentialsLock')}
+          onChange={handleOnEnableCredentialsLockSwitchChange}
         />
 
-        {/*password lock duration*/}
+        {/*credentials lock duration*/}
         <SettingsSelectItem
           _context={_context}
           disabled={!settings.security.enableCredentialLock}
           emptyOptionLabel={t<string>('placeholders.pleaseSelect')}
-          label={t<string>('labels.passwordLockTimeout')}
-          onChange={handlePasswordTimeoutDurationChange}
+          label={t<string>('labels.credentialsLockTimeout')}
+          onChange={handleOnCredentialsLockTimeoutChange}
           options={durationOptions}
           value={
             durationOptions.find(
               (value) =>
                 value.value === settings.security.credentialLockTimeoutDuration
             ) || {
-              label: t<string>('labels.passwordLockDuration', {
-                context: PASSWORD_LOCK_DURATION_NORMAL,
+              label: t<string>('labels.credentialsLockDuration', {
+                context: CREDENTIALS_LOCK_DURATION_NORMAL,
               }),
-              value: PASSWORD_LOCK_DURATION_NORMAL,
+              value: CREDENTIALS_LOCK_DURATION_NORMAL,
             }
           }
         />
diff --git a/src/extension/pages/ViewSeedPhrasePage/ViewSeedPhrasePage.tsx b/src/extension/pages/ViewSeedPhrasePage/ViewSeedPhrasePage.tsx
index 6e53a852..b36cdb4b 100644
--- a/src/extension/pages/ViewSeedPhrasePage/ViewSeedPhrasePage.tsx
+++ b/src/extension/pages/ViewSeedPhrasePage/ViewSeedPhrasePage.tsx
@@ -208,6 +208,7 @@ const ViewSeedPhrasePage: FC = () => {
             />
           ) : (
             <AccountSelect
+              _context={_context}
               accounts={accounts}
               allowWatchAccounts={false}
               onSelect={handleAccountSelect}
diff --git a/src/extension/selectors/accounts/index.ts b/src/extension/selectors/accounts/index.ts
index 605d5e57..58a9444c 100644
--- a/src/extension/selectors/accounts/index.ts
+++ b/src/extension/selectors/accounts/index.ts
@@ -7,5 +7,6 @@ export { default as useSelectActiveAccount } from './useSelectActiveAccount';
 export { default as useSelectActiveAccountDetails } from './useSelectActiveAccountDetails';
 export { default as useSelectActiveAccountInformation } from './useSelectActiveAccountInformation';
 export { default as useSelectActiveAccountTransactions } from './useSelectActiveAccountTransactions';
+export { default as useSelectActiveAccountTransactionsUpdating } from './useSelectActiveAccountTransactionsUpdating';
 export { default as useSelectAvailableAccountsForSelectedNetwork } from './useSelectAvailableAccountsForSelectedNetwork';
 export { default as useSelectNonWatchAccounts } from './useSelectNonWatchAccounts';
diff --git a/src/extension/selectors/accounts/useSelectActiveAccountTransactionsUpdating.ts b/src/extension/selectors/accounts/useSelectActiveAccountTransactionsUpdating.ts
new file mode 100644
index 00000000..84d319d3
--- /dev/null
+++ b/src/extension/selectors/accounts/useSelectActiveAccountTransactionsUpdating.ts
@@ -0,0 +1,25 @@
+import { useSelector } from 'react-redux';
+
+// selectors
+import useSelectActiveAccount from './useSelectActiveAccount';
+
+// types
+import type { IMainRootState } from '@extension/types';
+
+/**
+ * Determines if the account transactions are being updated for the active account.
+ * @returns {boolean} true if the account transactions are being updated for the active account, false otherwise.
+ */
+export default function useSelectActiveAccountTransactionsUpdating(): boolean {
+  const account = useSelectActiveAccount();
+
+  if (!account) {
+    return false;
+  }
+
+  return useSelector<IMainRootState, boolean>(
+    (state) =>
+      state.accounts.updatingAccounts.find((value) => value.id === account.id)
+        ?.transactions || false
+  );
+}
diff --git a/src/extension/selectors/registration/index.ts b/src/extension/selectors/registration/index.ts
index 1d907ffa..fcc20138 100644
--- a/src/extension/selectors/registration/index.ts
+++ b/src/extension/selectors/registration/index.ts
@@ -1,4 +1,3 @@
 export { default as useSelectRegistrationImportAccountViaQRCodeOpen } from './useSelectRegistrationImportAccountViaQRCodeOpen';
 export { default as useSelectRegistrationPassword } from './useSelectRegistrationPassword';
-export { default as useSelectRegistrationScore } from './useSelectRegistrationScore';
 export { default as useSelectRegistrationSaving } from './useSelectRegistrationSaving';
diff --git a/src/extension/selectors/registration/useSelectRegistrationScore.ts b/src/extension/selectors/registration/useSelectRegistrationScore.ts
deleted file mode 100644
index 201a81a0..00000000
--- a/src/extension/selectors/registration/useSelectRegistrationScore.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import { useSelector } from 'react-redux';
-
-// types
-import { IRegistrationRootState } from '@extension/types';
-export default function useSelectRegistrationScore(): number {
-  return useSelector<IRegistrationRootState, number>(
-    (state) => state.registration.score
-  );
-}
diff --git a/src/extension/selectors/send-assets/index.ts b/src/extension/selectors/send-assets/index.ts
index f10ae74e..bcf47ac4 100644
--- a/src/extension/selectors/send-assets/index.ts
+++ b/src/extension/selectors/send-assets/index.ts
@@ -1,7 +1,4 @@
-export { default as useSelectSendAssetAmountInStandardUnits } from './useSelectSendAssetAmountInStandardUnits';
+export { default as useSelectSendAssetAsset } from './useSelectSendAssetAsset';
 export { default as useSelectSendAssetConfirming } from './useSelectSendAssetConfirming';
 export { default as useSelectSendAssetCreating } from './useSelectSendAssetCreating';
-export { default as useSelectSendAssetFromAccount } from './useSelectSendAssetFromAccount';
-export { default as useSelectSendAssetNote } from './useSelectSendAssetNote';
-export { default as useSelectSendAssetSelectedAsset } from './useSelectSendAssetSelectedAsset';
-export { default as useSelectSendAssetToAddress } from './useSelectSendAssetToAddress';
+export { default as useSelectSendAssetSender } from './useSelectSendAssetSender';
diff --git a/src/extension/selectors/send-assets/useSelectSendAssetAmountInStandardUnits.ts b/src/extension/selectors/send-assets/useSelectSendAssetAmountInStandardUnits.ts
deleted file mode 100644
index b87a6edd..00000000
--- a/src/extension/selectors/send-assets/useSelectSendAssetAmountInStandardUnits.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { useSelector } from 'react-redux';
-
-// types
-import { IMainRootState } from '@extension/types';
-
-export default function useSelectSendAssetAmountInStandardUnits(): string {
-  return useSelector<IMainRootState, string>(
-    (state) => state.sendAssets.amountInStandardUnits
-  );
-}
diff --git a/src/extension/selectors/send-assets/useSelectSendAssetAsset.ts b/src/extension/selectors/send-assets/useSelectSendAssetAsset.ts
new file mode 100644
index 00000000..31def43a
--- /dev/null
+++ b/src/extension/selectors/send-assets/useSelectSendAssetAsset.ts
@@ -0,0 +1,17 @@
+import { useSelector } from 'react-redux';
+
+// types
+import type {
+  IAssetTypes,
+  INativeCurrency,
+  IMainRootState,
+} from '@extension/types';
+
+export default function useSelectSendAssetAsset():
+  | IAssetTypes
+  | INativeCurrency
+  | null {
+  return useSelector<IMainRootState, IAssetTypes | INativeCurrency | null>(
+    (state) => state.sendAssets.asset
+  );
+}
diff --git a/src/extension/selectors/send-assets/useSelectSendAssetFromAccount.ts b/src/extension/selectors/send-assets/useSelectSendAssetFromAccount.ts
deleted file mode 100644
index 44dbc94d..00000000
--- a/src/extension/selectors/send-assets/useSelectSendAssetFromAccount.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-import { useSelector } from 'react-redux';
-
-// selectors
-import useSelectAccounts from '../accounts/useSelectAccounts';
-
-// types
-import type {
-  IAccountWithExtendedProps,
-  IMainRootState,
-} from '@extension/types';
-
-// utils
-import convertPublicKeyToAVMAddress from '@extension/utils/convertPublicKeyToAVMAddress';
-
-export default function useSelectSendAssetFromAccount(): IAccountWithExtendedProps | null {
-  const accounts = useSelectAccounts();
-  const fromAddress: string | null = useSelector<IMainRootState, string | null>(
-    (state) => state.sendAssets.fromAddress
-  );
-
-  if (!fromAddress) {
-    return null;
-  }
-
-  return (
-    accounts.find(
-      (value) => convertPublicKeyToAVMAddress(value.publicKey) === fromAddress
-    ) || null
-  );
-}
diff --git a/src/extension/selectors/send-assets/useSelectSendAssetNote.ts b/src/extension/selectors/send-assets/useSelectSendAssetNote.ts
deleted file mode 100644
index e26cf055..00000000
--- a/src/extension/selectors/send-assets/useSelectSendAssetNote.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { useSelector } from 'react-redux';
-
-// types
-import { IMainRootState } from '@extension/types';
-
-export default function useSelectSendAssetNote(): string | null {
-  return useSelector<IMainRootState, string | null>(
-    (state) => state.sendAssets.note
-  );
-}
diff --git a/src/extension/selectors/send-assets/useSelectSendAssetSelectedAsset.ts b/src/extension/selectors/send-assets/useSelectSendAssetSelectedAsset.ts
deleted file mode 100644
index 36a0e346..00000000
--- a/src/extension/selectors/send-assets/useSelectSendAssetSelectedAsset.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import { useSelector } from 'react-redux';
-
-// types
-import { IAssetTypes, INativeCurrency, IMainRootState } from '@extension/types';
-
-export default function useSelectSendAssetSelectedAsset():
-  | IAssetTypes
-  | INativeCurrency
-  | null {
-  return useSelector<IMainRootState, IAssetTypes | INativeCurrency | null>(
-    (state) => state.sendAssets.selectedAsset
-  );
-}
diff --git a/src/extension/selectors/send-assets/useSelectSendAssetSender.ts b/src/extension/selectors/send-assets/useSelectSendAssetSender.ts
new file mode 100644
index 00000000..108a37ce
--- /dev/null
+++ b/src/extension/selectors/send-assets/useSelectSendAssetSender.ts
@@ -0,0 +1,23 @@
+import { useSelector } from 'react-redux';
+
+// selectors
+import useSelectAccounts from '../accounts/useSelectAccounts';
+
+// types
+import type {
+  IAccountWithExtendedProps,
+  IMainRootState,
+} from '@extension/types';
+
+export default function useSelectSendAssetSender(): IAccountWithExtendedProps | null {
+  const accounts = useSelectAccounts();
+  const sender = useSelector<IMainRootState, IAccountWithExtendedProps | null>(
+    (state) => state.sendAssets.sender
+  );
+
+  if (!sender) {
+    return null;
+  }
+
+  return accounts.find((value) => value.publicKey === sender.publicKey) || null;
+}
diff --git a/src/extension/selectors/send-assets/useSelectSendAssetToAddress.ts b/src/extension/selectors/send-assets/useSelectSendAssetToAddress.ts
deleted file mode 100644
index 6f5b7578..00000000
--- a/src/extension/selectors/send-assets/useSelectSendAssetToAddress.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { useSelector } from 'react-redux';
-
-// types
-import { IMainRootState } from '@extension/types';
-
-export default function useSelectSendAssetToAddress(): string | null {
-  return useSelector<IMainRootState, string | null>(
-    (state) => state.sendAssets.toAddress
-  );
-}
diff --git a/src/extension/services/SettingsService/SettingsService.ts b/src/extension/services/SettingsService/SettingsService.ts
index 3a5dcfd2..70095215 100644
--- a/src/extension/services/SettingsService/SettingsService.ts
+++ b/src/extension/services/SettingsService/SettingsService.ts
@@ -3,7 +3,7 @@ import { networks } from '@extension/config';
 
 // constants
 import {
-  PASSWORD_LOCK_DURATION_NORMAL,
+  CREDENTIALS_LOCK_DURATION_NORMAL,
   SETTINGS_ADVANCED_KEY,
   SETTINGS_APPEARANCE_KEY,
   SETTINGS_GENERAL_KEY,
@@ -64,7 +64,7 @@ export default class SettingsService {
         allowActionTracking: false,
       },
       security: {
-        credentialLockTimeoutDuration: PASSWORD_LOCK_DURATION_NORMAL,
+        credentialLockTimeoutDuration: CREDENTIALS_LOCK_DURATION_NORMAL,
         enableCredentialLock: false,
       },
     };
diff --git a/src/extension/translations/en.ts b/src/extension/translations/en.ts
index 9c4c943d..22ae8bde 100644
--- a/src/extension/translations/en.ts
+++ b/src/extension/translations/en.ts
@@ -6,7 +6,6 @@ import { IResourceLanguage } from '@extension/types';
 
 const translation: IResourceLanguage = {
   buttons: {
-    activate: 'Activate',
     add: 'Add',
     addAccount: 'Add Account',
     addAsset: 'Add Asset',
@@ -18,26 +17,23 @@ const translation: IResourceLanguage = {
     changePassword: 'Change Password',
     clearAllData: 'Clear All Data',
     confirm: 'Confirm',
-    connect: 'Connect',
     copy: 'Copy',
     copyURI: 'Copy URI',
     copySeedPhrase: 'Copy Seed Phrase',
     create: 'Create',
-    deactivate: 'Deactivate',
     disconnectAllSessions: 'Disconnect All Sessions',
     dismiss: 'Dismiss',
-    download: 'Download',
     encrypt: 'Encrypt',
     getStarted: 'Get Started',
     hide: 'Hide',
     import: 'Import',
+    max: 'max',
     moreDetails: 'More Details',
     next: 'Next',
     ok: 'OK',
     previous: 'Previous',
     receive: 'Receive',
     reKey: 'Re-Key',
-    reject: 'Reject',
     remove: 'Remove',
     removePasskey: 'Remove Passkey',
     reset: 'Reset',
@@ -46,9 +42,9 @@ const translation: IResourceLanguage = {
     scanCurrentTab: 'Scan Current Tab',
     scanUsingCamera: 'Scan Using Camera',
     selectAccounts: 'Select Accounts',
+    selectReceiverAccount: 'Select Receiver Account',
     send: 'Send',
     sign: 'Sign',
-    tryAgain: 'Try Again',
     undo: 'Undo',
     unlock: 'Unlock',
     view: 'View',
@@ -128,8 +124,8 @@ const translation: IResourceLanguage = {
     destroyAsset: 'Be careful, destroying an asset is irreversible!',
     disconnectAllSessions: 'Are you sure you want to disconnect all sessions?',
     displayingCountOfTotal: 'Displaying {{count}} of {{total}}',
-    enablePasswordLock:
-      'Passwords will only need to be entered due to inactivity.',
+    enableCredentialsLock:
+      'Credentials will only be needed to be entered due to inactivity.',
     enableRequest:
       'An application is requesting to connect. Select which accounts you would like to enable:',
     encryptWithPasskeyInstruction1: `1. You will be asked to enter your password to decrypt your private keys.`,
@@ -221,7 +217,6 @@ const translation: IResourceLanguage = {
       'Unfortunately your browser does not support passkeys.',
     passkeyNotSupported2:
       'Try updating your browser to the latest or a newer version.',
-    passwordLockDescription: 'Please re-enter your password to unlock.',
     passwordScoreInfo:
       'To conform with our <2>Strong Password Policy</2>, you are required to use a sufficiently strong password. Password must be at least 8 characters.',
     preferredBlockExplorer: 'Used when opening chain information in new tabs.',
@@ -261,9 +256,9 @@ const translation: IResourceLanguage = {
       '2. After your password has been confirmed, you will then be asked to use your passkey to decrypt the private keys.',
     requestingPasskeyPermission:
       'Requesting permission from the passkey "{{name}}".',
-    saveMnemonicPhrase1:
+    saveSeedPhrase1:
       'Here is your 25 word mnemonic seed phrase; it is the key to your account.',
-    saveMnemonicPhrase2: `Make sure you save this in a secure place.`,
+    saveSeedPhrase2: `Make sure you save this in a secure place.`,
     scannedQrCodes: 'Scanning {{count}} of {{total}} codes',
     scanningForQrCode:
       'Scanning for a QR Code. Make sure the QR code is visible in the background.',
@@ -291,6 +286,7 @@ const translation: IResourceLanguage = {
     unknownAVMNetwork: 'Network "{{genesisID}}" not supported.',
     unknownQRCode: 'The QR code provided is not recognized.',
     updatingAssetInformation: 'Updating asset information',
+    updatingTransactions: 'Updating transactions',
     viewSeedPhrase1: 'Select an account to view the seed phrase.',
     viewSeedPhrase2: 'You will be prompted to enter your password.',
   },
@@ -312,8 +308,8 @@ const translation: IResourceLanguage = {
       copySeedPhraseRequired:
         'You must confirm you have copied the seed phrase',
       invalidAddress: 'Invalid address',
-      invalidMnemonic: 'Invalid seed phrase',
       invalidPassword: 'Invalid password',
+      invalidSeedPhrase: 'Invalid seed phrase',
       passwordMinLength: 'Must be at least 8 characters',
       passwordTooWeak: 'This password is too weak',
       required: 'This field required',
@@ -337,6 +333,7 @@ const translation: IResourceLanguage = {
   headings: {
     accountAlreadyAdded: 'Account Already Added',
     accounts: 'Accounts',
+    accountUpdated: 'Account Updated',
     addAsset: 'Add Asset',
     addCustomNode: 'Add Custom Node',
     addedAccount: 'Added Account',
@@ -363,6 +360,7 @@ const translation: IResourceLanguage = {
     details: 'Details',
     developer: 'Developer',
     disconnectAllSessions: 'Disconnect All Sessions',
+    editAccount: 'Edit Account',
     enterAnAddress: 'Enter an address',
     enterYourSeedPhrase: 'Enter your seed phrase',
     factoryReset: 'Factory Reset',
@@ -410,6 +408,8 @@ const translation: IResourceLanguage = {
     selectAssets: 'Select Assets',
     selectANetwork: 'Select A Network',
     selectAnOption: 'Select An Option',
+    selectReceiverAccount: 'Select Receiver Account',
+    selectSenderAccount: 'Select Sender Account',
     sendAsset: 'Send {{asset}}',
     shareAddress: 'Share Address',
     screenCaptureDenied: 'Screen Capture Denied',
@@ -469,6 +469,7 @@ const translation: IResourceLanguage = {
     accountToFreeze: 'Account To Freeze',
     accountToUnfreeze: 'Account To Unfreeze',
     addAccount: 'Add Account',
+    addMaximumAmount: 'Add Maximum Amount',
     algorithm: 'Algorithm',
     allowActionTracking: 'Allow certain actions to be tracked?',
     allowBetaNet: 'Allow BetaNet networks?',
@@ -505,6 +506,14 @@ const translation: IResourceLanguage = {
     copyValue: 'Copy {{value}}',
     creatorAccount: 'Creator Account',
     credentialID: 'Credential ID',
+    credentialsLockDuration: 'Never',
+    credentialsLockDuration_60000: '1 minute',
+    credentialsLockDuration_120000: '2 minutes',
+    credentialsLockDuration_300000: '5 minutes',
+    credentialsLockDuration_600000: '10 minutes',
+    credentialsLockDuration_900000: '15 minutes',
+    credentialsLockDuration_1800000: '30 minutes',
+    credentialsLockTimeout: 'Password lock timeout',
     currentAuthorizedAccount: 'Current Authorized Account',
     dark: 'Dark',
     date: 'Date',
@@ -516,9 +525,9 @@ const translation: IResourceLanguage = {
     did: 'DID',
     disabled: 'Disabled',
     disconnect: 'Disconnect',
-    editAccountName: 'Rename account',
+    editAccount: 'Edit Account',
+    enableCredentialsLock: 'Enable credential lock?',
     enabled: 'Enabled',
-    enablePasswordLock: 'Enable password lock?',
     experimental: 'Experimental',
     expirationDate: 'Expiration Date',
     extensionId: 'Extension ID',
@@ -560,14 +569,6 @@ const translation: IResourceLanguage = {
     optional: '(optional)',
     passkeyName: 'Passkey name',
     password: 'Password',
-    passwordLockDuration: 'Never',
-    passwordLockDuration_60000: '1 minute',
-    passwordLockDuration_120000: '2 minutes',
-    passwordLockDuration_300000: '5 minutes',
-    passwordLockDuration_600000: '10 minutes',
-    passwordLockDuration_900000: '15 minutes',
-    passwordLockDuration_1800000: '30 minutes',
-    passwordLockTimeout: 'Password lock timeout',
     port: 'Port',
     preferredBlockExplorer: 'Preferred Block Explorer',
     preferredNFTExplorer: 'Preferred NFT Explorer',
@@ -586,6 +587,7 @@ const translation: IResourceLanguage = {
     removedAccount: 'Removed Account',
     removeSession: 'Remove Session',
     reserveAccount: 'Reserve Account',
+    resetSeedPhrase: 'Reset Seed Phrase',
     scanQRCode: 'Scan QR Code',
     seedPhrase: 'Seed Phrase',
     selectAccount: 'Select Account',
@@ -597,6 +599,7 @@ const translation: IResourceLanguage = {
     sendAsset: 'Send {{nativeCurrency}}/Asset',
     settings: 'Settings',
     shareAddress: 'Share Address',
+    showHidePassword: 'Show/hide Password',
     signingMethod: 'Signing Method',
     stateProofKey: 'State Proof Public Key',
     symbol: 'Symbol',
@@ -624,9 +627,9 @@ const translation: IResourceLanguage = {
     watch: 'Watch',
   },
   placeholders: {
+    accountName: 'e.g. Treasury',
     customNodeName: 'e.g. Awesome Node',
     enterAddress: 'Enter address',
-    enterANameForYourAccount: 'Enter a name for your account',
     enterNote: 'Enter an optional note',
     enterPassword: 'Enter password',
     nameAccount: 'Enter a name for this account',
diff --git a/src/extension/types/components/IPropsWithContext.ts b/src/extension/types/components/IPropsWithContext.ts
new file mode 100644
index 00000000..e50d2fe2
--- /dev/null
+++ b/src/extension/types/components/IPropsWithContext.ts
@@ -0,0 +1,5 @@
+interface IPropsWithContext {
+  _context: string;
+}
+
+export default IPropsWithContext;
diff --git a/src/extension/types/components/index.ts b/src/extension/types/components/index.ts
index fbf3abc4..32198b67 100644
--- a/src/extension/types/components/index.ts
+++ b/src/extension/types/components/index.ts
@@ -1 +1,2 @@
 export type { default as IIconWithTooltipProps } from './IIconWithTooltipProps';
+export type { default as IPropsWithContext } from './IPropsWithContext';
diff --git a/src/extension/types/modals/IARC0300ModalContentProps.ts b/src/extension/types/modals/IARC0300ModalContentProps.ts
index 027f0898..8a7b100a 100644
--- a/src/extension/types/modals/IARC0300ModalContentProps.ts
+++ b/src/extension/types/modals/IARC0300ModalContentProps.ts
@@ -1,11 +1,11 @@
-import { ReactElement } from 'react';
+import type { ReactElement } from 'react';
 
 // types
-import type { IARC0300BaseSchema } from '@extension/types';
+import type { IARC0300BaseSchema, IPropsWithContext } from '@extension/types';
 
 interface IARC0300ModalContentProps<
   Schema extends IARC0300BaseSchema | IARC0300BaseSchema[]
-> {
+> extends IPropsWithContext {
   cancelButtonIcon?: ReactElement;
   cancelButtonLabel?: string;
   onCancel: () => void;
diff --git a/src/extension/utils/validateAddressInput/validateAddressInput.ts b/src/extension/utils/validateAddressInput/validateAddressInput.ts
index d3a6b5e3..08f095a2 100644
--- a/src/extension/utils/validateAddressInput/validateAddressInput.ts
+++ b/src/extension/utils/validateAddressInput/validateAddressInput.ts
@@ -4,7 +4,7 @@ import { isValidAddress } from 'algosdk';
 import type { IOptions } from './types';
 
 // utils
-import validateInput from '@extension/utils/validateInput';
+import validateGenericInput from '@extension/utils/validateGenericInput';
 
 /**
  * Convenience function that validates whether an address input is valid.
@@ -18,7 +18,7 @@ export default function validateAddressInput({
   validate,
   value,
 }: IOptions): string | null {
-  const _error = validateInput({
+  const _error = validateGenericInput({
     field,
     t,
     required,
diff --git a/src/extension/utils/validateGenericInput/index.ts b/src/extension/utils/validateGenericInput/index.ts
new file mode 100644
index 00000000..718ff2a1
--- /dev/null
+++ b/src/extension/utils/validateGenericInput/index.ts
@@ -0,0 +1,2 @@
+export { default } from './validateGenericInput';
+export * from './types';
diff --git a/src/extension/utils/validateInput/types/IOptions.ts b/src/extension/utils/validateGenericInput/types/IOptions.ts
similarity index 82%
rename from src/extension/utils/validateInput/types/IOptions.ts
rename to src/extension/utils/validateGenericInput/types/IOptions.ts
index a70e51c5..f2ade327 100644
--- a/src/extension/utils/validateInput/types/IOptions.ts
+++ b/src/extension/utils/validateGenericInput/types/IOptions.ts
@@ -1,4 +1,4 @@
-import { TFunction } from 'i18next';
+import type { TFunction } from 'i18next';
 
 interface IOptions {
   characterLimit?: number;
diff --git a/src/extension/utils/validateInput/types/index.ts b/src/extension/utils/validateGenericInput/types/index.ts
similarity index 100%
rename from src/extension/utils/validateInput/types/index.ts
rename to src/extension/utils/validateGenericInput/types/index.ts
diff --git a/src/extension/utils/validateInput/validateInput.ts b/src/extension/utils/validateGenericInput/validateGenericInput.ts
similarity index 92%
rename from src/extension/utils/validateInput/validateInput.ts
rename to src/extension/utils/validateGenericInput/validateGenericInput.ts
index aab3f600..1e8eaf2e 100644
--- a/src/extension/utils/validateInput/validateInput.ts
+++ b/src/extension/utils/validateGenericInput/validateGenericInput.ts
@@ -6,7 +6,7 @@ import type { IOptions } from './types';
  * @param {IOptions} options - the field name, a translation function, a custom validation function and the value.
  * @returns {string | null} the human-readable error or null if the value passed validation.
  */
-export default function validateInput({
+export default function validateGenericInput({
   characterLimit,
   field,
   required = false,
@@ -16,11 +16,6 @@ export default function validateInput({
 }: IOptions): string | null {
   let byteLength: number;
 
-  // custom validation take precedence
-  if (validate) {
-    return validate(value);
-  }
-
   if (value.length <= 0 && required) {
     return field
       ? t<string>('errors.inputs.requiredWithLabel', { name: field })
@@ -36,5 +31,10 @@ export default function validateInput({
     }
   }
 
+  // custom validations
+  if (validate) {
+    return validate(value);
+  }
+
   return null;
 }
diff --git a/src/extension/utils/validateInput/index.ts b/src/extension/utils/validateInput/index.ts
deleted file mode 100644
index 1594c55e..00000000
--- a/src/extension/utils/validateInput/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export { default } from './validateInput';
-export * from './types';
diff --git a/src/extension/utils/validateNewPasswordInput/index.ts b/src/extension/utils/validateNewPasswordInput/index.ts
new file mode 100644
index 00000000..bb398ae3
--- /dev/null
+++ b/src/extension/utils/validateNewPasswordInput/index.ts
@@ -0,0 +1,2 @@
+export { default } from './validateNewPasswordInput';
+export * from './types';
diff --git a/src/extension/utils/validateNewPasswordInput/types/IOptions.ts b/src/extension/utils/validateNewPasswordInput/types/IOptions.ts
new file mode 100644
index 00000000..2a44705d
--- /dev/null
+++ b/src/extension/utils/validateNewPasswordInput/types/IOptions.ts
@@ -0,0 +1,11 @@
+import type { TFunction } from 'i18next';
+
+interface IOptions {
+  field?: string;
+  required?: boolean;
+  score: number;
+  t: TFunction;
+  value: string;
+}
+
+export default IOptions;
diff --git a/src/extension/utils/validateNewPasswordInput/types/index.ts b/src/extension/utils/validateNewPasswordInput/types/index.ts
new file mode 100644
index 00000000..68e70016
--- /dev/null
+++ b/src/extension/utils/validateNewPasswordInput/types/index.ts
@@ -0,0 +1 @@
+export type { default as IOptions } from './IOptions';
diff --git a/src/extension/utils/validateNewPasswordInput/validateNewPasswordInput.ts b/src/extension/utils/validateNewPasswordInput/validateNewPasswordInput.ts
new file mode 100644
index 00000000..7a472a6e
--- /dev/null
+++ b/src/extension/utils/validateNewPasswordInput/validateNewPasswordInput.ts
@@ -0,0 +1,34 @@
+// constants
+import { PASSWORD_MIN_LENGTH, PASSWORD_MIN_SCORE } from '@extension/constants';
+
+// types
+import type { IOptions } from './types';
+
+/**
+ * Convenience function that validates whether a new password input is valid.
+ * @param {IOptions} options - the field name, a translation function, the current password score and the value.
+ * @returns {string | null} the human-readable error or null if the value passed validation.
+ */
+export default function validateNewPasswordInput({
+  field,
+  required = false,
+  t,
+  score,
+  value,
+}: IOptions): string | null {
+  if (value.length <= 0 && required) {
+    return field
+      ? t<string>('errors.inputs.requiredWithLabel', { name: field })
+      : t<string>('errors.inputs.required');
+  }
+
+  if (value.length < PASSWORD_MIN_LENGTH) {
+    return t<string>('errors.inputs.passwordMinLength');
+  }
+
+  if (score < PASSWORD_MIN_SCORE) {
+    return t<string>('errors.inputs.passwordTooWeak');
+  }
+
+  return null;
+}