diff --git a/.eslintrc b/.eslintrc
index b35f6c2f8..8002080e4 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -3,18 +3,39 @@
     "react-app",
     "plugin:jsx-a11y/recommended",
     "plugin:react-hooks/recommended",
-    "plugin:prettier/recommended"
+    "plugin:prettier/recommended",
+    "plugin:import/recommended",
+    "plugin:import/typescript"
   ],
   "plugins": [
     "jsx-a11y",
-    "react-hooks"
+    "react-hooks",
+    "import"
   ],
   "parser": "@typescript-eslint/parser",
+  "settings": {
+    "import/resolver": {
+      "typescript": {
+        "alwaysTryTypes": true
+      }
+    }
+  },
   "rules": {
     "semi": 1,
     "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx", ".ts", ".tsx"] }],
     "no-unused-vars": "off",
-    "@typescript-eslint/no-unused-vars": ["error"],
-    "jsx-a11y/no-autofocus": "off"
+    "@typescript-eslint/no-unused-vars": ["error", {
+      "args": "after-used"
+    }],
+    "jsx-a11y/no-autofocus": "off",
+    "import/no-cycle": [
+      1,
+      {
+        "maxDepth": 10,
+        "ignoreExternal": true
+      }
+    ],
+    "import/no-named-as-default": 0,
+    "import/export": 1
   }
 }
diff --git a/.prettierrc b/.prettierrc
index ff70333f1..a0329fa53 100644
--- a/.prettierrc
+++ b/.prettierrc
@@ -1,5 +1,10 @@
 {
-"singleQuote": true,
-"arrowParens": "avoid",
-"trailingComma": "none"
+  "singleQuote": true,
+  "arrowParens": "avoid",
+  "trailingComma": "none",
+  "importOrder": ["<THIRD_PARTY_MODULES>", "@src/*", "@popup/*", "@import-account-with-file/*", "@connect-to-app/*", "@signature-request/*", "@onboarding/*", "@background/*", "@hooks/*", "@content/*", "@libs/*", "^[./]"],
+  "importOrderSeparation": true,
+  "importOrderSortSpecifiers": true,
+  "importOrderGroupNamespaceSpecifiers": true,
+  "plugins": ["@trivago/prettier-plugin-sort-imports"]
 }
\ No newline at end of file
diff --git a/__mocks__/file-mock.js b/__mocks__/file-mock.js
deleted file mode 100644
index e69de29bb..000000000
diff --git a/__testHelpers__/withMarkups.ts b/__testHelpers__/withMarkups.ts
deleted file mode 100644
index 62c6ca970..000000000
--- a/__testHelpers__/withMarkups.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import { MatcherFunction } from '@testing-library/react';
-
-type Query = (f: MatcherFunction) => HTMLElement;
-
-export const withMarkup =
-  (query: Query) =>
-  (text: string): HTMLElement =>
-    query((content: string, node: Element | null): boolean => {
-      if (!node) {
-        return false;
-      }
-
-      const hasText = (node: Element) => node.textContent === text;
-      const childrenDontHaveText = Array.from(node.children).every(
-        child => !hasText(child)
-      );
-
-      return hasText(node) && childrenDontHaveText;
-    });
diff --git a/e2e-tests/constants.ts b/e2e-tests/constants.ts
index a31e3dca8..a93495f4e 100644
--- a/e2e-tests/constants.ts
+++ b/e2e-tests/constants.ts
@@ -1,8 +1,10 @@
 import path from 'path';
 
 export const vaultPassword = '3hQqzYn4C7Y8rEZTVEZb';
-export const recoverSecretPhrase =
+export const twentyFourWordsSecretPhrase =
   'hold matrix spider subway bottom jazz charge fire lawn valley stay coil moral hospital dream cycle multiply december agree huge major tower devote old';
+export const twelveWordsSecretPhrase =
+  'small vendor member cry motion lava hurdle gravity cry sentence medal seminar';
 export const secretKeyPath = path.join(__dirname, './account_secret_key.pem');
 
 export const ACCOUNT_NAMES = {
@@ -19,21 +21,31 @@ export const IMPORTED_ACCOUNT = {
   accountName: ACCOUNT_NAMES.importedAccountName,
   publicKey:
     '0184f6d260f4ee6869ddb36affe15456de6ae045278fa2f467bb677561ce0dad55',
-  truncatedPublicKey: '0184f...dad55'
+  truncatedPublicKey: '0184f...dad55',
+  mediumTruncatedPublicKey: '0184f6d260...561ce0dad55'
 };
 
 export const DEFAULT_FIRST_ACCOUNT = {
   accountName: ACCOUNT_NAMES.defaultFirstAccountName,
   publicKey:
     '0202b1943511b8c23b1b2b8ed7ddcedffcc7be70d9366a5005c7beab08a81b7ae633',
-  truncatedPublicKey: '0202b...ae633'
+  truncatedPublicKey: '0202b...ae633',
+  mediumTruncatedPublicKey: '0202b19435...a81b7ae633'
 };
 
 export const DEFAULT_SECOND_ACCOUNT = {
   accountName: ACCOUNT_NAMES.defaultSecondAccountName,
   publicKey:
     '0203b2e05f074452f5e69ba512310deceaca152ebd3394eadcec26c6e68e91aa7724',
-  truncatedPublicKey: '0203b...a7724'
+  truncatedPublicKey: '0203b...a7724',
+  mediumTruncatedPublicKey: '0203b2e05f...8e91aa7724'
+};
+
+export const RECOVER_ACCOUNT_FROM_TWELVE_WORDS = {
+  accountName: 'Account 1',
+  publicKey:
+    '0202b869dbed03ef2cc6a76e54e1a5c588fbe6198f80937994f9a2c1fd3aff4adc1b',
+  truncatedPublicKey: '0202b...adc1b'
 };
 
 export const VALIDATOR = {
diff --git a/e2e-tests/fixtures.ts b/e2e-tests/fixtures.ts
index 598dca7a4..c4eba6b35 100644
--- a/e2e-tests/fixtures.ts
+++ b/e2e-tests/fixtures.ts
@@ -6,7 +6,11 @@ import {
 } from '@playwright/test';
 import path from 'path';
 
-import { PLAYGROUND_URL, vaultPassword } from './constants';
+import {
+  DEFAULT_FIRST_ACCOUNT,
+  PLAYGROUND_URL,
+  vaultPassword
+} from './constants';
 
 export const test = base.extend<{
   context: BrowserContext;
@@ -207,6 +211,7 @@ export const popup = test.extend<{
   lockVault: () => Promise<void>;
   createAccount: (newAccountName: string) => Promise<void>;
   connectAccounts: () => Promise<void>;
+  addContact: () => Promise<void>;
 }>({
   popupPage: async ({ extensionId, page }, use) => {
     await page.goto(`chrome-extension://${extensionId}/popup.html`);
@@ -265,6 +270,27 @@ export const popup = test.extend<{
     };
 
     await use(connectAccounts);
+  },
+  addContact: async ({ page }, use) => {
+    const addContact = async () => {
+      await page.getByTestId('menu-open-icon').click();
+      await page.getByText('Contacts').click();
+
+      await page.getByRole('button', { name: 'Add contact' }).click();
+
+      await page
+        .getByPlaceholder('Name', { exact: true })
+        .fill(DEFAULT_FIRST_ACCOUNT.accountName);
+      await page
+        .getByPlaceholder('Public key', { exact: true })
+        .fill(DEFAULT_FIRST_ACCOUNT.publicKey);
+
+      await page.getByRole('button', { name: 'Add contact' }).click();
+
+      await page.getByRole('button', { name: 'Done' }).click();
+    };
+
+    await use(addContact);
   }
 });
 
diff --git a/e2e-tests/onboarding-flow/recover-secret-phrase-flow.spec.ts b/e2e-tests/onboarding-flow/recover-secret-phrase-flow.spec.ts
index 568d680b7..b3d030e70 100644
--- a/e2e-tests/onboarding-flow/recover-secret-phrase-flow.spec.ts
+++ b/e2e-tests/onboarding-flow/recover-secret-phrase-flow.spec.ts
@@ -1,9 +1,14 @@
-import { onboardingExpect, onboarding } from '../fixtures';
-import { DEFAULT_FIRST_ACCOUNT, recoverSecretPhrase } from '../constants';
+import {
+  DEFAULT_FIRST_ACCOUNT,
+  RECOVER_ACCOUNT_FROM_TWELVE_WORDS,
+  twelveWordsSecretPhrase,
+  twentyFourWordsSecretPhrase
+} from '../constants';
+import { onboarding, onboardingExpect } from '../fixtures';
 
 onboarding.describe('Onboarding UI: recover secret phrase flow', () => {
   onboarding(
-    'should recover account via secret phrase',
+    'should recover account via 24 words secret phrase',
     async ({ page, createOnboardingPassword, extensionId }) => {
       await createOnboardingPassword();
 
@@ -19,7 +24,7 @@ onboarding.describe('Onboarding UI: recover secret phrase flow', () => {
 
       await page
         .getByPlaceholder('e.g. Bobcat Lemon Blanket…')
-        .fill(recoverSecretPhrase);
+        .fill(twentyFourWordsSecretPhrase);
 
       await page.getByRole('button', { name: 'Recover my wallet' }).click();
 
@@ -33,4 +38,37 @@ onboarding.describe('Onboarding UI: recover secret phrase flow', () => {
       ).toBeVisible();
     }
   );
+  onboarding(
+    'should recover account via 12 words secret phrase',
+    async ({ page, createOnboardingPassword, extensionId }) => {
+      await createOnboardingPassword();
+
+      await page
+        .getByRole('button', {
+          name: 'Import an existing secret recovery phrase'
+        })
+        .click();
+
+      await onboardingExpect(
+        page.getByText('Please enter your secret recovery phrase')
+      ).toBeVisible();
+
+      await page
+        .getByPlaceholder('e.g. Bobcat Lemon Blanket…')
+        .fill(twelveWordsSecretPhrase);
+
+      await page.getByRole('button', { name: 'Recover my wallet' }).click();
+
+      await page.goto(`chrome-extension://${extensionId}/popup.html`);
+
+      await onboardingExpect(
+        page.getByText(RECOVER_ACCOUNT_FROM_TWELVE_WORDS.accountName)
+      ).toBeVisible();
+      await onboardingExpect(
+        page
+          .getByText(RECOVER_ACCOUNT_FROM_TWELVE_WORDS.truncatedPublicKey)
+          .nth(0)
+      ).toBeVisible();
+    }
+  );
 });
diff --git a/e2e-tests/popup/contacts/contacts.spec.ts b/e2e-tests/popup/contacts/contacts.spec.ts
new file mode 100644
index 000000000..e7d617f1c
--- /dev/null
+++ b/e2e-tests/popup/contacts/contacts.spec.ts
@@ -0,0 +1,240 @@
+import { popup, popupExpect } from '../../fixtures';
+import {
+  DEFAULT_FIRST_ACCOUNT,
+  DEFAULT_SECOND_ACCOUNT,
+  vaultPassword
+} from '../../constants';
+
+popup.describe('Popup UI: contacts', () => {
+  popup(
+    "should display an empty contacts list when no contacts are present in the user's contact book",
+    async ({ popupPage, unlockVault }) => {
+      await unlockVault();
+
+      await popupPage.getByTestId('menu-open-icon').click();
+      await popupPage.getByText('Contacts').click();
+
+      await popupExpect(
+        popupPage.getByRole('heading', { name: 'No contacts just yet' })
+      ).toBeVisible();
+
+      await popupExpect(
+        popupPage.getByText(
+          'You can add here a list of contacts to make it easier for you to send tokens.'
+        )
+      ).toBeVisible();
+    }
+  );
+
+  popup(
+    'should successfully add a contact and display it in the contacts list',
+    async ({ popupPage, unlockVault }) => {
+      await unlockVault();
+
+      await popupPage.getByTestId('menu-open-icon').click();
+      await popupPage.getByText('Contacts').click();
+
+      await popupPage.getByRole('button', { name: 'Add contact' }).click();
+
+      await popupExpect(
+        popupPage.getByRole('heading', { name: 'New contact' })
+      ).toBeVisible();
+
+      await popupPage
+        .getByPlaceholder('Name', { exact: true })
+        .fill(DEFAULT_FIRST_ACCOUNT.accountName);
+      await popupPage
+        .getByPlaceholder('Public key', { exact: true })
+        .fill(DEFAULT_FIRST_ACCOUNT.publicKey);
+
+      await popupPage.getByRole('button', { name: 'Add contact' }).click();
+
+      await popupExpect(
+        popupPage.getByRole('heading', { name: 'All done!' })
+      ).toBeVisible();
+
+      await popupExpect(
+        popupPage.getByText(
+          'You will see this contact’s details and select it when you transfer or delegate tokens.'
+        )
+      ).toBeVisible();
+
+      await popupPage.getByRole('button', { name: 'Done' }).click();
+
+      await popupExpect(
+        popupPage.getByRole('heading', {
+          name: 'Contacts'
+        })
+      ).toBeVisible();
+
+      await popupExpect(
+        popupPage.getByText(DEFAULT_FIRST_ACCOUNT.accountName)
+      ).toBeVisible();
+
+      await popupExpect(
+        popupPage.getByText(DEFAULT_FIRST_ACCOUNT.mediumTruncatedPublicKey)
+      ).toBeVisible();
+    }
+  );
+
+  popup(
+    'should display an error message for addition of a contact with an invalid public key',
+    async ({ popupPage, unlockVault }) => {
+      await unlockVault();
+
+      await popupPage.getByTestId('menu-open-icon').click();
+      await popupPage.getByText('Contacts').click();
+
+      await popupPage.getByRole('button', { name: 'Add contact' }).click();
+
+      await popupPage
+        .getByPlaceholder('Name', { exact: true })
+        .fill(DEFAULT_FIRST_ACCOUNT.accountName);
+      await popupPage
+        .getByPlaceholder('Public key', { exact: true })
+        .fill(DEFAULT_FIRST_ACCOUNT.truncatedPublicKey);
+
+      await popupExpect(
+        popupPage.getByText('Public address should be a valid public key')
+      ).toBeVisible();
+      await popupExpect(
+        popupPage.getByRole('button', { name: 'Add contact' })
+      ).toBeDisabled();
+    }
+  );
+
+  popup(
+    'should show error message for duplicate contact name during contact addition',
+    async ({ popupPage, unlockVault, addContact }) => {
+      await unlockVault();
+      await addContact();
+
+      await popupPage.getByRole('button', { name: 'Add contact' }).click();
+
+      await popupPage
+        .getByPlaceholder('Name', { exact: true })
+        .fill(DEFAULT_FIRST_ACCOUNT.accountName);
+      await popupPage
+        .getByPlaceholder('Public key', { exact: true })
+        .fill(DEFAULT_FIRST_ACCOUNT.publicKey);
+
+      await popupExpect(
+        popupPage.getByText(
+          'You’ve already got a contact with this name. Please find a new name for this one'
+        )
+      ).toBeVisible();
+      await popupExpect(
+        popupPage.getByRole('button', { name: 'Add contact' })
+      ).toBeDisabled();
+    }
+  );
+
+  popup(
+    'should show contact details on contact selection',
+    async ({ popupPage, unlockVault, addContact }) => {
+      await unlockVault();
+      await addContact();
+
+      await popupPage.getByText(DEFAULT_FIRST_ACCOUNT.accountName).click();
+
+      await popupExpect(
+        popupPage.getByRole('heading', {
+          name: DEFAULT_FIRST_ACCOUNT.accountName
+        })
+      ).toBeVisible();
+
+      await popupExpect(
+        popupPage.getByText(DEFAULT_FIRST_ACCOUNT.publicKey)
+      ).toBeVisible();
+    }
+  );
+
+  popup(
+    'should edit a contact successfully and display the updated contact details',
+    async ({ popupPage, unlockVault, addContact }) => {
+      await unlockVault();
+      await addContact();
+
+      await popupPage.getByText(DEFAULT_FIRST_ACCOUNT.accountName).click();
+
+      await popupPage.getByTestId('edit-contact-button').click();
+
+      await popupExpect(
+        popupPage.getByRole('heading', { name: 'Enter your password' })
+      ).toBeVisible();
+
+      await popupPage
+        .getByPlaceholder('Password', { exact: true })
+        .fill(vaultPassword);
+      await popupPage.getByRole('button', { name: 'Continue' }).click();
+
+      await popupExpect(
+        popupPage.getByRole('heading', { name: 'Edit contact' })
+      ).toBeVisible();
+      popupExpect(
+        await popupPage.getByPlaceholder('Name', { exact: true }).inputValue()
+      ).toBe(DEFAULT_FIRST_ACCOUNT.accountName);
+      popupExpect(
+        await popupPage
+          .getByPlaceholder('Public key', { exact: true })
+          .inputValue()
+      ).toBe(DEFAULT_FIRST_ACCOUNT.publicKey);
+
+      await popupPage
+        .getByPlaceholder('Name', { exact: true })
+        .fill(DEFAULT_SECOND_ACCOUNT.accountName);
+      await popupPage
+        .getByPlaceholder('Public key', { exact: true })
+        .fill(DEFAULT_SECOND_ACCOUNT.publicKey);
+
+      await popupPage.getByRole('button', { name: 'Save' }).click();
+
+      await popupExpect(
+        popupPage.getByText(DEFAULT_FIRST_ACCOUNT.accountName)
+      ).not.toBeVisible();
+
+      await popupPage.getByText(DEFAULT_SECOND_ACCOUNT.accountName).click();
+
+      await popupExpect(
+        popupPage.getByRole('heading', {
+          name: DEFAULT_SECOND_ACCOUNT.accountName
+        })
+      ).toBeVisible();
+
+      await popupExpect(
+        popupPage.getByText(DEFAULT_SECOND_ACCOUNT.publicKey)
+      ).toBeVisible();
+    }
+  );
+
+  popup(
+    'should remove a contact successfully',
+    async ({ popupPage, unlockVault, addContact }) => {
+      await unlockVault();
+      await addContact();
+
+      await popupPage.getByText(DEFAULT_FIRST_ACCOUNT.accountName).click();
+
+      await popupPage.getByTestId('delete-contact-button').click();
+
+      await popupExpect(
+        popupPage.getByRole('heading', { name: 'Enter your password' })
+      ).toBeVisible();
+
+      await popupPage
+        .getByPlaceholder('Password', { exact: true })
+        .fill(vaultPassword);
+      await popupPage.getByRole('button', { name: 'Continue' }).click();
+
+      await popupExpect(
+        popupPage.getByRole('heading', { name: 'Delete contact' })
+      ).toBeVisible();
+
+      await popupPage.getByRole('button', { name: 'Delete' }).click();
+
+      await popupExpect(
+        popupPage.getByText(DEFAULT_FIRST_ACCOUNT.accountName)
+      ).not.toBeVisible();
+    }
+  );
+});
diff --git a/jest.config.js b/jest.config.js
index 53d2d591d..6ed9233d0 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -8,13 +8,9 @@ module.exports = {
   coveragePathIgnorePatterns: ['/node_modules/'],
   testRegex: '(/tests?/.*|(\\.|/)(test|spec))\\.tsx?$',
   moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
-  modulePathIgnorePatterns: ['<rootDir>/.*/__mocks__', '<rootDir>/e2e'],
+  modulePathIgnorePatterns: ['<rootDir>/e2e-tests'],
   moduleNameMapper: {
-    '\\.(jpg|jpeg|png|gif|webp|svg|ttf|woff|woff2)$':
-      '<rootDir>/__mocks__/file-mock.js',
-    '^@src/(.*)$': '<rootDir>/src/$1',
-    '^@mocks/(.*)$': '<rootDir>/__mocks__/$1',
-    '^@testHelpers/(.*)$': '<rootDir>/__testHelpers__/$1'
+    '^@src/(.*)$': '<rootDir>/src/$1'
   },
   setupFilesAfterEnv: ['@testing-library/jest-dom/extend-expect'],
   coverageReporters: ['json', 'text'],
diff --git a/jest.tsconfig.json b/jest.tsconfig.json
index 0dd43cbda..27b375c34 100644
--- a/jest.tsconfig.json
+++ b/jest.tsconfig.json
@@ -18,13 +18,12 @@
       "@popup/*": ["src/apps/popup/*"],
       "@import-account-with-file/*": ["src/apps/import-account-with-file/*"],
       "@connect-to-app/*": ["src/apps/connect-to-app/*"],
+      "@signature-request/*": ["src/apps/signature-request/*"],
+      "@onboarding/*": ["src/apps/onboarding/*"],
       "@background/*": ["src/background/*"],
       "@content/*": ["src/content/*"],
-      "@layout/*": ["src/libs/layout/*"],
       "@libs/*": ["src/libs/*"],
-      "@hooks/*": ["src/hooks/*"],
-      "@mocks/*": ["__mocks__/*"],
-      "@testHelpers/*": ["__testHelpers__/*"]
+      "@hooks/*": ["src/hooks/*"]
     }
   },
   "exclude": ["node_modules", "build"]
diff --git a/package-lock.json b/package-lock.json
index 40886c620..9003b39ba 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -24,7 +24,6 @@
         "casper-cep18-js-client": "1.0.2",
         "casper-js-sdk": "2.13.3",
         "date-fns": "^2.30.0",
-        "facepaint": "^1.2.1",
         "i18next": "^23.5.1",
         "i18next-browser-languagedetector": "^6.1.5",
         "i18next-http-backend": "^2.4.1",
@@ -65,10 +64,10 @@
         "@testing-library/react": "^12.1.2",
         "@testing-library/react-hooks": "^7.0.2",
         "@testing-library/user-event": "^13.5.0",
+        "@trivago/prettier-plugin-sort-imports": "^4.3.0",
         "@types/big.js": "^6.1.6",
         "@types/chrome": "0.0.246",
         "@types/expect": "^24.3.0",
-        "@types/facepaint": "^1.2.3",
         "@types/jest": "29.2.3",
         "@types/lodash.throttle": "4.1.7",
         "@types/node": "^20.9.0",
@@ -87,8 +86,9 @@
         "eslint-config-airbnb": "^19.0.4",
         "eslint-config-prettier": "^8.3.0",
         "eslint-config-react-app": "^7.0.0",
+        "eslint-import-resolver-typescript": "^3.6.1",
         "eslint-plugin-flowtype": "^8.0.3",
-        "eslint-plugin-import": "^2.25.2",
+        "eslint-plugin-import": "^2.29.1",
         "eslint-plugin-jsx-a11y": "^6.7.1",
         "eslint-plugin-prettier": "^5.0.0",
         "eslint-plugin-react": "7.33.2",
@@ -115,7 +115,7 @@
         "tsconfig-paths-webpack-plugin": "^4.1.0",
         "typescript": "4.9.3",
         "url-loader": "^4.1.1",
-        "web-ext": "7.8.0",
+        "web-ext": "7.9.0",
         "webextension-polyfill": "0.10.0",
         "webpack": "5.88.2",
         "webpack-cli": "5.1.4",
@@ -833,9 +833,9 @@
       }
     },
     "node_modules/@babel/helper-string-parser": {
-      "version": "7.22.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.22.5.tgz",
-      "integrity": "sha512-mM4COjgZox8U+JcXQwPijIZLElkgEpO5rsERVDJTc2qfCDfERyob6k5WegS14SX18IIjv+XD+GrqNumY5JRCDw==",
+      "version": "7.23.4",
+      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.23.4.tgz",
+      "integrity": "sha512-803gmbQdqwdf4olxrX4AJyFBV/RTr3rSmOj0rKwesmzlfhYNDEs+/iOcznzpNWlJlIlTJC2QfPFcHB6DlzdVLQ==",
       "engines": {
         "node": ">=6.9.0"
       }
@@ -2917,9 +2917,9 @@
       }
     },
     "node_modules/@eslint/eslintrc": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-2.1.2.tgz",
-      "integrity": "sha512-+wvgpDsrB1YqAMdEUCcnTlpfVBH7Vqn6A/NT3D8WVXFIaKMlErPIZT3oCIAVCOtarRpMtelZLqJeU3t7WY6X6g==",
+      "version": "2.1.4",
+      "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-2.1.4.tgz",
+      "integrity": "sha512-269Z39MS6wVJtsoUl10L60WdkhJVdPG24Q4eZTH3nnF6lpvSShEK3wQjDX9JRWAUPvPh7COouPpU9IrqaZFvtQ==",
       "dev": true,
       "dependencies": {
         "ajv": "^6.12.4",
@@ -2967,9 +2967,9 @@
       }
     },
     "node_modules/@eslint/js": {
-      "version": "8.48.0",
-      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-8.48.0.tgz",
-      "integrity": "sha512-ZSjtmelB7IJfWD2Fvb7+Z+ChTIKWq6kjda95fLcQKNS5aheVHn4IkfgRQE3sIIzTcSLwLcLZUD9UBt+V7+h+Pw==",
+      "version": "8.55.0",
+      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-8.55.0.tgz",
+      "integrity": "sha512-qQfo2mxH5yVom1kacMtZZJFVdW+E70mqHMJvVg6WTLo+VBuQJ4TojZlfWBjK0ve5BdEeNAVxOsl/nvNMpJOaJA==",
       "dev": true,
       "engines": {
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
@@ -3251,12 +3251,12 @@
       }
     },
     "node_modules/@humanwhocodes/config-array": {
-      "version": "0.11.11",
-      "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.11.tgz",
-      "integrity": "sha512-N2brEuAadi0CcdeMXUkhbZB84eskAc8MEX1By6qEchoVywSgXPIjou4rYsl0V3Hj0ZnuGycGCjdNgockbzeWNA==",
+      "version": "0.11.13",
+      "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.13.tgz",
+      "integrity": "sha512-JSBDMiDKSzQVngfRjOdFXgFfklaXI4K9nLF49Auh21lmBWRLIK3+xTErTWD4KU54pb6coM6ESE7Awz/FNU3zgQ==",
       "dev": true,
       "dependencies": {
-        "@humanwhocodes/object-schema": "^1.2.1",
+        "@humanwhocodes/object-schema": "^2.0.1",
         "debug": "^4.1.1",
         "minimatch": "^3.0.5"
       },
@@ -3278,9 +3278,9 @@
       }
     },
     "node_modules/@humanwhocodes/object-schema": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/@humanwhocodes/object-schema/-/object-schema-1.2.1.tgz",
-      "integrity": "sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==",
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/@humanwhocodes/object-schema/-/object-schema-2.0.1.tgz",
+      "integrity": "sha512-dvuCeX5fC9dXgJn9t+X5atfmgQAzUOWqS1254Gh0m6i8wKd10ebXkfNKiRK+1GWi/yTvvLDHpoxLr0xxxeslWw==",
       "dev": true
     },
     "node_modules/@isaacs/cliui": {
@@ -4324,9 +4324,9 @@
       }
     },
     "node_modules/@mdn/browser-compat-data": {
-      "version": "5.3.14",
-      "resolved": "https://registry.npmjs.org/@mdn/browser-compat-data/-/browser-compat-data-5.3.14.tgz",
-      "integrity": "sha512-Y9XQrphVcE6u9xMm+gIqN86opbU/5s2W1pdPyKRyFV5B7+2jWM2gLI5JpfhZncaoDKvhy6FYwK04aCz5UM/bTQ==",
+      "version": "5.4.3",
+      "resolved": "https://registry.npmjs.org/@mdn/browser-compat-data/-/browser-compat-data-5.4.3.tgz",
+      "integrity": "sha512-+VnaO5zYUwFQVuRqp2qLPGR5GwhhJ/lrp0yEmamJ/nI15P2GKwGBEWRDiITZR8i6AYxeiQSu2rOi/gqxehnPuA==",
       "dev": true
     },
     "node_modules/@noble/ciphers": {
@@ -5935,6 +5935,120 @@
         "node": ">= 6"
       }
     },
+    "node_modules/@trivago/prettier-plugin-sort-imports": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/@trivago/prettier-plugin-sort-imports/-/prettier-plugin-sort-imports-4.3.0.tgz",
+      "integrity": "sha512-r3n0onD3BTOVUNPhR4lhVK4/pABGpbA7bW3eumZnYdKaHkf1qEC+Mag6DPbGNuuh0eG8AaYj+YqmVHSiGslaTQ==",
+      "dev": true,
+      "dependencies": {
+        "@babel/generator": "7.17.7",
+        "@babel/parser": "^7.20.5",
+        "@babel/traverse": "7.23.2",
+        "@babel/types": "7.17.0",
+        "javascript-natural-sort": "0.7.1",
+        "lodash": "^4.17.21"
+      },
+      "peerDependencies": {
+        "@vue/compiler-sfc": "3.x",
+        "prettier": "2.x - 3.x"
+      },
+      "peerDependenciesMeta": {
+        "@vue/compiler-sfc": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@trivago/prettier-plugin-sort-imports/node_modules/@babel/generator": {
+      "version": "7.17.7",
+      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.17.7.tgz",
+      "integrity": "sha512-oLcVCTeIFadUoArDTwpluncplrYBmTCCZZgXCbgNGvOBBiSDDK3eWO4b/+eOTli5tKv1lg+a5/NAXg+nTcei1w==",
+      "dev": true,
+      "dependencies": {
+        "@babel/types": "^7.17.0",
+        "jsesc": "^2.5.1",
+        "source-map": "^0.5.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@trivago/prettier-plugin-sort-imports/node_modules/@babel/traverse": {
+      "version": "7.23.2",
+      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.23.2.tgz",
+      "integrity": "sha512-azpe59SQ48qG6nu2CzcMLbxUudtN+dOM9kDbUqGq3HXUJRlo7i8fvPoxQUzYgLZ4cMVmuZgm8vvBpNeRhd6XSw==",
+      "dev": true,
+      "dependencies": {
+        "@babel/code-frame": "^7.22.13",
+        "@babel/generator": "^7.23.0",
+        "@babel/helper-environment-visitor": "^7.22.20",
+        "@babel/helper-function-name": "^7.23.0",
+        "@babel/helper-hoist-variables": "^7.22.5",
+        "@babel/helper-split-export-declaration": "^7.22.6",
+        "@babel/parser": "^7.23.0",
+        "@babel/types": "^7.23.0",
+        "debug": "^4.1.0",
+        "globals": "^11.1.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@trivago/prettier-plugin-sort-imports/node_modules/@babel/traverse/node_modules/@babel/generator": {
+      "version": "7.23.6",
+      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.23.6.tgz",
+      "integrity": "sha512-qrSfCYxYQB5owCmGLbl8XRpX1ytXlpueOb0N0UmQwA073KZxejgQTzAmJezxvpwQD9uGtK2shHdi55QT+MbjIw==",
+      "dev": true,
+      "dependencies": {
+        "@babel/types": "^7.23.6",
+        "@jridgewell/gen-mapping": "^0.3.2",
+        "@jridgewell/trace-mapping": "^0.3.17",
+        "jsesc": "^2.5.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@trivago/prettier-plugin-sort-imports/node_modules/@babel/traverse/node_modules/@babel/types": {
+      "version": "7.23.6",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.23.6.tgz",
+      "integrity": "sha512-+uarb83brBzPKN38NX1MkB6vb6+mwvR6amUulqAE7ccQw1pEl+bCia9TbdG1lsnFP7lZySvUn37CHyXQdfTwzg==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-string-parser": "^7.23.4",
+        "@babel/helper-validator-identifier": "^7.22.20",
+        "to-fast-properties": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@trivago/prettier-plugin-sort-imports/node_modules/@babel/types": {
+      "version": "7.17.0",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.17.0.tgz",
+      "integrity": "sha512-TmKSNO4D5rzhL5bjWFcVHHLETzfQ/AmbKpKPOSjlP0WoHZ6L911fgoOKY4Alp/emzG4cHJdyN49zpgkbXFEHHw==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-validator-identifier": "^7.16.7",
+        "to-fast-properties": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@trivago/prettier-plugin-sort-imports/node_modules/@jridgewell/gen-mapping": {
+      "version": "0.3.3",
+      "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.3.tgz",
+      "integrity": "sha512-HLhSWOLRi875zjjMG/r+Nv0oCW8umGb0BgEhyX3dDX3egwZtB8PqLnjz3yedt8R5StBrzcg4aBpnh8UA9D1BoQ==",
+      "dev": true,
+      "dependencies": {
+        "@jridgewell/set-array": "^1.0.1",
+        "@jridgewell/sourcemap-codec": "^1.4.10",
+        "@jridgewell/trace-mapping": "^0.3.9"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
     "node_modules/@tsconfig/node10": {
       "version": "1.0.9",
       "resolved": "https://registry.npmjs.org/@tsconfig/node10/-/node10-1.0.9.tgz",
@@ -6421,12 +6535,6 @@
         "@types/send": "*"
       }
     },
-    "node_modules/@types/facepaint": {
-      "version": "1.2.3",
-      "resolved": "https://registry.npmjs.org/@types/facepaint/-/facepaint-1.2.3.tgz",
-      "integrity": "sha512-Im/T/LMrEMKySMuIhOovOGVdFLFP7wlrWWR9nl5laArHFQnik6xRfUWNr0khAQIGkqU8a/pTQPxycYnfwswCqw==",
-      "dev": true
-    },
     "node_modules/@types/filesystem": {
       "version": "0.0.32",
       "resolved": "https://registry.npmjs.org/@types/filesystem/-/filesystem-0.0.32.tgz",
@@ -6895,9 +7003,9 @@
       "dev": true
     },
     "node_modules/@types/yauzl": {
-      "version": "2.10.0",
-      "resolved": "https://registry.npmjs.org/@types/yauzl/-/yauzl-2.10.0.tgz",
-      "integrity": "sha512-Cn6WYCm0tXv8p6k+A8PvbDG763EDpBoTzHdA+Q/MF6H3sapGjCm9NzoaJncJS9tUKSuCoDs9XHxYYsQDgxR6kw==",
+      "version": "2.10.3",
+      "resolved": "https://registry.npmjs.org/@types/yauzl/-/yauzl-2.10.3.tgz",
+      "integrity": "sha512-oJoftv0LSuaDZE3Le4DbKX+KS9G36NzOeSap90UIK0yMA/NhKJhqlSGtNDORNRaIbQfzjXDrQa0ytJ6mNRGz/Q==",
       "dev": true,
       "dependencies": {
         "@types/node": "*"
@@ -7167,6 +7275,12 @@
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
       }
     },
+    "node_modules/@ungap/structured-clone": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@ungap/structured-clone/-/structured-clone-1.2.0.tgz",
+      "integrity": "sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==",
+      "dev": true
+    },
     "node_modules/@webassemblyjs/ast": {
       "version": "1.11.6",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.11.6.tgz",
@@ -7456,35 +7570,35 @@
       }
     },
     "node_modules/addons-linter": {
-      "version": "6.13.0",
-      "resolved": "https://registry.npmjs.org/addons-linter/-/addons-linter-6.13.0.tgz",
-      "integrity": "sha512-vYgDXl8aLmN1zU4HmsQdG6tUFByg499mHnTEMWDUbSkoYDq3koTne08EsqU6sD+o814u8FxclQP7580L0g/tPQ==",
+      "version": "6.19.0",
+      "resolved": "https://registry.npmjs.org/addons-linter/-/addons-linter-6.19.0.tgz",
+      "integrity": "sha512-Yz5YRfIQ12dIqXKmEoHNwoS/L1xIve2hdm9UEesOEsov5W0zeWMOWCnqdvJNVNy7f1FnPu1lnqzylelkTBS7dA==",
       "dev": true,
       "dependencies": {
         "@fluent/syntax": "0.19.0",
-        "@mdn/browser-compat-data": "5.3.14",
+        "@mdn/browser-compat-data": "5.4.3",
         "addons-moz-compare": "1.3.0",
-        "addons-scanner-utils": "9.3.0",
+        "addons-scanner-utils": "9.8.0",
         "ajv": "8.12.0",
         "chalk": "4.1.2",
         "cheerio": "1.0.0-rc.12",
         "columnify": "1.6.0",
         "common-tags": "1.8.2",
         "deepmerge": "4.3.1",
-        "eslint": "8.48.0",
+        "eslint": "8.55.0",
         "eslint-plugin-no-unsanitized": "4.0.2",
         "eslint-visitor-keys": "3.4.3",
         "espree": "9.6.1",
         "esprima": "4.0.1",
         "fast-json-patch": "3.1.1",
-        "glob": "10.3.4",
+        "glob": "10.3.10",
         "image-size": "1.0.2",
         "is-mergeable-object": "1.1.1",
         "jed": "1.1.1",
         "json-merge-patch": "1.0.2",
         "os-locale": "5.0.0",
-        "pino": "8.15.0",
-        "postcss": "8.4.29",
+        "pino": "8.16.2",
+        "postcss": "8.4.32",
         "relaxed-json": "1.0.3",
         "semver": "7.5.4",
         "sha.js": "2.4.11",
@@ -7502,12 +7616,12 @@
       }
     },
     "node_modules/addons-linter/node_modules/addons-scanner-utils": {
-      "version": "9.3.0",
-      "resolved": "https://registry.npmjs.org/addons-scanner-utils/-/addons-scanner-utils-9.3.0.tgz",
-      "integrity": "sha512-YZWzNpP+em650XlZNH7NbTUcHJXqC0ihLEgwn17GGTqervyChqQffd9sm/QXNur0dmj7Ks1mD77iTg9XcJw64A==",
+      "version": "9.8.0",
+      "resolved": "https://registry.npmjs.org/addons-scanner-utils/-/addons-scanner-utils-9.8.0.tgz",
+      "integrity": "sha512-nJJ4QazrtMImyb2OK9SGZlNtinNu25dzOR0lhWthhJQN2iDOf3yqHdSiVBEeZvCwuT/sS1cU6me4O4kgEATjFQ==",
       "dev": true,
       "dependencies": {
-        "@types/yauzl": "2.10.0",
+        "@types/yauzl": "2.10.3",
         "common-tags": "1.8.2",
         "first-chunk-stream": "3.0.0",
         "strip-bom-stream": "4.0.0",
@@ -7690,18 +7804,19 @@
       }
     },
     "node_modules/addons-linter/node_modules/eslint": {
-      "version": "8.48.0",
-      "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.48.0.tgz",
-      "integrity": "sha512-sb6DLeIuRXxeM1YljSe1KEx9/YYeZFQWcV8Rq9HfigmdDEugjLEVEa1ozDjL6YDjBpQHPJxJzze+alxi4T3OLg==",
+      "version": "8.55.0",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.55.0.tgz",
+      "integrity": "sha512-iyUUAM0PCKj5QpwGfmCAG9XXbZCWsqP/eWAWrG/W0umvjuLRBECwSFdt+rCntju0xEH7teIABPwXpahftIaTdA==",
       "dev": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.2.0",
         "@eslint-community/regexpp": "^4.6.1",
-        "@eslint/eslintrc": "^2.1.2",
-        "@eslint/js": "8.48.0",
-        "@humanwhocodes/config-array": "^0.11.10",
+        "@eslint/eslintrc": "^2.1.4",
+        "@eslint/js": "8.55.0",
+        "@humanwhocodes/config-array": "^0.11.13",
         "@humanwhocodes/module-importer": "^1.0.1",
         "@nodelib/fs.walk": "^1.2.8",
+        "@ungap/structured-clone": "^1.2.0",
         "ajv": "^6.12.4",
         "chalk": "^4.0.0",
         "cross-spawn": "^7.0.2",
@@ -7810,19 +7925,19 @@
       }
     },
     "node_modules/addons-linter/node_modules/glob": {
-      "version": "10.3.4",
-      "resolved": "https://registry.npmjs.org/glob/-/glob-10.3.4.tgz",
-      "integrity": "sha512-6LFElP3A+i/Q8XQKEvZjkEWEOTgAIALR9AO2rwT8bgPhDd1anmqDJDZ6lLddI4ehxxxR1S5RIqKe1uapMQfYaQ==",
+      "version": "10.3.10",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-10.3.10.tgz",
+      "integrity": "sha512-fa46+tv1Ak0UPK1TOy/pZrIybNNt4HCv7SDzwyfiOZkvZLEbjsZkJBPtDHVshZjbecAoAGSC20MjLDG/qr679g==",
       "dev": true,
       "dependencies": {
         "foreground-child": "^3.1.0",
-        "jackspeak": "^2.0.3",
+        "jackspeak": "^2.3.5",
         "minimatch": "^9.0.1",
         "minipass": "^5.0.0 || ^6.0.2 || ^7.0.0",
         "path-scurry": "^1.10.1"
       },
       "bin": {
-        "glob": "dist/cjs/src/bin.js"
+        "glob": "dist/esm/bin.mjs"
       },
       "engines": {
         "node": ">=16 || 14 >=14.17"
@@ -7859,9 +7974,9 @@
       }
     },
     "node_modules/addons-linter/node_modules/globals": {
-      "version": "13.23.0",
-      "resolved": "https://registry.npmjs.org/globals/-/globals-13.23.0.tgz",
-      "integrity": "sha512-XAmF0RjlrjY23MA51q3HltdlGxUpXPvg0GioKiD9X6HD28iMjo2dKC8Vqwm7lne4GNr78+RHTfliktR6ZH09wA==",
+      "version": "13.24.0",
+      "resolved": "https://registry.npmjs.org/globals/-/globals-13.24.0.tgz",
+      "integrity": "sha512-AhO5QUcj8llrbG09iWhPU2B204J1xnPeL8kQmVorSsy+Sjj1sk8gIyh6cUocGmH4L0UuhAJy+hJMRA4mgA4mFQ==",
       "dev": true,
       "dependencies": {
         "type-fest": "^0.20.2"
@@ -8423,15 +8538,15 @@
       "dev": true
     },
     "node_modules/array-includes": {
-      "version": "3.1.6",
-      "resolved": "https://registry.npmjs.org/array-includes/-/array-includes-3.1.6.tgz",
-      "integrity": "sha512-sgTbLvL6cNnw24FnbaDyjmvddQ2ML8arZsgaJhoABMoplz/4QRhtrYS+alr1BUM1Bwp6dhx8vVCBSLG+StwOFw==",
+      "version": "3.1.7",
+      "resolved": "https://registry.npmjs.org/array-includes/-/array-includes-3.1.7.tgz",
+      "integrity": "sha512-dlcsNBIiWhPkHdOEEKnehA+RNUWDc4UqFtnIXU4uuYDPtA4LDkr7qip2p0VvFAEXNDr0yWZ9PJyIRiGjRLQzwQ==",
       "dev": true,
       "dependencies": {
         "call-bind": "^1.0.2",
-        "define-properties": "^1.1.4",
-        "es-abstract": "^1.20.4",
-        "get-intrinsic": "^1.1.3",
+        "define-properties": "^1.2.0",
+        "es-abstract": "^1.22.1",
+        "get-intrinsic": "^1.2.1",
         "is-string": "^1.0.7"
       },
       "engines": {
@@ -8450,15 +8565,34 @@
         "node": ">=8"
       }
     },
+    "node_modules/array.prototype.findlastindex": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/array.prototype.findlastindex/-/array.prototype.findlastindex-1.2.3.tgz",
+      "integrity": "sha512-LzLoiOMAxvy+Gd3BAq3B7VeIgPdo+Q8hthvKtXybMvRV0jrXfJM/t8mw7nNlpEcVlVUnCnM2KSX4XU5HmpodOA==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.2.0",
+        "es-abstract": "^1.22.1",
+        "es-shim-unscopables": "^1.0.0",
+        "get-intrinsic": "^1.2.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/array.prototype.flat": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/array.prototype.flat/-/array.prototype.flat-1.3.0.tgz",
-      "integrity": "sha512-12IUEkHsAhA4DY5s0FPgNXIdc8VRSqD9Zp78a5au9abH/SOBrsp082JOWFNTjkMozh8mqcdiKuaLGhPeYztxSw==",
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/array.prototype.flat/-/array.prototype.flat-1.3.2.tgz",
+      "integrity": "sha512-djYB+Zx2vLewY8RWlNCUdHjDXs2XOgm602S9E7P/UpHgfeHL00cRiIF+IN/G/aUJ7kGPb6yO/ErDI5V2s8iycA==",
       "dev": true,
       "dependencies": {
         "call-bind": "^1.0.2",
-        "define-properties": "^1.1.3",
-        "es-abstract": "^1.19.2",
+        "define-properties": "^1.2.0",
+        "es-abstract": "^1.22.1",
         "es-shim-unscopables": "^1.0.0"
       },
       "engines": {
@@ -8469,14 +8603,14 @@
       }
     },
     "node_modules/array.prototype.flatmap": {
-      "version": "1.3.1",
-      "resolved": "https://registry.npmjs.org/array.prototype.flatmap/-/array.prototype.flatmap-1.3.1.tgz",
-      "integrity": "sha512-8UGn9O1FDVvMNB0UlLv4voxRMze7+FpHyF5mSMRjWHUMlpoDViniy05870VlxhfgTnLbpuwTzvD76MTtWxB/mQ==",
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/array.prototype.flatmap/-/array.prototype.flatmap-1.3.2.tgz",
+      "integrity": "sha512-Ewyx0c9PmpcsByhSW4r+9zDU7sGjFc86qf/kKtuSCRdhfbk0SNLLkaT5qvcHnRGgc5NP/ly/y+qkXkqONX54CQ==",
       "dev": true,
       "dependencies": {
         "call-bind": "^1.0.2",
-        "define-properties": "^1.1.4",
-        "es-abstract": "^1.20.4",
+        "define-properties": "^1.2.0",
+        "es-abstract": "^1.22.1",
         "es-shim-unscopables": "^1.0.0"
       },
       "engines": {
@@ -13016,13 +13150,14 @@
       }
     },
     "node_modules/eslint-import-resolver-node": {
-      "version": "0.3.6",
-      "resolved": "https://registry.npmjs.org/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.6.tgz",
-      "integrity": "sha512-0En0w03NRVMn9Uiyn8YRPDKvWjxCWkslUEhGNTdGx15RvPJYQ+lbOlqrlNI2vEAs4pDYK4f/HN2TbDmk5TP0iw==",
+      "version": "0.3.9",
+      "resolved": "https://registry.npmjs.org/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.9.tgz",
+      "integrity": "sha512-WFj2isz22JahUv+B788TlO3N6zL3nNJGU8CcZbPZvVEkBPaJdCV4vy5wyghty5ROFbCRnm132v8BScu5/1BQ8g==",
       "dev": true,
       "dependencies": {
         "debug": "^3.2.7",
-        "resolve": "^1.20.0"
+        "is-core-module": "^2.13.0",
+        "resolve": "^1.22.4"
       }
     },
     "node_modules/eslint-import-resolver-node/node_modules/debug": {
@@ -13034,17 +13169,46 @@
         "ms": "^2.1.1"
       }
     },
+    "node_modules/eslint-import-resolver-typescript": {
+      "version": "3.6.1",
+      "resolved": "https://registry.npmjs.org/eslint-import-resolver-typescript/-/eslint-import-resolver-typescript-3.6.1.tgz",
+      "integrity": "sha512-xgdptdoi5W3niYeuQxKmzVDTATvLYqhpwmykwsh7f6HIOStGWEIL9iqZgQDF9u9OEzrRwR8no5q2VT+bjAujTg==",
+      "dev": true,
+      "dependencies": {
+        "debug": "^4.3.4",
+        "enhanced-resolve": "^5.12.0",
+        "eslint-module-utils": "^2.7.4",
+        "fast-glob": "^3.3.1",
+        "get-tsconfig": "^4.5.0",
+        "is-core-module": "^2.11.0",
+        "is-glob": "^4.0.3"
+      },
+      "engines": {
+        "node": "^14.18.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/unts/projects/eslint-import-resolver-ts"
+      },
+      "peerDependencies": {
+        "eslint": "*",
+        "eslint-plugin-import": "*"
+      }
+    },
     "node_modules/eslint-module-utils": {
-      "version": "2.7.3",
-      "resolved": "https://registry.npmjs.org/eslint-module-utils/-/eslint-module-utils-2.7.3.tgz",
-      "integrity": "sha512-088JEC7O3lDZM9xGe0RerkOMd0EjFl+Yvd1jPWIkMT5u3H9+HC34mWWPnqPrN13gieT9pBOO+Qt07Nb/6TresQ==",
+      "version": "2.8.0",
+      "resolved": "https://registry.npmjs.org/eslint-module-utils/-/eslint-module-utils-2.8.0.tgz",
+      "integrity": "sha512-aWajIYfsqCKRDgUfjEXNN/JlrzauMuSEy5sbd7WXbtW3EH6A6MpwEh42c7qD+MqQo9QMJ6fWLAeIJynx0g6OAw==",
       "dev": true,
       "dependencies": {
-        "debug": "^3.2.7",
-        "find-up": "^2.1.0"
+        "debug": "^3.2.7"
       },
       "engines": {
         "node": ">=4"
+      },
+      "peerDependenciesMeta": {
+        "eslint": {
+          "optional": true
+        }
       }
     },
     "node_modules/eslint-module-utils/node_modules/debug": {
@@ -13075,24 +13239,28 @@
       }
     },
     "node_modules/eslint-plugin-import": {
-      "version": "2.26.0",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-import/-/eslint-plugin-import-2.26.0.tgz",
-      "integrity": "sha512-hYfi3FXaM8WPLf4S1cikh/r4IxnO6zrhZbEGz2b660EJRbuxgpDS5gkCuYgGWg2xxh2rBuIr4Pvhve/7c31koA==",
+      "version": "2.29.1",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-import/-/eslint-plugin-import-2.29.1.tgz",
+      "integrity": "sha512-BbPC0cuExzhiMo4Ff1BTVwHpjjv28C5R+btTOGaCRC7UEz801up0JadwkeSk5Ued6TG34uaczuVuH6qyy5YUxw==",
       "dev": true,
       "dependencies": {
-        "array-includes": "^3.1.4",
-        "array.prototype.flat": "^1.2.5",
-        "debug": "^2.6.9",
+        "array-includes": "^3.1.7",
+        "array.prototype.findlastindex": "^1.2.3",
+        "array.prototype.flat": "^1.3.2",
+        "array.prototype.flatmap": "^1.3.2",
+        "debug": "^3.2.7",
         "doctrine": "^2.1.0",
-        "eslint-import-resolver-node": "^0.3.6",
-        "eslint-module-utils": "^2.7.3",
-        "has": "^1.0.3",
-        "is-core-module": "^2.8.1",
+        "eslint-import-resolver-node": "^0.3.9",
+        "eslint-module-utils": "^2.8.0",
+        "hasown": "^2.0.0",
+        "is-core-module": "^2.13.1",
         "is-glob": "^4.0.3",
         "minimatch": "^3.1.2",
-        "object.values": "^1.1.5",
-        "resolve": "^1.22.0",
-        "tsconfig-paths": "^3.14.1"
+        "object.fromentries": "^2.0.7",
+        "object.groupby": "^1.0.1",
+        "object.values": "^1.1.7",
+        "semver": "^6.3.1",
+        "tsconfig-paths": "^3.15.0"
       },
       "engines": {
         "node": ">=4"
@@ -13102,12 +13270,12 @@
       }
     },
     "node_modules/eslint-plugin-import/node_modules/debug": {
-      "version": "2.6.9",
-      "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
-      "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+      "version": "3.2.7",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
+      "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
       "dev": true,
       "dependencies": {
-        "ms": "2.0.0"
+        "ms": "^2.1.1"
       }
     },
     "node_modules/eslint-plugin-import/node_modules/doctrine": {
@@ -13122,12 +13290,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/eslint-plugin-import/node_modules/ms": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-      "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=",
-      "dev": true
-    },
     "node_modules/eslint-plugin-jest": {
       "version": "25.7.0",
       "resolved": "https://registry.npmjs.org/eslint-plugin-jest/-/eslint-plugin-jest-25.7.0.tgz",
@@ -13870,11 +14032,6 @@
         "node >=0.6.0"
       ]
     },
-    "node_modules/facepaint": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/facepaint/-/facepaint-1.2.1.tgz",
-      "integrity": "sha512-oNvBekbhsm/0PNSOWca5raHNAi6dG960Bx6LJgxDPNF59WpuspgQ17bN5MKwOr7JcFdQYc7StW3VZ28DBZLavQ=="
-    },
     "node_modules/fast-deep-equal": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
@@ -14120,18 +14277,6 @@
       "integrity": "sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng==",
       "dev": true
     },
-    "node_modules/find-up": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/find-up/-/find-up-2.1.0.tgz",
-      "integrity": "sha1-RdG35QbHF93UgndaK3eSCjwMV6c=",
-      "dev": true,
-      "dependencies": {
-        "locate-path": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=4"
-      }
-    },
     "node_modules/firefox-profile": {
       "version": "4.3.2",
       "resolved": "https://registry.npmjs.org/firefox-profile/-/firefox-profile-4.3.2.tgz",
@@ -14241,9 +14386,9 @@
       }
     },
     "node_modules/follow-redirects": {
-      "version": "1.15.0",
-      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.0.tgz",
-      "integrity": "sha512-aExlJShTV4qOUOL7yF1U5tvLCB0xQuudbf6toyYA0E/acBNw71mvjFTnLaRp50aQaYocMR0a/RMMBIHeZnGyjQ==",
+      "version": "1.15.4",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.4.tgz",
+      "integrity": "sha512-Cr4D/5wlrb0z9dgERpUL3LrmPKVDsETIJhaCMeDfuFYcqa5bldGV6wBsAN6X/vxlXQtFBMrXdXxdL8CbDTGniw==",
       "dev": true,
       "funding": [
         {
@@ -14495,9 +14640,12 @@
       }
     },
     "node_modules/function-bind": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
-      "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A=="
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
+      "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
     },
     "node_modules/function.prototype.name": {
       "version": "1.1.6",
@@ -14752,6 +14900,18 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/get-tsconfig": {
+      "version": "4.7.2",
+      "resolved": "https://registry.npmjs.org/get-tsconfig/-/get-tsconfig-4.7.2.tgz",
+      "integrity": "sha512-wuMsz4leaj5hbGgg4IvDU0bqJagpftG5l5cXIAvo8uZrqn0NJqwtfupTN00VnkQJPcIRrxYrm1Ue24btpCha2A==",
+      "dev": true,
+      "dependencies": {
+        "resolve-pkg-maps": "^1.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/privatenumber/get-tsconfig?sponsor=1"
+      }
+    },
     "node_modules/get-value": {
       "version": "2.0.6",
       "resolved": "https://registry.npmjs.org/get-value/-/get-value-2.0.6.tgz",
@@ -15316,6 +15476,18 @@
         "minimalistic-assert": "^1.0.1"
       }
     },
+    "node_modules/hasown": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.0.tgz",
+      "integrity": "sha512-vUptKVTpIJhcczKBbgnS+RtcuYMB8+oNzPK2/Hp3hanz8JmpATdmmgLgSaadVREkDm+e2giHwY3ZRkyjSIDDFA==",
+      "dev": true,
+      "dependencies": {
+        "function-bind": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/he": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz",
@@ -16361,12 +16533,12 @@
       }
     },
     "node_modules/is-core-module": {
-      "version": "2.12.1",
-      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.12.1.tgz",
-      "integrity": "sha512-Q4ZuBAe2FUsKtyQJoQHlvP8OvBERxO3jEmy1I7hcRXcJBGGHFh/aJBswbXuS9sgrDH2QUO8ilkwNPHvHMd8clg==",
+      "version": "2.13.1",
+      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.13.1.tgz",
+      "integrity": "sha512-hHrIjvZsftOsvKSn2TRYl63zvxsgE0K+0mYMoH6gD4omR5IWB2KynivBQczo3+wF1cCkjzvptnI9Q0sPU66ilw==",
       "dev": true,
       "dependencies": {
-        "has": "^1.0.3"
+        "hasown": "^2.0.0"
       },
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
@@ -17027,6 +17199,12 @@
         "@pkgjs/parseargs": "^0.11.0"
       }
     },
+    "node_modules/javascript-natural-sort": {
+      "version": "0.7.1",
+      "resolved": "https://registry.npmjs.org/javascript-natural-sort/-/javascript-natural-sort-0.7.1.tgz",
+      "integrity": "sha512-nO6jcEfZWQXDhOiBtG2KvKyEptz7RVbpGP4vTD2hLBdmNQSsCiicO2Ioinv6UI4y9ukqnBpy+XZ9H6uLNgJTlw==",
+      "dev": true
+    },
     "node_modules/javascript-stringify": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/javascript-stringify/-/javascript-stringify-2.1.0.tgz",
@@ -20177,19 +20355,6 @@
         "lie": "3.1.1"
       }
     },
-    "node_modules/locate-path": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-2.0.0.tgz",
-      "integrity": "sha1-K1aLJl7slExtnA3pw9u7ygNUzY4=",
-      "dev": true,
-      "dependencies": {
-        "p-locate": "^2.0.0",
-        "path-exists": "^3.0.0"
-      },
-      "engines": {
-        "node": ">=4"
-      }
-    },
     "node_modules/lodash": {
       "version": "4.17.21",
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
@@ -21688,14 +21853,14 @@
       }
     },
     "node_modules/object.fromentries": {
-      "version": "2.0.6",
-      "resolved": "https://registry.npmjs.org/object.fromentries/-/object.fromentries-2.0.6.tgz",
-      "integrity": "sha512-VciD13dswC4j1Xt5394WR4MzmAQmlgN72phd/riNp9vtD7tp4QQWJ0R4wvclXcafgcYK8veHRed2W6XeGBvcfg==",
+      "version": "2.0.7",
+      "resolved": "https://registry.npmjs.org/object.fromentries/-/object.fromentries-2.0.7.tgz",
+      "integrity": "sha512-UPbPHML6sL8PI/mOqPwsH4G6iyXcCGzLin8KvEPenOZN5lpCNBZZQ+V62vdjB1mQHrmqGQt5/OJzemUA+KJmEA==",
       "dev": true,
       "dependencies": {
         "call-bind": "^1.0.2",
-        "define-properties": "^1.1.4",
-        "es-abstract": "^1.20.4"
+        "define-properties": "^1.2.0",
+        "es-abstract": "^1.22.1"
       },
       "engines": {
         "node": ">= 0.4"
@@ -21704,6 +21869,18 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/object.groupby": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/object.groupby/-/object.groupby-1.0.1.tgz",
+      "integrity": "sha512-HqaQtqLnp/8Bn4GL16cj+CUYbnpe1bh0TtEaWvybszDG4tgxCJuRpV8VGuvNaI1fAnI4lUJzDG55MXcOH4JZcQ==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.2.0",
+        "es-abstract": "^1.22.1",
+        "get-intrinsic": "^1.2.1"
+      }
+    },
     "node_modules/object.hasown": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/object.hasown/-/object.hasown-1.1.2.tgz",
@@ -21718,14 +21895,14 @@
       }
     },
     "node_modules/object.values": {
-      "version": "1.1.6",
-      "resolved": "https://registry.npmjs.org/object.values/-/object.values-1.1.6.tgz",
-      "integrity": "sha512-FVVTkD1vENCsAcwNs9k6jea2uHC/X0+JcjG8YA60FN5CMaJmG95wT9jek/xX9nornqGRrBkKtzuAu2wuHpKqvw==",
+      "version": "1.1.7",
+      "resolved": "https://registry.npmjs.org/object.values/-/object.values-1.1.7.tgz",
+      "integrity": "sha512-aU6xnDFYT3x17e/f0IiiwlGPTy2jzMySGfUB4fq6z7CV8l85CWHDk5ErhyhpfDHhrOMwGFhSQkhMGHaIotA6Ng==",
       "dev": true,
       "dependencies": {
         "call-bind": "^1.0.2",
-        "define-properties": "^1.1.4",
-        "es-abstract": "^1.20.4"
+        "define-properties": "^1.2.0",
+        "es-abstract": "^1.22.1"
       },
       "engines": {
         "node": ">= 0.4"
@@ -21971,39 +22148,6 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/p-locate": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-2.0.0.tgz",
-      "integrity": "sha1-IKAQOyIqcMj9OcwuWAaA893l7EM=",
-      "dev": true,
-      "dependencies": {
-        "p-limit": "^1.1.0"
-      },
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/p-locate/node_modules/p-limit": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-1.3.0.tgz",
-      "integrity": "sha512-vvcXsLAJ9Dr5rQOPk7toZQZJApBl2K4J6dANSsEuh6QI41JYcsS/qhTGa9ErIUUgK3WNQoJYvylxvjqmiqEA9Q==",
-      "dev": true,
-      "dependencies": {
-        "p-try": "^1.0.0"
-      },
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/p-locate/node_modules/p-try": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/p-try/-/p-try-1.0.0.tgz",
-      "integrity": "sha1-y8ec26+P1CKOE/Yh8rGiN8GyB7M=",
-      "dev": true,
-      "engines": {
-        "node": ">=4"
-      }
-    },
     "node_modules/p-map": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/p-map/-/p-map-4.0.0.tgz",
@@ -22360,15 +22504,6 @@
       "resolved": "https://registry.npmjs.org/path-dirname/-/path-dirname-1.0.2.tgz",
       "integrity": "sha1-zDPSTVJeCZpTiMAzbG4yuRYGCeA="
     },
-    "node_modules/path-exists": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-3.0.0.tgz",
-      "integrity": "sha1-zg6+ql94yxiSXqfYENe1mwEP1RU=",
-      "dev": true,
-      "engines": {
-        "node": ">=4"
-      }
-    },
     "node_modules/path-is-absolute": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
@@ -22494,21 +22629,21 @@
       }
     },
     "node_modules/pino": {
-      "version": "8.15.0",
-      "resolved": "https://registry.npmjs.org/pino/-/pino-8.15.0.tgz",
-      "integrity": "sha512-olUADJByk4twxccmAxb1RiGKOSvddHugCV3wkqjyv+3Sooa2KLrmXrKEWOKi0XPCLasRR5jBXxioE1jxUa4KzQ==",
+      "version": "8.16.2",
+      "resolved": "https://registry.npmjs.org/pino/-/pino-8.16.2.tgz",
+      "integrity": "sha512-2advCDGVEvkKu9TTVSa/kWW7Z3htI/sBKEZpqiHk6ive0i/7f5b1rsU8jn0aimxqfnSz5bj/nOYkwhBUn5xxvg==",
       "dev": true,
       "dependencies": {
         "atomic-sleep": "^1.0.0",
         "fast-redact": "^3.1.1",
         "on-exit-leak-free": "^2.1.0",
-        "pino-abstract-transport": "v1.0.0",
+        "pino-abstract-transport": "v1.1.0",
         "pino-std-serializers": "^6.0.0",
         "process-warning": "^2.0.0",
         "quick-format-unescaped": "^4.0.3",
         "real-require": "^0.2.0",
         "safe-stable-stringify": "^2.3.1",
-        "sonic-boom": "^3.1.0",
+        "sonic-boom": "^3.7.0",
         "thread-stream": "^2.0.0"
       },
       "bin": {
@@ -22516,9 +22651,9 @@
       }
     },
     "node_modules/pino-abstract-transport": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/pino-abstract-transport/-/pino-abstract-transport-1.0.0.tgz",
-      "integrity": "sha512-c7vo5OpW4wIS42hUVcT5REsL8ZljsUfBjqV/e2sFxmFEFZiq1XLUp5EYLtuDH6PEHq9W1egWqRbnLUP5FuZmOA==",
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/pino-abstract-transport/-/pino-abstract-transport-1.1.0.tgz",
+      "integrity": "sha512-lsleG3/2a/JIWUtf9Q5gUNErBqwIu1tUKTT3dUzaf5DySw9ra1wcqKjJjLX1VTY64Wk1eEOYsVGSaGfCK85ekA==",
       "dev": true,
       "dependencies": {
         "readable-stream": "^4.0.0",
@@ -22550,9 +22685,9 @@
       }
     },
     "node_modules/pino-abstract-transport/node_modules/readable-stream": {
-      "version": "4.4.2",
-      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-4.4.2.tgz",
-      "integrity": "sha512-Lk/fICSyIhodxy1IDK2HazkeGjSmezAWX2egdtJnYhtzKEsBPJowlI6F6LPb5tqIQILrMbx22S5o3GuJavPusA==",
+      "version": "4.5.1",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-4.5.1.tgz",
+      "integrity": "sha512-uQjbf34vmf/asGnOHQEw07Q4llgMACQZTWWa4MmICS0IKJoHbLwKCy71H3eR99Dw5iYejc6W+pqZZEeqRtUFAw==",
       "dev": true,
       "dependencies": {
         "abort-controller": "^3.0.0",
@@ -22684,9 +22819,9 @@
       }
     },
     "node_modules/postcss": {
-      "version": "8.4.29",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.29.tgz",
-      "integrity": "sha512-cbI+jaqIeu/VGqXEarWkRCCffhjgXc0qjBtXpqJhTBohMUjUQnbBr0xqX3vEKudc4iviTewcJo5ajcec5+wdJw==",
+      "version": "8.4.32",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.32.tgz",
+      "integrity": "sha512-D/kj5JNu6oo2EIy+XL/26JEDTlIbB8hw85G8StOE6L74RQAVVP5rej6wxCNqyMbR4RkPfqvezVbPw81Ngd6Kcw==",
       "dev": true,
       "funding": [
         {
@@ -22703,7 +22838,7 @@
         }
       ],
       "dependencies": {
-        "nanoid": "^3.3.6",
+        "nanoid": "^3.3.7",
         "picocolors": "^1.0.0",
         "source-map-js": "^1.0.2"
       },
@@ -22880,9 +23015,9 @@
       "integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag=="
     },
     "node_modules/process-warning": {
-      "version": "2.3.1",
-      "resolved": "https://registry.npmjs.org/process-warning/-/process-warning-2.3.1.tgz",
-      "integrity": "sha512-JjBvFEn7MwFbzUDa2SRtKJSsyO0LlER4V/FmwLMhBlXNbGgGxdyFCxIdMDLerWUycsVUyaoM9QFLvppFy4IWaQ==",
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/process-warning/-/process-warning-2.3.2.tgz",
+      "integrity": "sha512-n9wh8tvBe5sFmsqlg+XQhaQLumwpqoAUruLwjCopgTmUBjJ/fjtBsJzKleCaIGBOMXYEhp1YfKl4d7rJ5ZKJGA==",
       "dev": true
     },
     "node_modules/progress": {
@@ -24116,12 +24251,12 @@
       "integrity": "sha512-Zu1xbUt3/OPwsXL46hvOOoQrap2azE7ZQbokq61BQfiXvhewsKDwhMeZjTX9sX0nvw1t/U5Audyn1I9P/m9z0A=="
     },
     "node_modules/resolve": {
-      "version": "1.22.0",
-      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.0.tgz",
-      "integrity": "sha512-Hhtrw0nLeSrFQ7phPp4OOcVjLPIeMnRlr5mcnVuMe7M/7eBn98A3hmFRLoFo3DLZkivSYwhRUJTyPyWAk56WLw==",
+      "version": "1.22.8",
+      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.8.tgz",
+      "integrity": "sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==",
       "dev": true,
       "dependencies": {
-        "is-core-module": "^2.8.1",
+        "is-core-module": "^2.13.0",
         "path-parse": "^1.0.7",
         "supports-preserve-symlinks-flag": "^1.0.0"
       },
@@ -24179,6 +24314,15 @@
         "node": ">= 0.10"
       }
     },
+    "node_modules/resolve-pkg-maps": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/resolve-pkg-maps/-/resolve-pkg-maps-1.0.0.tgz",
+      "integrity": "sha512-seS2Tj26TBVOC2NIc2rOe2y2ZO7efxITtLZcGSOnHHNOQ7CkiUBfw0Iw2ck6xkIhPwLhKNLS8BO+hEpngQlqzw==",
+      "dev": true,
+      "funding": {
+        "url": "https://github.com/privatenumber/resolve-pkg-maps?sponsor=1"
+      }
+    },
     "node_modules/resolve.exports": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/resolve.exports/-/resolve.exports-1.1.0.tgz",
@@ -26564,13 +26708,13 @@
       "integrity": "sha512-FWqxGX2NHp5oCyaMd96o2y2uMQmSu8Dey6kvyuFdRJ2AzfmWo3kWa4UsPlCGlfQ/qu03m09ZZtppMoY8EMHuiA=="
     },
     "node_modules/tsconfig-paths": {
-      "version": "3.14.1",
-      "resolved": "https://registry.npmjs.org/tsconfig-paths/-/tsconfig-paths-3.14.1.tgz",
-      "integrity": "sha512-fxDhWnFSLt3VuTwtvJt5fpwxBHg5AdKWMsgcPOOIilyjymcYVZoCQF8fvFRezCNfblEXmi+PcM1eYHeOAgXCOQ==",
+      "version": "3.15.0",
+      "resolved": "https://registry.npmjs.org/tsconfig-paths/-/tsconfig-paths-3.15.0.tgz",
+      "integrity": "sha512-2Ac2RgzDe/cn48GvOe3M+o82pEFewD3UPbyoUHHdKasHwJKjds4fLXWf/Ux5kATBKN20oaFGu+jbElp1pos0mg==",
       "dev": true,
       "dependencies": {
         "@types/json5": "^0.0.29",
-        "json5": "^1.0.1",
+        "json5": "^1.0.2",
         "minimist": "^1.2.6",
         "strip-bom": "^3.0.0"
       }
@@ -26697,7 +26841,7 @@
     "node_modules/tsconfig-paths/node_modules/strip-bom": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-3.0.0.tgz",
-      "integrity": "sha1-IzTBjpx1n3vdVv3vfprj1YjmjtM=",
+      "integrity": "sha512-vavAMRXOgBVNF6nyEEmL3DBK19iRpDcoIwW+swQ+CbGiu7lju6t+JklA1MHweoWtadgt4ISVUsXLyDq34ddcwA==",
       "dev": true,
       "engines": {
         "node": ">=4"
@@ -27623,14 +27767,14 @@
       }
     },
     "node_modules/web-ext": {
-      "version": "7.8.0",
-      "resolved": "https://registry.npmjs.org/web-ext/-/web-ext-7.8.0.tgz",
-      "integrity": "sha512-ta+VjbNfK5q0pqRmrlH/DQMdJ89sAJFfgcvpqoUoe2gPxLu18zZ5mIakGvyjmfjrkJLOZ2NCNF7suj/qd6xaEQ==",
+      "version": "7.9.0",
+      "resolved": "https://registry.npmjs.org/web-ext/-/web-ext-7.9.0.tgz",
+      "integrity": "sha512-oWMiM3e+u5E8X7aUMgQ0BCGjlbZt4XwF6ExAXsXx9Btdz3nLmUY/4eKEZA1J+2T7WhCdRwN7Pdh2VKMej/pthQ==",
       "dev": true,
       "dependencies": {
         "@babel/runtime": "7.21.0",
         "@devicefarmer/adbkit": "3.2.3",
-        "addons-linter": "6.13.0",
+        "addons-linter": "6.19.0",
         "bunyan": "1.8.15",
         "camelcase": "7.0.1",
         "chrome-launcher": "0.15.1",
@@ -29348,9 +29492,9 @@
       }
     },
     "@babel/helper-string-parser": {
-      "version": "7.22.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.22.5.tgz",
-      "integrity": "sha512-mM4COjgZox8U+JcXQwPijIZLElkgEpO5rsERVDJTc2qfCDfERyob6k5WegS14SX18IIjv+XD+GrqNumY5JRCDw=="
+      "version": "7.23.4",
+      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.23.4.tgz",
+      "integrity": "sha512-803gmbQdqwdf4olxrX4AJyFBV/RTr3rSmOj0rKwesmzlfhYNDEs+/iOcznzpNWlJlIlTJC2QfPFcHB6DlzdVLQ=="
     },
     "@babel/helper-validator-identifier": {
       "version": "7.22.20",
@@ -30816,9 +30960,9 @@
       "dev": true
     },
     "@eslint/eslintrc": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-2.1.2.tgz",
-      "integrity": "sha512-+wvgpDsrB1YqAMdEUCcnTlpfVBH7Vqn6A/NT3D8WVXFIaKMlErPIZT3oCIAVCOtarRpMtelZLqJeU3t7WY6X6g==",
+      "version": "2.1.4",
+      "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-2.1.4.tgz",
+      "integrity": "sha512-269Z39MS6wVJtsoUl10L60WdkhJVdPG24Q4eZTH3nnF6lpvSShEK3wQjDX9JRWAUPvPh7COouPpU9IrqaZFvtQ==",
       "dev": true,
       "requires": {
         "ajv": "^6.12.4",
@@ -30850,9 +30994,9 @@
       }
     },
     "@eslint/js": {
-      "version": "8.48.0",
-      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-8.48.0.tgz",
-      "integrity": "sha512-ZSjtmelB7IJfWD2Fvb7+Z+ChTIKWq6kjda95fLcQKNS5aheVHn4IkfgRQE3sIIzTcSLwLcLZUD9UBt+V7+h+Pw==",
+      "version": "8.55.0",
+      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-8.55.0.tgz",
+      "integrity": "sha512-qQfo2mxH5yVom1kacMtZZJFVdW+E70mqHMJvVg6WTLo+VBuQJ4TojZlfWBjK0ve5BdEeNAVxOsl/nvNMpJOaJA==",
       "dev": true
     },
     "@ethersproject/bignumber": {
@@ -31065,12 +31209,12 @@
       }
     },
     "@humanwhocodes/config-array": {
-      "version": "0.11.11",
-      "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.11.tgz",
-      "integrity": "sha512-N2brEuAadi0CcdeMXUkhbZB84eskAc8MEX1By6qEchoVywSgXPIjou4rYsl0V3Hj0ZnuGycGCjdNgockbzeWNA==",
+      "version": "0.11.13",
+      "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.13.tgz",
+      "integrity": "sha512-JSBDMiDKSzQVngfRjOdFXgFfklaXI4K9nLF49Auh21lmBWRLIK3+xTErTWD4KU54pb6coM6ESE7Awz/FNU3zgQ==",
       "dev": true,
       "requires": {
-        "@humanwhocodes/object-schema": "^1.2.1",
+        "@humanwhocodes/object-schema": "^2.0.1",
         "debug": "^4.1.1",
         "minimatch": "^3.0.5"
       }
@@ -31082,9 +31226,9 @@
       "dev": true
     },
     "@humanwhocodes/object-schema": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/@humanwhocodes/object-schema/-/object-schema-1.2.1.tgz",
-      "integrity": "sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==",
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/@humanwhocodes/object-schema/-/object-schema-2.0.1.tgz",
+      "integrity": "sha512-dvuCeX5fC9dXgJn9t+X5atfmgQAzUOWqS1254Gh0m6i8wKd10ebXkfNKiRK+1GWi/yTvvLDHpoxLr0xxxeslWw==",
       "dev": true
     },
     "@isaacs/cliui": {
@@ -31882,9 +32026,9 @@
       }
     },
     "@mdn/browser-compat-data": {
-      "version": "5.3.14",
-      "resolved": "https://registry.npmjs.org/@mdn/browser-compat-data/-/browser-compat-data-5.3.14.tgz",
-      "integrity": "sha512-Y9XQrphVcE6u9xMm+gIqN86opbU/5s2W1pdPyKRyFV5B7+2jWM2gLI5JpfhZncaoDKvhy6FYwK04aCz5UM/bTQ==",
+      "version": "5.4.3",
+      "resolved": "https://registry.npmjs.org/@mdn/browser-compat-data/-/browser-compat-data-5.4.3.tgz",
+      "integrity": "sha512-+VnaO5zYUwFQVuRqp2qLPGR5GwhhJ/lrp0yEmamJ/nI15P2GKwGBEWRDiITZR8i6AYxeiQSu2rOi/gqxehnPuA==",
       "dev": true
     },
     "@noble/ciphers": {
@@ -33092,6 +33236,97 @@
       "dev": true,
       "optional": true
     },
+    "@trivago/prettier-plugin-sort-imports": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/@trivago/prettier-plugin-sort-imports/-/prettier-plugin-sort-imports-4.3.0.tgz",
+      "integrity": "sha512-r3n0onD3BTOVUNPhR4lhVK4/pABGpbA7bW3eumZnYdKaHkf1qEC+Mag6DPbGNuuh0eG8AaYj+YqmVHSiGslaTQ==",
+      "dev": true,
+      "requires": {
+        "@babel/generator": "7.17.7",
+        "@babel/parser": "^7.20.5",
+        "@babel/traverse": "7.23.2",
+        "@babel/types": "7.17.0",
+        "javascript-natural-sort": "0.7.1",
+        "lodash": "^4.17.21"
+      },
+      "dependencies": {
+        "@babel/generator": {
+          "version": "7.17.7",
+          "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.17.7.tgz",
+          "integrity": "sha512-oLcVCTeIFadUoArDTwpluncplrYBmTCCZZgXCbgNGvOBBiSDDK3eWO4b/+eOTli5tKv1lg+a5/NAXg+nTcei1w==",
+          "dev": true,
+          "requires": {
+            "@babel/types": "^7.17.0",
+            "jsesc": "^2.5.1",
+            "source-map": "^0.5.0"
+          }
+        },
+        "@babel/traverse": {
+          "version": "7.23.2",
+          "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.23.2.tgz",
+          "integrity": "sha512-azpe59SQ48qG6nu2CzcMLbxUudtN+dOM9kDbUqGq3HXUJRlo7i8fvPoxQUzYgLZ4cMVmuZgm8vvBpNeRhd6XSw==",
+          "dev": true,
+          "requires": {
+            "@babel/code-frame": "^7.22.13",
+            "@babel/generator": "^7.23.0",
+            "@babel/helper-environment-visitor": "^7.22.20",
+            "@babel/helper-function-name": "^7.23.0",
+            "@babel/helper-hoist-variables": "^7.22.5",
+            "@babel/helper-split-export-declaration": "^7.22.6",
+            "@babel/parser": "^7.23.0",
+            "@babel/types": "^7.23.0",
+            "debug": "^4.1.0",
+            "globals": "^11.1.0"
+          },
+          "dependencies": {
+            "@babel/generator": {
+              "version": "7.23.6",
+              "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.23.6.tgz",
+              "integrity": "sha512-qrSfCYxYQB5owCmGLbl8XRpX1ytXlpueOb0N0UmQwA073KZxejgQTzAmJezxvpwQD9uGtK2shHdi55QT+MbjIw==",
+              "dev": true,
+              "requires": {
+                "@babel/types": "^7.23.6",
+                "@jridgewell/gen-mapping": "^0.3.2",
+                "@jridgewell/trace-mapping": "^0.3.17",
+                "jsesc": "^2.5.1"
+              }
+            },
+            "@babel/types": {
+              "version": "7.23.6",
+              "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.23.6.tgz",
+              "integrity": "sha512-+uarb83brBzPKN38NX1MkB6vb6+mwvR6amUulqAE7ccQw1pEl+bCia9TbdG1lsnFP7lZySvUn37CHyXQdfTwzg==",
+              "dev": true,
+              "requires": {
+                "@babel/helper-string-parser": "^7.23.4",
+                "@babel/helper-validator-identifier": "^7.22.20",
+                "to-fast-properties": "^2.0.0"
+              }
+            }
+          }
+        },
+        "@babel/types": {
+          "version": "7.17.0",
+          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.17.0.tgz",
+          "integrity": "sha512-TmKSNO4D5rzhL5bjWFcVHHLETzfQ/AmbKpKPOSjlP0WoHZ6L911fgoOKY4Alp/emzG4cHJdyN49zpgkbXFEHHw==",
+          "dev": true,
+          "requires": {
+            "@babel/helper-validator-identifier": "^7.16.7",
+            "to-fast-properties": "^2.0.0"
+          }
+        },
+        "@jridgewell/gen-mapping": {
+          "version": "0.3.3",
+          "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.3.tgz",
+          "integrity": "sha512-HLhSWOLRi875zjjMG/r+Nv0oCW8umGb0BgEhyX3dDX3egwZtB8PqLnjz3yedt8R5StBrzcg4aBpnh8UA9D1BoQ==",
+          "dev": true,
+          "requires": {
+            "@jridgewell/set-array": "^1.0.1",
+            "@jridgewell/sourcemap-codec": "^1.4.10",
+            "@jridgewell/trace-mapping": "^0.3.9"
+          }
+        }
+      }
+    },
     "@tsconfig/node10": {
       "version": "1.0.9",
       "resolved": "https://registry.npmjs.org/@tsconfig/node10/-/node10-1.0.9.tgz",
@@ -33577,12 +33812,6 @@
         "@types/send": "*"
       }
     },
-    "@types/facepaint": {
-      "version": "1.2.3",
-      "resolved": "https://registry.npmjs.org/@types/facepaint/-/facepaint-1.2.3.tgz",
-      "integrity": "sha512-Im/T/LMrEMKySMuIhOovOGVdFLFP7wlrWWR9nl5laArHFQnik6xRfUWNr0khAQIGkqU8a/pTQPxycYnfwswCqw==",
-      "dev": true
-    },
     "@types/filesystem": {
       "version": "0.0.32",
       "resolved": "https://registry.npmjs.org/@types/filesystem/-/filesystem-0.0.32.tgz",
@@ -34042,9 +34271,9 @@
       "dev": true
     },
     "@types/yauzl": {
-      "version": "2.10.0",
-      "resolved": "https://registry.npmjs.org/@types/yauzl/-/yauzl-2.10.0.tgz",
-      "integrity": "sha512-Cn6WYCm0tXv8p6k+A8PvbDG763EDpBoTzHdA+Q/MF6H3sapGjCm9NzoaJncJS9tUKSuCoDs9XHxYYsQDgxR6kw==",
+      "version": "2.10.3",
+      "resolved": "https://registry.npmjs.org/@types/yauzl/-/yauzl-2.10.3.tgz",
+      "integrity": "sha512-oJoftv0LSuaDZE3Le4DbKX+KS9G36NzOeSap90UIK0yMA/NhKJhqlSGtNDORNRaIbQfzjXDrQa0ytJ6mNRGz/Q==",
       "dev": true,
       "requires": {
         "@types/node": "*"
@@ -34202,6 +34431,12 @@
         }
       }
     },
+    "@ungap/structured-clone": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@ungap/structured-clone/-/structured-clone-1.2.0.tgz",
+      "integrity": "sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==",
+      "dev": true
+    },
     "@webassemblyjs/ast": {
       "version": "1.11.6",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.11.6.tgz",
@@ -34449,35 +34684,35 @@
       "dev": true
     },
     "addons-linter": {
-      "version": "6.13.0",
-      "resolved": "https://registry.npmjs.org/addons-linter/-/addons-linter-6.13.0.tgz",
-      "integrity": "sha512-vYgDXl8aLmN1zU4HmsQdG6tUFByg499mHnTEMWDUbSkoYDq3koTne08EsqU6sD+o814u8FxclQP7580L0g/tPQ==",
+      "version": "6.19.0",
+      "resolved": "https://registry.npmjs.org/addons-linter/-/addons-linter-6.19.0.tgz",
+      "integrity": "sha512-Yz5YRfIQ12dIqXKmEoHNwoS/L1xIve2hdm9UEesOEsov5W0zeWMOWCnqdvJNVNy7f1FnPu1lnqzylelkTBS7dA==",
       "dev": true,
       "requires": {
         "@fluent/syntax": "0.19.0",
-        "@mdn/browser-compat-data": "5.3.14",
+        "@mdn/browser-compat-data": "5.4.3",
         "addons-moz-compare": "1.3.0",
-        "addons-scanner-utils": "9.3.0",
+        "addons-scanner-utils": "9.8.0",
         "ajv": "8.12.0",
         "chalk": "4.1.2",
         "cheerio": "1.0.0-rc.12",
         "columnify": "1.6.0",
         "common-tags": "1.8.2",
         "deepmerge": "4.3.1",
-        "eslint": "8.48.0",
+        "eslint": "8.55.0",
         "eslint-plugin-no-unsanitized": "4.0.2",
         "eslint-visitor-keys": "3.4.3",
         "espree": "9.6.1",
         "esprima": "4.0.1",
         "fast-json-patch": "3.1.1",
-        "glob": "10.3.4",
+        "glob": "10.3.10",
         "image-size": "1.0.2",
         "is-mergeable-object": "1.1.1",
         "jed": "1.1.1",
         "json-merge-patch": "1.0.2",
         "os-locale": "5.0.0",
-        "pino": "8.15.0",
-        "postcss": "8.4.29",
+        "pino": "8.16.2",
+        "postcss": "8.4.32",
         "relaxed-json": "1.0.3",
         "semver": "7.5.4",
         "sha.js": "2.4.11",
@@ -34489,12 +34724,12 @@
       },
       "dependencies": {
         "addons-scanner-utils": {
-          "version": "9.3.0",
-          "resolved": "https://registry.npmjs.org/addons-scanner-utils/-/addons-scanner-utils-9.3.0.tgz",
-          "integrity": "sha512-YZWzNpP+em650XlZNH7NbTUcHJXqC0ihLEgwn17GGTqervyChqQffd9sm/QXNur0dmj7Ks1mD77iTg9XcJw64A==",
+          "version": "9.8.0",
+          "resolved": "https://registry.npmjs.org/addons-scanner-utils/-/addons-scanner-utils-9.8.0.tgz",
+          "integrity": "sha512-nJJ4QazrtMImyb2OK9SGZlNtinNu25dzOR0lhWthhJQN2iDOf3yqHdSiVBEeZvCwuT/sS1cU6me4O4kgEATjFQ==",
           "dev": true,
           "requires": {
-            "@types/yauzl": "2.10.0",
+            "@types/yauzl": "2.10.3",
             "common-tags": "1.8.2",
             "first-chunk-stream": "3.0.0",
             "strip-bom-stream": "4.0.0",
@@ -34624,18 +34859,19 @@
           "dev": true
         },
         "eslint": {
-          "version": "8.48.0",
-          "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.48.0.tgz",
-          "integrity": "sha512-sb6DLeIuRXxeM1YljSe1KEx9/YYeZFQWcV8Rq9HfigmdDEugjLEVEa1ozDjL6YDjBpQHPJxJzze+alxi4T3OLg==",
+          "version": "8.55.0",
+          "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.55.0.tgz",
+          "integrity": "sha512-iyUUAM0PCKj5QpwGfmCAG9XXbZCWsqP/eWAWrG/W0umvjuLRBECwSFdt+rCntju0xEH7teIABPwXpahftIaTdA==",
           "dev": true,
           "requires": {
             "@eslint-community/eslint-utils": "^4.2.0",
             "@eslint-community/regexpp": "^4.6.1",
-            "@eslint/eslintrc": "^2.1.2",
-            "@eslint/js": "8.48.0",
-            "@humanwhocodes/config-array": "^0.11.10",
+            "@eslint/eslintrc": "^2.1.4",
+            "@eslint/js": "8.55.0",
+            "@humanwhocodes/config-array": "^0.11.13",
             "@humanwhocodes/module-importer": "^1.0.1",
             "@nodelib/fs.walk": "^1.2.8",
+            "@ungap/structured-clone": "^1.2.0",
             "ajv": "^6.12.4",
             "chalk": "^4.0.0",
             "cross-spawn": "^7.0.2",
@@ -34715,13 +34951,13 @@
           }
         },
         "glob": {
-          "version": "10.3.4",
-          "resolved": "https://registry.npmjs.org/glob/-/glob-10.3.4.tgz",
-          "integrity": "sha512-6LFElP3A+i/Q8XQKEvZjkEWEOTgAIALR9AO2rwT8bgPhDd1anmqDJDZ6lLddI4ehxxxR1S5RIqKe1uapMQfYaQ==",
+          "version": "10.3.10",
+          "resolved": "https://registry.npmjs.org/glob/-/glob-10.3.10.tgz",
+          "integrity": "sha512-fa46+tv1Ak0UPK1TOy/pZrIybNNt4HCv7SDzwyfiOZkvZLEbjsZkJBPtDHVshZjbecAoAGSC20MjLDG/qr679g==",
           "dev": true,
           "requires": {
             "foreground-child": "^3.1.0",
-            "jackspeak": "^2.0.3",
+            "jackspeak": "^2.3.5",
             "minimatch": "^9.0.1",
             "minipass": "^5.0.0 || ^6.0.2 || ^7.0.0",
             "path-scurry": "^1.10.1"
@@ -34748,9 +34984,9 @@
           }
         },
         "globals": {
-          "version": "13.23.0",
-          "resolved": "https://registry.npmjs.org/globals/-/globals-13.23.0.tgz",
-          "integrity": "sha512-XAmF0RjlrjY23MA51q3HltdlGxUpXPvg0GioKiD9X6HD28iMjo2dKC8Vqwm7lne4GNr78+RHTfliktR6ZH09wA==",
+          "version": "13.24.0",
+          "resolved": "https://registry.npmjs.org/globals/-/globals-13.24.0.tgz",
+          "integrity": "sha512-AhO5QUcj8llrbG09iWhPU2B204J1xnPeL8kQmVorSsy+Sjj1sk8gIyh6cUocGmH4L0UuhAJy+hJMRA4mgA4mFQ==",
           "dev": true,
           "requires": {
             "type-fest": "^0.20.2"
@@ -35182,15 +35418,15 @@
       "dev": true
     },
     "array-includes": {
-      "version": "3.1.6",
-      "resolved": "https://registry.npmjs.org/array-includes/-/array-includes-3.1.6.tgz",
-      "integrity": "sha512-sgTbLvL6cNnw24FnbaDyjmvddQ2ML8arZsgaJhoABMoplz/4QRhtrYS+alr1BUM1Bwp6dhx8vVCBSLG+StwOFw==",
+      "version": "3.1.7",
+      "resolved": "https://registry.npmjs.org/array-includes/-/array-includes-3.1.7.tgz",
+      "integrity": "sha512-dlcsNBIiWhPkHdOEEKnehA+RNUWDc4UqFtnIXU4uuYDPtA4LDkr7qip2p0VvFAEXNDr0yWZ9PJyIRiGjRLQzwQ==",
       "dev": true,
       "requires": {
         "call-bind": "^1.0.2",
-        "define-properties": "^1.1.4",
-        "es-abstract": "^1.20.4",
-        "get-intrinsic": "^1.1.3",
+        "define-properties": "^1.2.0",
+        "es-abstract": "^1.22.1",
+        "get-intrinsic": "^1.2.1",
         "is-string": "^1.0.7"
       }
     },
@@ -35200,27 +35436,40 @@
       "integrity": "sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==",
       "dev": true
     },
+    "array.prototype.findlastindex": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/array.prototype.findlastindex/-/array.prototype.findlastindex-1.2.3.tgz",
+      "integrity": "sha512-LzLoiOMAxvy+Gd3BAq3B7VeIgPdo+Q8hthvKtXybMvRV0jrXfJM/t8mw7nNlpEcVlVUnCnM2KSX4XU5HmpodOA==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.2.0",
+        "es-abstract": "^1.22.1",
+        "es-shim-unscopables": "^1.0.0",
+        "get-intrinsic": "^1.2.1"
+      }
+    },
     "array.prototype.flat": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/array.prototype.flat/-/array.prototype.flat-1.3.0.tgz",
-      "integrity": "sha512-12IUEkHsAhA4DY5s0FPgNXIdc8VRSqD9Zp78a5au9abH/SOBrsp082JOWFNTjkMozh8mqcdiKuaLGhPeYztxSw==",
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/array.prototype.flat/-/array.prototype.flat-1.3.2.tgz",
+      "integrity": "sha512-djYB+Zx2vLewY8RWlNCUdHjDXs2XOgm602S9E7P/UpHgfeHL00cRiIF+IN/G/aUJ7kGPb6yO/ErDI5V2s8iycA==",
       "dev": true,
       "requires": {
         "call-bind": "^1.0.2",
-        "define-properties": "^1.1.3",
-        "es-abstract": "^1.19.2",
+        "define-properties": "^1.2.0",
+        "es-abstract": "^1.22.1",
         "es-shim-unscopables": "^1.0.0"
       }
     },
     "array.prototype.flatmap": {
-      "version": "1.3.1",
-      "resolved": "https://registry.npmjs.org/array.prototype.flatmap/-/array.prototype.flatmap-1.3.1.tgz",
-      "integrity": "sha512-8UGn9O1FDVvMNB0UlLv4voxRMze7+FpHyF5mSMRjWHUMlpoDViniy05870VlxhfgTnLbpuwTzvD76MTtWxB/mQ==",
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/array.prototype.flatmap/-/array.prototype.flatmap-1.3.2.tgz",
+      "integrity": "sha512-Ewyx0c9PmpcsByhSW4r+9zDU7sGjFc86qf/kKtuSCRdhfbk0SNLLkaT5qvcHnRGgc5NP/ly/y+qkXkqONX54CQ==",
       "dev": true,
       "requires": {
         "call-bind": "^1.0.2",
-        "define-properties": "^1.1.4",
-        "es-abstract": "^1.20.4",
+        "define-properties": "^1.2.0",
+        "es-abstract": "^1.22.1",
         "es-shim-unscopables": "^1.0.0"
       }
     },
@@ -38799,13 +39048,14 @@
       }
     },
     "eslint-import-resolver-node": {
-      "version": "0.3.6",
-      "resolved": "https://registry.npmjs.org/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.6.tgz",
-      "integrity": "sha512-0En0w03NRVMn9Uiyn8YRPDKvWjxCWkslUEhGNTdGx15RvPJYQ+lbOlqrlNI2vEAs4pDYK4f/HN2TbDmk5TP0iw==",
+      "version": "0.3.9",
+      "resolved": "https://registry.npmjs.org/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.9.tgz",
+      "integrity": "sha512-WFj2isz22JahUv+B788TlO3N6zL3nNJGU8CcZbPZvVEkBPaJdCV4vy5wyghty5ROFbCRnm132v8BScu5/1BQ8g==",
       "dev": true,
       "requires": {
         "debug": "^3.2.7",
-        "resolve": "^1.20.0"
+        "is-core-module": "^2.13.0",
+        "resolve": "^1.22.4"
       },
       "dependencies": {
         "debug": {
@@ -38819,14 +39069,28 @@
         }
       }
     },
+    "eslint-import-resolver-typescript": {
+      "version": "3.6.1",
+      "resolved": "https://registry.npmjs.org/eslint-import-resolver-typescript/-/eslint-import-resolver-typescript-3.6.1.tgz",
+      "integrity": "sha512-xgdptdoi5W3niYeuQxKmzVDTATvLYqhpwmykwsh7f6HIOStGWEIL9iqZgQDF9u9OEzrRwR8no5q2VT+bjAujTg==",
+      "dev": true,
+      "requires": {
+        "debug": "^4.3.4",
+        "enhanced-resolve": "^5.12.0",
+        "eslint-module-utils": "^2.7.4",
+        "fast-glob": "^3.3.1",
+        "get-tsconfig": "^4.5.0",
+        "is-core-module": "^2.11.0",
+        "is-glob": "^4.0.3"
+      }
+    },
     "eslint-module-utils": {
-      "version": "2.7.3",
-      "resolved": "https://registry.npmjs.org/eslint-module-utils/-/eslint-module-utils-2.7.3.tgz",
-      "integrity": "sha512-088JEC7O3lDZM9xGe0RerkOMd0EjFl+Yvd1jPWIkMT5u3H9+HC34mWWPnqPrN13gieT9pBOO+Qt07Nb/6TresQ==",
+      "version": "2.8.0",
+      "resolved": "https://registry.npmjs.org/eslint-module-utils/-/eslint-module-utils-2.8.0.tgz",
+      "integrity": "sha512-aWajIYfsqCKRDgUfjEXNN/JlrzauMuSEy5sbd7WXbtW3EH6A6MpwEh42c7qD+MqQo9QMJ6fWLAeIJynx0g6OAw==",
       "dev": true,
       "requires": {
-        "debug": "^3.2.7",
-        "find-up": "^2.1.0"
+        "debug": "^3.2.7"
       },
       "dependencies": {
         "debug": {
@@ -38851,33 +39115,37 @@
       }
     },
     "eslint-plugin-import": {
-      "version": "2.26.0",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-import/-/eslint-plugin-import-2.26.0.tgz",
-      "integrity": "sha512-hYfi3FXaM8WPLf4S1cikh/r4IxnO6zrhZbEGz2b660EJRbuxgpDS5gkCuYgGWg2xxh2rBuIr4Pvhve/7c31koA==",
+      "version": "2.29.1",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-import/-/eslint-plugin-import-2.29.1.tgz",
+      "integrity": "sha512-BbPC0cuExzhiMo4Ff1BTVwHpjjv28C5R+btTOGaCRC7UEz801up0JadwkeSk5Ued6TG34uaczuVuH6qyy5YUxw==",
       "dev": true,
       "requires": {
-        "array-includes": "^3.1.4",
-        "array.prototype.flat": "^1.2.5",
-        "debug": "^2.6.9",
+        "array-includes": "^3.1.7",
+        "array.prototype.findlastindex": "^1.2.3",
+        "array.prototype.flat": "^1.3.2",
+        "array.prototype.flatmap": "^1.3.2",
+        "debug": "^3.2.7",
         "doctrine": "^2.1.0",
-        "eslint-import-resolver-node": "^0.3.6",
-        "eslint-module-utils": "^2.7.3",
-        "has": "^1.0.3",
-        "is-core-module": "^2.8.1",
+        "eslint-import-resolver-node": "^0.3.9",
+        "eslint-module-utils": "^2.8.0",
+        "hasown": "^2.0.0",
+        "is-core-module": "^2.13.1",
         "is-glob": "^4.0.3",
         "minimatch": "^3.1.2",
-        "object.values": "^1.1.5",
-        "resolve": "^1.22.0",
-        "tsconfig-paths": "^3.14.1"
+        "object.fromentries": "^2.0.7",
+        "object.groupby": "^1.0.1",
+        "object.values": "^1.1.7",
+        "semver": "^6.3.1",
+        "tsconfig-paths": "^3.15.0"
       },
       "dependencies": {
         "debug": {
-          "version": "2.6.9",
-          "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
-          "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+          "version": "3.2.7",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
+          "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
           "dev": true,
           "requires": {
-            "ms": "2.0.0"
+            "ms": "^2.1.1"
           }
         },
         "doctrine": {
@@ -38888,12 +39156,6 @@
           "requires": {
             "esutils": "^2.0.2"
           }
-        },
-        "ms": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-          "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=",
-          "dev": true
         }
       }
     },
@@ -39270,11 +39532,6 @@
       "integrity": "sha512-11Ndz7Nv+mvAC1j0ktTa7fAb0vLyGGX+rMHNBYQviQDGU0Hw7lhctJANqbPhu9nV9/izT/IntTgZ7Im/9LJs9g==",
       "dev": true
     },
-    "facepaint": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/facepaint/-/facepaint-1.2.1.tgz",
-      "integrity": "sha512-oNvBekbhsm/0PNSOWca5raHNAi6dG960Bx6LJgxDPNF59WpuspgQ17bN5MKwOr7JcFdQYc7StW3VZ28DBZLavQ=="
-    },
     "fast-deep-equal": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
@@ -39470,15 +39727,6 @@
       "integrity": "sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng==",
       "dev": true
     },
-    "find-up": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/find-up/-/find-up-2.1.0.tgz",
-      "integrity": "sha1-RdG35QbHF93UgndaK3eSCjwMV6c=",
-      "dev": true,
-      "requires": {
-        "locate-path": "^2.0.0"
-      }
-    },
     "firefox-profile": {
       "version": "4.3.2",
       "resolved": "https://registry.npmjs.org/firefox-profile/-/firefox-profile-4.3.2.tgz",
@@ -39574,9 +39822,9 @@
       }
     },
     "follow-redirects": {
-      "version": "1.15.0",
-      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.0.tgz",
-      "integrity": "sha512-aExlJShTV4qOUOL7yF1U5tvLCB0xQuudbf6toyYA0E/acBNw71mvjFTnLaRp50aQaYocMR0a/RMMBIHeZnGyjQ==",
+      "version": "1.15.4",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.4.tgz",
+      "integrity": "sha512-Cr4D/5wlrb0z9dgERpUL3LrmPKVDsETIJhaCMeDfuFYcqa5bldGV6wBsAN6X/vxlXQtFBMrXdXxdL8CbDTGniw==",
       "dev": true
     },
     "for-each": {
@@ -39772,9 +40020,9 @@
       "optional": true
     },
     "function-bind": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
-      "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A=="
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
+      "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA=="
     },
     "function.prototype.name": {
       "version": "1.1.6",
@@ -39964,6 +40212,15 @@
         "get-intrinsic": "^1.1.1"
       }
     },
+    "get-tsconfig": {
+      "version": "4.7.2",
+      "resolved": "https://registry.npmjs.org/get-tsconfig/-/get-tsconfig-4.7.2.tgz",
+      "integrity": "sha512-wuMsz4leaj5hbGgg4IvDU0bqJagpftG5l5cXIAvo8uZrqn0NJqwtfupTN00VnkQJPcIRrxYrm1Ue24btpCha2A==",
+      "dev": true,
+      "requires": {
+        "resolve-pkg-maps": "^1.0.0"
+      }
+    },
     "get-value": {
       "version": "2.0.6",
       "resolved": "https://registry.npmjs.org/get-value/-/get-value-2.0.6.tgz",
@@ -40398,6 +40655,15 @@
         "minimalistic-assert": "^1.0.1"
       }
     },
+    "hasown": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.0.tgz",
+      "integrity": "sha512-vUptKVTpIJhcczKBbgnS+RtcuYMB8+oNzPK2/Hp3hanz8JmpATdmmgLgSaadVREkDm+e2giHwY3ZRkyjSIDDFA==",
+      "dev": true,
+      "requires": {
+        "function-bind": "^1.1.2"
+      }
+    },
     "he": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz",
@@ -41170,12 +41436,12 @@
       }
     },
     "is-core-module": {
-      "version": "2.12.1",
-      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.12.1.tgz",
-      "integrity": "sha512-Q4ZuBAe2FUsKtyQJoQHlvP8OvBERxO3jEmy1I7hcRXcJBGGHFh/aJBswbXuS9sgrDH2QUO8ilkwNPHvHMd8clg==",
+      "version": "2.13.1",
+      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.13.1.tgz",
+      "integrity": "sha512-hHrIjvZsftOsvKSn2TRYl63zvxsgE0K+0mYMoH6gD4omR5IWB2KynivBQczo3+wF1cCkjzvptnI9Q0sPU66ilw==",
       "dev": true,
       "requires": {
-        "has": "^1.0.3"
+        "hasown": "^2.0.0"
       }
     },
     "is-date-object": {
@@ -41631,6 +41897,12 @@
         "@pkgjs/parseargs": "^0.11.0"
       }
     },
+    "javascript-natural-sort": {
+      "version": "0.7.1",
+      "resolved": "https://registry.npmjs.org/javascript-natural-sort/-/javascript-natural-sort-0.7.1.tgz",
+      "integrity": "sha512-nO6jcEfZWQXDhOiBtG2KvKyEptz7RVbpGP4vTD2hLBdmNQSsCiicO2Ioinv6UI4y9ukqnBpy+XZ9H6uLNgJTlw==",
+      "dev": true
+    },
     "javascript-stringify": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/javascript-stringify/-/javascript-stringify-2.1.0.tgz",
@@ -44022,16 +44294,6 @@
         "lie": "3.1.1"
       }
     },
-    "locate-path": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-2.0.0.tgz",
-      "integrity": "sha1-K1aLJl7slExtnA3pw9u7ygNUzY4=",
-      "dev": true,
-      "requires": {
-        "p-locate": "^2.0.0",
-        "path-exists": "^3.0.0"
-      }
-    },
     "lodash": {
       "version": "4.17.21",
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
@@ -45193,14 +45455,26 @@
       }
     },
     "object.fromentries": {
-      "version": "2.0.6",
-      "resolved": "https://registry.npmjs.org/object.fromentries/-/object.fromentries-2.0.6.tgz",
-      "integrity": "sha512-VciD13dswC4j1Xt5394WR4MzmAQmlgN72phd/riNp9vtD7tp4QQWJ0R4wvclXcafgcYK8veHRed2W6XeGBvcfg==",
+      "version": "2.0.7",
+      "resolved": "https://registry.npmjs.org/object.fromentries/-/object.fromentries-2.0.7.tgz",
+      "integrity": "sha512-UPbPHML6sL8PI/mOqPwsH4G6iyXcCGzLin8KvEPenOZN5lpCNBZZQ+V62vdjB1mQHrmqGQt5/OJzemUA+KJmEA==",
       "dev": true,
       "requires": {
         "call-bind": "^1.0.2",
-        "define-properties": "^1.1.4",
-        "es-abstract": "^1.20.4"
+        "define-properties": "^1.2.0",
+        "es-abstract": "^1.22.1"
+      }
+    },
+    "object.groupby": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/object.groupby/-/object.groupby-1.0.1.tgz",
+      "integrity": "sha512-HqaQtqLnp/8Bn4GL16cj+CUYbnpe1bh0TtEaWvybszDG4tgxCJuRpV8VGuvNaI1fAnI4lUJzDG55MXcOH4JZcQ==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.2.0",
+        "es-abstract": "^1.22.1",
+        "get-intrinsic": "^1.2.1"
       }
     },
     "object.hasown": {
@@ -45214,14 +45488,14 @@
       }
     },
     "object.values": {
-      "version": "1.1.6",
-      "resolved": "https://registry.npmjs.org/object.values/-/object.values-1.1.6.tgz",
-      "integrity": "sha512-FVVTkD1vENCsAcwNs9k6jea2uHC/X0+JcjG8YA60FN5CMaJmG95wT9jek/xX9nornqGRrBkKtzuAu2wuHpKqvw==",
+      "version": "1.1.7",
+      "resolved": "https://registry.npmjs.org/object.values/-/object.values-1.1.7.tgz",
+      "integrity": "sha512-aU6xnDFYT3x17e/f0IiiwlGPTy2jzMySGfUB4fq6z7CV8l85CWHDk5ErhyhpfDHhrOMwGFhSQkhMGHaIotA6Ng==",
       "dev": true,
       "requires": {
         "call-bind": "^1.0.2",
-        "define-properties": "^1.1.4",
-        "es-abstract": "^1.20.4"
+        "define-properties": "^1.2.0",
+        "es-abstract": "^1.22.1"
       }
     },
     "oblivious-set": {
@@ -45405,32 +45679,6 @@
         "yocto-queue": "^0.1.0"
       }
     },
-    "p-locate": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-2.0.0.tgz",
-      "integrity": "sha1-IKAQOyIqcMj9OcwuWAaA893l7EM=",
-      "dev": true,
-      "requires": {
-        "p-limit": "^1.1.0"
-      },
-      "dependencies": {
-        "p-limit": {
-          "version": "1.3.0",
-          "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-1.3.0.tgz",
-          "integrity": "sha512-vvcXsLAJ9Dr5rQOPk7toZQZJApBl2K4J6dANSsEuh6QI41JYcsS/qhTGa9ErIUUgK3WNQoJYvylxvjqmiqEA9Q==",
-          "dev": true,
-          "requires": {
-            "p-try": "^1.0.0"
-          }
-        },
-        "p-try": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/p-try/-/p-try-1.0.0.tgz",
-          "integrity": "sha1-y8ec26+P1CKOE/Yh8rGiN8GyB7M=",
-          "dev": true
-        }
-      }
-    },
     "p-map": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/p-map/-/p-map-4.0.0.tgz",
@@ -45682,12 +45930,6 @@
       "resolved": "https://registry.npmjs.org/path-dirname/-/path-dirname-1.0.2.tgz",
       "integrity": "sha1-zDPSTVJeCZpTiMAzbG4yuRYGCeA="
     },
-    "path-exists": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-3.0.0.tgz",
-      "integrity": "sha1-zg6+ql94yxiSXqfYENe1mwEP1RU=",
-      "dev": true
-    },
     "path-is-absolute": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
@@ -45782,28 +46024,28 @@
       "dev": true
     },
     "pino": {
-      "version": "8.15.0",
-      "resolved": "https://registry.npmjs.org/pino/-/pino-8.15.0.tgz",
-      "integrity": "sha512-olUADJByk4twxccmAxb1RiGKOSvddHugCV3wkqjyv+3Sooa2KLrmXrKEWOKi0XPCLasRR5jBXxioE1jxUa4KzQ==",
+      "version": "8.16.2",
+      "resolved": "https://registry.npmjs.org/pino/-/pino-8.16.2.tgz",
+      "integrity": "sha512-2advCDGVEvkKu9TTVSa/kWW7Z3htI/sBKEZpqiHk6ive0i/7f5b1rsU8jn0aimxqfnSz5bj/nOYkwhBUn5xxvg==",
       "dev": true,
       "requires": {
         "atomic-sleep": "^1.0.0",
         "fast-redact": "^3.1.1",
         "on-exit-leak-free": "^2.1.0",
-        "pino-abstract-transport": "v1.0.0",
+        "pino-abstract-transport": "v1.1.0",
         "pino-std-serializers": "^6.0.0",
         "process-warning": "^2.0.0",
         "quick-format-unescaped": "^4.0.3",
         "real-require": "^0.2.0",
         "safe-stable-stringify": "^2.3.1",
-        "sonic-boom": "^3.1.0",
+        "sonic-boom": "^3.7.0",
         "thread-stream": "^2.0.0"
       }
     },
     "pino-abstract-transport": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/pino-abstract-transport/-/pino-abstract-transport-1.0.0.tgz",
-      "integrity": "sha512-c7vo5OpW4wIS42hUVcT5REsL8ZljsUfBjqV/e2sFxmFEFZiq1XLUp5EYLtuDH6PEHq9W1egWqRbnLUP5FuZmOA==",
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/pino-abstract-transport/-/pino-abstract-transport-1.1.0.tgz",
+      "integrity": "sha512-lsleG3/2a/JIWUtf9Q5gUNErBqwIu1tUKTT3dUzaf5DySw9ra1wcqKjJjLX1VTY64Wk1eEOYsVGSaGfCK85ekA==",
       "dev": true,
       "requires": {
         "readable-stream": "^4.0.0",
@@ -45821,9 +46063,9 @@
           }
         },
         "readable-stream": {
-          "version": "4.4.2",
-          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-4.4.2.tgz",
-          "integrity": "sha512-Lk/fICSyIhodxy1IDK2HazkeGjSmezAWX2egdtJnYhtzKEsBPJowlI6F6LPb5tqIQILrMbx22S5o3GuJavPusA==",
+          "version": "4.5.1",
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-4.5.1.tgz",
+          "integrity": "sha512-uQjbf34vmf/asGnOHQEw07Q4llgMACQZTWWa4MmICS0IKJoHbLwKCy71H3eR99Dw5iYejc6W+pqZZEeqRtUFAw==",
           "dev": true,
           "requires": {
             "abort-controller": "^3.0.0",
@@ -45918,12 +46160,12 @@
       "dev": true
     },
     "postcss": {
-      "version": "8.4.29",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.29.tgz",
-      "integrity": "sha512-cbI+jaqIeu/VGqXEarWkRCCffhjgXc0qjBtXpqJhTBohMUjUQnbBr0xqX3vEKudc4iviTewcJo5ajcec5+wdJw==",
+      "version": "8.4.32",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.32.tgz",
+      "integrity": "sha512-D/kj5JNu6oo2EIy+XL/26JEDTlIbB8hw85G8StOE6L74RQAVVP5rej6wxCNqyMbR4RkPfqvezVbPw81Ngd6Kcw==",
       "dev": true,
       "requires": {
-        "nanoid": "^3.3.6",
+        "nanoid": "^3.3.7",
         "picocolors": "^1.0.0",
         "source-map-js": "^1.0.2"
       }
@@ -46046,9 +46288,9 @@
       "integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag=="
     },
     "process-warning": {
-      "version": "2.3.1",
-      "resolved": "https://registry.npmjs.org/process-warning/-/process-warning-2.3.1.tgz",
-      "integrity": "sha512-JjBvFEn7MwFbzUDa2SRtKJSsyO0LlER4V/FmwLMhBlXNbGgGxdyFCxIdMDLerWUycsVUyaoM9QFLvppFy4IWaQ==",
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/process-warning/-/process-warning-2.3.2.tgz",
+      "integrity": "sha512-n9wh8tvBe5sFmsqlg+XQhaQLumwpqoAUruLwjCopgTmUBjJ/fjtBsJzKleCaIGBOMXYEhp1YfKl4d7rJ5ZKJGA==",
       "dev": true
     },
     "progress": {
@@ -46990,12 +47232,12 @@
       "integrity": "sha512-Zu1xbUt3/OPwsXL46hvOOoQrap2azE7ZQbokq61BQfiXvhewsKDwhMeZjTX9sX0nvw1t/U5Audyn1I9P/m9z0A=="
     },
     "resolve": {
-      "version": "1.22.0",
-      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.0.tgz",
-      "integrity": "sha512-Hhtrw0nLeSrFQ7phPp4OOcVjLPIeMnRlr5mcnVuMe7M/7eBn98A3hmFRLoFo3DLZkivSYwhRUJTyPyWAk56WLw==",
+      "version": "1.22.8",
+      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.8.tgz",
+      "integrity": "sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==",
       "dev": true,
       "requires": {
-        "is-core-module": "^2.8.1",
+        "is-core-module": "^2.13.0",
         "path-parse": "^1.0.7",
         "supports-preserve-symlinks-flag": "^1.0.0"
       }
@@ -47037,6 +47279,12 @@
         "value-or-function": "^3.0.0"
       }
     },
+    "resolve-pkg-maps": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/resolve-pkg-maps/-/resolve-pkg-maps-1.0.0.tgz",
+      "integrity": "sha512-seS2Tj26TBVOC2NIc2rOe2y2ZO7efxITtLZcGSOnHHNOQ7CkiUBfw0Iw2ck6xkIhPwLhKNLS8BO+hEpngQlqzw==",
+      "dev": true
+    },
     "resolve.exports": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/resolve.exports/-/resolve.exports-1.1.0.tgz",
@@ -48883,13 +49131,13 @@
       "integrity": "sha512-FWqxGX2NHp5oCyaMd96o2y2uMQmSu8Dey6kvyuFdRJ2AzfmWo3kWa4UsPlCGlfQ/qu03m09ZZtppMoY8EMHuiA=="
     },
     "tsconfig-paths": {
-      "version": "3.14.1",
-      "resolved": "https://registry.npmjs.org/tsconfig-paths/-/tsconfig-paths-3.14.1.tgz",
-      "integrity": "sha512-fxDhWnFSLt3VuTwtvJt5fpwxBHg5AdKWMsgcPOOIilyjymcYVZoCQF8fvFRezCNfblEXmi+PcM1eYHeOAgXCOQ==",
+      "version": "3.15.0",
+      "resolved": "https://registry.npmjs.org/tsconfig-paths/-/tsconfig-paths-3.15.0.tgz",
+      "integrity": "sha512-2Ac2RgzDe/cn48GvOe3M+o82pEFewD3UPbyoUHHdKasHwJKjds4fLXWf/Ux5kATBKN20oaFGu+jbElp1pos0mg==",
       "dev": true,
       "requires": {
         "@types/json5": "^0.0.29",
-        "json5": "^1.0.1",
+        "json5": "^1.0.2",
         "minimist": "^1.2.6",
         "strip-bom": "^3.0.0"
       },
@@ -48906,7 +49154,7 @@
         "strip-bom": {
           "version": "3.0.0",
           "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-3.0.0.tgz",
-          "integrity": "sha1-IzTBjpx1n3vdVv3vfprj1YjmjtM=",
+          "integrity": "sha512-vavAMRXOgBVNF6nyEEmL3DBK19iRpDcoIwW+swQ+CbGiu7lju6t+JklA1MHweoWtadgt4ISVUsXLyDq34ddcwA==",
           "dev": true
         }
       }
@@ -49715,14 +49963,14 @@
       }
     },
     "web-ext": {
-      "version": "7.8.0",
-      "resolved": "https://registry.npmjs.org/web-ext/-/web-ext-7.8.0.tgz",
-      "integrity": "sha512-ta+VjbNfK5q0pqRmrlH/DQMdJ89sAJFfgcvpqoUoe2gPxLu18zZ5mIakGvyjmfjrkJLOZ2NCNF7suj/qd6xaEQ==",
+      "version": "7.9.0",
+      "resolved": "https://registry.npmjs.org/web-ext/-/web-ext-7.9.0.tgz",
+      "integrity": "sha512-oWMiM3e+u5E8X7aUMgQ0BCGjlbZt4XwF6ExAXsXx9Btdz3nLmUY/4eKEZA1J+2T7WhCdRwN7Pdh2VKMej/pthQ==",
       "dev": true,
       "requires": {
         "@babel/runtime": "7.21.0",
         "@devicefarmer/adbkit": "3.2.3",
-        "addons-linter": "6.13.0",
+        "addons-linter": "6.19.0",
         "bunyan": "1.8.15",
         "camelcase": "7.0.1",
         "chrome-launcher": "0.15.1",
diff --git a/package.json b/package.json
index 2efadb5b9..7192aedfb 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "Casper Wallet",
   "description": "Securely manage your CSPR tokens and interact with dapps with the self-custody wallet for the Casper blockchain.",
-  "version": "1.8.0",
+  "version": "1.8.1",
   "author": "MAKE LLC",
   "scripts": {
     "devtools:redux": "redux-devtools --hostname=localhost",
@@ -56,8 +56,8 @@
     "@hookform/resolvers": "2.9.10",
     "@hot-loader/react-dom": "^17.0.1",
     "@lapo/asn1js": "1.2.4",
-    "@make-software/ces-js-parser": "1.3.2",
     "@lottiefiles/react-lottie-player": "3.5.3",
+    "@make-software/ces-js-parser": "1.3.2",
     "@noble/ciphers": "^0.3.0",
     "@scure/bip32": "1.3.2",
     "@scure/bip39": "1.2.1",
@@ -68,7 +68,6 @@
     "casper-cep18-js-client": "1.0.2",
     "casper-js-sdk": "2.13.3",
     "date-fns": "^2.30.0",
-    "facepaint": "^1.2.1",
     "i18next": "^23.5.1",
     "i18next-browser-languagedetector": "^6.1.5",
     "i18next-http-backend": "^2.4.1",
@@ -109,10 +108,10 @@
     "@testing-library/react": "^12.1.2",
     "@testing-library/react-hooks": "^7.0.2",
     "@testing-library/user-event": "^13.5.0",
+    "@trivago/prettier-plugin-sort-imports": "^4.3.0",
     "@types/big.js": "^6.1.6",
     "@types/chrome": "0.0.246",
     "@types/expect": "^24.3.0",
-    "@types/facepaint": "^1.2.3",
     "@types/jest": "29.2.3",
     "@types/lodash.throttle": "4.1.7",
     "@types/node": "^20.9.0",
@@ -131,8 +130,9 @@
     "eslint-config-airbnb": "^19.0.4",
     "eslint-config-prettier": "^8.3.0",
     "eslint-config-react-app": "^7.0.0",
+    "eslint-import-resolver-typescript": "^3.6.1",
     "eslint-plugin-flowtype": "^8.0.3",
-    "eslint-plugin-import": "^2.25.2",
+    "eslint-plugin-import": "^2.29.1",
     "eslint-plugin-jsx-a11y": "^6.7.1",
     "eslint-plugin-prettier": "^5.0.0",
     "eslint-plugin-react": "7.33.2",
@@ -159,7 +159,7 @@
     "tsconfig-paths-webpack-plugin": "^4.1.0",
     "typescript": "4.9.3",
     "url-loader": "^4.1.1",
-    "web-ext": "7.8.0",
+    "web-ext": "7.9.0",
     "webextension-polyfill": "0.10.0",
     "webpack": "5.88.2",
     "webpack-cli": "5.1.4",
diff --git a/src/apps/connect-to-app/app-router.tsx b/src/apps/connect-to-app/app-router.tsx
index d39934a37..eb975dee3 100644
--- a/src/apps/connect-to-app/app-router.tsx
+++ b/src/apps/connect-to-app/app-router.tsx
@@ -1,16 +1,19 @@
 import React, { useState } from 'react';
-import { Route, Routes } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
-import { HashRouter } from 'react-router-dom';
-
-import { RouterPath } from '@src/apps/connect-to-app/router';
-import { SelectAccountPage } from '@src/apps/connect-to-app/pages/select-account';
-import { ApproveConnectionPage } from '@src/apps/connect-to-app/pages/approve-connection';
-import { ConnectingPage } from '@src/apps/connect-to-app/pages/connecting';
-import { useUserActivityTracker } from '@src/hooks/use-user-activity-tracker';
 import { useSelector } from 'react-redux';
-import { selectVaultIsLocked } from '@src/background/redux/session/selectors';
-import { LockedRouter } from '@src/libs/layout/locked-router';
+import { HashRouter, Route, Routes } from 'react-router-dom';
+
+import { ApproveConnectionPage } from '@connect-to-app/pages/approve-connection';
+import { ConnectingPage } from '@connect-to-app/pages/connecting';
+import { SelectAccountPage } from '@connect-to-app/pages/select-account';
+import { RouterPath } from '@connect-to-app/router';
+
+import { selectVaultIsLocked } from '@background/redux/session/selectors';
+
+import { useUserActivityTracker } from '@hooks/use-user-activity-tracker';
+
+import { LockedRouter } from '@libs/layout';
+
 import { SwitchAccountPage } from './pages/switch-account';
 
 export function AppRouter() {
diff --git a/src/apps/connect-to-app/index.tsx b/src/apps/connect-to-app/index.tsx
index 43148a6b7..0f66d017b 100644
--- a/src/apps/connect-to-app/index.tsx
+++ b/src/apps/connect-to-app/index.tsx
@@ -1,26 +1,26 @@
-import '@libs/i18n/i18n';
-
 import React, { Suspense, useState } from 'react';
 import { render } from 'react-dom';
 import { Provider as ReduxProvider } from 'react-redux';
 import { ThemeProvider } from 'styled-components';
 
-import { AppRouter } from '@src/apps/connect-to-app/app-router';
-import { GlobalStyle, lightTheme, darkTheme } from '@libs/ui';
-import { ErrorBoundary } from '@src/libs/layout/error';
-
-import {
-  createMainStoreReplica,
-  dispatchToMainStore,
-  PopupState
-} from '@src/background/redux/utils';
-import { connectWindowInit } from '@src/background/redux/windowManagement/actions';
 import { useSubscribeToRedux } from '@src/hooks/use-subscribe-to-redux';
-import { selectThemeModeSetting } from '@background/redux/settings/selectors';
-import { useSystemThemeDetector } from '@src/hooks';
+import { isSafariBuild } from '@src/utils';
+
+import { AppRouter } from '@connect-to-app/app-router';
+
+import { createMainStoreReplica } from '@background/redux/get-main-store';
 import { themeModeSettingChanged } from '@background/redux/settings/actions';
+import { selectThemeModeSetting } from '@background/redux/settings/selectors';
 import { ThemeMode } from '@background/redux/settings/types';
-import { isSafariBuild } from '@src/utils';
+import { PopupState } from '@background/redux/types';
+import { dispatchToMainStore } from '@background/redux/utils';
+import { connectWindowInit } from '@background/redux/windowManagement/actions';
+
+import { useSystemThemeDetector } from '@hooks/use-system-theme-detector';
+
+import '@libs/i18n/i18n';
+import { ErrorBoundary } from '@libs/layout';
+import { GlobalStyle, darkTheme, lightTheme } from '@libs/ui';
 
 const Tree = () => {
   const [state, setState] = useState<PopupState | null>(null);
diff --git a/src/apps/connect-to-app/pages/approve-connection/content.tsx b/src/apps/connect-to-app/pages/approve-connection/content.tsx
index 2c077a6b5..8a6614e79 100644
--- a/src/apps/connect-to-app/pages/approve-connection/content.tsx
+++ b/src/apps/connect-to-app/pages/approve-connection/content.tsx
@@ -3,15 +3,20 @@ import { useTranslation } from 'react-i18next';
 import styled from 'styled-components';
 
 import {
-  ParagraphContainer,
-  PageContainer,
-  ContentContainer,
   BreakWordContainer,
-  VerticalSpaceContainer,
+  ContentContainer,
   ListItemClickableContainer,
-  SpacingSize
-} from '@src/libs/layout';
-import { SiteFaviconBadge, List, SvgIcon, Typography } from '@src/libs/ui';
+  PageContainer,
+  ParagraphContainer,
+  SpacingSize,
+  VerticalSpaceContainer
+} from '@libs/layout';
+import {
+  List,
+  SiteFaviconBadge,
+  SvgIcon,
+  Typography
+} from '@libs/ui/components';
 
 const ListItemContainer = styled(ListItemClickableContainer)`
   cursor: unset;
diff --git a/src/apps/connect-to-app/pages/approve-connection/index.tsx b/src/apps/connect-to-app/pages/approve-connection/index.tsx
index ba61dafc5..c622c8f8c 100644
--- a/src/apps/connect-to-app/pages/approve-connection/index.tsx
+++ b/src/apps/connect-to-app/pages/approve-connection/index.tsx
@@ -3,20 +3,23 @@ import React from 'react';
 import { Trans } from 'react-i18next';
 import styled from 'styled-components';
 
-import { useAccountManager } from '@src/apps/popup/hooks/use-account-actions-with-events';
-import { closeCurrentWindow } from '@src/background/close-current-window';
+import { useAccountManager } from '@popup/hooks/use-account-actions-with-events';
+
+import { closeCurrentWindow } from '@background/close-current-window';
+import { sendSdkResponseToSpecificTab } from '@background/send-sdk-response-to-specific-tab';
+
+import { sdkMethod } from '@content/sdk-method';
+
 import {
   FooterButtonsContainer,
+  HeaderPopup,
   HeaderSubmenuBarNavLink,
-  LayoutWindow,
-  PopupHeader
-} from '@src/libs/layout';
-import { Button, Typography } from '@src/libs/ui';
+  LayoutWindow
+} from '@libs/layout';
+import { Button, Typography } from '@libs/ui/components';
 
 import { RouterPath, useTypedNavigate } from '../../router';
 import { ApproveConnectionContent } from './content';
-import { sendSdkResponseToSpecificTab } from '@src/background/send-sdk-response-to-specific-tab';
-import { sdkMethod } from '@src/content/sdk-method';
 
 const TextCentredContainer = styled.div`
   text-align: center;
@@ -66,7 +69,7 @@ export function ApproveConnectionPage({
   return (
     <LayoutWindow
       renderHeader={() => (
-        <PopupHeader
+        <HeaderPopup
           renderSubmenuBarItems={() => (
             <HeaderSubmenuBarNavLink linkType="back" />
           )}
diff --git a/src/apps/connect-to-app/pages/connecting/content.tsx b/src/apps/connect-to-app/pages/connecting/content.tsx
index aaaf4900e..550e7de9d 100644
--- a/src/apps/connect-to-app/pages/connecting/content.tsx
+++ b/src/apps/connect-to-app/pages/connecting/content.tsx
@@ -1,10 +1,15 @@
 import React, { useEffect } from 'react';
-import { useTranslation, Trans } from 'react-i18next';
+import { Trans, useTranslation } from 'react-i18next';
 import styled from 'styled-components';
 
-import { getFaviconUrlFromOrigin, SvgIcon, Typography } from '@libs/ui';
-import { closeCurrentWindow } from '@src/background/close-current-window';
+import { closeCurrentWindow } from '@background/close-current-window';
+
 import { AlignedFlexRow, SpacingSize } from '@libs/layout';
+import {
+  SvgIcon,
+  Typography,
+  getFaviconUrlFromOrigin
+} from '@libs/ui/components';
 
 const PageContainer = styled.div`
   display: flex;
diff --git a/src/apps/connect-to-app/pages/connecting/index.tsx b/src/apps/connect-to-app/pages/connecting/index.tsx
index 5732ece9e..f6bd949e6 100644
--- a/src/apps/connect-to-app/pages/connecting/index.tsx
+++ b/src/apps/connect-to-app/pages/connecting/index.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { LayoutWindow, PopupHeader } from '@src/libs/layout';
+import { HeaderPopup, LayoutWindow } from '@libs/layout';
 
 import { ConnectingContent } from './content';
 
@@ -11,7 +11,7 @@ export interface ConnectingPageProps {
 export function ConnectingPage({ origin }: ConnectingPageProps) {
   return (
     <LayoutWindow
-      renderHeader={() => <PopupHeader />}
+      renderHeader={() => <HeaderPopup />}
       renderContent={() => <ConnectingContent origin={origin} />}
     />
   );
diff --git a/src/apps/connect-to-app/pages/select-account/content.tsx b/src/apps/connect-to-app/pages/select-account/content.tsx
index d0c8b2818..985392154 100644
--- a/src/apps/connect-to-app/pages/select-account/content.tsx
+++ b/src/apps/connect-to-app/pages/select-account/content.tsx
@@ -1,33 +1,32 @@
-import React, { useMemo, useCallback, SetStateAction, Dispatch } from 'react';
+import React, { Dispatch, SetStateAction, useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useSelector } from 'react-redux';
 import styled from 'styled-components';
 
 import {
-  Checkbox,
-  SiteFaviconBadge,
-  Hash,
-  HashVariant,
-  List,
-  Typography
-} from '@src/libs/ui';
+  selectConnectedAccountNamesWithActiveOrigin,
+  selectVaultAccounts,
+  selectVaultActiveAccount
+} from '@background/redux/vault/selectors';
 
 import {
-  PageContainer,
+  BreakWordContainer,
   ContentContainer,
-  ParagraphContainer,
-  ListItemClickableContainer,
   LeftAlignedFlexColumn,
-  BreakWordContainer,
-  VerticalSpaceContainer,
-  SpacingSize
-} from '@src/libs/layout';
-
+  ListItemClickableContainer,
+  PageContainer,
+  ParagraphContainer,
+  SpacingSize,
+  VerticalSpaceContainer
+} from '@libs/layout';
 import {
-  selectConnectedAccountNamesWithActiveOrigin,
-  selectVaultAccounts,
-  selectVaultActiveAccount
-} from '@src/background/redux/vault/selectors';
+  Checkbox,
+  Hash,
+  HashVariant,
+  List,
+  SiteFaviconBadge,
+  Typography
+} from '@libs/ui/components';
 
 const AccountNameWithHashListItemContainer = styled(LeftAlignedFlexColumn)`
   width: 100%;
diff --git a/src/apps/connect-to-app/pages/select-account/index.tsx b/src/apps/connect-to-app/pages/select-account/index.tsx
index 2f293306e..29675cee3 100644
--- a/src/apps/connect-to-app/pages/select-account/index.tsx
+++ b/src/apps/connect-to-app/pages/select-account/index.tsx
@@ -1,22 +1,24 @@
 import React, { Dispatch, SetStateAction } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
+import { useSelector } from 'react-redux';
+import styled from 'styled-components';
+
+import { closeCurrentWindow } from '@background/close-current-window';
+import { selectIsActiveAccountConnectedWithActiveOrigin } from '@background/redux/vault/selectors';
+import { sendSdkResponseToSpecificTab } from '@background/send-sdk-response-to-specific-tab';
+
+import { sdkMethod } from '@content/sdk-method';
 
 import {
   FooterButtonsContainer,
+  HeaderPopup,
   HeaderSubmenuBarNavLink,
-  LayoutWindow,
-  PopupHeader
-} from '@src/libs/layout';
-import { Button, Typography } from '@src/libs/ui';
+  LayoutWindow
+} from '@libs/layout';
+import { Button, Typography } from '@libs/ui/components';
 
 import { RouterPath, useTypedNavigate } from '../../router';
 import { SelectAccountContent } from './content';
-import styled from 'styled-components';
-import { sendSdkResponseToSpecificTab } from '@src/background/send-sdk-response-to-specific-tab';
-import { sdkMethod } from '@src/content/sdk-method';
-import { closeCurrentWindow } from '@src/background/close-current-window';
-import { selectIsActiveAccountConnectedWithActiveOrigin } from '@src/background/redux/vault/selectors';
-import { useSelector } from 'react-redux';
 
 const TextCentredContainer = styled.div`
   text-align: center;
@@ -69,7 +71,7 @@ export function SelectAccountPage({
   return (
     <LayoutWindow
       renderHeader={() => (
-        <PopupHeader
+        <HeaderPopup
           renderSubmenuBarItems={() => (
             <HeaderSubmenuBarNavLink
               linkType="cancelWindow"
diff --git a/src/apps/connect-to-app/pages/switch-account/content.tsx b/src/apps/connect-to-app/pages/switch-account/content.tsx
index 82627c70f..16519baf9 100644
--- a/src/apps/connect-to-app/pages/switch-account/content.tsx
+++ b/src/apps/connect-to-app/pages/switch-account/content.tsx
@@ -2,41 +2,42 @@ import React from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 import { useSelector } from 'react-redux';
 
+import { useAccountManager } from '@popup/hooks/use-account-actions-with-events';
+
+import { closeCurrentWindow } from '@background/close-current-window';
+import { selectActiveOrigin } from '@background/redux/active-origin/selectors';
 import {
-  SiteFaviconBadge,
-  Hash,
-  HashVariant,
-  List,
-  Typography,
-  Button,
-  ConnectionStatusBadge
-} from '@src/libs/ui';
+  selectConnectedAccountsWithActiveOrigin,
+  selectUnconnectedAccountsWithActiveOrigin,
+  selectVaultActiveAccount
+} from '@background/redux/vault/selectors';
+import { sendSdkResponseToSpecificTab } from '@background/send-sdk-response-to-specific-tab';
+
+import { sdkMethod } from '@content/sdk-method';
 
 import {
-  PageContainer,
   ContentContainer,
-  ParagraphContainer,
   LeftAlignedFlexColumn,
-  VerticalSpaceContainer,
-  SpacingSize
-} from '@src/libs/layout';
-
+  PageContainer,
+  ParagraphContainer,
+  SpacingSize,
+  VerticalSpaceContainer
+} from '@libs/layout';
 import {
-  selectConnectedAccountsWithActiveOrigin,
-  selectUnconnectedAccountsWithActiveOrigin,
-  selectVaultActiveAccount
-} from '@src/background/redux/vault/selectors';
-import { selectActiveOrigin } from '@src/background/redux/active-origin/selectors';
-import { useAccountManager } from '@src/apps/popup/hooks/use-account-actions-with-events';
-import { closeCurrentWindow } from '@src/background/close-current-window';
+  Button,
+  ConnectionStatusBadge,
+  Hash,
+  HashVariant,
+  List,
+  SiteFaviconBadge,
+  Typography
+} from '@libs/ui/components';
 
 import {
-  UnconnectedAccountsList,
+  ListItemContainer,
   SpaceBetweenContainer,
-  ListItemContainer
+  UnconnectedAccountsList
 } from './unconnected-accounts-list';
-import { sendSdkResponseToSpecificTab } from '@src/background/send-sdk-response-to-specific-tab';
-import { sdkMethod } from '@src/content/sdk-method';
 
 type SwitchAccountContentProps = { requestId: string };
 
diff --git a/src/apps/connect-to-app/pages/switch-account/index.tsx b/src/apps/connect-to-app/pages/switch-account/index.tsx
index ea16660fd..2669e44e8 100644
--- a/src/apps/connect-to-app/pages/switch-account/index.tsx
+++ b/src/apps/connect-to-app/pages/switch-account/index.tsx
@@ -1,15 +1,17 @@
 import React from 'react';
 
+import { closeCurrentWindow } from '@background/close-current-window';
+import { sendSdkResponseToSpecificTab } from '@background/send-sdk-response-to-specific-tab';
+
+import { sdkMethod } from '@content/sdk-method';
+
 import {
+  HeaderPopup,
   HeaderSubmenuBarNavLink,
-  LayoutWindow,
-  PopupHeader
-} from '@src/libs/layout';
+  LayoutWindow
+} from '@libs/layout';
 
 import { SwitchAccountContent } from './content';
-import { sendSdkResponseToSpecificTab } from '@src/background/send-sdk-response-to-specific-tab';
-import { sdkMethod } from '@src/content/sdk-method';
-import { closeCurrentWindow } from '@src/background/close-current-window';
 
 export function SwitchAccountPage() {
   const searchParams = new URLSearchParams(document.location.search);
@@ -30,7 +32,7 @@ export function SwitchAccountPage() {
   return (
     <LayoutWindow
       renderHeader={() => (
-        <PopupHeader
+        <HeaderPopup
           renderSubmenuBarItems={() => (
             <HeaderSubmenuBarNavLink
               linkType="cancelWindow"
diff --git a/src/apps/connect-to-app/pages/switch-account/unconnected-accounts-list.tsx b/src/apps/connect-to-app/pages/switch-account/unconnected-accounts-list.tsx
index 4ab305bd1..fb923175a 100644
--- a/src/apps/connect-to-app/pages/switch-account/unconnected-accounts-list.tsx
+++ b/src/apps/connect-to-app/pages/switch-account/unconnected-accounts-list.tsx
@@ -1,23 +1,26 @@
 import React from 'react';
-import { useSelector } from 'react-redux';
 import { Trans, useTranslation } from 'react-i18next';
+import { useSelector } from 'react-redux';
 import styled from 'styled-components';
 
-import { AccountListRows } from '@background/redux/vault/types';
+import { useAccountManager } from '@popup/hooks/use-account-actions-with-events';
+
 import { closeCurrentWindow } from '@background/close-current-window';
 import { selectActiveOrigin } from '@background/redux/active-origin/selectors';
+import { sendSdkResponseToSpecificTab } from '@background/send-sdk-response-to-specific-tab';
+
+import { sdkMethod } from '@content/sdk-method';
+
+import { LeftAlignedFlexColumn, SpacingSize } from '@libs/layout';
+import { AccountListRows } from '@libs/types/account';
 import {
   Button,
+  ConnectionStatusBadge,
   Hash,
   HashVariant,
   List,
-  Typography,
-  ConnectionStatusBadge
-} from '@libs/ui';
-import { LeftAlignedFlexColumn, SpacingSize } from '@libs/layout';
-import { useAccountManager } from '@popup/hooks/use-account-actions-with-events';
-import { sendSdkResponseToSpecificTab } from '@src/background/send-sdk-response-to-specific-tab';
-import { sdkMethod } from '@src/content/sdk-method';
+  Typography
+} from '@libs/ui/components';
 
 const CentredFlexRow = styled.div`
   display: flex;
diff --git a/src/apps/import-account-with-file/app-router.tsx b/src/apps/import-account-with-file/app-router.tsx
index d5f98c4c8..710f4c748 100644
--- a/src/apps/import-account-with-file/app-router.tsx
+++ b/src/apps/import-account-with-file/app-router.tsx
@@ -1,16 +1,16 @@
-import '@libs/i18n/i18n';
-
 import React from 'react';
 import { HashRouter, Route, Routes } from 'react-router-dom';
 
-import { RouterPath } from './router';
+import { useUserActivityTracker } from '@hooks/use-user-activity-tracker';
+
+import '@libs/i18n/i18n';
+import { HeaderPopup, LayoutWindow } from '@libs/layout';
 
 import { ImportAccountWithFilePage } from './pages/import-account-with-file';
-import { ImportAccountWithFileSuccessContentPage } from './pages/import-account-with-file-success';
 import { ImportAccountWithFileFailureContentPage } from './pages/import-account-with-file-failure';
+import { ImportAccountWithFileSuccessContentPage } from './pages/import-account-with-file-success';
 import { ImportAccountWithFileUploadPage } from './pages/import-account-with-file-upload';
-import { PopupHeader, LayoutWindow } from '@src/libs/layout';
-import { useUserActivityTracker } from '@src/hooks/use-user-activity-tracker';
+import { RouterPath } from './router';
 
 export function AppRouter() {
   useUserActivityTracker();
@@ -30,7 +30,7 @@ export function AppRouter() {
           path={RouterPath.ImportAccountWithFileSuccess}
           element={
             <LayoutWindow
-              renderHeader={() => <PopupHeader />}
+              renderHeader={() => <HeaderPopup />}
               renderContent={() => <ImportAccountWithFileSuccessContentPage />}
             />
           }
@@ -39,7 +39,7 @@ export function AppRouter() {
           path={RouterPath.ImportAccountWithFileFailure}
           element={
             <LayoutWindow
-              renderHeader={() => <PopupHeader />}
+              renderHeader={() => <HeaderPopup />}
               renderContent={() => <ImportAccountWithFileFailureContentPage />}
             />
           }
diff --git a/src/apps/import-account-with-file/index.tsx b/src/apps/import-account-with-file/index.tsx
index eb909f2cf..2061642ff 100644
--- a/src/apps/import-account-with-file/index.tsx
+++ b/src/apps/import-account-with-file/index.tsx
@@ -1,26 +1,26 @@
-import '@libs/i18n/i18n';
-
 import React, { Suspense, useState } from 'react';
 import { render } from 'react-dom';
-import { ThemeProvider } from 'styled-components';
 import { Provider as ReduxProvider } from 'react-redux';
+import { ThemeProvider } from 'styled-components';
 
-import { importWindowInit } from '@src/background/redux/windowManagement/actions';
-import {
-  createMainStoreReplica,
-  dispatchToMainStore,
-  PopupState
-} from '@src/background/redux/utils';
-import { darkTheme, GlobalStyle, lightTheme } from '@libs/ui';
-import { ErrorBoundary } from '@src/libs/layout/error';
-
-import { AppRouter } from './app-router';
 import { useSubscribeToRedux } from '@src/hooks/use-subscribe-to-redux';
-import { selectThemeModeSetting } from '@background/redux/settings/selectors';
-import { useSystemThemeDetector } from '@src/hooks';
+import { isSafariBuild } from '@src/utils';
+
+import { createMainStoreReplica } from '@background/redux/get-main-store';
 import { themeModeSettingChanged } from '@background/redux/settings/actions';
+import { selectThemeModeSetting } from '@background/redux/settings/selectors';
 import { ThemeMode } from '@background/redux/settings/types';
-import { isSafariBuild } from '@src/utils';
+import { PopupState } from '@background/redux/types';
+import { dispatchToMainStore } from '@background/redux/utils';
+import { importWindowInit } from '@background/redux/windowManagement/actions';
+
+import { useSystemThemeDetector } from '@hooks/use-system-theme-detector';
+
+import '@libs/i18n/i18n';
+import { ErrorBoundary } from '@libs/layout';
+import { GlobalStyle, darkTheme, lightTheme } from '@libs/ui';
+
+import { AppRouter } from './app-router';
 
 const Tree = () => {
   const [state, setState] = useState<PopupState | null>(null);
diff --git a/src/apps/import-account-with-file/pages/import-account-with-file-failure/index.tsx b/src/apps/import-account-with-file/pages/import-account-with-file-failure/index.tsx
index 3cea071ff..e69b48ffa 100644
--- a/src/apps/import-account-with-file/pages/import-account-with-file-failure/index.tsx
+++ b/src/apps/import-account-with-file/pages/import-account-with-file-failure/index.tsx
@@ -1,21 +1,22 @@
 import React from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 
-import {
-  FooterButtonsAbsoluteContainer,
-  ContentContainer,
-  ParagraphContainer,
-  IllustrationContainer,
-  SpacingSize
-} from '@src/libs/layout';
-import { Button, SvgIcon, Typography } from '@src/libs/ui';
-
 import {
   RouterPath,
   useTypedLocation,
   useTypedNavigate
-} from '@src/apps/import-account-with-file/router';
-import { closeCurrentWindow } from '@src/background/close-current-window';
+} from '@import-account-with-file/router';
+
+import { closeCurrentWindow } from '@background/close-current-window';
+
+import {
+  ContentContainer,
+  FooterButtonsAbsoluteContainer,
+  IllustrationContainer,
+  ParagraphContainer,
+  SpacingSize
+} from '@libs/layout';
+import { Button, SvgIcon, Typography } from '@libs/ui/components';
 
 export function ImportAccountWithFileFailureContentPage() {
   const { t } = useTranslation();
diff --git a/src/apps/import-account-with-file/pages/import-account-with-file-success/index.tsx b/src/apps/import-account-with-file/pages/import-account-with-file-success/index.tsx
index f1b9ecf4d..14a37b011 100644
--- a/src/apps/import-account-with-file/pages/import-account-with-file-success/index.tsx
+++ b/src/apps/import-account-with-file/pages/import-account-with-file-success/index.tsx
@@ -1,16 +1,16 @@
 import React from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 
+import { closeCurrentWindow } from '@background/close-current-window';
+
 import {
-  FooterButtonsAbsoluteContainer,
   ContentContainer,
-  ParagraphContainer,
+  FooterButtonsAbsoluteContainer,
   IllustrationContainer,
+  ParagraphContainer,
   SpacingSize
-} from '@src/libs/layout';
-import { Button, SvgIcon, Typography } from '@src/libs/ui';
-
-import { closeCurrentWindow } from '@src/background/close-current-window';
+} from '@libs/layout';
+import { Button, SvgIcon, Typography } from '@libs/ui/components';
 
 export function ImportAccountWithFileSuccessContentPage() {
   const { t } = useTranslation();
diff --git a/src/apps/import-account-with-file/pages/import-account-with-file-upload/content.tsx b/src/apps/import-account-with-file/pages/import-account-with-file-upload/content.tsx
index 9b0e5f866..89702baca 100644
--- a/src/apps/import-account-with-file/pages/import-account-with-file-upload/content.tsx
+++ b/src/apps/import-account-with-file/pages/import-account-with-file-upload/content.tsx
@@ -12,11 +12,10 @@ import {
   InputsContainer,
   ParagraphContainer,
   SpacingSize
-} from '@src/libs/layout';
-import { Input, SvgIcon, Typography } from '@src/libs/ui';
+} from '@libs/layout';
+import { Input, SvgIcon, Typography } from '@libs/ui/components';
 
 import { RouterPath, useTypedNavigate } from '../../router';
-
 import { ImportAccountFormValues } from './types';
 
 interface ImportAccountWithFilePageContentProps {
diff --git a/src/apps/import-account-with-file/pages/import-account-with-file-upload/hooks/use-secret-key-file-reader.ts b/src/apps/import-account-with-file/pages/import-account-with-file-upload/hooks/use-secret-key-file-reader.ts
index 1af02eb73..67decbf67 100644
--- a/src/apps/import-account-with-file/pages/import-account-with-file-upload/hooks/use-secret-key-file-reader.ts
+++ b/src/apps/import-account-with-file/pages/import-account-with-file-upload/hooks/use-secret-key-file-reader.ts
@@ -1,9 +1,10 @@
 import { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import { checkSecretKeyExist } from '@src/background/redux/import-account-actions-should-be-removed';
-import { Account } from '@src/background/redux/vault/types';
-import { parseSecretKeyString } from '@src/libs/crypto';
+import { checkSecretKeyExist } from '@background/redux/import-account-actions-should-be-removed';
+
+import { parseSecretKeyString } from '@libs/crypto';
+import { Account } from '@libs/types/account';
 
 type OnSuccess = (accountData: Account) => void;
 type OnFailure = (message?: string) => void;
@@ -20,49 +21,56 @@ export function useSecretKeyFileReader({
   const { t } = useTranslation();
 
   const secretKeyFileReader = useCallback(
-    (name: string, secretKeyFile: Blob) => {
+    async (name: string, secretKeyFile: Blob) => {
+      const isFileValid = (fileContents: string): Error | undefined => {
+        if (!fileContents || fileContents.includes('PUBLIC KEY')) {
+          return new Error(
+            t('A private key was not detected. Try importing a different file.')
+          );
+        }
+      };
+
+      const doesSecretKeyExist = async (
+        secretKeyBase64: string
+      ): Promise<Error | undefined> => {
+        const existence =
+          secretKeyBase64 && (await checkSecretKeyExist(secretKeyBase64));
+        if (existence) {
+          return new Error(
+            t('This account already exists. Try importing a different file.')
+          );
+        }
+      };
+
       const reader = new FileReader();
+
       reader.readAsText(secretKeyFile);
 
-      reader.onload = async e => {
+      reader.onload = async () => {
         const fileContents = reader.result as string;
 
-        try {
-          if (!fileContents || fileContents.includes('PUBLIC KEY')) {
-            throw Error(
-              t(
-                'A private key was not detected. Try importing a different file.'
-              )
-            );
-          }
-
-          const { publicKeyHex, secretKeyBase64 } =
-            parseSecretKeyString(fileContents);
+        const fileValidationError = isFileValid(fileContents);
+        if (fileValidationError) {
+          return onFailure(fileValidationError.message);
+        }
 
-          const doesSecretKeyExist =
-            secretKeyBase64 && (await checkSecretKeyExist(secretKeyBase64));
-          if (doesSecretKeyExist) {
-            throw Error(
-              t('This account already exists. Try importing a different file.')
-            );
-          }
+        const { publicKeyHex, secretKeyBase64 } =
+          parseSecretKeyString(fileContents);
 
-          return onSuccess({
-            imported: true,
-            name,
-            publicKey: publicKeyHex,
-            secretKey: secretKeyBase64
-          });
-        } catch (err) {
-          if (err instanceof Error) {
-            return onFailure(err.message);
-          } else {
-            console.error(err);
-          }
+        const secretKeyError = await doesSecretKeyExist(secretKeyBase64);
+        if (secretKeyError) {
+          return onFailure(secretKeyError.message);
         }
+
+        return onSuccess({
+          imported: true,
+          name,
+          publicKey: publicKeyHex,
+          secretKey: secretKeyBase64
+        });
       };
     },
-    [t, onFailure, onSuccess]
+    [t, onSuccess, onFailure]
   );
 
   return { secretKeyFileReader };
diff --git a/src/apps/import-account-with-file/pages/import-account-with-file-upload/index.tsx b/src/apps/import-account-with-file/pages/import-account-with-file-upload/index.tsx
index cde8867cc..5650bb41b 100644
--- a/src/apps/import-account-with-file/pages/import-account-with-file-upload/index.tsx
+++ b/src/apps/import-account-with-file/pages/import-account-with-file-upload/index.tsx
@@ -1,27 +1,25 @@
-import React, { useCallback } from 'react';
-import { UseFormProps } from 'react-hook-form/dist/types/form';
-import { FieldValues, useForm } from 'react-hook-form';
-import { yupResolver } from '@hookform/resolvers/yup/dist/yup';
 import * as Yup from 'yup';
+import { yupResolver } from '@hookform/resolvers/yup/dist/yup';
+import React, { useCallback } from 'react';
+import { FieldValues, UseFormProps, useForm } from 'react-hook-form';
 import { Trans, useTranslation } from 'react-i18next';
 
-import {
-  LayoutWindow,
-  PopupHeader,
-  FooterButtonsContainer
-} from '@src/libs/layout';
-import { Button } from '@src/libs/ui';
-import { useAccountNameRule } from '@src/libs/ui/forms/form-validation-rules';
+import { checkAccountNameIsTaken } from '@background/redux/import-account-actions-should-be-removed';
+import { dispatchToMainStore } from '@background/redux/utils';
+import { accountImported } from '@background/redux/vault/actions';
 
-import { Account } from '@src/background/redux/vault/types';
-import { dispatchToMainStore } from '@src/background/redux/utils';
-import { accountImported } from '@src/background/redux/vault/actions';
-import { checkAccountNameIsTaken } from '@src/background/redux/import-account-actions-should-be-removed';
+import {
+  FooterButtonsContainer,
+  HeaderPopup,
+  LayoutWindow
+} from '@libs/layout';
+import { Account } from '@libs/types/account';
+import { Button } from '@libs/ui/components';
+import { useAccountNameRule } from '@libs/ui/forms/form-validation-rules';
 
 import { RouterPath, useTypedNavigate } from '../../router';
-
-import { useSecretKeyFileReader } from './hooks/use-secret-key-file-reader';
 import { ImportAccountWithFileUploadPageContent } from './content';
+import { useSecretKeyFileReader } from './hooks/use-secret-key-file-reader';
 import { ImportAccountFormValues } from './types';
 
 export function ImportAccountWithFileUploadPage() {
@@ -109,7 +107,7 @@ export function ImportAccountWithFileUploadPage() {
     <LayoutWindow
       variant="form"
       onSubmit={handleSubmit(onSubmit)}
-      renderHeader={() => <PopupHeader />}
+      renderHeader={() => <HeaderPopup />}
       renderContent={() => (
         <ImportAccountWithFileUploadPageContent
           register={register}
diff --git a/src/apps/import-account-with-file/pages/import-account-with-file/content.tsx b/src/apps/import-account-with-file/pages/import-account-with-file/content.tsx
index 4d724933d..c6857dd97 100644
--- a/src/apps/import-account-with-file/pages/import-account-with-file/content.tsx
+++ b/src/apps/import-account-with-file/pages/import-account-with-file/content.tsx
@@ -1,14 +1,15 @@
 import React from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 
+import { isSafariBuild } from '@src/utils';
+
 import {
   ContentContainer,
-  ParagraphContainer,
   IllustrationContainer,
+  ParagraphContainer,
   SpacingSize
-} from '@src/libs/layout';
-import { SvgIcon, Tag, Typography } from '@libs/ui';
-import { isSafariBuild } from '@src/utils';
+} from '@libs/layout';
+import { SvgIcon, Tag, Typography } from '@libs/ui/components';
 
 export function ImportAccountWithFileContentPage() {
   const { t } = useTranslation();
diff --git a/src/apps/import-account-with-file/pages/import-account-with-file/index.tsx b/src/apps/import-account-with-file/pages/import-account-with-file/index.tsx
index 6932a656c..32fa17f6f 100644
--- a/src/apps/import-account-with-file/pages/import-account-with-file/index.tsx
+++ b/src/apps/import-account-with-file/pages/import-account-with-file/index.tsx
@@ -1,15 +1,15 @@
 import React from 'react';
-import { useNavigate } from 'react-router-dom';
 import { Trans, useTranslation } from 'react-i18next';
+import { useNavigate } from 'react-router-dom';
 
 import {
   FooterButtonsContainer,
-  LayoutWindow,
-  PopupHeader
+  HeaderPopup,
+  LayoutWindow
 } from '@libs/layout';
-import { Button } from '@libs/ui';
-import { RouterPath } from '../../router';
+import { Button } from '@libs/ui/components';
 
+import { RouterPath } from '../../router';
 import { ImportAccountWithFileContentPage } from './content';
 
 export function ImportAccountWithFilePage() {
@@ -18,7 +18,7 @@ export function ImportAccountWithFilePage() {
 
   return (
     <LayoutWindow
-      renderHeader={() => <PopupHeader />}
+      renderHeader={() => <HeaderPopup />}
       renderContent={() => <ImportAccountWithFileContentPage />}
       renderFooter={() => (
         <FooterButtonsContainer>
diff --git a/src/apps/import-account-with-file/router/use-typed-location.ts b/src/apps/import-account-with-file/router/use-typed-location.ts
index 9ad3c3ea9..398a9fd4a 100644
--- a/src/apps/import-account-with-file/router/use-typed-location.ts
+++ b/src/apps/import-account-with-file/router/use-typed-location.ts
@@ -1,4 +1,5 @@
 import { useLocation } from 'react-router-dom';
+
 import { LocationState } from '@import-account-with-file/router/types';
 
 export function useTypedLocation() {
diff --git a/src/apps/import-account-with-file/router/use-typed-navigate.ts b/src/apps/import-account-with-file/router/use-typed-navigate.ts
index 80819cb6f..cf746b01e 100644
--- a/src/apps/import-account-with-file/router/use-typed-navigate.ts
+++ b/src/apps/import-account-with-file/router/use-typed-navigate.ts
@@ -1,4 +1,5 @@
 import { To, useNavigate } from 'react-router-dom';
+
 import { LocationState } from '@import-account-with-file/router/types';
 
 export function useTypedNavigate() {
diff --git a/src/apps/onboarding/app-router.tsx b/src/apps/onboarding/app-router.tsx
index cf5291809..e6d76fa3e 100644
--- a/src/apps/onboarding/app-router.tsx
+++ b/src/apps/onboarding/app-router.tsx
@@ -1,52 +1,41 @@
-import React, { useState } from 'react';
-import { HashRouter, Route, Routes } from 'react-router-dom';
+import React from 'react';
 import { useSelector } from 'react-redux';
+import { HashRouter, Route, Routes } from 'react-router-dom';
 
-import { SecretPhrase } from '@src/libs/crypto';
-import { ErrorPath, TabErrorPage } from '@src/libs/layout/error';
-
+import {
+  FormState,
+  SetFormState,
+  useOnboardingFormState
+} from '@onboarding/hooks/use-onboarding-form-state';
+import { useSessionStorage } from '@onboarding/hooks/use-session-storage';
+import { ConfirmSecretPhrasePage } from '@onboarding/pages/confirm-secret-phrase';
+import { ConfirmSecretPhraseSuccessPage } from '@onboarding/pages/confirm-secret-phrase-success';
+import { CreateSecretPhrasePage } from '@onboarding/pages/create-secret-phrase';
+import { CreateSecretPhraseConfirmationPage } from '@onboarding/pages/create-secret-phrase-confirmation';
+import { CreateVaultPasswordPage } from '@onboarding/pages/create-vault-password';
+import { OnboardingSuccessPage } from '@onboarding/pages/onboarding-success';
+import { RecoverFromSecretPhrasePage } from '@onboarding/pages/recover-from-secret-phrase';
+import { ResetWalletPage } from '@onboarding/pages/reset-wallet';
+import { UnlockWalletPage } from '@onboarding/pages/unlock-wallet';
+import { WelcomePage } from '@onboarding/pages/welcome';
+import { WriteDownSecretPhrasePage } from '@onboarding/pages/write-down-secret-phrase';
 import {
   RouterPath,
   useTypedLocation,
   useTypedNavigate
-} from '@src/apps/onboarding/router';
+} from '@onboarding/router';
 
-import { useSessionStorage } from '@src/apps/onboarding/hooks/use-session-storage';
+import { selectKeysDoesExist } from '@background/redux/keys/selectors';
+import { selectEncryptionKeyHash } from '@background/redux/session/selectors';
 
-import { UnlockWalletPage } from '@src/apps/onboarding/pages/unlock-wallet';
-import { ResetWalletPage } from '@src/apps/onboarding/pages/reset-wallet';
-import { WelcomePage } from '@src/apps/onboarding/pages/welcome';
-import { CreateVaultPasswordPage } from '@src/apps/onboarding/pages/create-vault-password';
-import { CreateSecretPhrasePage } from '@src/apps/onboarding/pages/create-secret-phrase';
-import { RecoverFromSecretPhrasePage } from '@src/apps/onboarding/pages/recover-from-secret-phrase';
-import { CreateSecretPhraseConfirmationPage } from '@src/apps/onboarding/pages/create-secret-phrase-confirmation';
-import { WriteDownSecretPhrasePage } from '@src/apps/onboarding/pages/write-down-secret-phrase';
-import { ConfirmSecretPhrasePage } from '@src/apps/onboarding/pages/confirm-secret-phrase';
-import { ConfirmSecretPhraseSuccessPage } from '@src/apps/onboarding/pages/confirm-secret-phrase-success';
-import { OnboardingSuccessPage } from '@src/apps/onboarding/pages/onboarding-success';
-import { selectKeysDoesExist } from '@src/background/redux/keys/selectors';
-import { selectEncryptionKeyHash } from '@src/background/redux/session/selectors';
-
-export interface FormState {
-  secretPhrase: SecretPhrase | null;
-}
-
-export type SetFormState = (name: keyof FormState, value: any) => void;
+import { ErrorPath, TabErrorPage } from '@libs/layout';
 
 export function AppRouter() {
-  const [onboardingFormState, setOnboardingFormState] = useState<FormState>({
-    secretPhrase: null
-  });
+  const { onboardingFormState, setFormState } = useOnboardingFormState();
 
   const { loadIsLoggedIn, saveIsLoggedIn } = useSessionStorage();
   const isLoggedIn = loadIsLoggedIn();
 
-  const setFormState: SetFormState = (name, value) =>
-    setOnboardingFormState(prevOnboardingFormState => ({
-      ...prevOnboardingFormState,
-      [name]: value
-    }));
-
   const keysDoesExist = useSelector(selectKeysDoesExist);
   const encryptionKeyHash = useSelector(selectEncryptionKeyHash);
 
diff --git a/src/apps/onboarding/hooks/use-onboarding-form-state.ts b/src/apps/onboarding/hooks/use-onboarding-form-state.ts
new file mode 100644
index 000000000..0f16cc0ca
--- /dev/null
+++ b/src/apps/onboarding/hooks/use-onboarding-form-state.ts
@@ -0,0 +1,25 @@
+import { useState } from 'react';
+
+import { SecretPhrase } from '@libs/crypto';
+
+export interface FormState {
+  secretPhrase: SecretPhrase | null;
+}
+
+export type SetFormState = (name: keyof FormState, value: any) => void;
+export const useOnboardingFormState = () => {
+  const [onboardingFormState, setOnboardingFormState] = useState<FormState>({
+    secretPhrase: null
+  });
+
+  const setFormState: SetFormState = (name, value) =>
+    setOnboardingFormState(prevOnboardingFormState => ({
+      ...prevOnboardingFormState,
+      [name]: value
+    }));
+
+  return {
+    onboardingFormState,
+    setFormState
+  };
+};
diff --git a/src/apps/onboarding/index.tsx b/src/apps/onboarding/index.tsx
index b3f59fe40..ec9d58b04 100644
--- a/src/apps/onboarding/index.tsx
+++ b/src/apps/onboarding/index.tsx
@@ -1,19 +1,19 @@
-import '@libs/i18n/i18n';
-
 import React, { Suspense, useState } from 'react';
 import { render } from 'react-dom';
 import { Provider as ReduxProvider } from 'react-redux';
 import { ThemeProvider } from 'styled-components';
 
-import { ErrorBoundary } from '@src/libs/layout/error';
-
-import { GlobalStyle, lightTheme } from '@libs/ui';
+import { useSubscribeToRedux } from '@src/hooks/use-subscribe-to-redux';
 
-import { AppRouter } from '@src/apps/onboarding/app-router';
+import { AppRouter } from '@onboarding/app-router';
 
+import { createMainStoreReplica } from '@background/redux/get-main-store';
+import { PopupState } from '@background/redux/types';
 import { onboardingAppInit } from '@background/redux/windowManagement/actions';
-import { createMainStoreReplica, PopupState } from '@background/redux/utils';
-import { useSubscribeToRedux } from '@src/hooks/use-subscribe-to-redux';
+
+import '@libs/i18n/i18n';
+import { ErrorBoundary } from '@libs/layout';
+import { GlobalStyle, lightTheme } from '@libs/ui';
 
 const Tree = () => {
   const [state, setState] = useState<PopupState | null>(null);
diff --git a/src/apps/onboarding/pages/confirm-secret-phrase-success/content.tsx b/src/apps/onboarding/pages/confirm-secret-phrase-success/content.tsx
index 06675649c..6451ea71a 100644
--- a/src/apps/onboarding/pages/confirm-secret-phrase-success/content.tsx
+++ b/src/apps/onboarding/pages/confirm-secret-phrase-success/content.tsx
@@ -1,13 +1,13 @@
 import React from 'react';
-import { useTranslation, Trans } from 'react-i18next';
+import { Trans, useTranslation } from 'react-i18next';
 
 import {
   SpacingSize,
   TabPageContainer,
   TabTextContainer,
   VerticalSpaceContainer
-} from '@src/libs/layout';
-import { Typography, TextList } from '@src/libs/ui';
+} from '@libs/layout';
+import { TextList, Typography } from '@libs/ui/components';
 
 export function ConfirmSecretPhraseSuccessPageContent() {
   const { t } = useTranslation();
diff --git a/src/apps/onboarding/pages/confirm-secret-phrase-success/index.tsx b/src/apps/onboarding/pages/confirm-secret-phrase-success/index.tsx
index 0462858e6..747085eec 100644
--- a/src/apps/onboarding/pages/confirm-secret-phrase-success/index.tsx
+++ b/src/apps/onboarding/pages/confirm-secret-phrase-success/index.tsx
@@ -1,17 +1,17 @@
 import React from 'react';
-import { useTranslation, Trans } from 'react-i18next';
+import { Trans, useTranslation } from 'react-i18next';
+
+import { Stepper } from '@onboarding/components/stepper';
+import { RouterPath } from '@onboarding/router';
+import { useTypedNavigate } from '@onboarding/router/use-typed-navigate';
 
 import {
+  HeaderSubmenuBarNavLink,
   LayoutTab,
-  TabHeaderContainer,
   TabFooterContainer,
-  HeaderSubmenuBarNavLink
+  TabHeaderContainer
 } from '@libs/layout';
-import { Button } from '@libs/ui';
-
-import { useTypedNavigate } from '@src/apps/onboarding/router/use-typed-navigate';
-import { RouterPath } from '@src/apps/onboarding/router';
-import { Stepper } from '@src/apps/onboarding/components/stepper';
+import { Button } from '@libs/ui/components';
 
 import { ConfirmSecretPhraseSuccessPageContent } from './content';
 
diff --git a/src/apps/onboarding/pages/confirm-secret-phrase/content.tsx b/src/apps/onboarding/pages/confirm-secret-phrase/content.tsx
index 8553424e9..1cb74f7be 100644
--- a/src/apps/onboarding/pages/confirm-secret-phrase/content.tsx
+++ b/src/apps/onboarding/pages/confirm-secret-phrase/content.tsx
@@ -1,9 +1,13 @@
 import React, { Dispatch, SetStateAction } from 'react';
-import { useTranslation, Trans } from 'react-i18next';
+import { Trans, useTranslation } from 'react-i18next';
 
-import { TabPageContainer, TabTextContainer } from '@src/libs/layout';
-import { Typography, SecretPhraseWordsView, WordPicker } from '@src/libs/ui';
-import { SecretPhrase } from '@src/libs/crypto';
+import { SecretPhrase } from '@libs/crypto';
+import { TabPageContainer, TabTextContainer } from '@libs/layout';
+import {
+  SecretPhraseWordsView,
+  Typography,
+  WordPicker
+} from '@libs/ui/components';
 
 interface ConfirmSecretPhrasePageContentProps {
   phrase: SecretPhrase;
diff --git a/src/apps/onboarding/pages/confirm-secret-phrase/index.tsx b/src/apps/onboarding/pages/confirm-secret-phrase/index.tsx
index 1228b60b9..23f26e9be 100644
--- a/src/apps/onboarding/pages/confirm-secret-phrase/index.tsx
+++ b/src/apps/onboarding/pages/confirm-secret-phrase/index.tsx
@@ -2,23 +2,25 @@ import React, { useState } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 import { Navigate } from 'react-router-dom';
 
+import { Stepper } from '@onboarding/components/stepper';
+import { RouterPath } from '@onboarding/router';
+import { useTypedNavigate } from '@onboarding/router/use-typed-navigate';
+
+import { initVault } from '@background/redux/sagas/actions';
+import { dispatchToMainStore } from '@background/redux/utils';
+
+import { SecretPhrase } from '@libs/crypto';
 import {
+  ErrorPath,
   HeaderSubmenuBarNavLink,
   LayoutTab,
   TabFooterContainer,
-  TabHeaderContainer
-} from '@src/libs/layout';
-import { createErrorLocationState, ErrorPath } from '@src/libs/layout/error';
-import { Button } from '@src/libs/ui';
-import { SecretPhrase } from '@src/libs/crypto';
-
-import { Stepper } from '@src/apps/onboarding/components/stepper';
-import { RouterPath } from '@src/apps/onboarding/router';
-import { useTypedNavigate } from '@src/apps/onboarding/router/use-typed-navigate';
+  TabHeaderContainer,
+  createErrorLocationState
+} from '@libs/layout';
+import { Button } from '@libs/ui/components';
 
 import { ConfirmSecretPhrasePageContent } from './content';
-import { dispatchToMainStore } from '@src/background/redux/utils';
-import { initVault } from '@src/background/redux/sagas/actions';
 
 interface ConfirmSecretPhrasePageProps {
   phrase: SecretPhrase | null;
diff --git a/src/apps/onboarding/pages/create-secret-phrase-confirmation/content.tsx b/src/apps/onboarding/pages/create-secret-phrase-confirmation/content.tsx
index e32459d27..1225cfe15 100644
--- a/src/apps/onboarding/pages/create-secret-phrase-confirmation/content.tsx
+++ b/src/apps/onboarding/pages/create-secret-phrase-confirmation/content.tsx
@@ -1,12 +1,12 @@
 import React from 'react';
-import { useTranslation, Trans } from 'react-i18next';
+import { Trans, useTranslation } from 'react-i18next';
 
 import {
   SpacingSize,
   TabPageContainer,
   VerticalSpaceContainer
-} from '@src/libs/layout';
-import { Typography, TextList } from '@src/libs/ui';
+} from '@libs/layout';
+import { TextList, Typography } from '@libs/ui/components';
 
 export function CreateSecretPhraseConfirmationPageContent() {
   const { t } = useTranslation();
diff --git a/src/apps/onboarding/pages/create-secret-phrase-confirmation/index.tsx b/src/apps/onboarding/pages/create-secret-phrase-confirmation/index.tsx
index a9b776134..cdff335b1 100644
--- a/src/apps/onboarding/pages/create-secret-phrase-confirmation/index.tsx
+++ b/src/apps/onboarding/pages/create-secret-phrase-confirmation/index.tsx
@@ -1,21 +1,21 @@
 import React, { useState } from 'react';
-import { useTranslation, Trans } from 'react-i18next';
+import { Trans, useTranslation } from 'react-i18next';
 
+import { Stepper } from '@onboarding/components/stepper';
+import { SetFormState } from '@onboarding/hooks/use-onboarding-form-state';
+import { RouterPath } from '@onboarding/router';
+import { useTypedNavigate } from '@onboarding/router/use-typed-navigate';
+
+import { generateSecretPhrase } from '@libs/crypto';
 import {
+  HeaderSubmenuBarNavLink,
   LayoutTab,
-  TabHeaderContainer,
   TabFooterContainer,
-  HeaderSubmenuBarNavLink
+  TabHeaderContainer
 } from '@libs/layout';
-import { Button, Checkbox } from '@libs/ui';
-
-import { useTypedNavigate } from '@src/apps/onboarding/router/use-typed-navigate';
-import { RouterPath } from '@src/apps/onboarding/router';
-import { Stepper } from '@src/apps/onboarding/components/stepper';
-import { SetFormState } from '@src/apps/onboarding/app-router';
+import { Button, Checkbox } from '@libs/ui/components';
 
 import { CreateSecretPhraseConfirmationPageContent } from './content';
-import { generateSecretPhrase } from '@src/libs/crypto';
 
 interface CreateSecretPhraseConfirmationPageProps {
   setFormState: SetFormState;
diff --git a/src/apps/onboarding/pages/create-secret-phrase/content.tsx b/src/apps/onboarding/pages/create-secret-phrase/content.tsx
index c67ba91c2..e42557b30 100644
--- a/src/apps/onboarding/pages/create-secret-phrase/content.tsx
+++ b/src/apps/onboarding/pages/create-secret-phrase/content.tsx
@@ -1,8 +1,8 @@
 import React from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 
-import { Typography } from '@libs/ui';
-import { TabPageContainer, TabTextContainer } from '@src/libs/layout';
+import { TabPageContainer, TabTextContainer } from '@libs/layout';
+import { Typography } from '@libs/ui/components';
 
 export function CreateSecretPhraseContent() {
   const { t } = useTranslation();
diff --git a/src/apps/onboarding/pages/create-secret-phrase/index.tsx b/src/apps/onboarding/pages/create-secret-phrase/index.tsx
index b25f2f2ce..bb891810d 100644
--- a/src/apps/onboarding/pages/create-secret-phrase/index.tsx
+++ b/src/apps/onboarding/pages/create-secret-phrase/index.tsx
@@ -1,20 +1,22 @@
 import React from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 
+import { Stepper } from '@onboarding/components/stepper';
+import { RouterPath } from '@onboarding/router';
+import { useTypedNavigate } from '@onboarding/router/use-typed-navigate';
+
+import { resetVault } from '@background/redux/sagas/actions';
+import { dispatchToMainStore } from '@background/redux/utils';
+
 import {
   HeaderSubmenuBarNavLink,
   LayoutTab,
   TabFooterContainer,
   TabHeaderContainer
 } from '@libs/layout';
-import { Button } from '@libs/ui';
-import { Stepper } from '@src/apps/onboarding/components/stepper';
-import { RouterPath } from '@src/apps/onboarding/router';
-import { useTypedNavigate } from '@src/apps/onboarding/router/use-typed-navigate';
-import { dispatchToMainStore } from '@src/background/redux/utils';
+import { Button } from '@libs/ui/components';
 
 import { CreateSecretPhraseContent } from './content';
-import { resetVault } from '@src/background/redux/sagas/actions';
 
 export function CreateSecretPhrasePage() {
   const navigate = useTypedNavigate();
diff --git a/src/apps/onboarding/pages/create-vault-password/content.tsx b/src/apps/onboarding/pages/create-vault-password/content.tsx
index 6d5a37f23..954536df2 100644
--- a/src/apps/onboarding/pages/create-vault-password/content.tsx
+++ b/src/apps/onboarding/pages/create-vault-password/content.tsx
@@ -1,8 +1,8 @@
 import React from 'react';
-import { useTranslation, Trans } from 'react-i18next';
+import { Trans, useTranslation } from 'react-i18next';
 
-import { Typography } from '@libs/ui';
 import { TabPageContainer, TabTextContainer } from '@libs/layout';
+import { Typography } from '@libs/ui/components';
 import { minPasswordLength } from '@libs/ui/forms/form-validation-rules';
 
 interface CreatePasswordPageContentProps {
diff --git a/src/apps/onboarding/pages/create-vault-password/index.tsx b/src/apps/onboarding/pages/create-vault-password/index.tsx
index 32e46977a..79814129e 100644
--- a/src/apps/onboarding/pages/create-vault-password/index.tsx
+++ b/src/apps/onboarding/pages/create-vault-password/index.tsx
@@ -1,7 +1,17 @@
 import React, { useEffect, useState } from 'react';
+import { useWatch } from 'react-hook-form';
 import { Trans, useTranslation } from 'react-i18next';
 import { useSelector } from 'react-redux';
-import { useWatch } from 'react-hook-form';
+
+import { TermsLink } from '@src/constants';
+
+import { Stepper } from '@onboarding/components/stepper';
+import { RouterPath } from '@onboarding/router';
+import { useTypedNavigate } from '@onboarding/router/use-typed-navigate';
+
+import { selectPasswordHash } from '@background/redux/keys/selectors';
+import { initKeys } from '@background/redux/sagas/actions';
+import { dispatchToMainStore } from '@background/redux/utils';
 
 import {
   HeaderSubmenuBarNavLink,
@@ -9,20 +19,12 @@ import {
   TabFooterContainer,
   TabHeaderContainer
 } from '@libs/layout';
-import { Button, Checkbox, Link, PasswordInputs } from '@libs/ui';
+import { Button, Checkbox, Link, PasswordInputs } from '@libs/ui/components';
 import {
   CreatePasswordFormValues,
   useCreatePasswordForm
 } from '@libs/ui/forms/create-password';
 
-import { Stepper } from '@src/apps/onboarding/components/stepper';
-import { RouterPath } from '@src/apps/onboarding/router';
-import { useTypedNavigate } from '@src/apps/onboarding/router/use-typed-navigate';
-import { selectPasswordHash } from '@src/background/redux/keys/selectors';
-import { initKeys } from '@src/background/redux/sagas/actions';
-import { dispatchToMainStore } from '@background/redux/utils';
-import { TermsLink } from '@src/constants';
-
 import { CreateVaultPasswordPageContent } from './content';
 
 interface CreateVaultPasswordPageProps {
diff --git a/src/apps/onboarding/pages/onboarding-success/content.tsx b/src/apps/onboarding/pages/onboarding-success/content.tsx
index 6ee5fd69a..d6343d8b1 100644
--- a/src/apps/onboarding/pages/onboarding-success/content.tsx
+++ b/src/apps/onboarding/pages/onboarding-success/content.tsx
@@ -3,7 +3,7 @@ import { Trans, useTranslation } from 'react-i18next';
 import styled from 'styled-components';
 
 import { TabPageContainer, TabTextContainer } from '@libs/layout';
-import { Link, SvgIcon, Typography } from '@libs/ui';
+import { Link, SvgIcon, Typography } from '@libs/ui/components';
 
 const TipContainer = styled.div`
   margin-top: 12px;
diff --git a/src/apps/onboarding/pages/onboarding-success/index.tsx b/src/apps/onboarding/pages/onboarding-success/index.tsx
index 9aa955bae..6f52ae18e 100644
--- a/src/apps/onboarding/pages/onboarding-success/index.tsx
+++ b/src/apps/onboarding/pages/onboarding-success/index.tsx
@@ -1,10 +1,10 @@
 import React from 'react';
-import { useTranslation, Trans } from 'react-i18next';
+import { Trans, useTranslation } from 'react-i18next';
 
-import { LayoutTab, TabFooterContainer } from '@libs/layout';
-import { Button } from '@libs/ui';
+import { closeActiveTab } from '@onboarding/utils/close-active-tab';
 
-import { closeActiveTab } from '@src/apps/onboarding/utils/close-active-tab';
+import { LayoutTab, TabFooterContainer } from '@libs/layout';
+import { Button } from '@libs/ui/components';
 
 import { OnboardingSuccessPageContent } from './content';
 
diff --git a/src/apps/onboarding/pages/recover-from-secret-phrase/content.tsx b/src/apps/onboarding/pages/recover-from-secret-phrase/content.tsx
index c74f73d81..b5699ebdf 100644
--- a/src/apps/onboarding/pages/recover-from-secret-phrase/content.tsx
+++ b/src/apps/onboarding/pages/recover-from-secret-phrase/content.tsx
@@ -1,14 +1,19 @@
 import React from 'react';
-import { useTranslation, Trans } from 'react-i18next';
 import { UseFormRegister } from 'react-hook-form';
+import { Trans, useTranslation } from 'react-i18next';
 
 import {
+  InputsContainer,
   TabPageContainer,
-  TabTextContainer,
-  InputsContainer
+  TabTextContainer
 } from '@libs/layout';
-import { FormField, FormFieldStatus, TextArea, Typography } from '@libs/ui';
-import { RecoverSecretPhraseFormValues } from '@src/libs/ui/forms/recover-from-secret-phrase';
+import {
+  FormField,
+  FormFieldStatus,
+  TextArea,
+  Typography
+} from '@libs/ui/components';
+import { RecoverSecretPhraseFormValues } from '@libs/ui/forms/recover-from-secret-phrase';
 
 interface RecoverFromSecretPhrasePageContentProps {
   register: UseFormRegister<RecoverSecretPhraseFormValues>;
@@ -29,8 +34,8 @@ export function RecoverFromSecretPhrasePageContent({
       <TabTextContainer>
         <Typography type="body" color="contentSecondary">
           <Trans t={t}>
-            Recover your wallet by entering each word of your 24-word secret
-            recovery phrase, separated by spaces.
+            Recover your wallet by entering each word of your 12-word or 24-word
+            secret recovery phrase, separated by spaces.
           </Trans>
         </Typography>
       </TabTextContainer>
diff --git a/src/apps/onboarding/pages/recover-from-secret-phrase/index.tsx b/src/apps/onboarding/pages/recover-from-secret-phrase/index.tsx
index 7500bfaeb..1f3b14917 100644
--- a/src/apps/onboarding/pages/recover-from-secret-phrase/index.tsx
+++ b/src/apps/onboarding/pages/recover-from-secret-phrase/index.tsx
@@ -1,29 +1,31 @@
 import React from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 
+import { Stepper } from '@onboarding/components/stepper';
+import { RouterPath } from '@onboarding/router';
+import { useTypedNavigate } from '@onboarding/router/use-typed-navigate';
+import { closeActiveTab } from '@onboarding/utils/close-active-tab';
+
+import { initVault } from '@background/redux/sagas/actions';
+import { dispatchToMainStore } from '@background/redux/utils';
+
+import { validateSecretPhrase } from '@libs/crypto';
 import {
+  ErrorPath,
   HeaderSubmenuBarNavLink,
   LayoutTab,
   TabFooterContainer,
-  TabHeaderContainer
-} from '@src/libs/layout';
-import { createErrorLocationState, ErrorPath } from '@src/libs/layout/error';
-import { Button } from '@src/libs/ui';
+  TabHeaderContainer,
+  createErrorLocationState
+} from '@libs/layout';
+import { Button } from '@libs/ui/components';
+import { calculateSubmitButtonDisabled } from '@libs/ui/forms/get-submit-button-state-from-validation';
 import {
   RecoverSecretPhraseFormValues,
   useRecoverFromSecretPhraseForm
-} from '@src/libs/ui/forms/recover-from-secret-phrase';
-
-import { Stepper } from '@src/apps/onboarding/components/stepper';
-import { RouterPath } from '@src/apps/onboarding/router';
-import { useTypedNavigate } from '@src/apps/onboarding/router/use-typed-navigate';
-import { closeActiveTab } from '@src/apps/onboarding/utils/close-active-tab';
+} from '@libs/ui/forms/recover-from-secret-phrase';
 
 import { RecoverFromSecretPhrasePageContent } from './content';
-import { dispatchToMainStore } from '@src/background/redux/utils';
-import { calculateSubmitButtonDisabled } from '@src/libs/ui/forms/get-submit-button-state-from-validation';
-import { validateSecretPhrase } from '@src/libs/crypto';
-import { initVault } from '@src/background/redux/sagas/actions';
 
 export function RecoverFromSecretPhrasePage() {
   const navigate = useTypedNavigate();
diff --git a/src/apps/onboarding/pages/reset-wallet/content.tsx b/src/apps/onboarding/pages/reset-wallet/content.tsx
index 0586389e4..5d0990d76 100644
--- a/src/apps/onboarding/pages/reset-wallet/content.tsx
+++ b/src/apps/onboarding/pages/reset-wallet/content.tsx
@@ -1,8 +1,8 @@
 import React from 'react';
-import { useTranslation, Trans } from 'react-i18next';
+import { Trans, useTranslation } from 'react-i18next';
 
 import { TabPageContainer, TabTextContainer } from '@libs/layout';
-import { Typography } from '@libs/ui';
+import { Typography } from '@libs/ui/components';
 
 // Design of this page is temporary. Should be changed after it will be done in Figma
 
diff --git a/src/apps/onboarding/pages/reset-wallet/index.tsx b/src/apps/onboarding/pages/reset-wallet/index.tsx
index 045e57c25..1e5eaeb27 100644
--- a/src/apps/onboarding/pages/reset-wallet/index.tsx
+++ b/src/apps/onboarding/pages/reset-wallet/index.tsx
@@ -1,14 +1,15 @@
 import React, { useState } from 'react';
-import { useTranslation, Trans } from 'react-i18next';
+import { Trans, useTranslation } from 'react-i18next';
 
-import { LayoutTab, TabFooterContainer } from '@libs/layout';
-import { Button, Checkbox } from '@libs/ui';
+import { useTypedNavigate } from '@onboarding/router';
 
+import { resetVault } from '@background/redux/sagas/actions';
 import { dispatchToMainStore } from '@background/redux/utils';
 
+import { LayoutTab, TabFooterContainer } from '@libs/layout';
+import { Button, Checkbox } from '@libs/ui/components';
+
 import { ResetWalletPageContent } from './content';
-import { useTypedNavigate } from '@src/apps/onboarding/router';
-import { resetVault } from '@src/background/redux/sagas/actions';
 
 // Design of this page is temporary. Should be changed after it will be done in Figma
 
diff --git a/src/apps/onboarding/pages/unlock-wallet/content.tsx b/src/apps/onboarding/pages/unlock-wallet/content.tsx
index efd610faf..f83f72280 100644
--- a/src/apps/onboarding/pages/unlock-wallet/content.tsx
+++ b/src/apps/onboarding/pages/unlock-wallet/content.tsx
@@ -1,22 +1,22 @@
 import React, { useState } from 'react';
-import { Trans, useTranslation } from 'react-i18next';
 import { UseFormRegister } from 'react-hook-form';
+import { Trans, useTranslation } from 'react-i18next';
 import styled from 'styled-components';
 
 import {
+  InputsContainer,
   TabPageContainer as TabPageContainerBase,
-  TabTextContainer,
-  InputsContainer
-} from '@src/libs/layout';
+  TabTextContainer
+} from '@libs/layout';
 import {
-  PasswordInputType,
   Input,
-  Typography,
   InputValidationType,
+  PasswordInputType,
   PasswordVisibilityIcon,
-  SvgIcon
-} from '@libs/ui';
-import { UnlockWalletFormValues } from '@src/libs/ui/forms/unlock-wallet';
+  SvgIcon,
+  Typography
+} from '@libs/ui/components';
+import { UnlockWalletFormValues } from '@libs/ui/forms/unlock-wallet';
 
 // Design of this page is temporary. Should be changed after it will be done in Figma
 const TabPageContainer = styled.div`
diff --git a/src/apps/onboarding/pages/unlock-wallet/index.tsx b/src/apps/onboarding/pages/unlock-wallet/index.tsx
index abb93202c..7f49ca499 100644
--- a/src/apps/onboarding/pages/unlock-wallet/index.tsx
+++ b/src/apps/onboarding/pages/unlock-wallet/index.tsx
@@ -1,25 +1,26 @@
 import React from 'react';
-import { useSelector } from 'react-redux';
 import { Trans, useTranslation } from 'react-i18next';
+import { useSelector } from 'react-redux';
 import styled from 'styled-components';
 
+import { UnlockWalletPageContent } from '@onboarding/pages/unlock-wallet/content';
+import { RouterPath, useTypedNavigate } from '@onboarding/router';
+
+import {
+  selectPasswordHash,
+  selectPasswordSaltHash
+} from '@background/redux/keys/selectors';
+import { loginRetryCountReseted } from '@background/redux/login-retry-count/actions';
+import { selectLoginRetryCount } from '@background/redux/login-retry-count/selectors';
+import { dispatchToMainStore } from '@background/redux/utils';
+
 import {
   LayoutTab,
   TabFooterContainer as TabFooterContainerBase
 } from '@libs/layout';
-import { Button } from '@src/libs/ui';
+import { Button } from '@libs/ui/components';
 import { useUnlockWalletForm } from '@libs/ui/forms/unlock-wallet';
 
-import { RouterPath, useTypedNavigate } from '@src/apps/onboarding/router';
-import { UnlockWalletPageContent } from '@src/apps/onboarding/pages/unlock-wallet/content';
-import {
-  selectPasswordHash,
-  selectPasswordSaltHash
-} from '@src/background/redux/keys/selectors';
-import { selectLoginRetryCount } from '@src/background/redux/login-retry-count/selectors';
-import { dispatchToMainStore } from '@src/background/redux/utils';
-import { loginRetryCountReseted } from '@src/background/redux/login-retry-count/actions';
-
 // Design of this page is temporary. Should be changed after it will be done in Figma
 const TabFooterContainer = styled(TabFooterContainerBase)`
   margin-top: 0;
diff --git a/src/apps/onboarding/pages/welcome/content.tsx b/src/apps/onboarding/pages/welcome/content.tsx
index 0c775d25c..494eff12c 100644
--- a/src/apps/onboarding/pages/welcome/content.tsx
+++ b/src/apps/onboarding/pages/welcome/content.tsx
@@ -1,8 +1,8 @@
 import React from 'react';
-import { useTranslation, Trans } from 'react-i18next';
+import { Trans, useTranslation } from 'react-i18next';
 
-import { SvgIcon, Typography } from '@libs/ui';
-import { TabPageContainer, TabTextContainer } from '@src/libs/layout';
+import { TabPageContainer, TabTextContainer } from '@libs/layout';
+import { SvgIcon, Typography } from '@libs/ui/components';
 
 export function WelcomePageContent() {
   const { t } = useTranslation();
diff --git a/src/apps/onboarding/pages/welcome/index.tsx b/src/apps/onboarding/pages/welcome/index.tsx
index 27e30f387..a88b7ea70 100644
--- a/src/apps/onboarding/pages/welcome/index.tsx
+++ b/src/apps/onboarding/pages/welcome/index.tsx
@@ -1,15 +1,16 @@
 import React from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 
-import { Button } from '@libs/ui';
-import { LayoutTab, TabFooterContainer } from '@src/libs/layout';
+import { RouterPath } from '@onboarding/router';
+import { useTypedNavigate } from '@onboarding/router/use-typed-navigate';
 
-import { useTypedNavigate } from '@src/apps/onboarding/router/use-typed-navigate';
-import { RouterPath } from '@src/apps/onboarding/router';
+import { resetVault } from '@background/redux/sagas/actions';
+import { dispatchToMainStore } from '@background/redux/utils';
+
+import { LayoutTab, TabFooterContainer } from '@libs/layout';
+import { Button } from '@libs/ui/components';
 
 import { WelcomePageContent } from './content';
-import { dispatchToMainStore } from '@src/background/redux/utils';
-import { resetVault } from '@src/background/redux/sagas/actions';
 
 export function WelcomePage() {
   const navigate = useTypedNavigate();
diff --git a/src/apps/onboarding/pages/write-down-secret-phrase/content.tsx b/src/apps/onboarding/pages/write-down-secret-phrase/content.tsx
index 66b6da6a3..9099e306d 100644
--- a/src/apps/onboarding/pages/write-down-secret-phrase/content.tsx
+++ b/src/apps/onboarding/pages/write-down-secret-phrase/content.tsx
@@ -1,13 +1,13 @@
 import React from 'react';
-import { useTranslation, Trans } from 'react-i18next';
+import { Trans, useTranslation } from 'react-i18next';
 
-import { TabPageContainer, TabTextContainer } from '@src/libs/layout';
+import { SecretPhrase } from '@libs/crypto';
+import { TabPageContainer, TabTextContainer } from '@libs/layout';
 import {
-  Typography,
+  CopySecretPhraseBar,
   SecretPhraseWordsView,
-  CopySecretPhraseBar
-} from '@src/libs/ui';
-import { SecretPhrase } from '@src/libs/crypto';
+  Typography
+} from '@libs/ui/components';
 
 interface WriteDownSecretPhrasePageContentProps {
   phrase: SecretPhrase;
diff --git a/src/apps/onboarding/pages/write-down-secret-phrase/index.tsx b/src/apps/onboarding/pages/write-down-secret-phrase/index.tsx
index edda27653..8ae391daf 100644
--- a/src/apps/onboarding/pages/write-down-secret-phrase/index.tsx
+++ b/src/apps/onboarding/pages/write-down-secret-phrase/index.tsx
@@ -2,18 +2,18 @@ import React, { useState } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 import { Navigate } from 'react-router-dom';
 
+import { Stepper } from '@onboarding/components/stepper';
+import { RouterPath } from '@onboarding/router';
+import { useTypedNavigate } from '@onboarding/router/use-typed-navigate';
+
+import { SecretPhrase } from '@libs/crypto';
 import {
+  HeaderSubmenuBarNavLink,
   LayoutTab,
-  TabHeaderContainer,
   TabFooterContainer,
-  HeaderSubmenuBarNavLink
-} from '@src/libs/layout';
-import { Button, Checkbox } from '@src/libs/ui';
-import { SecretPhrase } from '@src/libs/crypto';
-
-import { RouterPath } from '@src/apps/onboarding/router';
-import { useTypedNavigate } from '@src/apps/onboarding/router/use-typed-navigate';
-import { Stepper } from '@src/apps/onboarding/components/stepper';
+  TabHeaderContainer
+} from '@libs/layout';
+import { Button, Checkbox } from '@libs/ui/components';
 
 import { WriteDownSecretPhrasePageContent } from './content';
 
diff --git a/src/apps/onboarding/router/types.ts b/src/apps/onboarding/router/types.ts
index 0d58a7d59..5518388f2 100644
--- a/src/apps/onboarding/router/types.ts
+++ b/src/apps/onboarding/router/types.ts
@@ -1,3 +1,3 @@
-import { ErrorLocationState } from '@layout/error/types';
+import { ErrorLocationState } from '@libs/layout';
 
 export interface LocationState extends ErrorLocationState {}
diff --git a/src/apps/onboarding/router/use-typed-location.ts b/src/apps/onboarding/router/use-typed-location.ts
index a47c062ba..77e064b46 100644
--- a/src/apps/onboarding/router/use-typed-location.ts
+++ b/src/apps/onboarding/router/use-typed-location.ts
@@ -1,5 +1,6 @@
 import { useLocation } from 'react-router-dom';
-import { LocationState } from '@src/apps/onboarding/router/types';
+
+import { LocationState } from '@onboarding/router/types';
 
 export function useTypedLocation() {
   const location = useLocation();
diff --git a/src/apps/onboarding/router/use-typed-navigate.ts b/src/apps/onboarding/router/use-typed-navigate.ts
index 8b1a6b974..03b7d3dab 100644
--- a/src/apps/onboarding/router/use-typed-navigate.ts
+++ b/src/apps/onboarding/router/use-typed-navigate.ts
@@ -1,4 +1,5 @@
 import { To, useNavigate } from 'react-router-dom';
+
 import { LocationState } from './types';
 
 export function useTypedNavigate() {
diff --git a/src/apps/onboarding/utils/close-active-tab.ts b/src/apps/onboarding/utils/close-active-tab.ts
index 8ce9c8ab5..155c3475e 100644
--- a/src/apps/onboarding/utils/close-active-tab.ts
+++ b/src/apps/onboarding/utils/close-active-tab.ts
@@ -1,13 +1,13 @@
-import browser from 'webextension-polyfill';
+import { tabs } from 'webextension-polyfill';
 
 export async function closeActiveTab() {
   try {
-    const tabs = await browser.tabs.query({
+    const tabsList = await tabs.query({
       active: true,
       currentWindow: true
     });
-    if (tabs.length > 0 && tabs[0].id != null) {
-      await browser.tabs.remove(tabs[0].id);
+    if (tabsList.length > 0 && tabsList[0].id != null) {
+      await tabs.remove(tabsList[0].id);
     }
   } catch (e) {
     console.error(e);
diff --git a/src/apps/popup/app-router.tsx b/src/apps/popup/app-router.tsx
index 5f6a3ecce..9184113b1 100644
--- a/src/apps/popup/app-router.tsx
+++ b/src/apps/popup/app-router.tsx
@@ -1,47 +1,49 @@
-import '@libs/i18n/i18n';
-
 import React from 'react';
 import { useSelector } from 'react-redux';
 import { HashRouter, Route, Routes } from 'react-router-dom';
 
-import { HeaderSubmenuBarNavLink, PopupLayout } from '@libs/layout';
-import { PopupHeader } from '@libs/layout/header';
+import { useUserActivityTracker } from '@src/hooks/use-user-activity-tracker';
 
+import { AccountSettingsPage } from '@popup/pages/account-settings';
+import { ActivityDetailsPage } from '@popup/pages/activity-details';
+import { AddContactPage } from '@popup/pages/add-contact';
+import { BackupSecretPhrasePage } from '@popup/pages/backup-secret-phrase';
+import { ChangePasswordPage } from '@popup/pages/change-password';
+import { ConnectAnotherAccountPageContent } from '@popup/pages/connect-another-account';
+import { ConnectedSitesPage } from '@popup/pages/connected-sites';
+import { ContactDetailsPage } from '@popup/pages/contact-details';
+import { ContactsBookPage } from '@popup/pages/contacts';
+import { CreateAccountPage } from '@popup/pages/create-account';
+import { DownloadSecretKeysPage } from '@popup/pages/download-secret-keys';
+import { DownloadedSecretKeysPage } from '@popup/pages/downloaded-secret-keys';
 import { HomePageContent } from '@popup/pages/home';
 import { NavigationMenuPageContent } from '@popup/pages/navigation-menu';
-import { TimeoutPageContent } from '@popup/pages/timeout';
-import { ConnectAnotherAccountPageContent } from '@popup/pages/connect-another-account';
+import { NftDetailsPage } from '@popup/pages/nft-details';
 import { NoConnectedAccountPageContent } from '@popup/pages/no-connected-account';
-import { ConnectedSitesPage } from '@popup/pages/connected-sites';
-import { AccountSettingsPage } from '@popup/pages/account-settings';
+import { ReceivePage } from '@popup/pages/receive';
 import { RemoveAccountPageContent } from '@popup/pages/remove-account';
 import { RenameAccountPageContent } from '@popup/pages/rename-account';
-import { BackupSecretPhrasePage } from '@popup/pages/backup-secret-phrase';
-import { CreateAccountPage } from '@src/apps/popup/pages/create-account';
-import { DownloadSecretKeysPage } from '@popup/pages/download-secret-keys';
-import { DownloadedSecretKeysPage } from '@popup/pages/downloaded-secret-keys';
-
+import { StakesPage } from '@popup/pages/stakes';
+import { TimeoutPageContent } from '@popup/pages/timeout';
+import { TokenDetailPage } from '@popup/pages/token-details';
+import { TransferPage } from '@popup/pages/transfer';
+import { TransferNftPage } from '@popup/pages/transfer-nft';
+import { WalletQrCodePage } from '@popup/pages/wallet-qr-code';
 import { RouterPath, useTypedLocation, useTypedNavigate } from '@popup/router';
 
+import { selectKeysDoesExist } from '@background/redux/keys/selectors';
+import { selectVaultIsLocked } from '@background/redux/session/selectors';
 import { selectVaultHasAccounts } from '@background/redux/vault/selectors';
 
-import { useUserActivityTracker } from '@src/hooks/use-user-activity-tracker';
-import { selectVaultIsLocked } from '@src/background/redux/session/selectors';
-import { selectKeysDoesExist } from '@src/background/redux/keys/selectors';
-import { LockedRouter } from '@src/libs/layout/locked-router';
-import { TransferPage } from '@popup/pages/transfer';
-import { TokenDetailPage } from 'src/apps/popup/pages/token-details';
-import { ActivityDetailsPage } from '@popup/pages/activity-details';
-import { ReceivePage } from '@popup/pages/receive';
-import { NftDetailsPage } from '@popup/pages/nft-details';
-import { WalletQrCodePage } from '@popup/pages/wallet-qr-code';
-import { TransferNftPage } from '@popup/pages/transfer-nft';
-import { ChangePasswordPage } from '@popup/pages/change-password';
-import { StakesPage } from '@popup/pages/stakes';
-import { ErrorPath, WindowErrorPage } from '@layout/error';
-import { ContactsBookPage } from '@popup/pages/contacts';
-import { AddContactPage } from '@popup/pages/add-contact';
-import { ContactDetailsPage } from '@popup/pages/contact-details';
+import '@libs/i18n/i18n';
+import {
+  ErrorPath,
+  HeaderPopup,
+  HeaderSubmenuBarNavLink,
+  LockedRouter,
+  PopupLayout,
+  WindowErrorPage
+} from '@libs/layout';
 
 export function AppRouter() {
   const isLocked = useSelector(selectVaultIsLocked);
@@ -77,7 +79,7 @@ function AppRoutes() {
           element={
             <PopupLayout
               renderHeader={() => (
-                <PopupHeader
+                <HeaderPopup
                   withConnectionStatus
                   withMenu
                   withNetworkSwitcher
@@ -98,7 +100,7 @@ function AppRoutes() {
         element={
           <PopupLayout
             renderHeader={() => (
-              <PopupHeader withNetworkSwitcher withMenu withConnectionStatus />
+              <HeaderPopup withNetworkSwitcher withMenu withConnectionStatus />
             )}
             renderContent={() => <HomePageContent />}
           />
@@ -114,7 +116,7 @@ function AppRoutes() {
         element={
           <PopupLayout
             renderHeader={() => (
-              <PopupHeader
+              <HeaderPopup
                 withNetworkSwitcher
                 withMenu
                 withConnectionStatus
@@ -132,7 +134,7 @@ function AppRoutes() {
         element={
           <PopupLayout
             renderHeader={() => (
-              <PopupHeader
+              <HeaderPopup
                 withNetworkSwitcher
                 withMenu
                 withConnectionStatus
@@ -150,7 +152,7 @@ function AppRoutes() {
         element={
           <PopupLayout
             renderHeader={() => (
-              <PopupHeader
+              <HeaderPopup
                 withNetworkSwitcher
                 withMenu
                 withConnectionStatus
@@ -168,7 +170,7 @@ function AppRoutes() {
         element={
           <PopupLayout
             renderHeader={() => (
-              <PopupHeader withNetworkSwitcher withMenu withConnectionStatus />
+              <HeaderPopup withNetworkSwitcher withMenu withConnectionStatus />
             )}
             renderContent={() => <NoConnectedAccountPageContent />}
           />
@@ -179,7 +181,7 @@ function AppRoutes() {
         element={
           <PopupLayout
             renderHeader={() => (
-              <PopupHeader
+              <HeaderPopup
                 withMenu
                 withNetworkSwitcher
                 withConnectionStatus
@@ -197,7 +199,7 @@ function AppRoutes() {
         element={
           <PopupLayout
             renderHeader={() => (
-              <PopupHeader
+              <HeaderPopup
                 withNetworkSwitcher
                 withMenu
                 withConnectionStatus
@@ -215,7 +217,7 @@ function AppRoutes() {
         element={
           <PopupLayout
             renderHeader={() => (
-              <PopupHeader
+              <HeaderPopup
                 withNetworkSwitcher
                 withMenu
                 withConnectionStatus
@@ -259,6 +261,7 @@ function AppRoutes() {
       />
       <Route path={RouterPath.Delegate} element={<StakesPage />} />
       <Route path={RouterPath.Undelegate} element={<StakesPage />} />
+      <Route path={RouterPath.Redelegate} element={<StakesPage />} />
       <Route
         path={ErrorPath}
         element={
diff --git a/src/apps/popup/hooks/use-account-actions-with-events.ts b/src/apps/popup/hooks/use-account-actions-with-events.ts
index 71885f2fa..73f2a4b8a 100644
--- a/src/apps/popup/hooks/use-account-actions-with-events.ts
+++ b/src/apps/popup/hooks/use-account-actions-with-events.ts
@@ -1,28 +1,31 @@
 import { useCallback } from 'react';
 import { useSelector } from 'react-redux';
 
-import { Account } from '@src/background/redux/vault/types';
+import { getUrlOrigin } from '@src/utils';
+
+import { accountInfoReset } from '@background/redux/account-info/actions';
+import { selectVaultIsLocked } from '@background/redux/session/selectors';
+import { dispatchToMainStore } from '@background/redux/utils';
 import {
+  accountDisconnected,
   activeAccountChanged,
+  anotherAccountConnected,
   siteConnected,
-  accountDisconnected,
-  siteDisconnected,
-  anotherAccountConnected
-} from '@src/background/redux/vault/actions';
+  siteDisconnected
+} from '@background/redux/vault/actions';
 import {
   selectAccountNamesByOriginDict,
   selectVaultAccounts,
   selectVaultActiveAccount
-} from '@src/background/redux/vault/selectors';
-import { sdkEvent } from '@src/content/sdk-event';
-import { dispatchToMainStore } from '@background/redux/utils';
-import { selectVaultIsLocked } from '@src/background/redux/session/selectors';
+} from '@background/redux/vault/selectors';
 import {
   emitSdkEventToActiveTabs,
   emitSdkEventToActiveTabsWithOrigin
-} from '@src/background/utils';
-import { getUrlOrigin } from '@src/utils';
-import { accountInfoReset } from '@background/redux/account-info/actions';
+} from '@background/utils';
+
+import { sdkEvent } from '@content/sdk-event';
+
+import { Account } from '@libs/types/account';
 
 export function findAccountInAListClosestToGivenAccountFilteredByNames(
   accounts: Account[],
diff --git a/src/apps/popup/index.html b/src/apps/popup/index.html
index bbcea13ea..c0fe67ddd 100644
--- a/src/apps/popup/index.html
+++ b/src/apps/popup/index.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <meta
       http-equiv="Content-Security-Policy"
-      content="default-src 'none'; object-src 'none'; base-uri 'none'; form-action 'none'; script-src 'self'; style-src 'unsafe-inline'; img-src https: data:; media-src https: data:; connect-src https://event-store-api-clarity-testnet.make.services https://event-store-api-clarity-mainnet.make.services https://casper-assets.s3.amazonaws.com/ https://image-proxy-cdn.make.services/ https://casper-testnet-node-proxy.make.services/rpc https://casper-node-proxy.make.services/rpc"
+      content="default-src 'none'; object-src 'none'; base-uri 'none'; form-action 'none'; script-src 'self'; style-src 'unsafe-inline'; img-src https: data:; media-src https: data:; connect-src https://event-store-api-clarity-testnet.make.services https://event-store-api-clarity-mainnet.make.services https://casper-assets.s3.amazonaws.com/ https://image-proxy-cdn.make.services/ https://casper-testnet-node-proxy.make.services/rpc https://casper-node-proxy.make.services/rpc https://cspr-wallet-api.dev.make.services/ https://api.casperwallet.io/"
     />
 
     <link rel="stylesheet" href="/assets/fonts/fonts.css" />
diff --git a/src/apps/popup/index.tsx b/src/apps/popup/index.tsx
index c5adf3aed..b985b4ada 100644
--- a/src/apps/popup/index.tsx
+++ b/src/apps/popup/index.tsx
@@ -1,27 +1,27 @@
 import React, { Suspense, useState } from 'react';
 import { render } from 'react-dom';
+// skeleton styles
+import 'react-loading-skeleton/dist/skeleton.css';
 import { Provider as ReduxProvider } from 'react-redux';
 import { ThemeProvider } from 'styled-components';
 
-import { darkTheme, GlobalStyle, lightTheme } from '@libs/ui';
-import { ErrorBoundary } from '@src/libs/layout/error';
-import { useSubscribeToRedux } from '@src/hooks/use-subscribe-to-redux';
-import {
-  createMainStoreReplica,
-  dispatchToMainStore,
-  PopupState
-} from '@background/redux/utils';
-import { popupWindowInit } from '@background/redux/windowManagement/actions';
+import { isSafariBuild } from '@src/utils';
+
+import { createMainStoreReplica } from '@background/redux/get-main-store';
+import { themeModeSettingChanged } from '@background/redux/settings/actions';
 import { selectThemeModeSetting } from '@background/redux/settings/selectors';
 import { ThemeMode } from '@background/redux/settings/types';
-import { useSystemThemeDetector } from '@src/hooks';
-import { themeModeSettingChanged } from '@background/redux/settings/actions';
-import { isSafariBuild } from '@src/utils';
+import { PopupState } from '@background/redux/types';
+import { dispatchToMainStore } from '@background/redux/utils';
+import { popupWindowInit } from '@background/redux/windowManagement/actions';
 
-import { AppRouter } from './app-router';
+import { useSubscribeToRedux } from '@hooks/use-subscribe-to-redux';
+import { useSystemThemeDetector } from '@hooks/use-system-theme-detector';
 
-// skeleton styles
-import 'react-loading-skeleton/dist/skeleton.css';
+import { ErrorBoundary } from '@libs/layout';
+import { GlobalStyle, darkTheme, lightTheme } from '@libs/ui';
+
+import { AppRouter } from './app-router';
 
 const Tree = () => {
   const [state, setState] = useState<PopupState | null>(null);
diff --git a/src/apps/popup/pages/account-settings/content.tsx b/src/apps/popup/pages/account-settings/content.tsx
index 0c36362d7..4ade6ebe9 100644
--- a/src/apps/popup/pages/account-settings/content.tsx
+++ b/src/apps/popup/pages/account-settings/content.tsx
@@ -1,25 +1,34 @@
 import React, { useCallback } from 'react';
-import { useParams } from 'react-router-dom';
+import { Trans, useTranslation } from 'react-i18next';
 import { useSelector } from 'react-redux';
-import { RootState } from 'typesafe-actions';
+import { useParams } from 'react-router-dom';
 import styled from 'styled-components';
-import { Trans, useTranslation } from 'react-i18next';
+import { RootState } from 'typesafe-actions';
+
+import { RouterPath, useTypedNavigate } from '@popup/router';
+
+import {
+  selectVaultAccount,
+  selectVaultImportedAccounts
+} from '@background/redux/vault/selectors';
 
+import { useFetchAccountInfo } from '@hooks/use-fetch-account-info';
+
+import { getAccountHashFromPublicKey } from '@libs/entities/Account';
 import {
   ContentContainer,
   FlexColumn,
   SpacingSize,
   TileContainer,
   VerticalSpaceContainer
-} from '@src/libs/layout/containers';
-import { Hash, HashVariant, Tile, SvgIcon, Typography } from '@libs/ui';
+} from '@libs/layout';
 import {
-  selectVaultAccount,
-  selectVaultImportedAccounts
-} from '@src/background/redux/vault/selectors';
-import { RouterPath, useTypedNavigate } from '@popup/router';
-import { getAccountHashFromPublicKey } from '@libs/entities/Account';
-import { useFetchAccountInfo } from '@src/hooks';
+  Hash,
+  HashVariant,
+  SvgIcon,
+  Tile,
+  Typography
+} from '@libs/ui/components';
 
 export function AccountSettingsPageContent() {
   const { t } = useTranslation();
diff --git a/src/apps/popup/pages/account-settings/index.tsx b/src/apps/popup/pages/account-settings/index.tsx
index 61005171c..f605b4a1a 100644
--- a/src/apps/popup/pages/account-settings/index.tsx
+++ b/src/apps/popup/pages/account-settings/index.tsx
@@ -1,20 +1,23 @@
 import React from 'react';
-import { useParams } from 'react-router-dom';
-import { RootState } from 'typesafe-actions';
 import { Trans, useTranslation } from 'react-i18next';
 import { useSelector } from 'react-redux';
+import { useParams } from 'react-router-dom';
+import { RootState } from 'typesafe-actions';
+
+import { getBlockExplorerAccountUrl } from '@src/constants';
+
+import { RouterPath, useTypedNavigate } from '@popup/router';
+
+import { selectApiConfigBasedOnActiveNetwork } from '@background/redux/settings/selectors';
+import { selectVaultAccount } from '@background/redux/vault/selectors';
 
 import {
   FooterButtonsContainer,
+  HeaderPopup,
   HeaderSubmenuBarNavLink,
-  PopupHeader,
   PopupLayout
 } from '@libs/layout';
-import { Button, Link } from '@libs/ui';
-import { selectVaultAccount } from '@background/redux/vault/selectors';
-import { RouterPath, useTypedNavigate } from '@popup/router';
-import { getBlockExplorerAccountUrl } from '@src/constants';
-import { selectApiConfigBasedOnActiveNetwork } from '@src/background/redux/settings/selectors';
+import { Button, Link } from '@libs/ui/components';
 
 import {
   AccountSettingsActionsGroup,
@@ -39,7 +42,7 @@ export const AccountSettingsPage = () => {
   return (
     <PopupLayout
       renderHeader={() => (
-        <PopupHeader
+        <HeaderPopup
           withNetworkSwitcher
           withMenu
           withConnectionStatus
diff --git a/src/apps/popup/pages/activity-details/content.tsx b/src/apps/popup/pages/activity-details/content.tsx
index 619a69303..01d8d730b 100644
--- a/src/apps/popup/pages/activity-details/content.tsx
+++ b/src/apps/popup/pages/activity-details/content.tsx
@@ -1,20 +1,30 @@
 import React from 'react';
 import { Trans, useTranslation } from 'react-i18next';
-import styled from 'styled-components';
 import { useSelector } from 'react-redux';
+import styled from 'styled-components';
+
+import {
+  ActivityType,
+  ActivityTypeName,
+  AuctionManagerEntryPoint,
+  getBlockExplorerContractUrl
+} from '@src/constants';
+
+import { selectApiConfigBasedOnActiveNetwork } from '@background/redux/settings/selectors';
 
 import {
   AlignedFlexRow,
   AlignedSpaceBetweenFlexRow,
   BorderBottomPseudoElementProps,
-  borderBottomPseudoElementRules,
   ContentContainer,
   FlexColumn,
   ParagraphContainer,
   RightAlignedFlexColumn,
   SpaceBetweenFlexRow,
-  SpacingSize
+  SpacingSize,
+  borderBottomPseudoElementRules
 } from '@libs/layout';
+import { ExtendedDeploy } from '@libs/services/account-activity-service';
 import {
   Avatar,
   ContractIcon,
@@ -22,14 +32,13 @@ import {
   DeployStatus,
   Hash,
   HashVariant,
-  isPendingStatus,
   Link,
   SvgIcon,
   Tile,
   Tooltip,
-  Typography
-} from '@libs/ui';
-import { ExtendedDeploy } from '@libs/services/account-activity-service';
+  Typography,
+  isPendingStatus
+} from '@libs/ui/components';
 import {
   divideErc20Balance,
   formatCurrency,
@@ -38,14 +47,7 @@ import {
   formatTimestampAge,
   motesToCSPR,
   motesToCurrency
-} from '@libs/ui/utils/formatters';
-import {
-  getBlockExplorerContractUrl,
-  ActivityType,
-  ActivityTypeName,
-  AuctionManagerEntryPoint
-} from '@src/constants';
-import { selectApiConfigBasedOnActiveNetwork } from '@background/redux/settings/selectors';
+} from '@libs/ui/utils';
 
 interface ActivityDetailsPageContentProps {
   fromAccount?: string;
diff --git a/src/apps/popup/pages/activity-details/index.tsx b/src/apps/popup/pages/activity-details/index.tsx
index c81f5031f..10faec7c8 100644
--- a/src/apps/popup/pages/activity-details/index.tsx
+++ b/src/apps/popup/pages/activity-details/index.tsx
@@ -1,17 +1,18 @@
 import React, { useEffect, useState } from 'react';
 
+import { RouterPath, useTypedLocation, useTypedNavigate } from '@popup/router';
+
 import {
+  HeaderPopup,
   HeaderSubmenuBarNavLink,
   HeaderViewInExplorer,
-  PopupHeader,
   PopupLayout
 } from '@libs/layout';
-import { HomePageTabsId } from '@libs/ui';
-import { RouterPath, useTypedLocation, useTypedNavigate } from '@popup/router';
 import {
-  dispatchFetchExtendedDeploysInfo,
-  ExtendedDeploy
+  ExtendedDeploy,
+  dispatchFetchExtendedDeploysInfo
 } from '@libs/services/account-activity-service';
+import { HomePageTabsId } from '@libs/ui/components';
 
 import { ActivityDetailsPageContent } from './content';
 
@@ -42,7 +43,7 @@ export const ActivityDetailsPage = () => {
   return (
     <PopupLayout
       renderHeader={() => (
-        <PopupHeader
+        <HeaderPopup
           withNetworkSwitcher
           withMenu
           withConnectionStatus
diff --git a/src/apps/popup/pages/add-contact/content.tsx b/src/apps/popup/pages/add-contact/content.tsx
index 945888e68..d9f597122 100644
--- a/src/apps/popup/pages/add-contact/content.tsx
+++ b/src/apps/popup/pages/add-contact/content.tsx
@@ -14,7 +14,7 @@ import {
   Input,
   TextArea,
   Typography
-} from '@libs/ui';
+} from '@libs/ui/components';
 import { ContactFromValues } from '@libs/ui/forms/contact';
 
 interface AddContactPageContentProps {
@@ -49,7 +49,7 @@ export const AddContactPageContent = ({
         >
           <TextArea
             {...register('publicKey')}
-            placeholder={t('0x')}
+            placeholder={t('Public key')}
             type="captionHash"
           />
         </FormField>
diff --git a/src/apps/popup/pages/add-contact/index.tsx b/src/apps/popup/pages/add-contact/index.tsx
index eaba87f3d..84560be41 100644
--- a/src/apps/popup/pages/add-contact/index.tsx
+++ b/src/apps/popup/pages/add-contact/index.tsx
@@ -2,21 +2,23 @@ import React, { useEffect, useState } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 import { useSelector } from 'react-redux';
 
+import { AddContactPageContent } from '@popup/pages/add-contact/content';
+import { SuccessScreen } from '@popup/pages/add-contact/success-screen';
+import { RouterPath, useTypedLocation, useTypedNavigate } from '@popup/router';
+
+import { newContactAdded } from '@background/redux/contacts/actions';
+import { selectAllContactsNames } from '@background/redux/contacts/selectors';
+import { dispatchToMainStore } from '@background/redux/utils';
+
 import {
   FooterButtonsContainer,
+  HeaderPopup,
   HeaderSubmenuBarNavLink,
-  PopupHeader,
   PopupLayout
 } from '@libs/layout';
-import { Button } from '@libs/ui';
-import { AddContactPageContent } from '@popup/pages/add-contact/content';
+import { Button } from '@libs/ui/components';
 import { ContactFromValues, useContactForm } from '@libs/ui/forms/contact';
-import { selectAllContactsNames } from '@background/redux/contacts/selectors';
 import { calculateSubmitButtonDisabled } from '@libs/ui/forms/get-submit-button-state-from-validation';
-import { dispatchToMainStore } from '@background/redux/utils';
-import { newContactAdded } from '@background/redux/contacts/actions';
-import { RouterPath, useTypedLocation, useTypedNavigate } from '@popup/router';
-import { SuccessScreen } from '@popup/pages/add-contact/success-screen';
 
 export const AddContactPage = () => {
   const [showSuccessScreen, setShowSuccessScreen] = useState(false);
@@ -65,7 +67,7 @@ export const AddContactPage = () => {
   return (
     <PopupLayout
       renderHeader={() => (
-        <PopupHeader
+        <HeaderPopup
           withNetworkSwitcher
           withMenu
           withConnectionStatus
diff --git a/src/apps/popup/pages/add-contact/success-screen.tsx b/src/apps/popup/pages/add-contact/success-screen.tsx
index e7fb6a22c..dbd0a83da 100644
--- a/src/apps/popup/pages/add-contact/success-screen.tsx
+++ b/src/apps/popup/pages/add-contact/success-screen.tsx
@@ -1,14 +1,15 @@
 import React, { useEffect } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 
+import { RouterPath, useTypedNavigate } from '@popup/router';
+
 import {
   ContentContainer,
   ParagraphContainer,
   SpacingSize,
   VerticalSpaceContainer
 } from '@libs/layout';
-import { SvgIcon, Typography } from '@libs/ui';
-import { RouterPath, useTypedNavigate } from '@popup/router';
+import { SvgIcon, Typography } from '@libs/ui/components';
 
 interface SuccessScreenProps {
   needToRedirectToHome: boolean;
diff --git a/src/apps/popup/pages/backup-secret-phrase/content.tsx b/src/apps/popup/pages/backup-secret-phrase/content.tsx
index 8aca2c86e..d477f5e9c 100644
--- a/src/apps/popup/pages/backup-secret-phrase/content.tsx
+++ b/src/apps/popup/pages/backup-secret-phrase/content.tsx
@@ -1,20 +1,21 @@
 import React from 'react';
-import { useTranslation, Trans } from 'react-i18next';
+import { Trans, useTranslation } from 'react-i18next';
 import { useSelector } from 'react-redux';
 
+import { selectSecretPhrase } from '@background/redux/vault/selectors';
+
 import {
   ContentContainer,
   ParagraphContainer,
   SpacingSize,
   VerticalSpaceContainer
-} from '@src/libs/layout';
+} from '@libs/layout';
 import {
-  Typography,
-  SecretPhraseWordsView,
   CopySecretPhraseBar,
-  TextList
-} from '@src/libs/ui';
-import { selectSecretPhrase } from '@src/background/redux/vault/selectors';
+  SecretPhraseWordsView,
+  TextList,
+  Typography
+} from '@libs/ui/components';
 
 export function BackupSecretPhrasePageContent() {
   const { t } = useTranslation();
diff --git a/src/apps/popup/pages/backup-secret-phrase/index.tsx b/src/apps/popup/pages/backup-secret-phrase/index.tsx
index 0b09308ca..ad293842d 100644
--- a/src/apps/popup/pages/backup-secret-phrase/index.tsx
+++ b/src/apps/popup/pages/backup-secret-phrase/index.tsx
@@ -1,16 +1,16 @@
 import React, { useCallback, useState } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 
+import { PasswordProtectionPage } from '@popup/pages/password-protection-page';
+import { RouterPath, useTypedNavigate } from '@popup/router';
+
 import {
-  PopupLayout,
-  PopupHeader,
+  FooterButtonsContainer,
+  HeaderPopup,
   HeaderSubmenuBarNavLink,
-  FooterButtonsContainer
-} from '@src/libs/layout';
-import { Button } from '@libs/ui';
-
-import { RouterPath, useTypedNavigate } from '@popup/router';
-import { PasswordProtectionPage } from '@popup/pages/password-protection-page';
+  PopupLayout
+} from '@libs/layout';
+import { Button } from '@libs/ui/components';
 
 import { BackupSecretPhrasePageContent } from './content';
 
@@ -34,7 +34,7 @@ export function BackupSecretPhrasePage() {
   return (
     <PopupLayout
       renderHeader={() => (
-        <PopupHeader
+        <HeaderPopup
           withNetworkSwitcher
           withMenu
           withConnectionStatus
diff --git a/src/apps/popup/pages/change-password/content.tsx b/src/apps/popup/pages/change-password/content.tsx
index 0a052672b..43bdb8a44 100644
--- a/src/apps/popup/pages/change-password/content.tsx
+++ b/src/apps/popup/pages/change-password/content.tsx
@@ -6,7 +6,7 @@ import {
   ParagraphContainer,
   SpacingSize
 } from '@libs/layout';
-import { Typography } from '@libs/ui';
+import { Typography } from '@libs/ui/components';
 
 interface ChangePasswordPageContentProps {
   children: React.ReactNode;
diff --git a/src/apps/popup/pages/change-password/index.tsx b/src/apps/popup/pages/change-password/index.tsx
index 067c66cf8..9b70db059 100644
--- a/src/apps/popup/pages/change-password/index.tsx
+++ b/src/apps/popup/pages/change-password/index.tsx
@@ -1,23 +1,25 @@
 import React from 'react';
+import { useWatch } from 'react-hook-form';
 import { Trans, useTranslation } from 'react-i18next';
 
+import { ChangePasswordPageContent } from '@popup/pages/change-password/content';
+import { RouterPath, useTypedNavigate } from '@popup/router';
+
+import { changePassword } from '@background/redux/sagas/actions';
+import { dispatchToMainStore } from '@background/redux/utils';
+
 import {
   FooterButtonsContainer,
+  HeaderPopup,
   HeaderSubmenuBarNavLink,
-  PopupHeader,
   PopupLayout
 } from '@libs/layout';
-import { Button, PasswordInputs } from '@libs/ui';
+import { Button, PasswordInputs } from '@libs/ui/components';
 import {
   CreatePasswordFormValues,
   useCreatePasswordForm
 } from '@libs/ui/forms/create-password';
 import { calculateSubmitButtonDisabled } from '@libs/ui/forms/get-submit-button-state-from-validation';
-import { dispatchToMainStore } from '@background/redux/utils';
-import { changePassword } from '@background/redux/sagas/actions';
-import { RouterPath, useTypedNavigate } from '@popup/router';
-import { ChangePasswordPageContent } from '@popup/pages/change-password/content';
-import { useWatch } from 'react-hook-form';
 
 export const ChangePasswordPage = () => {
   const { t } = useTranslation();
@@ -49,7 +51,7 @@ export const ChangePasswordPage = () => {
       variant="form"
       onSubmit={handleSubmit(onSubmit)}
       renderHeader={() => (
-        <PopupHeader
+        <HeaderPopup
           withNetworkSwitcher
           withMenu
           withConnectionStatus
diff --git a/src/apps/popup/pages/connect-another-account/index.tsx b/src/apps/popup/pages/connect-another-account/index.tsx
index afd32fdff..09e860657 100644
--- a/src/apps/popup/pages/connect-another-account/index.tsx
+++ b/src/apps/popup/pages/connect-another-account/index.tsx
@@ -1,9 +1,19 @@
 import React from 'react';
+import { Trans, useTranslation } from 'react-i18next';
 import { useSelector } from 'react-redux';
 import { useParams } from 'react-router-dom';
-import { Trans, useTranslation } from 'react-i18next';
 import styled from 'styled-components';
 
+import { useAccountManager } from '@popup/hooks/use-account-actions-with-events';
+import { RouterPath, useTypedNavigate } from '@popup/router';
+
+import { selectActiveOrigin } from '@background/redux/active-origin/selectors';
+import {
+  selectConnectedAccountsWithActiveOrigin,
+  selectVaultAccounts,
+  selectVaultActiveAccount
+} from '@background/redux/vault/selectors';
+
 import {
   ContentContainer,
   LeftAlignedFlexColumn,
@@ -11,26 +21,17 @@ import {
   SpacingSize,
   TileContainer,
   VerticalSpaceContainer
-} from '@src/libs/layout';
+} from '@libs/layout';
 import {
   Button,
-  SiteFaviconBadge,
   Hash,
   HashVariant,
   List,
+  SiteFaviconBadge,
   SvgIcon,
-  Typography,
-  Tile
-} from '@libs/ui';
-
-import {
-  selectConnectedAccountsWithActiveOrigin,
-  selectVaultAccounts,
-  selectVaultActiveAccount
-} from '@src/background/redux/vault/selectors';
-import { RouterPath, useTypedNavigate } from '@popup/router';
-import { useAccountManager } from '@src/apps/popup/hooks/use-account-actions-with-events';
-import { selectActiveOrigin } from '@src/background/redux/active-origin/selectors';
+  Tile,
+  Typography
+} from '@libs/ui/components';
 
 const CentredFlexRow = styled.div`
   display: flex;
diff --git a/src/apps/popup/pages/connected-sites/index.tsx b/src/apps/popup/pages/connected-sites/index.tsx
index a32bf91b8..ec39ce68b 100644
--- a/src/apps/popup/pages/connected-sites/index.tsx
+++ b/src/apps/popup/pages/connected-sites/index.tsx
@@ -1,24 +1,23 @@
 import React from 'react';
-import { useSelector } from 'react-redux';
 import { Trans, useTranslation } from 'react-i18next';
+import { useSelector } from 'react-redux';
+
+import { useAccountManager } from '@popup/hooks/use-account-actions-with-events';
+import { SiteGroupHeader } from '@popup/pages/connected-sites/site-group-header';
+import { SiteGroupItem } from '@popup/pages/connected-sites/site-group-item';
+
+import {
+  selectAccountsByOriginDict,
+  selectSiteNameByOriginDict
+} from '@background/redux/vault/selectors';
 
-import { List, SvgIcon, Typography } from '@libs/ui';
 import {
   ContentContainer,
   IllustrationContainer,
   ParagraphContainer,
   SpacingSize
-} from '@src/libs/layout';
-
-import {
-  selectSiteNameByOriginDict,
-  selectAccountsByOriginDict
-} from '@src/background/redux/vault/selectors';
-
-import { useAccountManager } from '@src/apps/popup/hooks/use-account-actions-with-events';
-
-import { SiteGroupHeader } from '@popup/pages/connected-sites/site-group-header';
-import { SiteGroupItem } from '@popup/pages/connected-sites/site-group-item';
+} from '@libs/layout';
+import { List, SvgIcon, Typography } from '@libs/ui/components';
 
 export function ConnectedSitesPage() {
   const { t } = useTranslation();
diff --git a/src/apps/popup/pages/connected-sites/site-group-header.tsx b/src/apps/popup/pages/connected-sites/site-group-header.tsx
index d74855f9a..dd2f392f8 100644
--- a/src/apps/popup/pages/connected-sites/site-group-header.tsx
+++ b/src/apps/popup/pages/connected-sites/site-group-header.tsx
@@ -1,14 +1,14 @@
 import React from 'react';
-import { useTranslation, Trans } from 'react-i18next';
+import { Trans, useTranslation } from 'react-i18next';
 import styled from 'styled-components';
 
-import { Button, Typography } from '@src/libs/ui';
 import {
   AlignedSpaceBetweenFlexRow,
   SpaceBetweenFlexColumn,
   SpacingSize,
   VerticalSpaceContainer
-} from '@src/libs/layout';
+} from '@libs/layout';
+import { Button, Typography } from '@libs/ui/components';
 
 const SiteGroupHeaderContainer = styled(SpaceBetweenFlexColumn)`
   padding: ${({ theme }) => theme.padding[1.6]};
diff --git a/src/apps/popup/pages/connected-sites/site-group-item.tsx b/src/apps/popup/pages/connected-sites/site-group-item.tsx
index 0d540e52e..0abf2fcf1 100644
--- a/src/apps/popup/pages/connected-sites/site-group-item.tsx
+++ b/src/apps/popup/pages/connected-sites/site-group-item.tsx
@@ -1,11 +1,11 @@
 import React from 'react';
 import styled from 'styled-components';
 
-import { Hash, HashVariant, SvgIcon, Typography } from '@src/libs/ui';
 import {
   AlignedSpaceBetweenFlexRow,
   LeftAlignedFlexColumn
-} from '@src/libs/layout';
+} from '@libs/layout';
+import { Hash, HashVariant, SvgIcon, Typography } from '@libs/ui/components';
 
 const SiteGroupItemContainer = styled(AlignedSpaceBetweenFlexRow)`
   gap: 18px;
diff --git a/src/apps/popup/pages/contact-details/deleting.tsx b/src/apps/popup/pages/contact-details/deleting.tsx
index 921ce1cb0..8b20f719c 100644
--- a/src/apps/popup/pages/contact-details/deleting.tsx
+++ b/src/apps/popup/pages/contact-details/deleting.tsx
@@ -7,7 +7,7 @@ import {
   ParagraphContainer,
   SpacingSize
 } from '@libs/layout';
-import { SvgIcon, Typography } from '@libs/ui';
+import { SvgIcon, Typography } from '@libs/ui/components';
 
 export const DeleteContactPageContent = () => {
   const { t } = useTranslation();
@@ -16,7 +16,7 @@ export const DeleteContactPageContent = () => {
     <ContentContainer>
       <IllustrationContainer>
         <SvgIcon
-          src="assets/illustrations/remove-wallet.svg"
+          src="assets/illustrations/remove-account.svg"
           width={183}
           height={120}
         />
diff --git a/src/apps/popup/pages/contact-details/details.tsx b/src/apps/popup/pages/contact-details/details.tsx
index 8b58b4fa6..a26076343 100644
--- a/src/apps/popup/pages/contact-details/details.tsx
+++ b/src/apps/popup/pages/contact-details/details.tsx
@@ -1,15 +1,22 @@
 import React from 'react';
-import styled from 'styled-components';
 import { Trans, useTranslation } from 'react-i18next';
+import styled from 'styled-components';
+
+import { Contact } from '@background/redux/contacts/types';
 
 import {
   ContentContainer,
   LeftAlignedFlexColumn,
   SpacingSize
 } from '@libs/layout';
-import { Avatar, Hash, HashVariant, Tile, Typography } from '@libs/ui';
-import { formatShortTimestamp } from '@libs/ui/utils/formatters';
-import { Contact } from '@background/redux/contacts/types';
+import {
+  Avatar,
+  Hash,
+  HashVariant,
+  Tile,
+  Typography
+} from '@libs/ui/components';
+import { formatShortTimestamp } from '@libs/ui/utils';
 
 const Container = styled(LeftAlignedFlexColumn)`
   margin-top: 24px;
diff --git a/src/apps/popup/pages/contact-details/editing.tsx b/src/apps/popup/pages/contact-details/editing.tsx
index 942ddd0a0..dbb1a7c0d 100644
--- a/src/apps/popup/pages/contact-details/editing.tsx
+++ b/src/apps/popup/pages/contact-details/editing.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
-import { Trans, useTranslation } from 'react-i18next';
 import { FieldErrors, UseFormRegister } from 'react-hook-form';
+import { Trans, useTranslation } from 'react-i18next';
 
 import {
   ContentContainer,
@@ -14,7 +14,7 @@ import {
   Input,
   TextArea,
   Typography
-} from '@libs/ui';
+} from '@libs/ui/components';
 import { ContactFromValues } from '@libs/ui/forms/contact';
 
 interface EditingContactPageContentProps {
@@ -51,7 +51,7 @@ export const EditingContactPageContent = ({
         >
           <TextArea
             {...register('publicKey')}
-            placeholder={t('0x')}
+            placeholder={t('Public key')}
             type="captionHash"
           />
         </FormField>
diff --git a/src/apps/popup/pages/contact-details/index.tsx b/src/apps/popup/pages/contact-details/index.tsx
index c618ac2d0..7bfc76acb 100644
--- a/src/apps/popup/pages/contact-details/index.tsx
+++ b/src/apps/popup/pages/contact-details/index.tsx
@@ -1,37 +1,40 @@
 import React, { useCallback, useMemo, useState } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
-import { useParams } from 'react-router-dom';
 import { useSelector } from 'react-redux';
+import { useParams } from 'react-router-dom';
+import { PasswordProtectionPage } from 'src/apps/popup/pages/password-protection-page';
 
-import {
-  AlignedFlexRow,
-  FooterButtonsContainer,
-  HeaderSubmenuBarNavLink,
-  PopupHeader,
-  PopupLayout,
-  SpacingSize
-} from '@libs/layout';
-import { Button, Link, SvgIcon } from '@libs/ui';
 import { getBlockExplorerAccountUrl } from '@src/constants';
-import {
-  selectAllContacts,
-  selectAllContactsNames
-} from '@background/redux/contacts/selectors';
-import { selectApiConfigBasedOnActiveNetwork } from '@background/redux/settings/selectors';
+
+import { DeleteContactPageContent } from '@popup/pages/contact-details/deleting';
+import { ContactDetails } from '@popup/pages/contact-details/details';
+import { EditingContactPageContent } from '@popup/pages/contact-details/editing';
 import { RouterPath, useTypedNavigate } from '@popup/router';
-import { dispatchToMainStore } from '@background/redux/utils';
+
 import {
   contactRemoved,
   contactUpdated
 } from '@background/redux/contacts/actions';
-import { PasswordProtectionPage } from 'src/apps/popup/pages/password-protection-page';
+import {
+  selectAllContacts,
+  selectAllContactsNames
+} from '@background/redux/contacts/selectors';
 import { contactEditingPermissionChanged } from '@background/redux/session/actions';
 import { selectIsContactEditingAllowed } from '@background/redux/session/selectors';
-import { DeleteContactPageContent } from '@popup/pages/contact-details/deleting';
-import { ContactDetails } from '@popup/pages/contact-details/details';
-import { EditingContactPageContent } from '@popup/pages/contact-details/editing';
-import { calculateSubmitButtonDisabled } from '@libs/ui/forms/get-submit-button-state-from-validation';
+import { selectApiConfigBasedOnActiveNetwork } from '@background/redux/settings/selectors';
+import { dispatchToMainStore } from '@background/redux/utils';
+
+import {
+  AlignedFlexRow,
+  FooterButtonsContainer,
+  HeaderPopup,
+  HeaderSubmenuBarNavLink,
+  PopupLayout,
+  SpacingSize
+} from '@libs/layout';
+import { Button, Link, SvgIcon } from '@libs/ui/components';
 import { useContactForm } from '@libs/ui/forms/contact';
+import { calculateSubmitButtonDisabled } from '@libs/ui/forms/get-submit-button-state-from-validation';
 
 export const ContactDetailsPage = () => {
   const [isEditing, setIsEditing] = useState(false);
@@ -109,7 +112,7 @@ export const ContactDetailsPage = () => {
   return (
     <PopupLayout
       renderHeader={() => (
-        <PopupHeader
+        <HeaderPopup
           withNetworkSwitcher
           withMenu
           withConnectionStatus
@@ -124,11 +127,13 @@ export const ContactDetailsPage = () => {
                     onClick={openEditContact}
                     color="contentAction"
                     src="assets/icons/edit.svg"
+                    dataTestId="edit-contact-button"
                   />
                   <SvgIcon
                     onClick={openDeleteContact}
                     color="contentActionCritical"
                     src="assets/icons/delete.svg"
+                    dataTestId="delete-contact-button"
                   />
                 </AlignedFlexRow>
               )}
diff --git a/src/apps/popup/pages/contacts/content.tsx b/src/apps/popup/pages/contacts/content.tsx
index 30fa73c02..be4e10bb7 100644
--- a/src/apps/popup/pages/contacts/content.tsx
+++ b/src/apps/popup/pages/contacts/content.tsx
@@ -2,18 +2,20 @@ import React from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 import { useSelector } from 'react-redux';
 
+import { EmptyContacts } from '@popup/pages/contacts/empty-contacts';
+
+import {
+  selectAllContacts,
+  selectLastModified
+} from '@background/redux/contacts/selectors';
+
 import {
   ContentContainer,
   ParagraphContainer,
   SpacingSize
 } from '@libs/layout';
-import { List, Typography, ContactsPlate } from '@libs/ui';
-import {
-  selectAllContacts,
-  selectLastModified
-} from '@background/redux/contacts/selectors';
-import { EmptyContacts } from '@popup/pages/contacts/empty-contacts';
-import { formatShortTimestamp } from '@libs/ui/utils/formatters';
+import { ContactsPlate, List, Typography } from '@libs/ui/components';
+import { formatShortTimestamp } from '@libs/ui/utils';
 
 export const ContactsBookPageContent = () => {
   const { t } = useTranslation();
diff --git a/src/apps/popup/pages/contacts/empty-contacts.tsx b/src/apps/popup/pages/contacts/empty-contacts.tsx
index 32e65f763..56c822c5b 100644
--- a/src/apps/popup/pages/contacts/empty-contacts.tsx
+++ b/src/apps/popup/pages/contacts/empty-contacts.tsx
@@ -7,7 +7,7 @@ import {
   ParagraphContainer,
   SpacingSize
 } from '@libs/layout';
-import { SvgIcon, Typography } from '@libs/ui';
+import { SvgIcon, Typography } from '@libs/ui/components';
 
 export const EmptyContacts = () => {
   const { t } = useTranslation();
diff --git a/src/apps/popup/pages/contacts/index.tsx b/src/apps/popup/pages/contacts/index.tsx
index 043308043..0c83c2878 100644
--- a/src/apps/popup/pages/contacts/index.tsx
+++ b/src/apps/popup/pages/contacts/index.tsx
@@ -1,15 +1,16 @@
 import React from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 
+import { ContactsBookPageContent } from '@popup/pages/contacts/content';
+import { RouterPath, useTypedNavigate } from '@popup/router';
+
 import {
   FooterButtonsContainer,
+  HeaderPopup,
   HeaderSubmenuBarNavLink,
-  PopupHeader,
   PopupLayout
 } from '@libs/layout';
-import { Button } from '@libs/ui';
-import { ContactsBookPageContent } from '@popup/pages/contacts/content';
-import { RouterPath, useTypedNavigate } from '@popup/router';
+import { Button } from '@libs/ui/components';
 
 export const ContactsBookPage = () => {
   const { t } = useTranslation();
@@ -18,7 +19,7 @@ export const ContactsBookPage = () => {
   return (
     <PopupLayout
       renderHeader={() => (
-        <PopupHeader
+        <HeaderPopup
           withNetworkSwitcher
           withMenu
           withConnectionStatus
diff --git a/src/apps/popup/pages/create-account/content.tsx b/src/apps/popup/pages/create-account/content.tsx
index b4372a34d..4a1c55132 100644
--- a/src/apps/popup/pages/create-account/content.tsx
+++ b/src/apps/popup/pages/create-account/content.tsx
@@ -1,16 +1,16 @@
 import React from 'react';
 import { UseFormRegister } from 'react-hook-form';
-import { useTranslation, Trans } from 'react-i18next';
+import { Trans, useTranslation } from 'react-i18next';
 
 import {
   ContentContainer,
   IllustrationContainer,
-  ParagraphContainer,
   InputsContainer,
+  ParagraphContainer,
   SpacingSize
-} from '@src/libs/layout';
-import { Typography, Input, SvgIcon } from '@src/libs/ui';
-import { CreateAccountFormValues } from '@src/libs/ui/forms/create-account';
+} from '@libs/layout';
+import { Input, SvgIcon, Typography } from '@libs/ui/components';
+import { CreateAccountFormValues } from '@libs/ui/forms/create-account';
 
 interface CreateAccountPageContentProps {
   register: UseFormRegister<CreateAccountFormValues>;
diff --git a/src/apps/popup/pages/create-account/index.tsx b/src/apps/popup/pages/create-account/index.tsx
index 89b83e3fd..cccbe1d70 100644
--- a/src/apps/popup/pages/create-account/index.tsx
+++ b/src/apps/popup/pages/create-account/index.tsx
@@ -1,31 +1,31 @@
 import React from 'react';
+import { Trans, useTranslation } from 'react-i18next';
 import { useSelector } from 'react-redux';
-import { useTranslation, Trans } from 'react-i18next';
 
-import {
-  PopupLayout,
-  PopupHeader,
-  HeaderSubmenuBarNavLink,
-  FooterButtonsContainer
-} from '@src/libs/layout';
-import { Button } from '@src/libs/ui';
-import {
-  useCreateAccountForm,
-  getDefaultName,
-  CreateAccountFormValues
-} from '@src/libs/ui/forms/create-account';
-
-import { RouterPath, useTypedNavigate } from '@src/apps/popup/router';
+import { RouterPath, useTypedNavigate } from '@popup/router';
 
+import { createAccount } from '@background/redux/sagas/actions';
+import { dispatchToMainStore } from '@background/redux/utils';
 import {
   selectVaultAccountsNames,
   selectVaultDerivedAccounts
-} from '@src/background/redux/vault/selectors';
-import { dispatchToMainStore } from '@src/background/redux/utils';
+} from '@background/redux/vault/selectors';
 
-import { CreateAccountPageContent } from './content';
+import {
+  FooterButtonsContainer,
+  HeaderPopup,
+  HeaderSubmenuBarNavLink,
+  PopupLayout
+} from '@libs/layout';
+import { Button } from '@libs/ui/components';
+import {
+  CreateAccountFormValues,
+  getDefaultName,
+  useCreateAccountForm
+} from '@libs/ui/forms/create-account';
 import { calculateSubmitButtonDisabled } from '@libs/ui/forms/get-submit-button-state-from-validation';
-import { createAccount } from '@src/background/redux/sagas/actions';
+
+import { CreateAccountPageContent } from './content';
 
 export function CreateAccountPage() {
   const navigate = useTypedNavigate();
@@ -60,7 +60,7 @@ export function CreateAccountPage() {
       variant="form"
       onSubmit={handleSubmit(onSubmit)}
       renderHeader={() => (
-        <PopupHeader
+        <HeaderPopup
           withNetworkSwitcher
           withMenu
           withConnectionStatus
diff --git a/src/apps/popup/pages/download-secret-keys/index.tsx b/src/apps/popup/pages/download-secret-keys/index.tsx
index cfbc60431..5512a7ed1 100644
--- a/src/apps/popup/pages/download-secret-keys/index.tsx
+++ b/src/apps/popup/pages/download-secret-keys/index.tsx
@@ -1,29 +1,28 @@
 import React from 'react';
-import { useTranslation, Trans } from 'react-i18next';
+import { Trans, useTranslation } from 'react-i18next';
 import { useSelector } from 'react-redux';
 
-import {
-  HeaderSubmenuBarNavLink,
-  PopupHeader,
-  FooterButtonsContainer,
-  PopupLayout
-} from '@src/libs/layout';
-import { Button } from '@src/libs/ui';
-import { useUnlockWalletForm } from '@libs/ui/forms/unlock-wallet';
-import { calculateSubmitButtonDisabled } from '@src/libs/ui/forms/get-submit-button-state-from-validation';
-import { createAsymmetricKey } from '@src/libs/crypto/create-asymmetric-key';
+import { RouterPath, useTypedNavigate } from '@popup/router';
 
-import { UnlockProtectedPageContent } from '@layout/unlock-protected-page-content';
-
-import { RouterPath, useTypedNavigate } from '@src/apps/popup/router';
-
-import { selectVaultImportedAccounts } from '@src/background/redux/vault/selectors';
 import {
   selectPasswordHash,
   selectPasswordSaltHash
-} from '@src/background/redux/keys/selectors';
-import { dispatchToMainStore } from '@background/redux/utils';
+} from '@background/redux/keys/selectors';
 import { loginRetryCountReseted } from '@background/redux/login-retry-count/actions';
+import { dispatchToMainStore } from '@background/redux/utils';
+import { selectVaultImportedAccounts } from '@background/redux/vault/selectors';
+
+import { createAsymmetricKey } from '@libs/crypto/create-asymmetric-key';
+import {
+  FooterButtonsContainer,
+  HeaderPopup,
+  HeaderSubmenuBarNavLink,
+  PopupLayout,
+  UnlockProtectedPageContent
+} from '@libs/layout';
+import { Button } from '@libs/ui/components';
+import { calculateSubmitButtonDisabled } from '@libs/ui/forms/get-submit-button-state-from-validation';
+import { useUnlockWalletForm } from '@libs/ui/forms/unlock-wallet';
 
 import { downloadFile } from './utils';
 
@@ -82,7 +81,7 @@ export function DownloadSecretKeysPage() {
       variant="form"
       onSubmit={handleSubmit(onSubmit)}
       renderHeader={() => (
-        <PopupHeader
+        <HeaderPopup
           withNetworkSwitcher
           withMenu
           withConnectionStatus
diff --git a/src/apps/popup/pages/downloaded-secret-keys/content.tsx b/src/apps/popup/pages/downloaded-secret-keys/content.tsx
index b325baddf..9f4486cf1 100644
--- a/src/apps/popup/pages/downloaded-secret-keys/content.tsx
+++ b/src/apps/popup/pages/downloaded-secret-keys/content.tsx
@@ -1,13 +1,13 @@
 import React from 'react';
-import { useTranslation, Trans } from 'react-i18next';
+import { Trans, useTranslation } from 'react-i18next';
 
 import {
   ContentContainer,
   IllustrationContainer,
   ParagraphContainer,
   SpacingSize
-} from '@src/libs/layout';
-import { SvgIcon, Typography } from '@src/libs/ui';
+} from '@libs/layout';
+import { SvgIcon, Typography } from '@libs/ui/components';
 
 export function DownloadedSecretKeysPageContent() {
   const { t } = useTranslation();
diff --git a/src/apps/popup/pages/downloaded-secret-keys/index.tsx b/src/apps/popup/pages/downloaded-secret-keys/index.tsx
index 4083f20fb..2aab51143 100644
--- a/src/apps/popup/pages/downloaded-secret-keys/index.tsx
+++ b/src/apps/popup/pages/downloaded-secret-keys/index.tsx
@@ -1,14 +1,15 @@
 import React from 'react';
-import { useTranslation, Trans } from 'react-i18next';
+import { Trans, useTranslation } from 'react-i18next';
+
+import { RouterPath, useTypedNavigate } from '@popup/router';
 
 import {
-  PopupHeader,
   FooterButtonsContainer,
+  HeaderPopup,
   HeaderSubmenuBarNavLink,
   PopupLayout
-} from '@src/libs/layout';
-import { Button } from '@src/libs/ui';
-import { useTypedNavigate, RouterPath } from '@src/apps/popup/router';
+} from '@libs/layout';
+import { Button } from '@libs/ui/components';
 
 import { DownloadedSecretKeysPageContent } from './content';
 
@@ -18,7 +19,7 @@ export function DownloadedSecretKeysPage() {
   return (
     <PopupLayout
       renderHeader={() => (
-        <PopupHeader
+        <HeaderPopup
           withNetworkSwitcher
           withMenu
           withConnectionStatus
diff --git a/src/apps/popup/pages/home/components/account-balance/amount-bar.tsx b/src/apps/popup/pages/home/components/account-balance/amount-bar.tsx
new file mode 100644
index 000000000..63b859651
--- /dev/null
+++ b/src/apps/popup/pages/home/components/account-balance/amount-bar.tsx
@@ -0,0 +1,68 @@
+import React, { useMemo } from 'react';
+import { useSelector } from 'react-redux';
+import styled from 'styled-components';
+
+import { selectAccountBalance } from '@background/redux/account-info/selectors';
+
+import { FlexRow, SpacingSize } from '@libs/layout';
+import { ContentColor, getColorFromTheme, motesToCSPR } from '@libs/ui/utils';
+
+const Container = styled(FlexRow)`
+  height: 6px;
+`;
+
+const Filled = styled.div<{ filledWidth: number; color: ContentColor }>`
+  display: ${({ filledWidth }) => (filledWidth === 0 ? 'none' : 'block')};
+  height: 6px;
+  width: ${({ filledWidth }) => filledWidth}%;
+  background-color: ${({ theme, color }) => getColorFromTheme(theme, color)};
+  border-radius: ${({ theme }) => theme.borderRadius.base}px;
+`;
+
+function calculateLiquidPercentage(
+  amountMotes: string | null,
+  fullBalanceMotes: string | null
+) {
+  if (amountMotes != null && fullBalanceMotes != null) {
+    const current = Number(motesToCSPR(amountMotes));
+    const total = Number(motesToCSPR(fullBalanceMotes));
+
+    return (current / total) * 100;
+  }
+
+  return 0;
+}
+
+export const AmountBar = () => {
+  const balance = useSelector(selectAccountBalance);
+
+  const liquidPercentage = useMemo(
+    () =>
+      calculateLiquidPercentage(balance.liquidMotes, balance.totalBalanceMotes),
+    [balance.liquidMotes, balance.totalBalanceMotes]
+  );
+  const delegatedPercentage = useMemo(
+    () =>
+      calculateLiquidPercentage(
+        balance.delegatedMotes,
+        balance.totalBalanceMotes
+      ),
+    [balance.delegatedMotes, balance.totalBalanceMotes]
+  );
+  const undelegatingPercentage = useMemo(
+    () =>
+      calculateLiquidPercentage(
+        balance.undelegatingMotes,
+        balance.totalBalanceMotes
+      ),
+    [balance.undelegatingMotes, balance.totalBalanceMotes]
+  );
+
+  return (
+    <Container gap={SpacingSize.Tiny}>
+      <Filled filledWidth={liquidPercentage} color="contentPositive" />
+      <Filled filledWidth={delegatedPercentage} color="contentLightBlue" />
+      <Filled filledWidth={undelegatingPercentage} color="contentWarning" />
+    </Container>
+  );
+};
diff --git a/src/apps/popup/pages/home/components/account-balance/amount-row.tsx b/src/apps/popup/pages/home/components/account-balance/amount-row.tsx
new file mode 100644
index 000000000..9160dbb50
--- /dev/null
+++ b/src/apps/popup/pages/home/components/account-balance/amount-row.tsx
@@ -0,0 +1,67 @@
+import React from 'react';
+import { Trans, useTranslation } from 'react-i18next';
+import { useSelector } from 'react-redux';
+
+import { selectAccountCurrencyRate } from '@background/redux/account-info/selectors';
+
+import { AlignedSpaceBetweenFlexRow, FlexRow, SpacingSize } from '@libs/layout';
+import { Typography } from '@libs/ui/components';
+import {
+  ContentColor,
+  formatCurrency,
+  formatNumber,
+  motesToCSPR,
+  motesToCurrency
+} from '@libs/ui/utils';
+
+interface AmountRowProps {
+  text: string;
+  amountMotes: string | null;
+  color: ContentColor;
+  showFiatAmounts: boolean;
+}
+export const AmountRow = ({
+  text,
+  amountMotes,
+  color,
+  showFiatAmounts
+}: AmountRowProps) => {
+  const { t } = useTranslation();
+
+  const currencyRate = useSelector(selectAccountCurrencyRate);
+
+  const fiatAmount =
+    currencyRate != null && amountMotes != null
+      ? formatCurrency(
+          motesToCurrency(String(amountMotes), currencyRate),
+          'USD',
+          {
+            precision: 2
+          }
+        )
+      : '';
+
+  return (
+    <AlignedSpaceBetweenFlexRow>
+      <Typography type="captionRegular" color={color}>
+        <Trans t={t}>{text}</Trans>
+      </Typography>
+      {showFiatAmounts ? (
+        <Typography type="captionHash">{fiatAmount}</Typography>
+      ) : (
+        <FlexRow gap={SpacingSize.Small}>
+          <Typography type="captionHash">
+            {amountMotes == null
+              ? '-'
+              : formatNumber(motesToCSPR(amountMotes), {
+                  precision: { max: 5 }
+                })}
+          </Typography>
+          <Typography type="captionHash" color="contentSecondary">
+            CSPR
+          </Typography>
+        </FlexRow>
+      )}
+    </AlignedSpaceBetweenFlexRow>
+  );
+};
diff --git a/src/apps/popup/pages/home/components/account-balance/index.tsx b/src/apps/popup/pages/home/components/account-balance/index.tsx
new file mode 100644
index 000000000..ddc5dd09a
--- /dev/null
+++ b/src/apps/popup/pages/home/components/account-balance/index.tsx
@@ -0,0 +1,93 @@
+import React, { useState } from 'react';
+import { Trans, useTranslation } from 'react-i18next';
+import { useSelector } from 'react-redux';
+import styled from 'styled-components';
+
+import { selectAccountBalance } from '@background/redux/account-info/selectors';
+
+import { FlexColumn, FlexRow, SpacingSize } from '@libs/layout';
+import { Typography, getFontSizeBasedOnTextLength } from '@libs/ui/components';
+import { formatNumber, motesToCSPR } from '@libs/ui/utils';
+
+import { AmountBar } from './amount-bar';
+import { AmountRow } from './amount-row';
+
+const AmountRows = styled(FlexColumn)`
+  cursor: pointer;
+`;
+
+export const AccountBalance = () => {
+  const [showFiatAmounts, setShowFiatAmounts] = useState(false);
+  const { t } = useTranslation();
+
+  const balance = useSelector(selectAccountBalance);
+
+  return (
+    <FlexColumn gap={SpacingSize.Large}>
+      <FlexColumn>
+        <Typography
+          type="captionRegular"
+          color="contentSecondary"
+          loading={!balance.totalBalanceFiat}
+        >
+          <Trans t={t}>Total balance · </Trans>
+          {balance.totalBalanceFiat}
+        </Typography>
+        <FlexRow gap={SpacingSize.Small}>
+          <Typography
+            type="CSPRBold"
+            fontSize={getFontSizeBasedOnTextLength(
+              balance.totalBalanceMotes?.length || 1
+            )}
+            loading={!balance.totalBalanceMotes}
+          >
+            {balance.totalBalanceMotes == null
+              ? '-'
+              : formatNumber(motesToCSPR(balance.totalBalanceMotes), {
+                  precision: { max: 5 }
+                })}
+          </Typography>
+          <Typography
+            type="CSPRLight"
+            color="contentSecondary"
+            fontSize={getFontSizeBasedOnTextLength(
+              balance.totalBalanceMotes?.length || 1
+            )}
+          >
+            CSPR
+          </Typography>
+        </FlexRow>
+      </FlexColumn>
+      <FlexColumn gap={SpacingSize.Medium}>
+        <AmountBar />
+        <AmountRows
+          onClick={() =>
+            setShowFiatAmounts(showFiatAmounts => !showFiatAmounts)
+          }
+        >
+          <AmountRow
+            text="Liquid"
+            amountMotes={balance.liquidMotes}
+            color="contentPositive"
+            showFiatAmounts={showFiatAmounts}
+          />
+          <AmountRow
+            text="Delegated"
+            amountMotes={balance.delegatedMotes}
+            color="contentLightBlue"
+            showFiatAmounts={showFiatAmounts}
+          />
+          {balance.undelegatingMotes !== '0' &&
+            balance.undelegatingMotes != null && (
+              <AmountRow
+                text="Undelegating"
+                amountMotes={balance.undelegatingMotes}
+                color="contentWarning"
+                showFiatAmounts={showFiatAmounts}
+              />
+            )}
+        </AmountRows>
+      </FlexColumn>
+    </FlexColumn>
+  );
+};
diff --git a/src/apps/popup/pages/home/components/deploys-list/index.tsx b/src/apps/popup/pages/home/components/deploys-list/index.tsx
index def56e3b8..9cff364f9 100644
--- a/src/apps/popup/pages/home/components/deploys-list/index.tsx
+++ b/src/apps/popup/pages/home/components/deploys-list/index.tsx
@@ -1,19 +1,19 @@
 import React, { useEffect } from 'react';
-import { useSelector } from 'react-redux';
 import useInfiniteScroll from 'react-infinite-scroll-hook';
+import { useSelector } from 'react-redux';
 
 import { selectAccountDeploys } from '@background/redux/account-info/selectors';
+
+import { useFetchAccountDeploys } from '@hooks/use-fetch-account-deploys';
+import { useMapAccountDeploysListWithPendingTransactions } from '@hooks/use-map-account-deploys-list-with-pending-transactions';
+
 import { SpacingSize } from '@libs/layout';
 import {
   AccountActivityPlate,
   List,
   LoadingActivityView,
   NoActivityView
-} from '@libs/ui';
-import {
-  useFetchAccountDeploys,
-  useMapAccountDeploysListWithPendingTransactions
-} from '@src/hooks';
+} from '@libs/ui/components';
 
 export const DeploysList = () => {
   const { loadMoreDeploys, loading, hasNextPage } = useFetchAccountDeploys();
diff --git a/src/apps/popup/pages/home/components/more-buttons-modal/index.tsx b/src/apps/popup/pages/home/components/more-buttons-modal/index.tsx
index 5d834395e..db7973e3c 100644
--- a/src/apps/popup/pages/home/components/more-buttons-modal/index.tsx
+++ b/src/apps/popup/pages/home/components/more-buttons-modal/index.tsx
@@ -2,8 +2,8 @@ import React from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 import styled from 'styled-components';
 
-import { Button, Modal, SvgIcon, Typography } from '@libs/ui';
 import { CenteredFlexColumn, SpacingSize } from '@libs/layout';
+import { Button, Modal, SvgIcon, Typography } from '@libs/ui/components';
 
 import { ModalButtons } from './modal-buttons';
 
diff --git a/src/apps/popup/pages/home/components/more-buttons-modal/modal-buttons.tsx b/src/apps/popup/pages/home/components/more-buttons-modal/modal-buttons.tsx
index 4625ca82b..c917a0fa3 100644
--- a/src/apps/popup/pages/home/components/more-buttons-modal/modal-buttons.tsx
+++ b/src/apps/popup/pages/home/components/more-buttons-modal/modal-buttons.tsx
@@ -1,15 +1,19 @@
 import React from 'react';
-import { useSelector } from 'react-redux';
 import { Trans, useTranslation } from 'react-i18next';
+import { useSelector } from 'react-redux';
 import styled from 'styled-components';
 
 import { NetworkSetting } from '@src/constants';
-import { AlignedFlexRow, FlexColumn, SpacingSize } from '@libs/layout';
-import { Button, SvgIcon, Typography } from '@libs/ui';
+
 import { RouterPath, useTypedNavigate } from '@popup/router';
-import { useCasperToken } from '@src/hooks';
+
 import { selectActiveNetworkSetting } from '@background/redux/settings/selectors';
 
+import { useCasperToken } from '@hooks/use-casper-token';
+
+import { AlignedFlexRow, FlexColumn, SpacingSize } from '@libs/layout';
+import { Button, SvgIcon, Typography } from '@libs/ui/components';
+
 const ButtonContainer = styled(AlignedFlexRow)`
   cursor: pointer;
 
@@ -60,7 +64,7 @@ export const ModalButtons = ({ handleBuyWithCSPR }: ButtonsProps) => {
           )
         }
       >
-        <Button circle>
+        <Button circle style={{ padding: '8px' }}>
           <SvgIcon src="assets/icons/transfer.svg" color="contentOnFill" />
         </Button>
         <FlexColumn>
@@ -80,7 +84,7 @@ export const ModalButtons = ({ handleBuyWithCSPR }: ButtonsProps) => {
           })
         }
       >
-        <Button circle>
+        <Button circle style={{ padding: '8px' }}>
           <SvgIcon src="assets/icons/receive.svg" color="contentOnFill" />
         </Button>
         <FlexColumn>
@@ -96,23 +100,49 @@ export const ModalButtons = ({ handleBuyWithCSPR }: ButtonsProps) => {
         gap={SpacingSize.Large}
         onClick={() => navigate(RouterPath.Delegate)}
       >
-        <Button circle>
+        <Button circle style={{ padding: '8px' }}>
           <SvgIcon src="assets/icons/delegate.svg" color="contentOnFill" />
         </Button>
-        <Typography type="bodySemiBold">
-          <Trans t={t}>Delegate</Trans>
-        </Typography>
+        <FlexColumn>
+          <Typography type="bodySemiBold">
+            <Trans t={t}>Delegate</Trans>
+          </Typography>
+          <Typography type="captionRegular" color="contentSecondary">
+            <Trans t={t}>Stake CSPR to validator</Trans>
+          </Typography>
+        </FlexColumn>
       </ButtonContainer>
       <ButtonContainer
         gap={SpacingSize.Large}
         onClick={() => navigate(RouterPath.Undelegate)}
       >
-        <Button circle>
+        <Button circle style={{ padding: '8px' }}>
           <SvgIcon src="assets/icons/undelegate.svg" color="contentOnFill" />
         </Button>
-        <Typography type="bodySemiBold">
-          <Trans t={t}>Undelegate</Trans>
-        </Typography>
+        <FlexColumn>
+          <Typography type="bodySemiBold">
+            <Trans t={t}>Undelegate</Trans>
+          </Typography>
+          <Typography type="captionRegular" color="contentSecondary">
+            <Trans t={t}>Remove your stake</Trans>
+          </Typography>
+        </FlexColumn>
+      </ButtonContainer>
+      <ButtonContainer
+        gap={SpacingSize.Large}
+        onClick={() => navigate(RouterPath.Redelegate)}
+      >
+        <Button circle style={{ padding: '8px' }}>
+          <SvgIcon src="assets/icons/redelegate.svg" color="contentOnFill" />
+        </Button>
+        <FlexColumn>
+          <Typography type="bodySemiBold">
+            <Trans t={t}>Redelegate</Trans>
+          </Typography>
+          <Typography type="captionRegular" color="contentSecondary">
+            <Trans t={t}>Move your stake</Trans>
+          </Typography>
+        </FlexColumn>
       </ButtonContainer>
     </FlexColumn>
   );
diff --git a/src/apps/popup/pages/home/components/nft-list/index.tsx b/src/apps/popup/pages/home/components/nft-list/index.tsx
index c9e265928..ed8939b96 100644
--- a/src/apps/popup/pages/home/components/nft-list/index.tsx
+++ b/src/apps/popup/pages/home/components/nft-list/index.tsx
@@ -1,11 +1,16 @@
 import React, { useEffect } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
-import styled from 'styled-components';
-import { useSelector } from 'react-redux';
 import useInfiniteScroll from 'react-infinite-scroll-hook';
+import { useSelector } from 'react-redux';
+import styled from 'styled-components';
+
+import {
+  selectAccountNftTokens,
+  selectAccountNftTokensCount
+} from '@background/redux/account-info/selectors';
+
+import { useFetchNftTokens } from '@hooks/use-fetch-nft-tokens';
 
-import { useFetchNftTokens } from '@src/hooks';
-import { Skeleton, Tile, Typography } from '@libs/ui';
 import {
   BorderContainer,
   CenteredFlexRow,
@@ -13,10 +18,7 @@ import {
   SpacingSize,
   VerticalSpaceContainer
 } from '@libs/layout';
-import {
-  selectAccountNftTokens,
-  selectAccountNftTokensCount
-} from '@background/redux/account-info/selectors';
+import { Skeleton, Tile, Typography } from '@libs/ui/components';
 
 import { NftTokenCard } from './nft-token-card';
 
diff --git a/src/apps/popup/pages/home/components/nft-list/nft-preview-image.tsx b/src/apps/popup/pages/home/components/nft-list/nft-preview-image.tsx
index 6d2df28c9..87c06b05a 100644
--- a/src/apps/popup/pages/home/components/nft-list/nft-preview-image.tsx
+++ b/src/apps/popup/pages/home/components/nft-list/nft-preview-image.tsx
@@ -1,14 +1,15 @@
 import React, { useCallback, useState } from 'react';
 import styled from 'styled-components';
 
+import { ContentType } from '@src/utils';
+
 import {
   AudioNftPlaceholder,
   EmptyMediaPlaceholder,
   ImageContainer,
   LoadingMediaPlaceholder,
   VideoNftPlaceholder
-} from '@libs/ui';
-import { ContentType } from '@src/utils';
+} from '@libs/ui/components';
 
 const NftImage = styled.img`
   width: 100%;
diff --git a/src/apps/popup/pages/home/components/nft-list/nft-token-card.tsx b/src/apps/popup/pages/home/components/nft-list/nft-token-card.tsx
index e88ed39ef..43967e5a0 100644
--- a/src/apps/popup/pages/home/components/nft-list/nft-token-card.tsx
+++ b/src/apps/popup/pages/home/components/nft-list/nft-token-card.tsx
@@ -1,23 +1,26 @@
 import React, { forwardRef, useMemo, useState } from 'react';
 import styled from 'styled-components';
 
-import { NFTTokenResult } from '@libs/services/nft-service';
-import { FlexColumn, SpacingSize } from '@libs/layout';
-import {
-  Typography,
-  EmptyMediaPlaceholder,
-  LoadingMediaPlaceholder
-} from '@libs/ui';
-import { RouterPath, useTypedNavigate } from '@popup/router';
 import {
+  ContentType,
+  deriveMediaType,
   findMediaPreview,
-  getMetadataKeyValue,
-  getNftTokenMetadataWithLinks,
   getImageProxyUrl,
-  deriveMediaType,
-  ContentType
+  getMetadataKeyValue,
+  getNftTokenMetadataWithLinks
 } from '@src/utils';
-import { useAsyncEffect } from '@src/hooks';
+
+import { RouterPath, useTypedNavigate } from '@popup/router';
+
+import { useAsyncEffect } from '@hooks/use-async-effect';
+
+import { FlexColumn, SpacingSize } from '@libs/layout';
+import { NFTTokenResult } from '@libs/services/nft-service';
+import {
+  EmptyMediaPlaceholder,
+  LoadingMediaPlaceholder,
+  Typography
+} from '@libs/ui/components';
 
 import { NftPreviewImage } from './nft-preview-image';
 
diff --git a/src/apps/popup/pages/home/components/tokens-list/index.tsx b/src/apps/popup/pages/home/components/tokens-list/index.tsx
index 812cd91f1..d36f2e0bd 100644
--- a/src/apps/popup/pages/home/components/tokens-list/index.tsx
+++ b/src/apps/popup/pages/home/components/tokens-list/index.tsx
@@ -2,10 +2,13 @@ import React, { useEffect, useState } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 import styled from 'styled-components';
 
-import { List, Typography, TokenPlate } from '@libs/ui';
-import { SpaceBetweenFlexRow, SpacingSize } from '@libs/layout';
 import { RouterPath, useTypedNavigate } from '@popup/router';
-import { TokenType, useCasperToken, useFetchErc20Tokens } from '@src/hooks';
+
+import { TokenType, useCasperToken } from '@hooks/use-casper-token';
+import { useFetchErc20Tokens } from '@hooks/use-fetch-erc20-tokens';
+
+import { SpaceBetweenFlexRow, SpacingSize } from '@libs/layout';
+import { List, TokenPlate, Typography } from '@libs/ui/components';
 
 import { formatErc20TokenBalance } from './utils';
 
diff --git a/src/apps/popup/pages/home/components/tokens-list/utils.ts b/src/apps/popup/pages/home/components/tokens-list/utils.ts
index 70c578ed3..f63c4cfac 100644
--- a/src/apps/popup/pages/home/components/tokens-list/utils.ts
+++ b/src/apps/popup/pages/home/components/tokens-list/utils.ts
@@ -1,11 +1,8 @@
-import Big from 'big.js';
+import { TokenType } from '@hooks/use-casper-token';
 
-import { divideErc20Balance, formatNumber } from '@libs/ui/utils/formatters';
 import { ContractPackageWithBalance } from '@libs/services/erc20-service';
-import { TokenType } from '@src/hooks';
+import { divideErc20Balance, formatNumber } from '@libs/ui/utils';
 
-export const tokenDivider = (decimals: number | null) =>
-  Big(10).pow(decimals || 0);
 export const MINIMUM_SHOWING_BALANCE = 0.00001;
 
 export const formatErc20TokenBalance = (
diff --git a/src/apps/popup/pages/home/index.tsx b/src/apps/popup/pages/home/index.tsx
index a8a36f677..ddf15632e 100644
--- a/src/apps/popup/pages/home/index.tsx
+++ b/src/apps/popup/pages/home/index.tsx
@@ -2,31 +2,39 @@ import React, { useCallback, useEffect } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 import { useSelector } from 'react-redux';
 import styled from 'styled-components';
-import browser from 'webextension-polyfill';
+import { tabs } from 'webextension-polyfill';
 
 import {
-  AlignedFlexRow,
-  CenteredFlexRow,
-  FlexColumn,
-  HeaderSubmenuBarNavLink,
-  LinkType,
-  SpacingSize
-} from '@libs/layout';
+  HomePageTabName,
+  NetworkSetting,
+  getBuyWithTopperUrl
+} from '@src/constants';
+
+import { RouterPath, useTypedLocation, useTypedNavigate } from '@popup/router';
+
 import {
+  selectActiveNetworkSetting,
+  selectIsActiveAccountConnectedWithActiveOrigin,
+  selectVaultActiveAccount
+} from '@background/redux/root-selector';
+
+import { useCasperToken } from '@hooks/use-casper-token';
+
+import {
+  AlignedFlexRow,
   CenteredFlexColumn,
+  CenteredFlexRow,
   ContentContainer,
-  FlexRow,
   LeftAlignedFlexColumn,
   SpaceBetweenFlexRow,
+  SpacingSize,
   TileContainer,
   VerticalSpaceContainer
-} from '@src/libs/layout/containers';
-
+} from '@libs/layout';
 import {
   AccountActionsMenuPopover,
   Avatar,
   Button,
-  getFontSizeBasedOnTextLength,
   Hash,
   HashVariant,
   SvgIcon,
@@ -34,28 +42,13 @@ import {
   Tabs,
   Tile,
   Typography
-} from '@libs/ui';
-
-import { useCasperToken } from '@src/hooks';
-import { RouterPath, useTypedLocation, useTypedNavigate } from '@popup/router';
-import {
-  selectActiveNetworkSetting,
-  selectCountOfAccounts,
-  selectIsActiveAccountConnectedWithActiveOrigin,
-  selectVaultActiveAccount
-} from '@src/background/redux/root-selector';
-import { formatNumber, motesToCSPR } from '@src/libs/ui/utils/formatters';
-import { selectAccountBalance } from '@background/redux/account-info/selectors';
-import {
-  getBuyWithTopperUrl,
-  HomePageTabName,
-  NetworkSetting
-} from '@src/constants';
+} from '@libs/ui/components';
 
-import { TokensList } from './components/tokens-list';
-import { NftList } from './components/nft-list';
+import { AccountBalance } from './components/account-balance';
 import { DeploysList } from './components/deploys-list';
 import { MoreButtonsModal } from './components/more-buttons-modal';
+import { NftList } from './components/nft-list';
+import { TokensList } from './components/tokens-list';
 
 const DividerLine = styled.hr`
   margin: 16px 0;
@@ -66,7 +59,7 @@ const DividerLine = styled.hr`
 `;
 
 const ButtonsContainer = styled(CenteredFlexRow)`
-  margin-top: 16px;
+  margin-top: 24px;
 `;
 
 const ButtonContainer = styled(CenteredFlexColumn)`
@@ -87,13 +80,12 @@ export function HomePageContent() {
   );
   const network = useSelector(selectActiveNetworkSetting);
   const activeAccount = useSelector(selectVaultActiveAccount);
-  const balance = useSelector(selectAccountBalance);
 
   const casperToken = useCasperToken();
 
   const handleBuyWithCSPR = useCallback(() => {
     if (activeAccount?.publicKey && network === NetworkSetting.Mainnet) {
-      browser.tabs.create({
+      tabs.create({
         url: getBuyWithTopperUrl(activeAccount.publicKey),
         active: true
       });
@@ -136,38 +128,7 @@ export function HomePageContent() {
               <AccountActionsMenuPopover account={activeAccount} />
             </SpaceBetweenFlexRow>
             <DividerLine />
-            <FlexColumn gap={SpacingSize.Tiny}>
-              <FlexRow gap={SpacingSize.Small}>
-                <Typography
-                  type="CSPRBold"
-                  fontSize={getFontSizeBasedOnTextLength(
-                    balance.amountMotes?.length || 1
-                  )}
-                >
-                  {balance.amountMotes == null
-                    ? '-'
-                    : formatNumber(motesToCSPR(balance.amountMotes), {
-                        precision: { max: 5 }
-                      })}
-                </Typography>
-                <Typography
-                  type="CSPRLight"
-                  color="contentSecondary"
-                  fontSize={getFontSizeBasedOnTextLength(
-                    balance.amountMotes?.length || 1
-                  )}
-                >
-                  CSPR
-                </Typography>
-              </FlexRow>
-              <Typography
-                type="body"
-                color="contentSecondary"
-                loading={!balance.amountMotes}
-              >
-                {balance.amountFiat}
-              </Typography>
-            </FlexColumn>
+            <AccountBalance />
             <ButtonsContainer gap={SpacingSize.XXXL}>
               {network === NetworkSetting.Mainnet && (
                 <ButtonContainer
@@ -232,30 +193,3 @@ export function HomePageContent() {
     </ContentContainer>
   );
 }
-
-interface HomePageHeaderSubmenuItemsProps {
-  linkType: LinkType;
-}
-
-export function HomePageHeaderSubmenuItems({
-  linkType
-}: HomePageHeaderSubmenuItemsProps) {
-  const { t } = useTranslation();
-  const countOfAccounts = useSelector(selectCountOfAccounts);
-
-  return (
-    <>
-      <LeftAlignedFlexColumn>
-        <Typography type="body">
-          <Trans t={t}>Accounts list</Trans>
-        </Typography>
-
-        <Typography type="listSubtext" color="contentSecondary">
-          {countOfAccounts} {countOfAccounts > 1 ? t('accounts') : t('account')}
-        </Typography>
-      </LeftAlignedFlexColumn>
-
-      <HeaderSubmenuBarNavLink linkType={linkType} />
-    </>
-  );
-}
diff --git a/src/apps/popup/pages/navigation-menu/index.tsx b/src/apps/popup/pages/navigation-menu/index.tsx
index 6911cbd33..0559de093 100644
--- a/src/apps/popup/pages/navigation-menu/index.tsx
+++ b/src/apps/popup/pages/navigation-menu/index.tsx
@@ -4,40 +4,42 @@ import { useSelector } from 'react-redux';
 import { useNavigate } from 'react-router-dom';
 import styled from 'styled-components';
 
-import { WindowApp, useWindowManager } from '@src/hooks';
+import { isSafariBuild } from '@src/utils';
 
-import { RouterPath, useNavigationMenu } from '@src/apps/popup/router';
+import { TimeoutDurationSetting } from '@popup/constants';
+import { RouterPath, useNavigationMenu } from '@popup/router';
+
+import { WindowApp } from '@background/create-open-window';
+import { selectCountOfContacts } from '@background/redux/contacts/selectors';
+import { lockVault } from '@background/redux/sagas/actions';
+import {
+  selectThemeModeSetting,
+  selectTimeoutDurationSetting
+} from '@background/redux/settings/selectors';
+import { ThemeMode } from '@background/redux/settings/types';
+import { dispatchToMainStore } from '@background/redux/utils';
+import {
+  selectCountOfConnectedSites,
+  selectVaultHasImportedAccount
+} from '@background/redux/vault/selectors';
+
+import { useWindowManager } from '@hooks/use-window-manager';
 
 import {
-  ContentContainer,
   ListItemClickableContainer as BaseListItemClickableContainer,
+  ContentContainer,
   FlexColumn,
   SpaceBetweenFlexRow,
   SpacingSize
-} from '@src/libs/layout';
+} from '@libs/layout';
 import {
-  SvgIcon,
-  Typography,
-  List,
   Link,
+  List,
   Modal,
-  ThemeSwitcher
-} from '@src/libs/ui';
-
-import {
-  selectCountOfConnectedSites,
-  selectVaultHasImportedAccount
-} from '@src/background/redux/vault/selectors';
-import {
-  selectThemeModeSetting,
-  selectTimeoutDurationSetting
-} from '@src/background/redux/settings/selectors';
-import { dispatchToMainStore } from '@src/background/redux/utils';
-import { lockVault } from '@src/background/redux/sagas/actions';
-import { TimeoutDurationSetting } from '@popup/constants';
-import { isSafariBuild } from '@src/utils';
-import { selectCountOfContacts } from '@background/redux/contacts/selectors';
-import { ThemeMode } from '@background/redux/settings/types';
+  SvgIcon,
+  ThemeSwitcher,
+  Typography
+} from '@libs/ui/components';
 
 interface ListItemClickableContainerProps {
   disabled: boolean;
@@ -170,17 +172,6 @@ export function NavigationMenuPageContent() {
           },
           {
             id: 3,
-            title: t('Timeout'),
-            iconPath: 'assets/icons/lock.svg',
-            currentValue: TimeoutDurationSetting[timeoutDurationSetting],
-            disabled: false,
-            handleOnClick: () => {
-              closeNavigationMenu();
-              navigate(RouterPath.Timeout);
-            }
-          },
-          {
-            id: 4,
             title: t('Theme'),
             iconPath:
               themeMode === ThemeMode.SYSTEM
@@ -199,6 +190,17 @@ export function NavigationMenuPageContent() {
         items: [
           {
             id: 1,
+            title: t('Timeout'),
+            iconPath: 'assets/icons/lock.svg',
+            currentValue: TimeoutDurationSetting[timeoutDurationSetting],
+            disabled: false,
+            handleOnClick: () => {
+              closeNavigationMenu();
+              navigate(RouterPath.Timeout);
+            }
+          },
+          {
+            id: 2,
             title: t('Back up your secret recovery phrase'),
             iconPath: 'assets/icons/secure.svg',
             disabled: false,
@@ -208,7 +210,7 @@ export function NavigationMenuPageContent() {
             }
           },
           {
-            id: 2,
+            id: 3,
             title: t('Generate wallet QR code'),
             description: t('Scan to import your wallet on mobile'),
             iconPath: 'assets/icons/qr.svg',
@@ -220,7 +222,7 @@ export function NavigationMenuPageContent() {
             }
           },
           {
-            id: 3,
+            id: 4,
             title: t('Download account keys'),
             description: t('For all accounts imported via file'),
             iconPath: 'assets/icons/download.svg',
@@ -233,7 +235,7 @@ export function NavigationMenuPageContent() {
             }
           },
           {
-            id: 4,
+            id: 5,
             title: t('Change Password'),
             iconPath: 'assets/icons/secure.svg',
             disabled: false,
diff --git a/src/apps/popup/pages/nft-details/content.tsx b/src/apps/popup/pages/nft-details/content.tsx
index f61d4fe9c..e2bb53b6b 100644
--- a/src/apps/popup/pages/nft-details/content.tsx
+++ b/src/apps/popup/pages/nft-details/content.tsx
@@ -1,8 +1,26 @@
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
-import styled from 'styled-components';
 import { Trans, useTranslation } from 'react-i18next';
 import ReactPlayer from 'react-player';
 import { useSelector } from 'react-redux';
+import styled from 'styled-components';
+
+import {
+  ContentType,
+  MapNFTTokenStandardToName,
+  deriveMediaType,
+  findMediaPreview,
+  getImageProxyUrl,
+  getMetadataKeyValue,
+  getNftTokenMetadataWithLinks
+} from '@src/utils';
+
+import { RouterPath, useTypedNavigate } from '@popup/router';
+
+import { accountTrackingIdOfSentNftTokensRemoved } from '@background/redux/account-info/actions';
+import { selectAccountTrackingIdOfSentNftTokens } from '@background/redux/account-info/selectors';
+import { dispatchToMainStore } from '@background/redux/utils';
+
+import { useAsyncEffect } from '@hooks/use-async-effect';
 
 import {
   AlignedFlexRow,
@@ -14,34 +32,20 @@ import {
   SpacingSize,
   VerticalSpaceContainer
 } from '@libs/layout';
+import { dispatchFetchExtendedDeploysInfo } from '@libs/services/account-activity-service';
+import { NFTTokenResult } from '@libs/services/nft-service';
 import {
+  Button,
+  EmptyMediaPlaceholder,
   Hash,
   HashVariant,
   List,
+  LoadingMediaPlaceholder,
+  Status,
   SvgIcon,
   Tile,
-  Typography,
-  EmptyMediaPlaceholder,
-  LoadingMediaPlaceholder,
-  Button,
-  Status
-} from '@libs/ui';
-import { NFTTokenResult } from '@libs/services/nft-service';
-import {
-  ContentType,
-  deriveMediaType,
-  findMediaPreview,
-  getImageProxyUrl,
-  getMetadataKeyValue,
-  getNftTokenMetadataWithLinks,
-  MapNFTTokenStandardToName
-} from '@src/utils';
-import { RouterPath, useTypedNavigate } from '@popup/router';
-import { useAsyncEffect } from '@src/hooks';
-import { selectAccountTrackingIdOfSentNftTokens } from '@background/redux/account-info/selectors';
-import { dispatchFetchExtendedDeploysInfo } from '@libs/services/account-activity-service';
-import { dispatchToMainStore } from '@background/redux/utils';
-import { accountTrackingIdOfSentNftTokensRemoved } from '@background/redux/account-info/actions';
+  Typography
+} from '@libs/ui/components';
 
 const NftImageContainer = styled(CenteredFlexRow)`
   width: 100%;
diff --git a/src/apps/popup/pages/nft-details/index.tsx b/src/apps/popup/pages/nft-details/index.tsx
index 83aab8dcc..8fa9dcd47 100644
--- a/src/apps/popup/pages/nft-details/index.tsx
+++ b/src/apps/popup/pages/nft-details/index.tsx
@@ -1,16 +1,18 @@
 import React, { useEffect, useMemo } from 'react';
-import { useParams } from 'react-router-dom';
 import { useSelector } from 'react-redux';
+import { useParams } from 'react-router-dom';
+
+import { RouterPath, useTypedNavigate } from '@popup/router';
+
+import { selectAccountNftTokens } from '@background/redux/account-info/selectors';
 
 import {
+  HeaderPopup,
   HeaderSubmenuBarNavLink,
   HeaderViewInExplorer,
-  PopupHeader,
   PopupLayout
 } from '@libs/layout';
-import { selectAccountNftTokens } from '@background/redux/account-info/selectors';
-import { RouterPath, useTypedNavigate } from '@popup/router';
-import { HomePageTabsId } from '@libs/ui';
+import { HomePageTabsId } from '@libs/ui/components';
 
 import { NftDetailsContent } from './content';
 
@@ -39,7 +41,7 @@ export const NftDetailsPage = () => {
   return (
     <PopupLayout
       renderHeader={() => (
-        <PopupHeader
+        <HeaderPopup
           withNetworkSwitcher
           withMenu
           withConnectionStatus
diff --git a/src/apps/popup/pages/no-connected-account/index.tsx b/src/apps/popup/pages/no-connected-account/index.tsx
index a4119e8d0..bc2a0afe3 100644
--- a/src/apps/popup/pages/no-connected-account/index.tsx
+++ b/src/apps/popup/pages/no-connected-account/index.tsx
@@ -1,16 +1,16 @@
 import React from 'react';
-import { useTranslation, Trans } from 'react-i18next';
+import { Trans, useTranslation } from 'react-i18next';
+
+import { RouterPath, useTypedNavigate } from '@popup/router';
 
 import {
   ContentContainer,
+  FooterButtonsAbsoluteContainer,
   IllustrationContainer,
   ParagraphContainer,
-  FooterButtonsAbsoluteContainer,
   SpacingSize
-} from '@src/libs/layout';
-import { Typography, Button, SvgIcon } from '@libs/ui';
-
-import { useTypedNavigate, RouterPath } from '@popup/router';
+} from '@libs/layout';
+import { Button, SvgIcon, Typography } from '@libs/ui/components';
 
 export function NoConnectedAccountPageContent() {
   const navigate = useTypedNavigate();
diff --git a/src/apps/popup/pages/password-protection-page/index.tsx b/src/apps/popup/pages/password-protection-page/index.tsx
index 870bb3c4f..beaa380a1 100644
--- a/src/apps/popup/pages/password-protection-page/index.tsx
+++ b/src/apps/popup/pages/password-protection-page/index.tsx
@@ -1,25 +1,24 @@
 import React from 'react';
-import { useSelector } from 'react-redux';
 import { useTranslation } from 'react-i18next';
+import { useSelector } from 'react-redux';
 
 import {
   selectPasswordHash,
   selectPasswordSaltHash
 } from '@background/redux/keys/selectors';
-import { dispatchToMainStore } from '@background/redux/utils';
 import { loginRetryCountReseted } from '@background/redux/login-retry-count/actions';
-
-import { UnlockProtectedPageContent } from '@layout/unlock-protected-page-content';
+import { dispatchToMainStore } from '@background/redux/utils';
 
 import {
   FooterButtonsContainer,
+  HeaderPopup,
   HeaderSubmenuBarNavLink,
-  PopupHeader,
-  PopupLayout
+  PopupLayout,
+  UnlockProtectedPageContent
 } from '@libs/layout';
-import { Button } from '@libs/ui';
-import { useUnlockWalletForm } from '@libs/ui/forms/unlock-wallet';
+import { Button } from '@libs/ui/components';
 import { calculateSubmitButtonDisabled } from '@libs/ui/forms/get-submit-button-state-from-validation';
+import { useUnlockWalletForm } from '@libs/ui/forms/unlock-wallet';
 
 interface BackupSecretPhrasePasswordPageType {
   setPasswordConfirmed: () => void;
@@ -71,7 +70,7 @@ export const PasswordProtectionPage = ({
       variant="form"
       onSubmit={handleSubmit(onSubmit)}
       renderHeader={() => (
-        <PopupHeader
+        <HeaderPopup
           withNetworkSwitcher
           withMenu
           withConnectionStatus
diff --git a/src/apps/popup/pages/receive/content.tsx b/src/apps/popup/pages/receive/content.tsx
index a7cc7584b..55bd830b9 100644
--- a/src/apps/popup/pages/receive/content.tsx
+++ b/src/apps/popup/pages/receive/content.tsx
@@ -1,8 +1,19 @@
+import { QRCodeSVG } from 'qrcode.react';
 import React, { useEffect, useState } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 import { shallowEqual, useSelector } from 'react-redux';
 import styled from 'styled-components';
-import { QRCodeSVG } from 'qrcode.react';
+
+import { formatErc20TokenBalance } from '@popup/pages/home/components/tokens-list/utils';
+import { useTypedLocation } from '@popup/router';
+
+import {
+  selectAccountBalance,
+  selectErc20Tokens
+} from '@background/redux/account-info/selectors';
+import { selectVaultActiveAccount } from '@background/redux/vault/selectors';
+
+import { useCopyToClipboard } from '@hooks/use-copy-to-clipboard';
 
 import {
   ContentContainer,
@@ -11,16 +22,8 @@ import {
   SpacingSize,
   VerticalSpaceContainer
 } from '@libs/layout';
-import { Tile, Typography, ActiveAccountPlate } from '@libs/ui';
-import { selectVaultActiveAccount } from '@background/redux/vault/selectors';
-import { useCopyToClipboard } from '@src/hooks';
-import { useTypedLocation } from '@popup/router';
-import {
-  selectAccountBalance,
-  selectErc20Tokens
-} from '@background/redux/account-info/selectors';
-import { motesToCSPR } from '@libs/ui/utils/formatters';
-import { formatErc20TokenBalance } from '@popup/pages/home/components/tokens-list/utils';
+import { ActiveAccountPlate, Tile, Typography } from '@libs/ui/components';
+import { motesToCSPR } from '@libs/ui/utils';
 
 const Container = styled.div`
   padding: 20px 16px;
@@ -60,7 +63,7 @@ export const ReceivePageContent = () => {
   useEffect(() => {
     if (tokenData?.symbol === 'CSPR') {
       const balance =
-        (csprBalance.amountMotes && motesToCSPR(csprBalance.amountMotes)) ||
+        (csprBalance.liquidMotes && motesToCSPR(csprBalance.liquidMotes)) ||
         '0';
       setTokenData(prev => ({ ...prev, balance }));
     } else {
@@ -69,7 +72,7 @@ export const ReceivePageContent = () => {
         erc20Tokens?.find(t => t?.symbol === tokenData?.symbol)?.amount ?? '0';
       setTokenData(prev => ({ ...prev, balance }));
     }
-  }, [csprBalance, tokenData?.symbol, tokens]);
+  }, [csprBalance.liquidMotes, tokenData?.symbol, tokens]);
 
   return (
     <ContentContainer>
diff --git a/src/apps/popup/pages/receive/index.tsx b/src/apps/popup/pages/receive/index.tsx
index 6d3dce1f3..20d0cef21 100644
--- a/src/apps/popup/pages/receive/index.tsx
+++ b/src/apps/popup/pages/receive/index.tsx
@@ -2,15 +2,17 @@ import React from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 import { useSelector } from 'react-redux';
 
+import { selectVaultActiveAccount } from '@background/redux/vault/selectors';
+
+import { useCopyToClipboard } from '@hooks/use-copy-to-clipboard';
+
 import {
   FooterButtonsContainer,
+  HeaderPopup,
   HeaderSubmenuBarNavLink,
-  PopupHeader,
   PopupLayout
 } from '@libs/layout';
-import { Button, Typography } from '@libs/ui';
-import { selectVaultActiveAccount } from '@background/redux/vault/selectors';
-import { useCopyToClipboard } from '@src/hooks';
+import { Button, Typography } from '@libs/ui/components';
 
 import { ReceivePageContent } from './content';
 
@@ -26,7 +28,7 @@ export const ReceivePage = () => {
   return (
     <PopupLayout
       renderHeader={() => (
-        <PopupHeader
+        <HeaderPopup
           withNetworkSwitcher
           withMenu
           withConnectionStatus
diff --git a/src/apps/popup/pages/remove-account/index.tsx b/src/apps/popup/pages/remove-account/index.tsx
index c6ee74477..7bff66478 100644
--- a/src/apps/popup/pages/remove-account/index.tsx
+++ b/src/apps/popup/pages/remove-account/index.tsx
@@ -1,20 +1,20 @@
 import React, { useCallback } from 'react';
+import { Trans, useTranslation } from 'react-i18next';
 import { useParams } from 'react-router-dom';
-import { useTranslation, Trans } from 'react-i18next';
+
+import { RouterPath, useTypedNavigate } from '@popup/router';
+
+import { dispatchToMainStore } from '@background/redux/utils';
+import { accountRemoved } from '@background/redux/vault/actions';
 
 import {
   ContentContainer,
+  FooterButtonsAbsoluteContainer,
   IllustrationContainer,
   ParagraphContainer,
-  FooterButtonsAbsoluteContainer,
   SpacingSize
-} from '@src/libs/layout/containers';
-import { Button, SvgIcon, Typography } from '@src/libs/ui';
-
-import { RouterPath, useTypedNavigate } from '@popup/router';
-
-import { accountRemoved } from '@background/redux/vault/actions';
-import { dispatchToMainStore } from '@background/redux/utils';
+} from '@libs/layout';
+import { Button, SvgIcon, Typography } from '@libs/ui/components';
 
 export function RemoveAccountPageContent() {
   const navigate = useTypedNavigate();
diff --git a/src/apps/popup/pages/rename-account/index.tsx b/src/apps/popup/pages/rename-account/index.tsx
index 88224f6fd..d21d73351 100644
--- a/src/apps/popup/pages/rename-account/index.tsx
+++ b/src/apps/popup/pages/rename-account/index.tsx
@@ -3,25 +3,25 @@ import { Trans, useTranslation } from 'react-i18next';
 import { useSelector } from 'react-redux';
 import { useParams } from 'react-router-dom';
 
+import { RouterPath, useTypedNavigate } from '@popup/router';
+
+import { dispatchToMainStore } from '@background/redux/utils';
+import { accountRenamed } from '@background/redux/vault/actions';
+import { selectVaultAccountsNames } from '@background/redux/vault/selectors';
+
 import {
-  FooterButtonsAbsoluteContainer,
   ContentContainer,
+  FooterButtonsAbsoluteContainer,
   IllustrationContainer,
-  ParagraphContainer,
   InputsContainer,
+  ParagraphContainer,
   SpacingSize
-} from '@src/libs/layout';
-import { Button, Input, SvgIcon, Typography } from '@src/libs/ui';
+} from '@libs/layout';
+import { Button, Input, SvgIcon, Typography } from '@libs/ui/components';
 import {
   RenameAccountFormValues,
   useRenameAccount
-} from '@src/libs/ui/forms/rename-account';
-
-import { RouterPath, useTypedNavigate } from '@popup/router';
-
-import { accountRenamed } from '@src/background/redux/vault/actions';
-import { selectVaultAccountsNames } from '@src/background/redux/vault/selectors';
-import { dispatchToMainStore } from '@src/background/redux/utils';
+} from '@libs/ui/forms/rename-account';
 
 export function RenameAccountPageContent() {
   const navigate = useTypedNavigate();
diff --git a/src/apps/popup/pages/stakes/amount-step.tsx b/src/apps/popup/pages/stakes/amount-step.tsx
index 3b13f19dc..9f9c9ecf0 100644
--- a/src/apps/popup/pages/stakes/amount-step.tsx
+++ b/src/apps/popup/pages/stakes/amount-step.tsx
@@ -1,25 +1,26 @@
+import Big from 'big.js';
 import React, { useEffect, useState } from 'react';
-import { Trans, useTranslation } from 'react-i18next';
 import { UseFormReturn, useWatch } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
 import { useSelector } from 'react-redux';
-import Big from 'big.js';
 import styled from 'styled-components';
 
+import { AuctionManagerEntryPoint, STAKE_COST_MOTES } from '@src/constants';
+
+import {
+  selectAccountBalance,
+  selectAccountCurrencyRate
+} from '@background/redux/account-info/selectors';
+
 import {
   AlignedFlexRow,
-  ContentContainer,
   ParagraphContainer,
   SpacingSize,
   VerticalSpaceContainer
 } from '@libs/layout';
-import { Error, Input, Typography } from '@libs/ui';
+import { Error, Input, Typography } from '@libs/ui/components';
 import { StakeAmountFormValues } from '@libs/ui/forms/stakes-form';
-import { formatFiatAmount, motesToCSPR } from '@libs/ui/utils/formatters';
-import {
-  selectAccountBalance,
-  selectAccountCurrencyRate
-} from '@background/redux/account-info/selectors';
-import { AuctionManagerEntryPoint, STAKE_COST_MOTES } from '@src/constants';
+import { formatFiatAmount, motesToCSPR } from '@libs/ui/utils';
 
 const StakeMaxButton = styled(AlignedFlexRow)`
   cursor: pointer;
@@ -29,7 +30,6 @@ interface AmountStepProps {
   amountForm: UseFormReturn<StakeAmountFormValues>;
   stakesType: AuctionManagerEntryPoint;
   stakeAmountMotes: string;
-  headerText: string;
   amountStepText: string;
   amountStepMaxAmountValue: string | null;
 }
@@ -38,7 +38,6 @@ export const AmountStep = ({
   amountForm,
   stakesType,
   stakeAmountMotes,
-  headerText,
   amountStepText,
   amountStepMaxAmountValue
 }: AmountStepProps) => {
@@ -53,18 +52,19 @@ export const AmountStep = ({
     switch (stakesType) {
       case AuctionManagerEntryPoint.delegate: {
         const maxAmountMotes: string =
-          csprBalance.amountMotes == null
+          csprBalance.liquidMotes == null
             ? '0'
-            : Big(csprBalance.amountMotes).sub(STAKE_COST_MOTES).toString();
+            : Big(csprBalance.liquidMotes).sub(STAKE_COST_MOTES).toString();
 
         setMaxAmountMotes(maxAmountMotes);
         break;
       }
-      case AuctionManagerEntryPoint.undelegate: {
+      case AuctionManagerEntryPoint.undelegate:
+      case AuctionManagerEntryPoint.redelegate: {
         setMaxAmountMotes(stakeAmountMotes);
       }
     }
-  }, [csprBalance.amountMotes, stakeAmountMotes, stakesType]);
+  }, [csprBalance.liquidMotes, stakeAmountMotes, stakesType]);
 
   const {
     register,
@@ -86,13 +86,7 @@ export const AmountStep = ({
   const fiatAmount = formatFiatAmount(amount || '0', currencyRate);
 
   return (
-    <ContentContainer>
-      <ParagraphContainer top={SpacingSize.XL}>
-        <Typography type="header">
-          <Trans t={t}>{headerText}</Trans>
-        </Typography>
-      </ParagraphContainer>
-
+    <>
       <VerticalSpaceContainer top={SpacingSize.XXL}>
         <Input
           label={amountLabel}
@@ -138,6 +132,6 @@ export const AmountStep = ({
           />
         </VerticalSpaceContainer>
       )}
-    </ContentContainer>
+    </>
   );
 };
diff --git a/src/apps/popup/pages/stakes/confirm-step.tsx b/src/apps/popup/pages/stakes/confirm-step.tsx
index 0d2f2afd5..a0882ebd5 100644
--- a/src/apps/popup/pages/stakes/confirm-step.tsx
+++ b/src/apps/popup/pages/stakes/confirm-step.tsx
@@ -1,26 +1,28 @@
-import React from 'react';
-import { Trans, useTranslation } from 'react-i18next';
-import styled from 'styled-components';
 import Big from 'big.js';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
 import { useSelector } from 'react-redux';
+import styled from 'styled-components';
+
+import { AuctionManagerEntryPoint } from '@src/constants';
+
+import { selectAccountCurrencyRate } from '@background/redux/account-info/selectors';
 
 import {
-  ContentContainer,
   ParagraphContainer,
   SpaceBetweenFlexRow,
   SpacingSize,
   VerticalSpaceContainer
 } from '@libs/layout';
-import { AmountContainer, List, Typography, ValidatorPlate } from '@libs/ui';
-import {
-  formatFiatAmount,
-  formatNumber,
-  motesToCSPR
-} from '@libs/ui/utils/formatters';
-import { selectAccountCurrencyRate } from '@background/redux/account-info/selectors';
-import { ValidatorResult } from '@libs/services/validators-service/types';
 import { getAuctionManagerDeployCost } from '@libs/services/deployer-service';
-import { AuctionManagerEntryPoint } from '@src/constants';
+import { ValidatorResult } from '@libs/services/validators-service/types';
+import {
+  AmountContainer,
+  List,
+  Typography,
+  ValidatorPlate
+} from '@libs/ui/components';
+import { formatFiatAmount, formatNumber, motesToCSPR } from '@libs/ui/utils';
 
 export const ListItemContainer = styled(SpaceBetweenFlexRow)`
   padding: 12px 16px;
@@ -29,15 +31,15 @@ export const ListItemContainer = styled(SpaceBetweenFlexRow)`
 interface ConfirmStepProps {
   inputAmountCSPR: string;
   validator: ValidatorResult | null;
+  newValidator: ValidatorResult | null;
   stakesType: AuctionManagerEntryPoint;
-  headerText: string;
   confirmStepText: string;
 }
 export const ConfirmStep = ({
   inputAmountCSPR,
   validator,
+  newValidator,
   stakesType,
-  headerText,
   confirmStepText
 }: ConfirmStepProps) => {
   const { t } = useTranslation();
@@ -82,29 +84,50 @@ export const ConfirmStep = ({
     }
   ];
 
-  const validatorLabel = t('To validator');
-
   if (!validator) {
     return null;
   }
 
   return (
-    <ContentContainer>
-      <ParagraphContainer top={SpacingSize.XL}>
-        <Typography type="header">
-          <Trans t={t}>{headerText}</Trans>
-        </Typography>
-      </ParagraphContainer>
+    <>
       <VerticalSpaceContainer top={SpacingSize.XL}>
         <ValidatorPlate
           publicKey={validator?.public_key}
           fee={validator.fee}
           name={validator?.account_info?.info?.owner?.name}
-          logo={validator?.account_info?.info?.owner?.branding?.logo?.svg}
+          logo={
+            validator?.account_info?.info?.owner?.branding?.logo?.svg ||
+            validator?.account_info?.info?.owner?.branding?.logo?.png_256 ||
+            validator?.account_info?.info?.owner?.branding?.logo?.png_1024
+          }
           delegatorsNumber={validator?.delegators_number}
-          validatorLabel={validatorLabel}
+          validatorLabel={
+            stakesType === AuctionManagerEntryPoint.redelegate
+              ? t('From validator')
+              : t('To validator')
+          }
           showFullPublicKey
         />
+
+        {newValidator && (
+          <VerticalSpaceContainer top={SpacingSize.XL}>
+            <ValidatorPlate
+              publicKey={newValidator?.public_key}
+              fee={newValidator.fee}
+              name={newValidator?.account_info?.info?.owner?.name}
+              logo={
+                newValidator?.account_info?.info?.owner?.branding?.logo?.svg ||
+                newValidator?.account_info?.info?.owner?.branding?.logo
+                  ?.png_256 ||
+                newValidator?.account_info?.info?.owner?.branding?.logo
+                  ?.png_1024
+              }
+              delegatorsNumber={newValidator?.delegators_number}
+              validatorLabel={t('To validator')}
+              showFullPublicKey
+            />
+          </VerticalSpaceContainer>
+        )}
       </VerticalSpaceContainer>
       <ParagraphContainer top={SpacingSize.XL}>
         <Typography type="bodySemiBold">{t('Amount and fee')}</Typography>
@@ -129,6 +152,6 @@ export const ConfirmStep = ({
         )}
         marginLeftForItemSeparatorLine={8}
       />
-    </ContentContainer>
+    </>
   );
 };
diff --git a/src/apps/popup/pages/stakes/content.tsx b/src/apps/popup/pages/stakes/content.tsx
index 0d9b0a57b..eb2af77e7 100644
--- a/src/apps/popup/pages/stakes/content.tsx
+++ b/src/apps/popup/pages/stakes/content.tsx
@@ -1,128 +1,159 @@
-import React, { useEffect, useState } from 'react';
+import React from 'react';
 import { UseFormReturn } from 'react-hook-form';
+import { Trans, useTranslation } from 'react-i18next';
+
+import { AuctionManagerEntryPoint, StakeSteps } from '@src/constants';
 
-import { ValidatorStep } from '@popup/pages/stakes/validator-step';
 import { AmountStep } from '@popup/pages/stakes/amount-step';
+import { ConfirmStep } from '@popup/pages/stakes/confirm-step';
+import { RedelegateValidatorDropdownInput } from '@popup/pages/stakes/redelegate-validator-dropdown-input';
+import { Step } from '@popup/pages/stakes/step';
+import { useStakeActionTexts } from '@popup/pages/stakes/utils';
+import { ValidatorDropdownInput } from '@popup/pages/stakes/validator-dropdown-input';
+
+import {
+  AlignedFlexRow,
+  ParagraphContainer,
+  SpacingSize,
+  VerticalSpaceContainer
+} from '@libs/layout';
+import { ValidatorResultWithId } from '@libs/services/validators-service/types';
+import { TransferSuccessScreen, Typography } from '@libs/ui/components';
 import {
   StakeAmountFormValues,
+  StakeNewValidatorFormValues,
   StakeValidatorFormValues
 } from '@libs/ui/forms/stakes-form';
-import { ConfirmStep } from '@popup/pages/stakes/confirm-step';
-import { TransferSuccessScreen, ValidatorDropdownInput } from '@libs/ui';
-import { AuctionManagerEntryPoint, StakeSteps } from '@src/constants';
-import { ValidatorResultWithId } from '@libs/services/validators-service/types';
-import { formatNumber, motesToCSPR } from '@libs/ui/utils/formatters';
 
 interface DelegateStakePageContentProps {
   stakeStep: StakeSteps;
   validatorForm: UseFormReturn<StakeValidatorFormValues>;
   amountForm: UseFormReturn<StakeAmountFormValues>;
+  newValidatorForm: UseFormReturn<StakeNewValidatorFormValues>;
   inputAmountCSPR: string;
   validator: ValidatorResultWithId | null;
   setValidator: React.Dispatch<
     React.SetStateAction<ValidatorResultWithId | null>
   >;
+  newValidator: ValidatorResultWithId | null;
+  setNewValidator: React.Dispatch<
+    React.SetStateAction<ValidatorResultWithId | null>
+  >;
   stakesType: AuctionManagerEntryPoint;
   stakeAmountMotes: string;
   setStakeAmount: React.Dispatch<React.SetStateAction<string>>;
   validatorList: ValidatorResultWithId[] | null;
+  undelegateValidatorList: ValidatorResultWithId[] | null;
 }
 
 export const StakesPageContent = ({
   stakeStep,
   validatorForm,
   amountForm,
+  newValidatorForm,
   inputAmountCSPR,
   validator,
   setValidator,
+  newValidator,
+  setNewValidator,
   stakesType,
   stakeAmountMotes,
   setStakeAmount,
-  validatorList
+  validatorList,
+  undelegateValidatorList
 }: DelegateStakePageContentProps) => {
-  const [validateStepHeaderText, setValidateStepHeaderText] = useState('');
-  const [amountStepHeaderText, setAmountStepHeaderText] = useState('');
-  const [confirmStepHeaderText, setConfirmStepHeaderText] = useState('');
-  const [successStepHeaderText, setSuccessStepHeaderText] = useState('');
-  const [confirmStepText, setConfirmStepText] = useState('');
-  const [amountStepText, setAmountStepText] = useState('');
-  const [amountStepMaxAmountValue, setAmountStepMaxAmountValue] = useState<
-    string | null
-  >(null);
-
-  useEffect(() => {
-    const formattedAmountCSPR =
-      stakeAmountMotes &&
-      formatNumber(motesToCSPR(stakeAmountMotes), { precision: { max: 4 } });
+  const { t } = useTranslation();
 
-    switch (stakesType) {
-      case AuctionManagerEntryPoint.delegate: {
-        setValidateStepHeaderText('Delegate');
-        setAmountStepHeaderText('Delegate amount');
-        setConfirmStepHeaderText('Confirm delegation');
-        setSuccessStepHeaderText('You’ve submitted a delegation');
-
-        setAmountStepText('Delegate max');
-        setConfirmStepText('You’ll delegate');
-        break;
-      }
-      case AuctionManagerEntryPoint.undelegate: {
-        setValidateStepHeaderText('Undelegate');
-        setAmountStepHeaderText('Undelegate amount');
-        setConfirmStepHeaderText('Confirm undelegation');
-        setSuccessStepHeaderText('You’ve submitted an undelegation');
-
-        setAmountStepText('Undelegate max:');
-        setAmountStepMaxAmountValue(`${formattedAmountCSPR} CSPR`);
-        setConfirmStepText('You’ll undelegate');
-        break;
-      }
-
-      default:
-        throw Error('fetch validator: unknown stakes type');
-    }
-  }, [stakeAmountMotes, stakesType]);
+  const {
+    validatorStepHeaderText,
+    newValidatorStepHeaderText,
+    amountStepHeaderText,
+    confirmStepHeaderText,
+    successStepHeaderText,
+    confirmStepText,
+    amountStepText,
+    amountStepMaxAmountValue
+  } = useStakeActionTexts(stakesType, stakeAmountMotes);
 
   switch (stakeStep) {
     case StakeSteps.Validator: {
       return (
-        <ValidatorStep headerText={validateStepHeaderText}>
+        <Step headerText={validatorStepHeaderText}>
           <ValidatorDropdownInput
             validatorForm={validatorForm}
             validatorList={validatorList}
+            undelegateValidatorList={undelegateValidatorList}
             validator={validator}
             setValidator={setValidator}
             setStakeAmount={setStakeAmount}
             stakesType={stakesType}
           />
-        </ValidatorStep>
+        </Step>
       );
     }
     case StakeSteps.Amount: {
       return (
-        <AmountStep
-          amountForm={amountForm}
-          stakesType={stakesType}
-          stakeAmountMotes={stakeAmountMotes}
-          headerText={amountStepHeaderText}
-          amountStepText={amountStepText}
-          amountStepMaxAmountValue={amountStepMaxAmountValue}
-        />
+        <Step headerText={amountStepHeaderText}>
+          <AmountStep
+            amountForm={amountForm}
+            stakesType={stakesType}
+            stakeAmountMotes={stakeAmountMotes}
+            amountStepText={amountStepText}
+            amountStepMaxAmountValue={amountStepMaxAmountValue}
+          />
+        </Step>
+      );
+    }
+    case StakeSteps.NewValidator: {
+      return (
+        <Step headerText={newValidatorStepHeaderText!}>
+          <ParagraphContainer top={SpacingSize.Medium}>
+            <AlignedFlexRow gap={SpacingSize.Small}>
+              <Typography type="body" color="contentSecondary">
+                <Trans t={t}>Amount:</Trans>
+              </Typography>
+              <Typography type="bodyHash">{`${inputAmountCSPR} CSPR`}</Typography>
+            </AlignedFlexRow>
+          </ParagraphContainer>
+          <RedelegateValidatorDropdownInput
+            newValidatorForm={newValidatorForm}
+            validatorList={validatorList}
+            validator={newValidator}
+            setValidator={setNewValidator}
+            setStakeAmount={setStakeAmount}
+          />
+        </Step>
       );
     }
     case StakeSteps.Confirm: {
       return (
-        <ConfirmStep
-          validator={validator}
-          inputAmountCSPR={inputAmountCSPR}
-          stakesType={stakesType}
-          headerText={confirmStepHeaderText}
-          confirmStepText={confirmStepText}
-        />
+        <Step headerText={confirmStepHeaderText}>
+          <ConfirmStep
+            newValidator={newValidator}
+            validator={validator}
+            inputAmountCSPR={inputAmountCSPR}
+            stakesType={stakesType}
+            confirmStepText={confirmStepText}
+          />
+        </Step>
       );
     }
     case StakeSteps.Success: {
-      return <TransferSuccessScreen headerText={successStepHeaderText} />;
+      return (
+        <TransferSuccessScreen headerText={successStepHeaderText}>
+          {stakesType === AuctionManagerEntryPoint.redelegate ? (
+            <VerticalSpaceContainer top={SpacingSize.Medium}>
+              <Typography type="body" color="contentSecondary">
+                <Trans t={t}>
+                  I usually takes around{' '}
+                  <Typography type="bodySemiBold">14 to 16 hours</Typography>{' '}
+                  for this operation to complete.
+                </Trans>
+              </Typography>
+            </VerticalSpaceContainer>
+          ) : null}
+        </TransferSuccessScreen>
+      );
     }
     default: {
       throw Error('Out of bound: StakeSteps');
diff --git a/src/apps/popup/pages/stakes/index.tsx b/src/apps/popup/pages/stakes/index.tsx
index 006fc5e96..96d65e579 100644
--- a/src/apps/popup/pages/stakes/index.tsx
+++ b/src/apps/popup/pages/stakes/index.tsx
@@ -2,56 +2,60 @@ import React, { useEffect, useState } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 import { useSelector } from 'react-redux';
 
+import {
+  AuctionManagerEntryPoint,
+  STAKE_COST_MOTES,
+  StakeSteps
+} from '@src/constants';
+
+import { StakesPageContent } from '@popup/pages/stakes/content';
+import { NoDelegations } from '@popup/pages/stakes/no-delegations';
+import { useConfirmationButtonText } from '@popup/pages/stakes/utils';
+import { RouterPath, useTypedLocation, useTypedNavigate } from '@popup/router';
+
+import { accountPendingTransactionsChanged } from '@background/redux/account-info/actions';
+import { selectAccountBalance } from '@background/redux/account-info/selectors';
+import { selectApiConfigBasedOnActiveNetwork } from '@background/redux/settings/selectors';
+import { dispatchToMainStore } from '@background/redux/utils';
+import { selectVaultActiveAccount } from '@background/redux/vault/selectors';
+
+import { createAsymmetricKey } from '@libs/crypto/create-asymmetric-key';
 import {
   CenteredFlexRow,
   ContentContainer,
+  ErrorPath,
   FooterButtonsContainer,
+  HeaderPopup,
   HeaderSubmenuBarNavLink,
   ParagraphContainer,
-  PopupHeader,
   PopupLayout,
   SpaceBetweenFlexRow,
-  SpacingSize
+  SpacingSize,
+  createErrorLocationState
 } from '@libs/layout';
-import { StakesPageContent } from '@popup/pages/stakes/content';
-import { Button, HomePageTabsId, Typography } from '@libs/ui';
-import { selectVaultActiveAccount } from '@background/redux/vault/selectors';
-import { createAsymmetricKey } from '@libs/crypto/create-asymmetric-key';
-import { selectApiConfigBasedOnActiveNetwork } from '@background/redux/settings/selectors';
-import {
-  AuctionManagerEntryPoint,
-  STAKE_COST_MOTES,
-  StakeSteps
-} from '@src/constants';
-import { dispatchToMainStore } from '@background/redux/utils';
-import { accountPendingTransactionsChanged } from '@background/redux/account-info/actions';
 import { dispatchFetchExtendedDeploysInfo } from '@libs/services/account-activity-service';
 import { makeAuctionManagerDeploy } from '@libs/services/deployer-service';
-import { RouterPath, useTypedLocation, useTypedNavigate } from '@popup/router';
-import { useStakesForm } from '@libs/ui/forms/stakes-form';
-import { selectAccountBalance } from '@background/redux/account-info/selectors';
-import { calculateSubmitButtonDisabled } from '@libs/ui/forms/get-submit-button-state-from-validation';
-import {
-  CSPRtoMotes,
-  formatNumber,
-  motesToCSPR
-} from '@libs/ui/utils/formatters';
-import { ValidatorResultWithId } from '@libs/services/validators-service/types';
 import {
   dispatchFetchAuctionValidatorsRequest,
   dispatchFetchValidatorsDetailsDataRequest
 } from '@libs/services/validators-service';
-import { NoDelegations } from '@popup/pages/stakes/no-delegations';
-import { createErrorLocationState, ErrorPath } from '@layout/error';
+import { ValidatorResultWithId } from '@libs/services/validators-service/types';
+import { Button, HomePageTabsId, Typography } from '@libs/ui/components';
+import { calculateSubmitButtonDisabled } from '@libs/ui/forms/get-submit-button-state-from-validation';
+import { useStakesForm } from '@libs/ui/forms/stakes-form';
+import { CSPRtoMotes, formatNumber, motesToCSPR } from '@libs/ui/utils';
 
 export const StakesPage = () => {
   const [stakeStep, setStakeStep] = useState(StakeSteps.Validator);
   const [validatorPublicKey, setValidatorPublicKey] = useState('');
+  const [newValidatorPublicKey, setNewValidatorPublicKey] = useState('');
   const [inputAmountCSPR, setInputAmountCSPR] = useState('');
   const [isSubmitButtonDisable, setIsSubmitButtonDisable] = useState(true);
   const [validator, setValidator] = useState<ValidatorResultWithId | null>(
     null
   );
+  const [newValidator, setNewValidator] =
+    useState<ValidatorResultWithId | null>(null);
   const [stakesType, setStakesType] = useState<AuctionManagerEntryPoint>(
     AuctionManagerEntryPoint.delegate
   );
@@ -59,11 +63,18 @@ export const StakesPage = () => {
   const [validatorList, setValidatorList] = useState<
     ValidatorResultWithId[] | null
   >(null);
+  const [undelegateValidatorList, setUndelegateValidatorList] = useState<
+    ValidatorResultWithId[] | null
+  >(null);
   const [loading, setLoading] = useState(true);
 
   const activeAccount = useSelector(selectVaultActiveAccount);
-  const { networkName, nodeUrl, auctionManagerContractHash, casperApiUrl } =
-    useSelector(selectApiConfigBasedOnActiveNetwork);
+  const {
+    networkName,
+    nodeUrl,
+    auctionManagerContractHash,
+    casperClarityApiUrl
+  } = useSelector(selectApiConfigBasedOnActiveNetwork);
   const csprBalance = useSelector(selectAccountBalance);
 
   const { t } = useTranslation();
@@ -106,26 +117,66 @@ export const StakesPage = () => {
                 user_stake: delegator.stake
               }));
 
+              setUndelegateValidatorList(validatorListWithId);
+            }
+          })
+          .finally(() => {
+            setLoading(false);
+          });
+      }
+    } else if (pathname.split('/')[1] === AuctionManagerEntryPoint.redelegate) {
+      setStakesType(AuctionManagerEntryPoint.redelegate);
+
+      if (activeAccount) {
+        Promise.all([
+          dispatchFetchAuctionValidatorsRequest(),
+          dispatchFetchValidatorsDetailsDataRequest(activeAccount.publicKey)
+        ])
+          .then(([allValidatorsResp, undelegateValidatorResp]) => {
+            if ('data' in allValidatorsResp.payload) {
+              const { data } = allValidatorsResp.payload;
+
+              const validatorListWithId = data.map(validator => ({
+                ...validator,
+                id: validator.public_key
+              }));
+
               setValidatorList(validatorListWithId);
             }
+            if ('data' in undelegateValidatorResp.payload) {
+              const { data } = undelegateValidatorResp.payload;
+
+              const validatorListWithId = data.map(delegator => ({
+                ...delegator.validator,
+                id: delegator.validator_public_key,
+                user_stake: delegator.stake
+              }));
+
+              setUndelegateValidatorList(validatorListWithId);
+            }
           })
           .finally(() => {
             setLoading(false);
           });
       }
     }
-  }, [activeAccount, pathname, casperApiUrl]);
+  }, [activeAccount, pathname, casperClarityApiUrl]);
 
-  const { amountForm, validatorForm } = useStakesForm(
-    csprBalance.amountMotes,
+  const { amountForm, validatorForm, newValidatorForm } = useStakesForm(
+    csprBalance.liquidMotes,
     stakesType,
     stakeAmountMotes,
-    validator?.delegators_number
+    validator?.delegators_number,
+    newValidator?.delegators_number
   );
   const { formState: amountFormState, getValues: getValuesAmountForm } =
     amountForm;
   const { formState: validatorFormState, getValues: getValuesValidatorForm } =
     validatorForm;
+  const {
+    formState: newValidatorFormState,
+    getValues: getValuesNewValidatorForm
+  } = newValidatorForm;
 
   // event listener for enable/disable submit button
   useEffect(() => {
@@ -179,7 +230,7 @@ export const StakesPage = () => {
         stakesType,
         activeAccount.publicKey,
         validatorPublicKey,
-        null,
+        newValidatorPublicKey || null,
         motesAmount,
         networkName,
         auctionManagerContractHash
@@ -231,6 +282,9 @@ export const StakesPage = () => {
     const isAmountFormButtonDisabled = calculateSubmitButtonDisabled({
       isValid: amountFormState.isValid
     });
+    const isNewValidatorFormButtonDisabled = calculateSubmitButtonDisabled({
+      isValid: newValidatorFormState.isValid
+    });
 
     switch (stakeStep) {
       case StakeSteps.Validator: {
@@ -251,6 +305,22 @@ export const StakesPage = () => {
             const { amount: _amount } = getValuesAmountForm();
 
             setInputAmountCSPR(_amount);
+            if (stakesType === AuctionManagerEntryPoint.redelegate) {
+              setStakeStep(StakeSteps.NewValidator);
+            } else {
+              setStakeStep(StakeSteps.Confirm);
+            }
+          }
+        };
+      }
+      case StakeSteps.NewValidator: {
+        return {
+          disabled: isNewValidatorFormButtonDisabled,
+          onClick: () => {
+            const { newValidatorPublicKey: _newValidatorPublicKey } =
+              getValuesNewValidatorForm();
+
+            setNewValidatorPublicKey(_newValidatorPublicKey);
             setStakeStep(StakeSteps.Confirm);
           }
         };
@@ -289,10 +359,18 @@ export const StakesPage = () => {
         setStakeStep(StakeSteps.Validator);
         break;
       }
-      case StakeSteps.Confirm: {
+      case StakeSteps.NewValidator: {
         setStakeStep(StakeSteps.Amount);
         break;
       }
+      case StakeSteps.Confirm: {
+        if (stakesType === AuctionManagerEntryPoint.redelegate) {
+          setStakeStep(StakeSteps.NewValidator);
+        } else {
+          setStakeStep(StakeSteps.Amount);
+        }
+        break;
+      }
 
       default: {
         navigate(-1);
@@ -301,31 +379,21 @@ export const StakesPage = () => {
     }
   };
 
-  const getConfirmButtonText = () => {
-    switch (stakesType) {
-      case AuctionManagerEntryPoint.delegate: {
-        return t('Confirm delegation');
-      }
-      case AuctionManagerEntryPoint.undelegate: {
-        return t('Confirm undelegation');
-      }
-      default: {
-        return t('Confirm');
-      }
-    }
-  };
+  const confirmButtonText = useConfirmationButtonText(stakesType);
 
   if (loading) {
     return (
       <PopupLayout
         renderHeader={() => (
-          <PopupHeader withNetworkSwitcher withMenu withConnectionStatus />
+          <HeaderPopup withNetworkSwitcher withMenu withConnectionStatus />
         )}
         renderContent={() => (
           <ContentContainer>
             <ParagraphContainer top={SpacingSize.XL}>
               <CenteredFlexRow>
-                <Typography type="body">Loading...</Typography>
+                <Typography type="body">
+                  <Trans t={t}>Loading...</Trans>
+                </Typography>
               </CenteredFlexRow>
             </ParagraphContainer>
           </ContentContainer>
@@ -335,14 +403,15 @@ export const StakesPage = () => {
   }
 
   if (
-    stakesType === AuctionManagerEntryPoint.undelegate &&
-    validatorList !== null &&
-    validatorList.length === 0
+    (stakesType === AuctionManagerEntryPoint.undelegate ||
+      stakesType === AuctionManagerEntryPoint.redelegate) &&
+    undelegateValidatorList !== null &&
+    undelegateValidatorList.length === 0
   ) {
     return (
       <PopupLayout
         renderHeader={() => (
-          <PopupHeader withNetworkSwitcher withMenu withConnectionStatus />
+          <HeaderPopup withNetworkSwitcher withMenu withConnectionStatus />
         )}
         renderContent={() => <NoDelegations />}
         renderFooter={() => (
@@ -363,7 +432,7 @@ export const StakesPage = () => {
   return (
     <PopupLayout
       renderHeader={() => (
-        <PopupHeader
+        <HeaderPopup
           withNetworkSwitcher
           withMenu
           withConnectionStatus
@@ -385,20 +454,24 @@ export const StakesPage = () => {
           stakeStep={stakeStep}
           validatorForm={validatorForm}
           amountForm={amountForm}
+          newValidatorForm={newValidatorForm}
           inputAmountCSPR={inputAmountCSPR}
           validator={validator}
           setValidator={setValidator}
+          newValidator={newValidator}
+          setNewValidator={setNewValidator}
           stakesType={stakesType}
           stakeAmountMotes={stakeAmountMotes}
           setStakeAmount={setStakeAmountMotes}
           validatorList={validatorList}
+          undelegateValidatorList={undelegateValidatorList}
         />
       )}
       renderFooter={() => (
         <FooterButtonsContainer>
           {stakeStep === StakeSteps.Amount ? (
             <SpaceBetweenFlexRow>
-              <Typography type="captionRegular">
+              <Typography type="captionRegular" color="contentSecondary">
                 <Trans t={t}>Transaction fee</Trans>
               </Typography>
               <Typography type="captionHash">
@@ -412,7 +485,7 @@ export const StakesPage = () => {
           <Button color="primaryBlue" type="button" {...getButtonProps()}>
             <Trans t={t}>
               {stakeStep === StakeSteps.Confirm
-                ? getConfirmButtonText()
+                ? confirmButtonText
                 : stakeStep === StakeSteps.Success
                   ? 'Done'
                   : 'Next'}
diff --git a/src/apps/popup/pages/stakes/no-delegations.tsx b/src/apps/popup/pages/stakes/no-delegations.tsx
index 1d74464e3..72c2b80a8 100644
--- a/src/apps/popup/pages/stakes/no-delegations.tsx
+++ b/src/apps/popup/pages/stakes/no-delegations.tsx
@@ -6,7 +6,7 @@ import {
   ParagraphContainer,
   SpacingSize
 } from '@libs/layout';
-import { SvgIcon, Typography } from '@libs/ui';
+import { SvgIcon, Typography } from '@libs/ui/components';
 
 export const NoDelegations = () => {
   const { t } = useTranslation();
diff --git a/src/apps/popup/pages/stakes/redelegate-validator-dropdown-input.tsx b/src/apps/popup/pages/stakes/redelegate-validator-dropdown-input.tsx
new file mode 100644
index 000000000..162d28c13
--- /dev/null
+++ b/src/apps/popup/pages/stakes/redelegate-validator-dropdown-input.tsx
@@ -0,0 +1,202 @@
+import React, { useEffect, useState } from 'react';
+import { UseFormReturn, useWatch } from 'react-hook-form';
+import { Trans, useTranslation } from 'react-i18next';
+
+import { useFilteredValidators } from '@popup/pages/stakes/utils';
+
+import { useClickAway } from '@hooks/use-click-away';
+
+import {
+  AlignedFlexRow,
+  DropdownHeader,
+  SpacingSize,
+  VerticalSpaceContainer
+} from '@libs/layout';
+import { ValidatorResultWithId } from '@libs/services/validators-service/types';
+import {
+  Input,
+  List,
+  SvgIcon,
+  Typography,
+  ValidatorPlate
+} from '@libs/ui/components';
+import { StakeNewValidatorFormValues } from '@libs/ui/forms/stakes-form';
+
+interface ValidatorDropdownInputProps {
+  newValidatorForm: UseFormReturn<StakeNewValidatorFormValues>;
+  validatorList: ValidatorResultWithId[] | null;
+  validator: ValidatorResultWithId | null;
+  setValidator: React.Dispatch<
+    React.SetStateAction<ValidatorResultWithId | null>
+  >;
+  setStakeAmount: React.Dispatch<React.SetStateAction<string>>;
+}
+
+export const RedelegateValidatorDropdownInput = ({
+  newValidatorForm,
+  validatorList,
+  validator,
+  setValidator,
+  setStakeAmount
+}: ValidatorDropdownInputProps) => {
+  const [isOpenValidatorPublicKeysList, setIsOpenValidatorPublicKeysList] =
+    useState(true);
+  const [showValidatorPlate, setShowValidatorPlate] = useState(false);
+
+  const { t } = useTranslation();
+
+  const { register, formState, setValue, control, trigger } = newValidatorForm;
+  const { errors } = formState;
+
+  const inputValue = useWatch({
+    control: control,
+    name: 'newValidatorPublicKey'
+  });
+
+  const { ref: clickAwayRef } = useClickAway({
+    callback: async () => {
+      const resetAndTriggerPublicKey = async (value: string) => {
+        setValue('newValidatorPublicKey', value);
+        await trigger('newValidatorPublicKey');
+      };
+
+      setIsOpenValidatorPublicKeysList(false);
+
+      if (validator) {
+        if (inputValue !== '') {
+          setShowValidatorPlate(true);
+          setValue('newValidatorPublicKey', validator.public_key);
+          setStakeAmount(validator.user_stake!);
+          await resetAndTriggerPublicKey(validator.public_key);
+        } else {
+          setShowValidatorPlate(false);
+          setValidator(null);
+          await resetAndTriggerPublicKey('');
+        }
+      } else {
+        await resetAndTriggerPublicKey('');
+      }
+    }
+  });
+
+  useEffect(() => {
+    trigger('newValidatorPublicKey');
+  }, [trigger, validator]);
+
+  useEffect(() => {
+    if (formState.isValid) {
+      setShowValidatorPlate(true);
+    }
+    //   This should trigger only once
+    //   eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const filteredValidatorsList = useFilteredValidators(
+    inputValue,
+    validatorList
+  );
+
+  return showValidatorPlate && validator ? (
+    <VerticalSpaceContainer top={SpacingSize.XL}>
+      <ValidatorPlate
+        publicKey={validator.public_key}
+        fee={validator.fee}
+        name={validator?.account_info?.info?.owner?.name}
+        logo={
+          validator?.account_info?.info?.owner?.branding?.logo?.svg ||
+          validator?.account_info?.info?.owner?.branding?.logo?.png_256 ||
+          validator?.account_info?.info?.owner?.branding?.logo?.png_1024
+        }
+        totalStake={validator.user_stake}
+        delegatorsNumber={validator?.delegators_number}
+        validatorLabel={t('To validator')}
+        error={errors?.newValidatorPublicKey}
+        handleClick={() => {
+          setShowValidatorPlate(false);
+          setIsOpenValidatorPublicKeysList(true);
+        }}
+      />
+    </VerticalSpaceContainer>
+  ) : (
+    <VerticalSpaceContainer
+      top={SpacingSize.XL}
+      ref={clickAwayRef}
+      onFocus={() => {
+        setIsOpenValidatorPublicKeysList(true);
+      }}
+    >
+      {/*TODO: create Select component and rewrite this*/}
+      <Input
+        monotype
+        label={t('To validator')}
+        prefixIcon={<SvgIcon src="assets/icons/search.svg" size={24} />}
+        suffixIcon={
+          <AlignedFlexRow gap={SpacingSize.Small}>
+            {inputValue && (
+              <SvgIcon
+                src="assets/icons/cross.svg"
+                size={16}
+                onClick={() => setValue('newValidatorPublicKey', '')}
+              />
+            )}
+            <SvgIcon
+              src="assets/icons/chevron-up.svg"
+              flipByAxis={isOpenValidatorPublicKeysList ? undefined : 'X'}
+              size={16}
+            />
+          </AlignedFlexRow>
+        }
+        placeholder={t('Validator public address')}
+        {...register('newValidatorPublicKey')}
+        autoComplete="off"
+      />
+      {isOpenValidatorPublicKeysList && (
+        <List
+          contentTop={SpacingSize.Tiny}
+          rows={filteredValidatorsList}
+          maxHeight={192}
+          stickyHeader
+          borderRadius="base"
+          renderHeader={() => (
+            <DropdownHeader>
+              <Typography type="labelMedium" color="contentSecondary">
+                <Trans t={t}>Validator</Trans>
+              </Typography>
+              <Typography type="labelMedium" color="contentSecondary">
+                <Trans t={t}>Total stake, fee, delegators</Trans>
+              </Typography>
+            </DropdownHeader>
+          )}
+          renderRow={validator => {
+            const logo =
+              validator?.account_info?.info?.owner?.branding?.logo?.svg ||
+              validator?.account_info?.info?.owner?.branding?.logo?.png_256 ||
+              validator?.account_info?.info?.owner?.branding?.logo?.png_1024;
+
+            return (
+              <ValidatorPlate
+                publicKey={validator?.public_key}
+                fee={validator.fee}
+                name={validator?.account_info?.info?.owner?.name}
+                logo={logo}
+                totalStake={validator.user_stake}
+                delegatorsNumber={validator?.delegators_number}
+                handleClick={() => {
+                  setValue('newValidatorPublicKey', validator.public_key);
+                  setStakeAmount(validator.user_stake!);
+
+                  setValidator(validator);
+
+                  setIsOpenValidatorPublicKeysList(false);
+                  setShowValidatorPlate(true);
+                }}
+              />
+            );
+          }}
+          marginLeftForItemSeparatorLine={56}
+          marginLeftForHeaderSeparatorLine={0}
+        />
+      )}
+    </VerticalSpaceContainer>
+  );
+};
diff --git a/src/apps/popup/pages/stakes/validator-step.tsx b/src/apps/popup/pages/stakes/step.tsx
similarity index 81%
rename from src/apps/popup/pages/stakes/validator-step.tsx
rename to src/apps/popup/pages/stakes/step.tsx
index c6cae9dc9..fabb80791 100644
--- a/src/apps/popup/pages/stakes/validator-step.tsx
+++ b/src/apps/popup/pages/stakes/step.tsx
@@ -6,13 +6,13 @@ import {
   ParagraphContainer,
   SpacingSize
 } from '@libs/layout';
-import { Typography } from '@libs/ui';
+import { Typography } from '@libs/ui/components';
 
 interface ValidatorStepProps {
   children?: React.ReactNode;
   headerText: string;
 }
-export const ValidatorStep = ({ headerText, children }: ValidatorStepProps) => {
+export const Step = ({ headerText, children }: ValidatorStepProps) => {
   const { t } = useTranslation();
 
   return (
diff --git a/src/apps/popup/pages/stakes/utils.ts b/src/apps/popup/pages/stakes/utils.ts
new file mode 100644
index 000000000..57d2f53cb
--- /dev/null
+++ b/src/apps/popup/pages/stakes/utils.ts
@@ -0,0 +1,122 @@
+import { useCallback, useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { AuctionManagerEntryPoint } from '@src/constants';
+
+import { ValidatorResultWithId } from '@libs/services/validators-service';
+import { formatNumber, motesToCSPR } from '@libs/ui/utils';
+
+type StakeTexts = {
+  validatorStepHeaderText: string;
+  newValidatorStepHeaderText?: string;
+  amountStepHeaderText: string;
+  confirmStepHeaderText: string;
+  successStepHeaderText: string;
+  confirmStepText: string;
+  amountStepText: string;
+  amountStepMaxAmountValue: string | null;
+};
+
+type StakeActionTextMap = Record<
+  AuctionManagerEntryPoint,
+  Omit<StakeTexts, 'amountStepMaxAmountValue'>
+>;
+
+export const useFilteredValidators = (
+  inputValue: string | undefined,
+  validatorList: ValidatorResultWithId[] | null
+) => {
+  const filterValidators = useCallback(
+    (
+      inputValue: string | undefined,
+      validatorList: ValidatorResultWithId[] | null
+    ): ValidatorResultWithId[] | [] => {
+      if (!validatorList) return [];
+      if (!inputValue) return validatorList;
+
+      const lowerCaseInput = inputValue.toLowerCase();
+
+      const isIncluded = (stringToCheck: string | undefined) =>
+        stringToCheck?.toLowerCase().includes(lowerCaseInput);
+
+      return validatorList.filter(validator => {
+        const { public_key } = validator;
+        const ownerName = validator?.account_info?.info?.owner?.name;
+
+        return isIncluded(ownerName) || isIncluded(public_key);
+      });
+    },
+    []
+  );
+
+  return filterValidators(inputValue, validatorList);
+};
+
+export const useStakeActionTexts = (
+  stakesType: AuctionManagerEntryPoint,
+  stakeAmountMotes?: string
+) => {
+  const stakeActionsTextMap: StakeActionTextMap = {
+    [AuctionManagerEntryPoint.delegate]: {
+      validatorStepHeaderText: 'Delegate',
+      amountStepHeaderText: 'Delegate amount',
+      confirmStepHeaderText: 'Confirm delegation',
+      successStepHeaderText: 'You’ve submitted a delegation',
+      amountStepText: 'Delegate max',
+      confirmStepText: 'You’ll delegate'
+    },
+    [AuctionManagerEntryPoint.undelegate]: {
+      validatorStepHeaderText: 'Undelegate',
+      amountStepHeaderText: 'Undelegate amount',
+      confirmStepHeaderText: 'Confirm undelegation',
+      successStepHeaderText: 'You’ve submitted an undelegation',
+      amountStepText: 'Undelegate max:',
+      confirmStepText: 'You’ll undelegate'
+    },
+    [AuctionManagerEntryPoint.redelegate]: {
+      validatorStepHeaderText: 'Redelegate',
+      amountStepHeaderText: 'Redelegate amount',
+      newValidatorStepHeaderText: 'Delegate',
+      confirmStepHeaderText: 'Confirm redelegation',
+      successStepHeaderText: 'You’ve submitted a redelegation',
+      amountStepText: 'Redelegate max:',
+      confirmStepText: 'You’ll redelegate'
+    }
+  };
+
+  const [state, setState] = useState<StakeTexts>({
+    ...stakeActionsTextMap[stakesType],
+    amountStepMaxAmountValue: null
+  });
+
+  useEffect(() => {
+    const formattedAmountCSPR =
+      stakeAmountMotes &&
+      formatNumber(motesToCSPR(stakeAmountMotes), { precision: { max: 4 } });
+
+    setState(prevState => ({
+      ...prevState,
+      amountStepMaxAmountValue:
+        stakesType !== AuctionManagerEntryPoint.delegate
+          ? `${formattedAmountCSPR} CSPR`
+          : null
+    }));
+  }, [stakeAmountMotes, stakesType]);
+
+  return state;
+};
+
+export const useConfirmationButtonText = (
+  stakesType: AuctionManagerEntryPoint
+) => {
+  const { t } = useTranslation();
+
+  const buttonTexts = {
+    [AuctionManagerEntryPoint.delegate]: t('Confirm delegation'),
+    [AuctionManagerEntryPoint.undelegate]: t('Confirm undelegation'),
+    [AuctionManagerEntryPoint.redelegate]: t('Confirm redelegation'),
+    default: t('Confirm')
+  };
+
+  return buttonTexts[stakesType] || buttonTexts.default;
+};
diff --git a/src/libs/ui/components/validator-dropdown-input/validator-dropdown-input.tsx b/src/apps/popup/pages/stakes/validator-dropdown-input.tsx
similarity index 54%
rename from src/libs/ui/components/validator-dropdown-input/validator-dropdown-input.tsx
rename to src/apps/popup/pages/stakes/validator-dropdown-input.tsx
index 60fe8ba47..cc6df0a51 100644
--- a/src/libs/ui/components/validator-dropdown-input/validator-dropdown-input.tsx
+++ b/src/apps/popup/pages/stakes/validator-dropdown-input.tsx
@@ -1,27 +1,28 @@
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { UseFormReturn, useWatch } from 'react-hook-form';
 import { Trans, useTranslation } from 'react-i18next';
-import styled from 'styled-components';
 
-import {
-  AlignedSpaceBetweenFlexRow,
-  SpacingSize,
-  VerticalSpaceContainer
-} from '@src/libs/layout';
-import { Input, List, SvgIcon, Typography, ValidatorPlate } from '@libs/ui';
-import { StakeValidatorFormValues } from '@libs/ui/forms/stakes-form';
-import { useClickAway } from '@libs/ui/hooks/use-click-away';
-import { ValidatorResultWithId } from '@libs/services/validators-service/types';
 import { AuctionManagerEntryPoint } from '@src/constants';
 
-const DropDownHeader = styled(AlignedSpaceBetweenFlexRow)`
-  padding: 8px 16px;
+import { useFilteredValidators } from '@popup/pages/stakes/utils';
 
-  border-top-left-radius: ${({ theme }) => theme.borderRadius.base}px;
-  border-top-right-radius: ${({ theme }) => theme.borderRadius.base}px;
+import { useClickAway } from '@hooks/use-click-away';
 
-  background-color: ${({ theme }) => theme.color.backgroundPrimary};
-`;
+import {
+  AlignedFlexRow,
+  DropdownHeader,
+  SpacingSize,
+  VerticalSpaceContainer
+} from '@libs/layout';
+import { ValidatorResultWithId } from '@libs/services/validators-service/types';
+import {
+  Input,
+  List,
+  SvgIcon,
+  Typography,
+  ValidatorPlate
+} from '@libs/ui/components';
+import { StakeValidatorFormValues } from '@libs/ui/forms/stakes-form';
 
 interface ValidatorDropdownInputProps {
   validatorForm: UseFormReturn<StakeValidatorFormValues>;
@@ -32,6 +33,7 @@ interface ValidatorDropdownInputProps {
   >;
   setStakeAmount: React.Dispatch<React.SetStateAction<string>>;
   stakesType: AuctionManagerEntryPoint;
+  undelegateValidatorList: ValidatorResultWithId[] | null;
 }
 
 export const ValidatorDropdownInput = ({
@@ -40,7 +42,8 @@ export const ValidatorDropdownInput = ({
   validator,
   setValidator,
   setStakeAmount,
-  stakesType
+  stakesType,
+  undelegateValidatorList
 }: ValidatorDropdownInputProps) => {
   const [isOpenValidatorPublicKeysList, setIsOpenValidatorPublicKeysList] =
     useState(true);
@@ -59,24 +62,27 @@ export const ValidatorDropdownInput = ({
 
   const { ref: clickAwayRef } = useClickAway({
     callback: async () => {
+      const resetAndTriggerPublicKey = async (value: string) => {
+        setValue('validatorPublicKey', value);
+        await trigger('validatorPublicKey');
+      };
+
       setIsOpenValidatorPublicKeysList(false);
 
-      if (validator && inputValue !== '') {
-        setShowValidatorPlate(true);
-        setValue('validatorPublicKey', validator.public_key);
-        setStakeAmount(validator.user_stake!);
-        await trigger('validatorPublicKey');
-        return;
-      } else if (validator && inputValue === '') {
-        setShowValidatorPlate(false);
-        setValue('validatorPublicKey', '');
-        setValidator(null);
-        await trigger('validatorPublicKey');
-        return;
+      if (validator) {
+        if (inputValue !== '') {
+          setShowValidatorPlate(true);
+          setValue('validatorPublicKey', validator.public_key);
+          setStakeAmount(validator.user_stake!);
+          await resetAndTriggerPublicKey(validator.public_key);
+        } else {
+          setShowValidatorPlate(false);
+          setValidator(null);
+          await resetAndTriggerPublicKey('');
+        }
+      } else {
+        await resetAndTriggerPublicKey('');
       }
-
-      setValue('validatorPublicKey', '');
-      await trigger('validatorPublicKey');
     }
   });
 
@@ -92,41 +98,9 @@ export const ValidatorDropdownInput = ({
     //   eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
-  const useFilteredValidators = (
-    inputValue: string,
-    validatorList: ValidatorResultWithId[] | null
-  ) => {
-    const filterValidators = useCallback(
-      (
-        inputValue: string,
-        validatorList: ValidatorResultWithId[] | null
-      ): ValidatorResultWithId[] | [] => {
-        if (!validatorList) return [];
-        if (!inputValue) return validatorList;
-
-        return validatorList.filter(validator => {
-          const { public_key } = validator;
-          if (validator?.account_info?.info?.owner?.name) {
-            const { name } = validator.account_info.info.owner;
-
-            return (
-              name?.toLowerCase().includes(inputValue?.toLowerCase()) ||
-              public_key?.toLowerCase().includes(inputValue?.toLowerCase())
-            );
-          }
-
-          return public_key?.toLowerCase().includes(inputValue?.toLowerCase());
-        });
-      },
-      []
-    );
-
-    return filterValidators(inputValue, validatorList);
-  };
-
   const filteredValidatorsList = useFilteredValidators(
     inputValue,
-    validatorList
+    undelegateValidatorList || validatorList
   );
 
   useEffect(() => {
@@ -135,7 +109,8 @@ export const ValidatorDropdownInput = ({
         setLabel('To validator');
         break;
       }
-      case AuctionManagerEntryPoint.undelegate: {
+      case AuctionManagerEntryPoint.undelegate:
+      case AuctionManagerEntryPoint.redelegate: {
         setLabel('From validator');
         break;
       }
@@ -151,12 +126,16 @@ export const ValidatorDropdownInput = ({
         publicKey={validator.public_key}
         fee={validator.fee}
         name={validator?.account_info?.info?.owner?.name}
-        logo={validator?.account_info?.info?.owner?.branding?.logo?.svg}
+        logo={
+          validator?.account_info?.info?.owner?.branding?.logo?.svg ||
+          validator?.account_info?.info?.owner?.branding?.logo?.png_256 ||
+          validator?.account_info?.info?.owner?.branding?.logo?.png_1024
+        }
         // TODO: remove user_stake after we merge recipient and amount steps for undelegation
         totalStake={
-          stakesType === AuctionManagerEntryPoint.undelegate
-            ? validator.user_stake
-            : validator.total_stake
+          stakesType === AuctionManagerEntryPoint.delegate
+            ? validator.total_stake
+            : validator.user_stake
         }
         delegatorsNumber={validator?.delegators_number}
         validatorLabel={label}
@@ -181,11 +160,20 @@ export const ValidatorDropdownInput = ({
         label={label}
         prefixIcon={<SvgIcon src="assets/icons/search.svg" size={24} />}
         suffixIcon={
-          <SvgIcon
-            src="assets/icons/chevron-up.svg"
-            flipByAxis={isOpenValidatorPublicKeysList ? undefined : 'X'}
-            size={24}
-          />
+          <AlignedFlexRow gap={SpacingSize.Small}>
+            {inputValue && (
+              <SvgIcon
+                src="assets/icons/cross.svg"
+                size={16}
+                onClick={() => setValue('validatorPublicKey', '')}
+              />
+            )}
+            <SvgIcon
+              src="assets/icons/chevron-up.svg"
+              flipByAxis={isOpenValidatorPublicKeysList ? undefined : 'X'}
+              size={16}
+            />
+          </AlignedFlexRow>
         }
         placeholder={t('Validator public address')}
         {...register('validatorPublicKey')}
@@ -199,39 +187,46 @@ export const ValidatorDropdownInput = ({
           stickyHeader
           borderRadius="base"
           renderHeader={() => (
-            <DropDownHeader>
+            <DropdownHeader>
               <Typography type="labelMedium" color="contentSecondary">
                 <Trans t={t}>Validator</Trans>
               </Typography>
               <Typography type="labelMedium" color="contentSecondary">
                 <Trans t={t}>Total stake, fee, delegators</Trans>
               </Typography>
-            </DropDownHeader>
-          )}
-          renderRow={validator => (
-            <ValidatorPlate
-              publicKey={validator?.public_key}
-              fee={validator.fee}
-              name={validator?.account_info?.info?.owner?.name}
-              logo={validator?.account_info?.info?.owner?.branding?.logo?.svg}
-              // TODO: remove user_stake after we merge recipient and amount steps for undelegation
-              totalStake={
-                stakesType === AuctionManagerEntryPoint.undelegate
-                  ? validator.user_stake
-                  : validator.total_stake
-              }
-              delegatorsNumber={validator?.delegators_number}
-              handleClick={async () => {
-                setValue('validatorPublicKey', validator.public_key);
-                setStakeAmount(validator.user_stake!);
-
-                setValidator(validator);
-
-                setIsOpenValidatorPublicKeysList(false);
-                setShowValidatorPlate(true);
-              }}
-            />
+            </DropdownHeader>
           )}
+          renderRow={validator => {
+            const logo =
+              validator?.account_info?.info?.owner?.branding?.logo?.svg ||
+              validator?.account_info?.info?.owner?.branding?.logo?.png_256 ||
+              validator?.account_info?.info?.owner?.branding?.logo?.png_1024;
+
+            return (
+              <ValidatorPlate
+                publicKey={validator?.public_key}
+                fee={validator.fee}
+                name={validator?.account_info?.info?.owner?.name}
+                logo={logo}
+                // TODO: remove user_stake after we merge recipient and amount steps for undelegation
+                totalStake={
+                  stakesType === AuctionManagerEntryPoint.delegate
+                    ? validator.total_stake
+                    : validator.user_stake
+                }
+                delegatorsNumber={validator?.delegators_number}
+                handleClick={() => {
+                  setValue('validatorPublicKey', validator.public_key);
+                  setStakeAmount(validator.user_stake!);
+
+                  setValidator(validator);
+
+                  setIsOpenValidatorPublicKeysList(false);
+                  setShowValidatorPlate(true);
+                }}
+              />
+            );
+          }}
           marginLeftForItemSeparatorLine={56}
           marginLeftForHeaderSeparatorLine={0}
         />
diff --git a/src/apps/popup/pages/timeout/index.tsx b/src/apps/popup/pages/timeout/index.tsx
index 6b4a28d4c..31b20598a 100644
--- a/src/apps/popup/pages/timeout/index.tsx
+++ b/src/apps/popup/pages/timeout/index.tsx
@@ -1,19 +1,20 @@
 import React, { useMemo } from 'react';
-import { useSelector } from 'react-redux';
 import { Trans, useTranslation } from 'react-i18next';
+import { useSelector } from 'react-redux';
+
+import { TimeoutDurationSetting } from '@popup/constants';
+
+import { activeTimeoutDurationSettingChanged } from '@background/redux/settings/actions';
+import { selectTimeoutDurationSetting } from '@background/redux/settings/selectors';
+import { dispatchToMainStore } from '@background/redux/utils';
 
-import { Typography, Checkbox, List } from '@libs/ui';
 import {
   ContentContainer,
-  ParagraphContainer,
   ListItemClickableContainer,
+  ParagraphContainer,
   SpacingSize
-} from '@src/libs/layout/containers';
-
-import { dispatchToMainStore } from '@src/background/redux/utils';
-import { selectTimeoutDurationSetting } from '@src/background/redux/settings/selectors';
-import { activeTimeoutDurationSettingChanged } from '@src/background/redux/settings/actions';
-import { TimeoutDurationSetting } from '@popup/constants';
+} from '@libs/layout';
+import { Checkbox, List, Typography } from '@libs/ui/components';
 
 export function TimeoutPageContent() {
   const { t } = useTranslation();
diff --git a/src/apps/popup/pages/token-details/content.tsx b/src/apps/popup/pages/token-details/content.tsx
index 5853b7653..2074b8c47 100644
--- a/src/apps/popup/pages/token-details/content.tsx
+++ b/src/apps/popup/pages/token-details/content.tsx
@@ -7,12 +7,12 @@ import {
   ParagraphContainer,
   SpacingSize
 } from '@libs/layout';
+import { ContractPackageWithBalance } from '@libs/services/erc20-service';
 import {
+  CasperTokenActivityList,
   Erc20TokenActivityList,
-  Typography,
-  CasperTokenActivityList
-} from '@libs/ui';
-import { ContractPackageWithBalance } from '@libs/services/erc20-service';
+  Typography
+} from '@libs/ui/components';
 
 import { Token } from './token';
 
diff --git a/src/apps/popup/pages/token-details/index.tsx b/src/apps/popup/pages/token-details/index.tsx
index 8f6b77fb7..c1de5a5c7 100644
--- a/src/apps/popup/pages/token-details/index.tsx
+++ b/src/apps/popup/pages/token-details/index.tsx
@@ -1,14 +1,15 @@
 import React from 'react';
-import { useParams } from 'react-router-dom';
 import { useSelector } from 'react-redux';
+import { useParams } from 'react-router-dom';
+
+import { selectErc20Tokens } from '@background/redux/account-info/selectors';
 
 import {
+  HeaderPopup,
   HeaderSubmenuBarNavLink,
   HeaderViewInExplorer,
-  PopupHeader,
   PopupLayout
 } from '@libs/layout';
-import { selectErc20Tokens } from '@background/redux/account-info/selectors';
 
 import { TokenPageContent } from './content';
 
@@ -19,7 +20,7 @@ export const TokenDetailPage = () => {
   return (
     <PopupLayout
       renderHeader={() => (
-        <PopupHeader
+        <HeaderPopup
           withNetworkSwitcher
           withMenu
           withConnectionStatus
diff --git a/src/apps/popup/pages/token-details/token.tsx b/src/apps/popup/pages/token-details/token.tsx
index 3d372d23e..0d0b95388 100644
--- a/src/apps/popup/pages/token-details/token.tsx
+++ b/src/apps/popup/pages/token-details/token.tsx
@@ -1,8 +1,21 @@
 import React, { useEffect, useState } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
-import styled from 'styled-components';
-import { useParams } from 'react-router-dom';
 import { useSelector } from 'react-redux';
+import { useParams } from 'react-router-dom';
+import styled from 'styled-components';
+
+import { NetworkSetting, getBuyWithTopperUrl } from '@src/constants';
+
+import { formatErc20TokenBalance } from '@popup/pages/home/components/tokens-list/utils';
+import { RouterPath, useTypedLocation, useTypedNavigate } from '@popup/router';
+
+import {
+  selectActiveNetworkSetting,
+  selectApiConfigBasedOnActiveNetwork
+} from '@background/redux/settings/selectors';
+import { selectVaultActiveAccount } from '@background/redux/vault/selectors';
+
+import { TokenType, useCasperToken } from '@hooks/use-casper-token';
 
 import {
   CenteredFlexColumn,
@@ -10,17 +23,15 @@ import {
   SpaceBetweenFlexRow,
   SpacingSize
 } from '@libs/layout';
-import { Button, Link, List, SvgIcon, TokenPlate, Typography } from '@libs/ui';
-import { RouterPath, useTypedLocation, useTypedNavigate } from '@popup/router';
-import { TokenType, useCasperToken } from '@src/hooks';
+import { ContractPackageWithBalance } from '@libs/services/erc20-service';
 import {
-  selectActiveNetworkSetting,
-  selectApiConfigBasedOnActiveNetwork
-} from '@background/redux/settings/selectors';
-import { selectVaultActiveAccount } from '@background/redux/vault/selectors';
-import { getBuyWithTopperUrl, NetworkSetting } from '@src/constants';
-import { formatErc20TokenBalance } from '@popup/pages/home/components/tokens-list/utils';
-import { ContractPackageWithBalance } from '@src/libs/services/erc20-service';
+  Button,
+  Link,
+  List,
+  SvgIcon,
+  TokenPlate,
+  Typography
+} from '@libs/ui/components';
 
 const ListItemContainer = styled(SpaceBetweenFlexRow)`
   padding: 16px;
diff --git a/src/apps/popup/pages/transfer-nft/content.tsx b/src/apps/popup/pages/transfer-nft/content.tsx
index ccfb7601e..576b52215 100644
--- a/src/apps/popup/pages/transfer-nft/content.tsx
+++ b/src/apps/popup/pages/transfer-nft/content.tsx
@@ -1,8 +1,14 @@
 import React, { useMemo, useState } from 'react';
-import { Trans, useTranslation } from 'react-i18next';
-import styled from 'styled-components';
 import { UseFormReturn, useWatch } from 'react-hook-form';
+import { Trans, useTranslation } from 'react-i18next';
 import { useSelector } from 'react-redux';
+import styled from 'styled-components';
+
+import { getMetadataKeyValue, getNftTokenMetadataWithLinks } from '@src/utils';
+
+import { useTypedLocation } from '@popup/router';
+
+import { selectAccountCurrencyRate } from '@background/redux/account-info/selectors';
 
 import {
   AlignedFlexRow,
@@ -12,22 +18,19 @@ import {
   SpacingSize,
   VerticalSpaceContainer
 } from '@libs/layout';
+import { NFTTokenResult } from '@libs/services/nft-service';
 import {
   Input,
   RecipientDropdownInput,
   SvgIcon,
   Tile,
   Typography
-} from '@libs/ui';
-import { NFTTokenResult } from '@libs/services/nft-service';
-import { useTypedLocation } from '@popup/router';
-import { getMetadataKeyValue, getNftTokenMetadataWithLinks } from '@src/utils';
+} from '@libs/ui/components';
 import {
   TransferNftAmountFormValues,
   TransferNftRecipientFormValues
 } from '@libs/ui/forms/transfer-nft';
-import { formatFiatAmount } from '@libs/ui/utils/formatters';
-import { selectAccountCurrencyRate } from '@background/redux/account-info/selectors';
+import { formatFiatAmount } from '@libs/ui/utils';
 
 const Container = styled.div`
   padding: 16px;
diff --git a/src/apps/popup/pages/transfer-nft/index.tsx b/src/apps/popup/pages/transfer-nft/index.tsx
index 342562155..a9cd514b5 100644
--- a/src/apps/popup/pages/transfer-nft/index.tsx
+++ b/src/apps/popup/pages/transfer-nft/index.tsx
@@ -1,43 +1,51 @@
 import React, { useEffect, useMemo, useState } from 'react';
+import { Trans, useTranslation } from 'react-i18next';
 import { useSelector } from 'react-redux';
 import { useParams } from 'react-router-dom';
-import { Trans, useTranslation } from 'react-i18next';
 
-import {
-  FooterButtonsContainer,
-  HeaderSubmenuBarNavLink,
-  PopupHeader,
-  PopupLayout
-} from '@libs/layout';
-import { TransferNftContent } from '@popup/pages/transfer-nft/content';
-import {
-  selectAccountBalance,
-  selectAccountNftTokens
-} from '@background/redux/account-info/selectors';
-import { CSPRtoMotes } from '@libs/ui/utils/formatters';
-import { selectVaultActiveAccount } from '@background/redux/vault/selectors';
-import { selectApiConfigBasedOnActiveNetwork } from '@background/redux/settings/selectors';
 import { MapNFTTokenStandardToName } from '@src/utils';
-import { getRawPublicKey } from '@libs/entities/Account';
-import { useTransferNftForm } from '@libs/ui/forms/transfer-nft';
-import { calculateSubmitButtonDisabled } from '@libs/ui/forms/get-submit-button-state-from-validation';
-import { HomePageTabsId, TransferSuccessScreen, Button } from '@libs/ui';
-import { RouterPath, useTypedNavigate } from '@popup/router';
+
+import { TransferNftContent } from '@popup/pages/transfer-nft/content';
 import {
   getDefaultPaymentAmountBasedOnNftTokenStandard,
   getRuntimeArgs,
   signNftDeploy
 } from '@popup/pages/transfer-nft/utils';
-import { dispatchToMainStore } from '@background/redux/utils';
-import { recipientPublicKeyAdded } from '@background/redux/recent-recipient-public-keys/actions';
-import { dispatchFetchExtendedDeploysInfo } from '@libs/services/account-activity-service';
+import { RouterPath, useTypedNavigate } from '@popup/router';
+
 import {
   accountPendingTransactionsChanged,
   accountTrackingIdOfSentNftTokensChanged
 } from '@background/redux/account-info/actions';
-import { createAsymmetricKey } from '@libs/crypto/create-asymmetric-key';
-import { createErrorLocationState, ErrorPath } from '@layout/error';
+import {
+  selectAccountBalance,
+  selectAccountNftTokens
+} from '@background/redux/account-info/selectors';
 import { selectAllPublicKeys } from '@background/redux/contacts/selectors';
+import { recipientPublicKeyAdded } from '@background/redux/recent-recipient-public-keys/actions';
+import { selectApiConfigBasedOnActiveNetwork } from '@background/redux/settings/selectors';
+import { dispatchToMainStore } from '@background/redux/utils';
+import { selectVaultActiveAccount } from '@background/redux/vault/selectors';
+
+import { createAsymmetricKey } from '@libs/crypto/create-asymmetric-key';
+import { getRawPublicKey } from '@libs/entities/Account';
+import {
+  ErrorPath,
+  FooterButtonsContainer,
+  HeaderPopup,
+  HeaderSubmenuBarNavLink,
+  PopupLayout,
+  createErrorLocationState
+} from '@libs/layout';
+import { dispatchFetchExtendedDeploysInfo } from '@libs/services/account-activity-service';
+import {
+  Button,
+  HomePageTabsId,
+  TransferSuccessScreen
+} from '@libs/ui/components';
+import { calculateSubmitButtonDisabled } from '@libs/ui/forms/get-submit-button-state-from-validation';
+import { useTransferNftForm } from '@libs/ui/forms/transfer-nft';
+import { CSPRtoMotes } from '@libs/ui/utils';
 
 export const TransferNftPage = () => {
   const [showSuccessScreen, setShowSuccessScreen] = useState(false);
@@ -87,7 +95,7 @@ export const TransferNftPage = () => {
   );
 
   const { recipientForm, amountForm } = useTransferNftForm(
-    csprBalance.amountMotes,
+    csprBalance.liquidMotes,
     paymentAmount
   );
 
@@ -183,7 +191,7 @@ export const TransferNftPage = () => {
   return (
     <PopupLayout
       renderHeader={() => (
-        <PopupHeader
+        <HeaderPopup
           withNetworkSwitcher
           withMenu
           withConnectionStatus
@@ -196,7 +204,7 @@ export const TransferNftPage = () => {
       )}
       renderContent={() =>
         showSuccessScreen ? (
-          <TransferSuccessScreen headerText="You’ve sent the NFT" />
+          <TransferSuccessScreen headerText="You submitted a transaction" />
         ) : (
           <TransferNftContent
             nftToken={nftToken}
diff --git a/src/apps/popup/pages/transfer-nft/utils.ts b/src/apps/popup/pages/transfer-nft/utils.ts
index 4af251554..3a17db89f 100644
--- a/src/apps/popup/pages/transfer-nft/utils.ts
+++ b/src/apps/popup/pages/transfer-nft/utils.ts
@@ -8,12 +8,13 @@ import {
 } from 'casper-js-sdk';
 import { sub } from 'date-fns';
 
-import { NFTTokenStandard } from '@src/utils';
-import { motesToCSPR } from '@libs/ui/utils/formatters';
 import {
   NFT_CEP47_PAYMENT_AMOUNT_AVERAGE_MOTES,
   NFT_CEP78_PAYMENT_AMOUNT_AVERAGE_MOTES
 } from '@src/constants';
+import { NFTTokenStandard } from '@src/utils';
+
+import { motesToCSPR } from '@libs/ui/utils';
 
 export interface TokenArgs {
   tokenId?: string;
diff --git a/src/apps/popup/pages/transfer/amount-step.tsx b/src/apps/popup/pages/transfer/amount-step.tsx
index 29b923844..bfba53ad6 100644
--- a/src/apps/popup/pages/transfer/amount-step.tsx
+++ b/src/apps/popup/pages/transfer/amount-step.tsx
@@ -1,8 +1,15 @@
+import Big from 'big.js';
 import React, { useEffect, useState } from 'react';
-import { Trans, useTranslation } from 'react-i18next';
 import { UseFormReturn, useWatch } from 'react-hook-form';
+import { Trans, useTranslation } from 'react-i18next';
 import { useSelector } from 'react-redux';
-import Big from 'big.js';
+
+import { TRANSFER_COST_MOTES, TRANSFER_MIN_AMOUNT_MOTES } from '@src/constants';
+
+import {
+  selectAccountBalance,
+  selectAccountCurrencyRate
+} from '@background/redux/account-info/selectors';
 
 import {
   ContentContainer,
@@ -10,14 +17,9 @@ import {
   SpacingSize,
   VerticalSpaceContainer
 } from '@libs/layout';
-import { Checkbox, Input, Typography } from '@libs/ui';
-import { formatFiatAmount, motesToCSPR } from '@libs/ui/utils/formatters';
+import { Checkbox, Input, Typography } from '@libs/ui/components';
 import { TransferAmountFormValues } from '@libs/ui/forms/transfer';
-import {
-  selectAccountBalance,
-  selectAccountCurrencyRate
-} from '@background/redux/account-info/selectors';
-import { TRANSFER_COST_MOTES, TRANSFER_MIN_AMOUNT_MOTES } from '@src/constants';
+import { formatFiatAmount, motesToCSPR } from '@libs/ui/utils';
 
 interface AmountStepProps {
   amountForm: UseFormReturn<TransferAmountFormValues>;
@@ -37,9 +39,9 @@ export const AmountStep = ({ amountForm, symbol, isCSPR }: AmountStepProps) => {
 
   useEffect(() => {
     const maxAmountMotes: string =
-      csprBalance.amountMotes == null
+      csprBalance.liquidMotes == null
         ? '0'
-        : Big(csprBalance.amountMotes).sub(TRANSFER_COST_MOTES).toString();
+        : Big(csprBalance.liquidMotes).sub(TRANSFER_COST_MOTES).toString();
 
     const hasEnoughBalance = Big(maxAmountMotes).gte(TRANSFER_MIN_AMOUNT_MOTES);
     const isMaxAmountEqualMinAmount = Big(maxAmountMotes).eq(
@@ -49,7 +51,7 @@ export const AmountStep = ({ amountForm, symbol, isCSPR }: AmountStepProps) => {
     setIsChecked(isMaxAmountEqualMinAmount);
     setMaxAmountMotes(maxAmountMotes);
     setDisabled(!hasEnoughBalance);
-  }, [csprBalance.amountMotes]);
+  }, [csprBalance.liquidMotes]);
 
   const {
     register,
@@ -116,6 +118,10 @@ export const AmountStep = ({ amountForm, symbol, isCSPR }: AmountStepProps) => {
             // regex replace decimal point from beginning of string
             e.target.value = e.target.value.replace(/^\./, '');
             onChangeCSPRAmount(e);
+
+            if (isChecked) {
+              setIsChecked(false);
+            }
           }}
           error={!!errors?.amount}
           validationText={errors?.amount?.message}
diff --git a/src/apps/popup/pages/transfer/confirm-step.tsx b/src/apps/popup/pages/transfer/confirm-step.tsx
index 4067d36d0..60f7f6b08 100644
--- a/src/apps/popup/pages/transfer/confirm-step.tsx
+++ b/src/apps/popup/pages/transfer/confirm-step.tsx
@@ -1,8 +1,12 @@
+import Big from 'big.js';
 import React from 'react';
 import { Trans, useTranslation } from 'react-i18next';
-import styled from 'styled-components';
-import Big from 'big.js';
 import { useSelector } from 'react-redux';
+import styled from 'styled-components';
+
+import { TRANSFER_COST_MOTES } from '@src/constants';
+
+import { selectAccountCurrencyRate } from '@background/redux/account-info/selectors';
 
 import {
   ContentContainer,
@@ -17,14 +21,8 @@ import {
   List,
   RecipientPlate,
   Typography
-} from '@libs/ui';
-import {
-  formatFiatAmount,
-  formatNumber,
-  motesToCSPR
-} from '@libs/ui/utils/formatters';
-import { TRANSFER_COST_MOTES } from '@src/constants';
-import { selectAccountCurrencyRate } from '@background/redux/account-info/selectors';
+} from '@libs/ui/components';
+import { formatFiatAmount, formatNumber, motesToCSPR } from '@libs/ui/utils';
 
 export const ListItemContainer = styled(SpaceBetweenFlexRow)`
   padding: 12px 16px;
diff --git a/src/apps/popup/pages/transfer/content.tsx b/src/apps/popup/pages/transfer/content.tsx
index 860db2663..2e171dba1 100644
--- a/src/apps/popup/pages/transfer/content.tsx
+++ b/src/apps/popup/pages/transfer/content.tsx
@@ -1,16 +1,16 @@
 import React, { useState } from 'react';
 import { UseFormReturn } from 'react-hook-form';
 
+import { TransferSuccessScreen } from '@libs/ui/components';
 import {
   TransferAmountFormValues,
   TransferRecipientFormValues
 } from '@libs/ui/forms/transfer';
-import { TransferSuccessScreen } from '@libs/ui';
 
-import { TransactionSteps } from './utils';
-import { RecipientStep } from './recipient-step';
 import { AmountStep } from './amount-step';
 import { ConfirmStep } from './confirm-step';
+import { RecipientStep } from './recipient-step';
+import { TransactionSteps } from './utils';
 
 interface TransferPageContentProps {
   transferStep: TransactionSteps;
diff --git a/src/apps/popup/pages/transfer/index.tsx b/src/apps/popup/pages/transfer/index.tsx
index 109757092..815b8d159 100644
--- a/src/apps/popup/pages/transfer/index.tsx
+++ b/src/apps/popup/pages/transfer/index.tsx
@@ -1,22 +1,42 @@
+import { CEP18Client } from 'casper-cep18-js-client';
+import { CLPublicKey, DeployUtil } from 'casper-js-sdk';
+import { sub } from 'date-fns';
 import React, { useEffect, useMemo, useState } from 'react';
-import { useSelector } from 'react-redux';
 import { Trans, useTranslation } from 'react-i18next';
-import { CLPublicKey, DeployUtil } from 'casper-js-sdk';
-import { CEP18Client } from 'casper-cep18-js-client';
+import { useSelector } from 'react-redux';
 import { useParams } from 'react-router-dom';
-import { sub } from 'date-fns';
 
 import {
+  ERC20_PAYMENT_AMOUNT_AVERAGE_MOTES,
+  TRANSFER_COST_MOTES
+} from '@src/constants';
+import { useActiveAccountErc20Tokens } from '@src/hooks/use-active-account-erc20-tokens';
+
+import { TransferPageContent } from '@popup/pages/transfer/content';
+import { RouterPath, useTypedLocation, useTypedNavigate } from '@popup/router';
+
+import { accountPendingTransactionsChanged } from '@background/redux/account-info/actions';
+import { selectAccountBalance } from '@background/redux/account-info/selectors';
+import { selectAllPublicKeys } from '@background/redux/contacts/selectors';
+import { recipientPublicKeyAdded } from '@background/redux/recent-recipient-public-keys/actions';
+import { selectApiConfigBasedOnActiveNetwork } from '@background/redux/settings/selectors';
+import { dispatchToMainStore } from '@background/redux/utils';
+import { selectVaultActiveAccount } from '@background/redux/vault/selectors';
+
+import {
+  ErrorPath,
   FooterButtonsContainer,
+  HeaderPopup,
   HeaderSubmenuBarNavLink,
-  PopupHeader,
   PopupLayout,
-  SpaceBetweenFlexRow
+  SpaceBetweenFlexRow,
+  createErrorLocationState
 } from '@libs/layout';
+import { dispatchFetchExtendedDeploysInfo } from '@libs/services/account-activity-service';
+import { signAndDeploy } from '@libs/services/deployer-service';
 import { makeNativeTransferDeploy } from '@libs/services/transfer-service/transfer-service';
-import { selectVaultActiveAccount } from '@background/redux/vault/selectors';
-import { selectApiConfigBasedOnActiveNetwork } from '@background/redux/settings/selectors';
-import { TransferPageContent } from '@popup/pages/transfer/content';
+import { Button, HomePageTabsId, Typography } from '@libs/ui/components';
+import { calculateSubmitButtonDisabled } from '@libs/ui/forms/get-submit-button-state-from-validation';
 import { useTransferForm } from '@libs/ui/forms/transfer';
 import {
   CSPRtoMotes,
@@ -24,25 +44,9 @@ import {
   formatNumber,
   motesToCSPR,
   multiplyErc20Balance
-} from '@libs/ui/utils/formatters';
-import { RouterPath, useTypedLocation, useTypedNavigate } from '@popup/router';
-import { Button, HomePageTabsId, Typography } from '@libs/ui';
-import {
-  ERC20_PAYMENT_AMOUNT_AVERAGE_MOTES,
-  TRANSFER_COST_MOTES
-} from '@src/constants';
-import { calculateSubmitButtonDisabled } from '@libs/ui/forms/get-submit-button-state-from-validation';
-import { dispatchToMainStore } from '@background/redux/utils';
-import { recipientPublicKeyAdded } from '@src/background/redux/recent-recipient-public-keys/actions';
-import { signAndDeploy } from '@src/libs/services/deployer-service';
-import { useActiveAccountErc20Tokens } from '@src/hooks/use-active-account-erc20-tokens';
-import { selectAccountBalance } from '@src/background/redux/account-info/selectors';
-import { dispatchFetchExtendedDeploysInfo } from '@src/libs/services/account-activity-service';
-import { accountPendingTransactionsChanged } from '@src/background/redux/account-info/actions';
-import { createErrorLocationState, ErrorPath } from '@layout/error';
-import { selectAllPublicKeys } from '@background/redux/contacts/selectors';
+} from '@libs/ui/utils';
 
-import { getIsErc20Transfer, TransactionSteps } from './utils';
+import { TransactionSteps, getIsErc20Transfer } from './utils';
 
 export const TransferPage = () => {
   const { t } = useTranslation();
@@ -84,7 +88,7 @@ export const TransferPage = () => {
     null;
   const balance = isErc20Transfer
     ? erc20Balance
-    : csprBalance.amountMotes && motesToCSPR(csprBalance.amountMotes);
+    : csprBalance.liquidMotes && motesToCSPR(csprBalance.liquidMotes);
   const formattedBalance = formatNumber(balance || '', {
     precision: { max: 5 }
   });
@@ -96,7 +100,7 @@ export const TransferPage = () => {
   const { amountForm, recipientForm } = useTransferForm(
     erc20Balance,
     isErc20Transfer,
-    csprBalance.amountMotes,
+    csprBalance.liquidMotes,
     paymentAmount
   );
 
@@ -118,7 +122,7 @@ export const TransferPage = () => {
     trigger,
     amountFormState.touchedFields.amount,
     erc20Balance,
-    csprBalance.amountMotes,
+    csprBalance.liquidMotes,
     paymentAmount
   ]);
 
@@ -394,7 +398,7 @@ export const TransferPage = () => {
   return (
     <PopupLayout
       renderHeader={() => (
-        <PopupHeader
+        <HeaderPopup
           withNetworkSwitcher
           withMenu
           withConnectionStatus
@@ -427,7 +431,7 @@ export const TransferPage = () => {
           {transferStep === TransactionSteps.Confirm ||
           transferStep === TransactionSteps.Success ? null : (
             <SpaceBetweenFlexRow>
-              <Typography type="captionRegular">
+              <Typography type="captionRegular" color="contentSecondary">
                 <Trans t={t}>Transaction fee</Trans>
               </Typography>
               <Typography type="captionHash">
diff --git a/src/apps/popup/pages/transfer/recipient-step.tsx b/src/apps/popup/pages/transfer/recipient-step.tsx
index b9171780f..12ec13f9e 100644
--- a/src/apps/popup/pages/transfer/recipient-step.tsx
+++ b/src/apps/popup/pages/transfer/recipient-step.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
-import { Trans, useTranslation } from 'react-i18next';
 import { UseFormReturn } from 'react-hook-form';
+import { Trans, useTranslation } from 'react-i18next';
 
 import {
   ContentContainer,
@@ -8,10 +8,10 @@ import {
   SpacingSize
 } from '@libs/layout';
 import {
-  Typography,
   ActiveAccountPlate,
-  RecipientDropdownInput
-} from '@libs/ui';
+  RecipientDropdownInput,
+  Typography
+} from '@libs/ui/components';
 import { TransferRecipientFormValues } from '@libs/ui/forms/transfer';
 
 interface RecipientStepProps {
diff --git a/src/apps/popup/pages/wallet-qr-code/content.tsx b/src/apps/popup/pages/wallet-qr-code/content.tsx
index 9cfa9a758..321a94261 100644
--- a/src/apps/popup/pages/wallet-qr-code/content.tsx
+++ b/src/apps/popup/pages/wallet-qr-code/content.tsx
@@ -1,6 +1,6 @@
+import { QRCodeCanvas } from 'qrcode.react';
 import React, { useEffect, useState } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
-import { QRCodeCanvas } from 'qrcode.react';
 import styled, { useTheme } from 'styled-components';
 
 import {
@@ -9,7 +9,7 @@ import {
   ParagraphContainer,
   SpacingSize
 } from '@libs/layout';
-import { Typography } from '@libs/ui';
+import { Typography } from '@libs/ui/components';
 
 const QRContainer = styled(CenteredFlexRow)`
   padding: 20px 16px;
diff --git a/src/apps/popup/pages/wallet-qr-code/index.tsx b/src/apps/popup/pages/wallet-qr-code/index.tsx
index 1e6d7d9f6..50be011e8 100644
--- a/src/apps/popup/pages/wallet-qr-code/index.tsx
+++ b/src/apps/popup/pages/wallet-qr-code/index.tsx
@@ -1,19 +1,21 @@
 import React, { useCallback, useState } from 'react';
 import { shallowEqual, useSelector } from 'react-redux';
 
-import {
-  HeaderSubmenuBarNavLink,
-  PopupHeader,
-  PopupLayout
-} from '@libs/layout';
+import { PasswordProtectionPage } from '@popup/pages/password-protection-page';
 import { WalletQrCodePageContent } from '@popup/pages/wallet-qr-code/content';
+
 import {
   selectSecretPhrase,
   selectVaultDerivedAccounts,
   selectVaultImportedAccounts
 } from '@background/redux/vault/selectors';
+
 import { generateSyncWalletQrData } from '@libs/crypto';
-import { PasswordProtectionPage } from '@popup/pages/password-protection-page';
+import {
+  HeaderPopup,
+  HeaderSubmenuBarNavLink,
+  PopupLayout
+} from '@libs/layout';
 
 export const WalletQrCodePage = () => {
   const [qrStrings, setQrStrings] = useState<string[]>([]);
@@ -60,7 +62,7 @@ export const WalletQrCodePage = () => {
   return (
     <PopupLayout
       renderHeader={() => (
-        <PopupHeader
+        <HeaderPopup
           withNetworkSwitcher
           withMenu
           withConnectionStatus
diff --git a/src/apps/popup/router/paths.ts b/src/apps/popup/router/paths.ts
index de82cbe49..e50e55d49 100644
--- a/src/apps/popup/router/paths.ts
+++ b/src/apps/popup/router/paths.ts
@@ -25,6 +25,7 @@ export enum RouterPath {
   ChangePassword = '/change-password',
   Delegate = '/delegate',
   Undelegate = '/undelegate',
+  Redelegate = '/redelegate',
   ContactList = '/contact-list',
   AddContact = '/add-contact',
   ContactDetails = '/contact-list/:contactName'
diff --git a/src/apps/popup/router/types.ts b/src/apps/popup/router/types.ts
index 43f3d6839..795020a8e 100644
--- a/src/apps/popup/router/types.ts
+++ b/src/apps/popup/router/types.ts
@@ -1,6 +1,8 @@
 import { ActivityType } from '@src/constants';
-import { TokenType } from '@src/hooks';
-import { ErrorLocationState } from '@layout/error';
+
+import { TokenType } from '@hooks/use-casper-token';
+
+import { ErrorLocationState } from '@libs/layout';
 
 export interface LocationState extends ErrorLocationState {
   showNavigationMenu?: boolean;
diff --git a/src/apps/popup/router/use-navigation-menu.ts b/src/apps/popup/router/use-navigation-menu.ts
index 2ff99b314..9085455eb 100644
--- a/src/apps/popup/router/use-navigation-menu.ts
+++ b/src/apps/popup/router/use-navigation-menu.ts
@@ -1,4 +1,5 @@
-import { useTypedLocation, useTypedNavigate } from '@popup/router';
+import { useTypedLocation } from './use-typed-location';
+import { useTypedNavigate } from './use-typed-navigate';
 
 export function useNavigationMenu() {
   const navigate = useTypedNavigate();
diff --git a/src/apps/popup/router/use-typed-location.ts b/src/apps/popup/router/use-typed-location.ts
index d7536ad4e..218892aac 100644
--- a/src/apps/popup/router/use-typed-location.ts
+++ b/src/apps/popup/router/use-typed-location.ts
@@ -1,7 +1,7 @@
-import { useLocation } from 'react-router-dom';
 import { Location } from '@remix-run/router';
+import { useLocation } from 'react-router-dom';
 
-import { LocationState } from '@popup/router/types';
+import { LocationState } from './types';
 
 interface UseTypedLocation extends Location {
   state: LocationState;
diff --git a/src/apps/popup/router/use-typed-navigate.ts b/src/apps/popup/router/use-typed-navigate.ts
index cc25d4c3c..03b7d3dab 100644
--- a/src/apps/popup/router/use-typed-navigate.ts
+++ b/src/apps/popup/router/use-typed-navigate.ts
@@ -1,5 +1,6 @@
 import { To, useNavigate } from 'react-router-dom';
-import { LocationState } from '@popup/router/types';
+
+import { LocationState } from './types';
 
 export function useTypedNavigate() {
   const navigate = useNavigate();
diff --git a/src/apps/signature-request/app-router.tsx b/src/apps/signature-request/app-router.tsx
index 3051f3980..abbd96b6a 100644
--- a/src/apps/signature-request/app-router.tsx
+++ b/src/apps/signature-request/app-router.tsx
@@ -2,15 +2,17 @@ import React from 'react';
 import { useSelector } from 'react-redux';
 import { HashRouter, Route, Routes } from 'react-router-dom';
 
+import { useUserActivityTracker } from '@src/hooks/use-user-activity-tracker';
+
 import {
   RouterPath,
   useTypedLocation,
   useTypedNavigate
-} from '@src/apps/signature-request/router';
-import { selectVaultIsLocked } from '@src/background/redux/session/selectors';
-import { useUserActivityTracker } from '@src/hooks/use-user-activity-tracker';
-import { ErrorPath, WindowErrorPage } from '@src/libs/layout/error';
-import { LockedRouter } from '@src/libs/layout/locked-router';
+} from '@signature-request/router';
+
+import { selectVaultIsLocked } from '@background/redux/session/selectors';
+
+import { ErrorPath, LockedRouter, WindowErrorPage } from '@libs/layout';
 
 import { SignDeployPage } from './pages/sign-deploy';
 import { SignMessagePage } from './pages/sign-message';
diff --git a/src/apps/signature-request/index.tsx b/src/apps/signature-request/index.tsx
index 11922c224..36705b948 100644
--- a/src/apps/signature-request/index.tsx
+++ b/src/apps/signature-request/index.tsx
@@ -1,27 +1,26 @@
-import '@libs/i18n/i18n';
-
 import React, { Suspense, useState } from 'react';
 import { render } from 'react-dom';
-import { ThemeProvider } from 'styled-components';
 import { Provider as ReduxProvider } from 'react-redux/es/exports';
+import { ThemeProvider } from 'styled-components';
 
-import { darkTheme, GlobalStyle, lightTheme } from '@libs/ui';
+import { useSubscribeToRedux } from '@src/hooks/use-subscribe-to-redux';
+import { isSafariBuild } from '@src/utils';
 
+import { createMainStoreReplica } from '@background/redux/get-main-store';
+import { themeModeSettingChanged } from '@background/redux/settings/actions';
+import { selectThemeModeSetting } from '@background/redux/settings/selectors';
+import { ThemeMode } from '@background/redux/settings/types';
+import { PopupState } from '@background/redux/types';
+import { dispatchToMainStore } from '@background/redux/utils';
 import { signWindowInit } from '@background/redux/windowManagement/actions';
-import {
-  createMainStoreReplica,
-  dispatchToMainStore,
-  PopupState
-} from '@background/redux/utils';
-import { ErrorBoundary } from '@src/libs/layout/error';
+
+import { useSystemThemeDetector } from '@hooks/use-system-theme-detector';
+
+import '@libs/i18n/i18n';
+import { ErrorBoundary } from '@libs/layout';
+import { GlobalStyle, darkTheme, lightTheme } from '@libs/ui';
 
 import { AppRouter } from './app-router';
-import { useSubscribeToRedux } from '@src/hooks/use-subscribe-to-redux';
-import { selectThemeModeSetting } from '@background/redux/settings/selectors';
-import { useSystemThemeDetector } from '@src/hooks';
-import { themeModeSettingChanged } from '@background/redux/settings/actions';
-import { ThemeMode } from '@background/redux/settings/types';
-import { isSafariBuild } from '@src/utils';
 
 const Tree = () => {
   const [state, setState] = useState<PopupState | null>(null);
diff --git a/src/apps/signature-request/pages/sign-deploy/deploy-types.ts b/src/apps/signature-request/pages/sign-deploy/deploy-types.ts
index 2fb8df5f5..740657407 100644
--- a/src/apps/signature-request/pages/sign-deploy/deploy-types.ts
+++ b/src/apps/signature-request/pages/sign-deploy/deploy-types.ts
@@ -19,6 +19,8 @@ export type SignatureRequestFields = {
   chainName: string;
   deployType: DeployType;
   entryPoint?: string;
+  contractHash?: string;
+  contractName?: string;
 };
 
 export type SignatureRequestArguments = {
diff --git a/src/apps/signature-request/pages/sign-deploy/deploy-utils.ts b/src/apps/signature-request/pages/sign-deploy/deploy-utils.ts
index fe2b19602..2c7300aa5 100644
--- a/src/apps/signature-request/pages/sign-deploy/deploy-utils.ts
+++ b/src/apps/signature-request/pages/sign-deploy/deploy-utils.ts
@@ -22,9 +22,9 @@ import {
   ArgDict,
   CasperDeploy,
   DeployType,
+  ParsedDeployArgValue,
   ParsedValueType,
-  SignatureRequestKeys,
-  ParsedDeployArgValue
+  SignatureRequestKeys
 } from './deploy-types';
 
 export function getDeployType(deploy: CasperDeploy): DeployType {
@@ -60,6 +60,24 @@ export function getEntryPoint(deploy: CasperDeploy): string | undefined {
     : storedContractObj?.entryPoint;
 }
 
+export const getContractHash = (deploy: CasperDeploy) => {
+  const storedContractObj = getStoredContractObjFromSession(deploy.session);
+
+  return storedContractObj instanceof DeployUtil.StoredContractByHash ||
+    storedContractObj instanceof DeployUtil.StoredVersionedContractByHash
+    ? storedContractObj.hash
+    : undefined;
+};
+
+export const getContractName = (deploy: CasperDeploy) => {
+  const storedContractObj = getStoredContractObjFromSession(deploy.session);
+
+  return storedContractObj instanceof DeployUtil.StoredContractByName ||
+    storedContractObj instanceof DeployUtil.StoredVersionedContractByName
+    ? storedContractObj.name
+    : undefined;
+};
+
 export function getDeployArgs(deploy: CasperDeploy): ArgDict {
   if (deploy.session.transfer) {
     return getDeployArgsForTransfer(deploy.session.transfer);
@@ -294,7 +312,8 @@ export const isKeyOfHashValue = (key: string) => {
     'new_validator',
     'recipient',
     'recipientKey',
-    'recipientHash'
+    'recipientHash',
+    'contractHash'
   ];
   return keysOfHashValues.includes(key as SignatureRequestKeys);
 };
diff --git a/src/apps/signature-request/pages/sign-deploy/deploy-value.tsx b/src/apps/signature-request/pages/sign-deploy/deploy-value.tsx
index 4249019c1..44c65d31b 100644
--- a/src/apps/signature-request/pages/sign-deploy/deploy-value.tsx
+++ b/src/apps/signature-request/pages/sign-deploy/deploy-value.tsx
@@ -1,20 +1,16 @@
-import React from 'react';
 import { CLValue } from 'casper-js-sdk';
+import React from 'react';
 
-import {
-  formatNumber,
-  formatDate,
-  motesToCSPR
-} from '@libs/ui/utils/formatters';
-import { Hash, HashVariant, Typography } from '@src/libs/ui';
+import { Hash, HashVariant, Typography } from '@libs/ui/components';
+import { formatDate, formatNumber, motesToCSPR } from '@libs/ui/utils';
 
 import {
+  getDeployParsedValue,
   isDeployArgValueHash,
   isDeployArgValueNumber,
-  isKeyOfHashValue,
   isKeyOfCurrencyValue,
-  isKeyOfTimestampValue,
-  getDeployParsedValue
+  isKeyOfHashValue,
+  isKeyOfTimestampValue
 } from './deploy-utils';
 
 export function DeployValue({
diff --git a/src/apps/signature-request/pages/sign-deploy/derive-deploy-info-from-deploy-raw.ts b/src/apps/signature-request/pages/sign-deploy/derive-deploy-info-from-deploy-raw.ts
index b4951c71f..de7790764 100644
--- a/src/apps/signature-request/pages/sign-deploy/derive-deploy-info-from-deploy-raw.ts
+++ b/src/apps/signature-request/pages/sign-deploy/derive-deploy-info-from-deploy-raw.ts
@@ -1,11 +1,14 @@
+import { convertBytesToHex } from '@libs/crypto/utils';
+
 import { CasperDeploy } from './deploy-types';
 import {
+  getContractHash,
+  getContractName,
+  getDeployArgs,
   getDeployPayment,
   getDeployType,
-  getDeployArgs,
   getEntryPoint
 } from './deploy-utils';
-import { convertBytesToHex } from '@src/libs/crypto/utils';
 
 export function deriveDeployInfoFromDeployRaw(deploy: CasperDeploy) {
   const {
@@ -16,6 +19,11 @@ export function deriveDeployInfoFromDeployRaw(deploy: CasperDeploy) {
   const deployType = getDeployType(deploy);
   const deployArgs = getDeployArgs(deploy);
   const entryPoint = getEntryPoint(deploy);
+  const contractHashBytes = getContractHash(deploy);
+  const contractName = getContractName(deploy);
+  const contractHash = contractHashBytes
+    ? convertBytesToHex(contractHashBytes)
+    : undefined;
 
   return {
     account: account.toHex(false),
@@ -23,6 +31,8 @@ export function deriveDeployInfoFromDeployRaw(deploy: CasperDeploy) {
     bodyHash: convertBytesToHex(bodyHash),
     gasPrice: gasPrice.toString(),
     timestamp: timestamp.toString(),
+    contractHash,
+    contractName,
     chainName,
     deployType,
     payment,
diff --git a/src/apps/signature-request/pages/sign-deploy/index.tsx b/src/apps/signature-request/pages/sign-deploy/index.tsx
index af110d766..d5c7e8c2c 100644
--- a/src/apps/signature-request/pages/sign-deploy/index.tsx
+++ b/src/apps/signature-request/pages/sign-deploy/index.tsx
@@ -3,25 +3,27 @@ import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 import { useSelector } from 'react-redux';
 
-import {
-  FooterButtonsContainer,
-  LayoutWindow,
-  PopupHeader
-} from '@libs/layout';
-import { closeCurrentWindow } from '@src/background/close-current-window';
+import { closeCurrentWindow } from '@background/close-current-window';
 import {
   selectConnectedAccountNamesWithActiveOrigin,
   selectDeploysJsonById,
   selectVaultAccounts
-} from '@src/background/redux/vault/selectors';
-import { sdkMethod } from '@src/content/sdk-method';
-import { Button } from '@src/libs/ui';
+} from '@background/redux/vault/selectors';
+import { sendSdkResponseToSpecificTab } from '@background/send-sdk-response-to-specific-tab';
+
+import { sdkMethod } from '@content/sdk-method';
+
+import { signDeploy } from '@libs/crypto';
+import { convertBytesToHex } from '@libs/crypto/utils';
+import {
+  FooterButtonsContainer,
+  HeaderPopup,
+  LayoutWindow
+} from '@libs/layout';
+import { Button } from '@libs/ui/components';
 
-import { SignDeployContent } from './sign-deploy-content';
-import { signDeploy } from '@src/libs/crypto';
 import { CasperDeploy } from './deploy-types';
-import { convertBytesToHex } from '@src/libs/crypto/utils';
-import { sendSdkResponseToSpecificTab } from '@src/background/send-sdk-response-to-specific-tab';
+import { SignDeployContent } from './sign-deploy-content';
 
 export function SignDeployPage() {
   const { t } = useTranslation();
@@ -132,7 +134,7 @@ export function SignDeployPage() {
 
   return (
     <LayoutWindow
-      renderHeader={() => <PopupHeader withConnectionStatus />}
+      renderHeader={() => <HeaderPopup />}
       renderContent={() => (
         <SignDeployContent
           deploy={deploy}
diff --git a/src/apps/signature-request/pages/sign-deploy/sign-deploy-content.tsx b/src/apps/signature-request/pages/sign-deploy/sign-deploy-content.tsx
index 6f3308c14..af94e0a89 100644
--- a/src/apps/signature-request/pages/sign-deploy/sign-deploy-content.tsx
+++ b/src/apps/signature-request/pages/sign-deploy/sign-deploy-content.tsx
@@ -8,18 +8,18 @@ import {
   ParagraphContainer,
   SpaceBetweenFlexRow,
   SpacingSize
-} from '@layout/containers';
-import { Accordion, List, SvgIcon, Typography } from '@libs/ui';
+} from '@libs/layout';
+import { Accordion, List, SvgIcon, Typography } from '@libs/ui/components';
 
-import { DeployValue } from './deploy-value';
 import {
   CasperDeploy,
+  ParsedValueType,
   SignatureRequestFields,
-  SignatureRequestKeys,
-  ParsedValueType
+  SignatureRequestKeys
 } from './deploy-types';
-import { deriveDeployInfoFromDeployRaw } from './derive-deploy-info-from-deploy-raw';
 import { getDeployParsedValue } from './deploy-utils';
+import { DeployValue } from './deploy-value';
+import { deriveDeployInfoFromDeployRaw } from './derive-deploy-info-from-deploy-raw';
 
 const ListItemContainer = styled(SpaceBetweenFlexRow)`
   margin: 16px;
@@ -76,7 +76,9 @@ export function SignDeployContent({
     recipientKey: t('Recipient (Key)'),
     recipientHash: t('Recipient (Hash)'),
     entryPoint: t('Entry point'),
-    token_metas: t('Token metas')
+    token_metas: t('Token metas'),
+    contractHash: t('Contract hash'),
+    contractName: t('Contract name')
   };
 
   const deployInfo = deriveDeployInfoFromDeployRaw(deploy);
@@ -91,7 +93,14 @@ export function SignDeployContent({
     deployType: deployInfo.deployType
   };
   const deployDetailRecords = Object.entries(signatureRequest);
-  if (deployInfo.entryPoint != null) {
+
+  if (deployInfo.contractName) {
+    deployDetailRecords.push(['contractName', deployInfo.contractName]);
+  }
+  if (deployInfo.contractHash) {
+    deployDetailRecords.push(['contractHash', deployInfo.contractHash]);
+  }
+  if (deployInfo.entryPoint) {
     deployDetailRecords.push(['entryPoint', deployInfo.entryPoint]);
   }
 
diff --git a/src/apps/signature-request/pages/sign-message/index.tsx b/src/apps/signature-request/pages/sign-message/index.tsx
index 2946a9d6b..827521aa7 100644
--- a/src/apps/signature-request/pages/sign-message/index.tsx
+++ b/src/apps/signature-request/pages/sign-message/index.tsx
@@ -2,23 +2,25 @@ import React, { useCallback, useEffect, useMemo } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 import { useSelector } from 'react-redux';
 
-import {
-  FooterButtonsContainer,
-  LayoutWindow,
-  PopupHeader
-} from '@libs/layout';
-import { closeCurrentWindow } from '@src/background/close-current-window';
+import { closeCurrentWindow } from '@background/close-current-window';
 import {
   selectConnectedAccountNamesWithActiveOrigin,
   selectVaultAccounts
-} from '@src/background/redux/vault/selectors';
-import { sdkMethod } from '@src/content/sdk-method';
-import { Button } from '@src/libs/ui';
+} from '@background/redux/vault/selectors';
+import { sendSdkResponseToSpecificTab } from '@background/send-sdk-response-to-specific-tab';
+
+import { sdkMethod } from '@content/sdk-method';
+
+import { signMessage } from '@libs/crypto/sign-message';
+import { convertBytesToHex } from '@libs/crypto/utils';
+import {
+  FooterButtonsContainer,
+  HeaderPopup,
+  LayoutWindow
+} from '@libs/layout';
+import { Button } from '@libs/ui/components';
 
 import { SignMessageContent } from './sign-message-content';
-import { convertBytesToHex } from '@src/libs/crypto/utils';
-import { signMessage } from '@src/libs/crypto/sign-message';
-import { sendSdkResponseToSpecificTab } from '@src/background/send-sdk-response-to-specific-tab';
 
 export function SignMessagePage() {
   const { t } = useTranslation();
@@ -115,7 +117,7 @@ export function SignMessagePage() {
 
   return (
     <LayoutWindow
-      renderHeader={() => <PopupHeader withConnectionStatus />}
+      renderHeader={() => <HeaderPopup />}
       renderContent={() => (
         <SignMessageContent
           message={message}
diff --git a/src/apps/signature-request/pages/sign-message/sign-message-content.tsx b/src/apps/signature-request/pages/sign-message/sign-message-content.tsx
index 34fc9129f..4712a4b71 100644
--- a/src/apps/signature-request/pages/sign-message/sign-message-content.tsx
+++ b/src/apps/signature-request/pages/sign-message/sign-message-content.tsx
@@ -6,9 +6,9 @@ import {
   PageContainer,
   ParagraphContainer,
   SpacingSize
-} from '@layout/containers';
-import { FormField, Input, TextArea, Typography } from '@libs/ui';
-import { truncateKey } from '@src/libs/ui/components/hash/utils';
+} from '@libs/layout';
+import { FormField, Input, TextArea, Typography } from '@libs/ui/components';
+import { truncateKey } from '@libs/ui/components/hash/utils';
 
 export interface SignMessageContentProps {
   message: string;
diff --git a/src/apps/signature-request/router/types.ts b/src/apps/signature-request/router/types.ts
index c7f911679..5518388f2 100644
--- a/src/apps/signature-request/router/types.ts
+++ b/src/apps/signature-request/router/types.ts
@@ -1,3 +1,3 @@
-import { ErrorLocationState } from '@src/libs/layout/error';
+import { ErrorLocationState } from '@libs/layout';
 
 export interface LocationState extends ErrorLocationState {}
diff --git a/src/apps/signature-request/router/use-typed-location.ts b/src/apps/signature-request/router/use-typed-location.ts
index 54c9c63aa..dd168a3ca 100644
--- a/src/apps/signature-request/router/use-typed-location.ts
+++ b/src/apps/signature-request/router/use-typed-location.ts
@@ -1,4 +1,5 @@
 import { useLocation } from 'react-router-dom';
+
 import { LocationState } from './types';
 
 export function useTypedLocation() {
diff --git a/src/apps/signature-request/router/use-typed-navigate.ts b/src/apps/signature-request/router/use-typed-navigate.ts
index 8b1a6b974..03b7d3dab 100644
--- a/src/apps/signature-request/router/use-typed-navigate.ts
+++ b/src/apps/signature-request/router/use-typed-navigate.ts
@@ -1,4 +1,5 @@
 import { To, useNavigate } from 'react-router-dom';
+
 import { LocationState } from './types';
 
 export function useTypedNavigate() {
diff --git a/src/assets/icons/cross.svg b/src/assets/icons/cross.svg
new file mode 100644
index 000000000..e30990dad
--- /dev/null
+++ b/src/assets/icons/cross.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M1 8.00098C1 11.867 4.13401 15.001 8 15.001C11.866 15.001 15 11.867 15 8.00098C15 4.13498 11.866 1.00098 8 1.00098C4.13401 1.00098 1 4.13498 1 8.00098ZM10.1302 4.88125L11.1201 5.8712L8.99025 8.00106L11.1202 10.131L10.1302 11.1209L8.0003 8.99101L5.87011 11.1212L4.88016 10.1312L7.01035 8.00106L4.8802 5.87092L5.87015 4.88097L8.0003 7.01111L10.1302 4.88125Z" fill="#BCBDC1"/>
+</svg>
diff --git a/src/assets/icons/redelegate.svg b/src/assets/icons/redelegate.svg
new file mode 100644
index 000000000..45f611324
--- /dev/null
+++ b/src/assets/icons/redelegate.svg
@@ -0,0 +1,3 @@
+<svg width="23" height="24" viewBox="0 0 23 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14.7074 21.708L18.7074 17.7122C19.0681 17.3519 19.0961 16.7848 18.7914 16.3923L18.7082 16.2981L14.7082 12.2928C14.318 11.9021 13.6848 11.9016 13.294 12.2919C12.9333 12.6522 12.9052 13.2194 13.21 13.6119L13.2931 13.7061L15.5837 15.9995L5 15.9995C4.48716 15.9995 4.06449 16.3855 4.00673 16.8829L4 16.9995C4 17.5123 4.38604 17.935 4.88338 17.9927L5 17.9995L15.5907 17.9995L13.2939 20.293C12.9333 20.6533 12.9052 21.2205 13.2101 21.613L13.2932 21.7072C13.6535 22.0679 14.2207 22.0959 14.6132 21.7911L14.7074 21.708L18.7074 17.7122L14.7074 21.708ZM18.9907 7.1161L18.9975 6.99948C18.9975 6.48664 18.6114 6.06397 18.1141 6.0062L17.9975 5.99948L7.41368 5.99949L9.70745 3.70692C10.0681 3.3466 10.0961 2.77938 9.79126 2.38695L9.70812 2.2927C9.3478 1.93205 8.78058 1.90405 8.38815 2.20889L8.2939 2.29204L4.2939 6.28828C3.93325 6.64859 3.90525 7.21581 4.21009 7.60824L4.29324 7.70249L8.29324 11.7063C8.68358 12.097 9.31674 12.0973 9.70745 11.7069C10.0681 11.3466 10.0961 10.7794 9.79126 10.3869L9.70812 10.2927L7.41768 7.99949L17.9975 7.99948C18.5103 7.99948 18.933 7.61344 18.9907 7.1161L18.9975 6.99948L18.9907 7.1161Z" fill="white"/>
+</svg>
diff --git a/src/background/background-events.ts b/src/background/background-events.ts
index ba9fda3a0..60d1b9d16 100644
--- a/src/background/background-events.ts
+++ b/src/background/background-events.ts
@@ -1,5 +1,6 @@
 import { ActionType, createAction } from 'typesafe-actions';
-import { PopupState } from './redux/utils';
+
+import { PopupState } from './redux/types';
 
 // General purpose events emitted by background to all extension windows
 
diff --git a/src/background/close-current-window.ts b/src/background/close-current-window.ts
index 166dbddee..24f417dcb 100644
--- a/src/background/close-current-window.ts
+++ b/src/background/close-current-window.ts
@@ -1,5 +1,6 @@
-import browser from 'webextension-polyfill';
-// import { getWindowId } from '@src/background/redux/import-account-actions-should-be-removed';
+import { windows } from 'webextension-polyfill';
+
+// import { getWindowId } from '@background/redux/import-account-actions-should-be-removed';
 
 export async function closeCurrentWindow() {
   try {
@@ -8,9 +9,9 @@ export async function closeCurrentWindow() {
     //   await browser.windows.remove(windowId);
     // } else {
     // If there is no windowId in the state it'll fallback to use currentWindow id to close
-    const currentWindow = await browser.windows.getCurrent();
+    const currentWindow = await windows.getCurrent();
     if (currentWindow.type === 'popup' && currentWindow.id) {
-      await browser.windows.remove(currentWindow.id);
+      await windows.remove(currentWindow.id);
     }
     // }
   } catch (error) {
diff --git a/src/background/close-window-by-reload-extension.ts b/src/background/close-window-by-reload-extension.ts
index ef692510f..db2637634 100644
--- a/src/background/close-window-by-reload-extension.ts
+++ b/src/background/close-window-by-reload-extension.ts
@@ -1,4 +1,4 @@
-import browser from 'webextension-polyfill';
+import { runtime, tabs } from 'webextension-polyfill';
 
 import { isFirefoxBuild, isSafariBuild } from '@src/utils';
 
@@ -9,14 +9,14 @@ import { isFirefoxBuild, isSafariBuild } from '@src/utils';
 // WARNING: IT WILL RELOAD ENTIRE EXTENSION
 export function closeWindowByReloadExtension() {
   if (isSafariBuild) {
-    browser.tabs.create({ url: 'onboarding.html', active: true });
-    browser.runtime.reload();
+    tabs.create({ url: 'onboarding.html', active: true });
+    runtime.reload();
     return;
   }
   if (isFirefoxBuild) {
-    browser.runtime.reload();
+    runtime.reload();
     return;
   }
   window.close();
-  browser.tabs.create({ url: 'onboarding.html', active: true });
+  tabs.create({ url: 'onboarding.html', active: true });
 }
diff --git a/src/background/create-open-window.ts b/src/background/create-open-window.ts
index 9bc644082..b837d18c1 100644
--- a/src/background/create-open-window.ts
+++ b/src/background/create-open-window.ts
@@ -1,6 +1,6 @@
-import browser from 'webextension-polyfill';
+import { Windows, tabs, windows } from 'webextension-polyfill';
 
-import { RouterPath } from '@src/apps/signature-request/router';
+import { RouterPath } from '@signature-request/router';
 
 export enum WindowApp {
   ImportAccount = 'ImportAccount',
@@ -60,7 +60,7 @@ export function createOpenWindow({
     windowApp,
     isNewWindow,
     searchParams
-  }: OpenWindowProps): Promise<browser.Windows.Window> {
+  }: OpenWindowProps): Promise<Windows.Window> {
     const id = isNewWindow ? null : windowId;
 
     if (id != null) {
@@ -76,22 +76,22 @@ export function createOpenWindow({
 
     async function reuseExistingWindow(
       id: number
-    ): Promise<browser.Windows.Window | undefined> {
-      const allWindows = await browser.windows.getAll();
+    ): Promise<Windows.Window | undefined> {
+      const allWindows = await windows.getAll();
       const existingWindow = allWindows.find(window => window.id === id);
 
       if (existingWindow) {
-        const window = await browser.windows.get(id, { populate: true });
+        const window = await windows.get(id, { populate: true });
         if (window?.id != null) {
           // Bring popup window to the front
-          await browser.windows.update(window.id, {
+          await windows.update(window.id, {
             focused: true,
             drawAttention: true
           });
           // update tab url
           const tab = window.tabs?.[0];
           if (tab?.id != null) {
-            await browser.tabs.update({
+            await tabs.update({
               url: getUrlByWindowApp(windowApp, searchParams)
             });
           }
@@ -102,8 +102,8 @@ export function createOpenWindow({
       }
     }
 
-    async function openNewWindow(): Promise<browser.Windows.Window> {
-      return browser.windows.getCurrent().then(async currentWindow => {
+    async function openNewWindow(): Promise<Windows.Window> {
+      return windows.getCurrent().then(async currentWindow => {
         // If this flag is true, we create a new window without any size and positions.
         const isTestEnv = Boolean(process.env.TEST_ENV);
 
@@ -118,12 +118,12 @@ export function createOpenWindow({
           // So we check it and if it is in a fullscreen mode we didn't set width and height, and the popup will also open in fullscreen mode.
           // This is a default behavior for Safari and Chrome, but Firefox doesn't do this, so we need to do this manually for it.
           currentWindow.state === 'fullscreen' || isTestEnv
-            ? browser.windows.create({
+            ? windows.create({
                 url: getUrlByWindowApp(windowApp, searchParams),
                 type: 'popup',
                 focused: true
               })
-            : browser.windows.create({
+            : windows.create({
                 url: getUrlByWindowApp(windowApp, searchParams),
                 type: 'popup',
                 height: popupHeight,
@@ -138,10 +138,10 @@ export function createOpenWindow({
             setWindowId(newWindow.id);
 
             const handleCloseWindow = () => {
-              browser.windows.onRemoved.removeListener(handleCloseWindow);
+              windows.onRemoved.removeListener(handleCloseWindow);
               clearWindowId();
             };
-            browser.windows.onRemoved.addListener(handleCloseWindow);
+            windows.onRemoved.addListener(handleCloseWindow);
           }
           return newWindow;
         });
diff --git a/src/background/index.ts b/src/background/index.ts
index e62ac41ce..9d2c50ecd 100644
--- a/src/background/index.ts
+++ b/src/background/index.ts
@@ -1,34 +1,77 @@
-import { getType, RootAction } from 'typesafe-actions';
-import browser from 'webextension-polyfill';
+import { RootAction, getType } from 'typesafe-actions';
+import {
+  Tabs,
+  action,
+  browserAction,
+  management,
+  runtime,
+  tabs,
+  windows
+} from 'webextension-polyfill';
+
+import { getUrlOrigin, hasHttpPrefix } from '@src/utils';
 
+import { WindowApp } from '@background/create-open-window';
+import {
+  disableOnboardingFlow,
+  enableOnboardingFlow,
+  openOnboardingUi
+} from '@background/open-onboarding-flow';
+import {
+  accountBalanceChanged,
+  accountCasperActivityChanged,
+  accountCasperActivityCountChanged,
+  accountCasperActivityUpdated,
+  accountCurrencyRateChanged,
+  accountDeploysAdded,
+  accountDeploysCountChanged,
+  accountDeploysUpdated,
+  accountErc20Changed,
+  accountErc20TokensActivityChanged,
+  accountErc20TokensActivityUpdated,
+  accountInfoReset,
+  accountNftTokensAdded,
+  accountNftTokensCountChanged,
+  accountNftTokensUpdated,
+  accountPendingTransactionsChanged,
+  accountPendingTransactionsRemove,
+  accountTrackingIdOfSentNftTokensChanged,
+  accountTrackingIdOfSentNftTokensRemoved
+} from '@background/redux/account-info/actions';
+import {
+  contactRemoved,
+  contactUpdated,
+  contactsReseted,
+  newContactAdded
+} from '@background/redux/contacts/actions';
+import { getExistingMainStoreSingletonOrInit } from '@background/redux/get-main-store';
 import {
   CheckAccountNameIsTakenAction,
   CheckSecretKeyExistAction
-} from '@src/background/redux/import-account-actions-should-be-removed';
-import { getExistingMainStoreSingletonOrInit } from '@src/background/redux/utils';
+} from '@background/redux/import-account-actions-should-be-removed';
 import {
   accountAdded,
   accountDisconnected,
   accountImported,
   accountRemoved,
   accountRenamed,
-  siteConnected,
   activeAccountChanged,
-  siteDisconnected,
-  vaultReseted,
-  vaultLoaded,
-  secretPhraseCreated,
   anotherAccountConnected,
   deployPayloadReceived,
-  deploysReseted
-} from '@src/background/redux/vault/actions';
+  deploysReseted,
+  secretPhraseCreated,
+  siteConnected,
+  siteDisconnected,
+  vaultLoaded,
+  vaultReseted
+} from '@background/redux/vault/actions';
 import {
-  selectIsAccountConnected,
   selectAccountNamesByOriginDict,
+  selectIsAccountConnected,
   selectVaultAccountsNames,
   selectVaultAccountsSecretKeysBase64,
   selectVaultActiveAccount
-} from '@src/background/redux/vault/selectors';
+} from '@background/redux/vault/selectors';
 import {
   connectWindowInit,
   importWindowInit,
@@ -37,37 +80,51 @@ import {
   signWindowInit,
   windowIdChanged,
   windowIdCleared
-} from '@src/background/redux/windowManagement/actions';
-import { selectWindowId } from '@src/background/redux/windowManagement/selectors';
-import { sdkEvent } from '@src/content/sdk-event';
-import { isSDKMethod, SdkMethod, sdkMethod } from '@src/content/sdk-method';
-import { WindowApp } from '@src/hooks';
+} from '@background/redux/windowManagement/actions';
+import { selectWindowId } from '@background/redux/windowManagement/selectors';
+
+import { SiteNotConnectedError, WalletLockedError } from '@content/sdk-errors';
+import { sdkEvent } from '@content/sdk-event';
+import { SdkMethod, isSDKMethod, sdkMethod } from '@content/sdk-method';
+
 import {
-  enableOnboardingFlow,
-  disableOnboardingFlow,
-  openOnboardingUi
-} from '@src/background/open-onboarding-flow';
+  MapExtendedDeploy,
+  MapPaginatedExtendedDeploys,
+  fetchAccountCasperActivity,
+  fetchAccountExtendedDeploys,
+  fetchExtendedDeploysInfo
+} from '@libs/services/account-activity-service';
+import { fetchErc20TokenActivity } from '@libs/services/account-activity-service/erc20-token-activity-service';
+import { fetchAccountInfo } from '@libs/services/account-info';
 import {
   fetchAccountBalance,
   fetchCurrencyRate
 } from '@libs/services/balance-service';
-import { fetchAccountInfo } from '@libs/services/account-info';
-import {
-  fetchAccountCasperActivity,
-  fetchAccountExtendedDeploys,
-  fetchExtendedDeploysInfo,
-  MapExtendedDeploy,
-  MapPaginatedExtendedDeploys
-} from '@libs/services/account-activity-service';
 import { fetchErc20Tokens } from '@libs/services/erc20-service';
+import { fetchNftTokens } from '@libs/services/nft-service';
+import {
+  fetchAuctionValidators,
+  fetchValidatorsDetailsData
+} from '@libs/services/validators-service';
 
+import {
+  CannotGetActiveAccountError,
+  CannotGetSenderOriginError
+} from './internal-errors';
 import { openWindow } from './open-window';
+import { activeOriginChanged } from './redux/active-origin/actions';
+import { keysReseted, keysUpdated } from './redux/keys/actions';
+import { selectKeysDoesExist } from './redux/keys/selectors';
+import { lastActivityTimeRefreshed } from './redux/last-activity-time/actions';
 import {
-  contactEditingPermissionChanged,
-  encryptionKeyHashCreated,
-  sessionReseted,
-  vaultUnlocked
-} from './redux/session/actions';
+  loginRetryCountIncremented,
+  loginRetryCountReseted
+} from './redux/login-retry-count/actions';
+import { loginRetryLockoutTimeSet } from './redux/login-retry-lockout-time/actions';
+import {
+  recipientPublicKeyAdded,
+  recipientPublicKeyReseted
+} from './redux/recent-recipient-public-keys/actions';
 import {
   changePassword,
   createAccount,
@@ -78,83 +135,33 @@ import {
   unlockVault
 } from './redux/sagas/actions';
 import {
-  vaultCipherCreated,
-  vaultCipherReseted
-} from './redux/vault-cipher/actions';
-import { keysReseted, keysUpdated } from './redux/keys/actions';
+  contactEditingPermissionChanged,
+  encryptionKeyHashCreated,
+  sessionReseted,
+  vaultUnlocked
+} from './redux/session/actions';
 import { selectVaultIsLocked } from './redux/session/selectors';
-import { selectKeysDoesExist } from './redux/keys/selectors';
-import { selectVaultCipherDoesExist } from './redux/vault-cipher/selectors';
-import { ServiceMessage, serviceMessage } from './service-message';
-import {
-  loginRetryCountIncremented,
-  loginRetryCountReseted
-} from './redux/login-retry-count/actions';
-import { emitSdkEventToActiveTabsWithOrigin } from './utils';
-import { loginRetryLockoutTimeSet } from './redux/login-retry-lockout-time/actions';
-import { lastActivityTimeRefreshed } from './redux/last-activity-time/actions';
 import {
   activeNetworkSettingChanged,
   activeTimeoutDurationSettingChanged,
-  vaultSettingsReseted,
-  themeModeSettingChanged
+  themeModeSettingChanged,
+  vaultSettingsReseted
 } from './redux/settings/actions';
-import { activeOriginChanged } from './redux/active-origin/actions';
 import { selectApiConfigBasedOnActiveNetwork } from './redux/settings/selectors';
-import { getUrlOrigin, hasHttpPrefix } from '@src/utils';
-import {
-  CannotGetActiveAccountError,
-  CannotGetSenderOriginError
-} from './internal-errors';
-import {
-  SiteNotConnectedError,
-  WalletLockedError
-} from '@src/content/sdk-errors';
-import {
-  recipientPublicKeyAdded,
-  recipientPublicKeyReseted
-} from './redux/recent-recipient-public-keys/actions';
-import {
-  accountCasperActivityChanged,
-  accountInfoReset,
-  accountCasperActivityUpdated,
-  accountBalanceChanged,
-  accountCurrencyRateChanged,
-  accountPendingTransactionsChanged,
-  accountPendingTransactionsRemove,
-  accountErc20Changed,
-  accountErc20TokensActivityChanged,
-  accountErc20TokensActivityUpdated,
-  accountDeploysAdded,
-  accountDeploysUpdated,
-  accountNftTokensAdded,
-  accountNftTokensUpdated,
-  accountNftTokensCountChanged,
-  accountDeploysCountChanged,
-  accountCasperActivityCountChanged,
-  accountTrackingIdOfSentNftTokensChanged,
-  accountTrackingIdOfSentNftTokensRemoved
-} from '@background/redux/account-info/actions';
-import { fetchErc20TokenActivity } from '@src/libs/services/account-activity-service/erc20-token-activity-service';
-import { fetchNftTokens } from '@libs/services/nft-service';
-import {
-  fetchAuctionValidators,
-  fetchValidatorsDetailsData
-} from '@libs/services/validators-service';
 import {
-  contactRemoved,
-  contactsReseted,
-  contactUpdated,
-  newContactAdded
-} from '@background/redux/contacts/actions';
+  vaultCipherCreated,
+  vaultCipherReseted
+} from './redux/vault-cipher/actions';
+import { selectVaultCipherDoesExist } from './redux/vault-cipher/selectors';
+import { ServiceMessage, serviceMessage } from './service-message';
+import { emitSdkEventToActiveTabsWithOrigin } from './utils';
 
 // setup default onboarding action
 async function handleActionClick() {
   await openOnboardingUi();
 }
-browser.action && browser.action.onClicked.addListener(handleActionClick);
-browser.browserAction &&
-  browser.browserAction.onClicked.addListener(handleActionClick);
+action && action.onClicked.addListener(handleActionClick);
+browserAction && browserAction.onClicked.addListener(handleActionClick);
 
 async function isOnboardingCompleted() {
   const store = await getExistingMainStoreSingletonOrInit();
@@ -174,14 +181,14 @@ const init = () => {
     }
   });
 };
-browser.runtime.onStartup.addListener(init);
-browser.management?.onEnabled?.addListener(init);
+runtime.onStartup.addListener(init);
+management?.onEnabled?.addListener(init);
 
-browser.runtime.onInstalled.addListener(async () => {
+runtime.onInstalled.addListener(async () => {
   // this will run on installation or update so
   // first clear previous rules, then register new rules
   // DEV MODE: clean store on installation
-  // browser.storage.local.remove([REDUX_STORAGE_KEY]);
+  // storage.local.remove([REDUX_STORAGE_KEY]);
   //
   // after installation/update check if onboarding is completed
   isOnboardingCompleted().then(yes => {
@@ -199,7 +206,7 @@ const updateOrigin = async (windowId: number) => {
     return;
   }
 
-  const window = await browser.windows.get(windowId);
+  const window = await windows.get(windowId);
   // skip when non-normal windows
   if (window.type !== 'normal') {
     return;
@@ -209,7 +216,7 @@ const updateOrigin = async (windowId: number) => {
   const state = store.getState();
   const activeOrigin = state.activeOrigin;
 
-  const activeTabs = await browser.tabs.query({ active: true, windowId });
+  const activeTabs = await tabs.query({ active: true, windowId });
   const tab0 = activeTabs[0];
 
   let newActiveOrigin = null;
@@ -246,24 +253,24 @@ const updateOrigin = async (windowId: number) => {
   }
 };
 
-browser.windows.onFocusChanged.addListener(async (windowId: number) => {
+windows.onFocusChanged.addListener(async (windowId: number) => {
   updateOrigin(windowId);
 });
 
-browser.tabs.onActivated.addListener(
-  async ({ windowId }: browser.Tabs.OnActivatedActiveInfoType) => {
+tabs.onActivated.addListener(
+  async ({ windowId }: Tabs.OnActivatedActiveInfoType) => {
     updateOrigin(windowId);
   }
 );
 
-browser.tabs.onUpdated.addListener(async (tabId, changeInfo, tab) => {
+tabs.onUpdated.addListener(async (tabId, changeInfo, tab) => {
   if (changeInfo && changeInfo.url && tab.windowId) {
     updateOrigin(tab.windowId);
   }
 });
 
 // NOTE: if two events are send at the same time (same function) it must reuse the same store instance
-browser.runtime.onMessage.addListener(
+runtime.onMessage.addListener(
   async (action: RootAction | SdkMethod | ServiceMessage, sender) => {
     const store = await getExistingMainStoreSingletonOrInit();
 
@@ -579,22 +586,21 @@ browser.runtime.onMessage.addListener(
 
           // SERVICE MESSAGE HANDLERS
           case getType(serviceMessage.fetchBalanceRequest): {
-            const { casperApiUrl } = selectApiConfigBasedOnActiveNetwork(
-              store.getState()
-            );
+            const { casperWalletApiUrl, casperClarityApiUrl } =
+              selectApiConfigBasedOnActiveNetwork(store.getState());
 
             try {
-              const [balance, rate] = await Promise.all([
+              const [accountData, rate] = await Promise.all([
                 fetchAccountBalance({
-                  publicKey: action.payload.publicKey,
-                  casperApiUrl
+                  accountHash: action.payload.accountHash,
+                  casperWalletApiUrl
                 }),
-                fetchCurrencyRate({ casperApiUrl })
+                fetchCurrencyRate({ casperClarityApiUrl })
               ]);
 
               return sendResponse(
                 serviceMessage.fetchBalanceResponse({
-                  balance: balance?.data || null,
+                  accountData: accountData?.data || null,
                   currencyRate: rate?.data || null
                 })
               );
@@ -606,14 +612,14 @@ browser.runtime.onMessage.addListener(
           }
 
           case getType(serviceMessage.fetchAccountInfoRequest): {
-            const { casperApiUrl } = selectApiConfigBasedOnActiveNetwork(
+            const { casperClarityApiUrl } = selectApiConfigBasedOnActiveNetwork(
               store.getState()
             );
 
             try {
               const { data: accountInfo } = await fetchAccountInfo({
                 accountHash: action.payload.accountHash,
-                casperApiUrl
+                casperClarityApiUrl
               });
 
               return sendResponse(
@@ -627,14 +633,14 @@ browser.runtime.onMessage.addListener(
           }
 
           case getType(serviceMessage.fetchExtendedDeploysInfoRequest): {
-            const { casperApiUrl } = selectApiConfigBasedOnActiveNetwork(
+            const { casperClarityApiUrl } = selectApiConfigBasedOnActiveNetwork(
               store.getState()
             );
 
             try {
               const data = await fetchExtendedDeploysInfo({
                 deployHash: action.payload.deployHash,
-                casperApiUrl
+                casperClarityApiUrl
               });
 
               return sendResponse(
@@ -650,13 +656,13 @@ browser.runtime.onMessage.addListener(
           }
 
           case getType(serviceMessage.fetchErc20TokensRequest): {
-            const { casperApiUrl } = selectApiConfigBasedOnActiveNetwork(
+            const { casperClarityApiUrl } = selectApiConfigBasedOnActiveNetwork(
               store.getState()
             );
 
             try {
               const { data: tokensList } = await fetchErc20Tokens({
-                casperApiUrl,
+                casperClarityApiUrl,
                 accountHash: action.payload.accountHash
               });
 
@@ -683,13 +689,13 @@ browser.runtime.onMessage.addListener(
           }
 
           case getType(serviceMessage.fetchErc20TokenActivityRequest): {
-            const { casperApiUrl } = selectApiConfigBasedOnActiveNetwork(
+            const { casperClarityApiUrl } = selectApiConfigBasedOnActiveNetwork(
               store.getState()
             );
 
             try {
               const data = await fetchErc20TokenActivity({
-                casperApiUrl,
+                casperClarityApiUrl,
                 publicKey: action.payload.publicKey,
                 page: action.payload.page,
                 contractPackageHash: action.payload.contractPackageHash
@@ -706,13 +712,13 @@ browser.runtime.onMessage.addListener(
           }
 
           case getType(serviceMessage.fetchAccountExtendedDeploysRequest): {
-            const { casperApiUrl } = selectApiConfigBasedOnActiveNetwork(
+            const { casperClarityApiUrl } = selectApiConfigBasedOnActiveNetwork(
               store.getState()
             );
 
             try {
               const data = await fetchAccountExtendedDeploys({
-                casperApiUrl,
+                casperClarityApiUrl,
                 publicKey: action.payload.publicKey,
                 page: action.payload.page
               });
@@ -730,13 +736,13 @@ browser.runtime.onMessage.addListener(
           }
 
           case getType(serviceMessage.fetchAccountCasperActivityRequest): {
-            const { casperApiUrl } = selectApiConfigBasedOnActiveNetwork(
+            const { casperClarityApiUrl } = selectApiConfigBasedOnActiveNetwork(
               store.getState()
             );
 
             try {
               const data = await fetchAccountCasperActivity({
-                casperApiUrl,
+                casperClarityApiUrl,
                 accountHash: action.payload.accountHash,
                 page: action.payload.page
               });
@@ -751,13 +757,13 @@ browser.runtime.onMessage.addListener(
           }
 
           case getType(serviceMessage.fetchNftTokensRequest): {
-            const { casperApiUrl } = selectApiConfigBasedOnActiveNetwork(
+            const { casperClarityApiUrl } = selectApiConfigBasedOnActiveNetwork(
               store.getState()
             );
 
             try {
               const data = await fetchNftTokens({
-                casperApiUrl,
+                casperClarityApiUrl,
                 accountHash: action.payload.accountHash,
                 page: action.payload.page
               });
@@ -771,12 +777,14 @@ browser.runtime.onMessage.addListener(
           }
 
           case getType(serviceMessage.fetchAuctionValidatorsRequest): {
-            const { casperApiUrl } = selectApiConfigBasedOnActiveNetwork(
+            const { casperClarityApiUrl } = selectApiConfigBasedOnActiveNetwork(
               store.getState()
             );
 
             try {
-              const data = await fetchAuctionValidators({ casperApiUrl });
+              const data = await fetchAuctionValidators({
+                casperClarityApiUrl
+              });
 
               return sendResponse(
                 serviceMessage.fetchAuctionValidatorsResponse(data)
@@ -789,13 +797,13 @@ browser.runtime.onMessage.addListener(
           }
 
           case getType(serviceMessage.fetchValidatorsDetailsDataRequest): {
-            const { casperApiUrl } = selectApiConfigBasedOnActiveNetwork(
+            const { casperClarityApiUrl } = selectApiConfigBasedOnActiveNetwork(
               store.getState()
             );
 
             try {
               const data = await fetchValidatorsDetailsData({
-                casperApiUrl,
+                casperClarityApiUrl,
                 publicKey: action.payload.publicKey
               });
 
@@ -854,7 +862,7 @@ browser.runtime.onMessage.addListener(
 
 // ping mechanism to keep background script from destroing wallet session when it's unlocked
 function ping() {
-  browser.runtime.sendMessage('ping').catch(() => {
+  runtime.sendMessage('ping').catch(() => {
     // ping
   });
 }
diff --git a/src/background/open-onboarding-flow.ts b/src/background/open-onboarding-flow.ts
index b72611b73..dba6dd538 100644
--- a/src/background/open-onboarding-flow.ts
+++ b/src/background/open-onboarding-flow.ts
@@ -1,20 +1,24 @@
-import browser from 'webextension-polyfill';
+import {
+  action,
+  browserAction,
+  storage,
+  tabs,
+  windows
+} from 'webextension-polyfill';
 
 const ONBOARDING_TAB_STATE_KEY = 'onboarding_tab_state';
 
 type OnboardingFlowState = { tabId: number; windowId: number };
 
 export async function disableOnboardingFlow() {
-  browser.action?.setPopup && browser.action.setPopup({ popup: 'popup.html' });
-  browser.browserAction?.setPopup &&
-    browser.browserAction.setPopup({ popup: 'popup.html' });
-  browser.storage.local.remove(ONBOARDING_TAB_STATE_KEY);
+  action?.setPopup && action.setPopup({ popup: 'popup.html' });
+  browserAction?.setPopup && browserAction.setPopup({ popup: 'popup.html' });
+  storage.local.remove(ONBOARDING_TAB_STATE_KEY);
 }
 
 export async function enableOnboardingFlow() {
-  browser.action?.setPopup && browser.action.setPopup({ popup: '' });
-  browser.browserAction?.setPopup &&
-    browser.browserAction.setPopup({ popup: '' });
+  action?.setPopup && action.setPopup({ popup: '' });
+  browserAction?.setPopup && browserAction.setPopup({ popup: '' });
 }
 
 export async function openOnboardingUi() {
@@ -22,12 +26,12 @@ export async function openOnboardingUi() {
   let tabExist = false;
   if (tabId != null && windowId != null) {
     try {
-      const tab = await browser.tabs.get(tabId);
+      const tab = await tabs.get(tabId);
       if (tab != null) {
         tabExist = true;
         // activate existing tab
-        browser.windows.update(windowId, { focused: true });
-        browser.tabs.update(tabId, { active: true });
+        windows.update(windowId, { focused: true });
+        tabs.update(tabId, { active: true });
       }
     } catch (e) {
       // error expected to follow up in the next condition
@@ -35,7 +39,7 @@ export async function openOnboardingUi() {
   }
 
   if (!tabExist) {
-    browser.tabs
+    tabs
       .create({ url: 'onboarding.html', active: true })
       .then(tab => {
         if (tab.id != null && tab.windowId != null) {
@@ -48,8 +52,9 @@ export async function openOnboardingUi() {
 
 async function loadState() {
   try {
-    const { [ONBOARDING_TAB_STATE_KEY]: state } =
-      await browser.storage.local.get(ONBOARDING_TAB_STATE_KEY);
+    const { [ONBOARDING_TAB_STATE_KEY]: state } = await storage.local.get(
+      ONBOARDING_TAB_STATE_KEY
+    );
     return (state || {}) as OnboardingFlowState;
   } catch {
     // reset on error
@@ -59,5 +64,5 @@ async function loadState() {
 }
 
 async function saveState(state: OnboardingFlowState) {
-  return browser.storage.local.set({ [ONBOARDING_TAB_STATE_KEY]: state });
+  return storage.local.set({ [ONBOARDING_TAB_STATE_KEY]: state });
 }
diff --git a/src/background/open-window.ts b/src/background/open-window.ts
index cc3b1004e..ccaa27ec2 100644
--- a/src/background/open-window.ts
+++ b/src/background/open-window.ts
@@ -1,5 +1,8 @@
 // TODO: Remake it after background store will be complete
-import { createOpenWindow, OpenWindowProps } from '@src/hooks';
+import {
+  OpenWindowProps,
+  createOpenWindow
+} from '@background/create-open-window';
 
 let windowId: number | null = null;
 
diff --git a/src/background/redux/account-info/actions.ts b/src/background/redux/account-info/actions.ts
index 4a3a87918..b7d13f07d 100644
--- a/src/background/redux/account-info/actions.ts
+++ b/src/background/redux/account-info/actions.ts
@@ -1,18 +1,18 @@
 import { createAction } from 'typesafe-actions';
 
-import { ActiveAccountBalance } from '@libs/services/balance-service';
 import {
   Erc20TokenActionResult,
   ExtendedDeploy,
   ExtendedDeployWithId,
   TransferResultWithId
-} from '@libs/services/account-activity-service';
-import { ContractPackageWithBalance } from '@src/libs/services/erc20-service';
-import { NFTTokenResult } from '@libs/services/nft-service';
+} from '@libs/services/account-activity-service/types';
+import { AccountBalance } from '@libs/services/balance-service/types';
+import { ContractPackageWithBalance } from '@libs/services/erc20-service/types';
+import { NFTTokenResult } from '@libs/services/nft-service/types';
 
 export const accountBalanceChanged = createAction(
   'ACCOUNT_BALANCE_CHANGED'
-)<ActiveAccountBalance>();
+)<AccountBalance>();
 
 export const accountErc20Changed = createAction('ACCOUNT_ERC20_CHANGED')<
   ContractPackageWithBalance[]
diff --git a/src/background/redux/account-info/reducer.ts b/src/background/redux/account-info/reducer.ts
index e1a17e3e5..dd73e2981 100644
--- a/src/background/redux/account-info/reducer.ts
+++ b/src/background/redux/account-info/reducer.ts
@@ -1,32 +1,35 @@
 import { createReducer } from 'typesafe-actions';
 
-import { AccountInfoState } from './types';
 import {
+  accountBalanceChanged,
   accountCasperActivityChanged,
-  accountInfoReset,
+  accountCasperActivityCountChanged,
   accountCasperActivityUpdated,
-  accountBalanceChanged,
   accountCurrencyRateChanged,
-  accountErc20TokensActivityChanged,
-  accountErc20TokensActivityUpdated,
-  accountPendingTransactionsChanged,
-  accountPendingTransactionsRemove,
-  accountErc20Changed,
   accountDeploysAdded,
+  accountDeploysCountChanged,
   accountDeploysUpdated,
+  accountErc20Changed,
+  accountErc20TokensActivityChanged,
+  accountErc20TokensActivityUpdated,
+  accountInfoReset,
   accountNftTokensAdded,
-  accountNftTokensUpdated,
   accountNftTokensCountChanged,
-  accountDeploysCountChanged,
-  accountCasperActivityCountChanged,
+  accountNftTokensUpdated,
+  accountPendingTransactionsChanged,
+  accountPendingTransactionsRemove,
   accountTrackingIdOfSentNftTokensChanged,
   accountTrackingIdOfSentNftTokensRemoved
 } from './actions';
+import { AccountInfoState } from './types';
 
 const initialState: AccountInfoState = {
   balance: {
-    amountMotes: null,
-    amountFiat: null
+    liquidMotes: null,
+    delegatedMotes: null,
+    undelegatingMotes: null,
+    totalBalanceMotes: null,
+    totalBalanceFiat: null
   },
   currencyRate: null,
   accountCasperActivity: [],
@@ -43,13 +46,10 @@ const initialState: AccountInfoState = {
 
 export const reducer = createReducer(initialState)
   .handleAction(accountInfoReset, () => initialState)
-  .handleAction(
-    accountBalanceChanged,
-    (state, { payload }): AccountInfoState => ({
-      ...state,
-      balance: payload
-    })
-  )
+  .handleAction(accountBalanceChanged, (state, { payload }) => ({
+    ...state,
+    balance: payload
+  }))
   .handleAction(
     accountCurrencyRateChanged,
     (state, { payload }): AccountInfoState => ({
diff --git a/src/background/redux/account-info/types.ts b/src/background/redux/account-info/types.ts
index e9f99a02b..65458d56a 100644
--- a/src/background/redux/account-info/types.ts
+++ b/src/background/redux/account-info/types.ts
@@ -1,14 +1,14 @@
-import { ActiveAccountBalance } from '@libs/services/balance-service';
 import {
   Erc20TokenActionResult,
   ExtendedDeployWithId,
   TransferResultWithId
 } from '@libs/services/account-activity-service';
-import { ContractPackageWithBalance } from '@src/libs/services/erc20-service';
+import { AccountBalance } from '@libs/services/balance-service';
+import { ContractPackageWithBalance } from '@libs/services/erc20-service';
 import { NFTTokenResult } from '@libs/services/nft-service';
 
 export interface AccountInfoState {
-  balance: ActiveAccountBalance;
+  balance: AccountBalance;
   erc20Tokens: ContractPackageWithBalance[];
   currencyRate: number | null;
   accountCasperActivity: TransferResultWithId[];
diff --git a/src/background/redux/contacts/reducer.ts b/src/background/redux/contacts/reducer.ts
index 213a4e420..3290c2686 100644
--- a/src/background/redux/contacts/reducer.ts
+++ b/src/background/redux/contacts/reducer.ts
@@ -2,8 +2,8 @@ import { createReducer } from 'typesafe-actions';
 
 import {
   contactRemoved,
-  contactsReseted,
   contactUpdated,
+  contactsReseted,
   newContactAdded
 } from '@background/redux/contacts/actions';
 import { ContactsState } from '@background/redux/contacts/types';
diff --git a/src/background/redux/get-main-store.ts b/src/background/redux/get-main-store.ts
new file mode 100644
index 000000000..a30f3af64
--- /dev/null
+++ b/src/background/redux/get-main-store.ts
@@ -0,0 +1,144 @@
+import { RootState } from 'typesafe-actions';
+import { runtime, storage } from 'webextension-polyfill';
+
+import { backgroundEvent } from '@background/background-events';
+import { ContactsState } from '@background/redux/contacts/types';
+import { createStore } from '@background/redux/index';
+import { KeysState } from '@background/redux/keys/types';
+import { LoginRetryCountState } from '@background/redux/login-retry-count/reducer';
+import { LoginRetryLockoutTimeState } from '@background/redux/login-retry-lockout-time/types';
+import { RecentRecipientPublicKeysState } from '@background/redux/recent-recipient-public-keys/types';
+import { startBackground } from '@background/redux/sagas/actions';
+import { SettingsState } from '@background/redux/settings/types';
+import { PopupState } from '@background/redux/types';
+
+export const VAULT_CIPHER_KEY = 'zazXu8w9GyCtxZ';
+export const KEYS_KEY = '2yNVAEQJB5rxMg';
+export const LOGIN_RETRY_KEY = '7ZVdMbk9yD8WGZ';
+export const LOGIN_RETRY_LOCKOUT_KEY = 'p6nnYiaxcsaNG3';
+export const LAST_ACTIVITY_TIME = 'j8d1dusn76EdD';
+export const VAULT_SETTINGS = 'Nmxd8BZh93MHua';
+export const RECENT_RECIPIENT_PUBLIC_KEYS = '7c2WyRuGhEtaDX';
+export const CONTACTS_KEY = 'teuwe6zH3A72gc';
+
+type StorageState = {
+  [VAULT_CIPHER_KEY]: string;
+  [KEYS_KEY]: KeysState;
+  [LOGIN_RETRY_KEY]: LoginRetryCountState;
+  [LOGIN_RETRY_LOCKOUT_KEY]: LoginRetryLockoutTimeState;
+  [LAST_ACTIVITY_TIME]: number;
+  [VAULT_SETTINGS]: SettingsState;
+  [RECENT_RECIPIENT_PUBLIC_KEYS]: RecentRecipientPublicKeysState;
+  [CONTACTS_KEY]: ContactsState;
+};
+// this needs to be private
+let storeSingleton: ReturnType<typeof createStore>;
+
+// These state keys will be passed to popups
+export const selectPopupState = (state: RootState): PopupState => {
+  // TODO: must sanitize state to not send private data back to front
+  return {
+    keys: state.keys,
+    loginRetryCount: state.loginRetryCount,
+    session: state.session,
+    vault: state.vault,
+    windowManagement: state.windowManagement,
+    vaultCipher: state.vaultCipher,
+    loginRetryLockoutTime: state.loginRetryLockoutTime,
+    lastActivityTime: state.lastActivityTime,
+    activeOrigin: state.activeOrigin,
+    settings: state.settings,
+    recentRecipientPublicKeys: state.recentRecipientPublicKeys,
+    accountInfo: state.accountInfo,
+    contacts: state.contacts
+  };
+};
+
+// If this flag is true, we initialize the initial state for the tests
+const isMockStateEnable = Boolean(process.env.MOCK_STATE);
+
+export async function getExistingMainStoreSingletonOrInit() {
+  // load selected state
+  const {
+    [VAULT_CIPHER_KEY]: vaultCipher,
+    [KEYS_KEY]: keys,
+    [LOGIN_RETRY_KEY]: loginRetryCount,
+    [LOGIN_RETRY_LOCKOUT_KEY]: loginRetryLockoutTime,
+    [LAST_ACTIVITY_TIME]: lastActivityTime,
+    [VAULT_SETTINGS]: settings,
+    [RECENT_RECIPIENT_PUBLIC_KEYS]: recentRecipientPublicKeys,
+    [CONTACTS_KEY]: contacts
+  } = (await storage.local.get([
+    VAULT_CIPHER_KEY,
+    KEYS_KEY,
+    LOGIN_RETRY_KEY,
+    LOGIN_RETRY_LOCKOUT_KEY,
+    LAST_ACTIVITY_TIME,
+    VAULT_SETTINGS,
+    RECENT_RECIPIENT_PUBLIC_KEYS,
+    CONTACTS_KEY
+  ])) as StorageState;
+
+  if (storeSingleton == null) {
+    if (isMockStateEnable) {
+      const { initialStateForPopupTests } = await import(
+        /* webpackMode: "eager" */ '@src/fixtures'
+      );
+      storeSingleton = createStore(initialStateForPopupTests as PopupState);
+    } else {
+      storeSingleton = createStore({
+        vaultCipher,
+        keys,
+        loginRetryCount,
+        loginRetryLockoutTime,
+        lastActivityTime,
+        settings,
+        recentRecipientPublicKeys,
+        contacts
+      });
+    }
+    // send start action
+    storeSingleton.dispatch(startBackground());
+    // on updates propagate new state to replicas and also persist encrypted vault
+    storeSingleton.subscribe(() => {
+      const state = storeSingleton.getState();
+
+      // propagate state to replicas
+      const popupState = selectPopupState(state);
+      runtime.sendMessage(backgroundEvent.popupStateUpdated(popupState));
+
+      // persist selected state
+      const {
+        vaultCipher,
+        keys,
+        loginRetryCount,
+        loginRetryLockoutTime,
+        lastActivityTime,
+        settings,
+        recentRecipientPublicKeys,
+        contacts
+      } = state;
+      storage.local
+        .set({
+          [VAULT_CIPHER_KEY]: vaultCipher,
+          [KEYS_KEY]: keys,
+          [LOGIN_RETRY_KEY]: loginRetryCount,
+          [LOGIN_RETRY_LOCKOUT_KEY]: loginRetryLockoutTime,
+          [LAST_ACTIVITY_TIME]: lastActivityTime,
+          [VAULT_SETTINGS]: settings,
+          [RECENT_RECIPIENT_PUBLIC_KEYS]: recentRecipientPublicKeys,
+          [CONTACTS_KEY]: contacts
+        })
+        .catch(e => {
+          console.error('Persist encrypted vault failed: ', e);
+        });
+    });
+  }
+
+  return storeSingleton;
+}
+
+export function createMainStoreReplica<T extends PopupState>(state: T) {
+  const store = createStore(state);
+  return store;
+}
diff --git a/src/background/redux/import-account-actions-should-be-removed.ts b/src/background/redux/import-account-actions-should-be-removed.ts
index 57aa2b47a..b1ee056b7 100644
--- a/src/background/redux/import-account-actions-should-be-removed.ts
+++ b/src/background/redux/import-account-actions-should-be-removed.ts
@@ -1,5 +1,5 @@
 import { EmptyAction, PayloadAction } from 'typesafe-actions';
-import browser from 'webextension-polyfill';
+import { runtime } from 'webextension-polyfill';
 
 // WARNING: legacy to be refactored, don't reuse!
 
@@ -20,7 +20,7 @@ export const checkAccountNameIsTaken = (value: string): Promise<boolean> => {
       accountName: value
     }
   };
-  return browser.runtime.sendMessage(action);
+  return runtime.sendMessage(action);
 };
 
 export type CheckSecretKeyExistAction = PayloadAction<
@@ -36,12 +36,12 @@ export const checkSecretKeyExist = (
       secretKeyBase64
     }
   };
-  return browser.runtime.sendMessage(action);
+  return runtime.sendMessage(action);
 };
 
 export type GetWindowIdAction = EmptyAction<'get-window-id'>;
 
 export const getWindowId = (): Promise<number | null> => {
   const action: GetWindowIdAction = { type: 'get-window-id' };
-  return browser.runtime.sendMessage(action);
+  return runtime.sendMessage(action);
 };
diff --git a/src/background/redux/index.ts b/src/background/redux/index.ts
index ebc448094..5795159e7 100644
--- a/src/background/redux/index.ts
+++ b/src/background/redux/index.ts
@@ -1,16 +1,25 @@
 import {
-  applyMiddleware,
-  // TODO: Move to actual `createStore`
+  applyMiddleware, // TODO: Move to actual `createStore`
+  compose,
   legacy_createStore as createStoreRedux
 } from 'redux';
 import createSagaMiddleware from 'redux-saga';
+import { composeWithDevTools } from 'remote-redux-devtools';
 import { RootState } from 'typesafe-actions';
 
 import reduxAction from './redux-action';
 import rootReducer from './root-reducer';
 import rootSaga from './root-saga';
 
-import { composeEnhancers } from './utils';
+// export const composeEnhancers = compose;
+export const composeEnhancers =
+  process.env.NODE_ENV === 'development'
+    ? composeWithDevTools({
+        name: 'Casper Wallet',
+        hostname: 'localhost',
+        port: 8000
+      })
+    : compose;
 
 export const createStore = (initialState: Partial<RootState>) => {
   const sagaMiddleware = createSagaMiddleware();
diff --git a/src/background/redux/keys/actions.ts b/src/background/redux/keys/actions.ts
index c0a803905..6d7444fb1 100644
--- a/src/background/redux/keys/actions.ts
+++ b/src/background/redux/keys/actions.ts
@@ -1,4 +1,5 @@
 import { createAction } from 'typesafe-actions';
+
 import { KeysState } from './types';
 
 export const keysUpdated = createAction('KEYS_UPDATED')<Partial<KeysState>>();
diff --git a/src/background/redux/last-activity-time/reducer.ts b/src/background/redux/last-activity-time/reducer.ts
index e19b62967..9925d6fef 100644
--- a/src/background/redux/last-activity-time/reducer.ts
+++ b/src/background/redux/last-activity-time/reducer.ts
@@ -1,4 +1,5 @@
 import { createReducer } from 'typesafe-actions';
+
 import { vaultUnlocked } from '../session/actions';
 import { lastActivityTimeRefreshed } from './actions';
 
diff --git a/src/background/redux/login-retry-count/reducer.ts b/src/background/redux/login-retry-count/reducer.ts
index 51d78d51f..1794903bb 100644
--- a/src/background/redux/login-retry-count/reducer.ts
+++ b/src/background/redux/login-retry-count/reducer.ts
@@ -1,5 +1,6 @@
 import { createReducer } from 'typesafe-actions';
-import { loginRetryCountReseted, loginRetryCountIncremented } from './actions';
+
+import { loginRetryCountIncremented, loginRetryCountReseted } from './actions';
 
 export type LoginRetryCountState = number;
 
@@ -8,9 +9,9 @@ const initialState = 0 as LoginRetryCountState;
 export const reducer = createReducer(initialState)
   .handleAction(
     loginRetryCountReseted,
-    (state, action): LoginRetryCountState => initialState
+    (): LoginRetryCountState => initialState
   )
   .handleAction(
     loginRetryCountIncremented,
-    (state, action): LoginRetryCountState => state + 1
+    (state): LoginRetryCountState => state + 1
   );
diff --git a/src/background/redux/login-retry-lockout-time/selectors.ts b/src/background/redux/login-retry-lockout-time/selectors.ts
index 2ae076b31..9ecc00bc7 100644
--- a/src/background/redux/login-retry-lockout-time/selectors.ts
+++ b/src/background/redux/login-retry-lockout-time/selectors.ts
@@ -1,5 +1,5 @@
-import { RootState } from 'typesafe-actions';
 import { createSelector } from 'reselect';
+import { RootState } from 'typesafe-actions';
 
 import { LoginRetryLockoutTimeState } from './types';
 
diff --git a/src/background/redux/recent-recipient-public-keys/reducer.ts b/src/background/redux/recent-recipient-public-keys/reducer.ts
index ef9fc9d76..cbc65959a 100644
--- a/src/background/redux/recent-recipient-public-keys/reducer.ts
+++ b/src/background/redux/recent-recipient-public-keys/reducer.ts
@@ -1,7 +1,7 @@
 import { createReducer } from 'typesafe-actions';
 
-import { RecentRecipientPublicKeysState } from './types';
 import { recipientPublicKeyAdded, recipientPublicKeyReseted } from './actions';
+import { RecentRecipientPublicKeysState } from './types';
 
 const initialState = [] as RecentRecipientPublicKeysState;
 
diff --git a/src/background/redux/recent-recipient-public-keys/selectors.ts b/src/background/redux/recent-recipient-public-keys/selectors.ts
index 3f2e8dae5..134558cca 100644
--- a/src/background/redux/recent-recipient-public-keys/selectors.ts
+++ b/src/background/redux/recent-recipient-public-keys/selectors.ts
@@ -1,6 +1,6 @@
 import { RootState } from 'typesafe-actions';
 
-import { RecentRecipientPublicKeysState } from '@src/background/redux/recent-recipient-public-keys/types';
+import { RecentRecipientPublicKeysState } from '@background/redux/recent-recipient-public-keys/types';
 
 export const selectRecentRecipientPublicKeys = (
   state: RootState
diff --git a/src/background/redux/redux-action.ts b/src/background/redux/redux-action.ts
index a6f3aa356..c67f71a2c 100644
--- a/src/background/redux/redux-action.ts
+++ b/src/background/redux/redux-action.ts
@@ -1,18 +1,19 @@
 import { ActionType } from 'typesafe-actions';
-import * as sagas from './sagas/actions';
-import * as vault from './vault/actions';
-import * as vaultCipher from './vault-cipher/actions';
-import * as loginRetryCount from './login-retry-count/actions';
+
+import * as accountInfo from './account-info/actions';
+import * as activeOrigin from './active-origin/actions';
+import * as contacts from './contacts/actions';
 import * as keys from './keys/actions';
-import * as windowManagement from './windowManagement/actions';
-import * as session from './session/actions';
-import * as loginRetryLockoutTime from './login-retry-lockout-time/actions';
 import * as lastActivityTime from './last-activity-time/actions';
-import * as settings from './settings/actions';
-import * as activeOrigin from './active-origin/actions';
+import * as loginRetryCount from './login-retry-count/actions';
+import * as loginRetryLockoutTime from './login-retry-lockout-time/actions';
 import * as recentRecipientPublicKeys from './recent-recipient-public-keys/actions';
-import * as accountInfo from './account-info/actions';
-import * as contacts from './contacts/actions';
+import * as sagas from './sagas/actions';
+import * as session from './session/actions';
+import * as settings from './settings/actions';
+import * as vaultCipher from './vault-cipher/actions';
+import * as vault from './vault/actions';
+import * as windowManagement from './windowManagement/actions';
 
 const reduxAction = {
   sagas,
diff --git a/src/background/redux/root-reducer.ts b/src/background/redux/root-reducer.ts
index b77effc30..d175d40ef 100644
--- a/src/background/redux/root-reducer.ts
+++ b/src/background/redux/root-reducer.ts
@@ -1,18 +1,18 @@
 import { combineReducers } from 'redux';
 
-import { reducer as vaultCipher } from './vault-cipher/reducer';
-import { reducer as loginRetryCount } from './login-retry-count/reducer';
-import { reducer as vault } from './vault/reducer';
+import { reducer as accountInfo } from './account-info/reducer';
+import { reducer as activeOrigin } from './active-origin/reducer';
+import { reducer as contacts } from './contacts/reducer';
 import { reducer as keys } from './keys/reducer';
-import { reducer as windowManagement } from './windowManagement/reducer';
-import { reducer as session } from './session/reducer';
-import { reducer as loginRetryLockoutTime } from './login-retry-lockout-time/reducer';
 import { reducer as lastActivityTime } from './last-activity-time/reducer';
-import { reducer as settings } from './settings/reducer';
-import { reducer as activeOrigin } from './active-origin/reducer';
+import { reducer as loginRetryCount } from './login-retry-count/reducer';
+import { reducer as loginRetryLockoutTime } from './login-retry-lockout-time/reducer';
 import { reducer as recentRecipientPublicKeys } from './recent-recipient-public-keys/reducer';
-import { reducer as accountInfo } from './account-info/reducer';
-import { reducer as contacts } from './contacts/reducer';
+import { reducer as session } from './session/reducer';
+import { reducer as settings } from './settings/reducer';
+import { reducer as vaultCipher } from './vault-cipher/reducer';
+import { reducer as vault } from './vault/reducer';
+import { reducer as windowManagement } from './windowManagement/reducer';
 
 const rootReducer = combineReducers({
   vaultCipher,
diff --git a/src/background/redux/root-saga.ts b/src/background/redux/root-saga.ts
index 6ae9d2a1a..a6090b0d0 100644
--- a/src/background/redux/root-saga.ts
+++ b/src/background/redux/root-saga.ts
@@ -1,6 +1,7 @@
 import { all } from 'redux-saga/effects';
-import { vaultSagas } from './sagas/vault-sagas';
+
 import { onboardingSagas } from './sagas/onboarding-sagas';
+import { vaultSagas } from './sagas/vault-sagas';
 
 export default function* rootSaga() {
   yield all([vaultSagas(), onboardingSagas()]);
diff --git a/src/background/redux/sagas/actions.ts b/src/background/redux/sagas/actions.ts
index 75abaa66a..08134a113 100644
--- a/src/background/redux/sagas/actions.ts
+++ b/src/background/redux/sagas/actions.ts
@@ -1,12 +1,12 @@
 /**
  * USE CASES ACTIONS - don't update state in reducer, invoke state reducer events (imperative mode)
  */
-
 import { createAction } from 'typesafe-actions';
 
-import { SecretPhrase } from '@src/libs/crypto';
 import { UnlockVault } from '@background/redux/sagas/types';
 
+import { SecretPhrase } from '@libs/crypto';
+
 export const startBackground = createAction('START_BACKGROUND_SAGA')<void>();
 
 export const resetVault = createAction('RESET_VAULT_SAGA')<void>();
diff --git a/src/background/redux/sagas/onboarding-sagas.ts b/src/background/redux/sagas/onboarding-sagas.ts
index 713426adb..cbcb9c52d 100644
--- a/src/background/redux/sagas/onboarding-sagas.ts
+++ b/src/background/redux/sagas/onboarding-sagas.ts
@@ -1,35 +1,36 @@
-import browser from 'webextension-polyfill';
 import { put, takeLatest } from 'redux-saga/effects';
 import { getType } from 'typesafe-actions';
+import { storage } from 'webextension-polyfill';
 
-import { deriveKeyPair, validateSecretPhrase } from '@src/libs/crypto';
+import { disableOnboardingFlow } from '@background/open-onboarding-flow';
+import { contactsReseted } from '@background/redux/contacts/actions';
+import { recipientPublicKeyReseted } from '@background/redux/recent-recipient-public-keys/actions';
+import { vaultSettingsReseted } from '@background/redux/settings/actions';
 
-import { sagaCall } from '../utils';
-import {
-  accountAdded,
-  deploysReseted,
-  secretPhraseCreated,
-  vaultReseted
-} from '../vault/actions';
+import { deriveKeyPair, validateSecretPhrase } from '@libs/crypto';
 import {
   deriveEncryptionKey,
   encodePassword,
   generateRandomSaltHex
-} from '@src/libs/crypto/hashing';
-import { disableOnboardingFlow } from '@src/background/open-onboarding-flow';
+} from '@libs/crypto/hashing';
+import { convertBytesToHex } from '@libs/crypto/utils';
+
+import { keysReseted, keysUpdated } from '../keys/actions';
+import { loginRetryCountReseted } from '../login-retry-count/actions';
 import {
   encryptionKeyHashCreated,
   sessionReseted,
   vaultUnlocked
 } from '../session/actions';
-import { convertBytesToHex } from '@src/libs/crypto/utils';
-import { initKeys, initVault, resetVault } from './actions';
-import { keysReseted, keysUpdated } from '../keys/actions';
+import { sagaCall } from '../utils';
 import { vaultCipherReseted } from '../vault-cipher/actions';
-import { loginRetryCountReseted } from '../login-retry-count/actions';
-import { recipientPublicKeyReseted } from '@background/redux/recent-recipient-public-keys/actions';
-import { contactsReseted } from '@background/redux/contacts/actions';
-import { vaultSettingsReseted } from '@background/redux/settings/actions';
+import {
+  accountAdded,
+  deploysReseted,
+  secretPhraseCreated,
+  vaultReseted
+} from '../vault/actions';
+import { initKeys, initVault, resetVault } from './actions';
 
 export function* onboardingSagas() {
   yield takeLatest(getType(resetVault), resetVaultSaga);
@@ -40,7 +41,7 @@ export function* onboardingSagas() {
 /**
  *
  */
-function* resetVaultSaga(action: ReturnType<typeof resetVault>) {
+function* resetVaultSaga() {
   try {
     yield put(vaultReseted());
     yield put(vaultCipherReseted());
@@ -52,7 +53,7 @@ function* resetVaultSaga(action: ReturnType<typeof resetVault>) {
     yield put(contactsReseted());
     yield put(vaultSettingsReseted());
 
-    browser.storage.local.clear();
+    storage.local.clear();
   } catch (err) {
     console.error(err);
   }
diff --git a/src/background/redux/sagas/vault-sagas.ts b/src/background/redux/sagas/vault-sagas.ts
index f6f4746b8..5e4dd9823 100644
--- a/src/background/redux/sagas/vault-sagas.ts
+++ b/src/background/redux/sagas/vault-sagas.ts
@@ -1,65 +1,73 @@
 import { put, select, takeLatest } from 'redux-saga/effects';
 import { getType } from 'typesafe-actions';
 
-import { deriveKeyPair } from '@src/libs/crypto';
-import { encryptVault } from '@src/libs/crypto/vault';
-import {
-  deriveEncryptionKey,
-  encodePassword,
-  generateRandomSaltHex
-} from '@libs/crypto/hashing';
-import { convertBytesToHex } from '@libs/crypto/utils';
+import { getUrlOrigin } from '@src/utils';
 
 import {
   LOCK_VAULT_TIMEOUT,
   MapTimeoutDurationSettingToValue
-} from '@src/apps/popup/constants';
-import { sdkEvent } from '@src/content/sdk-event';
-import { emitSdkEventToActiveTabs } from '@src/background/utils';
-import { selectLoginRetryLockoutTime } from '@background/redux/login-retry-lockout-time/selectors';
+} from '@popup/constants';
+
 import {
   loginRetryLockoutTimeReseted,
   loginRetryLockoutTimeSet
 } from '@background/redux/login-retry-lockout-time/actions';
+import { selectLoginRetryLockoutTime } from '@background/redux/login-retry-lockout-time/selectors';
+import { emitSdkEventToActiveTabs } from '@background/utils';
 
+import { sdkEvent } from '@content/sdk-event';
+
+import { deriveKeyPair } from '@libs/crypto';
+import {
+  deriveEncryptionKey,
+  encodePassword,
+  generateRandomSaltHex
+} from '@libs/crypto/hashing';
+import { convertBytesToHex } from '@libs/crypto/utils';
+import { encryptVault } from '@libs/crypto/vault';
+
+import { accountInfoReset } from '../account-info/actions';
+import { keysUpdated } from '../keys/actions';
+import { lastActivityTimeRefreshed } from '../last-activity-time/actions';
+import { selectVaultLastActivityTime } from '../last-activity-time/selectors';
+import { loginRetryCountReseted } from '../login-retry-count/actions';
+import {
+  encryptionKeyHashCreated,
+  sessionReseted,
+  vaultUnlocked
+} from '../session/actions';
 import {
   selectEncryptionKeyHash,
   selectVaultIsLocked
 } from '../session/selectors';
+import { activeTimeoutDurationSettingChanged } from '../settings/actions';
+import { selectTimeoutDurationSetting } from '../settings/selectors';
 import { sagaCall, sagaSelect } from '../utils';
+import { vaultCipherCreated } from '../vault-cipher/actions';
+import { selectVaultCipherDoesExist } from '../vault-cipher/selectors';
 import {
   accountAdded,
+  accountDisconnected,
   accountImported,
-  accountRenamed,
   accountRemoved,
+  accountRenamed,
+  activeAccountChanged,
+  anotherAccountConnected,
+  deployPayloadReceived,
+  deploysReseted,
   siteConnected,
-  accountDisconnected,
   siteDisconnected,
-  activeAccountChanged,
   vaultLoaded,
-  vaultReseted,
-  anotherAccountConnected,
-  deployPayloadReceived
+  vaultReseted
 } from '../vault/actions';
 import {
+  selectAccountNamesByOriginDict,
   selectSecretPhrase,
   selectVault,
-  selectAccountNamesByOriginDict,
   selectVaultActiveAccount,
   selectVaultDerivedAccounts
 } from '../vault/selectors';
-import {
-  encryptionKeyHashCreated,
-  sessionReseted,
-  vaultUnlocked
-} from '../session/actions';
-import { selectVaultCipherDoesExist } from '../vault-cipher/selectors';
-import { keysUpdated } from '../keys/actions';
-import { vaultCipherCreated } from '../vault-cipher/actions';
-import { deploysReseted } from '../vault/actions';
-import { loginRetryCountReseted } from '../login-retry-count/actions';
 import { popupWindowInit } from '../windowManagement/actions';
-
 import {
   changePassword,
   createAccount,
@@ -67,12 +75,6 @@ import {
   startBackground,
   unlockVault
 } from './actions';
-import { lastActivityTimeRefreshed } from '../last-activity-time/actions';
-import { selectVaultLastActivityTime } from '../last-activity-time/selectors';
-import { activeTimeoutDurationSettingChanged } from '../settings/actions';
-import { selectTimeoutDurationSetting } from '../settings/selectors';
-import { getUrlOrigin } from '@src/utils';
-import { accountInfoReset } from '../account-info/actions';
 
 export function* vaultSagas() {
   yield takeLatest(getType(lockVault), lockVaultSaga);
diff --git a/src/background/redux/session/reducer.ts b/src/background/redux/session/reducer.ts
index 575bf8d15..de5526417 100644
--- a/src/background/redux/session/reducer.ts
+++ b/src/background/redux/session/reducer.ts
@@ -1,12 +1,12 @@
 import { createReducer } from 'typesafe-actions';
 
-import { SessionState } from './types';
 import {
-  sessionReseted,
+  contactEditingPermissionChanged,
   encryptionKeyHashCreated,
-  vaultUnlocked,
-  contactEditingPermissionChanged
+  sessionReseted,
+  vaultUnlocked
 } from './actions';
+import { SessionState } from './types';
 
 type State = SessionState;
 
@@ -20,7 +20,7 @@ export const reducer = createReducer(initialState)
   .handleAction(sessionReseted, (): State => initialState)
   .handleAction(
     vaultUnlocked,
-    (state, { payload: { lastActivityTime } }): State => ({
+    (state): State => ({
       ...state,
       isLocked: false
     })
diff --git a/src/background/redux/settings/actions.ts b/src/background/redux/settings/actions.ts
index 21e664517..41d388832 100644
--- a/src/background/redux/settings/actions.ts
+++ b/src/background/redux/settings/actions.ts
@@ -1,7 +1,9 @@
 import { createAction } from 'typesafe-actions';
 
-import { TimeoutDurationSetting } from '@popup/constants';
 import { NetworkSetting } from '@src/constants';
+
+import { TimeoutDurationSetting } from '@popup/constants';
+
 import { ThemeMode } from '@background/redux/settings/types';
 
 export const activeTimeoutDurationSettingChanged = createAction(
diff --git a/src/background/redux/settings/reducer.ts b/src/background/redux/settings/reducer.ts
index e29deee12..608740000 100644
--- a/src/background/redux/settings/reducer.ts
+++ b/src/background/redux/settings/reducer.ts
@@ -1,9 +1,10 @@
 import { createReducer } from 'typesafe-actions';
 
-import { TimeoutDurationSetting } from '@popup/constants';
 import { NetworkSetting } from '@src/constants';
 import { isSafariBuild } from '@src/utils';
 
+import { TimeoutDurationSetting } from '@popup/constants';
+
 import {
   activeNetworkSettingChanged,
   activeTimeoutDurationSettingChanged,
diff --git a/src/background/redux/settings/selectors.ts b/src/background/redux/settings/selectors.ts
index a5554e376..bdc8d28bc 100644
--- a/src/background/redux/settings/selectors.ts
+++ b/src/background/redux/settings/selectors.ts
@@ -1,11 +1,12 @@
-import { RootState } from 'typesafe-actions';
 import { createSelector } from 'reselect';
+import { RootState } from 'typesafe-actions';
 
 import {
   AuctionManagerContractHash,
-  CasperApiUrl,
+  CasperClarityApiUrl,
   CasperLiveUrl,
   CasperNodeUrl,
+  CasperWalletApiUrl,
   NetworkName,
   NetworkSetting
 } from '@src/constants';
@@ -23,7 +24,8 @@ export const selectApiConfigBasedOnActiveNetwork = createSelector(
       case NetworkSetting.Mainnet:
         return {
           casperLiveUrl: CasperLiveUrl.MainnetUrl,
-          casperApiUrl: CasperApiUrl.MainnetUrl,
+          casperClarityApiUrl: CasperClarityApiUrl.MainnetUrl,
+          casperWalletApiUrl: CasperWalletApiUrl.MainnetUrl,
           networkName: NetworkName.Mainnet,
           nodeUrl: CasperNodeUrl.MainnetUrl,
           auctionManagerContractHash: AuctionManagerContractHash.Mainnet
@@ -31,7 +33,8 @@ export const selectApiConfigBasedOnActiveNetwork = createSelector(
       case NetworkSetting.Testnet:
         return {
           casperLiveUrl: CasperLiveUrl.TestnetUrl,
-          casperApiUrl: CasperApiUrl.TestnetUrl,
+          casperClarityApiUrl: CasperClarityApiUrl.TestnetUrl,
+          casperWalletApiUrl: CasperWalletApiUrl.TestnetUrl,
           networkName: NetworkName.Testnet,
           nodeUrl: CasperNodeUrl.TestnetUrl,
           auctionManagerContractHash: AuctionManagerContractHash.Testnet
diff --git a/src/background/redux/settings/types.ts b/src/background/redux/settings/types.ts
index ae739dcba..5e78e108a 100644
--- a/src/background/redux/settings/types.ts
+++ b/src/background/redux/settings/types.ts
@@ -1,6 +1,7 @@
-import { TimeoutDurationSetting } from '@popup/constants';
 import { NetworkSetting } from '@src/constants';
 
+import { TimeoutDurationSetting } from '@popup/constants';
+
 export enum ThemeMode {
   SYSTEM = 'System',
   DARK = 'Dark',
diff --git a/src/background/redux/types.d.ts b/src/background/redux/types.d.ts
index ad34c35e2..a620e4ea1 100644
--- a/src/background/redux/types.d.ts
+++ b/src/background/redux/types.d.ts
@@ -1,5 +1,19 @@
 import { ActionType, StateType } from 'typesafe-actions';
 
+import { AccountInfoState } from '@background/redux/account-info/types';
+import { ActiveOriginState } from '@background/redux/active-origin/types';
+import { ContactsState } from '@background/redux/contacts/types';
+import { KeysState } from '@background/redux/keys/types';
+import { LastActivityTimeState } from '@background/redux/last-activity-time/reducer';
+import { LoginRetryCountState } from '@background/redux/login-retry-count/reducer';
+import { LoginRetryLockoutTimeState } from '@background/redux/login-retry-lockout-time/types';
+import { RecentRecipientPublicKeysState } from '@background/redux/recent-recipient-public-keys/types';
+import { SessionState } from '@background/redux/session/types';
+import { SettingsState } from '@background/redux/settings/types';
+import { VaultCipherState } from '@background/redux/vault-cipher/types';
+import { VaultState } from '@background/redux/vault/types';
+import { WindowManagementState } from '@background/redux/windowManagement/types';
+
 declare module 'typesafe-actions' {
   export type Store = StateType<typeof import('./index').default>;
   export type RootAction = ActionType<typeof import('./redux-action').default>;
@@ -11,9 +25,24 @@ declare module 'typesafe-actions' {
     StateType<typeof import('./root-reducer').default>,
     RootStateKey
   >;
-  export type Services = typeof import('@src/libs/services');
+  export type Services = typeof import('@libs/services');
 
   interface Types {
     RootAction: RootAction;
   }
 }
+export type PopupState = {
+  keys: KeysState;
+  session: SessionState;
+  loginRetryCount: LoginRetryCountState;
+  vault: VaultState;
+  windowManagement: WindowManagementState;
+  vaultCipher: VaultCipherState;
+  loginRetryLockoutTime: LoginRetryLockoutTimeState;
+  lastActivityTime: LastActivityTimeState;
+  settings: SettingsState;
+  activeOrigin: ActiveOriginState;
+  recentRecipientPublicKeys: RecentRecipientPublicKeysState;
+  accountInfo: AccountInfoState;
+  contacts: ContactsState;
+};
diff --git a/src/background/redux/utils.ts b/src/background/redux/utils.ts
index a6b459797..1d7de7c40 100644
--- a/src/background/redux/utils.ts
+++ b/src/background/redux/utils.ts
@@ -1,28 +1,10 @@
-import { compose } from 'redux';
-import { composeWithDevTools } from 'remote-redux-devtools';
-import browser from 'webextension-polyfill';
+import { call, select } from 'redux-saga/effects';
 import { RootState } from 'typesafe-actions';
-import { select, call } from 'redux-saga/effects';
+import { runtime } from 'webextension-polyfill';
 
-import { createStore } from '@src/background/redux';
-import { backgroundEvent } from '@src/background/background-events';
 import { ServiceMessage } from '@background/service-message';
 
 import { ReduxAction } from './redux-action';
-import { startBackground } from './sagas/actions';
-import { KeysState } from './keys/types';
-import { LoginRetryCountState } from './login-retry-count/reducer';
-import { LoginRetryLockoutTimeState } from './login-retry-lockout-time/types';
-import { VaultCipherState } from './vault-cipher/types';
-import { WindowManagementState } from './windowManagement/types';
-import { VaultState } from './vault/types';
-import { SessionState } from './session/types';
-import { LastActivityTimeState } from './last-activity-time/reducer';
-import { SettingsState } from './settings/types';
-import { ActiveOriginState } from './active-origin/types';
-import { RecentRecipientPublicKeysState } from './recent-recipient-public-keys/types';
-import { AccountInfoState } from './account-info/types';
-import { ContactsState } from './contacts/types';
 
 declare global {
   interface Window {
@@ -30,167 +12,8 @@ declare global {
   }
 }
 
-// export const composeEnhancers = compose;
-export const composeEnhancers =
-  process.env.NODE_ENV === 'development'
-    ? composeWithDevTools({
-        name: 'Casper Wallet',
-        hostname: 'localhost',
-        port: 8000
-      })
-    : compose;
-// If this flag is true, we initialize the initial state for the tests
-const isMockStateEnable = Boolean(process.env.MOCK_STATE);
-
-export const VAULT_CIPHER_KEY = 'zazXu8w9GyCtxZ';
-export const KEYS_KEY = '2yNVAEQJB5rxMg';
-export const LOGIN_RETRY_KEY = '7ZVdMbk9yD8WGZ';
-export const LOGIN_RETRY_LOCKOUT_KEY = 'p6nnYiaxcsaNG3';
-export const LAST_ACTIVITY_TIME = 'j8d1dusn76EdD';
-export const VAULT_SETTINGS = 'Nmxd8BZh93MHua';
-export const RECENT_RECIPIENT_PUBLIC_KEYS = '7c2WyRuGhEtaDX';
-export const CONTACTS_KEY = 'teuwe6zH3A72gc';
-
-type StorageState = {
-  [VAULT_CIPHER_KEY]: string;
-  [KEYS_KEY]: KeysState;
-  [LOGIN_RETRY_KEY]: LoginRetryCountState;
-  [LOGIN_RETRY_LOCKOUT_KEY]: LoginRetryLockoutTimeState;
-  [LAST_ACTIVITY_TIME]: number;
-  [VAULT_SETTINGS]: SettingsState;
-  [RECENT_RECIPIENT_PUBLIC_KEYS]: RecentRecipientPublicKeysState;
-  [CONTACTS_KEY]: ContactsState;
-};
-
-// this needs to be private
-let storeSingleton: ReturnType<typeof createStore>;
-
-export async function getExistingMainStoreSingletonOrInit() {
-  // load selected state
-  const {
-    [VAULT_CIPHER_KEY]: vaultCipher,
-    [KEYS_KEY]: keys,
-    [LOGIN_RETRY_KEY]: loginRetryCount,
-    [LOGIN_RETRY_LOCKOUT_KEY]: loginRetryLockoutTime,
-    [LAST_ACTIVITY_TIME]: lastActivityTime,
-    [VAULT_SETTINGS]: settings,
-    [RECENT_RECIPIENT_PUBLIC_KEYS]: recentRecipientPublicKeys,
-    [CONTACTS_KEY]: contacts
-  } = (await browser.storage.local.get([
-    VAULT_CIPHER_KEY,
-    KEYS_KEY,
-    LOGIN_RETRY_KEY,
-    LOGIN_RETRY_LOCKOUT_KEY,
-    LAST_ACTIVITY_TIME,
-    VAULT_SETTINGS,
-    RECENT_RECIPIENT_PUBLIC_KEYS,
-    CONTACTS_KEY
-  ])) as StorageState;
-
-  if (storeSingleton == null) {
-    if (isMockStateEnable) {
-      const { initialStateForPopupTests } = await import(
-        /* webpackMode: "eager" */ '@src/fixtures'
-      );
-      storeSingleton = createStore(initialStateForPopupTests as PopupState);
-    } else {
-      storeSingleton = createStore({
-        vaultCipher,
-        keys,
-        loginRetryCount,
-        loginRetryLockoutTime,
-        lastActivityTime,
-        settings,
-        recentRecipientPublicKeys,
-        contacts
-      });
-    }
-    // send start action
-    storeSingleton.dispatch(startBackground());
-    // on updates propagate new state to replicas and also persist encrypted vault
-    storeSingleton.subscribe(() => {
-      const state = storeSingleton.getState();
-
-      // propagate state to replicas
-      const popupState = selectPopupState(state);
-      browser.runtime.sendMessage(
-        backgroundEvent.popupStateUpdated(popupState)
-      );
-
-      // persist selected state
-      const {
-        vaultCipher,
-        keys,
-        loginRetryCount,
-        loginRetryLockoutTime,
-        lastActivityTime,
-        settings,
-        recentRecipientPublicKeys,
-        contacts
-      } = state;
-      browser.storage.local
-        .set({
-          [VAULT_CIPHER_KEY]: vaultCipher,
-          [KEYS_KEY]: keys,
-          [LOGIN_RETRY_KEY]: loginRetryCount,
-          [LOGIN_RETRY_LOCKOUT_KEY]: loginRetryLockoutTime,
-          [LAST_ACTIVITY_TIME]: lastActivityTime,
-          [VAULT_SETTINGS]: settings,
-          [RECENT_RECIPIENT_PUBLIC_KEYS]: recentRecipientPublicKeys,
-          [CONTACTS_KEY]: contacts
-        })
-        .catch(e => {
-          console.error('Persist encrypted vault failed: ', e);
-        });
-    });
-  }
-
-  return storeSingleton;
-}
-
-export type PopupState = {
-  keys: KeysState;
-  session: SessionState;
-  loginRetryCount: LoginRetryCountState;
-  vault: VaultState;
-  windowManagement: WindowManagementState;
-  vaultCipher: VaultCipherState;
-  loginRetryLockoutTime: LoginRetryLockoutTimeState;
-  lastActivityTime: LastActivityTimeState;
-  settings: SettingsState;
-  activeOrigin: ActiveOriginState;
-  recentRecipientPublicKeys: RecentRecipientPublicKeysState;
-  accountInfo: AccountInfoState;
-  contacts: ContactsState;
-};
-
-// These state keys will be passed to popups
-export const selectPopupState = (state: RootState): PopupState => {
-  // TODO: must sanitize state to not send private data back to front
-  return {
-    keys: state.keys,
-    loginRetryCount: state.loginRetryCount,
-    session: state.session,
-    vault: state.vault,
-    windowManagement: state.windowManagement,
-    vaultCipher: state.vaultCipher,
-    loginRetryLockoutTime: state.loginRetryLockoutTime,
-    lastActivityTime: state.lastActivityTime,
-    activeOrigin: state.activeOrigin,
-    settings: state.settings,
-    recentRecipientPublicKeys: state.recentRecipientPublicKeys,
-    accountInfo: state.accountInfo,
-    contacts: state.contacts
-  };
-};
-
-export function createMainStoreReplica<T extends PopupState>(state: T) {
-  const store = createStore(state);
-  return store;
-}
-
 export function dispatchToMainStore(action: ReduxAction | ServiceMessage) {
-  return browser.runtime.sendMessage(action).catch(err => {
+  return runtime.sendMessage(action).catch(() => {
     console.error('Dispatch to Main Store: ' + action.type);
   });
 }
diff --git a/src/background/redux/vault-cipher/reducer.ts b/src/background/redux/vault-cipher/reducer.ts
index df5ec920e..5c2acc59a 100644
--- a/src/background/redux/vault-cipher/reducer.ts
+++ b/src/background/redux/vault-cipher/reducer.ts
@@ -1,14 +1,12 @@
 import { createReducer } from 'typesafe-actions';
+
 import { vaultCipherCreated, vaultCipherReseted } from './actions';
 import { VaultCipherState } from './types';
 
 const initialState = null as VaultCipherState;
 
 export const reducer = createReducer(initialState)
-  .handleAction(
-    vaultCipherReseted,
-    (state, action): VaultCipherState => initialState
-  )
+  .handleAction(vaultCipherReseted, (): VaultCipherState => initialState)
   .handleAction(
     vaultCipherCreated,
     (state, action): VaultCipherState => action.payload.vaultCipher
diff --git a/src/background/redux/vault/actions.ts b/src/background/redux/vault/actions.ts
index cb16e74bb..c89ba6e7a 100644
--- a/src/background/redux/vault/actions.ts
+++ b/src/background/redux/vault/actions.ts
@@ -1,6 +1,9 @@
 import { createAction } from 'typesafe-actions';
-import { Account, VaultState } from '@src/background/redux/vault/types';
-import { SecretPhrase } from '@src/libs/crypto';
+
+import { VaultState } from '@background/redux/vault/types';
+
+import { SecretPhrase } from '@libs/crypto';
+import { Account } from '@libs/types/account';
 
 export const vaultReseted = createAction('VAULT_RESETED')<void>();
 
diff --git a/src/background/redux/vault/reducer.ts b/src/background/redux/vault/reducer.ts
index 6f7cf5c9a..654f489a3 100644
--- a/src/background/redux/vault/reducer.ts
+++ b/src/background/redux/vault/reducer.ts
@@ -1,20 +1,20 @@
 import { createReducer } from 'typesafe-actions';
 
 import {
-  vaultReseted,
-  vaultLoaded,
-  secretPhraseCreated,
   accountAdded,
+  accountDisconnected,
   accountImported,
   accountRemoved,
   accountRenamed,
-  siteConnected,
-  accountDisconnected,
-  siteDisconnected,
   activeAccountChanged,
   anotherAccountConnected,
+  deployPayloadReceived,
   deploysReseted,
-  deployPayloadReceived
+  secretPhraseCreated,
+  siteConnected,
+  siteDisconnected,
+  vaultLoaded,
+  vaultReseted
 } from './actions';
 import { VaultState } from './types';
 
@@ -95,7 +95,7 @@ export const reducer = createReducer(initialState)
         Object.entries(state.accountNamesByOriginDict)
           // when last account for origin, remove group
           .filter(
-            ([origin, names = []]) =>
+            ([, names = []]) =>
               !(names.includes(accountName) && names.length === 1)
           )
           // otherwise just remove single account
diff --git a/src/background/redux/vault/selectors.ts b/src/background/redux/vault/selectors.ts
index 0528468cd..6a344140b 100644
--- a/src/background/redux/vault/selectors.ts
+++ b/src/background/redux/vault/selectors.ts
@@ -1,8 +1,11 @@
 import { createSelector } from 'reselect';
 import { RootState } from 'typesafe-actions';
 
-import { Account, VaultState } from '@src/background/redux/vault/types';
-import { SecretPhrase } from '@src/libs/crypto';
+import { VaultState } from '@background/redux/vault/types';
+
+import { SecretPhrase } from '@libs/crypto';
+import { Account } from '@libs/types/account';
+
 import { selectActiveOrigin } from '../active-origin/selectors';
 
 export const selectVault = (state: RootState): VaultState => state.vault;
diff --git a/src/background/redux/vault/types.ts b/src/background/redux/vault/types.ts
index d542d0671..4534307a3 100644
--- a/src/background/redux/vault/types.ts
+++ b/src/background/redux/vault/types.ts
@@ -1,25 +1,10 @@
-import { SecretPhrase } from '@src/libs/crypto';
-
-export interface KeyPair {
-  secretKey: string;
-  publicKey: string;
-}
-
-// Maybe make sense to move `Account` to shared place, because it used by `popup` and `import-account-with-file` apps
-export interface Account extends KeyPair {
-  name: string;
-  imported?: boolean;
-}
-
-export interface AccountListRows extends Account {
-  id: string;
-}
+import { Account } from '@libs/types/account';
 
 type AccountNamesByOriginDict = Record<string, string[] | undefined>;
 type SiteNameByOriginDict = Record<string, string | undefined>;
 
 export type VaultState = {
-  secretPhrase: null | SecretPhrase;
+  secretPhrase: null | string[];
   accounts: Account[];
   accountNamesByOriginDict: AccountNamesByOriginDict;
   siteNameByOriginDict: SiteNameByOriginDict;
diff --git a/src/background/redux/windowManagement/reducer.ts b/src/background/redux/windowManagement/reducer.ts
index 1daac69fc..d1e751c87 100644
--- a/src/background/redux/windowManagement/reducer.ts
+++ b/src/background/redux/windowManagement/reducer.ts
@@ -1,7 +1,8 @@
 import { createReducer } from 'typesafe-actions';
 
+import { windowIdChanged, windowIdCleared } from './actions';
 import { WindowManagementState } from './types';
-import { windowIdCleared, windowIdChanged } from './actions';
+
 type State = WindowManagementState;
 
 const initialState: State = {
diff --git a/src/background/send-sdk-response-to-specific-tab.ts b/src/background/send-sdk-response-to-specific-tab.ts
index 2aa37b137..1293b11b5 100644
--- a/src/background/send-sdk-response-to-specific-tab.ts
+++ b/src/background/send-sdk-response-to-specific-tab.ts
@@ -1,19 +1,16 @@
-import browser from 'webextension-polyfill';
+import { tabs } from 'webextension-polyfill';
 
-import { SdkMethod } from '@src/content/sdk-method';
+import { SdkMethod } from '@content/sdk-method';
 
 // TODO: should use tab id to send back to specific tab
-export async function sendSdkResponseToSpecificTab(
-  action: SdkMethod,
-  tabId?: number
-) {
-  const tabs = await browser.tabs.query({
+export async function sendSdkResponseToSpecificTab(action: SdkMethod) {
+  const tabsList = await tabs.query({
     active: true
   });
 
-  tabs.forEach(async tab => {
+  tabsList.forEach(async tab => {
     if (tab.id) {
-      browser.tabs.sendMessage(tab.id, action);
+      tabs.sendMessage(tab.id, action);
     } else {
       throw Error('Tab without id: ' + tab);
     }
diff --git a/src/background/service-message.ts b/src/background/service-message.ts
index 2885da328..4d634cc60 100644
--- a/src/background/service-message.ts
+++ b/src/background/service-message.ts
@@ -1,25 +1,25 @@
 import { ActionType, createAction } from 'typesafe-actions';
 
-import { FetchBalanceResponse } from '@libs/services/balance-service';
-import { AccountInfo } from '@libs/services/account-info';
 import {
   Erc20TokenActionResult,
-  TransferResult,
-  ExtendedDeploy
-} from 'src/libs/services/account-activity-service';
+  ExtendedDeploy,
+  TransferResult
+} from '@libs/services/account-activity-service/types';
+import { AccountInfo } from '@libs/services/account-info/types';
+import { FetchBalanceResponse } from '@libs/services/balance-service/types';
+import { ContractPackageWithBalance } from '@libs/services/erc20-service/types';
+import { NFTTokenResult } from '@libs/services/nft-service/types';
 import { ErrorResponse, PaginatedResponse } from '@libs/services/types';
-import { ContractPackageWithBalance } from '@libs/services/erc20-service';
-import { NFTTokenResult } from '@libs/services/nft-service';
 import {
   DelegatorResult,
   ValidatorResult
-} from '@libs/services/validators-service';
+} from '@libs/services/validators-service/types';
 
 type Meta = void;
 
 export const serviceMessage = {
   fetchBalanceRequest: createAction('FETCH_ACCOUNT_BALANCE')<
-    { publicKey: string },
+    { accountHash: string },
     Meta
   >(),
   fetchBalanceResponse: createAction('FETCH_ACCOUNT_BALANCE_RESPONSE')<
diff --git a/src/background/utils.ts b/src/background/utils.ts
index 97a074058..c3d73ba1a 100644
--- a/src/background/utils.ts
+++ b/src/background/utils.ts
@@ -1,16 +1,17 @@
-import browser from 'webextension-polyfill';
+import { Tabs, tabs } from 'webextension-polyfill';
 
-import { SdkEvent } from '@src/content/sdk-event';
 import { getUrlOrigin, hasHttpPrefix } from '@src/utils';
 
+import { SdkEvent } from '@content/sdk-event';
+
 export async function emitSdkEventToActiveTabs(
-  callback: (tab: browser.Tabs.Tab) => SdkEvent | undefined
+  callback: (tab: Tabs.Tab) => SdkEvent | undefined
 ) {
-  const tabs = await browser.tabs.query({
+  const tabsList = await tabs.query({
     active: true
   });
 
-  tabs.forEach(async tab => {
+  tabsList.forEach(async tab => {
     if (tab.id) {
       // skip non http windows
       if (tab.url && hasHttpPrefix(tab.url)) {
@@ -18,7 +19,7 @@ export async function emitSdkEventToActiveTabs(
         if (action == null) {
           return;
         }
-        browser.tabs.sendMessage(tab.id, action);
+        tabs.sendMessage(tab.id, action);
       }
     } else {
       throw Error('Tab without id: ' + tab);
@@ -34,11 +35,11 @@ export async function emitSdkEventToActiveTabsWithOrigin(
     return;
   }
 
-  const tabs = await browser.tabs.query({
+  const tabsList = await tabs.query({
     active: true
   });
 
-  tabs.forEach(async tab => {
+  tabsList.forEach(async tab => {
     if (tab.id) {
       // skip non http windows
       if (
@@ -46,7 +47,7 @@ export async function emitSdkEventToActiveTabsWithOrigin(
         hasHttpPrefix(tab.url) &&
         getUrlOrigin(tab.url) === origin
       ) {
-        browser.tabs.sendMessage(tab.id, action);
+        tabs.sendMessage(tab.id, action);
       }
     } else {
       throw Error('Tab without id: ' + tab);
diff --git a/src/background/workers/unlockVaultWorker.ts b/src/background/workers/unlockVaultWorker.ts
index d5197f588..1f492c2c1 100644
--- a/src/background/workers/unlockVaultWorker.ts
+++ b/src/background/workers/unlockVaultWorker.ts
@@ -1,10 +1,11 @@
+import { VaultCipherState } from '@background/redux/vault-cipher/types';
+
 import {
   deriveEncryptionKey,
   generateRandomSaltHex
 } from '@libs/crypto/hashing';
 import { convertBytesToHex } from '@libs/crypto/utils';
 import { decryptVault, encryptVault } from '@libs/crypto/vault';
-import { VaultCipherState } from '@background/redux/vault-cipher/types';
 
 /**
  * on unlock decrypt stored vault from cipher
diff --git a/src/constants.ts b/src/constants.ts
index c53c13976..103b19538 100644
--- a/src/constants.ts
+++ b/src/constants.ts
@@ -16,6 +16,7 @@ export const VALIDATORS_REFRESH_RATE = 30 * SECOND;
 
 export const LOGIN_RETRY_ATTEMPTS_LIMIT = 5;
 
+export const MOTES_PER_CSPR_RATE = '1000000000'; // 1 000 000 000 MOTES === 1 CSPR
 export const TRANSFER_COST_MOTES = '100000000'; // 0.1 CSPR
 export const TRANSFER_MIN_AMOUNT_MOTES = '2500000000'; // 2.5 CSPR
 export const ERC20_PAYMENT_AMOUNT_AVERAGE_MOTES = '1500000000'; // 1.5 CSPR
@@ -50,11 +51,16 @@ export enum CasperLiveUrl {
   TestnetUrl = 'https://testnet.cspr.live'
 }
 
-export enum CasperApiUrl {
+export enum CasperClarityApiUrl {
   MainnetUrl = 'https://event-store-api-clarity-mainnet.make.services',
   TestnetUrl = 'https://event-store-api-clarity-testnet.make.services'
 }
 
+export enum CasperWalletApiUrl {
+  MainnetUrl = 'https://api.casperwallet.io',
+  TestnetUrl = 'https://cspr-wallet-api.dev.make.services'
+}
+
 export enum NetworkSetting {
   Mainnet = 'Mainnet',
   Testnet = 'Testnet'
@@ -94,7 +100,8 @@ export enum ActivityType {
   Undelegated = 'Undelegated',
   Redelegated = 'Redelegated',
   Mint = 'Mint',
-  Burn = 'Burn'
+  Burn = 'Burn',
+  TransferNft = 'Transfer NFT'
 }
 
 export const ActivityShortTypeName = {
@@ -104,8 +111,9 @@ export const ActivityShortTypeName = {
   [ActivityType.Delegated]: 'Deleg',
   [ActivityType.Undelegated]: 'Undeleg',
   [ActivityType.Redelegated]: 'Redeleg',
-  [ActivityType.Mint]: 'Mint',
-  [ActivityType.Burn]: 'Burn'
+  [ActivityType.Mint]: 'Mint NFT',
+  [ActivityType.Burn]: 'Burn NFT',
+  [ActivityType.TransferNft]: 'Transfer NFT'
 };
 
 export const ActivityTypeName = {
@@ -115,8 +123,9 @@ export const ActivityTypeName = {
   [ActivityType.Delegated]: 'Delegated',
   [ActivityType.Undelegated]: 'Undelegated',
   [ActivityType.Redelegated]: 'Redelegated',
-  [ActivityType.Mint]: 'Mint',
-  [ActivityType.Burn]: 'Burn'
+  [ActivityType.Mint]: 'Mint NFT',
+  [ActivityType.Burn]: 'Burn NFT',
+  [ActivityType.TransferNft]: 'Transfer NFT'
 };
 
 export const ActivityTypeIcons = {
@@ -127,7 +136,8 @@ export const ActivityTypeIcons = {
   [ActivityType.Undelegated]: 'assets/icons/undelegate.svg',
   [ActivityType.Redelegated]: 'assets/icons/undelegate.svg',
   [ActivityType.Mint]: 'assets/icons/info.svg',
-  [ActivityType.Burn]: 'assets/icons/burn.svg'
+  [ActivityType.Burn]: 'assets/icons/burn.svg',
+  [ActivityType.TransferNft]: 'assets/icons/transfer.svg'
 };
 
 export const ActivityTypeColors = {
@@ -138,7 +148,8 @@ export const ActivityTypeColors = {
   [ActivityType.Undelegated]: 'contentAction',
   [ActivityType.Redelegated]: 'contentAction',
   [ActivityType.Mint]: 'contentDisabled',
-  [ActivityType.Burn]: 'contentAction'
+  [ActivityType.Burn]: 'contentActionCritical',
+  [ActivityType.TransferNft]: 'contentAction'
 };
 
 export enum HomePageTabName {
@@ -149,6 +160,7 @@ export enum HomePageTabName {
 
 export enum StakeSteps {
   Validator = 'validator',
+  NewValidator = 'new validator',
   Amount = 'amount',
   Confirm = 'confirm',
   Success = 'success'
@@ -162,5 +174,6 @@ export enum AuctionManagerEntryPoint {
 
 export enum TokenEntryPoint {
   mint = 'mint',
-  burn = 'burn'
+  burn = 'burn',
+  transfer = 'transfer'
 }
diff --git a/src/content/index.ts b/src/content/index.ts
index b197134b0..c26b4fcf6 100644
--- a/src/content/index.ts
+++ b/src/content/index.ts
@@ -1,19 +1,16 @@
-import browser from 'webextension-polyfill';
+import { getType } from 'typesafe-actions';
+import { runtime } from 'webextension-polyfill';
 
+import { SdkEvent, sdkEvent } from './sdk-event';
+import { CasperWalletEventType } from './sdk-event-type';
 import {
+  SdkMethod,
   SdkMethodEventType,
   isSDKMethod,
-  sdkMethod,
-  SdkMethod
+  sdkMethod
 } from './sdk-method';
-import { sdkEvent, SdkEvent } from './sdk-event';
-import { getType } from 'typesafe-actions';
-import { CasperWalletEventType } from './sdk-event-type';
 
-async function handleSdkMessage(
-  message: SdkEvent | SdkMethod,
-  sender: browser.Runtime.MessageSender
-) {
+async function handleSdkMessage(message: SdkEvent | SdkMethod) {
   // delayed sdk request response
   if (isSDKMethod(message)) {
     switch (message.type) {
@@ -93,7 +90,7 @@ function handleSdkRequestEvent(e: Event) {
     );
   }
 
-  browser.runtime
+  runtime
     .sendMessage(requestAction)
     .then(message => {
       // if valid message send back response
@@ -118,7 +115,7 @@ function injectSdkScript() {
 
     const scriptTag = document.createElement('script');
     scriptTag.setAttribute('type', 'text/javascript');
-    scriptTag.src = browser.runtime.getURL(inpageScriptPath);
+    scriptTag.src = runtime.getURL(inpageScriptPath);
     scriptTag.onload = function () {
       documentHeadOrRoot.removeChild(scriptTag);
     };
@@ -132,7 +129,7 @@ function init() {
   // idempotent, doesn't need cleanup
   injectSdkScript();
 
-  browser.runtime.onMessage.addListener(handleSdkMessage);
+  runtime.onMessage.addListener(handleSdkMessage);
   window.addEventListener(SdkMethodEventType.Request, handleSdkRequestEvent);
 }
 
@@ -142,7 +139,7 @@ window.dispatchEvent(new CustomEvent(cleanupEventType));
 function cleanup() {
   document.removeEventListener(cleanupEventType, cleanup);
 
-  browser.runtime.onMessage.removeListener(handleSdkMessage);
+  runtime.onMessage.removeListener(handleSdkMessage);
   window.removeEventListener(SdkMethodEventType.Request, handleSdkRequestEvent);
 }
 window.addEventListener(cleanupEventType, cleanup);
diff --git a/src/content/sdk-event.ts b/src/content/sdk-event.ts
index eff8b216b..7e29643d8 100644
--- a/src/content/sdk-event.ts
+++ b/src/content/sdk-event.ts
@@ -1,4 +1,5 @@
 import { ActionType, createAction } from 'typesafe-actions';
+
 import { CasperWalletState } from './sdk-types';
 
 // Event emitted to connected sites
diff --git a/src/content/sdk-method.ts b/src/content/sdk-method.ts
index d8e2c00bb..1fc67e47e 100644
--- a/src/content/sdk-method.ts
+++ b/src/content/sdk-method.ts
@@ -1,4 +1,5 @@
 import { ActionType, createAction, createCustomAction } from 'typesafe-actions';
+
 import { SdkError } from './sdk-errors';
 
 export const SdkMethodEventType = {
diff --git a/src/content/sdk.ts b/src/content/sdk.ts
index a7386204c..798007061 100644
--- a/src/content/sdk.ts
+++ b/src/content/sdk.ts
@@ -1,10 +1,11 @@
-import { convertHexToBytes } from '@src/libs/crypto/utils';
+import { convertHexToBytes } from '@libs/crypto/utils';
+
 import { CasperWalletEventType } from './sdk-event-type';
 import {
+  SdkMethod,
   SdkMethodEventType,
   isSDKMethod,
-  sdkMethod,
-  SdkMethod
+  sdkMethod
 } from './sdk-method';
 
 export type SignatureResponse =
diff --git a/src/declarative_net_request_rules.json b/src/declarative_net_request_rules.json
index b729fb86c..3eadbf9da 100644
--- a/src/declarative_net_request_rules.json
+++ b/src/declarative_net_request_rules.json
@@ -15,5 +15,39 @@
     "condition": {
       "urlFilter": "https://image-proxy-cdn.make.services"
     }
+  },
+  {
+    "id": 2,
+    "priority": 1,
+    "action": {
+      "type": "modifyHeaders",
+      "requestHeaders": [
+        {
+          "header": "Referer",
+          "operation": "set",
+          "value": "https://casperwallet.io"
+        }
+      ]
+    },
+    "condition": {
+      "urlFilter": "https://cspr-wallet-api.dev.make.services"
+    }
+  },
+  {
+    "id": 3,
+    "priority": 1,
+    "action": {
+      "type": "modifyHeaders",
+      "requestHeaders": [
+        {
+          "header": "Referer",
+          "operation": "set",
+          "value": "https://casperwallet.io"
+        }
+      ]
+    },
+    "condition": {
+      "urlFilter": "https://api.casperwallet.io"
+    }
   }
 ]
diff --git a/src/fixtures/initial-state-for-popup-tests.ts b/src/fixtures/initial-state-for-popup-tests.ts
index 6ec3442ce..fcdde45fd 100644
--- a/src/fixtures/initial-state-for-popup-tests.ts
+++ b/src/fixtures/initial-state-for-popup-tests.ts
@@ -1,7 +1,9 @@
 import { RootState } from 'typesafe-actions';
 
 import { NetworkSetting } from '@src/constants';
+
 import { TimeoutDurationSetting } from '@popup/constants';
+
 import { ThemeMode } from '@background/redux/settings/types';
 
 export const initialStateForPopupTests: RootState = {
@@ -83,8 +85,11 @@ export const initialStateForPopupTests: RootState = {
   recentRecipientPublicKeys: [],
   accountInfo: {
     balance: {
-      amountMotes: null,
-      amountFiat: null
+      liquidMotes: null,
+      delegatedMotes: null,
+      undelegatingMotes: null,
+      totalBalanceMotes: null,
+      totalBalanceFiat: null
     },
     currencyRate: null,
     accountCasperActivity: [],
diff --git a/src/hooks/index.ts b/src/hooks/index.ts
deleted file mode 100644
index b3112f1d6..000000000
--- a/src/hooks/index.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-export * from './use-window-manager';
-export * from './use-fetch-account-info';
-export * from './use-fetch-active-account-balance';
-export * from './use-casper-token';
-export * from './use-fetch-erc20-tokens';
-export * from './use-copy-to-clipboard';
-export * from './use-map-account-deploys-list-with-pending-transactions';
-export * from './use-fetch-nft-tokens';
-export * from './use-fetch-account-deploys';
-export * from './use-fetch-casper-token-account-activity';
-export * from './use-fetch-erc20-token-account-activity';
-export * from './use-async-effect';
-export * from './use-system-theme-detector';
diff --git a/src/hooks/use-active-account-erc20-tokens/use-active-account-erc20-tokens.ts b/src/hooks/use-active-account-erc20-tokens.ts
similarity index 73%
rename from src/hooks/use-active-account-erc20-tokens/use-active-account-erc20-tokens.ts
rename to src/hooks/use-active-account-erc20-tokens.ts
index 777d61812..5ee7b947f 100644
--- a/src/hooks/use-active-account-erc20-tokens/use-active-account-erc20-tokens.ts
+++ b/src/hooks/use-active-account-erc20-tokens.ts
@@ -1,15 +1,19 @@
 import { useEffect, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
 import { useSelector } from 'react-redux';
 
-import { selectVaultActiveAccount } from '@background/redux/vault/selectors';
-import { useTranslation } from 'react-i18next';
-import { selectApiConfigBasedOnActiveNetwork } from '@background/redux/settings/selectors';
-import { useForceUpdate } from '@src/apps/popup/hooks/use-force-update';
 import { BALANCE_REFRESH_RATE } from '@src/constants';
-import { dispatchFetchErc20TokensRequest } from '@src/libs/services/erc20-service';
-import { getAccountHashFromPublicKey } from '@src/libs/entities/Account';
-import { formatErc20TokenBalance } from '@src/apps/popup/pages/home/components/tokens-list/utils';
-import { TokenType } from '../use-casper-token';
+
+import { useForceUpdate } from '@popup/hooks/use-force-update';
+import { formatErc20TokenBalance } from '@popup/pages/home/components/tokens-list/utils';
+
+import { selectApiConfigBasedOnActiveNetwork } from '@background/redux/settings/selectors';
+import { selectVaultActiveAccount } from '@background/redux/vault/selectors';
+
+import { TokenType } from '@hooks/use-casper-token';
+
+import { getAccountHashFromPublicKey } from '@libs/entities/Account';
+import { dispatchFetchErc20TokensRequest } from '@libs/services/erc20-service';
 
 /**
  * Will get all active account erc20 tokens with automatic refresh
@@ -21,7 +25,9 @@ export const useActiveAccountErc20Tokens = () => {
   const { t } = useTranslation();
 
   const activeAccount = useSelector(selectVaultActiveAccount);
-  const { casperApiUrl } = useSelector(selectApiConfigBasedOnActiveNetwork);
+  const { casperClarityApiUrl } = useSelector(
+    selectApiConfigBasedOnActiveNetwork
+  );
 
   useEffect(() => {
     dispatchFetchErc20TokensRequest(
@@ -45,7 +51,7 @@ export const useActiveAccountErc20Tokens = () => {
       clearTimeout(effectTimeoutRef.current);
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [activeAccount?.publicKey, casperApiUrl, t, forceUpdate]);
+  }, [activeAccount?.publicKey, casperClarityApiUrl, t, forceUpdate]);
 
   return { tokens: tokens };
 };
diff --git a/src/hooks/use-active-account-erc20-tokens/index.ts b/src/hooks/use-active-account-erc20-tokens/index.ts
deleted file mode 100644
index 31d7c089b..000000000
--- a/src/hooks/use-active-account-erc20-tokens/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './use-active-account-erc20-tokens';
diff --git a/src/hooks/use-casper-token/use-casper-token.ts b/src/hooks/use-casper-token.ts
similarity index 52%
rename from src/hooks/use-casper-token/use-casper-token.ts
rename to src/hooks/use-casper-token.ts
index 6ad4d1cde..d5f8ad23e 100644
--- a/src/hooks/use-casper-token/use-casper-token.ts
+++ b/src/hooks/use-casper-token.ts
@@ -1,8 +1,17 @@
 import { useEffect, useState } from 'react';
 import { useSelector } from 'react-redux';
 
-import { formatNumber, motesToCSPR } from '@libs/ui/utils/formatters';
-import { selectAccountBalance } from '@background/redux/account-info/selectors';
+import {
+  selectAccountBalance,
+  selectAccountCurrencyRate
+} from '@background/redux/account-info/selectors';
+
+import {
+  formatCurrency,
+  formatNumber,
+  motesToCSPR,
+  motesToCurrency
+} from '@libs/ui/utils';
 
 export type TokenType = {
   id: string;
@@ -20,13 +29,24 @@ export const useCasperToken = () => {
   const [casperToken, setCasperToken] = useState<TokenType | null>(null);
 
   const balance = useSelector(selectAccountBalance);
+  const currencyRate = useSelector(selectAccountCurrencyRate);
 
   const amount =
-    balance?.amountMotes == null
+    balance?.liquidMotes == null
       ? '-'
-      : formatNumber(motesToCSPR(balance.amountMotes), {
+      : formatNumber(motesToCSPR(balance.liquidMotes), {
           precision: { max: 5 }
         });
+  const amountFiat =
+    currencyRate != null && balance?.liquidMotes != null
+      ? formatCurrency(
+          motesToCurrency(String(balance.liquidMotes), currencyRate),
+          'USD',
+          {
+            precision: 2
+          }
+        )
+      : '';
 
   useEffect(() => {
     setCasperToken({
@@ -34,11 +54,11 @@ export const useCasperToken = () => {
       contractHash: undefined,
       name: 'Casper',
       amount,
-      amountFiat: balance.amountFiat,
+      amountFiat: amountFiat,
       symbol: 'CSPR',
       icon: '/assets/icons/casper.svg'
     });
-  }, [amount, balance]);
+  }, [amount, amountFiat]);
 
   return casperToken;
 };
diff --git a/src/hooks/use-casper-token/index.ts b/src/hooks/use-casper-token/index.ts
deleted file mode 100644
index 784382928..000000000
--- a/src/hooks/use-casper-token/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './use-casper-token';
diff --git a/src/libs/ui/hooks/use-click-away.ts b/src/hooks/use-click-away.ts
similarity index 100%
rename from src/libs/ui/hooks/use-click-away.ts
rename to src/hooks/use-click-away.ts
diff --git a/src/hooks/use-copy-to-clipboard/use-copy-to-clipboard.ts b/src/hooks/use-copy-to-clipboard.ts
similarity index 100%
rename from src/hooks/use-copy-to-clipboard/use-copy-to-clipboard.ts
rename to src/hooks/use-copy-to-clipboard.ts
diff --git a/src/hooks/use-copy-to-clipboard/index.ts b/src/hooks/use-copy-to-clipboard/index.ts
deleted file mode 100644
index a24023ed8..000000000
--- a/src/hooks/use-copy-to-clipboard/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './use-copy-to-clipboard';
diff --git a/src/hooks/use-fetch-account-deploys/use-fetch-account-deploys.ts b/src/hooks/use-fetch-account-deploys.ts
similarity index 97%
rename from src/hooks/use-fetch-account-deploys/use-fetch-account-deploys.ts
rename to src/hooks/use-fetch-account-deploys.ts
index c42b29f90..c27470dc5 100644
--- a/src/hooks/use-fetch-account-deploys/use-fetch-account-deploys.ts
+++ b/src/hooks/use-fetch-account-deploys.ts
@@ -1,21 +1,24 @@
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { useSelector } from 'react-redux';
 
-import { selectVaultActiveAccount } from '@background/redux/vault/selectors';
-import { selectApiConfigBasedOnActiveNetwork } from '@background/redux/settings/selectors';
-import {
-  selectAccountDeploys,
-  selectAccountDeploysCount
-} from '@background/redux/account-info/selectors';
-import { useForceUpdate } from '@popup/hooks/use-force-update';
-import { dispatchFetchAccountExtendedDeploys } from '@libs/services/account-activity-service';
 import { ACCOUNT_CASPER_ACTIVITY_REFRESH_RATE } from '@src/constants';
-import { dispatchToMainStore } from '@background/redux/utils';
+
+import { useForceUpdate } from '@popup/hooks/use-force-update';
+
 import {
   accountDeploysAdded,
   accountDeploysCountChanged,
   accountDeploysUpdated
 } from '@background/redux/account-info/actions';
+import {
+  selectAccountDeploys,
+  selectAccountDeploysCount
+} from '@background/redux/account-info/selectors';
+import { selectApiConfigBasedOnActiveNetwork } from '@background/redux/settings/selectors';
+import { dispatchToMainStore } from '@background/redux/utils';
+import { selectVaultActiveAccount } from '@background/redux/vault/selectors';
+
+import { dispatchFetchAccountExtendedDeploys } from '@libs/services/account-activity-service';
 
 export const useFetchAccountDeploys = () => {
   const [loading, setLoading] = useState(false);
@@ -24,7 +27,9 @@ export const useFetchAccountDeploys = () => {
   const [isFirstPageLoad, setIsFirstPageLoad] = useState(false);
 
   const activeAccount = useSelector(selectVaultActiveAccount);
-  const { casperApiUrl } = useSelector(selectApiConfigBasedOnActiveNetwork);
+  const { casperClarityApiUrl } = useSelector(
+    selectApiConfigBasedOnActiveNetwork
+  );
   const accountDeploysList = useSelector(selectAccountDeploys);
   const accountDeploysCount = useSelector(selectAccountDeploysCount);
 
@@ -114,7 +119,7 @@ export const useFetchAccountDeploys = () => {
     accountDeploysList,
     accountDeploysList?.length,
     activeAccount?.publicKey,
-    casperApiUrl,
+    casperClarityApiUrl,
     forceUpdate,
     isFirstPageLoad
   ]);
diff --git a/src/hooks/use-fetch-account-deploys/index.ts b/src/hooks/use-fetch-account-deploys/index.ts
deleted file mode 100644
index c2d5d9d03..000000000
--- a/src/hooks/use-fetch-account-deploys/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './use-fetch-account-deploys';
diff --git a/src/hooks/use-fetch-account-info/use-fetch-account-info.ts b/src/hooks/use-fetch-account-info.ts
similarity index 86%
rename from src/hooks/use-fetch-account-info/use-fetch-account-info.ts
rename to src/hooks/use-fetch-account-info.ts
index 612d63d86..cabc1a038 100644
--- a/src/hooks/use-fetch-account-info/use-fetch-account-info.ts
+++ b/src/hooks/use-fetch-account-info.ts
@@ -1,22 +1,24 @@
 import { useEffect, useState } from 'react';
 import { useSelector } from 'react-redux';
 
+import { selectApiConfigBasedOnActiveNetwork } from '@background/redux/settings/selectors';
+
+import { getAccountHashFromPublicKey } from '@libs/entities/Account';
 import {
   dispatchFetchAccountInfoRequest,
   getAccountInfo,
   getAccountInfoLogo
 } from '@libs/services/account-info';
-import { getAccountHashFromPublicKey } from '@libs/entities/Account';
-
-import { Account } from '@background/redux/vault/types';
-import { selectApiConfigBasedOnActiveNetwork } from '@background/redux/settings/selectors';
+import { Account } from '@libs/types/account';
 
 export const useFetchAccountInfo = (account: Account | undefined) => {
   const [accountInfoStandardName, setAccountInfoStandardName] = useState<
     string | null
   >(null);
   const [accountLogo, setAccountLogo] = useState<string | null>(null);
-  const { casperApiUrl } = useSelector(selectApiConfigBasedOnActiveNetwork);
+  const { casperClarityApiUrl } = useSelector(
+    selectApiConfigBasedOnActiveNetwork
+  );
 
   useEffect(() => {
     dispatchFetchAccountInfoRequest(
@@ -37,7 +39,7 @@ export const useFetchAccountInfo = (account: Account | undefined) => {
       .catch(error => {
         console.error('Account info request failed:', error);
       });
-  }, [account?.publicKey, casperApiUrl]);
+  }, [account?.publicKey, casperClarityApiUrl]);
 
   return {
     accountLogo,
diff --git a/src/hooks/use-fetch-account-info/index.ts b/src/hooks/use-fetch-account-info/index.ts
deleted file mode 100644
index 158dcd9e7..000000000
--- a/src/hooks/use-fetch-account-info/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './use-fetch-account-info';
diff --git a/src/hooks/use-fetch-active-account-balance/use-fetch-active-account-balance.ts b/src/hooks/use-fetch-active-account-balance.ts
similarity index 52%
rename from src/hooks/use-fetch-active-account-balance/use-fetch-active-account-balance.ts
rename to src/hooks/use-fetch-active-account-balance.ts
index efb41a560..3968d437d 100644
--- a/src/hooks/use-fetch-active-account-balance/use-fetch-active-account-balance.ts
+++ b/src/hooks/use-fetch-active-account-balance.ts
@@ -1,18 +1,22 @@
 import { useEffect, useRef } from 'react';
-import { useSelector } from 'react-redux';
 import { useTranslation } from 'react-i18next';
+import { useSelector } from 'react-redux';
 
-import { dispatchFetchActiveAccountBalance } from '@libs/services/balance-service';
-import { formatCurrency, motesToCurrency } from '@libs/ui/utils/formatters';
-import { selectVaultActiveAccount } from '@background/redux/vault/selectors';
-import { selectApiConfigBasedOnActiveNetwork } from '@background/redux/settings/selectors';
-import { useForceUpdate } from '@src/apps/popup/hooks/use-force-update';
 import { BALANCE_REFRESH_RATE } from '@src/constants';
-import { dispatchToMainStore } from '@background/redux/utils';
+
+import { useForceUpdate } from '@popup/hooks/use-force-update';
+
 import {
   accountBalanceChanged,
   accountCurrencyRateChanged
 } from '@background/redux/account-info/actions';
+import { selectApiConfigBasedOnActiveNetwork } from '@background/redux/settings/selectors';
+import { dispatchToMainStore } from '@background/redux/utils';
+import { selectVaultActiveAccount } from '@background/redux/vault/selectors';
+
+import { getAccountHashFromPublicKey } from '@libs/entities/Account';
+import { dispatchFetchActiveAccountBalance } from '@libs/services/balance-service';
+import { formatCurrency, motesToCurrency } from '@libs/ui/utils';
 
 export const useFetchActiveAccountBalance = () => {
   const effectTimeoutRef = useRef<NodeJS.Timeout>();
@@ -20,35 +24,54 @@ export const useFetchActiveAccountBalance = () => {
   const { t } = useTranslation();
 
   const activeAccount = useSelector(selectVaultActiveAccount);
-  const { casperApiUrl } = useSelector(selectApiConfigBasedOnActiveNetwork);
+  const { casperClarityApiUrl } = useSelector(
+    selectApiConfigBasedOnActiveNetwork
+  );
 
   useEffect(() => {
     if (!activeAccount?.publicKey) return;
 
-    dispatchFetchActiveAccountBalance(activeAccount?.publicKey)
-      .then(({ payload: { balance, currencyRate } }) => {
-        if (balance != null) {
-          const amountMotes = balance;
-          const amountFiat =
+    const accountHash = getAccountHashFromPublicKey(activeAccount.publicKey);
+
+    dispatchFetchActiveAccountBalance(accountHash)
+      .then(({ payload: { accountData, currencyRate } }) => {
+        if (accountData != null) {
+          const liquidBalance = accountData?.balance || 0;
+          const delegatedBalance = accountData?.delegated_balance || 0;
+          const undelegatingBalance = accountData?.undelegating_balance || 0;
+
+          const totalAmountMotes =
+            liquidBalance + delegatedBalance + undelegatingBalance;
+          const totalBalanceFiat =
             currencyRate != null
-              ? formatCurrency(motesToCurrency(balance, currencyRate), 'USD', {
-                  precision: 2
-                })
+              ? formatCurrency(
+                  motesToCurrency(String(totalAmountMotes), currencyRate),
+                  'USD',
+                  {
+                    precision: 2
+                  }
+                )
               : t('Currency service is offline...');
 
           dispatchToMainStore(accountCurrencyRateChanged(currencyRate));
           dispatchToMainStore(
             accountBalanceChanged({
-              amountMotes: amountMotes,
-              amountFiat: amountFiat
+              liquidMotes: String(liquidBalance),
+              delegatedMotes: String(delegatedBalance),
+              undelegatingMotes: String(undelegatingBalance),
+              totalBalanceMotes: String(totalAmountMotes),
+              totalBalanceFiat: totalBalanceFiat
             })
           );
         } else {
           dispatchToMainStore(accountCurrencyRateChanged(currencyRate));
           dispatchToMainStore(
             accountBalanceChanged({
-              amountMotes: null,
-              amountFiat: ''
+              liquidMotes: null,
+              undelegatingMotes: null,
+              delegatedMotes: null,
+              totalBalanceMotes: null,
+              totalBalanceFiat: null
             })
           );
         }
@@ -66,5 +89,5 @@ export const useFetchActiveAccountBalance = () => {
       clearTimeout(effectTimeoutRef.current);
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [activeAccount?.publicKey, casperApiUrl, t, forceUpdate]);
+  }, [activeAccount?.publicKey, casperClarityApiUrl, t, forceUpdate]);
 };
diff --git a/src/hooks/use-fetch-active-account-balance/index.ts b/src/hooks/use-fetch-active-account-balance/index.ts
deleted file mode 100644
index 258efed4b..000000000
--- a/src/hooks/use-fetch-active-account-balance/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './use-fetch-active-account-balance';
diff --git a/src/hooks/use-fetch-casper-token-account-activity/use-fetch-casper-token-account-activity.ts b/src/hooks/use-fetch-casper-token-account-activity.ts
similarity index 97%
rename from src/hooks/use-fetch-casper-token-account-activity/use-fetch-casper-token-account-activity.ts
rename to src/hooks/use-fetch-casper-token-account-activity.ts
index c7c38e3bd..ec79548f7 100644
--- a/src/hooks/use-fetch-casper-token-account-activity/use-fetch-casper-token-account-activity.ts
+++ b/src/hooks/use-fetch-casper-token-account-activity.ts
@@ -1,22 +1,25 @@
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { useSelector } from 'react-redux';
 
-import { selectVaultActiveAccount } from '@background/redux/vault/selectors';
-import { selectApiConfigBasedOnActiveNetwork } from '@background/redux/settings/selectors';
-import {
-  selectAccountCasperActivity,
-  selectAccountCasperActivityCount
-} from '@background/redux/account-info/selectors';
-import { useForceUpdate } from '@popup/hooks/use-force-update';
-import { getAccountHashFromPublicKey } from '@libs/entities/Account';
 import { ACCOUNT_CASPER_ACTIVITY_REFRESH_RATE } from '@src/constants';
-import { dispatchFetchAccountCasperActivity } from '@libs/services/account-activity-service';
+
+import { useForceUpdate } from '@popup/hooks/use-force-update';
+
 import {
   accountCasperActivityChanged,
   accountCasperActivityCountChanged,
   accountCasperActivityUpdated
 } from '@background/redux/account-info/actions';
+import {
+  selectAccountCasperActivity,
+  selectAccountCasperActivityCount
+} from '@background/redux/account-info/selectors';
+import { selectApiConfigBasedOnActiveNetwork } from '@background/redux/settings/selectors';
 import { dispatchToMainStore } from '@background/redux/utils';
+import { selectVaultActiveAccount } from '@background/redux/vault/selectors';
+
+import { getAccountHashFromPublicKey } from '@libs/entities/Account';
+import { dispatchFetchAccountCasperActivity } from '@libs/services/account-activity-service';
 
 export const useFetchCasperTokenAccountActivity = () => {
   const [loading, setLoading] = useState(false);
@@ -25,7 +28,9 @@ export const useFetchCasperTokenAccountActivity = () => {
   const [isFirstPageLoad, setIsFirstPageLoad] = useState(false);
 
   const activeAccount = useSelector(selectVaultActiveAccount);
-  const { casperApiUrl } = useSelector(selectApiConfigBasedOnActiveNetwork);
+  const { casperClarityApiUrl } = useSelector(
+    selectApiConfigBasedOnActiveNetwork
+  );
   const accountCasperActivityList = useSelector(selectAccountCasperActivity);
   const casperTokenActivityCount = useSelector(
     selectAccountCasperActivityCount
@@ -115,7 +120,7 @@ export const useFetchCasperTokenAccountActivity = () => {
       clearTimeout(effectTimeoutRef.current);
     };
   }, [
-    casperApiUrl,
+    casperClarityApiUrl,
     forceUpdate,
     activeAccountHash,
     accountCasperActivityList.length,
diff --git a/src/hooks/use-fetch-casper-token-account-activity/index.ts b/src/hooks/use-fetch-casper-token-account-activity/index.ts
deleted file mode 100644
index 649bec5e7..000000000
--- a/src/hooks/use-fetch-casper-token-account-activity/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './use-fetch-casper-token-account-activity';
diff --git a/src/hooks/use-fetch-erc20-token-account-activity/use-fetch-erc20-token-account-activity.ts b/src/hooks/use-fetch-erc20-token-account-activity.ts
similarity index 97%
rename from src/hooks/use-fetch-erc20-token-account-activity/use-fetch-erc20-token-account-activity.ts
rename to src/hooks/use-fetch-erc20-token-account-activity.ts
index 6741ee010..d9ef20c52 100644
--- a/src/hooks/use-fetch-erc20-token-account-activity/use-fetch-erc20-token-account-activity.ts
+++ b/src/hooks/use-fetch-erc20-token-account-activity.ts
@@ -1,18 +1,21 @@
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { useSelector } from 'react-redux';
 
-import { selectVaultActiveAccount } from '@background/redux/vault/selectors';
-import { selectApiConfigBasedOnActiveNetwork } from '@background/redux/settings/selectors';
-import { selectAccountErc20TokensActivity } from '@background/redux/account-info/selectors';
-import { getAccountHashFromPublicKey } from '@libs/entities/Account';
-import { dispatchFetchErc20TokenActivity } from '@libs/services/account-activity-service/erc20-token-activity-service';
-import { dispatchToMainStore } from '@background/redux/utils';
+import { ACCOUNT_CASPER_ACTIVITY_REFRESH_RATE } from '@src/constants';
+
+import { useForceUpdate } from '@popup/hooks/use-force-update';
+
 import {
   accountErc20TokensActivityChanged,
   accountErc20TokensActivityUpdated
 } from '@background/redux/account-info/actions';
-import { ACCOUNT_CASPER_ACTIVITY_REFRESH_RATE } from '@src/constants';
-import { useForceUpdate } from '@popup/hooks/use-force-update';
+import { selectAccountErc20TokensActivity } from '@background/redux/account-info/selectors';
+import { selectApiConfigBasedOnActiveNetwork } from '@background/redux/settings/selectors';
+import { dispatchToMainStore } from '@background/redux/utils';
+import { selectVaultActiveAccount } from '@background/redux/vault/selectors';
+
+import { getAccountHashFromPublicKey } from '@libs/entities/Account';
+import { dispatchFetchErc20TokenActivity } from '@libs/services/account-activity-service/erc20-token-activity-service';
 
 export const useFetchErc20TokenAccountActivity = (
   contractPackageHash: string
@@ -28,7 +31,9 @@ export const useFetchErc20TokenAccountActivity = (
   const tokenActivity = erc20TokensActivityRecord[contractPackageHash || ''];
 
   const activeAccount = useSelector(selectVaultActiveAccount);
-  const { casperApiUrl } = useSelector(selectApiConfigBasedOnActiveNetwork);
+  const { casperClarityApiUrl } = useSelector(
+    selectApiConfigBasedOnActiveNetwork
+  );
 
   const effectTimeoutRef = useRef<NodeJS.Timeout>();
   const forceUpdate = useForceUpdate();
@@ -122,7 +127,7 @@ export const useFetchErc20TokenAccountActivity = (
     contractPackageHash,
     tokenActivity?.tokenActivityCount,
     tokenActivity?.tokenActivityList.length,
-    casperApiUrl,
+    casperClarityApiUrl,
     forceUpdate,
     tokenActivity?.tokenActivityList,
     isFirstPageLoad
diff --git a/src/hooks/use-fetch-erc20-token-account-activity/index.ts b/src/hooks/use-fetch-erc20-token-account-activity/index.ts
deleted file mode 100644
index 89d96ab48..000000000
--- a/src/hooks/use-fetch-erc20-token-account-activity/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './use-fetch-erc20-token-account-activity';
diff --git a/src/hooks/use-fetch-erc20-tokens/use-fetch-erc20-tokens.ts b/src/hooks/use-fetch-erc20-tokens.ts
similarity index 68%
rename from src/hooks/use-fetch-erc20-tokens/use-fetch-erc20-tokens.ts
rename to src/hooks/use-fetch-erc20-tokens.ts
index a836ed18e..897322364 100644
--- a/src/hooks/use-fetch-erc20-tokens/use-fetch-erc20-tokens.ts
+++ b/src/hooks/use-fetch-erc20-tokens.ts
@@ -1,20 +1,23 @@
 import { useEffect, useState } from 'react';
 import { useSelector } from 'react-redux';
 
+import { accountErc20Changed } from '@background/redux/account-info/actions';
+import { selectErc20Tokens } from '@background/redux/account-info/selectors';
+import { selectApiConfigBasedOnActiveNetwork } from '@background/redux/settings/selectors';
+import { dispatchToMainStore } from '@background/redux/utils';
+import { selectVaultActiveAccount } from '@background/redux/vault/selectors';
+
+import { getAccountHashFromPublicKey } from '@libs/entities/Account';
 import {
-  dispatchFetchErc20TokensRequest,
-  ContractPackageWithBalance
+  ContractPackageWithBalance,
+  dispatchFetchErc20TokensRequest
 } from '@libs/services/erc20-service';
-import { getAccountHashFromPublicKey } from '@libs/entities/Account';
-import { selectVaultActiveAccount } from '@background/redux/vault/selectors';
-import { selectApiConfigBasedOnActiveNetwork } from '@background/redux/settings/selectors';
-import { selectErc20Tokens } from '@src/background/redux/account-info/selectors';
-import { accountErc20Changed } from '@src/background/redux/account-info/actions';
-import { dispatchToMainStore } from '@src/background/redux/utils';
 
 export const useFetchErc20Tokens = () => {
   const activeAccount = useSelector(selectVaultActiveAccount);
-  const { casperApiUrl } = useSelector(selectApiConfigBasedOnActiveNetwork);
+  const { casperClarityApiUrl } = useSelector(
+    selectApiConfigBasedOnActiveNetwork
+  );
   const tokens = useSelector(selectErc20Tokens);
 
   const [erc20Tokens, setErc20Tokens] = useState<
@@ -30,7 +33,7 @@ export const useFetchErc20Tokens = () => {
       dispatchToMainStore(accountErc20Changed(tokens));
       setErc20Tokens(tokens);
     });
-  }, [activeAccount?.publicKey, casperApiUrl]);
+  }, [activeAccount?.publicKey, casperClarityApiUrl]);
 
   return erc20Tokens;
 };
diff --git a/src/hooks/use-fetch-erc20-tokens/index.ts b/src/hooks/use-fetch-erc20-tokens/index.ts
deleted file mode 100644
index 34637cf70..000000000
--- a/src/hooks/use-fetch-erc20-tokens/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './use-fetch-erc20-tokens';
diff --git a/src/hooks/use-fetch-nft-tokens/use-fetch-nft-tokens.ts b/src/hooks/use-fetch-nft-tokens.ts
similarity index 97%
rename from src/hooks/use-fetch-nft-tokens/use-fetch-nft-tokens.ts
rename to src/hooks/use-fetch-nft-tokens.ts
index 010c42e80..847ae172c 100644
--- a/src/hooks/use-fetch-nft-tokens/use-fetch-nft-tokens.ts
+++ b/src/hooks/use-fetch-nft-tokens.ts
@@ -1,10 +1,10 @@
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { useSelector } from 'react-redux';
 
-import { dispatchFetchNftTokensRequest } from '@libs/services/nft-service';
-import { selectVaultActiveAccount } from '@background/redux/vault/selectors';
-import { getAccountHashFromPublicKey } from '@libs/entities/Account';
-import { dispatchToMainStore } from '@background/redux/utils';
+import { ACCOUNT_CASPER_ACTIVITY_REFRESH_RATE } from '@src/constants';
+
+import { useForceUpdate } from '@popup/hooks/use-force-update';
+
 import {
   accountNftTokensAdded,
   accountNftTokensCountChanged,
@@ -14,9 +14,12 @@ import {
   selectAccountNftTokens,
   selectAccountNftTokensCount
 } from '@background/redux/account-info/selectors';
-import { ACCOUNT_CASPER_ACTIVITY_REFRESH_RATE } from '@src/constants';
-import { useForceUpdate } from '@popup/hooks/use-force-update';
 import { selectApiConfigBasedOnActiveNetwork } from '@background/redux/settings/selectors';
+import { dispatchToMainStore } from '@background/redux/utils';
+import { selectVaultActiveAccount } from '@background/redux/vault/selectors';
+
+import { getAccountHashFromPublicKey } from '@libs/entities/Account';
+import { dispatchFetchNftTokensRequest } from '@libs/services/nft-service';
 
 export const useFetchNftTokens = () => {
   const [loading, setLoading] = useState(false);
@@ -26,7 +29,9 @@ export const useFetchNftTokens = () => {
 
   const activeAccount = useSelector(selectVaultActiveAccount);
   const nftTokens = useSelector(selectAccountNftTokens);
-  const { casperApiUrl } = useSelector(selectApiConfigBasedOnActiveNetwork);
+  const { casperClarityApiUrl } = useSelector(
+    selectApiConfigBasedOnActiveNetwork
+  );
   const nftTokensCount = useSelector(selectAccountNftTokensCount);
 
   const effectTimeoutRef = useRef<NodeJS.Timeout>();
@@ -92,7 +97,7 @@ export const useFetchNftTokens = () => {
     };
   }, [
     activeAccount?.publicKey,
-    casperApiUrl,
+    casperClarityApiUrl,
     forceUpdate,
     isFirstPageLoad,
     nftTokens,
diff --git a/src/hooks/use-fetch-nft-tokens/index.ts b/src/hooks/use-fetch-nft-tokens/index.ts
deleted file mode 100644
index 33d5d2426..000000000
--- a/src/hooks/use-fetch-nft-tokens/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './use-fetch-nft-tokens';
diff --git a/src/libs/layout/unlock-protected-page-content/use-lock-wallet-when-no-more-retries.ts b/src/hooks/use-lock-wallet-when-no-more-retries.ts
similarity index 95%
rename from src/libs/layout/unlock-protected-page-content/use-lock-wallet-when-no-more-retries.ts
rename to src/hooks/use-lock-wallet-when-no-more-retries.ts
index 1eb373913..9249ce0c5 100644
--- a/src/libs/layout/unlock-protected-page-content/use-lock-wallet-when-no-more-retries.ts
+++ b/src/hooks/use-lock-wallet-when-no-more-retries.ts
@@ -1,14 +1,15 @@
 import { useEffect } from 'react';
+import { UseFormResetField } from 'react-hook-form';
 import { useSelector } from 'react-redux';
-import { UseFormResetField } from 'react-hook-form/dist/types/form';
+
+import { LOGIN_RETRY_ATTEMPTS_LIMIT } from '@src/constants';
 
 import { selectLoginRetryCount } from '@background/redux/login-retry-count/selectors';
-import { dispatchToMainStore } from '@background/redux/utils';
-import { selectHasLoginRetryLockoutTime } from '@background/redux/login-retry-lockout-time/selectors';
 import { loginRetryLockoutTimeSet } from '@background/redux/login-retry-lockout-time/actions';
+import { selectHasLoginRetryLockoutTime } from '@background/redux/login-retry-lockout-time/selectors';
 import { lockVault } from '@background/redux/sagas/actions';
 import { selectVaultIsLocked } from '@background/redux/session/selectors';
-import { LOGIN_RETRY_ATTEMPTS_LIMIT } from '@src/constants';
+import { dispatchToMainStore } from '@background/redux/utils';
 
 export const useLockWalletWhenNoMoreRetries = (
   resetField?: UseFormResetField<{ password: string }>
diff --git a/src/hooks/use-map-account-deploys-list-with-pending-transactions/use-map-account-deploys-list-with-pending-transactions.ts b/src/hooks/use-map-account-deploys-list-with-pending-transactions.ts
similarity index 96%
rename from src/hooks/use-map-account-deploys-list-with-pending-transactions/use-map-account-deploys-list-with-pending-transactions.ts
rename to src/hooks/use-map-account-deploys-list-with-pending-transactions.ts
index 4bb3a02c1..5fbba6d21 100644
--- a/src/hooks/use-map-account-deploys-list-with-pending-transactions/use-map-account-deploys-list-with-pending-transactions.ts
+++ b/src/hooks/use-map-account-deploys-list-with-pending-transactions.ts
@@ -1,12 +1,13 @@
 import { useMemo } from 'react';
 import { useSelector } from 'react-redux';
 
-import { selectVaultActiveAccount } from '@background/redux/vault/selectors';
-import { getMappedPendingTransactions } from '@libs/ui/utils/utils';
+import { accountPendingTransactionsRemove } from '@background/redux/account-info/actions';
 import { selectPendingTransactions } from '@background/redux/account-info/selectors';
 import { dispatchToMainStore } from '@background/redux/utils';
-import { accountPendingTransactionsRemove } from '@background/redux/account-info/actions';
+import { selectVaultActiveAccount } from '@background/redux/vault/selectors';
+
 import { ExtendedDeployWithId } from '@libs/services/account-activity-service';
+import { getMappedPendingTransactions } from '@libs/ui/utils';
 
 export const useMapAccountDeploysListWithPendingTransactions = (
   accountDeploys: ExtendedDeployWithId[] | null
diff --git a/src/hooks/use-map-account-deploys-list-with-pending-transactions/index.ts b/src/hooks/use-map-account-deploys-list-with-pending-transactions/index.ts
deleted file mode 100644
index 7fb2f0eaa..000000000
--- a/src/hooks/use-map-account-deploys-list-with-pending-transactions/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './use-map-account-deploys-list-with-pending-transactions';
diff --git a/src/hooks/use-subscribe-to-redux.ts b/src/hooks/use-subscribe-to-redux.ts
index 3ae692ab3..e0466bbb4 100644
--- a/src/hooks/use-subscribe-to-redux.ts
+++ b/src/hooks/use-subscribe-to-redux.ts
@@ -1,12 +1,13 @@
-import { useCallback, useEffect } from 'react';
+import React, { useCallback, useEffect } from 'react';
 import { getType, isActionOf } from 'typesafe-actions';
-import browser from 'webextension-polyfill';
+import { runtime } from 'webextension-polyfill';
+
 import {
-  backgroundEvent,
-  BackgroundEvent
+  BackgroundEvent,
+  backgroundEvent
 } from '@background/background-events';
-import { PopupState } from '@src/background/redux/utils';
-import { rootAction } from '@src/background/redux';
+import { rootAction } from '@background/redux';
+import { PopupState } from '@background/redux/types';
 
 type Props = {
   windowInitAction: (typeof rootAction)['windowManagement'][keyof (typeof rootAction)['windowManagement']];
@@ -27,16 +28,16 @@ export const useSubscribeToRedux = ({
   );
 
   useEffect(() => {
-    if (!browser.runtime.onMessage.hasListener(handleStateUpdate)) {
-      browser.runtime.onMessage.addListener(handleStateUpdate);
+    if (!runtime.onMessage.hasListener(handleStateUpdate)) {
+      runtime.onMessage.addListener(handleStateUpdate);
     }
 
-    browser.runtime.sendMessage((windowInitAction as any)()).catch(() => {
+    runtime.sendMessage((windowInitAction as any)()).catch(() => {
       console.error('window init: ' + getType(windowInitAction));
     });
 
     return () => {
-      browser.runtime.onMessage.removeListener(handleStateUpdate);
+      runtime.onMessage.removeListener(handleStateUpdate);
     };
   }, [handleStateUpdate, windowInitAction]);
 };
diff --git a/src/hooks/use-system-theme-detector/use-system-theme-detector.ts b/src/hooks/use-system-theme-detector.ts
similarity index 100%
rename from src/hooks/use-system-theme-detector/use-system-theme-detector.ts
rename to src/hooks/use-system-theme-detector.ts
diff --git a/src/hooks/use-system-theme-detector/index.ts b/src/hooks/use-system-theme-detector/index.ts
deleted file mode 100644
index cf96c56d7..000000000
--- a/src/hooks/use-system-theme-detector/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './use-system-theme-detector';
diff --git a/src/hooks/use-user-activity-tracker.ts b/src/hooks/use-user-activity-tracker.ts
index 0bae2d3da..e8ee21022 100644
--- a/src/hooks/use-user-activity-tracker.ts
+++ b/src/hooks/use-user-activity-tracker.ts
@@ -1,11 +1,11 @@
 import throttle from 'lodash.throttle';
 import { useEffect } from 'react';
-
 import { useSelector } from 'react-redux';
-import { dispatchToMainStore } from '../background/redux/utils';
-import { selectVaultIsLocked } from '@src/background/redux/session/selectors';
-import { selectKeysDoesExist } from '@src/background/redux/keys/selectors';
-import { lastActivityTimeRefreshed } from '@src/background/redux/last-activity-time/actions';
+
+import { selectKeysDoesExist } from '@background/redux/keys/selectors';
+import { lastActivityTimeRefreshed } from '@background/redux/last-activity-time/actions';
+import { selectVaultIsLocked } from '@background/redux/session/selectors';
+import { dispatchToMainStore } from '@background/redux/utils';
 
 const throttleDelay = 5000;
 const throttledDispatchToMainStore = throttle(
diff --git a/src/hooks/use-window-manager/use-window-manager.ts b/src/hooks/use-window-manager.ts
similarity index 65%
rename from src/hooks/use-window-manager/use-window-manager.ts
rename to src/hooks/use-window-manager.ts
index 0b21a376b..9234433de 100644
--- a/src/hooks/use-window-manager/use-window-manager.ts
+++ b/src/hooks/use-window-manager.ts
@@ -1,13 +1,13 @@
 import { useMemo } from 'react';
 import { useSelector } from 'react-redux';
 
-import { dispatchToMainStore } from '@src/background/redux/utils';
+import { createOpenWindow } from '@background/create-open-window';
+import { dispatchToMainStore } from '@background/redux/utils';
 import {
   windowIdChanged,
   windowIdCleared
-} from '@src/background/redux/windowManagement/actions';
-import { selectWindowId } from '@src/background/redux/windowManagement/selectors';
-import { createOpenWindow } from '@src/hooks';
+} from '@background/redux/windowManagement/actions';
+import { selectWindowId } from '@background/redux/windowManagement/selectors';
 
 export function useWindowManager() {
   const windowId = useSelector(selectWindowId);
diff --git a/src/hooks/use-window-manager/index.ts b/src/hooks/use-window-manager/index.ts
deleted file mode 100644
index 69b9d4d30..000000000
--- a/src/hooks/use-window-manager/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from './use-window-manager';
-export * from '../../background/create-open-window';
diff --git a/src/libs/crypto/aes.test.ts b/src/libs/crypto/aes.test.ts
index 4fe5359e3..8bc0b486b 100644
--- a/src/libs/crypto/aes.test.ts
+++ b/src/libs/crypto/aes.test.ts
@@ -1,7 +1,7 @@
 import {
   FIXED_ENCRYPTION_CIPHER_TEXT,
-  FIXED_ENCRYPTION_PLAIN_TEXT,
-  FIXED_ENCRYPTION_KEY_HASH
+  FIXED_ENCRYPTION_KEY_HASH,
+  FIXED_ENCRYPTION_PLAIN_TEXT
 } from './__fixtures';
 import { aesDecryptString, aesEncryptString } from './aes';
 
diff --git a/src/libs/crypto/aes.ts b/src/libs/crypto/aes.ts
index 5ad314eab..0e61db7b2 100644
--- a/src/libs/crypto/aes.ts
+++ b/src/libs/crypto/aes.ts
@@ -1,4 +1,5 @@
 import * as aes from 'micro-aes-gcm/index';
+
 import {
   convertBase64ToBytes,
   convertBytesToBase64,
diff --git a/src/libs/crypto/bip32.test.ts b/src/libs/crypto/bip32.test.ts
index c5e0cc10f..baf3330e9 100644
--- a/src/libs/crypto/bip32.test.ts
+++ b/src/libs/crypto/bip32.test.ts
@@ -1,5 +1,5 @@
-import { deriveKeyPair } from './bip32';
 import { FIXED_PUBLIC_KEY_0, FIXED_SECRET_PHRASE } from './__fixtures';
+import { deriveKeyPair } from './bip32';
 
 describe('bip32', () => {
   it('should derive the same key as ledger from the same mnomonic phrase', () => {
diff --git a/src/libs/crypto/bip32.ts b/src/libs/crypto/bip32.ts
index 1a8daf299..650498cd3 100644
--- a/src/libs/crypto/bip32.ts
+++ b/src/libs/crypto/bip32.ts
@@ -1,5 +1,7 @@
 import { HDKey } from '@scure/bip32';
-import { KeyPair } from '@src/background/redux/vault/types';
+
+import { KeyPair } from '@libs/types/account';
+
 import { secretPhraseToSeed, validateSecretPhrase } from './bip39';
 import { getBip44Path } from './bip44';
 import { privateKeyBytesToBase64, publicKeyBytesToHex } from './utils';
diff --git a/src/libs/crypto/bip39.test.ts b/src/libs/crypto/bip39.test.ts
index 615bf40f3..7c96bdc3d 100644
--- a/src/libs/crypto/bip39.test.ts
+++ b/src/libs/crypto/bip39.test.ts
@@ -1,6 +1,6 @@
 import {
-  encodeSeed,
   decodeSeed,
+  encodeSeed,
   generateSecretPhrase,
   validateSecretPhrase
 } from './bip39';
diff --git a/src/libs/crypto/bip44.test.ts b/src/libs/crypto/bip44.test.ts
index fff96500f..cf061b698 100644
--- a/src/libs/crypto/bip44.test.ts
+++ b/src/libs/crypto/bip44.test.ts
@@ -1,5 +1,5 @@
-import { getBip44Path } from './bip44';
 import { Bip44Path } from './__fixtures';
+import { getBip44Path } from './bip44';
 
 describe('bip44', () => {
   it('should generate valid bip44 derivation path for casper coin', () => {
diff --git a/src/libs/crypto/create-asymmetric-key.ts b/src/libs/crypto/create-asymmetric-key.ts
index cc9f45bad..59d5e6dbe 100644
--- a/src/libs/crypto/create-asymmetric-key.ts
+++ b/src/libs/crypto/create-asymmetric-key.ts
@@ -1,4 +1,4 @@
-import { CLPublicKey, CLPublicKeyTag, decodeBase64, Keys } from 'casper-js-sdk';
+import { CLPublicKey, CLPublicKeyTag, Keys, decodeBase64 } from 'casper-js-sdk';
 
 export function createAsymmetricKey(
   publicKey: string,
diff --git a/src/libs/crypto/hashing.test.ts b/src/libs/crypto/hashing.test.ts
index 2d38730b4..39c9e51d4 100644
--- a/src/libs/crypto/hashing.test.ts
+++ b/src/libs/crypto/hashing.test.ts
@@ -1,15 +1,15 @@
+import {
+  FIXED_ENCRYPTION_KEY_HASH,
+  FIXED_ENCRYPTION_SALT,
+  FIXED_PASSWORD_HASH,
+  FIXED_PASSWORD_SALT,
+  FIXED_PASSWORD_TEXT
+} from './__fixtures';
 import {
   deriveEncryptionKey,
   encodePassword,
   verifyPasswordAgainstHash
 } from './hashing';
-import {
-  FIXED_ENCRYPTION_KEY_HASH,
-  FIXED_PASSWORD_HASH,
-  FIXED_PASSWORD_TEXT,
-  FIXED_ENCRYPTION_SALT,
-  FIXED_PASSWORD_SALT
-} from './__fixtures';
 
 describe('crypto.hashing', () => {
   it('should verify fixtures of hashed password matches the text password ', async () => {
diff --git a/src/libs/crypto/hashing.ts b/src/libs/crypto/hashing.ts
index 625053790..08f3a8548 100644
--- a/src/libs/crypto/hashing.ts
+++ b/src/libs/crypto/hashing.ts
@@ -1,5 +1,5 @@
-import { randomBytes } from '@noble/hashes/utils';
 import { scryptAsync } from '@noble/hashes/scrypt';
+import { randomBytes } from '@noble/hashes/utils';
 
 import { convertBytesToHex, convertHexToBytes } from './utils';
 
@@ -26,7 +26,7 @@ export async function encodePassword(
     createScryptOptions()
   )
     .then(convertBytesToHex)
-    .catch(err => {
+    .catch(() => {
       throw Error('encodePassword failed!');
     });
 }
diff --git a/src/libs/crypto/parse-secret-key-string.test.ts b/src/libs/crypto/parse-secret-key-string.test.ts
index c00804b85..13be68bbd 100644
--- a/src/libs/crypto/parse-secret-key-string.test.ts
+++ b/src/libs/crypto/parse-secret-key-string.test.ts
@@ -1,5 +1,6 @@
-import { decodeBase64, Keys } from 'casper-js-sdk';
+import { Keys, decodeBase64 } from 'casper-js-sdk';
 import fs from 'fs';
+
 import { parseSecretKeyString } from './parse-secret-key-string';
 
 /** manual testing should confirm that imported keys have the same public key and private key than legacy signer */
diff --git a/src/libs/crypto/parse-secret-key-string.ts b/src/libs/crypto/parse-secret-key-string.ts
index e7ad993f5..7f90a4235 100644
--- a/src/libs/crypto/parse-secret-key-string.ts
+++ b/src/libs/crypto/parse-secret-key-string.ts
@@ -1,9 +1,9 @@
-import { decodeBase16, Keys } from 'casper-js-sdk';
-
 import ASN1 from '@lapo/asn1js';
 import Base64 from '@lapo/asn1js/base64';
+import { Keys, decodeBase16 } from 'casper-js-sdk';
 // These libraries are required for backward compatibility with Legacy Signer
 import { t } from 'i18next';
+
 import { privateKeyBytesToBase64 } from './utils';
 
 export function parseSecretKeyString(fileContents: string): {
diff --git a/src/libs/crypto/sign-deploy.test.ts b/src/libs/crypto/sign-deploy.test.ts
index d01e7bb08..a33eeedfd 100644
--- a/src/libs/crypto/sign-deploy.test.ts
+++ b/src/libs/crypto/sign-deploy.test.ts
@@ -1,4 +1,5 @@
 import { DeployUtil, Keys } from 'casper-js-sdk';
+
 import { signDeploy } from './sign-deploy';
 
 const getSignature = (
diff --git a/src/libs/crypto/sign-deploy.tsx b/src/libs/crypto/sign-deploy.tsx
index 5414f01e6..39a64939e 100644
--- a/src/libs/crypto/sign-deploy.tsx
+++ b/src/libs/crypto/sign-deploy.tsx
@@ -1,4 +1,4 @@
-import { CLPublicKey, CLPublicKeyTag, decodeBase64, Keys } from 'casper-js-sdk';
+import { CLPublicKey, CLPublicKeyTag, Keys, decodeBase64 } from 'casper-js-sdk';
 
 export const signDeploy = (
   deployHash: Uint8Array,
diff --git a/src/libs/crypto/sign-message.test.ts b/src/libs/crypto/sign-message.test.ts
index 7f2b5e1ba..7b1d455e5 100644
--- a/src/libs/crypto/sign-message.test.ts
+++ b/src/libs/crypto/sign-message.test.ts
@@ -1,4 +1,5 @@
 import { Keys } from 'casper-js-sdk';
+
 import { createMessageBytesWithHeaders, signMessage } from './sign-message';
 
 const getMessageSignature = (
diff --git a/src/libs/crypto/sign-message.tsx b/src/libs/crypto/sign-message.tsx
index 26a24a313..ce0c67c2f 100644
--- a/src/libs/crypto/sign-message.tsx
+++ b/src/libs/crypto/sign-message.tsx
@@ -1,4 +1,4 @@
-import { CLPublicKey, CLPublicKeyTag, decodeBase64, Keys } from 'casper-js-sdk';
+import { CLPublicKey, CLPublicKeyTag, Keys, decodeBase64 } from 'casper-js-sdk';
 
 export const CASPER_MESSAGE_HEADER = `Casper Message:\n`;
 
diff --git a/src/libs/crypto/sync-wallet-qr.ts b/src/libs/crypto/sync-wallet-qr.ts
index 7a3e3c775..5c5179b71 100644
--- a/src/libs/crypto/sync-wallet-qr.ts
+++ b/src/libs/crypto/sync-wallet-qr.ts
@@ -1,12 +1,12 @@
-import { randomBytes } from '@noble/hashes/utils';
 import { aes_256_cbc } from '@noble/ciphers/webcrypto/aes';
 import { scryptAsync } from '@noble/hashes/scrypt';
+import { randomBytes } from '@noble/hashes/utils';
 import { CLPublicKey } from 'casper-js-sdk';
 
-import { Account } from '@background/redux/vault/types';
+import { Account } from '@libs/types/account';
 
-import { convertBytesToBase64 } from './utils';
 import { createScryptOptions } from './hashing';
+import { convertBytesToBase64 } from './utils';
 
 export const generateSyncWalletQrData = async (
   password: string,
diff --git a/src/libs/crypto/vault.ts b/src/libs/crypto/vault.ts
index 814512d52..24537ec5e 100644
--- a/src/libs/crypto/vault.ts
+++ b/src/libs/crypto/vault.ts
@@ -1,4 +1,5 @@
-import { VaultState } from '@src/background/redux/vault/types';
+import { VaultState } from '@background/redux/vault/types';
+
 import { aesDecryptString, aesEncryptString } from './aes';
 
 export async function encryptVault(
diff --git a/src/libs/i18n/i18n.ts b/src/libs/i18n/i18n.ts
index 5737f4abe..c160e478a 100644
--- a/src/libs/i18n/i18n.ts
+++ b/src/libs/i18n/i18n.ts
@@ -1,12 +1,14 @@
 import i18n from 'i18next';
-import { initReactI18next } from 'react-i18next';
 import LanguageDetector from 'i18next-browser-languagedetector';
 import Backend from 'i18next-http-backend';
+import { initReactI18next } from 'react-i18next';
+
 import detector from './language-detector';
 
 const languageDetector = new LanguageDetector();
 languageDetector.addDetector(detector);
 
+// eslint-disable-next-line import/no-named-as-default-member
 i18n
   // loads translations from your server
   .use(Backend)
diff --git a/src/libs/layout/containers.ts b/src/libs/layout/containers.ts
index 317d0c990..f253395cd 100644
--- a/src/libs/layout/containers.ts
+++ b/src/libs/layout/containers.ts
@@ -1,6 +1,6 @@
 import styled, { css } from 'styled-components';
-import { getLinearGradientColor } from '@libs/ui/utils/get-linear-gradient-color';
-import { hexToRGBA } from '@libs/ui/utils/hex-to-rgba';
+
+import { getLinearGradientColor, hexToRGBA } from '@libs/ui/utils';
 
 // Be careful when importing dependencies here
 // Import of getColorFromTheme or getLinearGradientColor from '@libs/ui'
@@ -325,3 +325,12 @@ export const ActivityPlateDivider = styled.div`
   border-radius: ${({ theme }) => theme.borderRadius.hundred}px;
   background-color: ${({ theme }) => theme.color.contentSecondary};
 `;
+
+export const DropdownHeader = styled(AlignedSpaceBetweenFlexRow)`
+  padding: 8px 16px;
+
+  border-top-left-radius: ${({ theme }) => theme.borderRadius.base}px;
+  border-top-right-radius: ${({ theme }) => theme.borderRadius.base}px;
+
+  background-color: ${({ theme }) => theme.color.backgroundPrimary};
+`;
diff --git a/src/libs/layout/error/content.tsx b/src/libs/layout/error/content.tsx
index 63a230728..d6045848c 100644
--- a/src/libs/layout/error/content.tsx
+++ b/src/libs/layout/error/content.tsx
@@ -1,14 +1,14 @@
 import React from 'react';
 
 import {
-  PageContainer,
   ContentContainer,
   IllustrationContainer,
   OnboardingIllustrationContainer,
+  PageContainer,
   ParagraphContainer,
   SpacingSize
-} from '@src/libs/layout';
-import { SvgIcon, Typography } from '@src/libs/ui';
+} from '@libs/layout';
+import { SvgIcon, Typography } from '@libs/ui/components';
 
 import { ErrorContent } from './types';
 
diff --git a/src/libs/layout/error/error-boundary.tsx b/src/libs/layout/error/error-boundary.tsx
index 378b1356d..969e354e3 100644
--- a/src/libs/layout/error/error-boundary.tsx
+++ b/src/libs/layout/error/error-boundary.tsx
@@ -1,8 +1,6 @@
 import React, { Component, ReactNode } from 'react';
-import {
-  createErrorLocationState,
-  WindowErrorPage
-} from '@src/libs/layout/error';
+
+import { WindowErrorPage, createErrorLocationState } from '@libs/layout';
 
 interface Props {
   children: ReactNode;
diff --git a/src/libs/layout/error/index.ts b/src/libs/layout/error/index.ts
index 2c43ba4af..99f8c5f6b 100644
--- a/src/libs/layout/error/index.ts
+++ b/src/libs/layout/error/index.ts
@@ -1,4 +1,4 @@
-import { ErrorLocationState } from '@layout/error/types';
+import { ErrorLocationState } from './types';
 
 export const ErrorPath = '/error';
 
diff --git a/src/libs/layout/error/tab-page.tsx b/src/libs/layout/error/tab-page.tsx
index 932b702d2..69e6bab90 100644
--- a/src/libs/layout/error/tab-page.tsx
+++ b/src/libs/layout/error/tab-page.tsx
@@ -1,8 +1,8 @@
 import React from 'react';
 import { NavigateFunction } from 'react-router';
 
-import { LayoutTab, FooterButtonsContainer } from '@libs/layout';
-import { Button } from '@libs/ui';
+import { FooterButtonsContainer, LayoutTab } from '@libs/layout';
+import { Button } from '@libs/ui/components';
 
 import { ErrorPageContent } from './content';
 
diff --git a/src/libs/layout/error/window-page.tsx b/src/libs/layout/error/window-page.tsx
index 3cd08963b..1aaab4223 100644
--- a/src/libs/layout/error/window-page.tsx
+++ b/src/libs/layout/error/window-page.tsx
@@ -1,14 +1,14 @@
 import React from 'react';
 import { NavigateFunction } from 'react-router';
 
+import { closeCurrentWindow } from '@background/close-current-window';
+
 import {
-  LayoutWindow,
-  PopupHeader,
-  FooterButtonsContainer
+  FooterButtonsContainer,
+  HeaderPopup,
+  LayoutWindow
 } from '@libs/layout';
-import { Button } from '@libs/ui';
-
-import { closeCurrentWindow } from '@src/background/close-current-window';
+import { Button } from '@libs/ui/components';
 
 import { ErrorPageContent } from './content';
 import { ErrorLocationState } from './types';
@@ -38,7 +38,7 @@ export function WindowErrorPage({
 
   return (
     <LayoutWindow
-      renderHeader={() => <PopupHeader />}
+      renderHeader={() => <HeaderPopup />}
       renderContent={() => (
         <ErrorPageContent
           errorHeaderText={state.errorHeaderText}
diff --git a/src/libs/layout/header/header-actions.tsx b/src/libs/layout/header/header-actions.tsx
index 185698065..0e6216b7e 100644
--- a/src/libs/layout/header/header-actions.tsx
+++ b/src/libs/layout/header/header-actions.tsx
@@ -3,8 +3,8 @@ import styled from 'styled-components';
 
 import { useNavigationMenu, useTypedLocation } from '@popup/router';
 
-import { SvgIcon } from '@libs/ui';
-import { HeaderNetworkSwitcher } from '@layout/header/header-network-switcher';
+import { HeaderNetworkSwitcher } from '@libs/layout';
+import { SvgIcon } from '@libs/ui/components';
 
 const Container = styled.div`
   display: flex;
@@ -12,7 +12,7 @@ const Container = styled.div`
   gap: 18px;
 `;
 
-interface MainmenuBarProps {
+interface MainMenuBarProps {
   withNetworkSwitcher?: boolean;
   withMenu?: boolean;
 }
@@ -20,7 +20,7 @@ interface MainmenuBarProps {
 export function HeaderActions({
   withNetworkSwitcher,
   withMenu
-}: MainmenuBarProps) {
+}: MainMenuBarProps) {
   const location = useTypedLocation();
   const { toggleNavigationMenu } = useNavigationMenu();
 
diff --git a/src/libs/layout/header/header-connection-status.tsx b/src/libs/layout/header/header-connection-status.tsx
index 9c9133f7a..cf76708f1 100644
--- a/src/libs/layout/header/header-connection-status.tsx
+++ b/src/libs/layout/header/header-connection-status.tsx
@@ -1,10 +1,17 @@
 import React from 'react';
-import styled from 'styled-components';
 import { useSelector } from 'react-redux';
+import styled from 'styled-components';
+
+import { selectVaultActiveAccount } from '@background/redux/vault/selectors';
 
-import { AccountList, Hash, HashVariant, Modal, SvgIcon } from '@libs/ui';
 import { AlignedFlexRow, SpacingSize } from '@libs/layout';
-import { selectVaultActiveAccount } from '@src/background/redux/vault/selectors';
+import {
+  AccountList,
+  Hash,
+  HashVariant,
+  Modal,
+  SvgIcon
+} from '@libs/ui/components';
 
 const ConnectionStatusContainer = styled(AlignedFlexRow)`
   width: fit-content;
diff --git a/src/libs/layout/header/header-data-updater.tsx b/src/libs/layout/header/header-data-updater.tsx
index 3f0bb212e..4cf993233 100644
--- a/src/libs/layout/header/header-data-updater.tsx
+++ b/src/libs/layout/header/header-data-updater.tsx
@@ -1,5 +1,7 @@
 import React from 'react';
-import { useFetchActiveAccountBalance, useFetchErc20Tokens } from '@src/hooks';
+
+import { useFetchActiveAccountBalance } from '@hooks/use-fetch-active-account-balance';
+import { useFetchErc20Tokens } from '@hooks/use-fetch-erc20-tokens';
 
 export const HeaderDataUpdater: React.FC = () => {
   useFetchActiveAccountBalance();
diff --git a/src/libs/layout/header/header-network-switcher.tsx b/src/libs/layout/header/header-network-switcher.tsx
index 04a86e75e..85b47868f 100644
--- a/src/libs/layout/header/header-network-switcher.tsx
+++ b/src/libs/layout/header/header-network-switcher.tsx
@@ -2,13 +2,15 @@ import React from 'react';
 import { useSelector } from 'react-redux';
 import styled from 'styled-components';
 
-import { AlignedFlexRow, SpaceBetweenFlexRow, SpacingSize } from '@libs/layout';
-import { SvgIcon, Typography, Modal, hexToRGBA } from '@libs/ui';
+import { NetworkSetting } from '@src/constants';
 
+import { activeNetworkSettingChanged } from '@background/redux/settings/actions';
 import { selectActiveNetworkSetting } from '@background/redux/settings/selectors';
 import { dispatchToMainStore } from '@background/redux/utils';
-import { activeNetworkSettingChanged } from '@background/redux/settings/actions';
-import { NetworkSetting } from '@src/constants';
+
+import { AlignedFlexRow, SpaceBetweenFlexRow, SpacingSize } from '@libs/layout';
+import { Modal, SvgIcon, Typography } from '@libs/ui/components';
+import { hexToRGBA } from '@libs/ui/utils';
 
 const NetworkSwitcherContainer = styled(AlignedFlexRow)`
   background-color: ${({ theme }) => hexToRGBA(theme.color.black, '0.16')};
diff --git a/src/libs/layout/header/header-popup.tsx b/src/libs/layout/header/header-popup.tsx
new file mode 100644
index 000000000..72547b5fa
--- /dev/null
+++ b/src/libs/layout/header/header-popup.tsx
@@ -0,0 +1,85 @@
+import React from 'react';
+import { useSelector } from 'react-redux';
+import styled from 'styled-components';
+
+import {
+  selectIsActiveAccountConnectedWithActiveOrigin,
+  selectVaultActiveAccount
+} from '@background/redux/vault/selectors';
+
+import {
+  AlignedFlexRow,
+  AlignedSpaceBetweenFlexRow,
+  HeaderContainer
+} from '@libs/layout';
+import { Avatar, SvgIcon } from '@libs/ui/components';
+
+import { HeaderActions } from './header-actions';
+import { HeaderConnectionStatus } from './header-connection-status';
+import { HeaderDataUpdater } from './header-data-updater';
+
+const SubmenuBarContainer = styled(AlignedSpaceBetweenFlexRow)`
+  height: 56px;
+  background-color: ${({ theme }) => theme.color.backgroundPrimary};
+  border-bottom: 0.5px solid ${({ theme }) => theme.color.borderPrimary};
+  padding: 8px ${({ theme }) => theme.padding[1.6]};
+`;
+
+interface HeaderProps {
+  withNetworkSwitcher?: boolean;
+  withMenu?: boolean;
+  withConnectionStatus?: boolean;
+  renderSubmenuBarItems?: () => JSX.Element;
+}
+
+export function HeaderPopup({
+  withNetworkSwitcher,
+  withMenu,
+  withConnectionStatus,
+  renderSubmenuBarItems
+}: HeaderProps) {
+  const isActiveAccountConnected = useSelector(
+    selectIsActiveAccountConnectedWithActiveOrigin
+  );
+  const activeAccount = useSelector(selectVaultActiveAccount);
+  const headerDataUpdaterEnabled = Boolean(
+    activeAccount?.publicKey &&
+      (withMenu || withConnectionStatus || withNetworkSwitcher)
+  );
+
+  return (
+    <>
+      <HeaderContainer>
+        {withConnectionStatus && activeAccount?.publicKey ? (
+          <AlignedFlexRow>
+            <Avatar
+              size={32}
+              publicKey={activeAccount.publicKey}
+              withConnectedStatus
+              isConnected={isActiveAccountConnected}
+              displayContext="header"
+            />
+            <HeaderConnectionStatus />
+          </AlignedFlexRow>
+        ) : (
+          <SvgIcon
+            src="assets/icons/wallet-original-on-white.svg"
+            width={113}
+            height={28}
+          />
+        )}
+
+        {(withMenu || withNetworkSwitcher) && (
+          <HeaderActions
+            withMenu={withMenu}
+            withNetworkSwitcher={withNetworkSwitcher}
+          />
+        )}
+      </HeaderContainer>
+      {renderSubmenuBarItems && (
+        <SubmenuBarContainer>{renderSubmenuBarItems()}</SubmenuBarContainer>
+      )}
+      {headerDataUpdaterEnabled && <HeaderDataUpdater />}
+    </>
+  );
+}
diff --git a/src/libs/layout/header/header-submenu-bar-nav-link.tsx b/src/libs/layout/header/header-submenu-bar-nav-link.tsx
index a4f080bbb..b54c5d614 100644
--- a/src/libs/layout/header/header-submenu-bar-nav-link.tsx
+++ b/src/libs/layout/header/header-submenu-bar-nav-link.tsx
@@ -1,22 +1,24 @@
 import React from 'react';
-import styled from 'styled-components';
 import { Trans, useTranslation } from 'react-i18next';
 import { useSelector } from 'react-redux';
+import styled from 'styled-components';
 
-import { Link, SvgIcon, Typography } from '@libs/ui';
-import { RouterPath, useTypedNavigate } from '@popup/router';
+import { RouterPath } from '@popup/router/paths';
+import { useTypedNavigate } from '@popup/router/use-typed-navigate';
 
-import { closeCurrentWindow } from '@src/background/close-current-window';
+import { closeCurrentWindow } from '@background/close-current-window';
 import { selectAccountBalance } from '@background/redux/account-info/selectors';
-import { formatNumber, motesToCSPR } from '@libs/ui/utils/formatters';
+
 import { AlignedFlexRow, SpacingSize } from '@libs/layout';
+import { Link, SvgIcon, Typography } from '@libs/ui/components';
+import { formatNumber, motesToCSPR } from '@libs/ui/utils/formatters';
 
 const LinkWithIconContainer = styled.div`
   display: flex;
   align-items: center;
 `;
 
-export type LinkType =
+type LinkType =
   | 'back'
   | 'close'
   | 'cancel'
@@ -41,7 +43,7 @@ export function HeaderSubmenuBarNavLink({
   const balance = useSelector(selectAccountBalance);
 
   const formattedBalance = formatNumber(
-    (balance.amountMotes && motesToCSPR(balance.amountMotes)) || ''
+    (balance.liquidMotes && motesToCSPR(balance.liquidMotes)) || ''
   );
 
   switch (linkType) {
diff --git a/src/libs/layout/header/header-view-in-explorer.tsx b/src/libs/layout/header/header-view-in-explorer.tsx
index 52f8c4aed..3f8696aca 100644
--- a/src/libs/layout/header/header-view-in-explorer.tsx
+++ b/src/libs/layout/header/header-view-in-explorer.tsx
@@ -1,18 +1,21 @@
 import React, { useEffect, useState } from 'react';
 import { useSelector } from 'react-redux';
 
-import { Link, SvgIcon, Typography } from '@libs/ui';
-import { AlignedFlexRow, CenteredFlexColumn, SpacingSize } from '@libs/layout';
 import {
   getBlockExplorerAccountUrl,
   getBlockExplorerContractUrl,
   getBlockExplorerDeployUrl,
   getContractNftUrl
 } from '@src/constants';
-import { useCasperToken } from '@src/hooks';
+
 import { selectApiConfigBasedOnActiveNetwork } from '@background/redux/settings/selectors';
 import { selectVaultActiveAccount } from '@background/redux/vault/selectors';
+
+import { useCasperToken } from '@hooks/use-casper-token';
+
+import { AlignedFlexRow, CenteredFlexColumn, SpacingSize } from '@libs/layout';
 import { ContractPackageWithBalance } from '@libs/services/erc20-service';
+import { Link, SvgIcon, Typography } from '@libs/ui/components';
 
 interface HeaderViewInExplorerProps {
   tokenName?: string;
diff --git a/src/libs/layout/header/index.tsx b/src/libs/layout/header/index.tsx
index 5fc9db4e9..d54f80737 100644
--- a/src/libs/layout/header/index.tsx
+++ b/src/libs/layout/header/index.tsx
@@ -1,87 +1,4 @@
-import React from 'react';
-import styled from 'styled-components';
-import { useSelector } from 'react-redux';
-
-import {
-  AlignedFlexRow,
-  AlignedSpaceBetweenFlexRow,
-  HeaderContainer
-} from '@src/libs/layout';
-import { Avatar, SvgIcon } from '@libs/ui';
-import {
-  selectIsActiveAccountConnectedWithActiveOrigin,
-  selectVaultActiveAccount
-} from '@background/redux/vault/selectors';
-
-import { HeaderConnectionStatus } from './header-connection-status';
-import { HeaderActions } from './header-actions';
-import { HeaderDataUpdater } from './header-data-updater';
-
-const SubmenuBarContainer = styled(AlignedSpaceBetweenFlexRow)`
-  height: 56px;
-  background-color: ${({ theme }) => theme.color.backgroundPrimary};
-  border-bottom: 0.5px solid ${({ theme }) => theme.color.borderPrimary};
-  padding: 8px ${({ theme }) => theme.padding[1.6]};
-`;
-
-interface HeaderProps {
-  withNetworkSwitcher?: boolean;
-  withMenu?: boolean;
-  withConnectionStatus?: boolean;
-  renderSubmenuBarItems?: () => JSX.Element;
-}
-
-export function PopupHeader({
-  withNetworkSwitcher,
-  withMenu,
-  withConnectionStatus,
-  renderSubmenuBarItems
-}: HeaderProps) {
-  const isActiveAccountConnected = useSelector(
-    selectIsActiveAccountConnectedWithActiveOrigin
-  );
-  const activeAccount = useSelector(selectVaultActiveAccount);
-  const headerDataUpdaterEnabled = Boolean(
-    activeAccount?.publicKey &&
-      (withMenu || withConnectionStatus || withNetworkSwitcher)
-  );
-
-  return (
-    <>
-      <HeaderContainer>
-        {withConnectionStatus && activeAccount?.publicKey ? (
-          <AlignedFlexRow>
-            <Avatar
-              size={32}
-              publicKey={activeAccount.publicKey}
-              withConnectedStatus
-              isConnected={isActiveAccountConnected}
-              displayContext="header"
-            />
-            <HeaderConnectionStatus />
-          </AlignedFlexRow>
-        ) : (
-          <SvgIcon
-            src="assets/icons/wallet-original-on-white.svg"
-            width={113}
-            height={28}
-          />
-        )}
-
-        {(withMenu || withNetworkSwitcher) && (
-          <HeaderActions
-            withMenu={withMenu}
-            withNetworkSwitcher={withNetworkSwitcher}
-          />
-        )}
-      </HeaderContainer>
-      {renderSubmenuBarItems && (
-        <SubmenuBarContainer>{renderSubmenuBarItems()}</SubmenuBarContainer>
-      )}
-      {headerDataUpdaterEnabled && <HeaderDataUpdater />}
-    </>
-  );
-}
-
 export * from './header-submenu-bar-nav-link';
 export * from './header-view-in-explorer';
+export * from './header-network-switcher';
+export * from './header-popup';
diff --git a/src/libs/layout/index.tsx b/src/libs/layout/index.tsx
index d8da8f13a..ef1cb6e28 100644
--- a/src/libs/layout/index.tsx
+++ b/src/libs/layout/index.tsx
@@ -1,6 +1,10 @@
 export * from './containers';
-export * from './logo';
 export * from './header';
 export * from './popup-layout';
 export * from './layout-window';
 export * from './layout-tab';
+export * from './error';
+export * from './locked-router';
+export * from './reset-vault';
+export * from './unlock-protected-page-content';
+export * from './unlock-vault';
diff --git a/src/libs/layout/layout-tab.tsx b/src/libs/layout/layout-tab.tsx
index 62756dbc5..c6a16c95a 100644
--- a/src/libs/layout/layout-tab.tsx
+++ b/src/libs/layout/layout-tab.tsx
@@ -1,8 +1,9 @@
 import React from 'react';
 import styled from 'styled-components';
 
-import { SvgIcon } from '@libs/ui';
-import { CenteredFlexColumn } from '@src/libs/layout';
+import { SvgIcon } from '@libs/ui/components';
+
+import { CenteredFlexColumn } from './containers';
 
 const Container = styled.div`
   width: 100%;
diff --git a/src/libs/layout/layout-window.tsx b/src/libs/layout/layout-window.tsx
index c222f87d2..8421705fd 100644
--- a/src/libs/layout/layout-window.tsx
+++ b/src/libs/layout/layout-window.tsx
@@ -1,8 +1,7 @@
-import React, { PropsWithChildren } from 'react';
-import styled from 'styled-components';
 import { MacScrollbar } from 'mac-scrollbar';
-
 import 'mac-scrollbar/dist/mac-scrollbar.css';
+import React, { PropsWithChildren } from 'react';
+import styled from 'styled-components';
 
 import { FlexColumn } from './containers';
 
diff --git a/src/libs/layout/locked-router/index.tsx b/src/libs/layout/locked-router/index.tsx
index bccbcebb6..87b5df7cf 100644
--- a/src/libs/layout/locked-router/index.tsx
+++ b/src/libs/layout/locked-router/index.tsx
@@ -1,11 +1,13 @@
 import React from 'react';
 import { HashRouter, Route, Routes } from 'react-router-dom';
 
-import { ResetVaultPageContent } from '@src/libs/layout/reset-vault';
-import { UnlockVaultPageContent } from '@src/libs/layout/unlock-vault';
-import { PopupLayout, LayoutWindow } from '@libs/layout';
-
-import { PopupHeader } from '../header';
+import {
+  LayoutWindow,
+  PopupLayout,
+  ResetVaultPageContent,
+  UnlockVaultPageContent
+} from '@libs/layout';
+import { HeaderPopup } from '@libs/layout/header/header-popup';
 
 export const LockedRouterPath = {
   Any: '*',
@@ -25,12 +27,12 @@ export function LockedRouter({ popupLayout }: LockedRouterProps) {
           element={
             popupLayout ? (
               <PopupLayout
-                renderHeader={() => <PopupHeader />}
+                renderHeader={() => <HeaderPopup />}
                 renderContent={() => <UnlockVaultPageContent />}
               />
             ) : (
               <LayoutWindow
-                renderHeader={() => <PopupHeader />}
+                renderHeader={() => <HeaderPopup />}
                 renderContent={() => <UnlockVaultPageContent />}
               />
             )
@@ -41,12 +43,12 @@ export function LockedRouter({ popupLayout }: LockedRouterProps) {
           element={
             popupLayout ? (
               <PopupLayout
-                renderHeader={() => <PopupHeader />}
+                renderHeader={() => <HeaderPopup />}
                 renderContent={() => <ResetVaultPageContent />}
               />
             ) : (
               <LayoutWindow
-                renderHeader={() => <PopupHeader />}
+                renderHeader={() => <HeaderPopup />}
                 renderContent={() => <ResetVaultPageContent />}
               />
             )
diff --git a/src/libs/layout/logo.tsx b/src/libs/layout/logo.tsx
deleted file mode 100644
index f7b365f8d..000000000
--- a/src/libs/layout/logo.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import React from 'react';
-import { SvgIcon } from '@libs/ui';
-
-interface LogoProps {
-  onClick?: () => void;
-}
-
-export function Logo({ onClick }: LogoProps) {
-  return (
-    <SvgIcon
-      onClick={onClick}
-      width={44}
-      height={32}
-      color="contentOnFill"
-      src="assets/icons/casper-wallet-logo.svg"
-    />
-  );
-}
diff --git a/src/libs/layout/popup-layout.tsx b/src/libs/layout/popup-layout.tsx
index 47866ec0e..f756f051f 100644
--- a/src/libs/layout/popup-layout.tsx
+++ b/src/libs/layout/popup-layout.tsx
@@ -1,8 +1,7 @@
-import React, { PropsWithChildren } from 'react';
-import styled from 'styled-components';
 import { MacScrollbar } from 'mac-scrollbar';
-
 import 'mac-scrollbar/dist/mac-scrollbar.css';
+import React, { PropsWithChildren } from 'react';
+import styled from 'styled-components';
 
 import { FlexColumn } from './containers';
 
diff --git a/src/libs/layout/reset-vault/index.tsx b/src/libs/layout/reset-vault/index.tsx
index e6fc0c04f..a9a986d34 100644
--- a/src/libs/layout/reset-vault/index.tsx
+++ b/src/libs/layout/reset-vault/index.tsx
@@ -1,19 +1,20 @@
 import React, { useState } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 
+import { useTypedNavigate } from '@popup/router';
+
+import { closeWindowByReloadExtension } from '@background/close-window-by-reload-extension';
+import { resetVault } from '@background/redux/sagas/actions';
+import { dispatchToMainStore } from '@background/redux/utils';
+
 import {
   ContentContainer,
+  FooterButtonsAbsoluteContainer,
   IllustrationContainer,
   ParagraphContainer,
-  FooterButtonsAbsoluteContainer,
   SpacingSize
-} from '@src/libs/layout/containers';
-import { Typography, Button, Checkbox, SvgIcon } from '@src/libs/ui';
-
-import { useTypedNavigate } from '@popup/router';
-import { dispatchToMainStore } from '@src/background/redux/utils';
-import { resetVault } from '@src/background/redux/sagas/actions';
-import { closeWindowByReloadExtension } from '@src/background/close-window-by-reload-extension';
+} from '@libs/layout';
+import { Button, Checkbox, SvgIcon, Typography } from '@libs/ui/components';
 
 export function ResetVaultPageContent() {
   const [isChecked, setIsChecked] = useState(false);
diff --git a/src/libs/layout/unlock-protected-page-content/index.tsx b/src/libs/layout/unlock-protected-page-content/index.tsx
index bdda48f6b..866caea88 100644
--- a/src/libs/layout/unlock-protected-page-content/index.tsx
+++ b/src/libs/layout/unlock-protected-page-content/index.tsx
@@ -1,8 +1,12 @@
 import React, { useState } from 'react';
-import { Trans, useTranslation } from 'react-i18next';
 import { FieldErrors, UseFormRegister } from 'react-hook-form';
+import { Trans, useTranslation } from 'react-i18next';
 import { useSelector } from 'react-redux';
 
+import { selectLoginRetryCount } from '@background/redux/login-retry-count/selectors';
+
+import { useLockWalletWhenNoMoreRetries } from '@hooks/use-lock-wallet-when-no-more-retries';
+
 import {
   ContentContainer,
   IllustrationContainer,
@@ -16,10 +20,7 @@ import {
   PasswordVisibilityIcon,
   SvgIcon,
   Typography
-} from '@libs/ui';
-import { selectLoginRetryCount } from '@background/redux/login-retry-count/selectors';
-
-import { useLockWalletWhenNoMoreRetries } from './use-lock-wallet-when-no-more-retries';
+} from '@libs/ui/components';
 
 interface PasswordFormValues {
   password: string;
diff --git a/src/libs/layout/unlock-vault/index.tsx b/src/libs/layout/unlock-vault/index.tsx
index 15f84e170..6ed361984 100644
--- a/src/libs/layout/unlock-vault/index.tsx
+++ b/src/libs/layout/unlock-vault/index.tsx
@@ -4,15 +4,31 @@ import { Trans, useTranslation } from 'react-i18next';
 import { useSelector } from 'react-redux';
 import { useNavigate } from 'react-router-dom';
 
+import {
+  selectKeyDerivationSaltHash,
+  selectPasswordHash,
+  selectPasswordSaltHash
+} from '@background/redux/keys/selectors';
+import { selectHasLoginRetryLockoutTime } from '@background/redux/login-retry-lockout-time/selectors';
+import { unlockVault } from '@background/redux/sagas/actions';
+import { UnlockVault } from '@background/redux/sagas/types';
+import { dispatchToMainStore } from '@background/redux/utils';
+import { selectVaultCipher } from '@background/redux/vault-cipher/selectors';
+import { VaultState } from '@background/redux/vault/types';
+
+import { useLockWalletWhenNoMoreRetries } from '@hooks/use-lock-wallet-when-no-more-retries';
+
+import unlockAnimation from '@libs/animations/unlock_animation.json';
 import {
   AlignedFlexRow,
   ContentContainer,
   FooterButtonsAbsoluteContainer,
   IllustrationContainer,
   InputsContainer,
+  LockedRouterPath,
   ParagraphContainer,
   SpacingSize
-} from '@src/libs/layout/containers';
+} from '@libs/layout';
 import {
   Button,
   Input,
@@ -20,27 +36,11 @@ import {
   PasswordVisibilityIcon,
   SvgIcon,
   Typography
-} from '@src/libs/ui';
-
-import { selectHasLoginRetryLockoutTime } from '@background/redux/login-retry-lockout-time/selectors';
-import { UnlockVault } from '@background/redux/sagas/types';
-import { selectVaultCipher } from '@background/redux/vault-cipher/selectors';
-import { useLockWalletWhenNoMoreRetries } from '@layout/unlock-protected-page-content/use-lock-wallet-when-no-more-retries';
-import {
-  selectKeyDerivationSaltHash,
-  selectPasswordHash,
-  selectPasswordSaltHash
-} from '@src/background/redux/keys/selectors';
-import { unlockVault } from '@src/background/redux/sagas/actions';
-import { dispatchToMainStore } from '@src/background/redux/utils';
+} from '@libs/ui/components';
 import {
   UnlockWalletFormValues,
   useUnlockWalletForm
-} from '@src/libs/ui/forms/unlock-wallet';
-import { VaultState } from '@background/redux/vault/types';
-import unlockAnimation from '@libs/animations/unlock_animation.json';
-
-import { LockedRouterPath } from '../locked-router';
+} from '@libs/ui/forms/unlock-wallet';
 
 interface UnlockMessageEvent extends MessageEvent {
   data: UnlockVault;
@@ -76,7 +76,7 @@ export function UnlockVaultPageContent() {
 
     setIsLoading(true);
     const unlockVaultWorker = new Worker(
-      new URL('@src/background/workers/unlockVaultWorker.ts', import.meta.url)
+      new URL('@background/workers/unlockVaultWorker.ts', import.meta.url)
     );
 
     if (keyDerivationSaltHash == null) {
@@ -216,7 +216,7 @@ export function UnlockVaultPageContent() {
         </InputsContainer>
       </ContentContainer>
       <FooterButtonsAbsoluteContainer>
-        <Button type="submit">
+        <Button type="submit" disabled={isLoading}>
           {isLoading ? (
             <AlignedFlexRow gap={SpacingSize.Small}>
               <Player
diff --git a/src/libs/services/account-activity-service/account-activity-service.ts b/src/libs/services/account-activity-service/account-activity-service.ts
index 5e37b1f59..7ecfe93b0 100644
--- a/src/libs/services/account-activity-service/account-activity-service.ts
+++ b/src/libs/services/account-activity-service/account-activity-service.ts
@@ -1,36 +1,45 @@
-import { serviceMessage } from '@background/service-message';
-import { dispatchToMainStore } from '@background/redux/utils';
-import { handleError, toJson } from '@libs/services/utils';
-import { queryClient } from '@libs/services/query-client';
-import { Payload, PaginatedResponse } from '@libs/services/types';
 import { ACCOUNT_CASPER_ACTIVITY_REFRESH_RATE } from '@src/constants';
+
+import { dispatchToMainStore } from '@background/redux/utils';
+import { serviceMessage } from '@background/service-message';
+
 import { TransferResult } from '@libs/services/account-activity-service/types';
+import { queryClient } from '@libs/services/query-client';
+import { PaginatedResponse, Payload } from '@libs/services/types';
+import { handleError, toJson } from '@libs/services/utils';
 
 import { getAccountTransferLink } from './constants';
 
 export const accountCasperActivityRequest = (
-  casperApiUrl: string,
+  casperClarityApiUrl: string,
   accountHash: string,
   page: number,
   signal?: AbortSignal
 ): Promise<PaginatedResponse<TransferResult>> =>
-  fetch(getAccountTransferLink(casperApiUrl, accountHash, page), { signal })
+  fetch(getAccountTransferLink(casperClarityApiUrl, accountHash, page), {
+    signal
+  })
     .then(toJson)
     .catch(handleError);
 
 export const fetchAccountCasperActivity = ({
-  casperApiUrl,
+  casperClarityApiUrl,
   accountHash,
   page
 }: {
-  casperApiUrl: string;
+  casperClarityApiUrl: string;
   accountHash: string;
   page: number;
 }) =>
   queryClient.fetchQuery(
-    ['accountCasperActivityRequest', casperApiUrl, accountHash, page],
+    ['accountCasperActivityRequest', casperClarityApiUrl, accountHash, page],
     ({ signal }) =>
-      accountCasperActivityRequest(casperApiUrl, accountHash, page, signal),
+      accountCasperActivityRequest(
+        casperClarityApiUrl,
+        accountHash,
+        page,
+        signal
+      ),
     { staleTime: ACCOUNT_CASPER_ACTIVITY_REFRESH_RATE }
   );
 
diff --git a/src/libs/services/account-activity-service/constants.ts b/src/libs/services/account-activity-service/constants.ts
index edcadb6d4..9745a0c81 100644
--- a/src/libs/services/account-activity-service/constants.ts
+++ b/src/libs/services/account-activity-service/constants.ts
@@ -1,41 +1,41 @@
 export const getAccountActivityLink = (
-  casperApiUrl: string,
+  casperClarityApiUrl: string,
   publicKey: string,
   page: number
 ) =>
-  `${casperApiUrl}/accounts/${publicKey}/ledgerlive-deploys?page=${page}&limit=10&execution_type_id=6`;
+  `${casperClarityApiUrl}/accounts/${publicKey}/ledgerlive-deploys?page=${page}&limit=10&execution_type_id=6`;
 
 export const getErc20AccountActivityLink = (
-  casperApiUrl: string,
+  casperClarityApiUrl: string,
   account_hash: string,
   page: number
 ) =>
-  `${casperApiUrl}/accounts/${account_hash}/erc20-token-actions?page=${page}&limit=10&fields=contract_package,deploy&with_amounts_in_currency_id=1`;
+  `${casperClarityApiUrl}/accounts/${account_hash}/erc20-token-actions?page=${page}&limit=10&fields=contract_package,deploy&with_amounts_in_currency_id=1`;
 
 export const getErc20TokenActivityLink = (
-  casperApiUrl: string,
+  casperClarityApiUrl: string,
   account_hash: string,
   contract_package_hash: string,
   page: number
 ) =>
-  `${casperApiUrl}/erc20-token-actions?contract_package_hash=${contract_package_hash}&account_hash=${account_hash}&page=${page}&limit=10&fields=contract_package,deploy&with_amounts_in_currency_id=1`;
+  `${casperClarityApiUrl}/erc20-token-actions?contract_package_hash=${contract_package_hash}&account_hash=${account_hash}&page=${page}&limit=10&fields=contract_package,deploy&with_amounts_in_currency_id=1`;
 
 export const getExtendedDeploysHashLink = (
-  casperApiUrl: string,
+  casperClarityApiUrl: string,
   deployHash: string
 ) =>
-  `${casperApiUrl}/extended-deploys/${deployHash}?fields=entry_point,contract_package&with_amounts_in_currency_id=1`;
+  `${casperClarityApiUrl}/extended-deploys/${deployHash}?fields=entry_point,contract_package&with_amounts_in_currency_id=1`;
 
 export const getAccountExtendedDeploysLink = (
-  casperApiUrl: string,
+  casperClarityApiUrl: string,
   publicKey: string,
   page: number
 ) =>
-  `${casperApiUrl}/accounts/${publicKey}/extended-deploys?page=${page}&limit=10&fields=entry_point,contract_package&with_amounts_in_currency_id=1`;
+  `${casperClarityApiUrl}/accounts/${publicKey}/extended-deploys?page=${page}&limit=10&fields=entry_point,contract_package&with_amounts_in_currency_id=1`;
 
 export const getAccountTransferLink = (
-  casperApiUrl: string,
+  casperClarityApiUrl: string,
   account_hash: string,
   page: number
 ) =>
-  `${casperApiUrl}/accounts/${account_hash}/transfers?page=${page}&limit=10&with_extended_info=1&with_amounts_in_currency_id=1`;
+  `${casperClarityApiUrl}/accounts/${account_hash}/transfers?page=${page}&limit=10&with_extended_info=1&with_amounts_in_currency_id=1`;
diff --git a/src/libs/services/account-activity-service/erc20-token-activity-service.ts b/src/libs/services/account-activity-service/erc20-token-activity-service.ts
index 2e87cea05..e28cce132 100644
--- a/src/libs/services/account-activity-service/erc20-token-activity-service.ts
+++ b/src/libs/services/account-activity-service/erc20-token-activity-service.ts
@@ -1,22 +1,24 @@
-import { serviceMessage } from '@background/service-message';
+import { ERC20_TOKEN_ACTIVITY_REFRESH_RATE } from '@src/constants';
+
 import { dispatchToMainStore } from '@background/redux/utils';
-import { handleError, toJson } from '@libs/services/utils';
+import { serviceMessage } from '@background/service-message';
+
 import { queryClient } from '@libs/services/query-client';
-import { Payload, PaginatedResponse } from '@libs/services/types';
-import { ERC20_TOKEN_ACTIVITY_REFRESH_RATE } from '@src/constants';
+import { PaginatedResponse, Payload } from '@libs/services/types';
+import { handleError, toJson } from '@libs/services/utils';
 
 import { getErc20TokenActivityLink } from './constants';
 import { Erc20TokenActionResult } from './types';
 
 export const erc20TokenActivityRequest = (
-  casperApiUrl: string,
+  casperClarityApiUrl: string,
   publicKey: string,
   contractPackageHash: string,
   page: number
 ) =>
   fetch(
     getErc20TokenActivityLink(
-      casperApiUrl,
+      casperClarityApiUrl,
       publicKey,
       contractPackageHash,
       page
@@ -26,12 +28,12 @@ export const erc20TokenActivityRequest = (
     .catch(handleError);
 
 export const fetchErc20TokenActivity = ({
-  casperApiUrl,
+  casperClarityApiUrl,
   publicKey,
   contractPackageHash,
   page
 }: {
-  casperApiUrl: string;
+  casperClarityApiUrl: string;
   publicKey: string;
   contractPackageHash: string;
   page: number;
@@ -39,14 +41,14 @@ export const fetchErc20TokenActivity = ({
   queryClient.fetchQuery(
     [
       'erc20TokenActivityRequest',
-      casperApiUrl,
+      casperClarityApiUrl,
       publicKey,
       contractPackageHash,
       page
     ],
     () =>
       erc20TokenActivityRequest(
-        casperApiUrl,
+        casperClarityApiUrl,
         publicKey,
         contractPackageHash,
         page
diff --git a/src/libs/services/account-activity-service/extended-deploys-service.ts b/src/libs/services/account-activity-service/extended-deploys-service.ts
index e3d44b585..e3ea4634d 100644
--- a/src/libs/services/account-activity-service/extended-deploys-service.ts
+++ b/src/libs/services/account-activity-service/extended-deploys-service.ts
@@ -1,39 +1,42 @@
+import { ACCOUNT_DEPLOY_REFRESH_RATE } from '@src/constants';
+
 import { dispatchToMainStore } from '@background/redux/utils';
 import { serviceMessage } from '@background/service-message';
-import { handleError, toJson } from '@libs/services/utils';
+
 import { queryClient } from '@libs/services/query-client';
 import {
-  Payload,
+  ErrorResponse,
   PaginatedResponse,
-  ErrorResponse
+  Payload
 } from '@libs/services/types';
-import { ACCOUNT_DEPLOY_REFRESH_RATE } from '@src/constants';
+import { handleError, toJson } from '@libs/services/utils';
 
-import { ExtendedDeploy, ExtendedDeployResult } from './types';
 import {
   getAccountExtendedDeploysLink,
   getExtendedDeploysHashLink
 } from './constants';
+import { ExtendedDeploy, ExtendedDeployResult } from './types';
 
 export const extendedDeploysRequest = (
-  casperApiUrl: string,
+  casperClarityApiUrl: string,
   deployHash: string,
   signal?: AbortSignal
 ): Promise<ExtendedDeployResult> =>
-  fetch(getExtendedDeploysHashLink(casperApiUrl, deployHash), { signal })
+  fetch(getExtendedDeploysHashLink(casperClarityApiUrl, deployHash), { signal })
     .then(toJson)
     .catch(handleError);
 
 export const fetchExtendedDeploysInfo = ({
-  casperApiUrl,
+  casperClarityApiUrl,
   deployHash
 }: {
-  casperApiUrl: string;
+  casperClarityApiUrl: string;
   deployHash: string;
 }) =>
   queryClient.fetchQuery(
-    ['accountTransactionsRequest', casperApiUrl, deployHash],
-    ({ signal }) => extendedDeploysRequest(casperApiUrl, deployHash, signal)
+    ['accountTransactionsRequest', casperClarityApiUrl, deployHash],
+    ({ signal }) =>
+      extendedDeploysRequest(casperClarityApiUrl, deployHash, signal)
   );
 
 export const dispatchFetchExtendedDeploysInfo = (
@@ -44,30 +47,35 @@ export const dispatchFetchExtendedDeploysInfo = (
   );
 
 export const accountExtendedDeploysRequest = (
-  casperApiUrl: string,
+  casperClarityApiUrl: string,
   publicKey: string,
   page: number,
   signal?: AbortSignal
 ): Promise<PaginatedResponse<ExtendedDeployResult>> =>
-  fetch(getAccountExtendedDeploysLink(casperApiUrl, publicKey, page), {
+  fetch(getAccountExtendedDeploysLink(casperClarityApiUrl, publicKey, page), {
     signal
   })
     .then(toJson)
     .catch(handleError);
 
 export const fetchAccountExtendedDeploys = ({
-  casperApiUrl,
+  casperClarityApiUrl,
   publicKey,
   page
 }: {
-  casperApiUrl: string;
+  casperClarityApiUrl: string;
   publicKey: string;
   page: number;
 }): Promise<PaginatedResponse<ExtendedDeployResult> | ErrorResponse> =>
   queryClient.fetchQuery(
-    ['accountDeploysRequest', casperApiUrl, publicKey, page],
+    ['accountDeploysRequest', casperClarityApiUrl, publicKey, page],
     ({ signal }) =>
-      accountExtendedDeploysRequest(casperApiUrl, publicKey, page, signal),
+      accountExtendedDeploysRequest(
+        casperClarityApiUrl,
+        publicKey,
+        page,
+        signal
+      ),
     { staleTime: ACCOUNT_DEPLOY_REFRESH_RATE }
   );
 
diff --git a/src/libs/services/account-activity-service/types.ts b/src/libs/services/account-activity-service/types.ts
index 8ff28f6db..35953cb41 100644
--- a/src/libs/services/account-activity-service/types.ts
+++ b/src/libs/services/account-activity-service/types.ts
@@ -1,5 +1,5 @@
-import { CLTypeParsedResult, CLTypeTypeResult } from '@libs/types/cl';
 import { ErrorResponse, PaginatedResponse } from '@libs/services/types';
+import { CLTypeParsedResult, CLTypeTypeResult } from '@libs/types/cl';
 
 export interface TransferResult {
   amount: string;
@@ -37,6 +37,7 @@ export type ExtendedDeployArgsResult = {
   contract_hash_str?: ExtendedDeployClTypeResult;
   recipient?: ExtendedDeployClTypeResult;
   token_id?: ExtendedDeployClTypeResult;
+  token_ids?: ExtendedDeployClTypeResult;
   token_meta?: ExtendedDeployClTypeResult;
   id?: ExtendedDeployClTypeResult;
   target?: ExtendedDeployClTypeResult;
diff --git a/src/libs/services/account-info/account-info.ts b/src/libs/services/account-info/account-info.ts
index 20e9f8de3..625d6ae97 100644
--- a/src/libs/services/account-info/account-info.ts
+++ b/src/libs/services/account-info/account-info.ts
@@ -1,32 +1,35 @@
-import { serviceMessage } from '@background/service-message';
+import { FETCH_QUERY_OPTIONS } from '@src/constants';
+
 import { dispatchToMainStore } from '@background/redux/utils';
+import { serviceMessage } from '@background/service-message';
 
-import { getAccountInfoUrl, AccountInfo } from '@libs/services/account-info';
-import { handleError, toJson } from '@libs/services/utils';
+import { AccountInfo, getAccountInfoUrl } from '@libs/services/account-info';
 import { queryClient } from '@libs/services/query-client';
 import { DataResponse, Payload } from '@libs/services/types';
-
-import { FETCH_QUERY_OPTIONS } from '@src/constants';
+import { handleError, toJson } from '@libs/services/utils';
 
 const accountInfoRequest = (
   accountHash: string,
-  casperApiUrl: string,
+  casperClarityApiUrl: string,
   signal?: AbortSignal
 ): Promise<DataResponse<AccountInfo>> =>
-  fetch(getAccountInfoUrl({ accountHash, casperApiUrl }), { signal })
+  fetch(getAccountInfoUrl({ accountHash, casperClarityApiUrl }), {
+    signal
+  })
     .then(toJson)
     .catch(handleError);
 
 export const fetchAccountInfo = ({
   accountHash,
-  casperApiUrl
+  casperClarityApiUrl
 }: {
   accountHash: string;
-  casperApiUrl: string;
+  casperClarityApiUrl: string;
 }) =>
   queryClient.fetchQuery(
-    ['accountInfoRequest', accountHash, casperApiUrl],
-    ({ signal }) => accountInfoRequest(accountHash, casperApiUrl, signal),
+    ['accountInfoRequest', accountHash, casperClarityApiUrl],
+    ({ signal }) =>
+      accountInfoRequest(accountHash, casperClarityApiUrl, signal),
     {
       staleTime: FETCH_QUERY_OPTIONS.apiCacheTime
     }
diff --git a/src/libs/services/account-info/constants.ts b/src/libs/services/account-info/constants.ts
index 0d4169370..27618173d 100644
--- a/src/libs/services/account-info/constants.ts
+++ b/src/libs/services/account-info/constants.ts
@@ -1,7 +1,7 @@
 export const getAccountInfoUrl = ({
   accountHash,
-  casperApiUrl
+  casperClarityApiUrl
 }: {
   accountHash: string;
-  casperApiUrl: string;
-}): string => `${casperApiUrl}/accounts-info/${accountHash}`;
+  casperClarityApiUrl: string;
+}): string => `${casperClarityApiUrl}/accounts-info/${accountHash}`;
diff --git a/src/libs/services/balance-service/balance-service.ts b/src/libs/services/balance-service/balance-service.ts
index 868d7aabf..c21ef7d64 100644
--- a/src/libs/services/balance-service/balance-service.ts
+++ b/src/libs/services/balance-service/balance-service.ts
@@ -1,42 +1,45 @@
-import { serviceMessage } from '@src/background/service-message';
+import { BALANCE_REFRESH_RATE, CURRENCY_REFRESH_RATE } from '@src/constants';
+
 import { dispatchToMainStore } from '@background/redux/utils';
+import { serviceMessage } from '@background/service-message';
 
-import { Payload } from '@libs/services/types';
+import { DataResponse, Payload } from '@libs/services/types';
 
-import { BALANCE_REFRESH_RATE, CURRENCY_REFRESH_RATE } from '@src/constants';
-
-import { handleError, toJson } from '../utils';
 import { queryClient } from '../query-client';
-
+import { handleError, toJson } from '../utils';
+import { getAccountBalanceUrl, getCurrencyRateUrl } from './constants';
 import {
+  AccountData,
   FetchBalanceResponse,
-  GetAccountBalanceRequestResponse,
   GetCurrencyRateRequestResponse
 } from './types';
-import { getCurrencyRateUrl, getAccountBalanceUrl } from './constants';
 
 export const currencyRateRequest = (
-  casperApiUrl: string,
+  casperClarityApiUrl: string,
   signal?: AbortSignal
 ): Promise<GetCurrencyRateRequestResponse> =>
-  fetch(getCurrencyRateUrl(casperApiUrl), { signal })
+  fetch(getCurrencyRateUrl(casperClarityApiUrl), { signal })
     .then(toJson)
     .catch(handleError);
 
 export const accountBalanceRequest = (
-  publicKey: string,
-  casperApiUrl: string,
+  accountHash: string,
+  casperWalletApiUrl: string,
   signal?: AbortSignal
-): Promise<GetAccountBalanceRequestResponse> => {
-  if (!publicKey) {
-    throw Error('Missing public key');
+): Promise<AccountData> => {
+  if (!accountHash) {
+    throw Error('Missing account hash');
   }
 
-  return fetch(getAccountBalanceUrl({ publicKey, casperApiUrl }), { signal })
+  return fetch(getAccountBalanceUrl({ accountHash, casperWalletApiUrl }), {
+    signal
+  })
     .then(res => {
       if (res.status === 404) {
         return {
-          data: '0'
+          data: {
+            balance: 0
+          } as AccountData
         };
       }
 
@@ -46,29 +49,34 @@ export const accountBalanceRequest = (
 };
 
 export const dispatchFetchActiveAccountBalance = (
-  publicKey = ''
+  accountHash = ''
 ): Promise<Payload<FetchBalanceResponse>> =>
-  dispatchToMainStore(serviceMessage.fetchBalanceRequest({ publicKey }));
+  dispatchToMainStore(serviceMessage.fetchBalanceRequest({ accountHash }));
 
 export const fetchAccountBalance = ({
-  publicKey,
-  casperApiUrl
+  accountHash,
+  casperWalletApiUrl
 }: {
-  publicKey: string;
-  casperApiUrl: string;
-}) =>
+  accountHash: string;
+  casperWalletApiUrl: string;
+}): Promise<DataResponse<AccountData>> =>
   queryClient.fetchQuery(
-    ['getAccountBalanceRequest', publicKey, casperApiUrl],
-    ({ signal }) => accountBalanceRequest(publicKey, casperApiUrl, signal),
+    ['getAccountBalanceRequest', accountHash, casperWalletApiUrl],
+    ({ signal }) =>
+      accountBalanceRequest(accountHash, casperWalletApiUrl, signal),
     {
       staleTime: BALANCE_REFRESH_RATE
     }
   );
 
-export const fetchCurrencyRate = ({ casperApiUrl }: { casperApiUrl: string }) =>
+export const fetchCurrencyRate = ({
+  casperClarityApiUrl
+}: {
+  casperClarityApiUrl: string;
+}) =>
   queryClient.fetchQuery(
     'getCurrencyRateRequest',
-    ({ signal }) => currencyRateRequest(casperApiUrl, signal),
+    ({ signal }) => currencyRateRequest(casperClarityApiUrl, signal),
     {
       staleTime: CURRENCY_REFRESH_RATE
     }
diff --git a/src/libs/services/balance-service/constants.ts b/src/libs/services/balance-service/constants.ts
index 95aba5910..9cfd61a53 100644
--- a/src/libs/services/balance-service/constants.ts
+++ b/src/libs/services/balance-service/constants.ts
@@ -1,13 +1,13 @@
 interface GetAccountBalanceUrl {
-  publicKey: string;
-  casperApiUrl: string;
+  accountHash: string;
+  casperWalletApiUrl: string;
 }
 
-export const getCurrencyRateUrl = (casperApiUrl: string) =>
-  `${casperApiUrl}/rates/1/amount`;
+export const getCurrencyRateUrl = (casperClarityApiUrl: string) =>
+  `${casperClarityApiUrl}/rates/1/amount`;
 
 export const getAccountBalanceUrl = ({
-  publicKey,
-  casperApiUrl
-}: GetAccountBalanceUrl): string =>
-  `${casperApiUrl}/accounts/${publicKey}/balance`;
+  accountHash,
+  casperWalletApiUrl
+}: GetAccountBalanceUrl) =>
+  `${casperWalletApiUrl}/accounts/${accountHash}?includes=delegated_balance,undelegating_balance`;
diff --git a/src/libs/services/balance-service/types.ts b/src/libs/services/balance-service/types.ts
index a2807fd35..867c1a87e 100644
--- a/src/libs/services/balance-service/types.ts
+++ b/src/libs/services/balance-service/types.ts
@@ -1,17 +1,25 @@
-export interface GetAccountBalanceRequestResponse {
-  data: string;
-}
-
 export interface GetCurrencyRateRequestResponse {
   data: number;
 }
 
-export interface ActiveAccountBalance {
-  amountMotes: string | null;
-  amountFiat: string | null;
+export interface AccountData {
+  account_hash: string;
+  balance: number;
+  delegated_balance?: number;
+  main_purse_uref: string;
+  public_key: string;
+  undelegating_balance?: number;
 }
 
 export interface FetchBalanceResponse {
-  balance: string | null;
   currencyRate: number | null;
+  accountData: AccountData | null;
+}
+
+export interface AccountBalance {
+  liquidMotes: string | null;
+  delegatedMotes: string | null;
+  undelegatingMotes: string | null;
+  totalBalanceMotes: string | null;
+  totalBalanceFiat: string | null;
 }
diff --git a/src/libs/services/deployer-service/index.ts b/src/libs/services/deployer-service/index.ts
index 5e7f648fe..bef4c71fe 100644
--- a/src/libs/services/deployer-service/index.ts
+++ b/src/libs/services/deployer-service/index.ts
@@ -1,16 +1,17 @@
 import {
-  CasperServiceByJsonRPC,
   CLPublicKey,
   CLValueBuilder,
-  decodeBase16,
+  CasperServiceByJsonRPC,
   DeployUtil,
-  RuntimeArgs
+  RuntimeArgs,
+  decodeBase16
 } from 'casper-js-sdk';
 import { sub } from 'date-fns';
 
+import { AuctionManagerEntryPoint, STAKE_COST_MOTES } from '@src/constants';
+
 import { signDeploy } from '@libs/crypto';
 import { getRawPublicKey } from '@libs/entities/Account';
-import { AuctionManagerEntryPoint, STAKE_COST_MOTES } from '@src/constants';
 
 import { RPCResponse } from './types';
 
diff --git a/src/libs/services/erc20-service/constants.ts b/src/libs/services/erc20-service/constants.ts
index 44b5ee417..dfc5d1132 100644
--- a/src/libs/services/erc20-service/constants.ts
+++ b/src/libs/services/erc20-service/constants.ts
@@ -1,7 +1,10 @@
-export const getErc20TokensUrl = (casperApiUrl: string, accountHash: string) =>
-  `${casperApiUrl}/accounts/${accountHash}/erc20-tokens?fields=latest_contract,contract_package`;
+export const getErc20TokensUrl = (
+  casperClarityApiUrl: string,
+  accountHash: string
+) =>
+  `${casperClarityApiUrl}/accounts/${accountHash}/erc20-tokens?fields=latest_contract,contract_package`;
 
 export const getContractPackageUrl = (
-  casperApiUrl: string,
+  casperClarityApiUrl: string,
   contractPackageHash: string
-) => `${casperApiUrl}/contract-packages/${contractPackageHash}`;
+) => `${casperClarityApiUrl}/contract-packages/${contractPackageHash}`;
diff --git a/src/libs/services/erc20-service/erc20-service.ts b/src/libs/services/erc20-service/erc20-service.ts
index 8bafb6674..d0e36fe57 100644
--- a/src/libs/services/erc20-service/erc20-service.ts
+++ b/src/libs/services/erc20-service/erc20-service.ts
@@ -1,59 +1,64 @@
-import { handleError, toJson } from '@libs/services/utils';
-import { queryClient } from '@libs/services/query-client';
 import { TOKENS_REFRESH_RATE } from '@src/constants';
+
 import { dispatchToMainStore } from '@background/redux/utils';
 import { serviceMessage } from '@background/service-message';
+
+import { queryClient } from '@libs/services/query-client';
 import { DataResponse, Payload } from '@libs/services/types';
+import { handleError, toJson } from '@libs/services/utils';
 
+import { getContractPackageUrl, getErc20TokensUrl } from './constants';
 import {
   ContractPackage,
   ContractPackageWithBalance,
   Erc20Token
 } from './types';
-import { getContractPackageUrl, getErc20TokensUrl } from './constants';
 
 export const erc20TokensRequest = (
-  casperApiUrl: string,
+  casperClarityApiUrl: string,
   accountHash: string,
   signal?: AbortSignal
 ): Promise<DataResponse<Erc20Token[]>> =>
-  fetch(getErc20TokensUrl(casperApiUrl, accountHash), { signal })
+  fetch(getErc20TokensUrl(casperClarityApiUrl, accountHash), { signal })
     .then(toJson)
     .catch(handleError);
 
 export const fetchErc20Tokens = ({
-  casperApiUrl,
+  casperClarityApiUrl,
   accountHash
 }: {
-  casperApiUrl: string;
+  casperClarityApiUrl: string;
   accountHash: string;
 }) =>
   queryClient.fetchQuery(
-    ['getErc20Tokens', accountHash, casperApiUrl],
-    ({ signal }) => erc20TokensRequest(casperApiUrl, accountHash, signal),
+    ['getErc20Tokens', accountHash, casperClarityApiUrl],
+    ({ signal }) =>
+      erc20TokensRequest(casperClarityApiUrl, accountHash, signal),
     { staleTime: TOKENS_REFRESH_RATE }
   );
 
 export const contractPackageRequest = (
-  casperApiUrl: string,
+  casperClarityApiUrl: string,
   contractPackageHash: string,
   signal?: AbortSignal
 ): Promise<ContractPackage> =>
-  fetch(getContractPackageUrl(casperApiUrl, contractPackageHash), { signal })
+  fetch(getContractPackageUrl(casperClarityApiUrl, contractPackageHash), {
+    signal
+  })
     .then(toJson)
     .catch(handleError);
 
 export const fetchContractPackage = ({
-  casperApiUrl,
+  casperClarityApiUrl,
   contractPackageHash
 }: {
-  casperApiUrl: string;
+  casperClarityApiUrl: string;
   contractPackageHash: string;
 }) =>
   queryClient.fetchQuery(
-    ['contractPackageRequest', casperApiUrl, contractPackageHash],
+    ['contractPackageRequest', casperClarityApiUrl, contractPackageHash],
     ({ signal }) =>
-      contractPackageRequest(casperApiUrl, contractPackageHash, signal),
+      contractPackageRequest(casperClarityApiUrl, contractPackageHash, signal),
     { staleTime: TOKENS_REFRESH_RATE }
   );
 
diff --git a/src/libs/services/nft-service/constants.ts b/src/libs/services/nft-service/constants.ts
index 935d6cfe3..33f9f357f 100644
--- a/src/libs/services/nft-service/constants.ts
+++ b/src/libs/services/nft-service/constants.ts
@@ -1,6 +1,6 @@
 export const getNftTokensUrl = (
-  casperApiUrl: string,
+  casperClarityApiUrl: string,
   accountHash: string,
   page: number
 ) =>
-  `${casperApiUrl}/accounts/${accountHash}/nft-tokens?page=${page}&limit=10&fields=contract_package`;
+  `${casperClarityApiUrl}/accounts/${accountHash}/nft-tokens?page=${page}&limit=10&fields=contract_package`;
diff --git a/src/libs/services/nft-service/nft-service.ts b/src/libs/services/nft-service/nft-service.ts
index 588a78ccf..ed09523ee 100644
--- a/src/libs/services/nft-service/nft-service.ts
+++ b/src/libs/services/nft-service/nft-service.ts
@@ -1,38 +1,41 @@
+import { NFT_TOKENS_REFRESH_RATE } from '@src/constants';
+
+import { dispatchToMainStore } from '@background/redux/utils';
+import { serviceMessage } from '@background/service-message';
+
 import { getNftTokensUrl } from '@libs/services/nft-service/constants';
-import { handleError, toJson } from '@libs/services/utils';
+import { NFTTokenResult } from '@libs/services/nft-service/types';
+import { queryClient } from '@libs/services/query-client';
 import {
-  Payload,
   ErrorResponse,
-  PaginatedResponse
+  PaginatedResponse,
+  Payload
 } from '@libs/services/types';
-import { NFTTokenResult } from '@libs/services/nft-service/types';
-import { queryClient } from '@libs/services/query-client';
-import { NFT_TOKENS_REFRESH_RATE } from '@src/constants';
-import { dispatchToMainStore } from '@background/redux/utils';
-import { serviceMessage } from '@background/service-message';
+import { handleError, toJson } from '@libs/services/utils';
 
 export const nftTokensRequest = (
-  casperApiUrl: string,
+  casperClarityApiUrl: string,
   accountHash: string,
   page: number,
   signal?: AbortSignal
 ): Promise<PaginatedResponse<NFTTokenResult>> =>
-  fetch(getNftTokensUrl(casperApiUrl, accountHash, page), { signal })
+  fetch(getNftTokensUrl(casperClarityApiUrl, accountHash, page), { signal })
     .then(toJson)
     .catch(handleError);
 
 export const fetchNftTokens = ({
-  casperApiUrl,
+  casperClarityApiUrl,
   accountHash,
   page
 }: {
-  casperApiUrl: string;
+  casperClarityApiUrl: string;
   accountHash: string;
   page: number;
 }): Promise<PaginatedResponse<NFTTokenResult> | ErrorResponse> =>
   queryClient.fetchQuery(
-    ['getNftTokens', accountHash, casperApiUrl, page],
-    ({ signal }) => nftTokensRequest(casperApiUrl, accountHash, page, signal),
+    ['getNftTokens', accountHash, casperClarityApiUrl, page],
+    ({ signal }) =>
+      nftTokensRequest(casperClarityApiUrl, accountHash, page, signal),
     { staleTime: NFT_TOKENS_REFRESH_RATE }
   );
 
diff --git a/src/libs/services/nft-service/types.ts b/src/libs/services/nft-service/types.ts
index 54890bd06..fa221edc5 100644
--- a/src/libs/services/nft-service/types.ts
+++ b/src/libs/services/nft-service/types.ts
@@ -1,4 +1,4 @@
-import { ExtendedDeployContractPackageResult } from '@libs/services/account-activity-service';
+import { ExtendedDeployContractPackageResult } from '../account-activity-service/types';
 
 export interface NFTTokenMetadataEntry {
   key: string;
diff --git a/src/libs/services/validators-service/constants.ts b/src/libs/services/validators-service/constants.ts
index 9a2b4e886..614a0d2bd 100644
--- a/src/libs/services/validators-service/constants.ts
+++ b/src/libs/services/validators-service/constants.ts
@@ -1,9 +1,9 @@
-export const getAuctionValidatorsUrl = (casperApiUrl: string) =>
-  `${casperApiUrl}/auction-validators?page=1&limit=-1&fields=account_info,average_performance&is_active=true`;
+export const getAuctionValidatorsUrl = (casperClarityApiUrl: string) =>
+  `${casperClarityApiUrl}/auction-validators?page=1&limit=-1&fields=account_info,average_performance&is_active=true`;
 
 export const getValidatorsDetailsDataUrl = (
-  casperApiUrl: string,
+  casperClarityApiUrl: string,
   publicKey: string
 ) => `
-  ${casperApiUrl}/accounts/${publicKey}/delegations?page=1&limit=100&fields=validator,validator_account_info
+  ${casperClarityApiUrl}/accounts/${publicKey}/delegations?page=1&limit=100&fields=validator,validator_account_info
 `;
diff --git a/src/libs/services/validators-service/validators-service.ts b/src/libs/services/validators-service/validators-service.ts
index 9ab6ee779..3de2d9fb0 100644
--- a/src/libs/services/validators-service/validators-service.ts
+++ b/src/libs/services/validators-service/validators-service.ts
@@ -1,63 +1,65 @@
-import {
-  getAuctionValidatorsUrl,
-  getValidatorsDetailsDataUrl
-} from '@libs/services/validators-service/constants';
-import { handleError, toJson } from '@libs/services/utils';
-import { queryClient } from '@libs/services/query-client';
+import { VALIDATORS_REFRESH_RATE } from '@src/constants';
+
 import { dispatchToMainStore } from '@background/redux/utils';
+import { serviceMessage } from '@background/service-message';
+
+import { queryClient } from '@libs/services/query-client';
 import {
   ErrorResponse,
   PaginatedResponse,
   Payload
 } from '@libs/services/types';
+import { handleError, toJson } from '@libs/services/utils';
+import {
+  getAuctionValidatorsUrl,
+  getValidatorsDetailsDataUrl
+} from '@libs/services/validators-service/constants';
 import {
   DelegatorResult,
   ValidatorResult
 } from '@libs/services/validators-service/types';
-import { serviceMessage } from '@background/service-message';
-import { VALIDATORS_REFRESH_RATE } from '@src/constants';
 
 export const auctionValidatorsRequest = (
-  casperApiUrl: string,
+  casperClarityApiUrl: string,
   signal?: AbortSignal
 ) =>
-  fetch(getAuctionValidatorsUrl(casperApiUrl), { signal })
+  fetch(getAuctionValidatorsUrl(casperClarityApiUrl), { signal })
     .then(toJson)
     .catch(handleError);
 
 export const validatorsDetailsDataRequest = (
-  casperApiUrl: string,
+  casperClarityApiUrl: string,
   publicKey: string,
   signal?: AbortSignal
 ) =>
-  fetch(getValidatorsDetailsDataUrl(casperApiUrl, publicKey), { signal })
+  fetch(getValidatorsDetailsDataUrl(casperClarityApiUrl, publicKey), { signal })
     .then(toJson)
     .catch(handleError);
 
 export const fetchAuctionValidators = ({
-  casperApiUrl
+  casperClarityApiUrl
 }: {
-  casperApiUrl: string;
+  casperClarityApiUrl: string;
 }): Promise<PaginatedResponse<ValidatorResult> | ErrorResponse> =>
   queryClient.fetchQuery(
-    ['getAuctionValidators', casperApiUrl],
-    ({ signal }) => auctionValidatorsRequest(casperApiUrl, signal),
+    ['getAuctionValidators', casperClarityApiUrl],
+    ({ signal }) => auctionValidatorsRequest(casperClarityApiUrl, signal),
     {
       staleTime: VALIDATORS_REFRESH_RATE
     }
   );
 
 export const fetchValidatorsDetailsData = ({
-  casperApiUrl,
+  casperClarityApiUrl,
   publicKey
 }: {
-  casperApiUrl: string;
+  casperClarityApiUrl: string;
   publicKey: string;
 }): Promise<PaginatedResponse<DelegatorResult> | ErrorResponse> =>
   queryClient.fetchQuery(
-    ['getDelegations', casperApiUrl, publicKey],
+    ['getDelegations', casperClarityApiUrl, publicKey],
     ({ signal }) =>
-      validatorsDetailsDataRequest(casperApiUrl, publicKey, signal),
+      validatorsDetailsDataRequest(casperClarityApiUrl, publicKey, signal),
     {
       staleTime: VALIDATORS_REFRESH_RATE
     }
diff --git a/src/libs/types/account.ts b/src/libs/types/account.ts
new file mode 100644
index 000000000..d96d1366a
--- /dev/null
+++ b/src/libs/types/account.ts
@@ -0,0 +1,12 @@
+export interface KeyPair {
+  secretKey: string;
+  publicKey: string;
+}
+export interface Account extends KeyPair {
+  name: string;
+  imported?: boolean;
+}
+
+export interface AccountListRows extends Account {
+  id: string;
+}
diff --git a/src/libs/ui/components/accordion/accordion.tsx b/src/libs/ui/components/accordion/accordion.tsx
index 2d5a81ae7..870a426db 100644
--- a/src/libs/ui/components/accordion/accordion.tsx
+++ b/src/libs/ui/components/accordion/accordion.tsx
@@ -1,8 +1,9 @@
 import React, { useState } from 'react';
 import styled from 'styled-components';
 
-import { BaseProps } from '../../types';
-import { useClickAway } from '../../hooks/use-click-away';
+import { useClickAway } from '@hooks/use-click-away';
+
+import { BaseProps } from '@libs/ui/types';
 
 export interface AccordionProps extends BaseProps {
   children: (renderProps: RenderProps) => React.ReactNode | string;
@@ -16,7 +17,7 @@ interface RenderProps {
 
 const AccordionContainer = styled.div<{
   isOpen: boolean;
-}>(({ isOpen }) => ({
+}>(() => ({
   display: 'flex',
   flexDirection: 'column',
 
diff --git a/src/libs/ui/components/account-activity-plate/account-activity-plate.tsx b/src/libs/ui/components/account-activity-plate/account-activity-plate.tsx
index a22f632e3..64ad99ede 100644
--- a/src/libs/ui/components/account-activity-plate/account-activity-plate.tsx
+++ b/src/libs/ui/components/account-activity-plate/account-activity-plate.tsx
@@ -1,8 +1,23 @@
 import React, { forwardRef, useEffect, useState } from 'react';
-import { useSelector } from 'react-redux';
 import { Trans, useTranslation } from 'react-i18next';
+import { useSelector } from 'react-redux';
 import styled from 'styled-components';
 
+import {
+  ActivityShortTypeName,
+  ActivityType,
+  ActivityTypeColors,
+  ActivityTypeIcons,
+  ActivityTypeName,
+  AuctionManagerEntryPoint,
+  TokenEntryPoint
+} from '@src/constants';
+
+import { RouterPath, useTypedNavigate } from '@popup/router';
+
+import { selectVaultActiveAccount } from '@background/redux/vault/selectors';
+
+import { getAccountHashFromPublicKey } from '@libs/entities/Account';
 import {
   AccountActivityPlateContainer,
   ActivityPlateContentContainer,
@@ -14,14 +29,21 @@ import {
   SpacingSize
 } from '@libs/layout';
 import {
-  ContentColor,
+  Erc20TransferWithId,
+  ExtendedDeployWithId
+} from '@libs/services/account-activity-service';
+import {
   DeployStatus,
   Hash,
   HashVariant,
   SvgIcon,
   Tooltip,
   Typography
-} from '@libs/ui';
+} from '@libs/ui/components';
+import {
+  ContentColor,
+  getRecipientAddressFromTransaction
+} from '@libs/ui/utils';
 import {
   divideErc20Balance,
   formatNumber,
@@ -29,23 +51,6 @@ import {
   formatTimestampAge,
   motesToCSPR
 } from '@libs/ui/utils/formatters';
-import { selectVaultActiveAccount } from '@background/redux/vault/selectors';
-import {
-  Erc20TransferWithId,
-  ExtendedDeployWithId
-} from '@libs/services/account-activity-service';
-import { RouterPath, useTypedNavigate } from '@popup/router';
-import {
-  ActivityShortTypeName,
-  ActivityType,
-  ActivityTypeColors,
-  ActivityTypeIcons,
-  ActivityTypeName,
-  AuctionManagerEntryPoint,
-  TokenEntryPoint
-} from '@src/constants';
-import { getAccountHashFromPublicKey } from '@libs/entities/Account';
-import { getRecipientAddressFromTransaction } from '@libs/ui/utils/utils';
 
 const SymbolContainer = styled(RightAlignedCenteredFlexRow)`
   max-width: 80px;
@@ -157,6 +162,17 @@ export const AccountActivityPlate = forwardRef<Ref, AccountActivityPlateProps>(
             setToAccount(undefined);
             return;
           }
+          case TokenEntryPoint.transfer: {
+            if (
+              transactionInfo?.args?.token_ids ||
+              transactionInfo?.args?.token_id
+            ) {
+              setType(ActivityType.TransferNft);
+              setFromAccount(transactionInfo.callerPublicKey);
+              setToAccount(recipientAddress);
+              return;
+            }
+          }
         }
       }
 
@@ -224,9 +240,7 @@ export const AccountActivityPlate = forwardRef<Ref, AccountActivityPlateProps>(
               <DeployStatus deployResult={transactionInfo} />
             </AlignedFlexRow>
             <Typography type="captionHash">
-              {formattedAmount === '-' ? (
-                formattedAmount
-              ) : (
+              {formattedAmount === '-' ? null : (
                 <>
                   {type === ActivityType.Sent || type === ActivityType.Delegated
                     ? '-'
diff --git a/src/libs/ui/components/account-casper-activity-plate/account-casper-activity-plate.tsx b/src/libs/ui/components/account-casper-activity-plate/account-casper-activity-plate.tsx
index eccb9a2a6..f15f87b27 100644
--- a/src/libs/ui/components/account-casper-activity-plate/account-casper-activity-plate.tsx
+++ b/src/libs/ui/components/account-casper-activity-plate/account-casper-activity-plate.tsx
@@ -2,40 +2,43 @@ import React, { forwardRef, useEffect, useState } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 import { useSelector } from 'react-redux';
 
+import {
+  ActivityShortTypeName,
+  ActivityType,
+  ActivityTypeColors,
+  ActivityTypeIcons,
+  ActivityTypeName
+} from '@src/constants';
+
 import { RouterPath, useTypedNavigate } from '@popup/router';
+
+import { selectVaultActiveAccount } from '@background/redux/vault/selectors';
+
+import { getAccountHashFromPublicKey } from '@libs/entities/Account';
+import {
+  AccountActivityPlateContainer,
+  ActivityPlateContentContainer,
+  ActivityPlateDivider,
+  ActivityPlateIconCircleContainer,
+  AlignedFlexRow,
+  AlignedSpaceBetweenFlexRow,
+  SpacingSize
+} from '@libs/layout';
+import { TransferResultWithId } from '@libs/services/account-activity-service';
 import {
-  ContentColor,
   Hash,
   HashVariant,
   SvgIcon,
   Tooltip,
   Typography
-} from '@libs/ui';
-import { selectVaultActiveAccount } from '@background/redux/vault/selectors';
+} from '@libs/ui/components';
 import {
+  ContentColor,
   formatNumber,
   formatTimestamp,
   formatTimestampAge,
   motesToCSPR
-} from '@libs/ui/utils/formatters';
-import {
-  AlignedFlexRow,
-  AlignedSpaceBetweenFlexRow,
-  AccountActivityPlateContainer,
-  ActivityPlateDivider,
-  ActivityPlateContentContainer,
-  ActivityPlateIconCircleContainer,
-  SpacingSize
-} from '@libs/layout';
-import {
-  ActivityShortTypeName,
-  ActivityType,
-  ActivityTypeColors,
-  ActivityTypeIcons,
-  ActivityTypeName
-} from '@src/constants';
-import { TransferResultWithId } from '@libs/services/account-activity-service';
-import { getAccountHashFromPublicKey } from '@libs/entities/Account';
+} from '@libs/ui/utils';
 
 type Ref = HTMLDivElement;
 
diff --git a/src/libs/ui/components/account-list/account-list.tsx b/src/libs/ui/components/account-list/account-list.tsx
index 46c18224b..db7dbc823 100644
--- a/src/libs/ui/components/account-list/account-list.tsx
+++ b/src/libs/ui/components/account-list/account-list.tsx
@@ -1,24 +1,29 @@
 import React, { useEffect, useState } from 'react';
+import { Trans, useTranslation } from 'react-i18next';
 import { useSelector } from 'react-redux';
 import styled from 'styled-components';
-import { Trans, useTranslation } from 'react-i18next';
 
-import {
-  AlignedFlexRow,
-  CenteredFlexRow,
-  FlexColumn,
-  LeftAlignedFlexColumn,
-  SpacingSize
-} from '@libs/layout';
-import { AccountListRows } from '@background/redux/vault/types';
 import { useAccountManager } from '@popup/hooks/use-account-actions-with-events';
+import { RouterPath, useTypedNavigate } from '@popup/router';
+
+import { WindowApp } from '@background/create-open-window';
 import {
   selectConnectedAccountNamesWithActiveOrigin,
   selectVaultAccounts,
   selectVaultActiveAccountName
 } from '@background/redux/vault/selectors';
-import { sortAccounts } from '@libs/ui/components/account-list/utils';
+
+import { useWindowManager } from '@hooks/use-window-manager';
+
 import { getAccountHashFromPublicKey } from '@libs/entities/Account';
+import {
+  AlignedFlexRow,
+  CenteredFlexRow,
+  FlexColumn,
+  LeftAlignedFlexColumn,
+  SpacingSize
+} from '@libs/layout';
+import { AccountListRows } from '@libs/types/account';
 import {
   AccountActionsMenuPopover,
   Avatar,
@@ -27,10 +32,8 @@ import {
   HashVariant,
   List,
   Typography
-} from '@libs/ui';
-import { RouterPath, useTypedNavigate } from '@popup/router';
-import { WindowApp } from '@background/create-open-window';
-import { useWindowManager } from '@src/hooks';
+} from '@libs/ui/components';
+import { sortAccounts } from '@libs/ui/components/account-list/utils';
 
 const ListItemContainer = styled(FlexColumn)`
   min-height: 68px;
diff --git a/src/libs/ui/components/account-list/utils.ts b/src/libs/ui/components/account-list/utils.ts
index fa676f3fc..7b777e8fb 100644
--- a/src/libs/ui/components/account-list/utils.ts
+++ b/src/libs/ui/components/account-list/utils.ts
@@ -1,4 +1,4 @@
-import { Account } from '@background/redux/vault/types';
+import { Account } from '@libs/types/account';
 
 export function sortAccounts(
   accounts: Account[],
diff --git a/src/libs/ui/components/account-popover/account-popover.tsx b/src/libs/ui/components/account-popover/account-popover.tsx
index d8cc3182e..27f17b3e4 100644
--- a/src/libs/ui/components/account-popover/account-popover.tsx
+++ b/src/libs/ui/components/account-popover/account-popover.tsx
@@ -1,19 +1,22 @@
 import React from 'react';
-import { useSelector } from 'react-redux';
 import { Trans, useTranslation } from 'react-i18next';
+import { useSelector } from 'react-redux';
 
-import { PopoverLink, SvgIcon, Typography } from '@libs/ui';
-import { RouterPath, useTypedNavigate } from '@popup/router';
 import { getBlockExplorerAccountUrl } from '@src/constants';
-import { Popover } from '@libs/ui/components/popover/popover';
+
+import { useAccountManager } from '@popup/hooks/use-account-actions-with-events';
+import { RouterPath, useTypedNavigate } from '@popup/router';
+
+import { selectActiveOrigin } from '@background/redux/active-origin/selectors';
+import { selectApiConfigBasedOnActiveNetwork } from '@background/redux/settings/selectors';
 import {
   selectConnectedAccountNamesWithActiveOrigin,
   selectIsAnyAccountConnectedWithActiveOrigin
 } from '@background/redux/vault/selectors';
-import { selectActiveOrigin } from '@background/redux/active-origin/selectors';
-import { useAccountManager } from '@popup/hooks/use-account-actions-with-events';
-import { selectApiConfigBasedOnActiveNetwork } from '@background/redux/settings/selectors';
-import { Account } from '@background/redux/vault/types';
+
+import { Account } from '@libs/types/account';
+import { PopoverLink, SvgIcon, Typography } from '@libs/ui/components';
+import { Popover } from '@libs/ui/components/popover/popover';
 
 interface AccountActionsMenuPopoverProps {
   account: Account;
diff --git a/src/libs/ui/components/active-account-plate/active-account-plate.tsx b/src/libs/ui/components/active-account-plate/active-account-plate.tsx
index 1b6ae6c22..826b331c2 100644
--- a/src/libs/ui/components/active-account-plate/active-account-plate.tsx
+++ b/src/libs/ui/components/active-account-plate/active-account-plate.tsx
@@ -1,8 +1,10 @@
 import React from 'react';
-import { useSelector } from 'react-redux';
 import { Trans, useTranslation } from 'react-i18next';
+import { useSelector } from 'react-redux';
 import styled from 'styled-components';
 
+import { selectVaultActiveAccount } from '@background/redux/vault/selectors';
+
 import {
   AlignedFlexRow,
   ParagraphContainer,
@@ -11,8 +13,13 @@ import {
   SpacingSize,
   TileContainer
 } from '@libs/layout';
-import { Avatar, Hash, HashVariant, Tile, Typography } from '@libs/ui';
-import { selectVaultActiveAccount } from '@background/redux/vault/selectors';
+import {
+  Avatar,
+  Hash,
+  HashVariant,
+  Tile,
+  Typography
+} from '@libs/ui/components';
 
 export const AmountContainer = styled(SpaceBetweenFlexColumn)`
   align-items: flex-end;
diff --git a/src/libs/ui/components/avatar/avatar.tsx b/src/libs/ui/components/avatar/avatar.tsx
index 1b9abce67..b4d883b15 100644
--- a/src/libs/ui/components/avatar/avatar.tsx
+++ b/src/libs/ui/components/avatar/avatar.tsx
@@ -1,19 +1,22 @@
-import Identicon from 'react-identicons';
 import React from 'react';
-import styled, { DefaultTheme, useTheme } from 'styled-components';
+import Identicon from 'react-identicons';
 import { useSelector } from 'react-redux';
+import styled, { DefaultTheme, useTheme } from 'styled-components';
 
-import {
-  SpacingSize,
-  AvatarContainer,
-  AlignedFlexRow,
-  CenteredFlexRow
-} from '@libs/layout';
 import { isValidAccountHash, isValidPublicKey } from '@src/utils';
-import { SvgIcon } from '@libs/ui';
+
 import { selectThemeModeSetting } from '@background/redux/settings/selectors';
 import { ThemeMode } from '@background/redux/settings/types';
-import { useSystemThemeDetector } from '@src/hooks';
+
+import { useSystemThemeDetector } from '@hooks/use-system-theme-detector';
+
+import {
+  AlignedFlexRow,
+  AvatarContainer,
+  CenteredFlexRow,
+  SpacingSize
+} from '@libs/layout';
+import { SvgIcon } from '@libs/ui/components';
 
 const RoundedIdenticon = styled(Identicon)(
   ({
diff --git a/src/libs/ui/components/button/button.tsx b/src/libs/ui/components/button/button.tsx
index cec9df596..d851c424a 100644
--- a/src/libs/ui/components/button/button.tsx
+++ b/src/libs/ui/components/button/button.tsx
@@ -1,7 +1,8 @@
-import React from 'react';
+import React, { forwardRef } from 'react';
 import styled from 'styled-components';
 
-import { BaseProps, getLinearGradientColor } from '@src/libs/ui';
+import { BaseProps } from '@libs/ui/types';
+import { getLinearGradientColor } from '@libs/ui/utils/get-linear-gradient-color';
 
 interface BaseButtonProps extends BaseProps {
   type?: 'button' | 'submit' | 'reset';
@@ -18,7 +19,6 @@ const BaseButton = styled.button<BaseButtonProps>(
   ({
     theme,
     disabled,
-    height = '40',
     inline = false,
     minWidth,
     flexWidth = false,
@@ -177,7 +177,7 @@ export interface ButtonProps extends BaseButtonProps {
 
 type Ref = HTMLButtonElement;
 
-export const Button = React.forwardRef<Ref, ButtonProps>(function Button(
+export const Button = forwardRef<Ref, ButtonProps>(function Button(
   {
     color = 'primaryBlue',
     inline = false,
diff --git a/src/libs/ui/components/casper-token-activity-list/casper-token-activity-list.tsx b/src/libs/ui/components/casper-token-activity-list/casper-token-activity-list.tsx
index ac2d7a671..72d0e34b1 100644
--- a/src/libs/ui/components/casper-token-activity-list/casper-token-activity-list.tsx
+++ b/src/libs/ui/components/casper-token-activity-list/casper-token-activity-list.tsx
@@ -1,16 +1,18 @@
 import React, { useEffect } from 'react';
-import { useSelector } from 'react-redux';
 import useInfiniteScroll from 'react-infinite-scroll-hook';
+import { useSelector } from 'react-redux';
 
 import { selectAccountCasperActivity } from '@background/redux/account-info/selectors';
-import { useFetchCasperTokenAccountActivity } from '@src/hooks';
+
+import { useFetchCasperTokenAccountActivity } from '@hooks/use-fetch-casper-token-account-activity';
+
+import { SpacingSize } from '@libs/layout';
 import {
   AccountCasperActivityPlate,
   List,
   LoadingActivityView,
   NoActivityView
-} from '@libs/ui';
-import { SpacingSize } from '@libs/layout';
+} from '@libs/ui/components';
 
 export const CasperTokenActivityList = () => {
   const accountCasperActivityList = useSelector(selectAccountCasperActivity);
diff --git a/src/libs/ui/components/checkbox/checkbox.tsx b/src/libs/ui/components/checkbox/checkbox.tsx
index 962074427..2d4c1e765 100644
--- a/src/libs/ui/components/checkbox/checkbox.tsx
+++ b/src/libs/ui/components/checkbox/checkbox.tsx
@@ -1,7 +1,8 @@
 import React from 'react';
 import styled from 'styled-components';
 
-import { Typography, SvgIcon, BaseProps } from '@src/libs/ui';
+import { SvgIcon, Typography } from '@libs/ui/components';
+import { BaseProps } from '@libs/ui/types';
 
 import FlexRow from '../flex-row/flex-row';
 
diff --git a/src/libs/ui/components/connection-status-badge/connection-status-badge.tsx b/src/libs/ui/components/connection-status-badge/connection-status-badge.tsx
index 73fc1522d..8c1920d7a 100644
--- a/src/libs/ui/components/connection-status-badge/connection-status-badge.tsx
+++ b/src/libs/ui/components/connection-status-badge/connection-status-badge.tsx
@@ -2,8 +2,9 @@ import React from 'react';
 import { useTranslation } from 'react-i18next';
 import styled from 'styled-components';
 
-import { hexToRGBA, Typography } from '@libs/ui';
 import { AlignedFlexRow } from '@libs/layout';
+import { Typography } from '@libs/ui/components';
+import { hexToRGBA } from '@libs/ui/utils';
 
 interface ConnectionStatusBadgeProps {
   isConnected: boolean;
diff --git a/src/libs/ui/components/contacts-plate/contacts-plate.tsx b/src/libs/ui/components/contacts-plate/contacts-plate.tsx
index 3a1536222..2cd02452c 100644
--- a/src/libs/ui/components/contacts-plate/contacts-plate.tsx
+++ b/src/libs/ui/components/contacts-plate/contacts-plate.tsx
@@ -1,10 +1,11 @@
 import React from 'react';
 import styled from 'styled-components';
 
-import { AlignedFlexRow, FlexColumn, SpacingSize } from '@libs/layout';
-import { Avatar, Hash, HashVariant, Typography } from '@libs/ui';
 import { RouterPath, useTypedNavigate } from '@popup/router';
 
+import { AlignedFlexRow, FlexColumn, SpacingSize } from '@libs/layout';
+import { Avatar, Hash, HashVariant, Typography } from '@libs/ui/components';
+
 const Container = styled(AlignedFlexRow)`
   cursor: pointer;
 
diff --git a/src/libs/ui/components/contract-icon/contract-icon.tsx b/src/libs/ui/components/contract-icon/contract-icon.tsx
index aac805739..ded7351f1 100644
--- a/src/libs/ui/components/contract-icon/contract-icon.tsx
+++ b/src/libs/ui/components/contract-icon/contract-icon.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { SvgIcon } from '@libs/ui';
+import { SvgIcon } from '@libs/ui/components';
 
 export interface ContractIconProps {
   src?: string | null;
diff --git a/src/libs/ui/components/copy-to-clipboard/copy-to-clipboard.tsx b/src/libs/ui/components/copy-to-clipboard/copy-to-clipboard.tsx
index c8a76cced..4674174ee 100644
--- a/src/libs/ui/components/copy-to-clipboard/copy-to-clipboard.tsx
+++ b/src/libs/ui/components/copy-to-clipboard/copy-to-clipboard.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import styled from 'styled-components';
 
-import { useCopyToClipboard } from '@src/hooks';
+import { useCopyToClipboard } from '@hooks/use-copy-to-clipboard';
 
 const Container = styled.div`
   cursor: ${({ onClick }) => (onClick != null ? 'pointer' : 'auto')};
diff --git a/src/libs/ui/components/deploy-status/deploy-status.tsx b/src/libs/ui/components/deploy-status/deploy-status.tsx
index a95bb8208..03034bb6a 100644
--- a/src/libs/ui/components/deploy-status/deploy-status.tsx
+++ b/src/libs/ui/components/deploy-status/deploy-status.tsx
@@ -3,7 +3,8 @@ import { useTranslation } from 'react-i18next';
 import styled from 'styled-components';
 
 import { AlignedFlexRow, SpacingSize } from '@libs/layout';
-import { ContentColor, SvgIcon, Tooltip, Typography } from '@libs/ui';
+import { SvgIcon, Tooltip, Typography } from '@libs/ui/components';
+import { ContentColor } from '@libs/ui/utils';
 
 export enum Status {
   Success = 'success',
diff --git a/src/libs/ui/components/erc20-token-activity-list/erc20-token-activity-list.tsx b/src/libs/ui/components/erc20-token-activity-list/erc20-token-activity-list.tsx
index fe13e4c25..d46260f54 100644
--- a/src/libs/ui/components/erc20-token-activity-list/erc20-token-activity-list.tsx
+++ b/src/libs/ui/components/erc20-token-activity-list/erc20-token-activity-list.tsx
@@ -1,18 +1,20 @@
 import React, { useEffect } from 'react';
+import useInfiniteScroll from 'react-infinite-scroll-hook';
 import { useSelector } from 'react-redux';
 import { useParams } from 'react-router-dom';
-import useInfiniteScroll from 'react-infinite-scroll-hook';
+
+import { selectAccountErc20TokensActivity } from '@background/redux/account-info/selectors';
+
+import { useFetchErc20TokenAccountActivity } from '@hooks/use-fetch-erc20-token-account-activity';
 
 import { SpacingSize } from '@libs/layout';
+import { Erc20TransferWithId } from '@libs/services/account-activity-service';
 import {
   AccountActivityPlate,
   List,
   LoadingActivityView,
   NoActivityView
-} from '@libs/ui';
-import { useFetchErc20TokenAccountActivity } from '@src/hooks';
-import { selectAccountErc20TokensActivity } from '@background/redux/account-info/selectors';
-import { Erc20TransferWithId } from '@src/libs/services/account-activity-service';
+} from '@libs/ui/components';
 
 export const Erc20TokenActivityList = () => {
   const erc20TokensActivityRecord =
diff --git a/src/libs/ui/components/error/error.tsx b/src/libs/ui/components/error/error.tsx
index 319c0b48e..9dfde32d5 100644
--- a/src/libs/ui/components/error/error.tsx
+++ b/src/libs/ui/components/error/error.tsx
@@ -1,9 +1,9 @@
 import React from 'react';
-import styled from 'styled-components';
 import { Trans, useTranslation } from 'react-i18next';
+import styled from 'styled-components';
 
 import { AlignedFlexRow, FlexColumn, SpacingSize } from '@libs/layout';
-import { SvgIcon, Typography } from '@libs/ui';
+import { SvgIcon, Typography } from '@libs/ui/components';
 
 const ErrorContainer = styled(FlexColumn)`
   padding: 12px 16px;
diff --git a/src/libs/ui/components/flex-box/flex-box.tsx b/src/libs/ui/components/flex-box/flex-box.tsx
index 7eaed3c4b..8d671f773 100644
--- a/src/libs/ui/components/flex-box/flex-box.tsx
+++ b/src/libs/ui/components/flex-box/flex-box.tsx
@@ -1,7 +1,7 @@
-import React from 'react';
+import React, { forwardRef } from 'react';
 import styled from 'styled-components';
 
-import { BaseProps } from '../../types';
+import { BaseProps } from '@libs/ui/types';
 
 /* eslint-disable-next-line */
 export interface FlexBoxProps extends BaseProps {
@@ -51,7 +51,7 @@ const StyledFlexBox = styled('div')<FlexBoxProps>(
   })
 );
 
-export const FlexBox = React.forwardRef<HTMLDivElement, FlexBoxProps>(
+export const FlexBox = forwardRef<HTMLDivElement, FlexBoxProps>(
   (props, ref) => <StyledFlexBox ref={ref} {...props} />
 );
 
diff --git a/src/libs/ui/components/flex-row/flex-row.tsx b/src/libs/ui/components/flex-row/flex-row.tsx
index 03604ae03..a92643e11 100644
--- a/src/libs/ui/components/flex-row/flex-row.tsx
+++ b/src/libs/ui/components/flex-row/flex-row.tsx
@@ -1,11 +1,10 @@
-import React from 'react';
+import React, { forwardRef } from 'react';
 
 import FlexBox, { FlexBoxProps } from '../flex-box/flex-box';
 
-/* eslint-disable-next-line */
 export interface FlexRowProps extends FlexBoxProps {}
 
-export const FlexRow = React.forwardRef<HTMLDivElement, FlexRowProps>(
+export const FlexRow = forwardRef<HTMLDivElement, FlexRowProps>(
   (props, ref) => <FlexBox ref={ref} direction="row" {...props} />
 );
 
diff --git a/src/libs/ui/components/form-field/form-field.tsx b/src/libs/ui/components/form-field/form-field.tsx
index 05f836930..dd488da31 100644
--- a/src/libs/ui/components/form-field/form-field.tsx
+++ b/src/libs/ui/components/form-field/form-field.tsx
@@ -1,7 +1,9 @@
 import React from 'react';
 import styled from 'styled-components';
-import { Typography, BaseProps } from '@src/libs/ui';
+
 import { FlexColumn } from '@libs/layout';
+import { Typography } from '@libs/ui/components';
+import { BaseProps } from '@libs/ui/types';
 
 export enum FormFieldStatus {
   Error = 'error',
@@ -55,7 +57,11 @@ export function FormField({
     <FlexColumn {...restProps}>
       <LabelContainer>
         {label && <Typography type="bodySemiBold">{label}</Typography>}
-        {rightLabel && <Typography type="body">{rightLabel}</Typography>}
+        {rightLabel && (
+          <Typography type="captionRegular" color="contentSecondary">
+            {rightLabel}
+          </Typography>
+        )}
       </LabelContainer>
 
       {children}
diff --git a/src/libs/ui/components/hash/hash.tsx b/src/libs/ui/components/hash/hash.tsx
index 8e16b5011..1b5899f19 100644
--- a/src/libs/ui/components/hash/hash.tsx
+++ b/src/libs/ui/components/hash/hash.tsx
@@ -2,17 +2,17 @@ import React, { useMemo } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 import styled from 'styled-components';
 
+import { CenteredFlexRow } from '@libs/layout';
 import {
-  ContentColor,
   CopyToClipboard,
-  Typography,
+  Placement,
   Tag,
   Tooltip,
-  Placement
-} from '@libs/ui';
-import { CenteredFlexRow } from '@libs/layout';
+  Typography
+} from '@libs/ui/components';
+import { ContentColor } from '@libs/ui/utils';
 
-import { truncateKey, TruncateKeySize } from './utils';
+import { TruncateKeySize, truncateKey } from './utils';
 
 export enum HashVariant {
   CaptionHash = 'captionHash',
diff --git a/src/libs/ui/components/index.ts b/src/libs/ui/components/index.ts
new file mode 100644
index 000000000..b3f95dfbb
--- /dev/null
+++ b/src/libs/ui/components/index.ts
@@ -0,0 +1,51 @@
+export * from './button/button';
+export * from './form/form';
+export * from './form-field/form-field';
+export * from './input/input';
+export * from './textarea/textarea';
+export * from './link/link';
+export * from './popover-link/popover-link';
+export * from './typography/typography';
+export * from './svg-icon/svg-icon';
+export * from './svg-icon/svg-icon-social';
+export * from './tag/tag';
+export * from './tile/tile';
+export * from './list/list';
+export * from './accordion/accordion';
+export * from './checkbox/checkbox';
+export * from './flex-box/flex-box';
+export * from './flex-row/flex-row';
+export * from './hash/hash';
+export * from './site-favicon-badge/site-favicon-badge';
+export * from './password-visibility-icon/password-visibility-icon';
+export * from './copy-to-clipboard/copy-to-clipboard';
+export * from './secret-phrase-words-view';
+export * from './text-list/text-list';
+export * from './avatar/avatar';
+export * from './tooltip/tooltip';
+export * from './account-activity-plate/account-activity-plate';
+export * from './account-popover/account-popover';
+export * from './erc20-token-activity-list/erc20-token-activity-list';
+export * from './tabs/tabs';
+export * from './token-plate/token-plate';
+export * from './deploy-status/deploy-status';
+export * from './modal/modal';
+export * from './active-account-plate/active-account-plate';
+export * from './recipient-plate/recipient-plate';
+export * from './account-casper-activity-plate/account-casper-activity-plate';
+export * from './no-activity-view/no-activity-view';
+export * from './nft-media-placeholder/nft-media-placeholder';
+export * from './account-list/account-list';
+export * from './connection-status-badge/connection-status-badge';
+export * from './casper-token-activity-list/casper-token-activity-list';
+export * from './loading-activity-view/loading-activity-view';
+export * from './recipient-dropdown-input/recipient-dropdown-input';
+export * from './transfer-success-screen/transfer-succeess-screen';
+export * from './contract-icon/contract-icon';
+export * from './password-inputs/password-inputs';
+export * from './toggle/toggle';
+export * from './skeleton/skeleton';
+export * from './validator-plate/validator-plate';
+export * from './error/error';
+export * from './contacts-plate/contacts-plate';
+export * from './theme-switcher/theme-switcher';
diff --git a/src/libs/ui/components/input/input.tsx b/src/libs/ui/components/input/input.tsx
index 5446ca4f8..690a8baf2 100644
--- a/src/libs/ui/components/input/input.tsx
+++ b/src/libs/ui/components/input/input.tsx
@@ -1,7 +1,8 @@
-import React, { HTMLInputTypeAttribute, ReactNode } from 'react';
+import React, { HTMLInputTypeAttribute, ReactNode, forwardRef } from 'react';
 import styled from 'styled-components';
 
-import { BaseProps, FormField, FormFieldStatus, SvgIcon } from '@src/libs/ui';
+import { FormField, FormFieldStatus, SvgIcon } from '@libs/ui/components';
+import { BaseProps } from '@libs/ui/types';
 
 type Ref = HTMLInputElement;
 
@@ -140,7 +141,7 @@ export interface InputProps extends BaseProps {
   autoComplete?: string;
 }
 
-export const Input = React.forwardRef<Ref, InputProps>(function Input(
+export const Input = forwardRef<Ref, InputProps>(function Input(
   {
     id,
     className,
@@ -153,7 +154,6 @@ export const Input = React.forwardRef<Ref, InputProps>(function Input(
     prefixIcon,
     suffixIcon,
     suffixText,
-    required,
     error,
     validationType,
     validationText,
diff --git a/src/libs/ui/components/link/link.tsx b/src/libs/ui/components/link/link.tsx
index 261754447..2b7403ae9 100644
--- a/src/libs/ui/components/link/link.tsx
+++ b/src/libs/ui/components/link/link.tsx
@@ -1,7 +1,7 @@
-import React from 'react';
+import React, { HTMLAttributes, forwardRef } from 'react';
 import styled, { DefaultTheme } from 'styled-components';
 
-import { getColorFromTheme } from '@src/libs/ui';
+import { getColorFromTheme } from '@libs/ui/utils';
 
 type LinkColor = 'contentAction' | 'fillCritical' | 'inherit';
 
@@ -28,7 +28,7 @@ const getStateColor = (theme: DefaultTheme, color: LinkColor) => {
   );
 };
 
-export interface LinkProps extends React.HTMLAttributes<Ref> {
+export interface LinkProps extends HTMLAttributes<Ref> {
   href?: string;
   target?: string;
   color: LinkColor;
@@ -51,6 +51,6 @@ const StyledLink = styled.a<LinkProps>(({ theme, color }) => {
   };
 });
 
-export const Link = React.forwardRef<Ref, LinkProps>(function Link(props, ref) {
+export const Link = forwardRef<Ref, LinkProps>(function Link(props, ref) {
   return <StyledLink ref={ref} target={props.target} {...props} />;
 });
diff --git a/src/libs/ui/components/list/list.tsx b/src/libs/ui/components/list/list.tsx
index 5cf3e462c..2309e5d19 100644
--- a/src/libs/ui/components/list/list.tsx
+++ b/src/libs/ui/components/list/list.tsx
@@ -1,14 +1,14 @@
+import { MacScrollbar } from 'mac-scrollbar';
 import React from 'react';
 import styled from 'styled-components';
-import { MacScrollbar } from 'mac-scrollbar';
 
-import { Tile, Typography } from '@libs/ui';
 import {
+  BorderBottomPseudoElementProps,
   SpacingSize,
   VerticalSpaceContainer,
-  borderBottomPseudoElementRules,
-  BorderBottomPseudoElementProps
-} from '@src/libs/layout';
+  borderBottomPseudoElementRules
+} from '@libs/layout';
+import { Tile, Typography } from '@libs/ui/components';
 
 interface ListHeaderContainerProps extends BorderBottomPseudoElementProps {
   stickyHeader?: boolean;
diff --git a/src/libs/ui/components/loading-activity-view/loading-activity-view.tsx b/src/libs/ui/components/loading-activity-view/loading-activity-view.tsx
index 48b537b4d..4a9d076a0 100644
--- a/src/libs/ui/components/loading-activity-view/loading-activity-view.tsx
+++ b/src/libs/ui/components/loading-activity-view/loading-activity-view.tsx
@@ -6,7 +6,7 @@ import {
   SpacingSize,
   VerticalSpaceContainer
 } from '@libs/layout';
-import { Skeleton, Tile } from '@libs/ui';
+import { Skeleton, Tile } from '@libs/ui/components';
 
 type Ref = HTMLDivElement;
 
diff --git a/src/libs/ui/components/modal/modal.tsx b/src/libs/ui/components/modal/modal.tsx
index 46746bac5..3caca7c3a 100644
--- a/src/libs/ui/components/modal/modal.tsx
+++ b/src/libs/ui/components/modal/modal.tsx
@@ -1,9 +1,10 @@
 import React, { MouseEvent, useRef, useState } from 'react';
 import styled from 'styled-components';
 
-import { useClickAway } from '@libs/ui/hooks/use-click-away';
-import { BaseProps } from '@libs/ui';
+import { useClickAway } from '@hooks/use-click-away';
+
 import { AlignedFlexRow, Overlay } from '@libs/layout';
+import { BaseProps } from '@libs/ui/types';
 
 const ChildrenContainer = styled(AlignedFlexRow)`
   cursor: pointer;
diff --git a/src/libs/ui/components/nft-media-placeholder/nft-media-placeholder.tsx b/src/libs/ui/components/nft-media-placeholder/nft-media-placeholder.tsx
index 1cf42f96f..c65b99b16 100644
--- a/src/libs/ui/components/nft-media-placeholder/nft-media-placeholder.tsx
+++ b/src/libs/ui/components/nft-media-placeholder/nft-media-placeholder.tsx
@@ -1,8 +1,8 @@
 import React from 'react';
 import styled from 'styled-components';
 
-import { Skeleton, SvgIcon } from '@libs/ui';
 import { CenteredFlexRow } from '@libs/layout';
+import { Skeleton, SvgIcon } from '@libs/ui/components';
 
 export const ImageContainer = styled(CenteredFlexRow)`
   position: relative;
diff --git a/src/libs/ui/components/no-activity-view/no-activity-view.tsx b/src/libs/ui/components/no-activity-view/no-activity-view.tsx
index d45160084..99a488193 100644
--- a/src/libs/ui/components/no-activity-view/no-activity-view.tsx
+++ b/src/libs/ui/components/no-activity-view/no-activity-view.tsx
@@ -1,18 +1,18 @@
 import React from 'react';
-import styled from 'styled-components';
 import { Trans, useTranslation } from 'react-i18next';
+import styled from 'styled-components';
 
-import {
-  Erc20TokenActionResult,
-  ExtendedDeployWithId,
-  TransferResultWithId
-} from '@libs/services/account-activity-service';
 import {
   CenteredFlexRow,
   SpacingSize,
   VerticalSpaceContainer
 } from '@libs/layout';
-import { Tile, Typography } from '@libs/ui';
+import {
+  Erc20TokenActionResult,
+  ExtendedDeployWithId,
+  TransferResultWithId
+} from '@libs/services/account-activity-service';
+import { Tile, Typography } from '@libs/ui/components';
 
 const Container = styled(CenteredFlexRow)`
   padding: 20px;
diff --git a/src/libs/ui/components/password-inputs/password-inputs.tsx b/src/libs/ui/components/password-inputs/password-inputs.tsx
index 04a253288..e277dd28f 100644
--- a/src/libs/ui/components/password-inputs/password-inputs.tsx
+++ b/src/libs/ui/components/password-inputs/password-inputs.tsx
@@ -1,15 +1,15 @@
 import React, { useState } from 'react';
-import { Trans, useTranslation } from 'react-i18next';
 import { FieldErrors, UseFormRegister } from 'react-hook-form';
+import { Trans, useTranslation } from 'react-i18next';
 
+import { InputsContainer, ParagraphContainer, SpacingSize } from '@libs/layout';
 import {
   Input,
   InputValidationType,
   PasswordInputType,
   PasswordVisibilityIcon,
   Typography
-} from '@libs/ui';
-import { InputsContainer, ParagraphContainer, SpacingSize } from '@libs/layout';
+} from '@libs/ui/components';
 import { CreatePasswordFormValues } from '@libs/ui/forms/create-password';
 import { minPasswordLength } from '@libs/ui/forms/form-validation-rules';
 
diff --git a/src/libs/ui/components/password-visibility-icon/password-visibility-icon.tsx b/src/libs/ui/components/password-visibility-icon/password-visibility-icon.tsx
index 58e760f7a..5044f4fe3 100644
--- a/src/libs/ui/components/password-visibility-icon/password-visibility-icon.tsx
+++ b/src/libs/ui/components/password-visibility-icon/password-visibility-icon.tsx
@@ -1,6 +1,7 @@
-import { SvgIcon } from '@libs/ui';
 import React from 'react';
 
+import { SvgIcon } from '@libs/ui/components';
+
 export type PasswordInputType = 'password' | 'text';
 
 interface PasswordVisibilityIconProps {
diff --git a/src/libs/ui/components/popover-link/popover-link.tsx b/src/libs/ui/components/popover-link/popover-link.tsx
index 8e66debae..7fee5003b 100644
--- a/src/libs/ui/components/popover-link/popover-link.tsx
+++ b/src/libs/ui/components/popover-link/popover-link.tsx
@@ -1,15 +1,15 @@
-import React from 'react';
+import React, { HTMLAttributes, forwardRef } from 'react';
 import styled from 'styled-components';
 
 type Ref = HTMLAnchorElement;
 
-export interface PopoverLinkProps extends React.HTMLAttributes<Ref> {
+export interface PopoverLinkProps extends HTMLAttributes<Ref> {
   href?: string;
   target?: string;
   variant: 'contentAction';
 }
 
-const BaseLink = styled.a<PopoverLinkProps>(({ theme }) => ({
+const BaseLink = styled.a<PopoverLinkProps>(() => ({
   display: 'flex',
   alignItems: 'center',
 
@@ -38,10 +38,8 @@ const LINK_COMPONENT_BY_COLOR_DICT = {
   contentAction: BlueLink
 };
 
-export const PopoverLink = React.forwardRef<Ref, PopoverLinkProps>(
-  (props, ref) => {
-    const LinkComponent = LINK_COMPONENT_BY_COLOR_DICT[props.variant];
+export const PopoverLink = forwardRef<Ref, PopoverLinkProps>((props, ref) => {
+  const LinkComponent = LINK_COMPONENT_BY_COLOR_DICT[props.variant];
 
-    return <LinkComponent ref={ref} target={props.target} {...props} />;
-  }
-);
+  return <LinkComponent ref={ref} target={props.target} {...props} />;
+});
diff --git a/src/libs/ui/components/popover/popover.tsx b/src/libs/ui/components/popover/popover.tsx
index ca5f738dc..38376b20a 100644
--- a/src/libs/ui/components/popover/popover.tsx
+++ b/src/libs/ui/components/popover/popover.tsx
@@ -1,8 +1,9 @@
-import React, { useState, useRef, PropsWithChildren, MouseEvent } from 'react';
+import React, { MouseEvent, PropsWithChildren, useRef, useState } from 'react';
 import styled from 'styled-components';
 
+import { useClickAway } from '@hooks/use-click-away';
+
 import { AlignedFlexRow, FlexColumn, Overlay, SpacingSize } from '@libs/layout';
-import { useClickAway } from '@libs/ui/hooks/use-click-away';
 
 const popoverOffsetFromChildren = 8;
 const contentHeight = 188;
diff --git a/src/libs/ui/components/recipient-dropdown-input/recipient-dropdown-input.tsx b/src/libs/ui/components/recipient-dropdown-input/recipient-dropdown-input.tsx
index 6fa043b7a..fff364a61 100644
--- a/src/libs/ui/components/recipient-dropdown-input/recipient-dropdown-input.tsx
+++ b/src/libs/ui/components/recipient-dropdown-input/recipient-dropdown-input.tsx
@@ -1,21 +1,29 @@
 import React, { useEffect, useMemo, useState } from 'react';
+import { UseFormReturn, useWatch } from 'react-hook-form';
 import { Trans, useTranslation } from 'react-i18next';
 import { useSelector } from 'react-redux';
-import { UseFormReturn, useWatch } from 'react-hook-form';
 import styled from 'styled-components';
 
+import { selectAllContacts } from '@background/redux/contacts/selectors';
 import { selectRecentRecipientPublicKeys } from '@background/redux/recent-recipient-public-keys/selectors';
+import { selectVaultActiveAccount } from '@background/redux/vault/selectors';
+
+import { useClickAway } from '@hooks/use-click-away';
+
 import {
   AlignedFlexRow,
   SpacingSize,
   VerticalSpaceContainer
 } from '@libs/layout';
-import { Input, List, RecipientPlate, SvgIcon, Typography } from '@libs/ui';
+import {
+  Input,
+  List,
+  RecipientPlate,
+  SvgIcon,
+  Typography
+} from '@libs/ui/components';
 import { TransferRecipientFormValues } from '@libs/ui/forms/transfer';
-import { useClickAway } from '@libs/ui/hooks/use-click-away';
-import { selectVaultActiveAccount } from '@background/redux/vault/selectors';
 import { TransferNftRecipientFormValues } from '@libs/ui/forms/transfer-nft';
-import { selectAllContacts } from '@background/redux/contacts/selectors';
 
 const SeparatorContainer = styled(AlignedFlexRow)`
   padding: 8px 16px;
@@ -163,7 +171,7 @@ export const RecipientDropdownInput = ({
         validationText={errors?.recipientPublicKey?.message}
         autoComplete="off"
       />
-      {isOpenRecentRecipientPublicKeysList && (
+      {isOpenRecentRecipientPublicKeysList && optionsRow.length ? (
         <List
           contentTop={SpacingSize.Tiny}
           rows={optionsRow}
@@ -206,7 +214,7 @@ export const RecipientDropdownInput = ({
           }}
           marginLeftForItemSeparatorLine={56}
         />
-      )}
+      ) : null}
     </VerticalSpaceContainer>
   );
 };
diff --git a/src/libs/ui/components/recipient-plate/recipient-plate.tsx b/src/libs/ui/components/recipient-plate/recipient-plate.tsx
index a1d36c9f0..8540a815f 100644
--- a/src/libs/ui/components/recipient-plate/recipient-plate.tsx
+++ b/src/libs/ui/components/recipient-plate/recipient-plate.tsx
@@ -14,7 +14,7 @@ import {
   HashVariant,
   SvgIcon,
   Typography
-} from '@libs/ui';
+} from '@libs/ui/components';
 
 interface RecipientPlateProps {
   handleClick?: () => void;
diff --git a/src/libs/ui/components/secret-phrase-words-view/copy-secret-phrase-bar.tsx b/src/libs/ui/components/secret-phrase-words-view/copy-secret-phrase-bar.tsx
index 334a229c8..4f8952b95 100644
--- a/src/libs/ui/components/secret-phrase-words-view/copy-secret-phrase-bar.tsx
+++ b/src/libs/ui/components/secret-phrase-words-view/copy-secret-phrase-bar.tsx
@@ -1,8 +1,8 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 
-import { AlignedFlexRow, SpacingSize } from '@src/libs/layout';
-import { CopyToClipboard, SvgIcon, Typography } from '@src/libs/ui';
+import { AlignedFlexRow, SpacingSize } from '@libs/layout';
+import { CopyToClipboard, SvgIcon, Typography } from '@libs/ui/components';
 
 interface CopySecretPhraseBarProps {
   secretPhraseForCopy: string;
diff --git a/src/libs/ui/components/secret-phrase-words-view/secret-phrase-words-view.tsx b/src/libs/ui/components/secret-phrase-words-view/secret-phrase-words-view.tsx
index 3c18968bb..cf8524e4e 100644
--- a/src/libs/ui/components/secret-phrase-words-view/secret-phrase-words-view.tsx
+++ b/src/libs/ui/components/secret-phrase-words-view/secret-phrase-words-view.tsx
@@ -5,18 +5,19 @@ import React, {
   useMemo,
   useState
 } from 'react';
-import { useTranslation, Trans } from 'react-i18next';
+import { Trans, useTranslation } from 'react-i18next';
 import styled, { css } from 'styled-components';
 
+import { SecretPhrase } from '@libs/crypto';
 import {
-  CenteredFlexColumn,
   AlignedFlexRow,
+  CenteredFlexColumn,
   FlexColumn,
   FlexRow,
   SpacingSize
-} from '@src/libs/layout';
-import { SvgIcon, Typography, WordTag, hexToRGBA } from '@src/libs/ui';
-import { SecretPhrase } from '@src/libs/crypto';
+} from '@libs/layout';
+import { SvgIcon, Typography, WordTag } from '@libs/ui/components';
+import { hexToRGBA } from '@libs/ui/utils';
 
 import { PartialPhraseArray } from './types';
 import { buildInitialWordsCollection } from './utils';
diff --git a/src/libs/ui/components/secret-phrase-words-view/utils.ts b/src/libs/ui/components/secret-phrase-words-view/utils.ts
index 207490850..a42f999ca 100644
--- a/src/libs/ui/components/secret-phrase-words-view/utils.ts
+++ b/src/libs/ui/components/secret-phrase-words-view/utils.ts
@@ -1,4 +1,5 @@
-import { SecretPhrase } from '@src/libs/crypto';
+import { SecretPhrase } from '@libs/crypto';
+
 import { PartialPhraseArray } from './types';
 
 function getRandomInt(min: number, max: number): number {
diff --git a/src/libs/ui/components/secret-phrase-words-view/word-picker.tsx b/src/libs/ui/components/secret-phrase-words-view/word-picker.tsx
index 879691b7e..3f2b23d7b 100644
--- a/src/libs/ui/components/secret-phrase-words-view/word-picker.tsx
+++ b/src/libs/ui/components/secret-phrase-words-view/word-picker.tsx
@@ -1,15 +1,11 @@
 import React from 'react';
-import styled from 'styled-components';
 import { Trans, useTranslation } from 'react-i18next';
+import styled from 'styled-components';
 
-import {
-  AlignedFlexRow,
-  FlexColumn,
-  FlexRow,
-  SpacingSize
-} from '@src/libs/layout';
-import { BaseProps, SvgIcon, Typography, WordTag } from '@src/libs/ui';
-import { SecretPhrase } from '@src/libs/crypto';
+import { SecretPhrase } from '@libs/crypto';
+import { AlignedFlexRow, FlexColumn, FlexRow, SpacingSize } from '@libs/layout';
+import { SvgIcon, Typography, WordTag } from '@libs/ui/components';
+import { BaseProps } from '@libs/ui/types';
 
 const WordPickerContainer = styled(FlexColumn)`
   color: ${({ theme }) => theme.color.contentAction};
diff --git a/src/libs/ui/components/secret-phrase-words-view/word-tag.tsx b/src/libs/ui/components/secret-phrase-words-view/word-tag.tsx
index b93166501..757551001 100644
--- a/src/libs/ui/components/secret-phrase-words-view/word-tag.tsx
+++ b/src/libs/ui/components/secret-phrase-words-view/word-tag.tsx
@@ -1,8 +1,9 @@
 import React from 'react';
 import styled from 'styled-components';
 
-import { getLinearGradientColor, Typography } from '@src/libs/ui';
-import { FlexRow, SpacingSize } from '@src/libs/layout';
+import { FlexRow, SpacingSize } from '@libs/layout';
+import { Typography } from '@libs/ui/components';
+import { getLinearGradientColor } from '@libs/ui/utils/get-linear-gradient-color';
 
 interface IsEmptyWord {
   isEmptyWord?: boolean;
diff --git a/src/libs/ui/components/site-favicon-badge/site-favicon-badge.tsx b/src/libs/ui/components/site-favicon-badge/site-favicon-badge.tsx
index fde28943f..a93e4faa3 100644
--- a/src/libs/ui/components/site-favicon-badge/site-favicon-badge.tsx
+++ b/src/libs/ui/components/site-favicon-badge/site-favicon-badge.tsx
@@ -1,8 +1,8 @@
 import React from 'react';
 import styled from 'styled-components';
 
-import { Tooltip, Typography } from '@libs/ui';
 import { AlignedSpaceBetweenFlexRow, SpacingSize } from '@libs/layout';
+import { Tooltip, Typography } from '@libs/ui/components';
 
 const SiteFaviconAndHostnameContainer = styled(AlignedSpaceBetweenFlexRow)`
   padding: 4px 12px;
diff --git a/src/libs/ui/components/skeleton/skeleton.tsx b/src/libs/ui/components/skeleton/skeleton.tsx
index e443e106a..c6b1b495d 100644
--- a/src/libs/ui/components/skeleton/skeleton.tsx
+++ b/src/libs/ui/components/skeleton/skeleton.tsx
@@ -1,7 +1,6 @@
 import React from 'react';
-import SkeletonLib from 'react-loading-skeleton';
+import SkeletonLib, { SkeletonProps } from 'react-loading-skeleton';
 import { useTheme } from 'styled-components';
-import { SkeletonProps } from 'react-loading-skeleton/dist/Skeleton';
 
 export const Skeleton: React.FC<SkeletonProps> = ({
   baseColor,
diff --git a/src/libs/ui/components/svg-icon/svg-icon-social.tsx b/src/libs/ui/components/svg-icon/svg-icon-social.tsx
index 718169973..a9216538e 100644
--- a/src/libs/ui/components/svg-icon/svg-icon-social.tsx
+++ b/src/libs/ui/components/svg-icon/svg-icon-social.tsx
@@ -1,6 +1,8 @@
-import React from 'react';
+import React, { forwardRef } from 'react';
 import styled from 'styled-components';
-import { BaseProps, Link, SvgIcon } from '@src/libs/ui';
+
+import { Link, SvgIcon } from '@libs/ui/components';
+import { BaseProps } from '@libs/ui/types';
 
 const getSocialMediaColor = (type: SocialMediaType) => {
   return {
@@ -59,21 +61,20 @@ const Container = styled(Link)<Omit<SvgIconSocialProps, 'userId'>>(
   })
 );
 
-export const SvgIconSocial = React.forwardRef<
-  HTMLAnchorElement,
-  SvgIconSocialProps
->(({ socialMediaType: type, userId, ...props }: SvgIconSocialProps, ref) => {
-  return (
-    <Container
-      ref={ref}
-      color="inherit"
-      socialMediaType={type}
-      href={getSocialMediaUrl(type, userId)}
-      {...props}
-    >
-      <SvgIcon src={`assets/icons/ic-${type}.svg`} />
-    </Container>
-  );
-});
+export const SvgIconSocial = forwardRef<HTMLAnchorElement, SvgIconSocialProps>(
+  ({ socialMediaType: type, userId, ...props }: SvgIconSocialProps, ref) => {
+    return (
+      <Container
+        ref={ref}
+        color="inherit"
+        socialMediaType={type}
+        href={getSocialMediaUrl(type, userId)}
+        {...props}
+      >
+        <SvgIcon src={`assets/icons/ic-${type}.svg`} />
+      </Container>
+    );
+  }
+);
 
 export default SvgIconSocial;
diff --git a/src/libs/ui/components/svg-icon/svg-icon.tsx b/src/libs/ui/components/svg-icon/svg-icon.tsx
index 6b907921e..d880e51ef 100644
--- a/src/libs/ui/components/svg-icon/svg-icon.tsx
+++ b/src/libs/ui/components/svg-icon/svg-icon.tsx
@@ -1,12 +1,12 @@
-import React from 'react';
+import React, { HTMLAttributes, forwardRef } from 'react';
 import ReactSVG from 'react-inlinesvg';
 import styled from 'styled-components';
 
-import { Color, getColorFromTheme } from '@src/libs/ui';
+import { Color, getColorFromTheme } from '@libs/ui/utils';
 
 type Ref = HTMLDivElement;
 
-export interface SvgIconProps extends React.HTMLAttributes<Ref> {
+export interface SvgIconProps extends HTMLAttributes<Ref> {
   className?: string;
   style?: React.CSSProperties;
   size?: number;
@@ -81,7 +81,7 @@ const StyledReactSVG = styled(ReactSVG)<SvgIconProps>(
   })
 );
 
-export const SvgIcon = React.forwardRef<Ref, SvgIconProps>(
+export const SvgIcon = forwardRef<Ref, SvgIconProps>(
   (
     {
       src,
diff --git a/src/libs/ui/components/tabs/tabs.tsx b/src/libs/ui/components/tabs/tabs.tsx
index abb601ca4..fd673d01c 100644
--- a/src/libs/ui/components/tabs/tabs.tsx
+++ b/src/libs/ui/components/tabs/tabs.tsx
@@ -1,9 +1,9 @@
 import React, { ReactNode, useState } from 'react';
-import styled from 'styled-components';
 import { Trans, useTranslation } from 'react-i18next';
+import styled from 'styled-components';
 
-import { Typography } from '@libs/ui';
 import { AlignedSpaceBetweenFlexRow, CenteredFlexRow } from '@libs/layout';
+import { Typography } from '@libs/ui/components';
 
 const TabsContainer = styled(AlignedSpaceBetweenFlexRow)`
   height: 40px;
diff --git a/src/libs/ui/components/text-list/text-list.tsx b/src/libs/ui/components/text-list/text-list.tsx
index bc31dce91..783812cf9 100644
--- a/src/libs/ui/components/text-list/text-list.tsx
+++ b/src/libs/ui/components/text-list/text-list.tsx
@@ -1,7 +1,8 @@
 import React from 'react';
 import styled from 'styled-components';
 
-import { KeyValueItem, Typography } from '@src/libs/ui';
+import { Typography } from '@libs/ui/components';
+import { KeyValueItem } from '@libs/ui/types';
 
 const UnorderedList = styled.ul`
   padding-inline-start: unset;
diff --git a/src/libs/ui/components/textarea/textarea.tsx b/src/libs/ui/components/textarea/textarea.tsx
index 9ef513eed..5e56c16de 100644
--- a/src/libs/ui/components/textarea/textarea.tsx
+++ b/src/libs/ui/components/textarea/textarea.tsx
@@ -1,7 +1,7 @@
 import React, { forwardRef } from 'react';
 import styled from 'styled-components';
 
-import { BaseProps } from '@libs/ui';
+import { BaseProps } from '@libs/ui/types';
 
 type Ref = HTMLTextAreaElement;
 
diff --git a/src/libs/ui/components/theme-switcher/theme-switcher.tsx b/src/libs/ui/components/theme-switcher/theme-switcher.tsx
index 3a6065a93..7072fb4a8 100644
--- a/src/libs/ui/components/theme-switcher/theme-switcher.tsx
+++ b/src/libs/ui/components/theme-switcher/theme-switcher.tsx
@@ -1,7 +1,14 @@
 import React, { useMemo } from 'react';
-import styled from 'styled-components';
-import { useSelector } from 'react-redux';
 import { Trans, useTranslation } from 'react-i18next';
+import { useSelector } from 'react-redux';
+import styled from 'styled-components';
+
+import { isSafariBuild } from '@src/utils';
+
+import { themeModeSettingChanged } from '@background/redux/settings/actions';
+import { selectThemeModeSetting } from '@background/redux/settings/selectors';
+import { ThemeMode } from '@background/redux/settings/types';
+import { dispatchToMainStore } from '@background/redux/utils';
 
 import {
   AlignedFlexRow,
@@ -12,12 +19,7 @@ import {
   SpaceBetweenFlexRow,
   SpacingSize
 } from '@libs/layout';
-import { ThemeMode } from '@background/redux/settings/types';
-import { selectThemeModeSetting } from '@background/redux/settings/selectors';
-import { dispatchToMainStore } from '@background/redux/utils';
-import { themeModeSettingChanged } from '@background/redux/settings/actions';
-import { Button, List, SvgIcon, Typography } from '@libs/ui';
-import { isSafariBuild } from '@src/utils';
+import { Button, List, SvgIcon, Typography } from '@libs/ui/components';
 
 const Container = styled(FlexColumn)`
   padding-top: 24px;
diff --git a/src/libs/ui/components/token-plate/token-plate.tsx b/src/libs/ui/components/token-plate/token-plate.tsx
index 0cb1d2605..f0a23787c 100644
--- a/src/libs/ui/components/token-plate/token-plate.tsx
+++ b/src/libs/ui/components/token-plate/token-plate.tsx
@@ -1,6 +1,8 @@
 import React from 'react';
 import styled from 'styled-components';
 
+import { TokenType } from '@hooks/use-casper-token';
+
 import {
   AlignedFlexRow,
   AlignedSpaceBetweenFlexRow,
@@ -8,8 +10,7 @@ import {
   RightAlignedFlexColumn,
   SpacingSize
 } from '@libs/layout';
-import { SvgIcon, Tooltip, Typography } from '@libs/ui';
-import { TokenType } from '@src/hooks';
+import { SvgIcon, Tooltip, Typography } from '@libs/ui/components';
 
 const TokenAmountContainer = styled(RightAlignedFlexColumn)`
   max-width: 120px;
diff --git a/src/libs/ui/components/tooltip/tooltip.tsx b/src/libs/ui/components/tooltip/tooltip.tsx
index 0d823d998..b741534b4 100644
--- a/src/libs/ui/components/tooltip/tooltip.tsx
+++ b/src/libs/ui/components/tooltip/tooltip.tsx
@@ -1,7 +1,7 @@
 import React, { forwardRef } from 'react';
 import styled from 'styled-components';
 
-import { Typography } from '@libs/ui';
+import { Typography } from '@libs/ui/components';
 
 interface TooltipProps {
   title?: string | null;
@@ -27,7 +27,7 @@ const TooltipTip = styled.div<{ placement: Placement }>(
   ({ theme, placement }) => ({
     position: 'absolute',
 
-    zIndex: 1,
+    zIndex: 2,
 
     ...(placement === 'topCenter' && {
       left: '50%',
diff --git a/src/libs/ui/components/transfer-success-screen/transfer-succeess-screen.tsx b/src/libs/ui/components/transfer-success-screen/transfer-succeess-screen.tsx
index 34009a32d..9a58b9073 100644
--- a/src/libs/ui/components/transfer-success-screen/transfer-succeess-screen.tsx
+++ b/src/libs/ui/components/transfer-success-screen/transfer-succeess-screen.tsx
@@ -1,21 +1,24 @@
 import React, { useEffect } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 
+import { RouterPath, useTypedNavigate } from '@popup/router';
+
 import {
   ContentContainer,
   ParagraphContainer,
   SpacingSize,
   VerticalSpaceContainer
-} from '@src/libs/layout';
-import { HomePageTabsId, SvgIcon, Typography } from '@libs/ui';
-import { RouterPath, useTypedNavigate } from '@popup/router';
+} from '@libs/layout';
+import { HomePageTabsId, SvgIcon, Typography } from '@libs/ui/components';
 
 interface TransferSuccessScreenProps {
   headerText: string;
+  children?: React.ReactNode;
 }
 
 export const TransferSuccessScreen = ({
-  headerText
+  headerText,
+  children
 }: TransferSuccessScreenProps) => {
   const { t } = useTranslation();
   const navigate = useTypedNavigate();
@@ -64,6 +67,7 @@ export const TransferSuccessScreen = ({
             </Trans>
           </Typography>
         </VerticalSpaceContainer>
+        {children}
       </ParagraphContainer>
     </ContentContainer>
   );
diff --git a/src/libs/ui/components/typography/typography.tsx b/src/libs/ui/components/typography/typography.tsx
index c47cdf16a..2df0dc34e 100644
--- a/src/libs/ui/components/typography/typography.tsx
+++ b/src/libs/ui/components/typography/typography.tsx
@@ -1,12 +1,9 @@
 import React, { forwardRef } from 'react';
 import styled, { CSSObject, DefaultTheme } from 'styled-components';
 
-import {
-  BaseProps,
-  ContentColor,
-  getColorFromTheme,
-  Skeleton
-} from '@src/libs/ui';
+import { Skeleton } from '@libs/ui/components';
+import { BaseProps } from '@libs/ui/types';
+import { ContentColor, getColorFromTheme } from '@libs/ui/utils';
 
 type Ref = HTMLSpanElement | HTMLHeadingElement;
 
diff --git a/src/libs/ui/components/validator-plate/validator-plate.tsx b/src/libs/ui/components/validator-plate/validator-plate.tsx
index db62bb484..f68b6d88b 100644
--- a/src/libs/ui/components/validator-plate/validator-plate.tsx
+++ b/src/libs/ui/components/validator-plate/validator-plate.tsx
@@ -1,6 +1,8 @@
 import React, { useEffect, useState } from 'react';
-import styled from 'styled-components';
 import { FieldError } from 'react-hook-form';
+import styled from 'styled-components';
+
+import { getImageProxyUrl } from '@src/utils';
 
 import {
   AlignedFlexRow,
@@ -18,9 +20,8 @@ import {
   Hash,
   HashVariant,
   Typography
-} from '@libs/ui';
+} from '@libs/ui/components';
 import { formatNumber, motesToCSPR } from '@libs/ui/utils/formatters';
-import { getImageProxyUrl } from '@src/utils';
 
 const ValidatorPlateContainer = styled(AlignedSpaceBetweenFlexRow)<{
   onClick?: () => void;
@@ -151,14 +152,14 @@ export const ValidatorPlate = ({
         </NameContainer>
       </AlignedFlexRow>
       <RightAlignedFlexColumn>
-        <Typography type="captionHash" color="contentPrimary">
+        <Typography type="captionHash">
           {`${formattedTotalStake} CSPR`}
         </Typography>
         <AlignedFlexRow gap={SpacingSize.Small}>
           <Typography type="listSubtext" color="contentSecondary">
             {`${formattedFee}% fee`}
           </Typography>
-          <Typography type="listSubtext" color="contentSecondary">
+          <Typography type="listSubtext">
             {getFormattedDelegatorsNumber()} delegators
           </Typography>
         </AlignedFlexRow>
diff --git a/src/libs/ui/forms/contact.ts b/src/libs/ui/forms/contact.ts
index a538c98ca..cc05c274b 100644
--- a/src/libs/ui/forms/contact.ts
+++ b/src/libs/ui/forms/contact.ts
@@ -1,12 +1,11 @@
 import * as Yup from 'yup';
-import { useForm } from 'react-hook-form';
-import { UseFormProps } from 'react-hook-form/dist/types/form';
+import { yupResolver } from '@hookform/resolvers/yup/dist/yup';
+import { UseFormProps, useForm } from 'react-hook-form';
 
 import {
   useContactNameRule,
   useContactPublicKeyRule
 } from '@libs/ui/forms/form-validation-rules';
-import { yupResolver } from '@hookform/resolvers/yup/dist/yup';
 
 export type ContactFromValues = {
   name: string;
diff --git a/src/libs/ui/forms/create-account.ts b/src/libs/ui/forms/create-account.ts
index 3da5e896b..63826a7fc 100644
--- a/src/libs/ui/forms/create-account.ts
+++ b/src/libs/ui/forms/create-account.ts
@@ -1,7 +1,6 @@
 import * as Yup from 'yup';
-import { useForm } from 'react-hook-form';
-import { UseFormProps } from 'react-hook-form/dist/types/form';
 import { yupResolver } from '@hookform/resolvers/yup/dist/yup';
+import { UseFormProps, useForm } from 'react-hook-form';
 
 import { useAccountNameRule } from './form-validation-rules';
 
diff --git a/src/libs/ui/forms/create-password.ts b/src/libs/ui/forms/create-password.ts
index 10cb0024f..d63e66bd0 100644
--- a/src/libs/ui/forms/create-password.ts
+++ b/src/libs/ui/forms/create-password.ts
@@ -1,7 +1,7 @@
 import * as Yup from 'yup';
-import { useForm } from 'react-hook-form';
-import { UseFormProps } from 'react-hook-form/dist/types/form';
 import { yupResolver } from '@hookform/resolvers/yup/dist/yup';
+import { UseFormProps, useForm } from 'react-hook-form';
+
 import {
   useCreatePasswordRule,
   useRepeatPasswordRule
diff --git a/src/libs/ui/forms/form-validation-rules.ts b/src/libs/ui/forms/form-validation-rules.ts
index ed1f33c9c..a7feda42e 100644
--- a/src/libs/ui/forms/form-validation-rules.ts
+++ b/src/libs/ui/forms/form-validation-rules.ts
@@ -1,26 +1,27 @@
 import * as Yup from 'yup';
+import Big from 'big.js';
 import { useTranslation } from 'react-i18next';
 import { useSelector } from 'react-redux';
-import Big from 'big.js';
 
-import { verifyPasswordAgainstHash } from '@src/libs/crypto/hashing';
-import { dispatchToMainStore } from '@src/background/redux/utils';
-import { loginRetryCountIncremented } from '@src/background/redux/login-retry-count/actions';
-import { selectLoginRetryCount } from '@background/redux/login-retry-count/selectors';
 import {
-  STAKE_COST_MOTES,
+  AuctionManagerEntryPoint,
   DELEGATION_MIN_AMOUNT_MOTES,
   LOGIN_RETRY_ATTEMPTS_LIMIT,
   MAX_DELEGATORS,
+  STAKE_COST_MOTES,
   TRANSFER_COST_MOTES,
-  TRANSFER_MIN_AMOUNT_MOTES,
-  AuctionManagerEntryPoint
+  TRANSFER_MIN_AMOUNT_MOTES
 } from '@src/constants';
 import { isValidPublicKey, isValidU64 } from '@src/utils';
+
+import { loginRetryCountIncremented } from '@background/redux/login-retry-count/actions';
+import { selectLoginRetryCount } from '@background/redux/login-retry-count/selectors';
+import { dispatchToMainStore } from '@background/redux/utils';
+
+import { verifyPasswordAgainstHash } from '@libs/crypto/hashing';
 import { CSPRtoMotes, motesToCSPR } from '@libs/ui/utils/formatters';
 
 export const minPasswordLength = 16;
-export const maxQrCodePasswordLength = 8;
 
 const ERROR_DISPLAYED_BEFORE_ATTEMPT_IS_DECREMENTED = 1;
 
@@ -78,10 +79,16 @@ export function useRepeatPasswordRule(inputName: string) {
 
 export function useValidSecretPhraseRule() {
   const { t } = useTranslation();
-  const errorMessage = t('There should be 24 words in a valid secret phrase.');
+  const errorMessage = t(
+    'There should be 12 or 24 words in a valid secret phrase.'
+  );
 
   return Yup.string().test('unique', errorMessage, value => {
-    return value != null && value.trim().split(' ').length === 24;
+    return (
+      value != null &&
+      (value.trim().split(' ').length === 24 ||
+        value.trim().split(' ').length === 12)
+    );
   });
 }
 
@@ -283,7 +290,8 @@ export const useCSPRStakeAmountRule = (
 
   const getStakeMinAmountMotes = () => {
     switch (mode) {
-      case AuctionManagerEntryPoint.delegate: {
+      case AuctionManagerEntryPoint.delegate:
+      case AuctionManagerEntryPoint.redelegate: {
         return DELEGATION_MIN_AMOUNT_MOTES;
       }
       case AuctionManagerEntryPoint.undelegate: {
@@ -331,25 +339,45 @@ export const useCSPRStakeAmountRule = (
 
         return false;
       },
-      message: {
-        header: t('You can’t delegate this amount'),
-        description: t(
-          `The minimum required delegation amount is ${motesToCSPR(
-            getStakeMinAmountMotes()
-          )} CSPR.`
-        )
-      }
+      message:
+        mode === AuctionManagerEntryPoint.delegate
+          ? {
+              header: t('You can’t delegate this amount'),
+              description: t(
+                `The minimum required delegation amount is ${motesToCSPR(
+                  getStakeMinAmountMotes()
+                )} CSPR.`
+              )
+            }
+          : {
+              header: t('You can’t redelegate this amount'),
+              description: t(
+                `The minimum required redelegation amount is ${motesToCSPR(
+                  getStakeMinAmountMotes()
+                )} CSPR.`
+              )
+            }
     })
     .test({
       name: 'amountAboveBalance',
       test: csprAmountInputValue => {
         if (csprAmountInputValue) {
-          if (mode === AuctionManagerEntryPoint.undelegate) {
-            return Big(CSPRtoMotes(csprAmountInputValue)).lte(
-              Big(stakeAmountMotes).sub(getStakeMinAmountMotes()).toString()
-            );
+          switch (mode) {
+            case AuctionManagerEntryPoint.undelegate: {
+              return Big(CSPRtoMotes(csprAmountInputValue)).lte(
+                Big(stakeAmountMotes).sub(getStakeMinAmountMotes()).toString()
+              );
+            }
+            case AuctionManagerEntryPoint.redelegate: {
+              return Big(CSPRtoMotes(csprAmountInputValue)).lte(
+                Big(stakeAmountMotes).toString()
+              );
+            }
+            case AuctionManagerEntryPoint.delegate:
+            default: {
+              return Big(CSPRtoMotes(csprAmountInputValue)).lte(maxAmountMotes);
+            }
           }
-          return Big(CSPRtoMotes(csprAmountInputValue)).lte(maxAmountMotes);
         }
 
         return false;
@@ -360,12 +388,17 @@ export const useCSPRStakeAmountRule = (
               header: t('You can’t undelegate this amount'),
               description: t('Amount must be less than staked CSPR.')
             }
-          : {
-              header: t('Your account balance is not high enough'),
-              description: t(
-                'Your account balance is not high enough. Enter a smaller amount.'
-              )
-            }
+          : mode === AuctionManagerEntryPoint.redelegate
+            ? {
+                header: t('You can’t redelegate this amount'),
+                description: t('Amount must be less than staked CSPR.')
+              }
+            : {
+                header: t('Your account balance is not high enough'),
+                description: t(
+                  'Your account balance is not high enough. Enter a smaller amount.'
+                )
+              }
     });
 };
 
@@ -385,7 +418,10 @@ export const useValidatorPublicKeyRule = (
     .test({
       name: 'maxDelegators',
       test: () => {
-        if (stakesType === AuctionManagerEntryPoint.undelegate) {
+        if (
+          stakesType === AuctionManagerEntryPoint.undelegate ||
+          stakesType === AuctionManagerEntryPoint.redelegate
+        ) {
           return true;
         }
         if (delegatorsNumber) {
@@ -400,6 +436,31 @@ export const useValidatorPublicKeyRule = (
     });
 };
 
+export const useNewValidatorPublicKeyRule = (delegatorsNumber?: number) => {
+  const { t } = useTranslation();
+
+  return Yup.string()
+    .required(t('Recipient is required'))
+    .test({
+      name: 'newValidatorPublicKey',
+      test: value => (value ? isValidPublicKey(value) : false),
+      message: t('Recipient should be a valid public key')
+    })
+    .test({
+      name: 'maxDelegators',
+      test: () => {
+        if (delegatorsNumber) {
+          return delegatorsNumber < MAX_DELEGATORS;
+        }
+
+        return false;
+      },
+      message: t(
+        'This validator has reached the network limit for total delegators and therefore cannot be delegated to by new accounts. Please select another validator with fewer than 1200 total delegators'
+      )
+    });
+};
+
 export const useContactNameRule = (
   isContactNameIsTakenCallback: (
     value: string | undefined
diff --git a/src/libs/ui/forms/recover-from-secret-phrase.ts b/src/libs/ui/forms/recover-from-secret-phrase.ts
index 3cb88c1e2..ed424da4a 100644
--- a/src/libs/ui/forms/recover-from-secret-phrase.ts
+++ b/src/libs/ui/forms/recover-from-secret-phrase.ts
@@ -1,7 +1,6 @@
 import * as Yup from 'yup';
-import { useForm } from 'react-hook-form';
-import { UseFormProps } from 'react-hook-form/dist/types/form';
 import { yupResolver } from '@hookform/resolvers/yup/dist/yup';
+import { UseFormProps, useForm } from 'react-hook-form';
 
 import { useValidSecretPhraseRule } from '@libs/ui/forms/form-validation-rules';
 
diff --git a/src/libs/ui/forms/rename-account.ts b/src/libs/ui/forms/rename-account.ts
index b515faf20..40fd397d9 100644
--- a/src/libs/ui/forms/rename-account.ts
+++ b/src/libs/ui/forms/rename-account.ts
@@ -1,7 +1,6 @@
 import * as Yup from 'yup';
-import { useForm } from 'react-hook-form';
-import { UseFormProps } from 'react-hook-form/dist/types/form';
 import { yupResolver } from '@hookform/resolvers/yup/dist/yup';
+import { UseFormProps, useForm } from 'react-hook-form';
 
 import { useAccountNameRule } from './form-validation-rules';
 
diff --git a/src/libs/ui/forms/stakes-form.ts b/src/libs/ui/forms/stakes-form.ts
index f066e39b9..4ffe878ce 100644
--- a/src/libs/ui/forms/stakes-form.ts
+++ b/src/libs/ui/forms/stakes-form.ts
@@ -1,18 +1,23 @@
 import * as Yup from 'yup';
-import { useForm } from 'react-hook-form';
-import { UseFormProps } from 'react-hook-form/dist/types/form';
 import { yupResolver } from '@hookform/resolvers/yup/dist/yup';
+import { UseFormProps, useForm } from 'react-hook-form';
+
+import { AuctionManagerEntryPoint } from '@src/constants';
 
 import {
   useCSPRStakeAmountRule,
+  useNewValidatorPublicKeyRule,
   useValidatorPublicKeyRule
 } from '@libs/ui/forms/form-validation-rules';
-import { AuctionManagerEntryPoint } from '@src/constants';
 
 export type StakeValidatorFormValues = {
   validatorPublicKey: string;
 };
 
+export type StakeNewValidatorFormValues = {
+  newValidatorPublicKey: string;
+};
+
 export type StakeAmountFormValues = {
   amount: string;
 };
@@ -21,7 +26,8 @@ export const useStakesForm = (
   amountMotes: string | null,
   stakesType: AuctionManagerEntryPoint,
   stakeAmountMotes: string,
-  delegatorsNumber?: number
+  delegatorsNumber?: number,
+  delegatorsNumberForNewValidator?: number
 ) => {
   const validatorFormSchema = Yup.object().shape({
     validatorPublicKey: useValidatorPublicKeyRule(stakesType, delegatorsNumber)
@@ -33,6 +39,18 @@ export const useStakesForm = (
     resolver: yupResolver(validatorFormSchema)
   };
 
+  const newValidatorFromSchema = Yup.object().shape({
+    newValidatorPublicKey: useNewValidatorPublicKeyRule(
+      delegatorsNumberForNewValidator
+    )
+  });
+
+  const newValidatorFormOptions: UseFormProps<StakeNewValidatorFormValues> = {
+    reValidateMode: 'onChange',
+    mode: 'onChange',
+    resolver: yupResolver(newValidatorFromSchema)
+  };
+
   const amountFormSchema = Yup.object().shape({
     amount: useCSPRStakeAmountRule(amountMotes, stakesType, stakeAmountMotes)
   });
@@ -45,6 +63,9 @@ export const useStakesForm = (
 
   return {
     validatorForm: useForm<StakeValidatorFormValues>(validatorFormOptions),
-    amountForm: useForm<StakeAmountFormValues>(amountFormOptions)
+    amountForm: useForm<StakeAmountFormValues>(amountFormOptions),
+    newValidatorForm: useForm<StakeNewValidatorFormValues>(
+      newValidatorFormOptions
+    )
   };
 };
diff --git a/src/libs/ui/forms/transfer-nft.ts b/src/libs/ui/forms/transfer-nft.ts
index 0bd2d1aad..e0fc37bbd 100644
--- a/src/libs/ui/forms/transfer-nft.ts
+++ b/src/libs/ui/forms/transfer-nft.ts
@@ -1,12 +1,11 @@
 import * as Yup from 'yup';
-import { useForm } from 'react-hook-form';
-import { UseFormProps } from 'react-hook-form/dist/types/form';
+import { yupResolver } from '@hookform/resolvers/yup/dist/yup';
+import { UseFormProps, useForm } from 'react-hook-form';
 
 import {
   usePaymentAmountRule,
   useRecipientPublicKeyRule
 } from '@libs/ui/forms/form-validation-rules';
-import { yupResolver } from '@hookform/resolvers/yup/dist/yup';
 
 export type TransferNftAmountFormValues = {
   paymentAmount: string;
diff --git a/src/libs/ui/forms/transfer.ts b/src/libs/ui/forms/transfer.ts
index b0821ae2c..db4e9e604 100644
--- a/src/libs/ui/forms/transfer.ts
+++ b/src/libs/ui/forms/transfer.ts
@@ -1,6 +1,8 @@
 import * as Yup from 'yup';
-import { useForm } from 'react-hook-form';
-import { UseFormProps } from 'react-hook-form/dist/types/form';
+import { yupResolver } from '@hookform/resolvers/yup/dist/yup';
+import { UseFormProps, useForm } from 'react-hook-form';
+
+import { TRANSFER_MIN_AMOUNT_MOTES } from '@src/constants';
 
 import {
   useCSPRTransferAmountRule,
@@ -9,9 +11,7 @@ import {
   useRecipientPublicKeyRule,
   useTransferIdMemoRule
 } from '@libs/ui/forms/form-validation-rules';
-import { yupResolver } from '@hookform/resolvers/yup/dist/yup';
 import { motesToCSPR } from '@libs/ui/utils/formatters';
-import { TRANSFER_MIN_AMOUNT_MOTES } from '@src/constants';
 
 export type TransferRecipientFormValues = {
   recipientPublicKey: string;
diff --git a/src/libs/ui/forms/unlock-wallet.ts b/src/libs/ui/forms/unlock-wallet.ts
index 9f86f2dd5..186d80f1a 100644
--- a/src/libs/ui/forms/unlock-wallet.ts
+++ b/src/libs/ui/forms/unlock-wallet.ts
@@ -1,7 +1,6 @@
 import * as Yup from 'yup';
-import { useForm } from 'react-hook-form';
-import { UseFormProps } from 'react-hook-form/dist/types/form';
 import { yupResolver } from '@hookform/resolvers/yup/dist/yup';
+import { UseFormProps, useForm } from 'react-hook-form';
 
 import { useVerifyPasswordAgainstHashRule } from './form-validation-rules';
 
diff --git a/src/libs/ui/index.ts b/src/libs/ui/index.ts
index 95a796613..da9ca7517 100644
--- a/src/libs/ui/index.ts
+++ b/src/libs/ui/index.ts
@@ -1,61 +1,2 @@
-export * from './components/button/button';
-export * from './components/form/form';
-export * from './components/form-field/form-field';
-export * from './components/input/input';
-export * from './components/textarea/textarea';
-export * from './components/link/link';
-export * from './components/popover-link/popover-link';
-export * from './components/typography/typography';
-export * from './components/svg-icon/svg-icon';
-export * from './components/svg-icon/svg-icon-social';
-export * from './components/tag/tag';
-export * from './components/tile/tile';
-export * from './components/list/list';
-export * from './components/accordion/accordion';
-export * from './components/checkbox/checkbox';
-export * from './components/flex-box/flex-box';
-export * from './components/flex-row/flex-row';
-export * from './components/hash/hash';
-export * from './components/site-favicon-badge/site-favicon-badge';
-export * from './components/password-visibility-icon/password-visibility-icon';
-export * from './components/copy-to-clipboard/copy-to-clipboard';
-export * from './components/secret-phrase-words-view/index';
-export * from './components/text-list/text-list';
-export * from './components/avatar/avatar';
-export * from './components/tooltip/tooltip';
-export * from './components/account-activity-plate/account-activity-plate';
-export * from './components/account-popover/account-popover';
-export * from './components/erc20-token-activity-list/erc20-token-activity-list';
-export * from './components/tabs/tabs';
-export * from './components/token-plate/token-plate';
-export * from './components/deploy-status/deploy-status';
-export * from './components/modal/modal';
-export * from './components/active-account-plate/active-account-plate';
-export * from './components/recipient-plate/recipient-plate';
-export * from './components/account-casper-activity-plate/account-casper-activity-plate';
-export * from './components/no-activity-view/no-activity-view';
-export * from './components/nft-media-placeholder/nft-media-placeholder';
-export * from './components/account-list/account-list';
-export * from './components/connection-status-badge/connection-status-badge';
-export * from './components/casper-token-activity-list/casper-token-activity-list';
-export * from './components/loading-activity-view/loading-activity-view';
-export * from './components/recipient-dropdown-input/recipient-dropdown-input';
-export * from './components/transfer-success-screen/transfer-succeess-screen';
-export * from './components/contract-icon/contract-icon';
-export * from './components/password-inputs/password-inputs';
-export * from './components/toggle/toggle';
-export * from './components/skeleton/skeleton';
-export * from './components/validator-dropdown-input/validator-dropdown-input';
-export * from './components/validator-plate/validator-plate';
-export * from './components/error/error';
-export * from './components/contacts-plate/contacts-plate';
-export * from './components/theme-switcher/theme-switcher';
-
-export * from './utils/match-media';
-export * from './utils/match-size';
-export * from './utils/hex-to-rgba';
-export * from './utils/get-color-from-theme';
 export * from './theme-config';
 export * from './global-style';
-export * from './types';
-export * from './utils/get-linear-gradient-color';
diff --git a/src/libs/ui/theme-config.ts b/src/libs/ui/theme-config.ts
index 1b2a0f98c..5e7e14182 100644
--- a/src/libs/ui/theme-config.ts
+++ b/src/libs/ui/theme-config.ts
@@ -1,5 +1,4 @@
-import { withMedia } from './utils/match-media';
-import { hexToRGBA } from './utils/hex-to-rgba';
+import { hexToRGBA } from '@libs/ui/utils';
 
 const PAGE_MIN_WIDTH = 320;
 const PAGE_MAX_WIDTH = 1176;
@@ -7,9 +6,6 @@ const PAGE_MAX_WIDTH = 1176;
 export const themeConfig = {
   minWidth: PAGE_MIN_WIDTH,
   maxWidth: PAGE_MAX_WIDTH,
-  // do not use for now, let's see if we need it at all
-  // media: MediaQueries,
-  withMedia: withMedia,
   zIndex: {
     dropdown: 10,
     modal: 15,
@@ -63,7 +59,7 @@ export const lightTheme = {
     contentAction: '#0A2EBF',
     contentActionCritical: '#CC000F',
     contentOnFill: '#FFFFFF',
-    contentWarning: '#E0BB38',
+    contentWarning: '#FF9500',
     contentPositive: '#2DDC88',
     contentGreenStatus: '#77FFBE',
     contentLightBlue: '#7490FF',
diff --git a/src/libs/ui/utils/constants.ts b/src/libs/ui/utils/constants.ts
deleted file mode 100644
index 5e48c4516..000000000
--- a/src/libs/ui/utils/constants.ts
+++ /dev/null
@@ -1 +0,0 @@
-export const MOTES_PER_CSPR_RATE = '1000000000'; // 1 000 000 000 MOTES === 1 CSPR
diff --git a/src/libs/ui/utils/formatters.ts b/src/libs/ui/utils/formatters.ts
index 5a68dd9ff..a71f218c8 100644
--- a/src/libs/ui/utils/formatters.ts
+++ b/src/libs/ui/utils/formatters.ts
@@ -1,11 +1,11 @@
+import { createIntl, createIntlCache } from '@formatjs/intl';
 import Big from 'big.js';
+// eslint-disable-next-line import/no-duplicates
 import { formatDistanceToNowStrict } from 'date-fns';
+// eslint-disable-next-line import/no-duplicates
 import en from 'date-fns/locale/en-US';
 
-import { createIntl, createIntlCache } from '@formatjs/intl';
-
-import { MOTES_PER_CSPR_RATE } from '@libs/ui/utils/constants';
-import { tokenDivider } from '@src/apps/popup/pages/home/components/tokens-list/utils';
+import { MOTES_PER_CSPR_RATE } from '@src/constants';
 
 const cache = createIntlCache();
 const intl = createIntl(
@@ -143,6 +143,9 @@ export const CSPRtoMotes = (cspr: string): string => {
   return Big(cspr).mul(MOTES_PER_CSPR_RATE).toString();
 };
 
+export const tokenDivider = (decimals: number | null) =>
+  Big(10).pow(decimals || 0);
+
 export const divideErc20Balance = (
   balance: string | null,
   decimals: number | null
diff --git a/src/libs/ui/utils/index.ts b/src/libs/ui/utils/index.ts
new file mode 100644
index 000000000..135a3f07a
--- /dev/null
+++ b/src/libs/ui/utils/index.ts
@@ -0,0 +1,5 @@
+export * from './get-color-from-theme';
+export * from './utils';
+export * from './formatters';
+export * from './get-linear-gradient-color';
+export * from './hex-to-rgba';
diff --git a/src/libs/ui/utils/match-media.ts b/src/libs/ui/utils/match-media.ts
deleted file mode 100644
index 309e63736..000000000
--- a/src/libs/ui/utils/match-media.ts
+++ /dev/null
@@ -1,94 +0,0 @@
-import * as CSS from 'csstype';
-import facepaint from 'facepaint';
-import { useEffect, useState } from 'react';
-import { CSSObject } from 'styled-components';
-
-export const Breakpoints = {
-  // there is NO "mobile breakpoint", because in mobile first
-  // styles for mobile are defined by default without media
-  tablet: 768,
-  laptop: 1024,
-  desktop: 1280
-};
-
-export const MediaQueries = {
-  // mobile: `(max-width:${Breakpoints['tablet'] - 1}px)`,
-  tablet: `(min-width:${Breakpoints['tablet']}px)`,
-  laptop: `(min-width:${Breakpoints['laptop']}px)`,
-  desktop: `(min-width:${Breakpoints['desktop']}px)`
-};
-
-type CSSPropertiesMulti = {
-  [P in keyof CSS.Properties<string | number>]:
-    | CSS.Properties<string | number>[P]
-    | CSS.Properties<string | number>[P][];
-};
-type CSSPseudos = { [K in CSS.Pseudos]?: CSSObjectMulti };
-
-interface CSSObjectMulti extends CSSPropertiesMulti, CSSPseudos {
-  [key: string]:
-    | Array<CSSObjectMulti | string | number | undefined>
-    | CSSObjectMulti
-    | string
-    | number
-    | undefined;
-}
-
-/** withMedia helper
- * @usage
- * ```
- * const StyledImg = styled.img(({ theme }) => theme.withMedia({
- *   display: ['mobileValue', 'tabletValue', 'laptopValue', 'desktopValue'],
- * }));
- * ```
- */
-export const withMedia: (styled: CSSObjectMulti) => CSSObject = facepaint([
-  `@media ${MediaQueries['tablet']}`,
-  `@media ${MediaQueries['laptop']}`,
-  `@media ${MediaQueries['desktop']}`
-]) as any;
-
-/** useMatchMedia helper
- * @usage
- * ```
- * const responsiveType = useMatchMedia(['mobile', 'tablet', 'laptop or desktop'], [deps])
- * <div>{responsiveType}</div>
- * ```
- */
-export const useMatchMedia = <T extends any>(
-  [onMobile, onTablet, onLaptop, onDesktop]: [T, T?, T?, T?],
-  dependencies: any[]
-) => {
-  const queries = [
-    MediaQueries['desktop'],
-    MediaQueries['laptop'],
-    MediaQueries['tablet']
-  ];
-
-  const mediaQueryLists = queries.map(q => window.matchMedia(q));
-
-  const getMatchArg = () => {
-    // get index of first media query that matches
-    const index = mediaQueryLists.findIndex(mql => mql.matches);
-    // return passed value or mobile when no match
-    return (
-      [onDesktop ?? onLaptop ?? onTablet, onLaptop ?? onTablet, onTablet]?.[
-        index
-      ] ?? onMobile
-    );
-  };
-
-  const [match, setMatch] = useState<T>(getMatchArg);
-
-  useEffect(() => {
-    const handler = () => setMatch(getMatchArg);
-    handler();
-    // Add listeners to media queries
-    mediaQueryLists.forEach(mql => mql.addListener(handler));
-    // Remove listeners on cleanup
-    return () => mediaQueryLists.forEach(mql => mql.removeListener(handler));
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [...dependencies]);
-
-  return match;
-};
diff --git a/src/libs/ui/utils/match-size.ts b/src/libs/ui/utils/match-size.ts
deleted file mode 100644
index 1289aec47..000000000
--- a/src/libs/ui/utils/match-size.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-/**
- *
- * @usage
- * ```
- * type Props = {
- *   height: "24" | "36" | "40" | "100%"
- * }
- * matchSize({ "24": 24, "36": 36, "40": 40, "100%": '100%' }, height),
- * ```
- */
-export const matchSize = <
-  SizeType extends string | number,
-  ReturnType extends any
->(
-  matchers: Record<SizeType, ReturnType>,
-  size: SizeType
-): ReturnType => {
-  const match = matchers[size];
-  if (match == null) {
-    throw Error(`Missing size declaration: ${size}`);
-  }
-  return match;
-};
diff --git a/src/libs/ui/utils/utils.ts b/src/libs/ui/utils/utils.ts
index a44bbbab0..e30f0b3af 100644
--- a/src/libs/ui/utils/utils.ts
+++ b/src/libs/ui/utils/utils.ts
@@ -1,3 +1,5 @@
+import { deriveSplitDataFromNamedKeyValue } from '@src/utils';
+
 import { getAccountHashFromPublicKey } from '@libs/entities/Account';
 import {
   Erc20TransferWithId,
@@ -6,7 +8,6 @@ import {
   ExtendedDeployWithId,
   MappedPendingTransaction
 } from '@libs/services/account-activity-service';
-import { deriveSplitDataFromNamedKeyValue } from '@src/utils';
 
 export const getPublicKeyFormTarget = (
   target?: ExtendedDeployClTypeResult,
diff --git a/src/manifest.v2.json b/src/manifest.v2.json
index 093b9008c..187e86c25 100755
--- a/src/manifest.v2.json
+++ b/src/manifest.v2.json
@@ -1,6 +1,6 @@
 {
   "manifest_version": 2,
-  "content_security_policy": "default-src 'none'; object-src 'none'; base-uri 'none'; form-action 'none'; frame-ancestors 'none'; script-src 'self'; style-src 'unsafe-inline'; img-src https: data:; media-src https: data:; connect-src https://event-store-api-clarity-testnet.make.services https://event-store-api-clarity-mainnet.make.services https://casper-assets.s3.amazonaws.com/ https://image-proxy-cdn.make.services/ https://casper-testnet-node-proxy.make.services/rpc https://casper-node-proxy.make.services/rpc",
+  "content_security_policy": "default-src 'none'; object-src 'none'; base-uri 'none'; form-action 'none'; frame-ancestors 'none'; script-src 'self'; style-src 'unsafe-inline'; img-src https: data:; media-src https: data:; connect-src https://event-store-api-clarity-testnet.make.services https://event-store-api-clarity-mainnet.make.services https://casper-assets.s3.amazonaws.com/ https://image-proxy-cdn.make.services/ https://casper-testnet-node-proxy.make.services/rpc https://casper-node-proxy.make.services/rpc https://cspr-wallet-api.dev.make.services/ https://api.casperwallet.io/",
   "icons": {
     "16": "logo16.png",
     "64": "logo64.png",
@@ -15,7 +15,9 @@
     "https://image-proxy-cdn.make.services/*",
     "https://casper-assets.s3.amazonaws.com/*",
     "https://casper-testnet-node-proxy.make.services/*",
-    "https://casper-node-proxy.make.services/*"
+    "https://casper-node-proxy.make.services/*",
+    "https://cspr-wallet-api.dev.make.services/*",
+    "https://api.casperwallet.io/*"
   ],
   "declarative_net_request": {
     "rule_resources": [
diff --git a/src/manifest.v2.safari.json b/src/manifest.v2.safari.json
index cf46b28b3..d2a173734 100644
--- a/src/manifest.v2.safari.json
+++ b/src/manifest.v2.safari.json
@@ -12,7 +12,9 @@
     "storage",
     "tabs",
     "declarativeNetRequest",
-    "https://image-proxy-cdn.make.services/*"
+    "https://image-proxy-cdn.make.services/*",
+    "https://cspr-wallet-api.dev.make.services/*",
+    "https://api.casperwallet.io/*"
   ],
   "declarative_net_request": {
     "rule_resources": [
diff --git a/src/manifest.v3.json b/src/manifest.v3.json
index 0335395b8..e1765dfbe 100644
--- a/src/manifest.v3.json
+++ b/src/manifest.v3.json
@@ -1,7 +1,7 @@
 {
   "manifest_version": 3,
   "content_security_policy": {
-    "extension_pages": "default-src 'none'; object-src 'none'; base-uri 'none'; form-action 'none'; frame-ancestors 'none'; script-src 'self'; style-src 'unsafe-inline'; img-src https: data:; media-src https: data:; connect-src https://event-store-api-clarity-testnet.make.services https://event-store-api-clarity-mainnet.make.services https://casper-assets.s3.amazonaws.com/ https://image-proxy-cdn.make.services/ https://casper-testnet-node-proxy.make.services/rpc https://casper-node-proxy.make.services/rpc"
+    "extension_pages": "default-src 'none'; object-src 'none'; base-uri 'none'; form-action 'none'; frame-ancestors 'none'; script-src 'self'; style-src 'unsafe-inline'; img-src https: data:; media-src https: data:; connect-src https://event-store-api-clarity-testnet.make.services https://event-store-api-clarity-mainnet.make.services https://casper-assets.s3.amazonaws.com/ https://image-proxy-cdn.make.services/ https://casper-testnet-node-proxy.make.services/rpc https://casper-node-proxy.make.services/rpc https://cspr-wallet-api.dev.make.services/ https://api.casperwallet.io/"
   },
   "icons": {
     "16": "logo16.png",
@@ -25,7 +25,11 @@
       }
     ]
   },
-  "host_permissions": ["https://image-proxy-cdn.make.services/*"],
+  "host_permissions": [
+    "https://image-proxy-cdn.make.services/*",
+    "https://cspr-wallet-api.dev.make.services/*",
+    "https://api.casperwallet.io/*"
+  ],
   "background": {
     "service_worker": "./background.bundle.js"
   },
diff --git a/src/utils.ts b/src/utils.ts
index 66ce1b7e7..5a35e3946 100644
--- a/src/utils.ts
+++ b/src/utils.ts
@@ -1,14 +1,15 @@
 import Big from 'big.js';
 import { CLPublicKey } from 'casper-js-sdk';
+import { runtime } from 'webextension-polyfill';
 
 import { Browser, NFT_TOKENS_REFRESH_RATE } from '@src/constants';
+
 import {
   NFTTokenMetadata,
   NFTTokenMetadataEntry,
   NFTTokenResult
 } from '@libs/services/nft-service';
 import { queryClient } from '@libs/services/query-client';
-import browser from 'webextension-polyfill';
 
 interface ImageProxyUrlProps {
   ttl: string;
@@ -240,7 +241,7 @@ export const deriveMediaType = async (
   return 'unknown';
 };
 
-export const isSafariExtension = browser.runtime.id.startsWith(
+export const isSafariExtension = runtime.id.startsWith(
   'software.make.Casper-Wallet.Extension'
 );
 
diff --git a/tsconfig.json b/tsconfig.json
index 63415fd11..a86324ca3 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -20,13 +20,12 @@
       "@popup/*": ["src/apps/popup/*"],
       "@import-account-with-file/*": ["src/apps/import-account-with-file/*"],
       "@connect-to-app/*": ["src/apps/connect-to-app/*"],
+      "@signature-request/*": ["src/apps/signature-request/*"],
+      "@onboarding/*": ["src/apps/onboarding/*"],
       "@background/*": ["src/background/*"],
       "@content/*": ["src/content/*"],
-      "@layout/*": ["src/libs/layout/*"],
       "@libs/*": ["src/libs/*"],
-      "@hooks/*": ["src/hooks/*"],
-      "@mocks/*": ["__mocks__/*"],
-      "@testHelpers/*": ["__testHelpers__/*"]
+      "@hooks/*": ["src/hooks/*"]
     }
   },
   "include": ["src", "playground/src/mocked-data.ts"],
diff --git a/xcode-project/Casper Wallet/Casper Wallet.xcodeproj/project.pbxproj b/xcode-project/Casper Wallet/Casper Wallet.xcodeproj/project.pbxproj
index 1c3557c79..4af16a7ff 100644
--- a/xcode-project/Casper Wallet/Casper Wallet.xcodeproj/project.pbxproj	
+++ b/xcode-project/Casper Wallet/Casper Wallet.xcodeproj/project.pbxproj	
@@ -564,7 +564,7 @@
 				CODE_SIGN_ENTITLEMENTS = "Casper Wallet/Casper Wallet.entitlements";
 				CODE_SIGN_STYLE = Automatic;
 				COMBINE_HIDPI_IMAGES = YES;
-				CURRENT_PROJECT_VERSION = 42;
+				CURRENT_PROJECT_VERSION = 46;
 				ENABLE_HARDENED_RUNTIME = YES;
 				GENERATE_INFOPLIST_FILE = YES;
 				INFOPLIST_FILE = "Casper Wallet/Info.plist";
@@ -578,7 +578,7 @@
 					"@executable_path/../Frameworks",
 				);
 				MACOSX_DEPLOYMENT_TARGET = 10.14;
-				MARKETING_VERSION = 1.8.0;
+				MARKETING_VERSION = 1.8.1;
 				OTHER_LDFLAGS = (
 					"-framework",
 					SafariServices,
@@ -601,7 +601,7 @@
 				CODE_SIGN_ENTITLEMENTS = "Casper Wallet/Casper Wallet.entitlements";
 				CODE_SIGN_STYLE = Automatic;
 				COMBINE_HIDPI_IMAGES = YES;
-				CURRENT_PROJECT_VERSION = 42;
+				CURRENT_PROJECT_VERSION = 46;
 				ENABLE_HARDENED_RUNTIME = YES;
 				GENERATE_INFOPLIST_FILE = YES;
 				INFOPLIST_FILE = "Casper Wallet/Info.plist";
@@ -615,7 +615,7 @@
 					"@executable_path/../Frameworks",
 				);
 				MACOSX_DEPLOYMENT_TARGET = 10.14;
-				MARKETING_VERSION = 1.8.0;
+				MARKETING_VERSION = 1.8.1;
 				OTHER_LDFLAGS = (
 					"-framework",
 					SafariServices,